Revize 0b27c108

refs #6777: Komunikace s REST API, přispůsobení REST API, vyhledávání lokalit, možnost schovat graf, ošetření expirace tokenu, přidání loading screenu, generování tokenu do stránky

.idea/php.xml

@@ +1 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="PhpIncludePathManager">
+    <include_path>
+      <path value="$PROJECT_DIR$/backend/vendor/psr/log" />
+      <path value="$PROJECT_DIR$/backend/vendor/sebastian/comparator" />
+      <path value="$PROJECT_DIR$/backend/vendor/sebastian/global-state" />
+      <path value="$PROJECT_DIR$/backend/vendor/sebastian/exporter" />
+      <path value="$PROJECT_DIR$/backend/vendor/sebastian/environment" />
+      <path value="$PROJECT_DIR$/backend/vendor/doctrine/inflector" />
+      <path value="$PROJECT_DIR$/backend/vendor/sebastian/diff" />
+      <path value="$PROJECT_DIR$/backend/vendor/doctrine/instantiator" />
+      <path value="$PROJECT_DIR$/backend/vendor/sebastian/recursion-context" />
+      <path value="$PROJECT_DIR$/backend/vendor/sebastian/version" />
+      <path value="$PROJECT_DIR$/backend/vendor/symfony/process" />
+      <path value="$PROJECT_DIR$/backend/vendor/phpdocumentor/reflection-docblock" />
+      <path value="$PROJECT_DIR$/backend/vendor/symfony/console" />
+      <path value="$PROJECT_DIR$/backend/vendor/symfony/polyfill-php56" />
+      <path value="$PROJECT_DIR$/backend/vendor/phpdocumentor/reflection-common" />
+      <path value="$PROJECT_DIR$/backend/vendor/symfony/debug" />
+      <path value="$PROJECT_DIR$/backend/vendor/phpdocumentor/type-resolver" />
+      <path value="$PROJECT_DIR$/backend/vendor/symfony/http-kernel" />
+      <path value="$PROJECT_DIR$/backend/vendor/nikic/fast-route" />
+      <path value="$PROJECT_DIR$/backend/vendor/symfony/polyfill-util" />
+      <path value="$PROJECT_DIR$/backend/vendor/symfony/event-dispatcher" />
+      <path value="$PROJECT_DIR$/backend/vendor/symfony/finder" />
+      <path value="$PROJECT_DIR$/backend/vendor/symfony/polyfill-mbstring" />
+      <path value="$PROJECT_DIR$/backend/vendor/symfony/translation" />
+      <path value="$PROJECT_DIR$/backend/vendor/symfony/yaml" />
+      <path value="$PROJECT_DIR$/backend/vendor/symfony/http-foundation" />
+      <path value="$PROJECT_DIR$/backend/vendor/phpunit/php-timer" />
+      <path value="$PROJECT_DIR$/backend/vendor/phpunit/php-file-iterator" />
+      <path value="$PROJECT_DIR$/backend/vendor/phpunit/php-token-stream" />
+      <path value="$PROJECT_DIR$/backend/vendor/webmozart/assert" />
+      <path value="$PROJECT_DIR$/backend/vendor/phpunit/php-text-template" />
+      <path value="$PROJECT_DIR$/backend/vendor/phpunit/php-code-coverage" />
+      <path value="$PROJECT_DIR$/backend/vendor/vlucas/phpdotenv" />
+      <path value="$PROJECT_DIR$/backend/vendor/phpunit/phpunit-mock-objects" />
+      <path value="$PROJECT_DIR$/backend/vendor/phpunit/phpunit" />
+      <path value="$PROJECT_DIR$/backend/vendor/fzaninotto/faker" />
+      <path value="$PROJECT_DIR$/backend/vendor/phpspec/prophecy" />
+      <path value="$PROJECT_DIR$/backend/vendor/laravel/lumen-framework" />
+      <path value="$PROJECT_DIR$/backend/vendor/mtdowling/cron-expression" />
+      <path value="$PROJECT_DIR$/backend/vendor/illuminate/container" />
+      <path value="$PROJECT_DIR$/backend/vendor/nesbot/carbon" />
+      <path value="$PROJECT_DIR$/backend/vendor/illuminate/console" />
+      <path value="$PROJECT_DIR$/backend/vendor/illuminate/bus" />
+      <path value="$PROJECT_DIR$/backend/vendor/illuminate/pagination" />
+      <path value="$PROJECT_DIR$/backend/vendor/illuminate/cache" />
+      <path value="$PROJECT_DIR$/backend/vendor/illuminate/session" />
+      <path value="$PROJECT_DIR$/backend/vendor/illuminate/auth" />
+      <path value="$PROJECT_DIR$/backend/vendor/illuminate/contracts" />
+      <path value="$PROJECT_DIR$/backend/vendor/illuminate/hashing" />
+      <path value="$PROJECT_DIR$/backend/vendor/illuminate/broadcasting" />
+      <path value="$PROJECT_DIR$/backend/vendor/illuminate/filesystem" />
+      <path value="$PROJECT_DIR$/backend/vendor/illuminate/database" />
+      <path value="$PROJECT_DIR$/backend/vendor/illuminate/pipeline" />
+      <path value="$PROJECT_DIR$/backend/vendor/illuminate/encryption" />
+      <path value="$PROJECT_DIR$/backend/vendor/illuminate/view" />
+      <path value="$PROJECT_DIR$/backend/vendor/illuminate/http" />
+      <path value="$PROJECT_DIR$/backend/vendor/illuminate/translation" />
+      <path value="$PROJECT_DIR$/backend/vendor/illuminate/support" />
+      <path value="$PROJECT_DIR$/backend/vendor/illuminate/config" />
+      <path value="$PROJECT_DIR$/backend/vendor/illuminate/queue" />
+      <path value="$PROJECT_DIR$/backend/vendor/paragonie/random_compat" />
+      <path value="$PROJECT_DIR$/backend/vendor/illuminate/events" />
+      <path value="$PROJECT_DIR$/backend/vendor/monolog/monolog" />
+      <path value="$PROJECT_DIR$/backend/vendor/illuminate/validation" />
+      <path value="$PROJECT_DIR$/backend/vendor/composer" />
+      <path value="$PROJECT_DIR$/backend/vendor/firebase/php-jwt" />
+    </include_path>
+  </component>
+  <component name="PhpProjectSharedConfiguration" php_language_level="5.5.0" />
+  <component name="PhpUnit">
+    <phpunit_settings>
+      <PhpUnitSettings load_method="CUSTOM_LOADER" custom_loader_path="$PROJECT_DIR$/backend/vendor/autoload.php" />
+    </phpunit_settings>
+  </component>
+</project>

backend/app/Http/Controllers/DeviceController.php

@@ -27 +27 @@
         }
 
         $device = Zarizeni::findByAddressJoinAddress($address);
-        if ($device == null || count($device) == 0) {
-            return response('Not found.', 404);
-        }
 
         return $device;
     }
@@ -74 +71 @@
 
         $device = Zarizeni::findByIdJoinAddress($id);
         if ($device != null) {
-            $device[0]->traffic = Zaznam::findByDevice($id, $dateFrom, $dateTo, $timeFrom, $timeTo, $direction);
-        } else if ($device == null || count($device) == 0) {
+            $device->traffic = Zaznam::findByDevice($id, $dateFrom, $dateTo, $timeFrom, $timeTo, $direction);
+            return json_encode($device);
+        } else {
             return response('Not found.', 404);
         }
-
-        return $device;
     }
 
     public function getAll() {

backend/app/Http/Controllers/VehicleController.php

@@ -18 +18 @@
      * Vrati vsechny typy vozidel.
      */
     public function getAll() {
-        $vehicles = Vozidlo::all();
+        $vehicles = Vozidlo::from('vozidlo')->select('vozidlo.id', 'vozidlo.nazev as name')->get();
 
         if ($vehicles == null || count($vehicles) == 0) {
             return response('Not found.', 404);

backend/app/Model/Zarizeni.php

@@ -78 +78 @@
             ->select('zarizeni.id as id', 'zarizeni.smer_popis as name', 'ulice.nazev as street', 'ulice.id as street_id', 'mesto.nazev as town', 'mesto.id as town_id')
             ->where('zarizeni.id', '=', $id)
             ->orderBy('zarizeni.id')
-            ->get();
+            ->first();
     }
 
     /**

backend/lib/generateToken.php

@@ +1 @@
+<?php
+
+require_once __DIR__ . '/../vendor/autoload.php';
+
+try {
+    (new Dotenv\Dotenv(__DIR__ . '/../'))->load();
+} catch (Dotenv\Exception\InvalidPathException $e) {
+    //
+}
+
+use Illuminate\Http\Request;
+use \Firebase\JWT\JWT;
+
+function generateToken() {
+    $request = Request::createFromGlobals();
+    // parametry jwt
+    $key = env('JWT_SECRET', '');
+    $iss = env('JWT_ISS', 'aswi-doprava');
+
+    $duration = env('JWT_DURATION', 1800);
+    $iat = time();
+    $exp = $iat + $duration;
+
+    // generovani tokenu
+    $token = array(
+        'iss' => $iss,
+        'iat' => $iat,
+        'exp' => $exp,
+        'ipaddr' => $request->ip(),
+        'user-agent' => $request->header('User-Agent')
+    );
+
+    $jwt = JWT::encode($token, $key, 'HS256');
+
+    return $jwt;
+}

frontend/app.js

@@ +1 @@
+var app = angular.module('pvpk', ['ngRoute', 'ngResource']);
 
-//var app = angular.module('PVPK', []);
-
-
-// app.controller('myController', function($scope, $http, $window) {
-//     $scope.render = function() {
-//         var url = 'http://www.recipepuppy.com/api/';
-//
-//         var c = $window.angular.callbacks.counter.toString(36);
-//         $window['angularcallbacks' + c] = function (data) {
-//             $window.angular.callbacks['_' + c](data);
-//             delete $window['angularcallbacks' + c];
-//         };
-//
-//         $http.jsonp('http://www.recipepuppy.com/api/?i=onions,garlic&q=omelet&p=1&callback=JSON_CALLBACK').then(function(response) {
-//             $scope.records = response.data.results;
-//         });
-//     };
-//
-//     $scope.render();
-// });
+app.constant('config', {
+    APP_NAME: 'PVPK',
+    APP_VERSION: 1.0,
+    API_URL: API_URL,
+    API_TOKEN: API_TOKEN
+});
+
+
+// app.config(function($stateProvider, $locationProvider) {
+//     // $stateProvider
+//     // .state('report',{
+//     //     views: {
+//     //         'search': {
+//     //             templateUrl: 'report-filters.html',
+//     //             controller: searchController
+//     //         },
+//     //         'graph': {
+//     //             templateUrl: 'report-table.html',
+//     //             controller: graphController
+//     //         },
+//     //         'map': {
+//     //             templateUrl: 'report-graph.html',
+//     //             controller: mapController
+//     //         }
+//     //     }
+//     // });
+//    $locationProvider.html5Mode(true);
+// });
+
+app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
+
+}]);
+
+
+app.controller('mainController', function ($rootScope, $scope, $http, $window) {
+
+    this.$onInit = function () {
+        $scope.showLoadingScreen = false;
+    };
+
+    $rootScope.handleErrorResponse = function (response) {
+        switch (response.status) {
+            case 400:
+                console.log('API ERROR 400');
+                break;
+            case 401:
+                jQuery('#modalExpiredToken').modal('show');
+                break;
+            case 404:
+                console.log('API ERROR 404');
+                break;
+            case 500:
+                console.log('API ERROR 500');
+                break;
+            default:
+        }
+    };
+
+    $scope.reloadApp = function () {
+        $window.location.reload();
+    }
+});
+
+
+app.controller('searchController', function ($rootScope, $scope, $location, config, Device) {
+
+    this.$onInit = function () {
+        var fromTime = new Date();
+        fromTime.setHours(7, 0, 0, 0);
+
+        var toTime = new Date();
+        toTime.setHours(16, 0, 0, 0);
+
+        var toDate = new Date();
+        var fromDate = new Date(toDate.getTime() - (30 * 24 * 60 * 60 * 1000));
+
+        var params = $location.search();
+
+        $scope.search = {
+            location: params.location,
+            fromDate: params.fromDate == null ? fromDate : new Date(parseInt(params.fromDate)),
+            toDate: params.toDate == null ? toDate : new Date(parseInt(params.toDate)),
+            fromTime: params.fromTime == null ? fromTime : new Date(parseInt(params.fromTime)),
+            toTime: params.toTime == null ? toTime : new Date(parseInt(params.toTime)),
+            direction: params.direction == null ? true : !!+params.direction
+        };
+
+        $scope.locations = [];
+        $scope.showLocationsLoading = false;
+
+        if (params.location!=null && params.location.length > 2) {
+            $scope.searchLocations(false);
+        }
+    };
+
+
+    $scope.searchLocations = function (saveToUrl) {
+        $scope.showLocationsLoading = true;
+
+        if (saveToUrl)
+            $location.search({
+                location: $scope.search.location,
+                fromDate: $scope.search.fromDate.getTime(),
+                toDate: $scope.search.toDate.getTime(),
+                fromTime: $scope.search.fromTime.getTime(),
+                toTime: $scope.search.toTime.getTime(),
+                direction: $scope.search.direction ? 1 : 0
+            });
+
+        Device({jwt: config.API_TOKEN}).query({
+            address: $scope.search.location,
+            showDirection: $scope.search.direction ? 1 : 0
+        }, function (data) {
+            $scope.locations = data;
+            $scope.showLocationsLoading = false;
+
+            var params = $location.search();
+            if(!saveToUrl && jQuery.grep($scope.locations, function(e){ return e.id === params.deviceId; }).length>0){
+                $scope.selectDevice(params.deviceId);
+            }
+
+        }, function (response) {
+            $scope.showLocationsLoading = false;
+            console.log('Error api all Devices');
+            $rootScope.handleErrorResponse(response);
+        });
+    };
+
+    $scope.selectDevice = function (id) {
+        $scope.deviceId = id;
+
+        var searchObject = $location.search();
+        searchObject.deviceId = id;
+        $location.search(searchObject);
+
+        Device({jwt: config.API_TOKEN}).get({
+            id: id
+            // dateFrom: $scope.search.fromDate.getTime(),
+            // dateTo: $scope.search.toDate.getTime(),
+            // timeFrom: $scope.search.fromTime.getTime(),
+            // timeTo: $scope.search.toTime.getTime(),
+            // direction: $scope.search.direction ? 1 : 0
+        }, function (data) {
+            $rootScope.$emit('renderGraph', data);
+        }, function (response) {
+            console.log('Error api get Devices');
+            $rootScope.handleErrorResponse(response);
+        });
+    };
+
+});
+
+
+app.controller('graphController', function ($rootScope, $scope, config, Vehicle) {
+
+    this.$onInit = function () {
+        $rootScope.graphShow = false;
+        $scope.vehicles = [];
+    };
+
+    $rootScope.$on("renderGraph", function (event, args) {
+        $rootScope.graphShow = true;
+
+        Vehicle({jwt: config.API_TOKEN}).query(null, function (data) {
+            $scope.vehicles = data;
+
+        }, function (response) {
+            $rootScope.graphShow = false;
+            console.log('Error api all Vehicles');
+            $rootScope.handleErrorResponse(response);
+        });
+    });
+
+});
+
+app.controller('mapController', function ($scope) {
+
+    this.$onInit = function () {
+
+    };
+
+});
+
+
+app.factory("Device", function ($resource, config) {
+    return function (headers) {
+        return $resource(config.API_URL + "/devices/:id", {id: '@id'}, {
+            'get': {
+                url: config.API_URL + '/devices/:id',
+                method: 'GET',
+                headers: headers || {}
+            },
+            'query': {
+                url: config.API_URL + '/devices',
+                method: 'GET',
+                isArray: true,
+                headers: headers || {}
+            }
+        });
+    };
+});
+
+app.factory("Vehicle", function ($resource, config) {
+    return function (headers) {
+        return $resource(config.API_URL + "/vehicles", null, {
+            'query': {
+                url: config.API_URL + '/vehicles',
+                method: 'GET',
+                isArray: true,
+                headers: headers || {}
+            }
+        });
+    };
+});

frontend/assets/css/main.css

@@ -26 +26 @@
     font-weight: bold;
 }
 
-#search footer {
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    font-size: 0.8rem;
+.searchWrapper{
+    min-height: calc(100% - 40px);
+    float: left;
 }
 
 #graph {
@@ -48 +45 @@
 }
 
 
+/* LOADING */
+.loading {
+    border: 6px solid white; /* Light grey */
+    border-top: 6px solid #007bff; /* Blue */
+    border-radius: 50%;
+    width: 50px;
+    height: 50px;
+    animation: spin 2s linear infinite;
+    margin: 0 auto;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+
+#loadingScreen{
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    z-index: 1000;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #CFD8DC;
+}
+
+#loadingScreen .loading{
+    border: 12px solid white; /* Light grey */
+    border-top: 12px solid #007bff; /* Blue */
+    border-radius: 50%;
+    width: 100px;
+    height: 100px;
+    animation: spin 2s linear infinite;
+    margin: auto auto;
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+}
+
+
+
+
+
+
+
+
 

frontend/assets/css/normalize.css

@@ -1 @@
-/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
-
-/* Document
-   ========================================================================== */
-
-/**
- * 1. Correct the line height in all browsers.
- * 2. Prevent adjustments of font size after orientation changes in
- *    IE on Windows Phone and in iOS.
- */
-
-html {
-  line-height: 1.15; /* 1 */
-  -ms-text-size-adjust: 100%; /* 2 */
-  -webkit-text-size-adjust: 100%; /* 2 */
-}
-
-/* Sections
-   ========================================================================== */
-
-/**
- * Remove the margin in all browsers (opinionated).
- */
-
-body {
-  margin: 0;
-}
-
-/**
- * Add the correct display in IE 9-.
- */
-
-article,
-aside,
-footer,
-header,
-nav,
-section {
-  display: block;
-}
-
-/**
- * Correct the font size and margin on `h1` elements within `section` and
- * `article` contexts in Chrome, Firefox, and Safari.
- */
-
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
-
-/* Grouping content
-   ========================================================================== */
-
-/**
- * Add the correct display in IE 9-.
- * 1. Add the correct display in IE.
- */
-
-figcaption,
-figure,
-main { /* 1 */
-  display: block;
-}
-
-/**
- * Add the correct margin in IE 8.
- */
-
-figure {
-  margin: 1em 40px;
-}
-
-/**
- * 1. Add the correct box sizing in Firefox.
- * 2. Show the overflow in Edge and IE.
- */
-
-hr {
-  box-sizing: content-box; /* 1 */
-  height: 0; /* 1 */
-  overflow: visible; /* 2 */
-}
-
-/**
- * 1. Correct the inheritance and scaling of font size in all browsers.
- * 2. Correct the odd `em` font sizing in all browsers.
- */
-
-pre {
-  font-family: monospace, monospace; /* 1 */
-  font-size: 1em; /* 2 */
-}
-
-/* Text-level semantics
-   ========================================================================== */
-
-/**
- * 1. Remove the gray background on active links in IE 10.
- * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
- */
-
-a {
-  background-color: transparent; /* 1 */
-  -webkit-text-decoration-skip: objects; /* 2 */
-}
-
-/**
- * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
- */
-
-abbr[title] {
-  border-bottom: none; /* 1 */
-  text-decoration: underline; /* 2 */
-  text-decoration: underline dotted; /* 2 */
-}
-
-/**
- * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
- */
-
-b,
-strong {
-  font-weight: inherit;
-}
-
-/**
- * Add the correct font weight in Chrome, Edge, and Safari.
- */
-
-b,
-strong {
-  font-weight: bolder;
-}
-
-/**
- * 1. Correct the inheritance and scaling of font size in all browsers.
- * 2. Correct the odd `em` font sizing in all browsers.
- */
-
-code,
-kbd,
-samp {
-  font-family: monospace, monospace; /* 1 */
-  font-size: 1em; /* 2 */
-}
-
-/**
- * Add the correct font style in Android 4.3-.
- */
-
-dfn {
-  font-style: italic;
-}
-
-/**
- * Add the correct background and color in IE 9-.
- */
-
-mark {
-  background-color: #ff0;
-  color: #000;
-}
-
-/**
- * Add the correct font size in all browsers.
- */
-
-small {
-  font-size: 80%;
-}
-
-/**
- * Prevent `sub` and `sup` elements from affecting the line height in
- * all browsers.
- */
-
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-
-sub {
-  bottom: -0.25em;
-}
-
-sup {
-  top: -0.5em;
-}
-
-/* Embedded content
-   ========================================================================== */
-
-/**
- * Add the correct display in IE 9-.
- */
-
-audio,
-video {
-  display: inline-block;
-}
-
-/**
- * Add the correct display in iOS 4-7.
- */
-
-audio:not([controls]) {
-  display: none;
-  height: 0;
-}
-
-/**
- * Remove the border on images inside links in IE 10-.
- */
-
-img {
-  border-style: none;
-}
-
-/**
- * Hide the overflow in IE.
- */
-
-svg:not(:root) {
-  overflow: hidden;
-}
-
-/* Forms
-   ========================================================================== */
-
-/**
- * 1. Change the font styles in all browsers (opinionated).
- * 2. Remove the margin in Firefox and Safari.
- */
-
-button,
-input,
-optgroup,
-select,
-textarea {
-  font-family: sans-serif; /* 1 */
-  font-size: 100%; /* 1 */
-  line-height: 1.15; /* 1 */
-  margin: 0; /* 2 */
-}
-
-/**
- * Show the overflow in IE.
- * 1. Show the overflow in Edge.
- */
-
-button,
-input { /* 1 */
-  overflow: visible;
-}
-
-/**
- * Remove the inheritance of text transform in Edge, Firefox, and IE.
- * 1. Remove the inheritance of text transform in Firefox.
- */
-
-button,
-select { /* 1 */
-  text-transform: none;
-}
-
-/**
- * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
- *    controls in Android 4.
- * 2. Correct the inability to style clickable types in iOS and Safari.
- */
-
-button,
-html [type="button"], /* 1 */
-[type="reset"],
-[type="submit"] {
-  -webkit-appearance: button; /* 2 */
-}
-
-/**
- * Remove the inner border and padding in Firefox.
- */
-
-button::-moz-focus-inner,
-[type="button"]::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-
-/**
- * Restore the focus styles unset by the previous rule.
- */
-
-button:-moz-focusring,
-[type="button"]:-moz-focusring,
-[type="reset"]:-moz-focusring,
-[type="submit"]:-moz-focusring {
-  outline: 1px dotted ButtonText;
-}
-
-/**
- * Correct the padding in Firefox.
- */
-
-fieldset {
-  padding: 0.35em 0.75em 0.625em;
-}
-
-/**
- * 1. Correct the text wrapping in Edge and IE.
- * 2. Correct the color inheritance from `fieldset` elements in IE.
- * 3. Remove the padding so developers are not caught out when they zero out
- *    `fieldset` elements in all browsers.
- */
-
-legend {
-  box-sizing: border-box; /* 1 */
-  color: inherit; /* 2 */
-  display: table; /* 1 */
-  max-width: 100%; /* 1 */
-  padding: 0; /* 3 */
-  white-space: normal; /* 1 */
-}
-
-/**
- * 1. Add the correct display in IE 9-.
- * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
- */
-
-progress {
-  display: inline-block; /* 1 */
-  vertical-align: baseline; /* 2 */
-}
-
-/**
- * Remove the default vertical scrollbar in IE.
- */
-
-textarea {
-  overflow: auto;
-}
-
-/**
- * 1. Add the correct box sizing in IE 10-.
- * 2. Remove the padding in IE 10-.
- */
-
-[type="checkbox"],
-[type="radio"] {
-  box-sizing: border-box; /* 1 */
-  padding: 0; /* 2 */
-}
-
-/**
- * Correct the cursor style of increment and decrement buttons in Chrome.
- */
-
-[type="number"]::-webkit-inner-spin-button,
-[type="number"]::-webkit-outer-spin-button {
-  height: auto;
-}
-
-/**
- * 1. Correct the odd appearance in Chrome and Safari.
- * 2. Correct the outline style in Safari.
- */
-
-[type="search"] {
-  -webkit-appearance: textfield; /* 1 */
-  outline-offset: -2px; /* 2 */
-}
-
-/**
- * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
- */
-
-[type="search"]::-webkit-search-cancel-button,
-[type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-
-/**
- * 1. Correct the inability to style clickable types in iOS and Safari.
- * 2. Change font properties to `inherit` in Safari.
- */
-
-::-webkit-file-upload-button {
-  -webkit-appearance: button; /* 1 */
-  font: inherit; /* 2 */
-}
-
-/* Interactive
-   ========================================================================== */
-
-/*
- * Add the correct display in IE 9-.
- * 1. Add the correct display in Edge, IE, and Firefox.
- */
-
-details, /* 1 */
-menu {
-  display: block;
-}
-
-/*
- * Add the correct display in all browsers.
- */
-
-summary {
-  display: list-item;
-}
-
-/* Scripting
-   ========================================================================== */
-
-/**
- * Add the correct display in IE 9-.
- */
-
-canvas {
-  display: inline-block;
-}
-
-/**
- * Add the correct display in IE.
- */
-
-template {
-  display: none;
-}
-
-/* Hidden
-   ========================================================================== */
-
-/**
- * Add the correct display in IE 10-.
- */
-
-[hidden] {
-  display: none;
-}

frontend/index.html

@@ -1 @@
-<!doctype html>
-<html ng-app="PVPK" class="no-js" lang="cs">
-<head>
-    <meta charset="utf-8">
-    <title>Průjezd vozidel - Plzeňský kraj</title>
-    <meta http-equiv="x-ua-compatible" content="ie=edge">
-
-    <meta name="description" content="Zobrazení dat o průjezdu vozidel pro Plzeňský kraj">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-
-    <link rel="apple-touch-icon" href="./assets/img/favicon.png">
-    <link rel="icon" href="./assets/img/favicon.png">
-
-    <script>
-        document.documentElement.className = document.documentElement.className.replace("no-js", "js");
-    </script>
-
-    <link rel="stylesheet" href="./assets/css/normalize.css">
-    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
-          integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
-    <link rel="stylesheet" media="screen" href="./assets/css/main.css">
-
-
-    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
-    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.min.js"></script>
-    <script src="./app.js"></script>
-
-</head>
-<body>
-<!--[if lte IE 9]>
-<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade
-    your browser</a> to improve your experience and security.</p>
-<![endif]-->
-
-<div class="container-fluid h-100">
-    <div class="row h-100">
-        <!--search section-->
-        <section class="search col-12 col-sm-6 col-lg-3" id="search">
-
-            <header class="mt-2">
-
-                <h1>
-                    <img src="./assets/img/favicon.png" alt="logo"> Průjezd vozidel
-                    <small class="text-muted">Plzeňský kraj</small>
-                </h1>
-
-            </header>
-
-            <div class="mb-4 mt-4">
-                <h4></h4>
-                <form method="get">
-
-                    <div class="form-group">
-                        <label for="searchLocation" class="h5">Hledání - lokalit</label>
-
-                        <input type="search" id="searchLocation" name="location"
-                               class="form-control form-control-sm"
-                               placeholder="Město, ulice, psč, ...">
-                    </div>
-
-                    <div class="form-row">
-
-                        <div class="form-group col">
-                            <label for="searchFromDate">Období</label>
-
-                            <input type="date" id="searchFromDate" name="fromDate"
-                                   class="form-control form-control-sm"
-                                   value="2018-04-01">
-                        </div>
-
-                        <div class="form-group col">
-                            <label for="searchToDate" class="invisible">Období</label>
-                            <input type="date" id="searchToDate" name="toDateTime"
-                                   class="form-control form-control-sm"
-                                   value="2018-04-30">
-                        </div>
-
-
-                    </div>
-
-                    <div class="form-row">
-
-                        <div class="form-group col">
-                            <label for="searchFromTime">Časové rozmezí dne</label>
-                            <input type="time" id="searchFromTime" class="form-control form-control-sm"
-                                   value="06:00">
-                        </div>
-
-                        <div class="form-group col">
-                            <label for="searchToTime" class="invisible">Časové rozmezí dne</label>
-                            <input type="time" id="searchToTime" class="form-control form-control-sm" value="20:00">
-                        </div>
-
-
-                    </div>
-
-                    <div class="form-group">
-                        <label for="searchVehicle">Vozidla</label>
-                        <select id="searchVehicle" class="custom-select custom-select-sm">
-                            <option value="all" selected>Všechna vozidla</option>
-                        </select>
-                    </div>
-                    <div class="custom-control custom-checkbox mb-3">
-                        <input type="checkbox" id="searchDirection" name="searchDirection"
-                               class="custom-control-input"
-                               checked>
-                        <label for="searchDirection" class="custom-control-label">Rozlišovat směr</label>
-                    </div>
-
-                    <input type="submit" value="Vyhledat" class="btn btn-primary btn-block">
-
-                </form>
-
-
-                <div class="result-locations mb-5 mt-5">
-                    <h5>Lokality</h5>
-
-
-                    <div class="list-group">
-                        <a href="#"
-                           class="list-group-item list-group-item-action flex-column align-items-start active">
-                            <div class="d-flex w-100 justify-content-between">
-                                <h6 class="mb-1">Nýrsko, směr od Ž.Rudy</h6>
-                                <small>malé info</small>
-                            </div>
-                            <small>
-                                <address>U Banky, Nýrsko</address>
-                            </small>
-                        </a>
-                        <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
-                            <div class="d-flex w-100 justify-content-between">
-                                <h6 class="mb-1">Domažlice, směr od Klatov</h6>
-                                <small class="text-muted">malé info</small>
-                            </div>
-                            <small>
-                                <address>Masarykova, Domažlice</address>
-                            </small>
-                        </a>
-                        <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
-                            <div class="d-flex w-100 justify-content-between">
-                                <h6 class="mb-1">Hostouň, směr od Bělé</h6>
-                                <small class="text-muted">malé info</small>
-                            </div>
-                            <small class="text-muted">
-                                <address>Petra Bezruče, Hostouň</address>
-                            </small>
-                        </a>
-                    </div>
-
-                </div>
-
-
-            </div>
-
-            <footer class="text-center mb-2 mt-2">
-                2018 © FAV, ZČU
-            </footer>
-        </section>
-
-        <!--graph section-->
-        <section class="graph col-12 col-sm-6 col-lg-3" id="graph">
-
-            <header class="mt-2">
-
-                <h4>Grafy
-                    <button type="button" class="close" aria-label="Close">
-                        <span aria-hidden="true">&times;</span>
-                    </button>
-                </h4>
-            </header>
-
-
-            <script src="assets/libs/Chart.min.js"></script>
-            <canvas id="myChart" width="100%" height="60"></canvas>
-            <script>
-                var ctx = document.getElementById("myChart").getContext('2d');
-                var myChart = new Chart(ctx, {
-                    type: 'bar',
-                    data: {
-                        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
-                        datasets: [{
-                            label: '# of Votes',
-                            data: [12, 19, 3, 5, 2, 3],
-                            backgroundColor: [
-                                'rgba(255, 99, 132, 0.2)',
-                                'rgba(54, 162, 235, 0.2)',
-                                'rgba(255, 206, 86, 0.2)',
-                                'rgba(75, 192, 192, 0.2)',
-                                'rgba(153, 102, 255, 0.2)',
-                                'rgba(255, 159, 64, 0.2)'
-                            ],
-                            borderColor: [
-                                'rgba(255,99,132,1)',
-                                'rgba(54, 162, 235, 1)',
-                                'rgba(255, 206, 86, 1)',
-                                'rgba(75, 192, 192, 1)',
-                                'rgba(153, 102, 255, 1)',
-                                'rgba(255, 159, 64, 1)'
-                            ],
-                            borderWidth: 1
-                        }]
-                    },
-                    options: {
-                        scales: {
-                            yAxes: [{
-                                ticks: {
-                                    beginAtZero: true
-                                }
-                            }]
-                        }
-                    }
-                });
-            </script>
-
-        </section>
-
-        <!--map section-->
-        <section class="map col-12 col-sm-12 col-lg-6" id="map">
-
-            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1326226.1771813703!2d11.996870042985256!3d49.51688547407959!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x470abf4bb3db6569%3A0x100af0f6614a850!2zUGx6ZcWIc2vDvSBrcmFq!5e0!3m2!1scs!2scz!4v1523814169200"
-                    width="100%" height="100%" frameborder="0" style="border:0" allowfullscreen></iframe>
-        </section>
-    </div>
-</div>
-
-
-<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
-        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
-        crossorigin="anonymous"></script>
-<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"
-        integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"
-        crossorigin="anonymous"></script>
-
-
-</body>
-</html>

frontend/index.php

@@ +1 @@
+<!doctype html>
+<html ng-app="pvpk" class="no-js" lang="cs">
+<head>
+    <meta charset="utf-8">
+    <title>Průjezd vozidel - Plzeňský kraj</title>
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+
+    <meta name="description" content="Zobrazení dat o průjezdu vozidel pro Plzeňský kraj">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <link rel="apple-touch-icon" href="./assets/img/favicon.png">
+    <link rel="icon" href="./assets/img/favicon.png">
+
+    <script>
+        document.documentElement.className = document.documentElement.className.replace("no-js", "js");
+    </script>
+
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
+          integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
+    <link rel="stylesheet" media="screen" href="./assets/css/main.css">
+
+
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-resource.min.js"></script>
+
+    <script>
+        <?php
+        /* JEN PRO TESTOVANI, POZDEJI SE ODSTRANIT, A NAHRADIT NASDILENOU KNIHOVNOU */
+        $base_url = 'http://localhost/pvpk/backend/public/api/v1';
+
+        include_once '../backend/lib/generateToken.php';
+        $token = generateToken();
+        ?>
+        var API_URL = '<?=$base_url ?>';
+        var API_TOKEN = '<?=$token ?>';
+    </script>
+
+    <script src="./app.js"></script>
+
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
+</head>
+<body ng-controller="mainController" class="container-fluid">
+
+
+
+
+<div id="loadingScreen" ng-show="showLoadingScreen">
+    <div class="loading"></div>
+</div>
+<div class="row h-100">
+
+    <section class="search col-12 col-sm-6 col-lg-3" id="search" ng-controller="searchController">
+
+        <div class="w-100 searchWrapper">
+            <header class="mt-2">
+                <h1>
+                    <img src="./assets/img/favicon.png" alt="logo"> Průjezd vozidel
+                    <small class="text-muted">Plzeňský kraj</small>
+                </h1>
+            </header>
+
+            <form class="mb-4 mt-4">
+                <div class="form-group">
+                    <label for="searchLocation" class="h5">Hledání - lokalit</label>
+                    <input type="search" id="searchLocation" name="location"
+                           class="form-control form-control-sm" placeholder="Město, ulice, ..."
+                           ng-model="search.location" required maxlength="255" autocomplete="off"
+                           ng-change="search.location.length>2 && searchLocations(true)">
+                </div>
+
+                <div class="custom-control custom-checkbox mb-3">
+                    <!-- ng-true-value="ofCourse" ng-false-value="iWish"  -->
+                    <input type="checkbox" id="searchDirection" name="searchDirection" class="custom-control-input"
+                           checked ng-model="search.direction" required ng-change="searchLocations()">
+                    <label for="searchDirection" class="custom-control-label">Rozlišovat směr</label>
+                </div>
+
+                <div class="form-row">
+                    <div class="form-group col">
+                        <label for="searchFromDate">Období</label>
+                        <input type="date" id="searchFromDate" name="fromDate"
+                               class="form-control form-control-sm" ng-model="search.fromDate" required
+                               ng-class="{ 'is-invalid': search.fromDate>search.toDate}">
+                        <div class="invalid-feedback">
+                            Tento datum musí být menší.
+                        </div>
+                    </div>
+
+                    <div class="form-group col">
+                        <label for="searchToDate" class="invisible">Období</label>
+                        <input type="date" id="searchToDate" name="toDateTime"
+                               class="form-control form-control-sm" ng-model="search.toDate" required
+                               ng-class="{ 'is-invalid': search.fromDate>search.toDate}">
+                        <div class="invalid-feedback">
+                            Tento datum musí být vetší.
+                        </div>
+                    </div>
+                </div>
+
+                <div class="form-row">
+                    <div class="form-group col">
+                        <label for="searchFromTime">Časové rozmezí dne</label>
+                        <input type="time" id="searchFromTime" class="form-control form-control-sm"
+                               ng-model="search.fromTime" required
+                               ng-class="{'is-invalid': search.fromTime>search.toTime}">
+                        <div class="invalid-feedback">
+                            Tento čas musí být menší.
+                        </div>
+                    </div>
+
+                    <div class="form-group col">
+                        <label for="searchToTime" class="invisible">Časové rozmezí dne</label>
+                        <input type="time" id="searchToTime" class="form-control form-control-sm"
+                               ng-model="search.toTime" required
+                               ng-class="{'is-invalid': search.fromTime>search.toTime}">
+                        <div class="invalid-feedback">
+                            Tento čas musí být vetší.
+                        </div>
+                    </div>
+                </div>
+
+                <!--<input type="submit" value="Vyhledat" class="btn btn-primary btn-block"-->
+                <!--ng-disabled="search.fromDate>search.toDate || search.fromTime>search.toTime">-->
+            </form>
+
+
+            <div class="result-locations mb-5 mt-5">
+                <h5>Lokality</h5>
+
+                <div class="list-group" ng-show="locations.length>0 && !showLocationsLoading">
+                    <!-- class = active -->
+                    <a href="" id="location-{{location.id}}"
+                       class="list-group-item list-group-item-action flex-column align-items-start"
+                       ng-repeat="location in locations"
+                       ng-click="selectDevice(location.id)"
+                       ng-class="{'active': deviceId == location.id}">
+
+                        <div class="d-flex w-100 justify-content-between">
+                            <h6 class="mb-1">{{location.name}}</h6>
+                            <small ng-show="search.direction">{{location.direction ==1 ? 'po směru': 'proti směru' }}
+                            </small>
+                        </div>
+                        <small>
+                            <address>{{location.street}}, {{location.town}}</address>
+                        </small>
+                    </a>
+                </div>
+
+                <div ng-show="locations.length==0 && !showLocationsLoading">
+                    <small class="form-text text-muted text-center">Žádná lokalita</small>
+                </div>
+
+                <div class="loading" ng-show="showLocationsLoading"></div>
+
+            </div>
+
+        </div>
+        <footer class="text-center mb-2 mt-2 w-100">
+            <small class="text-muted">2018 © FAV, ZČU</small>
+        </footer>
+    </section>
+
+
+    <!--graph section-->
+    <section class="graph col-12 col-sm-6 col-lg-3" id="graph" ng-show="$root.graphShow"
+             ng-controller="graphController">
+
+        <header class="mt-2">
+
+            <h4>Grafy
+                <button type="button" class="close" aria-label="Close" ng-click="$root.graphShow = !$root.graphShow">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </h4>
+        </header>
+
+        <form>
+            <div class="form-group">
+                <label for="searchVehicle">Vozidla</label>
+                <select id="searchVehicle" class="custom-select custom-select-sm" ng-model="search.vehicle">
+                    <option value="">Všechna vozidla</option>
+                    <option ng-repeat="vehicle in vehicles" value="{{vehicle.id}}">{{vehicle.name}}</option>
+                </select>
+            </div>
+
+        </form>
+
+        <div class="loading"></div>
+
+        <!--<canvas id="myChart" width="100%" height="60"></canvas>-->
+        <!--<script>-->
+        <!--var ctx = document.getElementById("myChart").getContext('2d');-->
+        <!--var myChart = new Chart(ctx, {-->
+        <!--type: 'bar',-->
+        <!--data: {-->
+        <!--labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],-->
+        <!--datasets: [{-->
+        <!--label: '# of Votes',-->
+        <!--data: [12, 19, 3, 5, 2, 3],-->
+        <!--backgroundColor: [-->
+        <!--'rgba(255, 99, 132, 0.2)',-->
+        <!--'rgba(54, 162, 235, 0.2)',-->
+        <!--'rgba(255, 206, 86, 0.2)',-->
+        <!--'rgba(75, 192, 192, 0.2)',-->
+        <!--'rgba(153, 102, 255, 0.2)',-->
+        <!--'rgba(255, 159, 64, 0.2)'-->
+        <!--],-->
+        <!--borderColor: [-->
+        <!--'rgba(255,99,132,1)',-->
+        <!--'rgba(54, 162, 235, 1)',-->
+        <!--'rgba(255, 206, 86, 1)',-->
+        <!--'rgba(75, 192, 192, 1)',-->
+        <!--'rgba(153, 102, 255, 1)',-->
+        <!--'rgba(255, 159, 64, 1)'-->
+        <!--],-->
+        <!--borderWidth: 1-->
+        <!--}]-->
+        <!--},-->
+        <!--options: {-->
+        <!--scales: {-->
+        <!--yAxes: [{-->
+        <!--ticks: {-->
+        <!--beginAtZero: true-->
+        <!--}-->
+        <!--}]-->
+        <!--}-->
+        <!--}-->
+        <!--});-->
+        <!--</script>-->
+
+    </section>
+
+
+    <!--map section-->
+    <!-- ng-class="textType" -->
+    <section class="map col-12 col-sm-12" id="map"
+             ng-class="{ 'col-lg-9': !$root.graphShow, 'col-lg-6': $root.graphShow }" ng-controller="mapController">
+
+        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1326226.1771813703!2d11.996870042985256!3d49.51688547407959!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x470abf4bb3db6569%3A0x100af0f6614a850!2zUGx6ZcWIc2vDvSBrcmFq!5e0!3m2!1scs!2scz!4v1523814169200"
+                width="100%" height="100%" frameborder="0" style="border:0" allowfullscreen></iframe>
+    </section>
+
+
+</div>
+
+<div class="modal fade" id="modalExpiredToken" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
+     aria-hidden="true">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="exampleModalLabel">Platnost webové aplikace vypršela</h5>
+            </div>
+            <div class="modal-body">
+                <p>Pro obnovení platnosti stačí stisknout tlačítko <strong>Obnovit</strong>.</p>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-primary" ng-click="reloadApp()">Obnovit</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+
+<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
+        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
+        crossorigin="anonymous"></script>
+<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"
+        integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"
+        crossorigin="anonymous"></script>
+
+
+</body>
+</html>