Merge pull request #55 from 0hAodha/colouredSidebar

Coloured sidebar

src/components/StationSidebar.vue

@@ -40,7 +40,7 @@ export default {
     position: absolute;
     height: 80%;
     width: 100%;
-    color: white;
+    color: rgb(0, 0, 0);
 }
 
 #headerImage{
@@ -54,7 +54,7 @@ export default {
 #xButton{
     font-size: 80%;
     font-family: Georgia;
-    color: white;
+    color: rgb(0, 0, 0);
     position: absolute;
     top:10px;
     right:10px;

src/components/TrainSidebar.vue

@@ -1,7 +1,17 @@
 <template>
 <div id="sidebarDiv">
     <div id="sidebarHeader">
-        <img id="headerImage" src="../assets/train-solid.svg" alt="Train Icon">
+
+        <div id = "imageDiv" v-if="getTrainType() === 'DART'">
+          <img v-if="isTrainRunning() && isTrainLate()" src="../assets/red-train-tram-solid.png" class="headerImage" alt="Late DART Icon">
+          <img v-else-if="isTrainRunning() && !isTrainLate()" src="../assets/green-train-tram-solid.png" class="headerImage" alt="On-Time DART Icon">
+          <img v-else src="../assets/train-tram-solid.svg" class="headerImage" alt="Not Running DART Icon">
+        </div>
+        <div id = "imageDiv" v-else>
+          <img v-if="isTrainRunning() && isTrainLate()" src="../assets/red-train-solid.png" class="headerImage" alt="Late Train Icon">
+          <img v-else-if="isTrainRunning() && !isTrainLate()" src="../assets/green-train-solid.png" class="headerImage" alt="On-Time Train Icon">
+          <img v-else src="../assets/train-solid.svg" class="headerImage" alt="Not Running Train Icon">
+        </div>
         <div v-on:click="store.setDisplaySelectedTrain(false)" id="xButton">X</div>
     </div>
 
@@ -26,6 +36,38 @@ export default {
         return {
             store
         }
+    }, 
+
+    methods: {
+        // method to determine whether or not a selected train is late 
+        isTrainLate() {
+            // check if the train is running
+            if (store.selectedTrain["TrainStatus"][0] == "R") {
+                let publicMessage = store.selectedTrain["PublicMessage"][0];
+                let startTimeStr = publicMessage.indexOf("(");
+
+                // check if the train is late
+                if (publicMessage[startTimeStr+1] != "-" && publicMessage[startTimeStr+1] != "0") {
+                    return true;
+                }
+            }
+            return false;
+        },
+
+        // method to determine whether or not a selected train is running
+        isTrainRunning() {
+            if (store.selectedTrain["TrainStatus"][0] == "R") {
+                return true; 
+            } 
+            else {
+                return false;
+            }
+        },
+
+        // method that returns the type of train (either "Train" or "DART")
+        getTrainType() {
+            return store.selectedTrain["TrainType"][0];
+        },
     }
 }
 </script>
@@ -43,21 +85,26 @@ export default {
   position: absolute;
   height: 80%;
   width: 100%;
-  color: white;
+  color: rgb(0, 0, 0);
 }
 
-#headerImage{
+
-  height: 80%;
+.headerImage{
-  width: auto;
+  height: 100%;
-  overflow: hidden;
+  width: 40px;
-  position: relative;
+  padding-top: 10px;
-  top: 10px;
+  
+}
+
+.imageDiv{
+  display: flex;
+  justify-content: center;
 }
 
 #xButton{
   font-size: 80%;
   font-family: Georgia;
-  color: white;
+  color: rgb(0, 0, 0);
   position: absolute;
   top:10px;
   right:10px;

src/pages/MapPage.vue

@@ -473,9 +473,9 @@ export default {
   z-index: 2;
   text-align: center;
   animation: gradient 15s ease infinite;
-  background: linear-gradient(45deg, #000000, #111111, #222222, #333333, #444444, #555555);
+  background: linear-gradient(45deg, #ffffff, #fef3f3, #ffffff, #f2f2f2);
-  background-size: 400%, 400%;
+  background-size: 100%, 100%;
-  box-shadow: 0 0 4px 2px #333333;
+  box-shadow: 0 0 4px 2px #cccccc;
   overflow: hidden;
   font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif
 }