/frontend/src/index.template.php - Komentovat - Zobrazení dat o průjezdu vozidel (Plzeňský kraj) - Pivovar - Redmine

githubtrue/frontend/src/index.template.php @ master

1	0b27c108	Jan Kohlíček	<!doctype html>
2	e4f78eb8	Jan Kohlíček	<html ng-app="pvpk" lang="cs">
3	0b27c108	Jan Kohlíček	<head>
4			<meta charset="utf-8">
5			<title>Průjezd vozidel - Plzeňský kraj</title>
6			<meta http-equiv="x-ua-compatible" content="ie=edge">
7
8			<meta name="description" content="Zobrazení dat o průjezdu vozidel pro Plzeňský kraj">
9			<meta name="viewport" content="width=device-width, initial-scale=1">
10
11	b88dd6bb	Jan Kohlíček	<?php
12	0bb62f35	kohlicekjan	include_once __TOKEN_GENERATOR_PATH__;
13	b88dd6bb	Jan Kohlíček	$token = generateToken();
14			?>
15	0b27c108	Jan Kohlíček	<script>
16	0bb62f35	kohlicekjan	var __API_TOKEN__ = '<?=$token ?>';
17	0b27c108	Jan Kohlíček	</script>
18			</head>
19			<body ng-controller="mainController" class="container-fluid">
20
21			<div id="loadingScreen" ng-show="showLoadingScreen">
22	e4f78eb8	Jan Kohlíček	<h1 id="logo">
23	0bb62f35	kohlicekjan	<img src="./assets/images/logo.png" alt="logo" width="20" height="18">
24			Průjezd vozidel
25	01189277	kohlicekjan	<small>Plzeňský kraj</small>
26	e4f78eb8	Jan Kohlíček	</h1>
27	0b27c108	Jan Kohlíček	<div class="loading"></div>
28	49df590a	Jan Kohlíček	<noscript id="noscript">Aplikace vyžaduje Javascript. Aktivujte Javascript a znovu načtěte tuto stránku.
29			</noscript>
30	0b27c108	Jan Kohlíček	</div>
31	e4f78eb8	Jan Kohlíček
32	49df590a	Jan Kohlíček	<div class="row h-100" ng-init="load()">
33	0b27c108	Jan Kohlíček
34	d68f7bbd	Jan Kohlíček	<!--SEARCH section-->
35	fb12df6d	Jan Kohlíček	<section class="search col-12 col-lg-3" id="search" ng-controller="searchController">
36	0b27c108	Jan Kohlíček
37			<div class="w-100 searchWrapper">
38			<header class="mt-2">
39			<h1>
40	0bb62f35	kohlicekjan	<img src="./assets/images/logo.png" alt="logo" width="20" height="18"> Průjezd vozidel
41	01189277	kohlicekjan	<small>Plzeňský kraj</small>
42	0b27c108	Jan Kohlíček	</h1>
43			</header>
44
45	01189277	kohlicekjan	<div class="mb-4 mt-4">
46	0b27c108	Jan Kohlíček	<div class="form-group">
47			<label for="searchLocation" class="h5">Hledání - lokalit</label>
48			<input type="search" id="searchLocation" name="location"
49			class="form-control form-control-sm" placeholder="Město, ulice, ..."
50	49df590a	Jan Kohlíček	ng-model="search.q" required maxlength="255" autocomplete="off"
51			ng-change="searchLocations()"
52			ng-model-options="{debounce: 600}">
53	0b27c108	Jan Kohlíček	</div>
54			<div class="custom-control custom-checkbox mb-3">
55	fb12df6d	Jan Kohlíček	<input type="checkbox" id="searchIsDirection" name="searchIsDirection" class="custom-control-input"
56	49df590a	Jan Kohlíček	checked required
57			ng-model="search.isDirection"
58			ng-change="searchLocations()"
59			ng-model-options="{debounce: 600}">
60	fb12df6d	Jan Kohlíček	<label for="searchIsDirection" class="custom-control-label">Rozlišovat směr</label>
61	0b27c108	Jan Kohlíček	</div>
62	01189277	kohlicekjan	</div>
63	0b27c108	Jan Kohlíček
64	49df590a	Jan Kohlíček	<div class="result-locations mb-4 mt-4">
65	0b27c108	Jan Kohlíček	<h5>Lokality</h5>
66
67	d68f7bbd	Jan Kohlíček	<div class="list-group" ng-show="locations.length>0 && !showSearchLoading">
68	0b27c108	Jan Kohlíček	<a href="" id="location-{{location.id}}"
69			class="list-group-item list-group-item-action flex-column align-items-start"
70			ng-repeat="location in locations"
71	49df590a	Jan Kohlíček	ng-click="selectDevice(location.id,location.direction)"
72			ng-class="{'active': $root.selectDevice.id == location.id && (!$root.selectDevice.direction \|\| $root.selectDevice.direction ==location.direction)}">
73	0b27c108	Jan Kohlíček
74			<div class="d-flex w-100 justify-content-between">
75			<h6 class="mb-1">{{location.name}}</h6>
76	49df590a	Jan Kohlíček	<small ng-show="search.isDirection">{{location.direction ==1 ? 'po směru': 'proti směru' }}
77	0b27c108	Jan Kohlíček	</small>
78			</div>
79	01189277	kohlicekjan	<address class="small">{{location.street}}, {{location.town}}</address>
80
81	0b27c108	Jan Kohlíček	</a>
82			</div>
83
84	01189277	kohlicekjan	<div class="form-text text-center small" ng-show="locations.length==0 && !showSearchLoading">
85			Žádná lokalita
86	0b27c108	Jan Kohlíček	</div>
87
88	d68f7bbd	Jan Kohlíček	<div class="loading" ng-show="showSearchLoading"></div>
89	0b27c108	Jan Kohlíček	</div>
90			</div>
91	01189277	kohlicekjan	<footer class="text-center text-muted mb-2 mt-2 w-100 small">
92			© 2018 FAV, ZČU • version: {{ config.APP_VERSION }}
93	0b27c108	Jan Kohlíček	</footer>
94			</section>
95
96
97	d68f7bbd	Jan Kohlíček	<!--INFO section-->
98	fb12df6d	Jan Kohlíček	<section class="info col-12 col-lg-5" id="info" ng-show="$root.selectDevice!=null"
99	d68f7bbd	Jan Kohlíček	ng-controller="infoController">
100	0b27c108	Jan Kohlíček
101			<header class="mt-2">
102	49df590a	Jan Kohlíček	<h4>{{$root.selectDevice.name}}
103	d68f7bbd	Jan Kohlíček	<button type="button" class="close" aria-label="Close" ng-click="infoClose()">
104	0b27c108	Jan Kohlíček	<span aria-hidden="true">×</span>
105			</button>
106	49df590a	Jan Kohlíček	</h4>
107	01189277	kohlicekjan	<address>{{$root.selectDevice.street}}, {{$root.selectDevice.town}}</address>
108	0b27c108	Jan Kohlíček	</header>
109
110	01189277	kohlicekjan	<div class="form-inline mb-4 mt-2">
111			<label for="selectDeviceDirection" class="=hidden"></label>
112			<select id="selectDeviceDirection" class="custom-select custom-select-sm"
113			ng-model="$root.selectDevice.direction"
114			ng-change="changeDirection(direction.id)"
115			ng-options="direction.id as direction.name for direction in directions"
116			ng-model-options="{updateOn: 'default', allowInvalid: true, debounce: 600}">
117			</select>
118			</div>
119
120
121			<div class="alert alert-warning" role="alert"
122			ng-show="!(range.fromDate >= range.minDate && range.toDate <= range.maxDate && range.toDate >= range.minDate && range.fromDate <= range.maxDate)">
123
124			Data jsou k dispozici jen v rosahu {{range.minDate \| date:"dd.MM.yyyy"}} - {{range.maxDate\| date:"dd.MM.yyyy"}}
125
126			</div>
127
128
129	49df590a	Jan Kohlíček	<div class="mb-4 mt-4" ng-form="rangeForm">
130			<div class="form-row">
131			<div class="form-group col">
132			<label for="rangeFromDate">Období</label>
133			<input type="date" id="rangeFromDate"
134			class="form-control form-control-sm" ng-model="range.fromDate" required
135	adbf541a	kohlicekjan	ng-class="{ 'is-invalid': range.fromDate>range.toDate}"
136	49df590a	Jan Kohlíček	ng-change="changeRange()"
137			ng-model-options="{updateOn: 'default', allowInvalid: true, debounce: 600}">
138			<div class="invalid-feedback">
139			Tento datum musí být menší.
140			</div>
141			</div>
142
143			<div class="form-group col">
144			<label for="rangeToDate" class="invisible">Období</label>
145			<input type="date" id="rangeToDate"
146			class="form-control form-control-sm" ng-model="range.toDate" required
147	adbf541a	kohlicekjan	ng-class="{ 'is-invalid': range.fromDate>range.toDate}"
148	49df590a	Jan Kohlíček	ng-change="changeRange()"
149			ng-model-options="{updateOn: 'default', allowInvalid: true, debounce: 600}">
150			<div class="invalid-feedback">
151			Tento datum musí být vetší.
152			</div>
153			</div>
154			</div>
155			<div class="form-row">
156			<div class="form-group col">
157	fb12df6d	Jan Kohlíček	<label for="rangeFromTime">
158			<div class="custom-control custom-checkbox">
159			<input type="checkbox" id="rangeIsTime" name="rangeIsTime" class="custom-control-input"
160			checked required
161			ng-model="range.isTime"
162			ng-model-options="{debounce: 300}"
163			ng-change="changeRange()">
164			<label for="rangeIsTime" class="custom-control-label">Zobrazit časové rozmezí dne</label>
165			</div>
166			</label>
167	49df590a	Jan Kohlíček	<input type="time" id="rangeFromTime" class="form-control form-control-sm"
168			ng-model="range.fromTime" required
169			ng-class="{'is-invalid': range.fromTime>=range.toTime}"
170			ng-change="changeRange()"
171	fb12df6d	Jan Kohlíček	ng-model-options="{debounce: 600}"
172			ng-show="range.isTime">
173			<div class="invalid-feedback" ng-show="range.isTime">
174	49df590a	Jan Kohlíček	Tento čas musí být menší.
175			</div>
176			</div>
177
178			<div class="form-group col">
179			<label for="rangeToTime" class="invisible">Časové rozmezí dne</label>
180			<input type="time" id="rangeToTime" class="form-control form-control-sm"
181			ng-model="range.toTime" required
182			ng-class="{'is-invalid': range.fromTime>=range.toTime}"
183			ng-change="changeRange()"
184	fb12df6d	Jan Kohlíček	ng-model-options="{debounce: 600}"
185			ng-show="range.isTime">
186			<div class="invalid-feedback" ng-show="range.isTime">
187	49df590a	Jan Kohlíček	Tento čas musí být vetší.
188			</div>
189			</div>
190			</div>
191			</div>
192
193	d68f7bbd	Jan Kohlíček	<div class="loading" ng-show="showInfoLoading"></div>
194	0b27c108	Jan Kohlíček
195	49df590a	Jan Kohlíček	<div id="graphs" ng-show="$root.selectDevice!=null && $root.selectDevice.traffics.length>0 && !showInfoLoading">
196	01189277	kohlicekjan	<h4 class="mt-4">{{range.isTime ? "Průměrná rychlost za den" : "Průměrná rychlost za jednotlivé dny"}}</h4>
197	b88dd6bb	Jan Kohlíček	<graph-average-speed></graph-average-speed>
198	49df590a	Jan Kohlíček
199	01189277	kohlicekjan	<h4 class="mt-4">{{range.isTime ? "Počet vozidel za den" : "Průměrná rychlost za jednotlivé dny"}}</h4>
200	b88dd6bb	Jan Kohlíček	<graph-number-vehicles></graph-number-vehicles>
201	49df590a	Jan Kohlíček
202	274760e7	Jan Kohlíček	<div class="text-center">
203			<a class="btn btn-dark" href="{{ urlExportCsv }}" role="button">Export CSV</a>
204			</div>
205
206	01189277	kohlicekjan	<div class="text-center mb-2 mt-2 w-100 small">
207			zdroj dat: <a class="source-link" target="_blank" rel="noopener"
208			href="https://doprava.plzensky-kraj.cz">doprava.plzensky-kraj.cz</a>
209
210	fb12df6d	Jan Kohlíček	</div>
211	49df590a	Jan Kohlíček	</div>
212	d68f7bbd	Jan Kohlíček
213	01189277	kohlicekjan	<div class="form-text text-center small"
214			ng-show="$root.selectDevice && $root.selectDevice.traffics.length==0 && !showInfoLoading">
215			Data nejsou k dispozici
216	d68f7bbd	Jan Kohlíček	</div>
217			</section>
218
219			<!--MAP section-->
220	fb12df6d	Jan Kohlíček	<section class="map col-12" id="map"
221			ng-class="{ 'col-lg-9': $root.selectDevice==null, 'col-lg-4': $root.selectDevice!=null }"
222	d68f7bbd	Jan Kohlíček	ng-controller="mapController">
223	0b27c108	Jan Kohlíček	</section>
224			</div>
225
226	e4f78eb8	Jan Kohlíček	<div class="modal fade" id="modalError" tabindex="-1" role="dialog">
227	0b27c108	Jan Kohlíček	<div class="modal-dialog" role="document">
228			<div class="modal-content">
229			<div class="modal-header">
230	49df590a	Jan Kohlíček	<h5 class="modal-title">{{modalError.title}}</h5>
231	0b27c108	Jan Kohlíček	</div>
232			<div class="modal-body">
233	01189277	kohlicekjan	<p>{{modalError.body}}</p>
234	0b27c108	Jan Kohlíček	</div>
235			<div class="modal-footer">
236	e4f78eb8	Jan Kohlíček	<button type="button" class="btn btn-primary" data-dismiss="{{modalError.clickButton ? '' : 'modal'}}"
237			ng-click="modalError.clickButton && modalError.clickButton()">{{modalError.button}}
238			</button>
239	0b27c108	Jan Kohlíček	</div>
240			</div>
241			</div>
242			</div>
243
244
245	d68f7bbd	Jan Kohlíček	<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCSx7hyAzQiG5uocJTeZgf1Z3lpDy4kpEk"
246			type="text/javascript"></script>
247
248	0b27c108	Jan Kohlíček	</body>
249	adbf541a	kohlicekjan	</html>

Projekt

Obecné

Profil

ASWI - Pokročilé softwarové inženýrství » ASWI 2018 » Zobrazení dat o průjezdu vozidel (Plzeňský kraj) - Pivovar