JSFiddle - React, Tailwind, and code Playground

by flexin

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div ng-app="denja" ng-controller="TeslaTripController as o" >
<div  class="row ">
<div class="col-md-12">
    <div class="well ">

		<div ng-show="o.view == 'list'" ng-model="o.trips">
			<h1 >Overzicht trips</h1>
			<table class="table table-hover table-striped">
				<tbody><tr>
					<th>Datum</th>
					<th>Omschrijving</th>
					<th>Status</th>
				</tr>
				<tr ng-repeat="trip in o.trips" >
				  
					<td >{{trip.date}}</td>
					<td >{{trip.name}}</td>
					<td >{{trip.status}}</td>
					<td><a class="btn btn-primary btn-lg" ng-click="o.gettrip(trip.id);">Detail</a></td>
				</tr>
			</tbody></table>
		</div>
		
		<div ng-show="o.view == 'detail'">
			<a class="btn btn-primary  btn-lg" ng-click="o.gotolist();">Go back to list</a>
            <h1 class="ng-binding">{{o.trip.desc}}</h1>
            <h3 class="ng-binding"> We zijn {{o.status[o.trip.statusid].description}} {{o.trip.waypoints[o.trip.etape].name}}.
                <a class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myArrival" ng-show="o.trip.statusid == 0" >Aankomst</a>
                <a class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myChargeStart" ng-show="o.trip.statusid == 1" >Start laden</a>
                <a class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myChargeEnd" ng-show="o.trip.statusid == 2" >Stop laden</a>
                <a class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myDeparture"  ng-show="o.trip.statusid == 1 || o.trip.statusid == 3" >Vertrek</a>
            </h3>
            <table class="table table-hover table-striped">
               ...

JavaScript

(function() {
    
    // let's define our module
    var app = angular.module('denja');





    app.factory('TeslaTripService', ['$interval', '$http', function($interval, $http) {
		var d = {
			trips: [{"id":4,"date":"19-04-2015","name":"La Vielle Ferme - Thuis(1)","status":"Gepland"}]
            ,
            trip: {
                id: 1,
                desc: 'La Vielle Ferme - Thuis',
                etape: 0,
                statusid: 3,
                waypoints: [
                    {name: 'SuC Macon - La Vielle Ferme',
                        id: 1,
                        location: '',
                        overview: {
                            distance: '',
                            totaldistance: '',
                            typical: '',
                            totaltypical: '',
                            consumption: '',
                            totalconsumption: '',
                            averageconsumption: '',
                            drivetime: '',
                            totaldrivetime: '',
                            chargetime: '',
                            totalchargetime: '',
                            chargeneeded: 340,
                            arrivaltime: '',
                            departuretime: '10:00'
                        },
                        theoretical: {
                            arrival: {
                                distance: 0,
                                typical: 0,
                                consumption: 0,
                                time: 0
                            },
                            chargestart: {
                                typical: 0,
                                time: 0
                            },
                            chargeend: {
                                typical: 0,
                                time: 0
                            },
                            departure:{
                               ...