Merge commit 'refs/pull/70/head' of https://github.com/0hAodha/traintracker into addingLegend

src/components/TrainSidebar.vue

@@ -1,7 +1,9 @@
 <template>
-<div id="sidebarDiv">
+  <div id="sidebarDiv">
+    <div v-on:click="store.setDisplaySelectedTrain(false)" id="xButton">X</div>
+    <h2 style="padding: 10px;">Train Code: {{ store.selectedTrain["TrainCode"][0] }}</h2>
       <div id="sidebarHeader">
-
+        <p id="originDiv">Origin:<br> {{ getOrigin(store.selectedTrain["PublicMessage"][0]) }}</p>
           <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">
@@ -12,20 +14,51 @@
             <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>
+          <p id="destinationDiv">Destination:<br> {{ getDestination(store.selectedTrain["PublicMessage"][0]) }}</p>
       </div>
   
       <div id="sidebarDiv">
-        <h2>Train Code: {{ store.selectedTrain["TrainCode"][0] }}</h2>
+        <div id="typeDiv">
-        <p id="typeP">Type: {{ store.selectedTrain["TrainType"][0] }}</p>
+          <div id="typeIcon">
-        <p id="dateP">Date: {{ store.selectedTrain["TrainDate"][0] }}</p>
+            <img id="typeImage" src = "src\assets\trainTypeIcon.png">
-        <p id="dateP">Status: {{ store.selectedTrain["TrainStatus"][0] }}</p>
-        <p id="dateP">Train Position - Long: {{ store.selectedTrain["TrainLongitude"][0] }} Lat: {{ store.selectedTrain["TrainLatitude"][0] }}</p>
-        <p id="directionP">Direction: {{ store.selectedTrain["Direction"][0] }}</p>
-        <p id="messageP">Public Message: {{ store.selectedTrain["PublicMessage"][0] }}</p>
           </div>
-</div>
+          <p id="typeP"><span style="color:grey; font-size: 14px;">Type:</span><br>{{ store.selectedTrain["TrainType"][0] }}</p>
-</template>
+        </div>
+
+        <div id="dateDiv">
+          <div id="dateIcon">
+            <img id="dateImage" src = "src\assets\dateIcon.png">
+          </div>
+          <p id="dateP"><span style="color:grey; font-size: 14px;">Date:</span><br>{{ store.selectedTrain["TrainDate"][0] }}</p>
+        </div>
+        
+        <div id="positionDiv">
+          <div id="positionIcon">
+            <img id="positionImage" src = "src\assets\locationIcon.png">
+          </div>
+          <div id="positionParagraphDiv">
+            <p id="longP"><span style="color:grey; font-size: 14px;">Longitude:</span><br>{{ store.selectedTrain["TrainLongitude"][0] }}</p>
+            <p id="latP"><span style="color:grey; font-size: 14px;">Latitude:</span><br>{{ store.selectedTrain["TrainLatitude"][0] }}</p>
+          </div>
+        </div>
+
+        <div id="directionDiv">
+          <div id="directionIcon">
+            <img id="directionImage" src="src\assets\directionIcon.png">
+          </div>
+          <p id="directionP"><span style="color:grey; font-size: 14px;">Direction:</span><br>{{ store.selectedTrain["Direction"][0] }}</p>
+        </div>
+
+        <div id="publicMessageDiv">
+          <div id="publicMessageIcon">
+            <img id="publicMessageImage" src="src\assets\publicMessageIcon.png">
+          </div>
+          <p id="publicMessageP"><span style="color:grey; font-size: 14px;">Public Message:</span><br>Public Message: {{ store.selectedTrain["PublicMessage"][0] }}</p>
+        </div>
+        <!--<p id="messageP">Public Message: {{ store.selectedTrain["PublicMessage"][0] }}</p> -->
+      </div>
+  </div>
+  </template>
 
 <script>
 import { store } from '../store/store'
@@ -54,6 +87,19 @@ export default {
             return false;
         },
 
+        getOrigin(publicMessage) {
+            let startOrigin = publicMessage.indexOf("-") + 1
+            let endOrigin = publicMessage.indexOf("to ") - 1;
+            return publicMessage.substring(startOrigin, endOrigin);
+        },
+
+        getDestination(publicMessage) {
+            let endOrigin = publicMessage.indexOf("to ");
+            let startDestination = endOrigin + 3;
+            let endDestination = publicMessage.indexOf("(") - 1;
+            return publicMessage.substring(startDestination, endDestination);
+        },
+
         // method to determine whether or not a selected train is running
         isTrainRunning() {
             if (store.selectedTrain["TrainStatus"][0] == "R") {
@@ -72,6 +118,7 @@ export default {
 }
 </script>
 
+
 <style scoped>
 #sidebarHeader{
   position: relative;
@@ -79,38 +126,135 @@ export default {
   height: 15%;
   width: 100%;
   overflow: hidden;
+  display: flex;
+  justify-content: center; 
+  background-color: rgb(214, 214, 214);
+  box-shadow: 0 0 5px 2px rgb(190, 190, 190);
 }
-
 #sidebarDiv{
   position: absolute;
   height: 80%;
   width: 100%;
   color: rgb(0, 0, 0);
+  padding-top: 10px;
 }
-
-
 .headerImage{
   height: 100%;
-  width: 40px;
+  width: 100%;
-  padding-top: 10px;
+  padding: 10px;
-  
 }
-
+#imageDiv{
-.imageDiv{
+  background-color: rgb(230, 230, 230);
-  display: flex;
+  border-radius: 50%;
-  justify-content: center;
+  order:1;
 }
 
 #xButton{
-  font-size: 80%;
+  font-size: 16px;
   font-family: Georgia;
   color: rgb(0, 0, 0);
   position: absolute;
   top:10px;
   right:10px;
+  z-index: 5;
 }
-
 #xButton:hover{
   color:red;
 }
+
+#originDiv, #destinationDiv{
+  position: relative;
+  width: 40%;
+  font-size: 18px;
+  align-self: center;
+  padding-top: 3%;
+}
+#originDiv{
+  order:0;
+}
+
+#destinationDiv{
+  order:2;
+}
+
+
+/* Sidebar Section Divs */
+
+#typeDiv, #dateDiv, #positionDiv, #directionDiv, #publicMessageDiv{
+  background-color: rgb(230, 230, 230);
+  height: 12%;
+  position: absolute;
+  right:0px;
+  width:100%;
+}
+
+#typeIcon, #dateIcon, #positionIcon, #directionIcon, #publicMessageIcon{
+  background-color: rgb(214, 214, 214);
+  width:20%;
+  height: 100%;
+  position: absolute;
+  left:0px;
+  display: flex;
+  justify-content: center;
+}
+
+#publicMessageIcon{
+  align-items: center;
+}
+
+#typeP, #dateP, #longP, #latP, #directionP, #publicMessageP{
+  font-size: 16px;
+  position: relative;
+  bottom: 2px;
+  width: 40%;
+  left: 22%;
+  text-align: left;
+}
+
+#positionParagraphDiv{
+  display: flex;
+}
+
+#latP{
+  left: 3%;
+}
+
+#publicMessageP{
+  width: 78%;
+}
+
+/*Different Icons CSS*/
+#typeImage{
+  width: 70%;
+}
+#dateImage, #positionImage, #directionImage{
+  padding-top: 2px; 
+  padding-bottom: 2px;
+}
+
+#publicMessageImage{
+  height: 40%;
+  position: relative;
+  top:-10px;
+}
+
+/*Positioning rows*/
+#dateDiv{top: 60px;}
+#positionDiv{top: 110px;}
+#directionDiv{top: 160px;}
+#publicMessageDiv{
+  top:210px;
+  height: 40%;
+}
+
+
+
+@media screen and (max-width: 850px) {
+  .headerImage{
+  height: 100%;
+  width: 100%;
+  padding: 10px;
+  }
+
+}
 </style>

src/components/pieChart.vue

@@ -33,16 +33,20 @@ export default {
             trainData: {
                 labels: ['Trains', 'Darts'],
                 datasets: [{
-                    backgroundColor: ['#41B883', '#E46651', '#00D8FF'],
+                    backgroundColor: ['#ffdf9e', '#c3eefa', '#00D8FF'],
-                    data: [store.insights["numTrains"], store.insights["numDarts"]]
+                    data: [store.insights["numTrains"], store.insights["numDarts"]],
+                    borderColor: ['#000000', '#000000', '#00D8FF'],
+                    borderWidth: .5
                 }]
             },
             
             stationData: {
                 labels: ['Train Stations', 'Dart Stations'],
                 datasets: [{
-                    backgroundColor: ['#41B883', '#E46651', '#00D8FF'],
+                    backgroundColor: ['#ffdf9e', '#c3eefa', '#00D8FF'],
-                    data: [store.insights["numTrainStations"], store.insights["numDartStations"]]
+                    data: [store.insights["numTrainStations"], store.insights["numDartStations"]],
+                    borderColor: ['#000000', '#000000', '#00D8FF'],
+                    borderWidth: .5
                 }]
             },
 

src/pages/AccountPage.vue

@@ -6,25 +6,27 @@
         <p style="text-align:center" v-if="this.user">Your email: <b>{{ this.user.email }}</b><br><span id="passReset" @click="resetPasswordEmail()">Send password reset email</span></p>
 
         <h3>Enter your current password to edit the below settings</h3>
-        <input v-if="showCurrentPassword" type="text" v-model="currentPassword" placeholder="Enter existing password">
+        <div id="imgDiv1">
+            <img v-if="!showCurrentPassword" id="eyeImg" src="../assets/314858_hidden_eye_icon.png" @click="this.showCurrentPassword = !this.showCurrentPassword" alt="show">
+            <img v-else id = "eyeImg" src="../assets/315220_eye_icon.png" @click="this.showCurrentPassword = !this.showCurrentPassword">
+        </div>
+
+        <input v-if="!showCurrentPassword" type="text" v-model="currentPassword" placeholder="Enter existing password">
         <input v-else type="password" v-model="currentPassword" placeholder="Enter existing password">
-        <!-- <div id="imgDiv1"> -->
-        <!--     <img v-if="showPassword" id="eyeImg" src="../assets/314858_hidden_eye_icon.png" @click="this.showPassword = !this.showPassword" alt="show"> -->
-        <!--     <img v-else id = "eyeImg" src="../assets/315220_eye_icon.png" @click="this.showPassword = !this.showPassword"> -->
-        <!--   </div> -->
 
         <h3>Change email</h3>
         <input type="email" v-model="newEmail" aria-describedby="emailHelp" placeholder="Enter new email">
         <button @click="updateUserEmail()" id="emailUpdate" type="button" class="btn btn-primary" value="Update Email">Update email</button>
 
         <h3>Change password</h3>
-        <input v-if="showNewPassword" type="text" v-model="newPassword" placeholder="Enter new password">
+        <div id="imgDiv2">
-        <input v-else type="password" v-model="newPassword" placeholder="Enter new password">
+            <img v-if="!showNewPassword" id="eyeImg" src="../assets/314858_hidden_eye_icon.png" @click="this.showNewPassword = !this.showNewPassword" alt="show">
+            <img v-else id = "eyeImg" src="../assets/315220_eye_icon.png" @click="this.showNewPassword = !this.showNewPassword">
+        </div>
+
+        <input v-if="!showNewPassword" type="text" v-model="newPassword" placeholder="Enter existing password">
+        <input v-else type="password" v-model="newPassword" placeholder="Enter existing password">
 
-        <!-- <div id="imgDiv2"> -->
-        <!--     <img v-if="showPassword" id="eyeImg" src="../assets/314858_hidden_eye_icon.png" @click="this.showPassword = !this.showPassword" alt="show"> -->
-        <!--     <img v-else id = "eyeImg" src="../assets/315220_eye_icon.png" @click="this.showPassword = !this.showPassword"> -->
-        <!--   </div> -->
         <button @click="updateUserPassword()" id="passUpdate" type="button" class="btn btn-primary">Update Password</button>
 
         <button @click="deleteUserPreferences()" id="delPref" type="button" class="btn btn-danger">Delete Map Preferences</button>
@@ -237,7 +239,7 @@ h3 {
     justify-content: center;
 }
 
-#accountDiv div {
+#mainDiv{
     position: inherit;
     padding: 15px;
     background-color: rgb(255, 255, 255);
@@ -246,12 +248,11 @@ h3 {
     top: 14%;
     text-align: left;
     box-shadow: 0 0 4px 4px #b6b6b6;
-    
 }
 
 #emailUpdate, #passUpdate {
     position: relative;
-    left:10px;
+    left:40px;
     width: 26%;
 }
 
@@ -272,5 +273,86 @@ input {
     position: absolute;
     bottom: 10px;
     left:160px;
+}
+
+#imgDiv1{
+    position: absolute;
+    width: 40px;
+    height: 40px;
+    top:180px;
+    left: 195px;
+}
+
+#imgDiv2{
+    position: absolute;
+    width: 40px;
+    height: 40px;
+    bottom:165px;
+    left: 195px;
+}
+
+#imgDiv1:hover, #imgDiv2:hover{
+    transform: scale(1.1);
+}
+
+#eyeImg{
+    width: 100%;
+}
+
+@media screen and (max-width: 786px) {
+
+    #mainDiv{
+    position: inherit;
+    padding: 15px;
+    background-color: rgb(255, 255, 255);
+    width: 90%;
+    height: 80%;
+    top: 14%;
+    text-align: left;
+    box-shadow: 0 0 4px 4px #b6b6b6;
+    }
+
+    #delAcc {
+    position: absolute;
+    bottom: 10px;
+    left:10px;
+    height: 10%;
+    }
+
+    #delPref {
+    width: 50%;
+    left: 150px;
+    right: 10px;
+    height: 10%;
+    }
+
+    button{
+        font-size: 12px;
+    }
+
+    #imgDiv1{
+    position: absolute;
+    width: 60px;
+    height: 40px;
+    top:175px;
+    left: 195px;
+    }
+
+    #imgDiv2{
+        position: absolute;
+        width: 60px;
+        height: 40px;
+        bottom:194px;
+        left: 195px;
+    }
+
+    #eyeImg{
+        width:60%;
+    }
+}
+
+@media screen and (max-width: 786px) {
+
+
 }
 </style>

src/pages/MapPage.vue

@@ -71,6 +71,22 @@
     </div>
 </div>
 
+
+<div id="legendDropdown" class="dropdown">
+  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
+    Legend
+  </button>
+  <div style="padding-bottom: 7px; padding-left:7px;" id="dropMenu" class="dropdown-menu" aria-labelledby="dropdownMenuButton1" v-on:click.stop="handleClick">
+    <dl>
+      <dt style="color:red;">Red</dt>
+        <dd>Late Train</dd>
+      <dt style="color:green;">Green</dt>
+        <dd>Early/On Time Train</dd>
+      <dt style="color:black;">Black</dt>
+        <dd>Terminated/Not Yet Running Train</dd>
+    </dl>
+  </div>
+</div>
 <transition id="sidebar" name="slideLeft">
   <div v-if="store.displaySelectedTrain && store.selectedTrain">
     <TrainSidebar />
@@ -547,24 +563,28 @@ export default {
 #searchContainer{
   position: absolute;
   top: 11%;
-  background-color: #ffffff;
+  background-color: #6e757d;
   width: 190px;
   height: 40px;
   z-index: 3;
   display: flex;
   justify-content: center;
   align-items: center;
-  color: black;
+  box-shadow: 0 0 5px 2px #6e757d;
-  box-shadow: 0 0 5px 2px #6e757dbe;
   border-radius: 6%;
 }
 
+::placeholder{
+  color: white;
+}
 #searchBar{
   text-align: center;
-  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+  color: white;
+  background-color: #6e757d;
   border: none;
-  border-bottom: 1px solid black;
+  border-bottom: 1px solid rgb(255, 255, 255);
   z-index: 3;
+  outline: none;
 }
 
 
@@ -575,6 +595,13 @@ export default {
   top: 11%;
 }
 
+#legendDropdown {
+  position: absolute;
+  z-index: 2;
+  right: 1%;
+  top: 18%;
+}
+
 #prefHeader {
   font-size: 18px;
   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
@@ -585,7 +612,7 @@ export default {
 #sidebar {
   position: absolute;
   height: 80%;
-  width: 20%;
+  width: 30%;
   left: 2%;
   top: 14%;
   z-index: 2;
@@ -605,8 +632,8 @@ export default {
   position: relative;
 }
 .slideLeft-enter-active, .slideLeft-leave-active {
-  transition: opacity .5s;
+  transition: opacity .8s;
-  transition: all 0.8s;
+  transition: all 1.2s;
 
 }
 .slideLeft-enter-from, .slideLeft-leave-to {
@@ -635,7 +662,8 @@ export default {
   color: black;
   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
   text-align: bottom;
-  font-size: 16px;
+  font-size: 18px;
+  height: 4.2vh;
 }
 
 /* Phone Screen CSS */
@@ -653,26 +681,26 @@ export default {
   display: flex;
   justify-content: left;
   z-index: 3;
-}
+  }
 
   #searchBar{
     width: 100px;
+    color: white;
   }
 
   #searchContainer{
-  position: absolute;
-  top: 11%;
   left: 10px;
-  background-color: #ffffff;
   width: 120px;
   height: 40px;
-  z-index: 3;
   display: flex;
   justify-content: center;
   align-items: center;
-  color: black;
+  
-  box-shadow: 0 0 5px 2px #6e757dbe;
+  }
-  border-radius: 6%;
+
-}
+  .slideLeft-enter-from, .slideLeft-leave-to {
+    opacity: 0;
+    transform: translateX(-750px);
+  }
 }
 </style>