trc-client-core/src/technical/FixItRightView.jsx

The core of the TRC Client

import React from 'react';
import {State} from 'react-router';

import MenuToggleButton from 'trc-client-core/src/components/MenuToggleButton';
import Carousel from 'trc-client-core/src/components/Carousel';
import Video from 'trc-client-core/src/components/Video';

import Grid from 'trc-client-core/src/components/Grid';
import Col from 'trc-client-core/src/components/Col';

var FixItRightView = React.createClass({
    displayName: 'FixItRightView',
    mixins: [State],
    render: function () {
        var page;
        switch(this.props.params.section){
            case "videos":
                page = this.renderFixVideo();
                break;
            default:
                page = this.renderFixHome();
                break;
        }
        return (
            <div>
                <Carousel modifier="hero">
                    <li>
                    <img src="//static.toyotainstituteaustralia.com.au/img/content/banner/banner-fixitright.jpg" width="1024px" height="320px" />
                        <div className="Carousel_solo">
                            <div className="Carousel_solo_title">
                                <p><small>The First Repair</small></p>
                                <p>Fix-It-Right</p>
                            </div>
                        </div>
                        <div className="Caption">
                            
                        </div>
                    </li>
                    
                </Carousel>
            <Grid className="row-bottom">
                <Col>
                    <h1>Fix-It-Right</h1>
                    <div>
                        <p>{"To support Toyota's commitment to Quality & ensure your guest's satisfaction, Fix it Right implementation is the cornerstone of your service department."}</p>
                    </div>
                </Col>
                <Col width={4}>
                    <div className="push-top">
                    <a  href="#/technical/fixitright"><img src="//static.toyotainstituteaustralia.com.au/img/content/technical/fixitright/logo.png"  alt="" /></a>
                    </div>
                </Col>
            </Grid>
            <Grid>
                <Col>
                    {page}
                </Col>
                <Col width={4}>
                    <ul className="IconList IconList-technical IconList-child ">
                        <MenuToggleButton title="Videos" icon="57729" >
                               <div>
                                   <ul className="IconList IconList-child  IconList-grandchild">                             
                                       <li><a href="#/technical/fixitright/videos/About">About</a></li>
                                       <li><a href="#/technical/fixitright/videos/Appointment">Appointment</a></li>
                                       <li><a href="#/technical/fixitright/videos/Reception Preparation">Reception Preparation</a></li>
                                       <li><a href="#/technical/fixitright/videos/Reception">Reception</a></li>
                                       <li><a href="#/technical/fixitright/videos/Workshop Process">Workshop Process</a></li>
                                       <li><a href="#/technical/fixitright/videos/Customer Contact Status Change">Customer Contact Status Change</a></li>
                                       <li><a href="#/technical/fixitright/videos/Quality Check">Quality Check</a></li>
                                       <li><a href="#/technical/fixitright/videos/Delivery">Delivery</a></li>
                                       <li><a href="#/technical/fixitright/videos/Post Service Follow Up">Post Service Follow Up</a></li>
                                   </ul>                   
                               </div>
                        </MenuToggleButton>
                    </ul>
                </Col>
            </Grid>
            </div>
        );
    },
    renderFixHome: function() {
        return (
            <div >
                <h2 className="hug-top">Videos <span className="t-muted"> About</span></h2>                
                <Video id="121862309"/>
            </div>
        );
    },
    renderFixVideo: function() {
        var title = this.props.params.vimeoId;

        var numberMap = {
            "About": "121862309",
            "Appointment": "121862347",
            "Reception Preparation": "121862400",
            "Reception": "121862403",
            "Workshop Process": "121862355",
            "Customer Contact Status Change": "121862325",
            "Quality Check": "121862346",
            "Delivery": "121862377",
            "Post Service Follow Up": "121862382"
        };
        return (
            <div>
                <h2 className="hug-top">Videos <span className="t-muted">{title}</span></h2>
                <Video id={numberMap[title]}/>
            </div>
        );
    }
});

        

module.exports = FixItRightView;