This repository has been archived by the owner on Jul 7, 2021. It is now read-only.
forked from WRI-Cities/static-GTFS-manager
-
Notifications
You must be signed in to change notification settings - Fork 1
/
hmrl.html
386 lines (303 loc) · 11.8 KB
/
hmrl.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>CSV to GTGS Conversion</title>
<link href="lib/leaflet.css" orig="https://unpkg.com/[email protected]/dist/leaflet.css" rel="stylesheet">
<link href="lib/jquery-ui.min.css" rel="stylesheet">
<link href="lib/tabulator.min.css" rel="stylesheet">
<link href="lib/bootstrap.v4.0.0.min.css" crossorigin="anonymous" alt="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" rel="stylesheet">
<link href="js/commonstyle.css" rel="stylesheet">
<!-- Put the CSSs first and JSs next -->
<script src="lib/jquery-3.3.1.min.js" type="text/javascript"></script>
<script src="lib/jquery-ui.min.js" type="text/javascript"></script>
<script src="lib/leaflet.js"></script>
<script src="lib/tabulator.js" type="text/javascript"></script>
<script src="lib/leaflet-ant-path.js"></script>
<script src="lib/popper.v1.12.9.min.js" crossorigin="anonymous" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" alt="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="lib/bootstrap.v4.0.0.min.js" crossorigin="anonymous" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" alt="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js">
</script>
<script src="lib/papaparse.min.js" type="text/javascript"></script>
<!-- <script src="lib/leaflet-layerconfig.js" type="text/javascript"></script> -->
<style>
/* Tabulator tables: */
#stops-table {
height:300px;
}
#missing-stops-table {
height:255px;
}
#replace-stops-table {
height:150px;
}
#fareIDs-table {
height:350px;
}
#translations-table {
height: 280px;
}
/* Leaflet maps: */
#map {
height:400px;
width:100%;
}
#smallMap {
height:300px;
width: 350px;
/*
display: inline-block;
position:absolute;
top:45px;
right:0;
*/
border: 1px black solid;
}
.routeCard {
font-size: .9em;
padding: 3px;
}
/* accordions.. being in tabs maybe they get v.small height by default. so have to give them heigh. */
.routeOptions .ui-accordion-content {
background: lavender;
font-size: .9em;
height: 280px;
}
.routeSequence .ui-accordion-content {
height: 500px;
}
.smallTables .ui-accordion-content {
font-size: .9em;
height: 400px;
}
/* For sequence sortable */
.sortable { list-style-type: none; margin: 0; padding: 0; width: 250px; }
.sortable li { margin: 0 0 5px 0; padding: 5px; font-size: 0.9em; height: 2em; }
/*
html>body .sortable li { height: 1.5em; line-height: 1.2em; }
*/
.ui-state-highlight { height: 1.5em; line-height: 1.2em; }
.ui-sort-position {
text-align: center;
font-size: 3.8em;
}
ol.sortable {
list-style-position: inside;
list-style-type: decimal;
}
.ui-accordion-content .delSortElement a {
font-weight: bold;
}
/* left and right spans in same line. from https://stackoverflow.com/a/5067308/4355695 */
/*.left { float:left }*/
.right { float:right }
/* override jquery's */
.ui-accordion-content a:hover {
text-decoration: none;
}
.routeSequence > div > ol > li > a:hover {
color: red;
font-weight: bold;
}
red {
color: red;
font-weight: bold;
}
</style></head>
<body>
<div id="navBar"></div>
<div class="container-fluid">
<h2>Convert CSV schedules format to GTFS (for Hyderabad Metro)</h2>
<div id="instructions">
<h3>Instructions</h3>
<div>
<p align="center"><a href="https://www.youtube.com/embed/MqEsAtcNieo?rel=0&autoplay=1" target="_blank"><img class="videothumb" src="hydcsv_related/hmrl-screenshot.png" height="240" width="auto"><br><small>Click here to see a demo video.</small></a></p>
<p>This page handles the <a target="_blank" href="extra_files/sample-hyd-csv-input.txt">specific CSV format↗</a> of HMRL, Hyderabad, India. There are some files to upload and some settings to set before converting to GTFS. Please make your way through each of the tabs.</p>
- Do remember to enter the password on top right for the final GTFS conversion.<br>
- Detailed instructions are given in info boxes at each tab.
</div></div><!-- Accordion over -->
<hr>
<!-- Tabs Menu -->
<div id="tabs">
<ul>
<li><a href="#tab1">1. Upload</a></li>
<li><a href="#tab2">2. Stops</a></li>
<li><a href="#tab3">3. Misc</a></li>
<li><a href="#tab4">4. Convert to GTFS</a></li>
</ul>
<!-- 1 ############################-->
<div id="tab1">
<h3>1. Upload Files</h3>
<p id="numRoutesLine">Choose number of Routes:
<input id="numRoutesSelect" value="2" size="1">
<button id="numRoutesButton">Set number</button>
<small>warning: clicking this again will <span class="red">reset</span> everything below.</small>
</p>
<form id="form1" action="javascript:false;">
<div class="row" id="routeUploadRepeater">
<!-- this will get populated by upload fields depending on number of routes -->
</div>
</form>
<div id="smallMap" class="smallMap"></div>
<br><br>
<p><a target="_blank" href="extra_files/sample-hyd-csv-input.txt">Click here↗</a> to see a sample structure of the HMRL CSV format.</p>
<hr>
<div class="alert alert-warning" id=CSVUploadStatus">
Note: Be sure about which file is for weekdays and which for sunday.. as the files internally have no day information on them.<br><br>
</div>
</div>
<!-- 2 ############################-->
<div id="tab2">
<h3><a id="2"></a>2. Stops <small>(simplified)</small></h3>
<div class="row">
<div class="col-md-6">
<div id="stops-table"></div>
<br>
<div class="row"><div class="col">
<p>Add a new station: <input placeholder="stop_id" id="station2add" size="4"><button class="btn-primary" id="addStation" type="button">Add</button>
<br><small id="stationAddStatus"></small></p>
</div>
<div class="col">
<button id="stopsDownloadButton">Download this data as CSV</button>
</div>
</div>
<br><br>
<div class="card mb-3 card-body bg-light">
<p>Note: This is a simplified representation of the metro stations. <br>In the system-generated data files that you will upload in 3rd tab, <br>each platform has its id like "MYP1", "MYP2" etc. <br><br>In the final GTFS, "MYP" will be automatically set as parent to "MYP1", "MYP2".</p>
</div>
</div><div class="col-md-6">
<div id="map"></div>
</div></div>
<br>
<br>
</div>
<!-- 3 ############################-->
<div id="tab3">
<h3>3. Misc Info</h3>
<div class="row">
<div class="col-md-5">
<h5>Agency Info <span id="agency-check"></span></h5>
<p><small>
<label title="Short, unique internal code for agency, like KMRL">agency_id <red>*</red> :
<input required id="agency_id" size="5"></label><br>
<label title="Official name of agency">agency_name <red>*</red> :
<input required id="agency_name" size="20"></label><br>
<!--
<label title="Local language translation of name of agency">agency_name translation:
<input id="agency_name_translation" size="10"></label><br>
-->
<label title="Official website of agency">agency_url <red>*</red> :
<input required id="agency_url" size="25"></label><br>
<label>agency_timezone <red>*</red> :
<input required id="agency_timezone" size="10"></label>
</small></p>
<hr>
<h5>Calendar <span id="calendar-check"></span></h5>
<p><small><label title="Date from which the uploaded schedule is in operation, in YYYYMMDD format.">Start date <red>*</red> : <input required id="start_date" size="8" placeholder="YYYYMMDD"></label><br>
<label title="Needed as a formality. Tentative last date of operation of uploaded schedule, in YYYYMMDD format. Can put any value till 2099. Can change later.">End date <red>*</red> : <input required id="end_date" size="8" placeholder="YYYYMMDD" value="20990101"></label></small></p>
<hr>
<br>
<h5>Stops Replacement</h5>
<p>This table is for setting the correct stop_id's for platforms. Example: At Ameerpet, Blue Line uses platform 4 and Red Line uses platform 2.</p>
<div class="smallTables">
<h3>Click to expand</h3>
<div>
<div id="replace-stops-table"></div>
<br>
<button class="btn btn-primary btn-sm" id="addReplaceStopButton">Add a Row</button>
</div>
</div><!--Accordion over -->
</div>
<div class="col-md-7">
<h5>Fares <span id="fares-check"></span></h5>
<p>Upload Fares Chart CSV : (<a target="_blank" href="hydcsv_related/fares_chart_pivoted.csv">get template</a>)</p>
<small>
<p><input type="file" id="fareChart" name="fareChart" accept=".csv" class="btn btn-sm btn-outline-secondary">
</p>
<p>Note: This is optional. If no file is chosen, fare_rules file won't be created.</p>
</small>
<br>
<p>Assign Fare ID's:</p>
<div class="row">
<div class="col-md-6">
<div id="fareIDs-table"></div>
</div>
<div class="col-md-6" id="fareAddBox">
<p>Add a fare</p>
<p><input placeholder="ex:50" id="fare2add" size="4"><button class="btn-primary" id="fare2addButton" type="button">Add</button>
</p>
<br><br>
<p class="alert alert-warning"><small>Please ensure that all the fare prices mentioned in the fares chart csv above have been assigned a fare_id here.</small></p>
</div>
</div><!-- fares row over -->
<br>
</div>
</div><!-- big row over -->
<hr>
<h5>Translations</h5>
<p>This table will be converted to the <a href="https://developers.google.com/transit/gtfs/reference/gtfs-extensions#translations" target="_blank">translations.txt</a> spec in GTFS extensions, that can be used in regions having multiple official languages.</p>
<div class="smallTables">
<h3>Click to expand</h3>
<div>
<div id="translations-table"></div>
<p><br>
<button class="btn btn-primary btn-sm" id="addTranslationButton">Add a Row</button>
<button class="btn btn-warning btn-sm" id="translationsDownloadButton">Download this data as CSV</button>
<span class="right">Note: names must exactly match those given in other places.
</span>
</p>
</div></div>
<!--Accordion over -->
<hr>
<h5>Missing Stops</h5>
<p>This table will tell the program what timing calculations to apply in case a stop is missing from the uploaded csv datafile.</p>
<div class="smallTables">
<h3>Click to expand</h3>
<div>
<p>There are some default configurations already loaded. Skip this if there's been no major changes since last run.</p>
<div id="missing-stops-table"></div>
<p><br>
<button class="btn btn-primary btn-sm" id="addMissingStopButton">Add a Row</button>
<button class="btn btn-warning btn-sm" id="missingStopsDownloadButton">Download this data as CSV</button>
</p>
</div></div>
<!--Accordion over -->
<br>
</div>
<!-- 4 ############################-->
<div id="tab4">
<h3>4. Convert to GTFS</h3>
<div class="row">
<div class="col">
<p><button class="btn btn-md btn-warning" id="checkMiscButton" onclick="diagnoseConvertHYD()">➤ Diagnose and Convert to GTFS</button></p>
<p id="diagnoseConvertStatus"></p>
<p id="diagnoseConvertInfo"></p>
</div>
<div class="col"><div class="alert alert-secondary"><small>
Note: Pressing the button will first diagnose all the input and configuration data. If all is well, it will proceed with creating GTFS feed. The process can take a minute or two to complete.
<br><br>
The import process will be similar to the GTFS import process on the home page. The data currently loaded will be exported as a backup, and a fresh GTFS feed will be created using the data you have uploaded and entered.
<br><br>
<a target="_blank" href="hydcsv_related/sample-console-log.txt">Clck here</a> to see a sample console log output of a successful import.
</small></div>
</div>
</div>
</div>
</div> <!-- End of Tabs container -->
<br>
<!--
<div id="logaccordion">
<h3>Changes Log</h3>
<div>
<p><textarea id="trackChanges" rows=10></textarea>
</p>
</div></div>
Accordion over -->
<br><br><br>
</div>
<script src="config/settings.js" type="text/javascript"></script>
<script src="js/commonfuncs.js" type="text/javascript"></script>
<script src="js/hydcsv.js"></script>
</body>
</html>