Revize d68f7bbd
Přidáno uživatelem Jan Kohlíček před téměř 7 roky(ů)
| frontend/index.php | ||
|---|---|---|
| 27 | 27 |
<script> |
| 28 | 28 |
<?php |
| 29 | 29 |
/* JEN PRO TESTOVANI, POZDEJI SE ODSTRANIT, A NAHRADIT NASDILENOU KNIHOVNOU */ |
| 30 |
$base_url = 'http://localhost/pvpk/backend/public/api/v1';
|
|
| 30 |
$base_url = './../backend/public/api/v1';
|
|
| 31 | 31 |
|
| 32 | 32 |
include_once '../backend/lib/generateToken.php'; |
| 33 | 33 |
$token = generateToken(); |
| ... | ... | |
| 44 | 44 |
<body ng-controller="mainController" class="container-fluid"> |
| 45 | 45 |
|
| 46 | 46 |
|
| 47 |
|
|
| 48 |
|
|
| 49 | 47 |
<div id="loadingScreen" ng-show="showLoadingScreen"> |
| 50 | 48 |
<div class="loading"></div> |
| 51 | 49 |
</div> |
| 52 | 50 |
<div class="row h-100"> |
| 53 | 51 |
|
| 54 |
<section class="search col-12 col-sm-6 col-lg-3" id="search" ng-controller="searchController"> |
|
| 52 |
<!--SEARCH section--> |
|
| 53 |
<section class="search col-12 col-sm-6 col-lg-3" id="search" ng-controller="searchController" |
|
| 54 |
ng-class="{ 'col-sm-12': $root.selectDevice==null, 'col-sm-6': $root.selectDevice!=null }">
|
|
| 55 | 55 |
|
| 56 | 56 |
<div class="w-100 searchWrapper"> |
| 57 | 57 |
<header class="mt-2"> |
| ... | ... | |
| 67 | 67 |
<input type="search" id="searchLocation" name="location" |
| 68 | 68 |
class="form-control form-control-sm" placeholder="Město, ulice, ..." |
| 69 | 69 |
ng-model="search.location" required maxlength="255" autocomplete="off" |
| 70 |
ng-change="search.location.length>2 && searchLocations(true)">
|
|
| 70 |
ng-change="searchLocations(true)"> |
|
| 71 | 71 |
</div> |
| 72 | 72 |
|
| 73 | 73 |
<div class="custom-control custom-checkbox mb-3"> |
| ... | ... | |
| 82 | 82 |
<label for="searchFromDate">Období</label> |
| 83 | 83 |
<input type="date" id="searchFromDate" name="fromDate" |
| 84 | 84 |
class="form-control form-control-sm" ng-model="search.fromDate" required |
| 85 |
ng-class="{ 'is-invalid': search.fromDate>search.toDate}">
|
|
| 85 |
ng-class="{ 'is-invalid': search.fromDate>search.toDate}"
|
|
| 86 |
max="{{maxDate | date:'yyyy-MM-dd'}}">
|
|
| 86 | 87 |
<div class="invalid-feedback"> |
| 87 | 88 |
Tento datum musí být menší. |
| 88 | 89 |
</div> |
| ... | ... | |
| 92 | 93 |
<label for="searchToDate" class="invisible">Období</label> |
| 93 | 94 |
<input type="date" id="searchToDate" name="toDateTime" |
| 94 | 95 |
class="form-control form-control-sm" ng-model="search.toDate" required |
| 95 |
ng-class="{ 'is-invalid': search.fromDate>search.toDate}">
|
|
| 96 |
ng-class="{ 'is-invalid': search.fromDate>search.toDate}"
|
|
| 97 |
max="{{maxDate | date:'yyyy-MM-dd'}}">
|
|
| 96 | 98 |
<div class="invalid-feedback"> |
| 97 | 99 |
Tento datum musí být vetší. |
| 98 | 100 |
</div> |
| ... | ... | |
| 120 | 122 |
</div> |
| 121 | 123 |
</div> |
| 122 | 124 |
</div> |
| 123 |
|
|
| 124 |
<!--<input type="submit" value="Vyhledat" class="btn btn-primary btn-block"--> |
|
| 125 |
<!--ng-disabled="search.fromDate>search.toDate || search.fromTime>search.toTime">--> |
|
| 126 | 125 |
</form> |
| 127 | 126 |
|
| 128 | 127 |
|
| 129 | 128 |
<div class="result-locations mb-5 mt-5"> |
| 130 | 129 |
<h5>Lokality</h5> |
| 131 | 130 |
|
| 132 |
<div class="list-group" ng-show="locations.length>0 && !showLocationsLoading">
|
|
| 131 |
<div class="list-group" ng-show="locations.length>0 && !showSearchLoading">
|
|
| 133 | 132 |
<!-- class = active --> |
| 134 | 133 |
<a href="" id="location-{{location.id}}"
|
| 135 | 134 |
class="list-group-item list-group-item-action flex-column align-items-start" |
| 136 | 135 |
ng-repeat="location in locations" |
| 137 | 136 |
ng-click="selectDevice(location.id)" |
| 138 |
ng-class="{'active': deviceId == location.id}">
|
|
| 137 |
ng-class="{'active': $root.selectDevice.id == location.id}">
|
|
| 139 | 138 |
|
| 140 | 139 |
<div class="d-flex w-100 justify-content-between"> |
| 141 | 140 |
<h6 class="mb-1">{{location.name}}</h6>
|
| ... | ... | |
| 148 | 147 |
</a> |
| 149 | 148 |
</div> |
| 150 | 149 |
|
| 151 |
<div ng-show="locations.length==0 && !showLocationsLoading">
|
|
| 150 |
<div ng-show="locations.length==0 && !showSearchLoading">
|
|
| 152 | 151 |
<small class="form-text text-muted text-center">Žádná lokalita</small> |
| 153 | 152 |
</div> |
| 154 | 153 |
|
| 155 |
<div class="loading" ng-show="showLocationsLoading"></div>
|
|
| 154 |
<div class="loading" ng-show="showSearchLoading"></div>
|
|
| 156 | 155 |
|
| 157 | 156 |
</div> |
| 158 | 157 |
|
| ... | ... | |
| 163 | 162 |
</section> |
| 164 | 163 |
|
| 165 | 164 |
|
| 166 |
<!--graph section-->
|
|
| 167 |
<section class="graph col-12 col-sm-6 col-lg-3" id="graph" ng-show="$root.graphShow"
|
|
| 168 |
ng-controller="graphController">
|
|
| 165 |
<!--INFO section-->
|
|
| 166 |
<section class="info col-12 col-sm-6 col-lg-3" id="info" ng-show="$root.selectDevice!=null"
|
|
| 167 |
ng-controller="infoController">
|
|
| 169 | 168 |
|
| 170 | 169 |
<header class="mt-2"> |
| 171 | 170 |
|
| 172 |
<h4>Grafy
|
|
| 173 |
<button type="button" class="close" aria-label="Close" ng-click="$root.graphShow = !$root.graphShow">
|
|
| 171 |
<h5>{{$root.selectDevice.name}}
|
|
| 172 |
<button type="button" class="close" aria-label="Close" ng-click="infoClose()">
|
|
| 174 | 173 |
<span aria-hidden="true">×</span> |
| 175 | 174 |
</button> |
| 176 |
</h4> |
|
| 175 |
</h5> |
|
| 176 |
<small> |
|
| 177 |
<address>{{$root.selectDevice.street}}, {{$root.selectDevice.town}}</address>
|
|
| 178 |
</small> |
|
| 177 | 179 |
</header> |
| 178 | 180 |
|
| 179 |
<form> |
|
| 180 |
<div class="form-group"> |
|
| 181 |
<label for="searchVehicle">Vozidla</label> |
|
| 182 |
<select id="searchVehicle" class="custom-select custom-select-sm" ng-model="search.vehicle"> |
|
| 183 |
<option value="">Všechna vozidla</option> |
|
| 184 |
<option ng-repeat="vehicle in vehicles" value="{{vehicle.id}}">{{vehicle.name}}</option>
|
|
| 185 |
</select> |
|
| 186 |
</div> |
|
| 181 |
<div class="loading" ng-show="showInfoLoading"></div> |
|
| 187 | 182 |
|
| 188 |
</form> |
|
| 189 |
|
|
| 190 |
<div class="loading"></div> |
|
| 191 |
|
|
| 192 |
<!--<canvas id="myChart" width="100%" height="60"></canvas>--> |
|
| 193 |
<!--<script>--> |
|
| 194 |
<!--var ctx = document.getElementById("myChart").getContext('2d');-->
|
|
| 195 |
<!--var myChart = new Chart(ctx, {-->
|
|
| 196 |
<!--type: 'bar',--> |
|
| 197 |
<!--data: {-->
|
|
| 198 |
<!--labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],--> |
|
| 199 |
<!--datasets: [{-->
|
|
| 200 |
<!--label: '# of Votes',--> |
|
| 201 |
<!--data: [12, 19, 3, 5, 2, 3],--> |
|
| 202 |
<!--backgroundColor: [--> |
|
| 203 |
<!--'rgba(255, 99, 132, 0.2)',--> |
|
| 204 |
<!--'rgba(54, 162, 235, 0.2)',--> |
|
| 205 |
<!--'rgba(255, 206, 86, 0.2)',--> |
|
| 206 |
<!--'rgba(75, 192, 192, 0.2)',--> |
|
| 207 |
<!--'rgba(153, 102, 255, 0.2)',--> |
|
| 208 |
<!--'rgba(255, 159, 64, 0.2)'--> |
|
| 209 |
<!--],--> |
|
| 210 |
<!--borderColor: [--> |
|
| 211 |
<!--'rgba(255,99,132,1)',--> |
|
| 212 |
<!--'rgba(54, 162, 235, 1)',--> |
|
| 213 |
<!--'rgba(255, 206, 86, 1)',--> |
|
| 214 |
<!--'rgba(75, 192, 192, 1)',--> |
|
| 215 |
<!--'rgba(153, 102, 255, 1)',--> |
|
| 216 |
<!--'rgba(255, 159, 64, 1)'--> |
|
| 217 |
<!--],--> |
|
| 218 |
<!--borderWidth: 1--> |
|
| 219 |
<!--}]--> |
|
| 220 |
<!--},--> |
|
| 221 |
<!--options: {-->
|
|
| 222 |
<!--scales: {-->
|
|
| 223 |
<!--yAxes: [{-->
|
|
| 224 |
<!--ticks: {-->
|
|
| 225 |
<!--beginAtZero: true--> |
|
| 226 |
<!--}--> |
|
| 227 |
<!--}]--> |
|
| 228 |
<!--}--> |
|
| 229 |
<!--}--> |
|
| 230 |
<!--});--> |
|
| 231 |
<!--</script>--> |
|
| 232 | 183 |
|
| 233 |
</section> |
|
| 184 |
<h3 class="mt-5">Graf #1</h3> |
|
| 185 |
|
|
| 186 |
<h3 class="mt-5">Graf #2</h3> |
|
| 187 |
<div class="form-group"> |
|
| 188 |
<label for="searchVehicle">Vozidla</label> |
|
| 189 |
<select id="searchVehicle" class="custom-select custom-select-sm" ng-model="search.vehicle"> |
|
| 190 |
<option value="">Všechna vozidla</option> |
|
| 191 |
<option ng-repeat="vehicle in vehicles" value="{{vehicle.id}}">{{vehicle.name}}</option>
|
|
| 192 |
</select> |
|
| 193 |
</div> |
|
| 234 | 194 |
|
| 195 |
<h3 class="mt-5">Graf #3</h3> |
|
| 235 | 196 |
|
| 236 |
<!--map section--> |
|
| 237 |
<!-- ng-class="textType" --> |
|
| 197 |
|
|
| 198 |
</section> |
|
| 199 |
|
|
| 200 |
<!--MAP section--> |
|
| 238 | 201 |
<section class="map col-12 col-sm-12" id="map" |
| 239 |
ng-class="{ 'col-lg-9': !$root.graphShow, 'col-lg-6': $root.graphShow }" ng-controller="mapController">
|
|
| 202 |
ng-class="{ 'col-lg-9': $root.selectDevice==null, 'col-lg-6': $root.selectDevice!=null }"
|
|
| 203 |
ng-controller="mapController"> |
|
| 204 |
|
|
| 240 | 205 |
|
| 241 |
<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" |
|
| 242 |
width="100%" height="100%" frameborder="0" style="border:0" allowfullscreen></iframe> |
|
| 243 | 206 |
</section> |
| 244 | 207 |
|
| 245 | 208 |
|
| ... | ... | |
| 270 | 233 |
integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" |
| 271 | 234 |
crossorigin="anonymous"></script> |
| 272 | 235 |
|
| 236 |
<!--async defer--> |
|
| 237 |
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCSx7hyAzQiG5uocJTeZgf1Z3lpDy4kpEk" |
|
| 238 |
type="text/javascript"></script> |
|
| 239 |
|
|
| 240 |
<script type="text/javascript" src="./assets/libs/gmaps.min.js"></script> |
|
| 241 |
|
|
| 273 | 242 |
|
| 274 | 243 |
</body> |
| 275 | 244 |
</html> |
Také k dispozici: Unified diff
refs #6754: Zobrazení detektorů na mapě, na vybranou lokalitu se zoomuje, kliknutím na marker se zobrazí info