Made sidebar into its own component

src/components/SidebarPanel.vue

@@ -1,13 +1,69 @@
 <template>
-<h1>test import</h1>
+<div id= "sidebarDiv">
+    <div id = "sidebarHeader">
+        <img id = "headerImage" src="../assets/train-solid.svg" alt="Train Icon">
+        <div v-on:click="store.setDisplay(false)" id="xButton">X</div>
+    </div>
+
+    <div id= "sidebarDiv">
+        <h2>Train Code: {{ store.selectedDataMap["TrainCode"] }}</h2>
+        <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>
+        <p id = "directionP">Direction: {{ store.selectedDataMap["Direction"] }}</p>
+        <p id = "messageP">Public Message: {{ store.selectedDataMap["PublicMessage"] }}</p>
+    </div>
+</div>
 </template>
 
 <script>
+import {store} from '../store/store'
 export default {
-    name: "SidebarPanel"
+    name: "SidebarPanel",
+
+    data() {
+        return {
+            store
+        }
+    }
 }
 </script>
 
 <style scoped>
+#sidebarHeader{
+  position: relative;
+  top:0%;
+  height: 15%;
+  width: 100%;
+  overflow: hidden;
+}
+
+#sidebarDiv{
+  position: absolute;
+  height: 80%;
+  width: 100%;
+  color: white;
+}
+
+#headerImage{
+  height: 80%;
+  width: auto;
+  overflow: hidden;
+  position: relative;
+  top: 10px;
+}
+
+#xButton{
+  font-size: 80%;
+  font-family: Georgia;
+  color: white;
+  position: absolute;
+  top:10px;
+  right:10px;
+}
+
+#xButton:hover{
+  color:red;
+}
 
 </style>

src/pages/MapPage.vue

@@ -4,21 +4,9 @@
 
 <!--Sidebar, fades out on click of X button-->
 <transition id="sidebar" name="slideLeft">
-<div v-if="this.display" id= "sidebarDiv">
+  <div v-if="store.display && store.selectedDataMap">
-    <div id = "sidebarHeader">
+    <SidebarPanel />
-        <img id = "headerImage" src="../assets/train-solid.svg" alt="Train Icon">
+  </div>
-        <div v-on:click="this.display = false" id="xButton">X</div>
-    </div>
-
-    <div id= "sidebarDiv">
-        <h2>Train Code: {{ selectedDataMap["TrainCode"] }}</h2>
-        <p id = "dateP">Date: {{ selectedDataMap["TrainDate"] }}</p>
-        <p id = "dateP">Status: {{ selectedDataMap["TrainStatus"] }}</p>
-        <p id = "dateP">Train Position - Long: {{ selectedDataMap["TrainLongitude"] }} Lat: {{ selectedDataMap["TrainLatitude"] }}</p>
-        <p id = "directionP">Direction: {{ selectedDataMap["Direction"] }}</p>
-        <p id = "messageP">Public Message: {{ selectedDataMap["PublicMessage"] }}</p>
-    </div>
-</div>
 </transition>
 
 <ol-map :loadTilesWhileAnimating="true" :loadTilesWhileInteracting="true" style="position:absolute; height:90.7vh; width:100%;">
@@ -54,6 +42,7 @@ import app from '../api/firebase';
 import { getFunctions, httpsCallable, connectFunctionsEmulator } from "firebase/functions";
 import Navbar from '../components/Navbar.vue'
 import MarqueeText from 'vue-marquee-text-component'
+import SidebarPanel from '../components/SidebarPanel.vue';
 
 export default {
     name: "MapPage",
@@ -81,8 +70,6 @@ export default {
             coordinates: [],
             dbLiveTrainData: [],
             allDataMap: {},
-            selectedDataMap: {},
-            display: false,
             store,
 
             publicMessages: [],
@@ -92,7 +79,8 @@ export default {
 
     components: {
       Navbar,
-      MarqueeText
+      MarqueeText,
+      SidebarPanel
     },
 
     created() {
@@ -110,8 +98,8 @@ export default {
     methods: {
         // method to assign a single train's data to the selected hashmap
         getSelectedTrain(i) {
-            this.display = true;
+          store.setSelectedDataMap(this.allDataMap[i]);
-            this.selectedDataMap = this.allDataMap[i];
+          store.setDisplay(true)
         },
 
         // method to determine whether or not a selected train is late 
@@ -255,6 +243,22 @@ export default {
   height: 32px;
 }
 
+#sidebar{
+  position: absolute;
+  height: 85%;
+  width: 20%;
+  left: 2%;
+  top: 12%;
+  z-index: 2;
+  text-align: center;
+  animation: gradient 15s ease infinite;
+  background: linear-gradient(45deg, #000000, #111111, #222222, #333333, #444444, #555555);
+  background-size: 400%, 400%;
+  box-shadow: 0 0 4px 2px #333333;
+  overflow: hidden;
+  font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif
+}
+
 .slideLeft-enter-active, .slideLeft-leave-active {
   transition: opacity .5s;
   transition: all 0.8s;
@@ -277,58 +281,6 @@ export default {
   }
 }
 
-#sidebar{
-  position: absolute;
-  height: 85%;
-  width: 20%;
-  left: 2%;
-  top: 12%;
-  z-index: 2;
-  text-align: center;
-  animation: gradient 15s ease infinite;
-  background: linear-gradient(45deg, #000000, #111111, #222222, #333333, #444444, #555555);
-  background-size: 400%, 400%;
-  box-shadow: 0 0 4px 2px #333333;
-  overflow: hidden;
-  font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif
-}
-
-#sidebarHeader{
-  position: relative;
-  top:0%;
-  height: 15%;
-  width: 100%;
-  overflow: hidden;
-}
-
-#sidebarDiv{
-  position: absolute;
-  height: 80%;
-  width: 100%;
-  color: white;
-}
-
-#headerImage{
-  height: 80%;
-  width: auto;
-  overflow: hidden;
-  position: relative;
-  top: 10px;
-}
-
-#xButton{
-  font-size: 80%;
-  font-family: Georgia;
-  color: white;
-  position: absolute;
-  top:10px;
-  right:10px;
-}
-
-#xButton:hover{
-  color:red;
-}
-
 #publicMessageTicker {
   z-index: 3;
   position: absolute;

src/store/store.js

@@ -5,25 +5,39 @@ export const store = reactive({
     latestTrain: {},
     earliestTrain: {},
     orderedTrains: [],
+    selectedDataMap: {},
     rawData: {},
+    display: false,
 
     setInsights(insights) {
         this.insights = insights
     },
+
     setLatestTrain(latestTrain) {
         this.latestTrain = latestTrain
     },
+
     setEarliestTrain(earliestTrain) {
         this.earliestTrain = earliestTrain
     },
+
     setRawData(rawData) {
         this.rawData = rawData
     },
+
     setOrderedTrains(unorderedTrains) {
         // sort in ascending order
         unorderedTrains.sort((a, b) => {
             return a.time - b.time
         })
         this.orderedTrains = unorderedTrains
+    },
+
+    setSelectedDataMap(selectedDataMap) {
+        this.selectedDataMap = selectedDataMap
+    },
+    
+    setDisplay(bool) {
+        this.display = bool
     }
 })