aindreas/traintracker
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Made sidebar into its own component

Browse Source
This commit is contained in:
J-Lennox10
2023-03-08 14:40:54 +00:00
parent de3b8add5e
commit 9712f5e583
3 changed files with 96 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
src/components/SidebarPanel.vue
View File

@ -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>

94
src/pages/MapPage.vue
View File

@ -4,20 +4,8 @@
<!--Sidebar, fades out on click of X button-->
<transition id="sidebar" name="slideLeft">
<div v-if="this.display" id= "sidebarDiv">
<div id = "sidebarHeader">
<img id = "headerImage" src="../assets/train-solid.svg" alt="Train Icon">
<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 v-if="store.display && store.selectedDataMap">
<SidebarPanel />
</div>
</transition>
@ -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;
this.selectedDataMap = this.allDataMap[i];
store.setSelectedDataMap(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;

14
src/store/store.js
View File

@ -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
}
})