<!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/leaflet@1.2.0/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>