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" >
        <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>

JavaScript

(function() {
    
    
    // let's define our module
    var app = angular.module('denja', ['ngRoute']);
       
    app.factory('TeslaTripService', ['$interval', function($interval) {
        var d = {
            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: {
                             distance: 0,
                         ...