Projekt

Obecné

Profil

« Předchozí | Další » 

Revize 49df590a

Přidáno uživatelem Jan Kohlíček před téměř 7 roky(ů)

refs #6647: Vytvoření grafů průměrná rychlost a počet vozidel, lepší zapsání a mazání dat z url, přidaná možnost jít zpět, validace časového rozsahu

Zobrazit rozdíly:

frontend/index.php
15 15 
          integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
16 16 
    <link rel="stylesheet" media="screen" href="./assets/css/main.css">
17 17 

  		




  18
  
  
    
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>


  		




  19
  
  
    
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.min.js"></script>


  		




  20
  
  
    
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-resource.min.js"></script>


  		




  21
  
  
    
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-sanitize.min.js"></script>


  		




  
  18
  
    
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js"></script>


  		




  
  19
  
    
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular-route.min.js"></script>


  		




  
  20
  
    
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular-resource.min.js"></script>


  		




  
  21
  
    
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular-sanitize.min.js"></script>


  		




  22
  22
  
    

  		




  23
  23
  
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>


  		




  
  24
  
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>


  		




  
  25
  
    

  		




  24
  26
  
    

  		




  25
  27
  
    
    <script>


  		




  26
  28
  
    
        <?php


  		




  27
  29
  
    
        /* JEN PRO TESTOVANI, POZDEJI SE ODSTRANIT, A NAHRADIT NASDILENOU KNIHOVNOU */


  		




  
  30
  
    
        //$base_url = 'http://students.kiv.zcu.cz/~valesz/index.php/api/v1';


  		




  28
  31
  
    
        $base_url = './../backend/public/api/v1';


  		




  29
  32
  
    

  		




  30
  33
  
    
        include_once '../backend/lib/generateToken.php';


  		




  ......




  39
  42
  
    
<body ng-controller="mainController" class="container-fluid">


  		




  40
  43
  
    

  		




  41
  44
  
    

  		




  42
  
  
    

  		




  43
  
  
    

  		




  44
  45
  
    
<div id="loadingScreen" ng-show="showLoadingScreen">


  		




  45
  46
  
    
    <h1 id="logo">


  		




  46
  47
  
    
        <img src="./assets/img/favicon.png" alt="logo"> Průjezd vozidel


  		




  47
  48
  
    
        <small class="text-muted">Plzeňský kraj</small>


  		




  48
  49
  
    
    </h1>


  		




  49
  50
  
    
    <div class="loading"></div>


  		




  50
  
  
    
    <noscript id="pvpk_noscript">Aplikace vyžaduje Javascript. Aktivujte Javascript a znovu načtěte tuto stránku.</noscript>


  		




  
  51
  
    
    <noscript id="noscript">Aplikace vyžaduje Javascript. Aktivujte Javascript a znovu načtěte tuto stránku.


  		




  
  52
  
    
    </noscript>


  		




  51
  53
  
    
</div>


  		




  52
  54
  
    

  		




  53
  
  
    
<div class="row h-100">


  		




  
  55
  
    
<div class="row h-100" ng-init="load()">


  		




  54
  56
  
    

  		




  55
  57
  
    
    <!--SEARCH section-->


  		




  56
  58
  
    
    <section class="search col-12 col-sm-6 col-lg-3" id="search" ng-controller="searchController"


  		




  ......




  69
  71
  
    
                    <label for="searchLocation" class="h5">Hledání - lokalit</label>


  		




  70
  72
  
    
                    <input type="search" id="searchLocation" name="location"


  		




  71
  73
  
    
                           class="form-control form-control-sm" placeholder="Město, ulice, ..."


  		




  72
  
  
    
                           ng-model="search.location" required maxlength="255" autocomplete="off"


  		




  73
  
  
    
                           ng-change="searchLocations(true)">


  		




  
  74
  
    
                           ng-model="search.q" required maxlength="255" autocomplete="off"


  		




  
  75
  
    
                           ng-change="searchLocations()"


  		




  
  76
  
    
                           ng-model-options="{debounce: 600}">


  		




  74
  77
  
    
                </div>


  		




  75
  
  
    

  		




  76
  78
  
    
                <div class="custom-control custom-checkbox mb-3">


  		




  77
  79
  
    
                    <input type="checkbox" id="searchDirection" name="searchDirection" class="custom-control-input"


  		




  78
  
  
    
                           checked ng-model="search.direction" required ng-change="searchLocations()">


  		




  
  80
  
    
                           checked required


  		




  
  81
  
    
                           ng-model="search.isDirection"


  		




  
  82
  
    
                           ng-change="searchLocations()"


  		




  
  83
  
    
                           ng-model-options="{debounce: 600}">


  		




  79
  84
  
    
                    <label for="searchDirection" class="custom-control-label">Rozlišovat směr</label>


  		




  80
  85
  
    
                </div>


  		




  81
  
  
    

  		




  82
  
  
    
                <div class="form-row">


  		




  83
  
  
    
                    <div class="form-group col">


  		




  84
  
  
    
                        <label for="searchFromDate">Období</label>


  		




  85
  
  
    
                        <input type="date" id="searchFromDate" name="fromDate"


  		




  86
  
  
    
                               class="form-control form-control-sm" ng-model="search.fromDate" required


  		




  87
  
  
    
                               ng-class="{ 'is-invalid': search.fromDate>search.toDate}"


  		




  88
  
  
    
                               max="{{maxDate | date:'yyyy-MM-dd'}}">


  		




  89
  
  
    
                        <div class="invalid-feedback">


  		




  90
  
  
    
                            Tento datum musí být menší.


  		




  91
  
  
    
                        </div>


  		




  92
  
  
    
                    </div>


  		




  93
  
  
    

  		




  94
  
  
    
                    <div class="form-group col">


  		




  95
  
  
    
                        <label for="searchToDate" class="invisible">Období</label>


  		




  96
  
  
    
                        <input type="date" id="searchToDate" name="toDateTime"


  		




  97
  
  
    
                               class="form-control form-control-sm" ng-model="search.toDate" required


  		




  98
  
  
    
                               ng-class="{ 'is-invalid': search.fromDate>search.toDate}"


  		




  99
  
  
    
                               max="{{maxDate | date:'yyyy-MM-dd'}}">


  		




  100
  
  
    
                        <div class="invalid-feedback">


  		




  101
  
  
    
                            Tento datum musí být vetší.


  		




  102
  
  
    
                        </div>


  		




  103
  
  
    
                    </div>


  		




  104
  
  
    
                </div>


  		




  105
  
  
    

  		




  106
  
  
    
                <div class="form-row">


  		




  107
  
  
    
                    <div class="form-group col">


  		




  108
  
  
    
                        <label for="searchFromTime">Časové rozmezí dne</label>


  		




  109
  
  
    
                        <input type="time" id="searchFromTime" class="form-control form-control-sm"


  		




  110
  
  
    
                               ng-model="search.fromTime" required


  		




  111
  
  
    
                               ng-class="{'is-invalid': search.fromTime>search.toTime}">


  		




  112
  
  
    
                        <div class="invalid-feedback">


  		




  113
  
  
    
                            Tento čas musí být menší.


  		




  114
  
  
    
                        </div>


  		




  115
  
  
    
                    </div>


  		




  116
  
  
    

  		




  117
  
  
    
                    <div class="form-group col">


  		




  118
  
  
    
                        <label for="searchToTime" class="invisible">Časové rozmezí dne</label>


  		




  119
  
  
    
                        <input type="time" id="searchToTime" class="form-control form-control-sm"


  		




  120
  
  
    
                               ng-model="search.toTime" required


  		




  121
  
  
    
                               ng-class="{'is-invalid': search.fromTime>search.toTime}">


  		




  122
  
  
    
                        <div class="invalid-feedback">


  		




  123
  
  
    
                            Tento čas musí být vetší.


  		




  124
  
  
    
                        </div>


  		




  125
  
  
    
                    </div>


  		




  126
  
  
    
                </div>


  		




  127
  86
  
    
            </form>


  		




  128
  87
  
    

  		




  129
  
  
    
            <div class="result-locations mb-5 mt-5">


  		




  
  88
  
    
            <div class="result-locations mb-4 mt-4">


  		




  130
  89
  
    
                <h5>Lokality</h5>


  		




  131
  90
  
    

  		




  132
  91
  
    
                <div class="list-group" ng-show="locations.length>0 && !showSearchLoading">


  		




  133
  92
  
    
                    <a href="" id="location-{{location.id}}"


  		




  134
  93
  
    
                       class="list-group-item list-group-item-action flex-column align-items-start"


  		




  135
  94
  
    
                       ng-repeat="location in locations"


  		




  136
  
  
    
                       ng-click="selectDevice(location.id)"


  		




  137
  
  
    
                       ng-class="{'active': $root.selectDevice.id == location.id}">


  		




  
  95
  
    
                       ng-click="selectDevice(location.id,location.direction)"


  		




  
  96
  
    
                       ng-class="{'active': $root.selectDevice.id == location.id && (!$root.selectDevice.direction  || $root.selectDevice.direction ==location.direction)}">


  		




  138
  97
  
    

  		




  139
  98
  
    
                        <div class="d-flex w-100 justify-content-between">


  		




  140
  99
  
    
                            <h6 class="mb-1">{{location.name}}</h6>


  		




  141
  
  
    
                            <small ng-show="search.direction">{{location.direction ==1 ? 'po směru': 'proti směru' }}


  		




  
  100
  
    
                            <small ng-show="search.isDirection">{{location.direction ==1 ? 'po směru': 'proti směru' }}


  		




  142
  101
  
    
                            </small>


  		




  143
  102
  
    
                        </div>


  		




  144
  103
  
    
                        <small>


  		




  ......




  161
  120
  
    

  		




  162
  121
  
    

  		




  163
  122
  
    
    <!--INFO section-->


  		




  164
  
  
    
    <section class="info col-12 col-sm-6 col-lg-3" id="info" ng-show="$root.selectDevice!=null"


  		




  
  123
  
    
    <section class="info col-12 col-sm-6 col-lg-4" id="info" ng-show="$root.selectDevice!=null"


  		




  165
  124
  
    
             ng-controller="infoController">


  		




  166
  125
  
    

  		




  167
  126
  
    
        <header class="mt-2">


  		




  168
  
  
    
            <h5>{{$root.selectDevice.name}}


  		




  
  127
  
    
            <h4>{{$root.selectDevice.name}}


  		




  169
  128
  
    
                <button type="button" class="close" aria-label="Close" ng-click="infoClose()">


  		




  170
  129
  
    
                    <span aria-hidden="true">&times;</span>


  		




  171
  130
  
    
                </button>


  		




  172
  
  
    
            </h5>


  		




  
  131
  
    
            </h4>


  		




  173
  132
  
    
            <small>


  		




  174
  133
  
    
                <address>{{$root.selectDevice.street}}, {{$root.selectDevice.town}}</address>


  		




  
  134
  
    
                <span>Směr: <strong>{{$root.selectDevice.direction  ? ($root.selectDevice.direction ==1 ? 'po směru': 'proti směru') : 'po směru i proti směru'}}</strong></span>


  		




  175
  135
  
    
            </small>


  		




  176
  136
  
    
        </header>


  		




  177
  137
  
    

  		




  
  138
  
    
        <div class="mb-4 mt-4" ng-form="rangeForm">


  		




  
  139
  
    
            <div class="form-row">


  		




  
  140
  
    
                <div class="form-group col">


  		




  
  141
  
    
                    <label for="rangeFromDate">Období</label>


  		




  
  142
  
    
                    <input type="date" id="rangeFromDate"


  		




  
  143
  
    
                           class="form-control form-control-sm" ng-model="range.fromDate" required


  		




  
  144
  
    
                           ng-class="{ 'is-invalid': range.fromDate>=range.toDate}"


  		




  
  145
  
    
                           ng-change="changeRange()"


  		




  
  146
  
    
                           ng-model-options="{updateOn: 'default', allowInvalid: true, debounce: 600}">


  		




  
  147
  
    
                    <div class="invalid-feedback">


  		




  
  148
  
    
                        Tento datum musí být menší.


  		




  
  149
  
    
                    </div>


  		




  
  150
  
    
                </div>


  		




  
  151
  
    

  		




  
  152
  
    

  		




  
  153
  
    
                <div class="form-group col">


  		




  
  154
  
    
                    <label for="rangeToDate" class="invisible">Období</label>


  		




  
  155
  
    
                    <input type="date" id="rangeToDate"


  		




  
  156
  
    
                           class="form-control form-control-sm" ng-model="range.toDate" required


  		




  
  157
  
    
                           ng-class="{ 'is-invalid': range.fromDate>=range.toDate}"


  		




  
  158
  
    
                           ng-change="changeRange()"


  		




  
  159
  
    
                           ng-model-options="{updateOn: 'default', allowInvalid: true, debounce: 600}">


  		




  
  160
  
    
                    <div class="invalid-feedback">


  		




  
  161
  
    
                        Tento datum musí být vetší.


  		




  
  162
  
    
                    </div>


  		




  
  163
  
    
                </div>


  		




  
  164
  
    
            </div>


  		




  
  165
  
    

  		




  
  166
  
    
            <div class="form-row">


  		




  
  167
  
    
                <div class="form-group col">


  		




  
  168
  
    
                    <label for="rangehFromTime">Časové rozmezí dne</label>


  		




  
  169
  
    
                    <input type="time" id="rangeFromTime" class="form-control form-control-sm"


  		




  
  170
  
    
                           ng-model="range.fromTime" required


  		




  
  171
  
    
                           ng-class="{'is-invalid': range.fromTime>=range.toTime}"


  		




  
  172
  
    
                           ng-change="changeRange()"


  		




  
  173
  
    
                           ng-model-options="{debounce: 600}">


  		




  
  174
  
    
                    <div class="invalid-feedback">


  		




  
  175
  
    
                        Tento čas musí být menší.


  		




  
  176
  
    
                    </div>


  		




  
  177
  
    
                </div>


  		




  
  178
  
    

  		




  
  179
  
    
                <div class="form-group col">


  		




  
  180
  
    
                    <label for="rangeToTime" class="invisible">Časové rozmezí dne</label>


  		




  
  181
  
    
                    <input type="time" id="rangeToTime" class="form-control form-control-sm"


  		




  
  182
  
    
                           ng-model="range.toTime" required


  		




  
  183
  
    
                           ng-class="{'is-invalid': range.fromTime>=range.toTime}"


  		




  
  184
  
    
                           ng-change="changeRange()"


  		




  
  185
  
    
                           ng-model-options="{debounce: 600}">


  		




  
  186
  
    
                    <div class="invalid-feedback">


  		




  
  187
  
    
                        Tento čas musí být vetší.


  		




  
  188
  
    
                    </div>


  		




  
  189
  
    
                </div>


  		




  
  190
  
    
            </div>


  		




  
  191
  
    
        </div>


  		




  
  192
  
    

  		




  
  193
  
    

  		




  178
  194
  
    
        <div class="loading" ng-show="showInfoLoading"></div>


  		




  179
  195
  
    

  		




  180
  
  
    
        <h3 class="mt-5">Graf #1</h3>


  		




  
  196
  
    
        <div id="graphs" ng-show="$root.selectDevice!=null && $root.selectDevice.traffics.length>0 && !showInfoLoading">


  		




  
  197
  
    
            <h4 class="mt-4">Průměrná rychlost</h4>


  		




  
  198
  
    
            <canvas id="graphAverageSpeed"></canvas>


  		




  
  199
  
    

  		




  
  200
  
    

  		




  
  201
  
    
            <h4 class="mt-4">Počet vozidel</h4>


  		




  
  202
  
    
            <form>


  		




  
  203
  
    
                <div class="form-group">


  		




  
  204
  
    
                    <select id="typeVehicle" class="custom-select custom-select-sm"


  		




  
  205
  
    
                            ng-model="typeVehicle"


  		




  
  206
  
    
                            ng-change="renderGraphNumberVehicles()"


  		




  
  207
  
    
                            ng-options="vehicle.id as vehicle.name for vehicle in filterVehicles">


  		




  
  208
  
    
                        <option value="">Všechna vozidla</option>


  		




  
  209
  
    
                    </select>


  		




  
  210
  
    
                </div>


  		




  
  211
  
    
            </form>


  		




  
  212
  
    
            <canvas id="graphNumberVehicles"></canvas>


  		




  
  213
  
    

  		




  
  214
  
    
        </div>


  		




  181
  215
  
    

  		




  182
  
  
    
        <h3 class="mt-5">Graf #2</h3>


  		




  183
  
  
    
        <div class="form-group">


  		




  184
  
  
    
            <label for="searchVehicle">Vozidla</label>


  		




  185
  
  
    
            <select id="searchVehicle" class="custom-select custom-select-sm" ng-model="search.vehicle">


  		




  186
  
  
    
                <option value="">Všechna vozidla</option>


  		




  187
  
  
    
                <option ng-repeat="vehicle in vehicles" value="{{vehicle.id}}">{{vehicle.name}}</option>


  		




  188
  
  
    
            </select>


  		




  
  216
  
    
        <div ng-show="$root.selectDevice && $root.selectDevice.traffics.length==0 && !showInfoLoading">


  		




  
  217
  
    
            <small class="form-text text-muted text-center">Data nejsou k dispozici</small>


  		




  189
  218
  
    
        </div>


  		




  190
  219
  
    

  		




  191
  
  
    
        <h3 class="mt-5">Graf #3</h3>


  		




  192
  220
  
    

  		




  193
  221
  
    
    </section>


  		




  194
  222
  
    

  		




  195
  223
  
    

  		




  196
  224
  
    
    <!--MAP section-->


  		




  197
  
  
    
    <section class="map col-12 col-sm-12" id="map"


  		




  198
  
  
    
             ng-class="{ 'col-lg-9': $root.selectDevice==null, 'col-lg-6': $root.selectDevice!=null }"


  		




  
  225
  
    
    <section class="map col-12 col-sm-12 " id="map"


  		




  
  226
  
    
             ng-class="{ 'col-lg-9': $root.selectDevice==null, 'col-lg-5': $root.selectDevice!=null }"


  		




  199
  227
  
    
             ng-controller="mapController">


  		




  200
  228
  
    
    </section>


  		




  201
  229
  
    
</div>


  		




  ......




  204
  232
  
    
    <div class="modal-dialog" role="document">


  		




  205
  233
  
    
        <div class="modal-content">


  		




  206
  234
  
    
            <div class="modal-header">


  		




  207
  
  
    
                <h5 class="modal-title" id="exampleModalLabel">{{modalError.title}}</h5>


  		




  
  235
  
    
                <h5 class="modal-title">{{modalError.title}}</h5>


  		




  208
  236
  
    
            </div>


  		




  209
  237
  
    
            <div class="modal-body">


  		




  210
  238
  
    
                <p ng-bind-html="modalError.body"></p>


  		












Také k dispozici:  Unified diff