adding in start time to the PI MTA display

server.py

@@ -17,17 +17,7 @@ app._static_folder = os.path.abspath("templates/static/")
 stops = pd.read_csv("stops.txt")
 stop_ids = ["127S", "127N", "A27N", "A27S"]
 
-
-@app.route("/", methods=["GET"])
-def index():
-    # TODO: Shove this into a sqlite database
-    station_names = sorted(list(set(stops["stop_name"].to_list())))
-    return render_template(
-        "layouts/index.html",
-        station_names=station_names,
-        station_1="42 St-Port Authority Bus Terminal",
-        station_2="Times Sq-42 St"
-    )
+start_time = datetime.now().strftime("%d/%m/%Y %H:%M:%S")
 
 
 def link_to_station(data):
@@ -44,6 +34,23 @@ def link_to_station(data):
     return linked_data
 
 
+@app.route("/", methods=["GET"])
+def index():
+    # TODO: Shove this into a sqlite database
+    station_names = sorted(list(set(stops["stop_name"].to_list())))
+    return render_template(
+        "layouts/index.html",
+        station_names=station_names,
+        station_1="42 St-Port Authority Bus Terminal",
+        station_2="Times Sq-42 St"
+    )
+
+
+@app.route("/start_time", methods=["GET"])
+def get_start_time():
+    return start_time
+
+
 @app.route("/mta_data", methods=["POST"])
 def get_mta_data():
     global subway_data
@@ -73,10 +80,10 @@ def get_stop_id():
 if __name__ == "__main__":
     api_key = os.getenv('MTA_API_KEY', '')
 
-
     old_data = None
     last_updated = datetime.now().strftime("%d/%m/%Y %H:%M:%S")
 
+
     async def mta_callback(routes):
         global subway_data, old_data, last_updated
         subway_data = link_to_station(mtaController.convert_routes_to_station_first(routes))
@@ -106,6 +113,7 @@ if __name__ == "__main__":
     )
     mtaController.add_callback(mta_callback)
 
+
     def start_mta():
         while True:
             try:
@@ -113,6 +121,7 @@ if __name__ == "__main__":
             except Exception as e:
                 app.logger.info(f"Exception found in update function - {e}")
 
+
     threadLock = threading.Lock()
     threads = [threadWrapper(start_mta)]
 
@@ -120,7 +129,7 @@ if __name__ == "__main__":
         t.start()
 
     debug = os.getenv("DEBUG", 'False').lower() in ('true', '1', 't')
-    app.run(host="localhost", debug= True,  port=5000)
+    app.run(host="localhost", debug=True, port=5000)
 
     for t in threads:
         t.join()

templates/layouts/index.html

@@ -31,10 +31,18 @@
                 Pi MTA Display!
             </h1>
         </a>
+        <div>
+            <div>
                 <h3>
                     Last Updated:&nbsp;&nbsp;<span id="last_updated"></span>
                 </h3>
             </div>
+            <div>
+                <h3 style="float:right">
+                    Started:&nbsp;&nbsp;<span style="float:right" id="start_time"></span>
+                </h3>
+            </div>
+        </div>
 </nav>
 <div id="station_1">
     <nav class="navbar navbar-dark bg-dark">

templates/static/js/MtaData.js

@@ -1,14 +1,6 @@
 $(document).ready(function () {
 
-    const interval = setInterval(function () {
-        updateData($('#station_1'))
-    }, 5000);
-    const interval2 = setInterval(function () {
-        updateData($('#station_2'))
-    }, 6000);
-
-    function updateData(station) {
-
+    function updateStationData(station) {
         $.ajax({
             type: "POST",
             url: '/mta_data',
@@ -24,6 +16,24 @@ $(document).ready(function () {
             }
         });
     }
+    function updateStartTime() {
+        $.ajax({
+            type: "get",
+            url: '/start_time',
+            // contentType: "application/json",
+            // dataType: "json",
+            async: true,
+            // data: JSON.stringify({"station": station.find('.station-name:first').get(0).innerText}, null, '\t'),
+            success: function (data, text) {
+                console.log("GETTING TIME")
+                console.log(data);
+                $("#start_time").text(data)
+            },
+            error: function (request, status, error) {
+                alert(request.responseText);
+            }
+        });
+    }
 
     function updateStation(station, data) {
         updateDirections(station, data, "North");
@@ -31,7 +41,7 @@ $(document).ready(function () {
         updateTime(data["LastUpdated"])
     }
 
-    function updateTime(lastUpdated){
+    function updateTime(lastUpdated) {
         console.log(lastUpdated)
         $("#last_updated").text(lastUpdated)
     }
@@ -66,25 +76,30 @@ $(document).ready(function () {
 
             $(listItem).show()
             $(listItem).find("img").attr("src", "/static/images/lines/" + train + ".svg")
-        } else if (train === "N/A"){
+        } else if (train === "N/A") {
             console.log("Route Is NA - Disabling Route")
             console.log($(listItem))
             $(listItem).hide()
         }
-
-
     }
 
     function imageExists(image_url) {
-
         var http = new XMLHttpRequest();
-
         http.open('HEAD', image_url, false);
         http.send();
-
         return http.status != 404;
 
     }
+
+    const interval = setInterval(function () {
+        updateStationData($('#station_1'))
+    }, 5000);
+    const interval2 = setInterval(function () {
+        updateStationData($('#station_2'))
+    }, 6000);
+    updateStartTime();
+
+
 });
 
 function setStation(ele) {