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/angularjs/1.3.15/angular-route.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">


<div ng-app="denja" class="row">
<div class="col-md-12">
    
    <div ng-controller="TeslaTripController as o" class="well" >
        <select ng-model='o.view'>
            <option value='list'>Lijst van trips</option>
            <option value='trip'>Toon één trip</option>
        </select>
        <div ng-show="o.view == 'list'">
            <a ng-click="o.viewtrip(1);">view trip 1</a>            
        </div>
        <div ng-show="o.view == 'trip'">
            <h1>Trip {{o.trip.id}} - {{o.trip.desc}}</h1>     
            <table class="table table-hover table-striped" >
                <tr>
                    <th>Stop</th>
                    <th>Planning</th>
                    <th></th>
                </tr>
                <tr ng-repeat="wp in o.trip.waypoints">
                  
                    <td> 
                        {{$index}}. {{wp.name}}</td>
                    <td>{{wp.theoretical.distance}} - cumul: {{wp.theoretical.distance_cumul}}
                       </td> 
                    <td>
                        <input type="number" ng-model="wp.theoretical.distance" ng-change="o.initCumul()"/>
                    </td>
                    
                    
                </tr>
                
            </table>
        </div>
    </div>
</div>
</div>

JavaScript

(function() {
    
    
    // let's define our module
    var app = angular.module('denja', ['ngRoute']);
       
    app.factory('TeslaTripService', ['$interval', function($interval) {
        var d = {
            view: 'list',
            selectedtrip: 1,
            trip: {
                id: 1,
                desc: 'Trip naar de midi',
                waypoints: [
                    {name: 'Home',
                     theoretical: {
                         distance: 0,
                         typical: 380,
                         consumption: 0,
                         time: 0
                     },
                     efffective: {
                         arrival: {
                             distance: 0,
                             typical: 380,
                             consumption: 0,
                             time: 0
                         },
                         chargestart: {
                             distance: 0,
                             typical: 380,
                             consumption: 0,
                             time: 0
                         },
                         chargeend: {
                             distance: 0,
                             typical: 380,
                             consumption: 0,
                             time: 0
                         },
                         departure:{
                             distance: 0,
                             typical: 380,
                             consumption: 0,
                             time: 0
                         }
                     }
                         
                    },
                    {name: 'Aartselaar SC',
                     theoretical: {
                         distance: 25,
                         typical: 380,
                         consumption: 0,
                         time: 0
                     },
                     efffective: {
                         arrival: {
            ...