Merge pull request #38 from 0hAodha/darticons

add separate icons for DARTs

src/assets/train-tram-solid.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M86.8 48c-12.2 0-23.6 5.5-31.2 15L42.7 79C34.5 89.3 19.4 91 9 82.7S-3 59.4 5.3 49L18 33C34.7 12.2 60 0 86.8 0H361.2c26.7 0 52 12.2 68.7 33l12.8 16c8.3 10.4 6.6 25.5-3.7 33.7s-25.5 6.6-33.7-3.7L392.5 63c-7.6-9.5-19.1-15-31.2-15H248V96h40c53 0 96 43 96 96V352c0 30.6-14.3 57.8-36.6 75.4l65.5 65.5c7.1 7.1 2.1 19.1-7.9 19.1H365.3c-8.5 0-16.6-3.4-22.6-9.4L288 448H160l-54.6 54.6c-6 6-14.1 9.4-22.6 9.4H43c-10 0-15-12.1-7.9-19.1l65.5-65.5C78.3 409.8 64 382.6 64 352V192c0-53 43-96 96-96h40V48H86.8zM160 160c-17.7 0-32 14.3-32 32v32c0 17.7 14.3 32 32 32H288c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32H160zm32 192a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm96 32a32 32 0 1 0 0-64 32 32 0 1 0 0 64z"/></svg>

src/components/SidebarPanel.vue

@@ -7,6 +7,7 @@
 
     <div id= "sidebarDiv">
         <h2>Train Code: {{ store.selectedDataMap["TrainCode"] }}</h2>
+        <p id = "typeP">Type: {{ store.selectedDataMap["TrainType"] }}</p>
         <p id = "dateP">Date: {{ store.selectedDataMap["TrainDate"] }}</p>
         <p id = "dateP">Status: {{ store.selectedDataMap["TrainStatus"] }}</p>
         <p id = "dateP">Train Position - Long: {{ store.selectedDataMap["TrainLongitude"] }} Lat: {{ store.selectedDataMap["TrainLatitude"] }}</p>

src/pages/MapPage.vue

@@ -19,9 +19,17 @@
     <!-- overlay offset is the size of the image so that it is centered-->
     <ol-overlay :position="coordinate" :positioning="center-center" :offset="[-14,-16]">
         <div class="overlay-content" @click="getSelectedTrain(i)">
-            <img v-if="isTrainRunning(i) && isTrainLate(i)" src="../assets/red-train-solid.png" class="trainMapIcon" alt="Late Train Icon">
-            <img v-else-if="isTrainRunning(i) && !isTrainLate(i)" src="../assets/green-train-solid.png" class="trainMapIcon" alt="On-Time Train Icon">
-            <img v-else src="../assets/train-solid.svg" class="trainMapIcon" alt="Not Running Train Icon">
+            <div v-if="getTrainType(i) === 'D'">
+                <img v-if="isTrainRunning(i) && isTrainLate(i)" src="../assets/red-train-tram-solid.png" class="trainMapIcon" alt="Late DART Icon">
+                <img v-else-if="isTrainRunning(i) && !isTrainLate(i)" src="../assets/green-train-tram-solid.png" class="trainMapIcon" alt="On-Time DART Icon">
+                <img v-else src="../assets/train-tram-solid.svg" class="trainMapIcon" alt="Not Running DART Icon">
+            </div>
+            <div v-else>
+                <img v-if="isTrainRunning(i) && isTrainLate(i)" src="../assets/red-train-solid.png" class="trainMapIcon" alt="Late Train Icon">
+                <img v-else-if="isTrainRunning(i) && !isTrainLate(i)" src="../assets/green-train-solid.png" class="trainMapIcon" alt="On-Time Train Icon">
+                <img v-else src="../assets/train-solid.svg" class="trainMapIcon" alt="Not Running Train Icon">
+            </div>
+
         </div>
     </ol-overlay>
     </template>
@@ -129,6 +137,11 @@ export default {
             }
         },
 
+        // method that returns the type of train in string form "D" for dart, "S" for suburban, "M" for mainland
+        getTrainType(i) {
+            return this.allDataMap[i]["TrainType"][0];
+        },
+
         // method to fetch live train data from the database
         getLiveTrainData() {
             const functions = getFunctions(app);