Revize fb12df6d

refs #7014: přidané grafy denní průměry, optimalizace API, styly převedeny do SASS, zvětšený prostor pro grafy

backend/app/Http/Controllers/DeviceController.php

@@ -98 +98 @@
         return Zaznam::findByDevice($deviceId, $dateFrom, $dateTo, $timeFrom, $timeTo, $direction);
     }
 
-    public function findDayAverageTrafficByDevice(Request $request, $deviceId) {
+    public function findDayAverageTrafficByDevice(Request $request, $deviceId)
+    {
         // nacti parametry
         $params = $this->loadDateTimeDirectionConstraints($request);
         $dateFrom = $params[self::DATE_FROM_PARAM];
@@ -146 +147 @@
      * @param integer $id Id zarizeni.
      * @return Mixed_
      */
-    public function getTrafficAverageByDeviceCsv(Request $request, $id) {
+    public function getTrafficAverageByDeviceCsv(Request $request, $id)
+    {
         return $this->createCsvFileForDeviceData(
             $this->findDeviceByIdSetDates($request, $id),
             $this->findDayAverageTrafficByDevice($request, $id),
-            'doprava-prumery-export-'
-            );
+            'doprava-casove-prumery-export-'
+        );
     }
 
     /**
@@ -161 +163 @@
      * @param $deviceId Id zarizeni.
      * @return Mixed_
      */
-    public function findTrafficAverageByDevice(Request $request, $deviceId) {
+    public function findTrafficAverageByDevice(Request $request, $deviceId)
+    {
         // nacti parametry
         $params = $this->loadDateTimeDirectionConstraints($request);
         $dateFrom = $params[self::DATE_FROM_PARAM];
@@ -282 +285 @@
      * @param $df Ukazatel na soubor.
      * @param $array Pole.
      */
-    private function addArrayToCsvFile($df, $array) {
+    private function addArrayToCsvFile($df, $array)
+    {
         if ($array != null && count($array) > 0) {
             $row = $this->stdClassToArray($array[0]);
             fputcsv($df, array_keys($row));
@@ -304 +308 @@
      * @param integer $id id zarizeni.
      * @return Mixed_
      */
-    private function findDeviceByIdSetDates(Request $request, $id) {
+    private function findDeviceByIdSetDates(Request $request, $id)
+    {
         // nacteni parametru
         $params = $this->loadDateTimeDirectionConstraints($request);
         $dateFrom = $params[self::DATE_FROM_PARAM];
@@ -332 +337 @@
      * @param string $namePrefix Prefix jmena stahovaneho souboru.
      * @return Mixed_
      */
-    private function createCsvFileForDeviceData($device, $traffic, $namePrefix) {
+    private function createCsvFileForDeviceData($device, $traffic, $namePrefix)
+    {
 
         if ($device != null) {
             $devArray = json_decode(json_encode($device), true);

backend/app/Model/Zarizeni.php

@@ -62 +62 @@
         $query = DB::table('zarizeni')
             ->join('ulice', 'zarizeni.ulice_id', '=', 'ulice.id')
             ->join('mesto', 'ulice.mesto_id', '=', 'mesto.id')
-            ->join('zaznam_cas', 'zaznam_cas.zarizeni_id', '=', 'zarizeni.id')
-            ->select('zarizeni.id as id',
-                'zarizeni.smer_popis as name',
-                'ulice.nazev as street',
-                'ulice.id as street_id',
-                'ulice.zem_sirka as lat',
-                'ulice.zem_delka as lng',
-                'mesto.nazev as town',
-                'mesto.id as town_id',
-                $showDirection ? 'zaznam_cas.smer as direction' : DB::Raw('null as direction'))
-            ->where('ulice.nazev', 'like', '%' . $address . '%')
-            ->orWhere('mesto.nazev', 'like', '%' . $address . '%')
-            ->orWhere('zarizeni.smer_popis', 'like', '%' . $address . '%');
+            ->select(DB::Raw('zarizeni.id as id,
+                zarizeni.smer_popis as name,
+                ulice.nazev as street,
+                ulice.id as street_id,
+                ulice.zem_sirka as lat,
+                ulice.zem_delka as lng,
+                mesto.nazev as town,
+                mesto.id as town_id,' .
+                ($showDirection ? 'zaznam_cas.smer as direction' : 'null as direction')));
 
-        if (!$showDirection) {
-            $query = $query->groupBy('zarizeni.id');
-        } else {
-            $query = $query->groupBy('zarizeni.id', 'zaznam_cas.smer');
+        if (!empty($address)) {
+            $query = $query->where('ulice.nazev', 'like', '%' . $address . '%')
+                ->orWhere('mesto.nazev', 'like', '%' . $address . '%')
+                ->orWhere('zarizeni.smer_popis', 'like', '%' . $address . '%');
         }
 
+        if ($showDirection) {
+            $query = $query->join('zaznam_cas', 'zaznam_cas.zarizeni_id', '=', 'zarizeni.id')
+                ->groupBy('zarizeni.id', 'zaznam_cas.smer');
+        }
 
         return $query->get();
     }

backend/app/Model/Zaznam.php

@@ -81 +81 @@
             ->select(DB::raw("
                 date_format(datum.od, '%H:%i') as timeFrom,
                 date_format(datum.do, '%H:%i') as timeTo,
-                ROUND(avg(zaznam.rychlost_prumer),0) as speedAverage,
-                CAST(sum(zaznam.vozidla_pocet) as UNSIGNED) as numberVehicle,
-                ROUND(avg(zaznam.vozidla_pocet),0) as numberVehicleAverage,
+                ROUND(AVG(zaznam.rychlost_prumer), 0) as speedAverage,
+                CAST(SUM(zaznam.vozidla_pocet) as UNSIGNED) as numberVehicle,
+                ROUND(AVG(zaznam.vozidla_pocet), 0) as numberVehicleAverage,
                 zaznam.vozidlo_id as typeVehicleId
             "))
             ->whereDate('datum.od', '>=', $dateFrom == null ? $lastDate : $dateFrom)
-            ->whereDate('datum.do', '<=', $dateTo == null ? $lastDate : $dateTo)
+            ->whereDate('datum.od', '<=', $dateTo == null ? $lastDate : $dateTo)
             ->whereTime('datum.od', '>=', $timeFrom == null ? '08:00:00' : $timeFrom)
             ->whereTime('datum.od', '<=', $timeTo == null ? '23:59:59' : $timeTo)
             ->where('zaznam_cas.zarizeni_id', '=', $deviceId);
@@ -137 +137 @@
             ->join('datum', 'zaznam_prum_den.datum_id', '=', 'datum.id')
             ->select(DB::raw("
                 date_format(datum.od, '%Y-%m-%d') as date,
-                zaznam_prum_den.rychlost_prumer as speedAverage,
-                zaznam_prum_den.vozidla_pocet as numberVehicle,
-                zaznam_prum_den.vozidlo_id as typeVehicle
+                ROUND(AVG(zaznam_prum_den.rychlost_prumer), 0) as speedAverage,
+                CAST(SUM(zaznam_prum_den.vozidla_pocet) as UNSIGNED) as numberVehicle,
+                zaznam_prum_den.vozidlo_id as typeVehicleId
             "))
             ->whereDate('datum.od', '>=', $dateFrom == null ? $lastDateFrom : $dateFrom)
-            ->whereDate('datum.do', '<=', $dateTo == null ? $lastDateTo : $dateTo)
+            ->whereDate('datum.od', '<=', $dateTo == null ? $lastDateTo : $dateTo)
             ->where('zaznam_prum_den.zarizeni_id', '=', $deviceId);
 
         if ($direction != null) {
@@ -151 +151 @@
 
         // pridat grouping a razeni nakonec
         $query = $query
-            ->groupBy('date', 'typeVehicle')
+            ->groupBy('date', 'zaznam_prum_den.vozidlo_id')
             ->orderBy('date', 'asc')
             ->orderBy('zaznam_prum_den.vozidlo_id', 'asc');
 

frontend/.stylelintrc

@@ +1 @@
+{
+  "rules": {
+  },
+  "extends": [
+    "stylelint-config-standard",
+    "stylelint-config-rational-order"
+  ]
+}

frontend/app.js

@@ -2 +2 @@
 
 app.constant('config', {
     APP_NAME: 'PVPK',
-    APP_VERSION: 1.0,
+    APP_VERSION: '1.2.0',
     API_URL: API_URL,
     API_TOKEN: API_TOKEN,
     DEFAULT_POSITION: {LAT: 49.53, LNG: 13.3},
-    DEFAULT_ZOOM: 10
+    DEFAULT_ZOOM: 10,
+    DEFAULT_ZOOM_MAX: 7,
 });
 
-//PRIPRAVA PRO REFAKTORING
-// 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.controller('mainController', function ($rootScope, $scope, $location, $window) {
 
     this.$onInit = function () {
-
+        $scope.showLoadingScreen = true;
     };
 
     $window.onload = function () {
         let params = $location.search();
         if (params.deviceId) {
-            $rootScope.$emit('infoLocation', {id: params.deviceId, direction: params.direction});
             $rootScope.$emit('activeMarker', {id: params.deviceId});
         }
 
-        $scope.showLoadingScreen = false;
+        $scope.$apply(function () {
+            $scope.showLoadingScreen = false;
+        });
     };
 
     $rootScope.$on('$locationChangeSuccess', function (event, newUrl, oldUrl) {
+        let params = $location.search();
 
         if (newUrl !== oldUrl && $scope.historyUrl) {
-            let params = $location.search();
-
             if ($scope.historyUrl.q !== $scope.historyUrl.q || $scope.historyUrl.isDirection != params.isDirection) {
                 $rootScope.$emit('setSearchFromUrl', null);
             }
@@ -66 +44 @@
             } else if (params.deviceId && ($scope.historyUrl.deviceId !== params.deviceId || $scope.historyUrl.direction !== params.direction)) {
                 $rootScope.$emit('infoLocation', {id: params.deviceId, direction: params.direction});
                 $rootScope.$emit('activeMarker', {id: params.deviceId});
-            }else if(!params.deviceId && $scope.historyUrl.deviceId){
+            } else if (!params.deviceId && $scope.historyUrl.deviceId) {
                 $rootScope.selectDevice = null;
                 $rootScope.$emit('setDefaultMap', null);
             }
+        } else if (params.deviceId) {
+            $rootScope.$emit('infoLocation', {id: params.deviceId, direction: params.direction});
         }
 
         $scope.historyUrl = $location.search();
@@ -133 +113 @@
 app.controller('searchController', function ($rootScope, $scope, $location, config, Device) {
 
     this.$onInit = function () {
+        $scope.config = config;
         $scope.locations = [];
         $scope.showSearchLoading = false;
 
@@ -140 +121 @@
     };
 
     $scope.searchLocations = function () {
+        let params = $location.search();
+        params.q = $scope.search.q;
+        params.isDirection = $scope.search.isDirection ? 1 : null;
+        $location.search(params);
+
         if (!$scope.search.q || $scope.search.q.length <= 1) {
             $scope.locations = [];
             return;
@@ -147 +133 @@
 
         $scope.showSearchLoading = true;
 
-        let params = $location.search();
-        params.q = $scope.search.q;
-        params.isDirection = $scope.search.isDirection ? 1 : 0;
-        $location.search(params);
-
         Device.query({
             address: $scope.search.q,
             showDirection: $scope.search.isDirection ? 1 : 0
@@ -167 +148 @@
 
     $rootScope.$on('setSearchFromUrl', function (event, args) {
         let params = $location.search();
-
         $scope.search = {
             q: params.q,
             isDirection: params.isDirection ? !!+params.isDirection : false
@@ -189 +169 @@
         $rootScope.selectDevice = null;
         $scope.showInfoLoading = false;
         $scope.vehicles = [];
-        $scope.typeVehicle = null;
         $scope.filterVehicles = [];
 
         Vehicle.query(null, function (data) {
@@ -211 +190 @@
             fromDate: moment(params.fromDate, 'YYYY-MM-DD').isValid() ? moment(params.fromDate).toDate() : defaultRange.fromDate.toDate(),
             toDate: moment(params.toDate, 'YYYY-MM-DD').isValid() ? moment(params.toDate).toDate() : defaultRange.toDate.toDate(),
             fromTime: moment(params.fromTime, 'HH:mm').isValid() ? moment(params.fromTime, 'HH:mm').toDate() : defaultRange.fromTime.toDate(),
-            toTime: moment(params.toTime, 'HH:mm').isValid() ? moment(params.toTime, 'HH:mm').toDate() : defaultRange.toTime.toDate()
+            toTime: moment(params.toTime, 'HH:mm').isValid() ? moment(params.toTime, 'HH:mm').toDate() : defaultRange.toTime.toDate(),
+            isTime: params.isTime == 0 ? false : defaultRange.isTime
         };
 
     });
@@ -226 +206 @@
 
         let range = $scope.getRange();
 
+        // if (!$rootScope.selectDevice || args.id !== $rootScope.selectDevice.id)
+        //     $rootScope.selectDevice = {name: '...', street: '...', town: '...'};
+
+
         Device.get({
+            period: range.isTime ? 'time-period' : 'day-period',
             id: args.id,
             direction: args.direction,
             dateFrom: range.fromDate.format('YYYY-MM-DD'),
             dateTo: range.toDate.format('YYYY-MM-DD'),
-            timeFrom: range.fromTime.format('HH:mm'),
-            timeTo: range.toTime.format('HH:mm'),
+            timeFrom: range.isTime ? range.fromTime.format('HH:mm') : null,
+            timeTo: range.isTime ? range.toTime.format('HH:mm') : null,
         }, function (data) {
             $rootScope.selectDevice = data;
 
-            $scope.typeVehicle = null;
             $scope.renderGraphAverageSpeed();
             $scope.renderGraphNumberVehicles();
 
@@ -250 +234 @@
 
     });
 
+
     $scope.changeRange = function () {
-        if ($scope.range.fromDate >= $scope.range.toDate || $scope.range.fromTime >= $scope.range.toTime) {
+        if ($scope.range.fromDate >= $scope.range.toDate || ($scope.range.isTime && $scope.range.fromTime >= $scope.range.toTime)) {
             $rootScope.selectDevice.traffics = [];
             return;
         }
@@ -261 +246 @@
         let params = $location.search();
         params.fromDate = range.fromDate.format('YYYY-MM-DD');
         params.toDate = range.toDate.format('YYYY-MM-DD');
-        params.fromTime = range.fromTime.format('HH:mm');
-        params.toTime = range.toTime.format('HH:mm');
+        params.fromTime = range.isTime ? range.fromTime.format('HH:mm') : null;
+        params.toTime = range.isTime ? range.toTime.format('HH:mm') : null;
+        params.isTime = range.isTime ? null : 0;
         $location.search(params);
 
         if ($rootScope.selectDevice)
@@ -279 +265 @@
             fromDate: moment($scope.range.fromDate).isValid() ? moment($scope.range.fromDate) : defaultRange.fromDate,
             toDate: moment($scope.range.toDate).isValid() ? moment($scope.range.toDate) : defaultRange.toDate,
             fromTime: moment($scope.range.fromTime).isValid() ? moment($scope.range.fromTime) : defaultRange.fromTime,
-            toTime: moment($scope.range.toTime).isValid() ? moment($scope.range.toTime) : defaultRange.toTime
+            toTime: moment($scope.range.toTime).isValid() ? moment($scope.range.toTime) : defaultRange.toTime,
+            isTime: $scope.range.isTime ? true : false
         };
     };
 
@@ -288 +275 @@
             fromDate: moment().day(-30),
             toDate: moment().day(-1),
             fromTime: moment({hour: 7}),
-            toTime: moment({hour: 16})
+            toTime: moment({hour: 16}),
+            isTime: true
         };
     };
 
-
     $scope.renderGraphAverageSpeed = function () {
 
         let t = $rootScope.selectDevice.traffics.reduce(function (l, r) {
-            let key = r.timeFrom;
+            let key = $scope.range.isTime ? r.timeFrom : r.date;
             if (typeof l[key] === 'undefined') {
                 l[key] = {
                     numberVehicle: 0,
@@ -312 +299 @@
         }, {});
 
         let labels = jQuery.unique($rootScope.selectDevice.traffics.map(function (d) {
-            return d.timeFrom;
+            return $scope.range.isTime ? d.timeFrom : moment(d.date, 'YYYY-MM-DD').format('D.M.YYYY');
         }));
         let data = Object.values(t).map(function (d) {
             return Math.round(d.speedSum / d.numberVehicle);
         });
 
-
         let canvasGraphAverageSpeed = document.getElementById('graphAverageSpeed').getContext('2d');
 
         if ($scope.graphAverageSpeed)
@@ -336 +322 @@
                     backgroundColor: 'rgba(0, 123, 255, 0.3)',
                     borderColor: 'rgba(0, 123, 255,1)',
                     cubicInterpolationMode: 'monotone',
-                    radius: 0
+                    pointRadius: 0
                 }]
             },
             options: {
                 responsive: true,
                 pointDot: false,
+                legend: {
+                    display: false
+                },
                 scales: {
                     xAxes: [{
                         ticks: {
@@ -355 +344 @@
                             labelString: 'km/h'
                         },
                         ticks: {
-                            beginAtZero: true
+                            beginAtZero: true,
+                            max: Math.max(Math.round((Math.max.apply(null, data) + 10) / 10) * 10, 70)
                         }
                     }]
                 },
                 tooltips: {
-                    enabled: true,
-                    mode: 'single',
+                    mode: 'index',
+                    intersect: false,
                     callbacks: {
                         label: function (tooltipItems) {
                             return tooltipItems.yLabel + ' km/h';
@@ -380 +370 @@
 
 
         let labels = jQuery.unique($rootScope.selectDevice.traffics.map(function (d) {
-            return d.timeFrom;
+            return $scope.range.isTime ? d.timeFrom : moment(d.date, 'YYYY-MM-DD').format('D.M.YYYY');
         }));
 
         let useVehiclesIds = jQuery.unique($rootScope.selectDevice.traffics.map(function (d) {
@@ -393 +383 @@
 
         let datasets = [];
         for (let i = 0, vehicle; vehicle = $scope.filterVehicles[i]; i++) {
-            if ($scope.typeVehicle == null || $scope.typeVehicle === vehicle.id) {
-                let dataset = {
-                    label: vehicle.name,
-                    backgroundColor: color[vehicle.id].replace("#alpha", "0.3"),
-                    borderColor: color[vehicle.id].replace("#alpha", "1"),
-                    borderWidth: 2,
-                    data: []
-                };
-
-                let l = 0;
-                for (let j = 0, traffic; traffic = $rootScope.selectDevice.traffics[j]; j++) {
-                    if (labels[l] !== traffic.timeFrom) {
-                        l++;
-                        if (dataset.data.length < l) {
-                            dataset.data.push(0);
-                        }
-                    }
-                    if (traffic.typeVehicleId === vehicle.id) {
-                        dataset.data.push(traffic.numberVehicleAverage);
+            let dataset = {
+                label: vehicle.name,
+                backgroundColor: color[vehicle.id].replace("#alpha", "0.3"),
+                borderColor: color[vehicle.id].replace("#alpha", "1"),
+                borderWidth: 2,
+                data: []
+            };
+
+            let l = 0;
+            for (let j = 0, traffic; traffic = $rootScope.selectDevice.traffics[j]; j++) {
+                if (($scope.range.isTime && labels[l] !== traffic.timeFrom) || (!$scope.range.isTime && labels[l] !== moment(traffic.date, 'YYYY-MM-DD').format('D.M.YYYY'))) {
+                    l++;
+                    if (dataset.data.length < l) {
+                        dataset.data.push(0);
                     }
                 }
-                datasets.push(dataset);
+                if (traffic.typeVehicleId === vehicle.id) {
+                    dataset.data.push($scope.range.isTime ? traffic.numberVehicleAverage : traffic.numberVehicle);
+                }
             }
+            datasets.push(dataset);
         }
 
         let canvasGraphNumberVehicles = document.getElementById('graphNumberVehicles').getContext('2d');
@@ -430 +418 @@
                 datasets: datasets
             },
             options: {
-                tooltips: {
-                    mode: 'index',
-                    intersect: false
-                },
                 responsive: true,
+                onResize: function (chart, size) {
+                    chart.options.legend.display = size.height > 240;
+                    chart.update();
+                },
+                legend: {
+                    position: 'bottom',
+                },
                 scales: {
                     xAxes: [{
                         stacked: true,
@@ -450 +441 @@
                         },
                         stacked: true
                     }]
+                },
+                tooltips: {
+                    mode: 'index',
+                    intersect: false
                 }
             }
         });
     };
 
-
     $scope.infoClose = function () {
         $rootScope.selectDevice = null;
 
@@ -472 +466 @@
 app.controller('mapController', function ($rootScope, $scope, config, Device) {
 
     this.$onInit = function () {
+        $scope.markers = [];
 
-        $scope.map = new GMaps({
-            div: '#map',
+        $scope.map = new google.maps.Map(document.getElementById('map'), {
+            center: {lat: config.DEFAULT_POSITION.LAT, lng: config.DEFAULT_POSITION.LNG},
+            zoom: config.DEFAULT_ZOOM,
+            minZoom: config.DEFAULT_ZOOM_MAX,
             zoomControl: true,
             mapTypeControl: false,
             scaleControl: false,
             streetViewControl: false,
             rotateControl: false,
             fullscreenControl: false,
-            mapTypeId: 'roadmap',
-            zoom: config.DEFAULT_ZOOM,
-            lat: config.DEFAULT_POSITION.LAT,
-            lng: config.DEFAULT_POSITION.LNG,
-            // styles: [
-            //     {
-            //         featureType: "poi",
-            //         elementType: "labels",
-            //         stylers: [{ visibility: "off" }]
-            //     }
-            // ]
+            mapTypeId: google.maps.MapTypeId.ROADMAP
         });
 
         Device.query({showDirection: 0}, function (data) {
@@ -504 +491 @@
         });
     };
 
-
     $scope.createMarker = function (lctn) {
         if (lctn.lat && lctn.lng) {
-            $scope.map.addMarker({
-                lat: lctn.lat,
-                lng: lctn.lng,
+            let marker = new google.maps.Marker({
+                map: $scope.map,
+                position: {lat: lctn.lat, lng: lctn.lng},
                 title: lctn.name,
-                click: function () {
-                    $rootScope.$emit('infoLocation', {id: lctn.id});
-                },
-                infoWindow: {
+                infoWindow: new google.maps.InfoWindow({
                     content: '<h6 class="mb-1">' + lctn.name + '</h6>'
                     + '<address>' + lctn.street + ', ' + lctn.town + '</address>'
-                },
+                }),
                 id: lctn.id
             });
+
+            marker.addListener('click', function () {
+                $scope.closeInfoWindows();
+                marker.infoWindow.open($scope.map, marker);
+                $rootScope.$emit('infoLocation', {id: lctn.id});
+            });
+
+            $scope.markers.push(marker);
         }
     };
 
     $rootScope.$on('activeMarker', function (event, args) {
         let id = args.id;
-        for (let i = 0, marker; marker = $scope.map.markers[i]; i++) {
+        for (let i = 0, marker; marker = $scope.markers[i]; i++) {
             if (marker.id && marker.id === id && marker.infoWindow) {
-                $scope.map.setCenter(marker.position.lat(), marker.position.lng());
+                $scope.map.setCenter(marker.getPosition());
                 $scope.map.setZoom(12);
-                $scope.map.hideInfoWindows();
                 marker.infoWindow.open($scope.map, marker);
-                return;
+            } else {
+                marker.infoWindow.close();
             }
         }
     });
 
     $rootScope.$on('setDefaultMap', function (event, args) {
-        $scope.map.setCenter(config.DEFAULT_POSITION.LAT, config.DEFAULT_POSITION.LNG);
+        $scope.map.setCenter({lat: config.DEFAULT_POSITION.LAT, lng: config.DEFAULT_POSITION.LNG});
         $scope.map.setZoom(config.DEFAULT_ZOOM);
-        $scope.map.hideInfoWindows();
+        $scope.closeInfoWindows();
     });
+
+    $scope.closeInfoWindows = function () {
+        for (let i = 0, marker; marker = $scope.markers[i]; i++) {
+            marker.infoWindow.close();
+        }
+    };
 });
 
 
 app.factory('Device', function ($resource, config) {
-    return $resource(config.API_URL + '/devices/:id', {id: '@id'}, {
+    return $resource(config.API_URL + '/devices/:id', {id: '@id', period: '@period'}, {
         'get': {
-            url: config.API_URL + '/devices/:id/time-period',
+            url: config.API_URL + '/devices/:id/:period',
             method: 'GET',
             headers: {
                 'Content-Type': 'application/json',

frontend/assets/css/main.css

@@ -1 @@
-* {
-    padding: 0;
-    margin: 0;
-}
-
-html, body {
-    min-height: 100% !important;
-    width: 100%;
-    height: 100%;
-    padding: 0;
-    margin: 0;
-}
-
-#search {
-    min-height: 100%;
-    background: #CFD8DC;
-    box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.75);
-    z-index: 20;
-    overflow: auto;
-}
-
-#search header h1 {
-    line-height: 1rem;
-    font-size: 1rem;
-    font-weight: bold;
-}
-
-.searchWrapper {
-    min-height: calc(100% - 40px);
-    float: left;
-}
-
-#info {
-    min-height: 100%;
-    box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.75);
-    z-index: 10;
-    overflow: auto;
-}
-
-#info header address {
-    margin: 0;
-}
-
-#map {
-    padding: 0;
-    margin: 0;
-    overflow: hidden;
-    min-height: 100%;
-}
-
-/* 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 {
-    width: 100%;
-    height: 100%;
-    z-index: 1000;
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: #CFD8DC;
-}
-
-#loadingScreen .loading {
-    border: 12px solid white;
-    border-top: 12px solid #007bff;
-    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;
-}
-
-#loadingScreen #logo {
-    width: 100%;
-    height: 50px;
-    position: fixed;
-    top: -160px;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    margin: auto 0;
-    text-align: center;
-    font-size: 1.4rem;
-}
-
-#loadingScreen #noscript {
-    width: 100%;
-    height: 110px;
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    margin: auto 0;
-    text-align: center;
-    font-size: 1rem;
-    background-color: #CFD8DC;
-}
-
-/*GRAPH */
-#graphAverageSpeed, #graphAverageSpeed{
-    width: 100% !important;
-    max-height: 575px !important;
-
-}
-
-/*SCROLLBAR*/
-
-::-webkit-scrollbar-track {
-    background-color: whitesmoke;
-}
-
-::-webkit-scrollbar {
-    width: 8px;
-    background-color: whitesmoke;
-}
-
-::-webkit-scrollbar-thumb {
-    background-color: rgba(0, 123, 255, 0.75);
-}
-
-/*BOOTSTRAP*/
-.custom-checkbox .custom-control-label::before {
-    background-color: white;
-}

frontend/assets/css/styles.min.css

@@ +1 @@
+*{margin:0;padding:0}html,body{width:100%;height:100%;min-height:100% !important;margin:0;padding:0}#search{z-index:20;float:left;min-height:100%;max-height:100%;overflow:auto;background-color:#cfd8dc;box-shadow:0 0 10px 0 rgba(50,50,50,0.75)}#search header h1{font-weight:bold;font-size:1rem;line-height:1rem}#search footer{float:left}.searchWrapper{float:left;min-height:calc(100% - 40px)}.searchWrapper .custom-control-label::before{background-color:white}#info{z-index:10;min-height:100%;max-height:100%;overflow:auto;box-shadow:0 0 10px 0 rgba(50,50,50,0.75)}#info header address{margin:0}@media (max-width: 991.98px){#info,#search{height:auto;min-height:auto;max-height:none;overflow:hidden;box-shadow:none}}#map{min-height:100%;max-height:100%;margin:0;padding:0;overflow:hidden}.loading{width:50px;height:50px;margin:0 auto;border:6px solid #fff;border-top:6px solid #007bff;border-radius:50%;animation:spin 2s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}#loadingScreen{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;width:100%;height:100%;background-color:#cfd8dc}#loadingScreen .loading{position:fixed;top:0;right:0;bottom:0;left:0;width:100px;height:100px;margin:auto auto;border:12px solid #fff;border-top:12px solid #007bff;border-radius:50%;animation:spin 2s linear infinite}#loadingScreen #logo{position:fixed;top:-160px;right:0;bottom:0;left:0;width:100%;height:50px;margin:auto 0;font-size:1.4rem;text-align:center}#loadingScreen #noscript{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:110px;margin:auto 0;font-size:1rem;text-align:center;background-color:#cfd8dc}#graphAverageSpeed,#graphNumberVehicles{width:100%;background-color:white}::-webkit-scrollbar-track{background-color:#f5f5f5}::-webkit-scrollbar{width:8px;background-color:#f5f5f5}::-webkit-scrollbar-thumb{background-color:rgba(0,123,255,0.75)}
+
+/*# sourceMappingURL=styles.min.css.map */

frontend/assets/css/styles.min.css.map

@@ +1 @@
+{"version":3,"file":"styles.min.css","sources":["styles.scss","_variables.scss"],"sourcesContent":["@import './variables';\r\n\r\n* {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n\r\nhtml,\r\nbody {\r\n  width: 100%;\r\n  height: 100%;\r\n  min-height: 100% !important;\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n\r\n#search {\r\n  z-index: 20;\r\n  float: left;\r\n  min-height: 100%;\r\n  max-height: 100%;\r\n  overflow: auto;\r\n  background-color: $primary-background-color;\r\n  box-shadow: 0 0 10px 0 rgba(50, 50, 50, 0.75);\r\n\r\n  header h1 {\r\n    font-weight: bold;\r\n    font-size: 1rem;\r\n    line-height: 1rem;\r\n  }\r\n\r\n  footer {\r\n    float: left;\r\n  }\r\n}\r\n\r\n.searchWrapper {\r\n  float: left;\r\n  min-height: calc(100% - 40px);\r\n\r\n  .custom-control-label::before {\r\n    background-color: white;\r\n  }\r\n}\r\n\r\n#info {\r\n  z-index: 10;\r\n  min-height: 100%;\r\n  max-height: 100%;\r\n  overflow: auto;\r\n  box-shadow: 0 0 10px 0 rgba(50, 50, 50, 0.75);\r\n\r\n  header address {\r\n    margin: 0;\r\n  }\r\n}\r\n\r\n@media (max-width: 991.98px) {\r\n  #info,\r\n  #search {\r\n    height: auto;\r\n    min-height: auto;\r\n    max-height: none;\r\n    overflow: hidden;\r\n    box-shadow: none;\r\n  }\r\n}\r\n\r\n#map {\r\n  min-height: 100%;\r\n  max-height: 100%;\r\n  margin: 0;\r\n  padding: 0;\r\n  overflow: hidden;\r\n}\r\n\r\n/* LOADING */\r\n.loading {\r\n  width: 50px;\r\n  height: 50px;\r\n  margin: 0 auto;\r\n  border: 6px solid $loading-second-color;\r\n  border-top: 6px solid $loading-first-color;\r\n  border-radius: 50%;\r\n  animation: spin 2s linear infinite;\r\n}\r\n\r\n@keyframes spin {\r\n  0% {\r\n    transform: rotate(0deg);\r\n  }\r\n\r\n  100% {\r\n    transform: rotate(360deg);\r\n  }\r\n}\r\n\r\n#loadingScreen {\r\n  position: fixed;\r\n  top: 0;\r\n  right: 0;\r\n  bottom: 0;\r\n  left: 0;\r\n  z-index: 1000;\r\n  width: 100%;\r\n  height: 100%;\r\n  background-color: $primary-background-color;\r\n\r\n  .loading {\r\n    position: fixed;\r\n    top: 0;\r\n    right: 0;\r\n    bottom: 0;\r\n    left: 0;\r\n    width: 100px;\r\n    height: 100px;\r\n    margin: auto auto;\r\n    border: 12px solid $loading-second-color;\r\n    border-top: 12px solid $loading-first-color;\r\n    border-radius: 50%;\r\n    animation: spin 2s linear infinite;\r\n  }\r\n\r\n  #logo {\r\n    position: fixed;\r\n    top: -160px;\r\n    right: 0;\r\n    bottom: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 50px;\r\n    margin: auto 0;\r\n    font-size: 1.4rem;\r\n    text-align: center;\r\n  }\r\n\r\n  #noscript {\r\n    position: fixed;\r\n    top: 0;\r\n    right: 0;\r\n    bottom: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 110px;\r\n    margin: auto 0;\r\n    font-size: 1rem;\r\n    text-align: center;\r\n    background-color: $primary-background-color;\r\n  }\r\n}\r\n\r\n/* GRAPH */\r\n\r\n#graphAverageSpeed,\r\n#graphNumberVehicles {\r\n  width: 100%;\r\n  background-color: white;\r\n}\r\n\r\n/* SCROLLBAR */\r\n\r\n::-webkit-scrollbar-track {\r\n  background-color: $scrollbar-background-color;\r\n}\r\n\r\n::-webkit-scrollbar {\r\n  width: 8px;\r\n  background-color: $scrollbar-background-color;\r\n}\r\n\r\n::-webkit-scrollbar-thumb {\r\n  background-color: rgba($scrollbar-color, 0.75);\r\n}\r\n\r\n","$primary-background-color: #cfd8dc;\r\n\r\n$loading-first-color: #007bff;\r\n$loading-second-color: white;\r\n\r\n$scrollbar-background-color: whitesmoke;\r\n$scrollbar-color: #007bff;\r\n"],"names":[],"mappings":"AAEA,AAAA,CAAC,AAAC,CACA,MAAM,CAAE,CAAC,CACT,OAAO,CAAE,CAAC,CACX,AAED,AAAA,IAAI,CACJ,IAAI,AAAC,CACH,KAAK,CAAE,IAAI,CACX,MAAM,CAAE,IAAI,CACZ,UAAU,CAAE,eAAe,CAC3B,MAAM,CAAE,CAAC,CACT,OAAO,CAAE,CAAC,CACX,AAED,AAAA,OAAO,AAAC,CACN,OAAO,CAAE,EAAE,CACX,KAAK,CAAE,IAAI,CACX,UAAU,CAAE,IAAI,CAChB,UAAU,CAAE,IAAI,CAChB,QAAQ,CAAE,IAAI,CACd,gBAAgB,CCtBS,OAAO,CDuBhC,UAAU,CAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,mBAAsB,CAW9C,AAlBD,AASE,OATK,CASL,MAAM,CAAC,EAAE,AAAC,CACR,WAAW,CAAE,IAAI,CACjB,SAAS,CAAE,IAAI,CACf,WAAW,CAAE,IAAI,CAClB,AAbH,AAeE,OAfK,CAeL,MAAM,AAAC,CACL,KAAK,CAAE,IAAI,CACZ,AAGH,AAAA,cAAc,AAAC,CACb,KAAK,CAAE,IAAI,CACX,UAAU,CAAE,iBAAiB,CAK9B,AAPD,AAIE,cAJY,CAIZ,qBAAqB,AAAA,QAAQ,AAAC,CAC5B,gBAAgB,CAAE,KAAK,CACxB,AAGH,AAAA,KAAK,AAAC,CACJ,OAAO,CAAE,EAAE,CACX,UAAU,CAAE,IAAI,CAChB,UAAU,CAAE,IAAI,CAChB,QAAQ,CAAE,IAAI,CACd,UAAU,CAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,mBAAsB,CAK9C,AAVD,AAOE,KAPG,CAOH,MAAM,CAAC,OAAO,AAAC,CACb,MAAM,CAAE,CAAC,CACV,AAGH,MAAM,EAAE,SAAS,EAAE,QAAQ,EACzB,AAAA,KAAK,CACL,OAAO,AAAC,CACN,MAAM,CAAE,IAAI,CACZ,UAAU,CAAE,IAAI,CAChB,UAAU,CAAE,IAAI,CAChB,QAAQ,CAAE,MAAM,CAChB,UAAU,CAAE,IAAI,CACjB,CAGH,AAAA,IAAI,AAAC,CACH,UAAU,CAAE,IAAI,CAChB,UAAU,CAAE,IAAI,CAChB,MAAM,CAAE,CAAC,CACT,OAAO,CAAE,CAAC,CACV,QAAQ,CAAE,MAAM,CACjB,AAGD,AAAA,QAAQ,AAAC,CACP,KAAK,CAAE,IAAI,CACX,MAAM,CAAE,IAAI,CACZ,MAAM,CAAE,MAAM,CACd,MAAM,CAAE,GAAG,CAAC,KAAK,CC9EI,IAAK,CD+E1B,UAAU,CAAE,GAAG,CAAC,KAAK,CChFD,OAAO,CDiF3B,aAAa,CAAE,GAAG,CAClB,SAAS,CAAE,uBAAuB,CACnC,AAED,UAAU,CAAV,IAAU,CACR,EAAE,CACA,SAAS,CAAE,YAAY,CAGzB,IAAI,CACF,SAAS,CAAE,cAAc,EAI7B,AAAA,cAAc,AAAC,CACb,QAAQ,CAAE,KAAK,CACf,GAAG,CAAE,CAAC,CACN,KAAK,CAAE,CAAC,CACR,MAAM,CAAE,CAAC,CACT,IAAI,CAAE,CAAC,CACP,OAAO,CAAE,IAAI,CACb,KAAK,CAAE,IAAI,CACX,MAAM,CAAE,IAAI,CACZ,gBAAgB,CC1GS,OAAO,CDqJjC,AApDD,AAWE,cAXY,CAWZ,QAAQ,AAAC,CACP,QAAQ,CAAE,KAAK,CACf,GAAG,CAAE,CAAC,CACN,KAAK,CAAE,CAAC,CACR,MAAM,CAAE,CAAC,CACT,IAAI,CAAE,CAAC,CACP,KAAK,CAAE,KAAK,CACZ,MAAM,CAAE,KAAK,CACb,MAAM,CAAE,SAAS,CACjB,MAAM,CAAE,IAAI,CAAC,KAAK,CClHC,IAAK,CDmHxB,UAAU,CAAE,IAAI,CAAC,KAAK,CCpHJ,OAAO,CDqHzB,aAAa,CAAE,GAAG,CAClB,SAAS,CAAE,uBAAuB,CACnC,AAxBH,AA0BE,cA1BY,CA0BZ,KAAK,AAAC,CACJ,QAAQ,CAAE,KAAK,CACf,GAAG,CAAE,MAAM,CACX,KAAK,CAAE,CAAC,CACR,MAAM,CAAE,CAAC,CACT,IAAI,CAAE,CAAC,CACP,KAAK,CAAE,IAAI,CACX,MAAM,CAAE,IAAI,CACZ,MAAM,CAAE,MAAM,CACd,SAAS,CAAE,MAAM,CACjB,UAAU,CAAE,MAAM,CACnB,AArCH,AAuCE,cAvCY,CAuCZ,SAAS,AAAC,CACR,QAAQ,CAAE,KAAK,CACf,GAAG,CAAE,CAAC,CACN,KAAK,CAAE,CAAC,CACR,MAAM,CAAE,CAAC,CACT,IAAI,CAAE,CAAC,CACP,KAAK,CAAE,IAAI,CACX,MAAM,CAAE,KAAK,CACb,MAAM,CAAE,MAAM,CACd,SAAS,CAAE,IAAI,CACf,UAAU,CAAE,MAAM,CAClB,gBAAgB,CCnJO,OAAO,CDoJ/B,AAKH,AAAA,kBAAkB,CAClB,oBAAoB,AAAC,CACnB,KAAK,CAAE,IAAI,CACX,gBAAgB,CAAE,KAAK,CACxB,AAID,AAAA,yBAAyB,AAAC,CACxB,gBAAgB,CC7JW,OAAU,CD8JtC,AAED,AAAA,mBAAmB,AAAC,CAClB,KAAK,CAAE,GAAG,CACV,gBAAgB,CClKW,OAAU,CDmKtC,AAED,AAAA,yBAAyB,AAAC,CACxB,gBAAgB,CCrKA,oBAAO,CDsKxB"}

frontend/assets/libs/gmaps.min.js

@@ -1 @@
-"use strict";!function(a,b){"object"==typeof exports?module.exports=b():"function"==typeof define&&define.amd?define(["jquery","googlemaps!"],b):a.GMaps=b()}(this,function(){var a=function(a,b){var c;if(a===b)return a;for(c in b)void 0!==b[c]&&(a[c]=b[c]);return a},b=function(a,b){var c,d=Array.prototype.slice.call(arguments,2),e=[],f=a.length;if(Array.prototype.map&&a.map===Array.prototype.map)e=Array.prototype.map.call(a,function(a){var c=d.slice(0);return c.splice(0,0,a),b.apply(this,c)});else for(c=0;c<f;c++)callback_params=d,callback_params.splice(0,0,a[c]),e.push(b.apply(this,callback_params));return e},c=function(a){var b,c=[];for(b=0;b<a.length;b++)c=c.concat(a[b]);return c},d=function(a,b){var c=a[0],d=a[1];return b&&(c=a[1],d=a[0]),new google.maps.LatLng(c,d)},f=function(a,b){var c;for(c=0;c<a.length;c++)a[c]instanceof google.maps.LatLng||(a[c].length>0&&"object"==typeof a[c][0]?a[c]=f(a[c],b):a[c]=d(a[c],b));return a},g=function(a,b){var c=a.replace(".","");return"jQuery"in this&&b?$("."+c,b)[0]:document.getElementsByClassName(c)[0]},h=function(a,b){var a=a.replace("#","");return"jQuery"in window&&b?$("#"+a,b)[0]:document.getElementById(a)},i=function(a){var b=0,c=0;if(a.getBoundingClientRect){var d=a.getBoundingClientRect(),e=-(window.scrollX?window.scrollX:window.pageXOffset),f=-(window.scrollY?window.scrollY:window.pageYOffset);return[d.left-e,d.top-f]}if(a.offsetParent)do b+=a.offsetLeft,c+=a.offsetTop;while(a=a.offsetParent);return[b,c]},j=function(b){var c=document,d=function(b){if("object"!=typeof window.google||!window.google.maps)return"object"==typeof window.console&&window.console.error&&console.error("Google Maps API is required. Please register the following JavaScript library https://maps.googleapis.com/maps/api/js."),function(){};if(!this)return new d(b);b.zoom=b.zoom||15,b.mapType=b.mapType||"roadmap";var e,f=function(a,b){return void 0===a?b:a},j=this,k=["bounds_changed","center_changed","click","dblclick","drag","dragend","dragstart","idle","maptypeid_changed","projection_changed","resize","tilesloaded","zoom_changed"],l=["mousemove","mouseout","mouseover"],m=["el","lat","lng","mapType","width","height","markerClusterer","enableNewStyle"],n=b.el||b.div,o=b.markerClusterer,p=google.maps.MapTypeId[b.mapType.toUpperCase()],q=new google.maps.LatLng(b.lat,b.lng),r=f(b.zoomControl,!0),s=b.zoomControlOpt||{style:"DEFAULT",position:"TOP_LEFT"},t=s.style||"DEFAULT",u=s.position||"TOP_LEFT",v=f(b.panControl,!0),w=f(b.mapTypeControl,!0),x=f(b.scaleControl,!0),y=f(b.streetViewControl,!0),z=f(z,!0),A={},B={zoom:this.zoom,center:q,mapTypeId:p},C={panControl:v,zoomControl:r,zoomControlOptions:{style:google.maps.ZoomControlStyle[t],position:google.maps.ControlPosition[u]},mapTypeControl:w,scaleControl:x,streetViewControl:y,overviewMapControl:z};if("string"==typeof b.el||"string"==typeof b.div?n.indexOf("#")>-1?this.el=h(n,b.context):this.el=g.apply(this,[n,b.context]):this.el=n,void 0===this.el||null===this.el)throw"No element defined.";for(window.context_menu=window.context_menu||{},window.context_menu[j.el.id]={},this.controls=[],this.overlays=[],this.layers=[],this.singleLayers={},this.markers=[],this.polylines=[],this.routes=[],this.polygons=[],this.infoWindow=null,this.overlay_el=null,this.zoom=b.zoom,this.registered_events={},this.el.style.width=b.width||this.el.scrollWidth||this.el.offsetWidth,this.el.style.height=b.height||this.el.scrollHeight||this.el.offsetHeight,google.maps.visualRefresh=b.enableNewStyle,e=0;e<m.length;e++)delete b[m[e]];for(1!=b.disableDefaultUI&&(B=a(B,C)),A=a(B,b),e=0;e<k.length;e++)delete A[k[e]];for(e=0;e<l.length;e++)delete A[l[e]];this.map=new google.maps.Map(this.el,A),o&&(this.markerClusterer=o.apply(this,[this.map]));var D=function(a,b){var c="",d=window.context_menu[j.el.id][a];for(var e in d)if(d.hasOwnProperty(e)){var f=d[e];c+='<li><a id="'+a+"_"+e+'" href="#">'+f.title+"</a></li>"}if(h("gmaps_context_menu")){var g=h("gmaps_context_menu");g.innerHTML=c;var e,k=g.getElementsByTagName("a"),l=k.length;for(e=0;e<l;e++){var m=k[e],n=function(c){c.preventDefault(),d[this.id.replace(a+"_","")].action.apply(j,[b]),j.hideContextMenu()};google.maps.event.clearListeners(m,"click"),google.maps.event.addDomListenerOnce(m,"click",n,!1)}var o=i.apply(this,[j.el]),p=o[0]+b.pixel.x-15,q=o[1]+b.pixel.y-15;g.style.left=p+"px",g.style.top=q+"px"}};this.buildContextMenu=function(a,b){if("marker"===a){b.pixel={};var c=new google.maps.OverlayView;c.setMap(j.map),c.draw=function(){var d=c.getProjection(),e=b.marker.getPosition();b.pixel=d.fromLatLngToContainerPixel(e),D(a,b)}}else D(a,b);var d=h("gmaps_context_menu");setTimeout(function(){d.style.display="block"},0)},this.setContextMenu=function(a){window.context_menu[j.el.id][a.control]={};var b,d=c.createElement("ul");for(b in a.options)if(a.options.hasOwnProperty(b)){var e=a.options[b];window.context_menu[j.el.id][a.control][e.name]={title:e.title,action:e.action}}d.id="gmaps_context_menu",d.style.display="none",d.style.position="absolute",d.style.minWidth="100px",d.style.background="white",d.style.listStyle="none",d.style.padding="8px",d.style.boxShadow="2px 2px 6px #ccc",h("gmaps_context_menu")||c.body.appendChild(d);var f=h("gmaps_context_menu");google.maps.event.addDomListener(f,"mouseout",function(a){a.relatedTarget&&this.contains(a.relatedTarget)||window.setTimeout(function(){f.style.display="none"},400)},!1)},this.hideContextMenu=function(){var a=h("gmaps_context_menu");a&&(a.style.display="none")};var E=function(a,c){google.maps.event.addListener(a,c,function(a){void 0==a&&(a=this),b[c].apply(this,[a]),j.hideContextMenu()})};google.maps.event.addListener(this.map,"zoom_changed",this.hideContextMenu);for(var F=0;F<k.length;F++){var G=k[F];G in b&&E(this.map,G)}for(var F=0;F<l.length;F++){var G=l[F];G in b&&E(this.map,G)}google.maps.event.addListener(this.map,"rightclick",function(a){b.rightclick&&b.rightclick.apply(this,[a]),void 0!=window.context_menu[j.el.id].map&&j.buildContextMenu("map",a)}),this.refresh=function(){google.maps.event.trigger(this.map,"resize")},this.fitZoom=function(){var a,b=[],c=this.markers.length;for(a=0;a<c;a++)"boolean"==typeof this.markers[a].visible&&this.markers[a].visible&&b.push(this.markers[a].getPosition());this.fitLatLngBounds(b)},this.fitLatLngBounds=function(a){var b,c=a.length,d=new google.maps.LatLngBounds;for(b=0;b<c;b++)d.extend(a[b]);this.map.fitBounds(d)},this.setCenter=function(a,b,c){this.map.panTo(new google.maps.LatLng(a,b)),c&&c()},this.getElement=function(){return this.el},this.zoomIn=function(a){a=a||1,this.zoom=this.map.getZoom()+a,this.map.setZoom(this.zoom)},this.zoomOut=function(a){a=a||1,this.zoom=this.map.getZoom()-a,this.map.setZoom(this.zoom)};var H,I=[];for(H in this.map)"function"!=typeof this.map[H]||this[H]||I.push(H);for(e=0;e<I.length;e++)!function(a,b,c){a[c]=function(){return b[c].apply(b,arguments)}}(this,this.map,I[e])};return d}(this);j.prototype.createControl=function(a){var b=document.createElement("div");b.style.cursor="pointer",a.disableDefaultStyles!==!0&&(b.style.fontFamily="Roboto, Arial, sans-serif",b.style.fontSize="11px",b.style.boxShadow="rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px");for(var c in a.style)b.style[c]=a.style[c];a.id&&(b.id=a.id),a.title&&(b.title=a.title),a.classes&&(b.className=a.classes),a.content&&("string"==typeof a.content?b.innerHTML=a.content:a.content instanceof HTMLElement&&b.appendChild(a.content)),a.position&&(b.position=google.maps.ControlPosition[a.position.toUpperCase()]);for(var d in a.events)!function(b,c){google.maps.event.addDomListener(b,c,function(){a.events[c].apply(this,[this])})}(b,d);return b.index=1,b},j.prototype.addControl=function(a){var b=this.createControl(a);return this.controls.push(b),this.map.controls[b.position].push(b),b},j.prototype.removeControl=function(a){var b,c=null;for(b=0;b<this.controls.length;b++)this.controls[b]==a&&(c=this.controls[b].position,this.controls.splice(b,1));if(c)for(b=0;b<this.map.controls.length;b++){var d=this.map.controls[a.position];if(d.getAt(b)==a){d.removeAt(b);break}}return a},j.prototype.createMarker=function(b){if(void 0==b.lat&&void 0==b.lng&&void 0==b.position)throw"No latitude or longitude defined.";var c=this,d=b.details,e=b.fences,f=b.outside,g={position:new google.maps.LatLng(b.lat,b.lng),map:null},h=a(g,b);delete h.lat,delete h.lng,delete h.fences,delete h.outside;var i=new google.maps.Marker(h);if(i.fences=e,b.infoWindow){i.infoWindow=new google.maps.InfoWindow(b.infoWindow);for(var j=["closeclick","content_changed","domready","position_changed","zindex_changed"],k=0;k<j.length;k++)!function(a,c){b.infoWindow[c]&&google.maps.event.addListener(a,c,function(a){b.infoWindow[c].apply(this,[a])})}(i.infoWindow,j[k])}for(var l=["animation_changed","clickable_changed","cursor_changed","draggable_changed","flat_changed","icon_changed","position_changed","shadow_changed","shape_changed","title_changed","visible_changed","zindex_changed"],m=["dblclick","drag","dragend","dragstart","mousedown","mouseout","mouseover","mouseup"],k=0;k<l.length;k++)!function(a,c){b[c]&&google.maps.event.addListener(a,c,function(){b[c].apply(this,[this])})}(i,l[k]);for(var k=0;k<m.length;k++)!function(a,c,d){b[d]&&google.maps.event.addListener(c,d,function(c){c.pixel||(c.pixel=a.getProjection().fromLatLngToPoint(c.latLng)),b[d].apply(this,[c])})}(this.map,i,m[k]);return google.maps.event.addListener(i,"click",function(){this.details=d,b.click&&b.click.apply(this,[this]),i.infoWindow&&(c.hideInfoWindows(),i.infoWindow.open(c.map,i))}),google.maps.event.addListener(i,"rightclick",function(a){a.marker=this,b.rightclick&&b.rightclick.apply(this,[a]),void 0!=window.context_menu[c.el.id].marker&&c.buildContextMenu("marker",a)}),i.fences&&google.maps.event.addListener(i,"dragend",function(){c.checkMarkerGeofence(i,function(a,b){f(a,b)})}),i},j.prototype.addMarker=function(a){var b;if(a.hasOwnProperty("gm_accessors_"))b=a;else{if(!(a.hasOwnProperty("lat")&&a.hasOwnProperty("lng")||a.position))throw"No latitude or longitude defined.";b=this.createMarker(a)}return b.setMap(this.map),this.markerClusterer&&this.markerClusterer.addMarker(b),this.markers.push(b),j.fire("marker_added",b,this),b},j.prototype.addMarkers=function(a){for(var b,c=0;b=a[c];c++)this.addMarker(b);return this.markers},j.prototype.hideInfoWindows=function(){for(var a,b=0;a=this.markers[b];b++)a.infoWindow&&a.infoWindow.close()},j.prototype.removeMarker=function(a){for(var b=0;b<this.markers.length;b++)if(this.markers[b]===a){this.markers[b].setMap(null),this.markers.splice(b,1),this.markerClusterer&&this.markerClusterer.removeMarker(a),j.fire("marker_removed",a,this);break}return a},j.prototype.removeMarkers=function(a){var b=[];if(void 0===a){for(var c=0;c<this.markers.length;c++){var d=this.markers[c];d.setMap(null),j.fire("marker_removed",d,this)}this.markerClusterer&&this.markerClusterer.clearMarkers&&this.markerClusterer.clearMarkers(),this.markers=b}else{for(var c=0;c<a.length;c++){var e=this.markers.indexOf(a[c]);if(e>-1){var d=this.markers[e];d.setMap(null),this.markerClusterer&&this.markerClusterer.removeMarker(d),j.fire("marker_removed",d,this)}}for(var c=0;c<this.markers.length;c++){var d=this.markers[c];null!=d.getMap()&&b.push(d)}this.markers=b}},j.prototype.drawOverlay=function(a){var b=new google.maps.OverlayView,c=!0;return b.setMap(this.map),null!=a.auto_show&&(c=a.auto_show),b.onAdd=function(){var c=document.createElement("div");c.style.borderStyle="none",c.style.borderWidth="0px",c.style.position="absolute",c.style.zIndex=100,c.innerHTML=a.content,b.el=c,a.layer||(a.layer="overlayLayer");var d=this.getPanes(),e=d[a.layer],f=["contextmenu","DOMMouseScroll","dblclick","mousedown"];e.appendChild(c);for(var g=0;g<f.length;g++)!function(a,b){google.maps.event.addDomListener(a,b,function(a){navigator.userAgent.toLowerCase().indexOf("msie")!=-1&&document.all?(a.cancelBubble=!0,a.returnValue=!1):a.stopPropagation()})}(c,f[g]);a.click&&(d.overlayMouseTarget.appendChild(b.el),google.maps.event.addDomListener(b.el,"click",function(){a.click.apply(b,[b])})),google.maps.event.trigger(this,"ready")},b.draw=function(){var d=this.getProjection(),e=d.fromLatLngToDivPixel(new google.maps.LatLng(a.lat,a.lng));a.horizontalOffset=a.horizontalOffset||0,a.verticalOffset=a.verticalOffset||0;var f=b.el,g=f.children[0],h=g.clientHeight,i=g.clientWidth;switch(a.verticalAlign){case"top":f.style.top=e.y-h+a.verticalOffset+"px";break;default:case"middle":f.style.top=e.y-h/2+a.verticalOffset+"px";break;case"bottom":f.style.top=e.y+a.verticalOffset+"px"}switch(a.horizontalAlign){case"left":f.style.left=e.x-i+a.horizontalOffset+"px";break;default:case"center":f.style.left=e.x-i/2+a.horizontalOffset+"px";break;case"right":f.style.left=e.x+a.horizontalOffset+"px"}f.style.display=c?"block":"none",c||a.show.apply(this,[f])},b.onRemove=function(){var c=b.el;a.remove?a.remove.apply(this,[c]):(b.el.parentNode.removeChild(b.el),b.el=null)},this.overlays.push(b),b},j.prototype.removeOverlay=function(a){for(var b=0;b<this.overlays.length;b++)if(this.overlays[b]===a){this.overlays[b].setMap(null),this.overlays.splice(b,1);break}},j.prototype.removeOverlays=function(){for(var a,b=0;a=this.overlays[b];b++)a.setMap(null);this.overlays=[]},j.prototype.drawPolyline=function(a){var b=[],c=a.path;if(c.length)if(void 0===c[0][0])b=c;else for(var d,e=0;d=c[e];e++)b.push(new google.maps.LatLng(d[0],d[1]));var f={map:this.map,path:b,strokeColor:a.strokeColor,strokeOpacity:a.strokeOpacity,strokeWeight:a.strokeWeight,geodesic:a.geodesic,clickable:!0,editable:!1,visible:!0};a.hasOwnProperty("clickable")&&(f.clickable=a.clickable),a.hasOwnProperty("editable")&&(f.editable=a.editable),a.hasOwnProperty("icons")&&(f.icons=a.icons),a.hasOwnProperty("zIndex")&&(f.zIndex=a.zIndex);for(var g=new google.maps.Polyline(f),h=["click","dblclick","mousedown","mousemove","mouseout","mouseover","mouseup","rightclick"],i=0;i<h.length;i++)!function(b,c){a[c]&&google.maps.event.addListener(b,c,function(b){a[c].apply(this,[b])})}(g,h[i]);return this.polylines.push(g),j.fire("polyline_added",g,this),g},j.prototype.removePolyline=function(a){for(var b=0;b<this.polylines.length;b++)if(this.polylines[b]===a){this.polylines[b].setMap(null),this.polylines.splice(b,1),j.fire("polyline_removed",a,this);break}},j.prototype.removePolylines=function(){for(var a,b=0;a=this.polylines[b];b++)a.setMap(null);this.polylines=[]},j.prototype.drawCircle=function(b){b=a({map:this.map,center:new google.maps.LatLng(b.lat,b.lng)},b),delete b.lat,delete b.lng;for(var c=new google.maps.Circle(b),d=["click","dblclick","mousedown","mousemove","mouseout","mouseover","mouseup","rightclick"],e=0;e<d.length;e++)!function(a,c){b[c]&&google.maps.event.addListener(a,c,function(a){b[c].apply(this,[a])})}(c,d[e]);return this.polygons.push(c),c},j.prototype.drawRectangle=function(b){b=a({map:this.map},b);var c=new google.maps.LatLngBounds(new google.maps.LatLng(b.bounds[0][0],b.bounds[0][1]),new google.maps.LatLng(b.bounds[1][0],b.bounds[1][1]));b.bounds=c;for(var d=new google.maps.Rectangle(b),e=["click","dblclick","mousedown","mousemove","mouseout","mouseover","mouseup","rightclick"],f=0;f<e.length;f++)!function(a,c){b[c]&&google.maps.event.addListener(a,c,function(a){b[c].apply(this,[a])})}(d,e[f]);return this.polygons.push(d),d},j.prototype.drawPolygon=function(d){var e=!1;d.hasOwnProperty("useGeoJSON")&&(e=d.useGeoJSON),delete d.useGeoJSON,d=a({map:this.map},d),0==e&&(d.paths=[d.paths.slice(0)]),d.paths.length>0&&d.paths[0].length>0&&(d.paths=c(b(d.paths,f,e)));for(var g=new google.maps.Polygon(d),h=["click","dblclick","mousedown","mousemove","mouseout","mouseover","mouseup","rightclick"],i=0;i<h.length;i++)!function(a,b){d[b]&&google.maps.event.addListener(a,b,function(a){d[b].apply(this,[a])})}(g,h[i]);return this.polygons.push(g),j.fire("polygon_added",g,this),g},j.prototype.removePolygon=function(a){for(var b=0;b<this.polygons.length;b++)if(this.polygons[b]===a){this.polygons[b].setMap(null),this.polygons.splice(b,1),j.fire("polygon_removed",a,this);break}},j.prototype.removePolygons=function(){for(var a,b=0;a=this.polygons[b];b++)a.setMap(null);this.polygons=[]},j.prototype.getFromFusionTables=function(a){var b=a.events;delete a.events;var c=a,d=new google.maps.FusionTablesLayer(c);for(var e in b)!function(a,c){google.maps.event.addListener(a,c,function(a){b[c].apply(this,[a])})}(d,e);return this.layers.push(d),d},j.prototype.loadFromFusionTables=function(a){var b=this.getFromFusionTables(a);return b.setMap(this.map),b},j.prototype.getFromKML=function(a){var b=a.url,c=a.events;delete a.url,delete a.events;var d=a,e=new google.maps.KmlLayer(b,d);for(var f in c)!function(a,b){google.maps.event.addListener(a,b,function(a){c[b].apply(this,[a])})}(e,f);return this.layers.push(e),e},j.prototype.loadFromKML=function(a){var b=this.getFromKML(a);return b.setMap(this.map),b},j.prototype.addLayer=function(a,b){b=b||{};var c;switch(a){case"weather":this.singleLayers.weather=c=new google.maps.weather.WeatherLayer;break;case"clouds":this.singleLayers.clouds=c=new google.maps.weather.CloudLayer;break;case"traffic":this.singleLayers.traffic=c=new google.maps.TrafficLayer;break;case"transit":this.singleLayers.transit=c=new google.maps.TransitLayer;break;case"bicycling":this.singleLayers.bicycling=c=new google.maps.BicyclingLayer;break;case"panoramio":this.singleLayers.panoramio=c=new google.maps.panoramio.PanoramioLayer,c.setTag(b.filter),delete b.filter,b.click&&google.maps.event.addListener(c,"click",function(a){b.click(a),delete b.click});break;case"places":if(this.singleLayers.places=c=new google.maps.places.PlacesService(this.map),b.search||b.nearbySearch||b.radarSearch){var d={bounds:b.bounds||null,keyword:b.keyword||null,location:b.location||null,name:b.name||null,radius:b.radius||null,rankBy:b.rankBy||null,types:b.types||null};b.radarSearch&&c.radarSearch(d,b.radarSearch),b.search&&c.search(d,b.search),b.nearbySearch&&c.nearbySearch(d,b.nearbySearch)}if(b.textSearch){var e={bounds:b.bounds||null,location:b.location||null,query:b.query||null,radius:b.radius||null};c.textSearch(e,b.textSearch)}}if(void 0!==c)return"function"==typeof c.setOptions&&c.setOptions(b),"function"==typeof c.setMap&&c.setMap(this.map),c},j.prototype.removeLayer=function(a){if("string"==typeof a&&void 0!==this.singleLayers[a])this.singleLayers[a].setMap(null),delete this.singleLayers[a];else for(var b=0;b<this.layers.length;b++)if(this.layers[b]===a){this.layers[b].setMap(null),this.layers.splice(b,1);break}};var k,l;return j.prototype.getRoutes=function(b){switch(b.travelMode){case"bicycling":k=google.maps.TravelMode.BICYCLING;break;case"transit":k=google.maps.TravelMode.TRANSIT;break;case"driving":k=google.maps.TravelMode.DRIVING;break;default:k=google.maps.TravelMode.WALKING}l="imperial"===b.unitSystem?google.maps.UnitSystem.IMPERIAL:google.maps.UnitSystem.METRIC;var c={avoidHighways:!1,avoidTolls:!1,optimizeWaypoints:!1,waypoints:[]},d=a(c,b);d.origin=/string/.test(typeof b.origin)?b.origin:new google.maps.LatLng(b.origin[0],b.origin[1]),d.destination=/string/.test(typeof b.destination)?b.destination:new google.maps.LatLng(b.destination[0],b.destination[1]),d.travelMode=k,d.unitSystem=l,delete d.callback,delete d.error;var e=[];(new google.maps.DirectionsService).route(d,function(a,c){if(c===google.maps.DirectionsStatus.OK){for(var d in a.routes)a.routes.hasOwnProperty(d)&&e.push(a.routes[d]);b.callback&&b.callback(e,a,c)}else b.error&&b.error(a,c)})},j.prototype.removeRoutes=function(){this.routes.length=0},j.prototype.getElevations=function(d){d=a({locations:[],path:!1,samples:256},d),d.locations.length>0&&d.locations[0].length>0&&(d.locations=c(b([d.locations],f,!1)));var e=d.callback;delete d.callback;var g=new google.maps.ElevationService;if(d.path){var h={path:d.locations,samples:d.samples};g.getElevationAlongPath(h,function(a,b){e&&"function"==typeof e&&e(a,b)})}else delete d.path,delete d.samples,g.getElevationForLocations(d,function(a,b){e&&"function"==typeof e&&e(a,b)})},j.prototype.cleanRoute=j.prototype.removePolylines,j.prototype.renderRoute=function(b,c){var d,e="string"==typeof c.panel?document.getElementById(c.panel.replace("#","")):c.panel;c.panel=e,c=a({map:this.map},c),d=new google.maps.DirectionsRenderer(c),this.getRoutes({origin:b.origin,destination:b.destination,travelMode:b.travelMode,waypoints:b.waypoints,unitSystem:b.unitSystem,error:b.error,avoidHighways:b.avoidHighways,avoidTolls:b.avoidTolls,optimizeWaypoints:b.optimizeWaypoints,callback:function(a,b,c){c===google.maps.DirectionsStatus.OK&&d.setDirections(b)}})},j.prototype.drawRoute=function(a){var b=this;this.getRoutes({origin:a.origin,destination:a.destination,travelMode:a.travelMode,waypoints:a.waypoints,unitSystem:a.unitSystem,error:a.error,avoidHighways:a.avoidHighways,avoidTolls:a.avoidTolls,optimizeWaypoints:a.optimizeWaypoints,callback:function(c){if(c.length>0){var d={path:c[c.length-1].overview_path,strokeColor:a.strokeColor,strokeOpacity:a.strokeOpacity,strokeWeight:a.strokeWeight};a.hasOwnProperty("icons")&&(d.icons=a.icons),b.drawPolyline(d),a.callback&&a.callback(c[c.length-1])}}})},j.prototype.travelRoute=function(a){if(a.origin&&a.destination)this.getRoutes({origin:a.origin,destination:a.destination,travelMode:a.travelMode,waypoints:a.waypoints,unitSystem:a.unitSystem,error:a.error,callback:function(b){if(b.length>0&&a.start&&a.start(b[b.length-1]),b.length>0&&a.step){var c=b[b.length-1];if(c.legs.length>0)for(var d,e=c.legs[0].steps,f=0;d=e[f];f++)d.step_number=f,a.step(d,c.legs[0].steps.length-1)}b.length>0&&a.end&&a.end(b[b.length-1])}});else if(a.route&&a.route.legs.length>0)for(var b,c=a.route.legs[0].steps,d=0;b=c[d];d++)b.step_number=d,a.step(b)},j.prototype.drawSteppedRoute=function(a){var b=this;if(a.origin&&a.destination)this.getRoutes({origin:a.origin,destination:a.destination,travelMode:a.travelMode,waypoints:a.waypoints,error:a.error,callback:function(c){if(c.length>0&&a.start&&a.start(c[c.length-1]),c.length>0&&a.step){var d=c[c.length-1];if(d.legs.length>0)for(var e,f=d.legs[0].steps,g=0;e=f[g];g++){e.step_number=g;var h={path:e.path,strokeColor:a.strokeColor,strokeOpacity:a.strokeOpacity,strokeWeight:a.strokeWeight};a.hasOwnProperty("icons")&&(h.icons=a.icons),b.drawPolyline(h),a.step(e,d.legs[0].steps.length-1)}}c.length>0&&a.end&&a.end(c[c.length-1])}});else if(a.route&&a.route.legs.length>0)for(var c,d=a.route.legs[0].steps,e=0;c=d[e];e++){c.step_number=e;var f={path:c.path,strokeColor:a.strokeColor,strokeOpacity:a.strokeOpacity,strokeWeight:a.strokeWeight};a.hasOwnProperty("icons")&&(f.icons=a.icons),b.drawPolyline(f),a.step(c)}},j.Route=function(a){this.origin=a.origin,this.destination=a.destination,this.waypoints=a.waypoints,this.map=a.map,this.route=a.route,this.step_count=0,this.steps=this.route.legs[0].steps,this.steps_length=this.steps.length;var b={path:new google.maps.MVCArray,strokeColor:a.strokeColor,strokeOpacity:a.strokeOpacity,strokeWeight:a.strokeWeight};a.hasOwnProperty("icons")&&(b.icons=a.icons),this.polyline=this.map.drawPolyline(b).getPath()},j.Route.prototype.getRoute=function(a){var b=this;this.map.getRoutes({origin:this.origin,destination:this.destination,travelMode:a.travelMode,waypoints:this.waypoints||[],error:a.error,callback:function(){b.route=e[0],a.callback&&a.callback.call(b)}})},j.Route.prototype.back=function(){if(this.step_count>0){this.step_count--;var a=this.route.legs[0].steps[this.step_count].path;for(var b in a)a.hasOwnProperty(b)&&this.polyline.pop()}},j.Route.prototype.forward=function(){if(this.step_count<this.steps_length){var a=this.route.legs[0].steps[this.step_count].path;for(var b in a)a.hasOwnProperty(b)&&this.polyline.push(a[b]);this.step_count++}},j.prototype.checkGeofence=function(a,b,c){return c.containsLatLng(new google.maps.LatLng(a,b))},j.prototype.checkMarkerGeofence=function(a,b){if(a.fences)for(var c,d=0;c=a.fences[d];d++){var e=a.getPosition();this.checkGeofence(e.lat(),e.lng(),c)||b(a,c)}},j.prototype.toImage=function(a){var a=a||{},b={};if(b.size=a.size||[this.el.clientWidth,this.el.clientHeight],b.lat=this.getCenter().lat(),b.lng=this.getCenter().lng(),this.markers.length>0){b.markers=[];for(var c=0;c<this.markers.length;c++)b.markers.push({lat:this.markers[c].getPosition().lat(),lng:this.markers[c].getPosition().lng()})}if(this.polylines.length>0){var d=this.polylines[0];b.polyline={},b.polyline.path=google.maps.geometry.encoding.encodePath(d.getPath()),b.polyline.strokeColor=d.strokeColor,b.polyline.strokeOpacity=d.strokeOpacity,b.polyline.strokeWeight=d.strokeWeight}return j.staticMapURL(b)},j.staticMapURL=function(a){function b(a,b){if("#"===a[0]&&(a=a.replace("#","0x"),b)){if(b=parseFloat(b),0===(b=Math.min(1,Math.max(b,0))))return"0x00000000";b=(255*b).toString(16),1===b.length&&(b+=b),a=a.slice(0,8)+b}return a}var c,d=[],e=("file:"===location.protocol?"http:":location.protocol)+"//maps.googleapis.com/maps/api/staticmap";a.url&&(e=a.url,delete a.url),e+="?";var f=a.markers;delete a.markers,!f&&a.marker&&(f=[a.marker],delete a.marker);var g=a.styles;delete a.styles;var h=a.polyline;if(delete a.polyline,a.center)d.push("center="+a.center),delete a.center;else if(a.address)d.push("center="+a.address),delete a.address;else if(a.lat)d.push(["center=",a.lat,",",a.lng].join("")),delete a.lat,delete a.lng;else if(a.visible){var i=encodeURI(a.visible.join("|"));d.push("visible="+i)}var j=a.size;j?(j.join&&(j=j.join("x")),delete a.size):j="630x300",d.push("size="+j),a.zoom||a.zoom===!1||(a.zoom=15);var k=!a.hasOwnProperty("sensor")||!!a.sensor;delete a.sensor,d.push("sensor="+k);for(var l in a)a.hasOwnProperty(l)&&d.push(l+"="+a[l]);if(f)for(var m,n,o=0;c=f[o];o++){m=[],c.size&&"normal"!==c.size?(m.push("size:"+c.size),delete c.size):c.icon&&(m.push("icon:"+encodeURI(c.icon)),delete c.icon),c.color&&(m.push("color:"+c.color.replace("#","0x")),delete c.color),c.label&&(m.push("label:"+c.label[0].toUpperCase()),delete c.label),n=c.address?c.address:c.lat+","+c.lng,delete c.address,delete c.lat,delete c.lng;for(var l in c)c.hasOwnProperty(l)&&m.push(l+":"+c[l]);m.length||0===o?(m.push(n),m=m.join("|"),d.push("markers="+encodeURI(m))):(m=d.pop()+encodeURI("|"+n),d.push(m))}if(g)for(var o=0;o<g.length;o++){var p=[];g[o].featureType&&p.push("feature:"+g[o].featureType.toLowerCase()),g[o].elementType&&p.push("element:"+g[o].elementType.toLowerCase());for(var q=0;q<g[o].stylers.length;q++)for(var r in g[o].stylers[q]){var s=g[o].stylers[q][r];"hue"!=r&&"color"!=r||(s="0x"+s.substring(1)),p.push(r+":"+s)}var t=p.join("|");""!=t&&d.push("style="+t)}if(h){if(c=h,h=[],c.strokeWeight&&h.push("weight:"+parseInt(c.strokeWeight,10)),c.strokeColor){var u=b(c.strokeColor,c.strokeOpacity);h.push("color:"+u)}if(c.fillColor){var v=b(c.fillColor,c.fillOpacity);h.push("fillcolor:"+v)}var w=c.path;if(w.join)for(var x,q=0;x=w[q];q++)h.push(x.join(","));else h.push("enc:"+w);h=h.join("|"),d.push("path="+encodeURI(h))}var y=window.devicePixelRatio||1;return d.push("scale="+y),d=d.join("&"),e+d},j.prototype.addMapType=function(a,b){if(!b.hasOwnProperty("getTileUrl")||"function"!=typeof b.getTileUrl)throw"'getTileUrl' function required.";b.tileSize=b.tileSize||new google.maps.Size(256,256);var c=new google.maps.ImageMapType(b);this.map.mapTypes.set(a,c)},j.prototype.addOverlayMapType=function(a){if(!a.hasOwnProperty("getTile")||"function"!=typeof a.getTile)throw"'getTile' function required.";var b=a.index;delete a.index,this.map.overlayMapTypes.insertAt(b,a)},j.prototype.removeOverlayMapType=function(a){this.map.overlayMapTypes.removeAt(a)},j.prototype.addStyle=function(a){var b=new google.maps.StyledMapType(a.styles,{name:a.styledMapName});this.map.mapTypes.set(a.mapTypeId,b)},j.prototype.setStyle=function(a){this.map.setMapTypeId(a)},j.prototype.createPanorama=function(a){return a.hasOwnProperty("lat")&&a.hasOwnProperty("lng")||(a.lat=this.getCenter().lat(),a.lng=this.getCenter().lng()),this.panorama=j.createPanorama(a),this.map.setStreetView(this.panorama),this.panorama},j.createPanorama=function(b){var c=h(b.el,b.context);b.position=new google.maps.LatLng(b.lat,b.lng),delete b.el,delete b.context,delete b.lat,delete b.lng;for(var d=["closeclick","links_changed","pano_changed","position_changed","pov_changed","resize","visible_changed"],e=a({visible:!0},b),f=0;f<d.length;f++)delete e[d[f]];for(var g=new google.maps.StreetViewPanorama(c,e),f=0;f<d.length;f++)!function(a,c){b[c]&&google.maps.event.addListener(a,c,function(){b[c].apply(this)})}(g,d[f]);return g},j.prototype.on=function(a,b){return j.on(a,this,b)},j.prototype.off=function(a){j.off(a,this)},j.prototype.once=function(a,b){return j.once(a,this,b)},j.custom_events=["marker_added","marker_removed","polyline_added","polyline_removed","polygon_added","polygon_removed","geolocated","geolocation_failed"],j.on=function(a,b,c){if(j.custom_events.indexOf(a)==-1)return b instanceof j&&(b=b.map),google.maps.event.addListener(b,a,c);var d={handler:c,eventName:a};return b.registered_events[a]=b.registered_events[a]||[],b.registered_events[a].push(d),d},j.off=function(a,b){j.custom_events.indexOf(a)==-1?(b instanceof j&&(b=b.map),google.maps.event.clearListeners(b,a)):b.registered_events[a]=[]},j.once=function(a,b,c){if(j.custom_events.indexOf(a)==-1)return b instanceof j&&(b=b.map),google.maps.event.addListenerOnce(b,a,c)},j.fire=function(a,b,c){if(j.custom_events.indexOf(a)==-1)google.maps.event.trigger(b,a,Array.prototype.slice.apply(arguments).slice(2));else if(a in c.registered_events)for(var d=c.registered_events[a],e=0;e<d.length;e++)!function(a,b,c){a.apply(b,[c])}(d[e].handler,c,b)},j.geolocate=function(a){var b=a.always||a.complete;navigator.geolocation?navigator.geolocation.getCurrentPosition(function(c){a.success(c),b&&b()},function(c){a.error(c),b&&b()},a.options):(a.not_supported(),b&&b())},j.geocode=function(a){this.geocoder=new google.maps.Geocoder;var b=a.callback;a.hasOwnProperty("lat")&&a.hasOwnProperty("lng")&&(a.latLng=new google.maps.LatLng(a.lat,a.lng)),delete a.lat,delete a.lng,delete a.callback,this.geocoder.geocode(a,function(a,c){b(a,c)})},"object"==typeof window.google&&window.google.maps&&(google.maps.Polygon.prototype.getBounds||(google.maps.Polygon.prototype.getBounds=function(a){for(var b,c=new google.maps.LatLngBounds,d=this.getPaths(),e=0;e<d.getLength();e++){b=d.getAt(e);for(var f=0;f<b.getLength();f++)c.extend(b.getAt(f))}return c}),google.maps.Polygon.prototype.containsLatLng||(google.maps.Polygon.prototype.containsLatLng=function(a){var b=this.getBounds();if(null!==b&&!b.contains(a))return!1;for(var c=!1,d=this.getPaths().getLength(),e=0;e<d;e++)for(var f=this.getPaths().getAt(e),g=f.getLength(),h=g-1,i=0;i<g;i++){var j=f.getAt(i),k=f.getAt(h);(j.lng()<a.lng()&&k.lng()>=a.lng()||k.lng()<a.lng()&&j.lng()>=a.lng())&&j.lat()+(a.lng()-j.lng())/(k.lng()-j.lng())*(k.lat()-j.lat())<a.lat()&&(c=!c),h=i}return c}),google.maps.Circle.prototype.containsLatLng||(google.maps.Circle.prototype.containsLatLng=function(a){return!google.maps.geometry||google.maps.geometry.spherical.computeDistanceBetween(this.getCenter(),a)<=this.getRadius()}),google.maps.Rectangle.prototype.containsLatLng=function(a){return this.getBounds().contains(a)},google.maps.LatLngBounds.prototype.containsLatLng=function(a){return this.contains(a)},google.maps.Marker.prototype.setFences=function(a){this.fences=a},google.maps.Marker.prototype.addFence=function(a){this.fences.push(a)},google.maps.Marker.prototype.getId=function(){return this.__gm_id}),Array.prototype.indexOf||(Array.prototype.indexOf=function(a){if(null==this)throw new TypeError;var b=Object(this),c=b.length>>>0;if(0===c)return-1;var d=0;if(arguments.length>1&&(d=Number(arguments[1]),d!=d?d=0:0!=d&&d!=1/0&&d!=-(1/0)&&(d=(d>0||-1)*Math.floor(Math.abs(d)))),d>=c)return-1;for(var e=d>=0?d:Math.max(c-Math.abs(d),0);e<c;e++)if(e in b&&b[e]===a)return e;return-1}),j});
-//# sourceMappingURL=gmaps.min.js.map

frontend/assets/sass/_variables.scss

@@ +1 @@
+$primary-background-color: #cfd8dc;
+
+$loading-first-color: #007bff;
+$loading-second-color: white;
+
+$scrollbar-background-color: whitesmoke;
+$scrollbar-color: #007bff;

frontend/assets/sass/styles.scss

@@ +1 @@
+@import './variables';
+
+* {
+  margin: 0;
+  padding: 0;
+}
+
+html,
+body {
+  width: 100%;
+  height: 100%;
+  min-height: 100% !important;
+  margin: 0;
+  padding: 0;
+}
+
+#search {
+  z-index: 20;
+  float: left;
+  min-height: 100%;
+  max-height: 100%;
+  overflow: auto;
+  background-color: $primary-background-color;
+  box-shadow: 0 0 10px 0 rgba(50, 50, 50, 0.75);
+
+  header h1 {
+    font-weight: bold;
+    font-size: 1rem;
+    line-height: 1rem;
+  }
+
+  footer {
+    float: left;
+  }
+}
+
+.searchWrapper {
+  float: left;
+  min-height: calc(100% - 40px);
+
+  .custom-control-label::before {
+    background-color: white;
+  }
+}
+
+#info {
+  z-index: 10;
+  min-height: 100%;
+  max-height: 100%;
+  overflow: auto;
+  box-shadow: 0 0 10px 0 rgba(50, 50, 50, 0.75);
+
+  header address {
+    margin: 0;
+  }
+}
+
+@media (max-width: 991.98px) {
+  #info,
+  #search {
+    height: auto;
+    min-height: auto;
+    max-height: none;
+    overflow: hidden;
+    box-shadow: none;
+  }
+}
+
+#map {
+  min-height: 100%;
+  max-height: 100%;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+}
+
+/* LOADING */
+.loading {
+  width: 50px;
+  height: 50px;
+  margin: 0 auto;
+  border: 6px solid $loading-second-color;
+  border-top: 6px solid $loading-first-color;
+  border-radius: 50%;
+  animation: spin 2s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+#loadingScreen {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1000;
+  width: 100%;
+  height: 100%;
+  background-color: $primary-background-color;
+
+  .loading {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    width: 100px;
+    height: 100px;
+    margin: auto auto;
+    border: 12px solid $loading-second-color;
+    border-top: 12px solid $loading-first-color;
+    border-radius: 50%;
+    animation: spin 2s linear infinite;
+  }
+
+  #logo {
+    position: fixed;
+    top: -160px;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 50px;
+    margin: auto 0;
+    font-size: 1.4rem;
+    text-align: center;
+  }
+
+  #noscript {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 110px;
+    margin: auto 0;
+    font-size: 1rem;
+    text-align: center;
+    background-color: $primary-background-color;
+  }
+}
+
+/* GRAPH */
+
+#graphAverageSpeed,
+#graphNumberVehicles {
+  width: 100%;
+  background-color: white;
+}
+
+/* SCROLLBAR */
+
+::-webkit-scrollbar-track {
+  background-color: $scrollbar-background-color;
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+  background-color: $scrollbar-background-color;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: rgba($scrollbar-color, 0.75);
+}
+

frontend/gulpfile.js

@@ +1 @@
+var gulp = require('gulp');
+var sass = require('gulp-sass');
+var sourcemaps = require('gulp-sourcemaps');
+var rename = require("gulp-rename");
+
+gulp.task('sass', function () {
+    return gulp.src('./assets/sass/**/*.scss')
+        .pipe(sourcemaps.init())
+        .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
+        .pipe(rename({
+            suffix: ".min"
+        }))
+        .pipe(sourcemaps.write('./'))
+        .pipe(gulp.dest('./assets/css'));
+});
+
+gulp.task('fix-sass', function fixCssTask() {
+    const gulpStylelint = require('gulp-stylelint');
+
+    return gulp.src('./assets/sass/**/*.scss')
+        .pipe(gulpStylelint({
+            fix: true
+        }))
+        .pipe(gulp.dest('./assets/sass/'));
+});
+
+gulp.task('lint-sass', function lintCssTask() {
+    const gulpStylelint = require('gulp-stylelint');
+
+    return gulp.src('./assets/sass/**/*.scss')
+        .pipe(gulpStylelint({
+            reporters: [
+                {formatter: 'string', console: true}
+            ]
+        }));
+});
+
+gulp.task('styles', gulp.series('fix-sass', 'sass'));
+
+gulp.task('default', gulp.parallel('styles'));

frontend/index.php

@@ -13 +13 @@
 
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"
           integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
-    <link rel="stylesheet" media="screen" href="./assets/css/main.css">
+    <link rel="stylesheet" media="screen" href="./assets/css/styles.min.css">
 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular-route.min.js"></script>
@@ -21 +21 @@
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular-sanitize.min.js"></script>
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
 
 
     <script>
@@ -55 +55 @@
 <div class="row h-100" ng-init="load()">
 
     <!--SEARCH section-->
-    <section class="search col-12 col-sm-6 col-lg-3" id="search" ng-controller="searchController"
-             ng-class="{ 'col-sm-12': $root.selectDevice==null, 'col-sm-6': $root.selectDevice!=null }">
+    <section class="search col-12 col-lg-3" id="search" ng-controller="searchController">
 
         <div class="w-100 searchWrapper">
             <header class="mt-2">
@@ -76 +75 @@
                            ng-model-options="{debounce: 600}">
                 </div>
                 <div class="custom-control custom-checkbox mb-3">
-                    <input type="checkbox" id="searchDirection" name="searchDirection" class="custom-control-input"
+                    <input type="checkbox" id="searchIsDirection" name="searchIsDirection" class="custom-control-input"
                            checked required
                            ng-model="search.isDirection"
                            ng-change="searchLocations()"
                            ng-model-options="{debounce: 600}">
-                    <label for="searchDirection" class="custom-control-label">Rozlišovat směr</label>
+                    <label for="searchIsDirection" class="custom-control-label">Rozlišovat směr</label>
                 </div>
             </form>
 
@@ -114 +113 @@
             </div>
         </div>
         <footer class="text-center mb-2 mt-2 w-100">
-            <small class="text-muted">2018 © FAV, ZČU</small>
+            <small class="text-muted">© 2018 FAV, ZČU • version: {{ config.APP_VERSION }}</small>
         </footer>
     </section>
 
 
     <!--INFO section-->
-    <section class="info col-12 col-sm-6 col-lg-4" id="info" ng-show="$root.selectDevice!=null"
+    <section class="info col-12 col-lg-5" id="info" ng-show="$root.selectDevice!=null"
              ng-controller="infoController">
 
         <header class="mt-2">
@@ -163 +162 @@
                 </div>
             </div>
 
+
             <div class="form-row">
                 <div class="form-group col">
-                    <label for="rangehFromTime">Časové rozmezí dne</label>
+                    <label for="rangeFromTime">
+                        <div class="custom-control custom-checkbox">
+                            <input type="checkbox" id="rangeIsTime" name="rangeIsTime" class="custom-control-input"
+                                   checked required
+                                   ng-model="range.isTime"
+                                   ng-model-options="{debounce: 300}"
+                                   ng-change="changeRange()">
+                            <label for="rangeIsTime" class="custom-control-label">Zobrazit časové rozmezí dne</label>
+                        </div>
+                    </label>
                     <input type="time" id="rangeFromTime" class="form-control form-control-sm"
                            ng-model="range.fromTime" required
                            ng-class="{'is-invalid': range.fromTime>=range.toTime}"
                            ng-change="changeRange()"
-                           ng-model-options="{debounce: 600}">
-                    <div class="invalid-feedback">
+                           ng-model-options="{debounce: 600}"
+                           ng-show="range.isTime">
+                    <div class="invalid-feedback" ng-show="range.isTime">
                         Tento čas musí být menší.
                     </div>
                 </div>
@@ -182 +192 @@
                            ng-model="range.toTime" required
                            ng-class="{'is-invalid': range.fromTime>=range.toTime}"
                            ng-change="changeRange()"
-                           ng-model-options="{debounce: 600}">
-                    <div class="invalid-feedback">
+                           ng-model-options="{debounce: 600}"
+                           ng-show="range.isTime">
+                    <div class="invalid-feedback" ng-show="range.isTime">
                         Tento čas musí být vetší.
                     </div>
                 </div>
             </div>
         </div>
 
-
         <div class="loading" ng-show="showInfoLoading"></div>
 
         <div id="graphs" ng-show="$root.selectDevice!=null && $root.selectDevice.traffics.length>0 && !showInfoLoading">
             <h4 class="mt-4">Průměrná rychlost</h4>
             <canvas id="graphAverageSpeed"></canvas>
 
-
             <h4 class="mt-4">Počet vozidel</h4>
-            <form>
-                <div class="form-group">
-                    <select id="typeVehicle" class="custom-select custom-select-sm"
-                            ng-model="typeVehicle"
-                            ng-change="renderGraphNumberVehicles()"
-                            ng-options="vehicle.id as vehicle.name for vehicle in filterVehicles">
-                        <option value="">Všechna vozidla</option>
-                    </select>
-                </div>
-            </form>
-            <canvas id="graphNumberVehicles"></canvas>
+            <canvas id="graphNumberVehicles" class="mb-5"></canvas>
 
+            <div class="text-center mb-2 mt-2 w-100">
+                <small class="text-muted">zdroj dat: <a target="_blank" href="https://doprava.plzensky-kraj.cz">doprava.plzensky-kraj.cz</a>
+                </small>
+            </div>
         </div>
 
         <div ng-show="$root.selectDevice && $root.selectDevice.traffics.length==0 && !showInfoLoading">
             <small class="form-text text-muted text-center">Data nejsou k dispozici</small>
         </div>
-
-
     </section>
 
-
     <!--MAP section-->
-    <section class="map col-12 col-sm-12 " id="map"
-             ng-class="{ 'col-lg-9': $root.selectDevice==null, 'col-lg-5': $root.selectDevice!=null }"
+    <section class="map col-12" id="map"
+             ng-class="{ 'col-lg-9': $root.selectDevice==null, 'col-lg-4': $root.selectDevice!=null }"
              ng-controller="mapController">
     </section>
 </div>
@@ -257 +257 @@
 <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCSx7hyAzQiG5uocJTeZgf1Z3lpDy4kpEk"
         type="text/javascript"></script>
 
-<script type="text/javascript" src="./assets/libs/gmaps.min.js"></script>
-
 </body>
 </html>

frontend/package.json

@@ +1 @@
+{
+  "name": "PVPK",
+  "version": "1.2.0",
+  "dependencies": {
+    "gulp": "^4.0.0",
+    "gulp-sass": "^4.0.1",
+    "gulp-sourcemaps": "^2.6.4",
+    "gulp-stylelint": "^7.0.0",
+    "gulp-rename":"^1.2.3",
+    "stylelint": "^9.2.1",
+    "stylelint-order": "^0.8.1",
+    "stylelint-config-rational-order": "^0.0.2",
+    "stylelint-config-standard": "^18.2.0",
+    "stylelint-config-recommended-scss": "^3.2.0"
+  }
+}