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

Merge branch 'main' into colouredSidebar

Browse Source
This commit is contained in:
Conor McNamara
2023-03-16 19:19:58 +00:00
committed by GitHub
parent 33c2bbb832 45987bb103
commit 155cb084ce
10 changed files with 319 additions and 204 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Navbar.vue
View File

@ -34,6 +34,7 @@
<script>
import app from "../api/firebase"
import { getAuth, onAuthStateChanged, signOut } from "firebase/auth"
import { store } from '../store/store'
export default {
name: "Navbar",
@ -49,6 +50,7 @@ export default {
const auth = getAuth(app);
onAuthStateChanged(auth, (user) => {
user ? this.isLoggedIn = true : this.isLoggedIn = false
store.setLoginStatus(this.isLoggedIn)
})
},

130
src/pages/AccountPage.vue
View File

@ -6,30 +6,31 @@
<h3>Enter your current password to edit account settings</h3>
<input type="password" v-model="currentPassword" placeholder="Enter existing password">
<h3>Send a password reset email</h3>
<input @click="resetPasswordEmail" type="submit" name="" value="Send Password reset email">
<input @click="resetPasswordEmail()" type="submit" name="" value="Send Password reset email">
<h3>Change email</h3>
<input type="email" v-model="newEmail" aria-describedby="emailHelp" placeholder="Enter new email">
<input @click="updateUserEmail" type="submit" name="" value="Update Email">
<input @click="updateUserEmail()" type="submit" name="" value="Update Email">
<h3>Change password</h3>
<input type="password" v-model="newPassword" placeholder="Enter new password">
<input @click="updateUserPassword" type="submit" name="" value="Update Password">
<input @click="updateUserPassword()" type="submit" name="" value="Update Password">
<h3>Delete account</h3>
<input @click="deleteUserAccount" type="submit" name="" value="Delete Account">
</div>
<input @click="deleteUserAccount()" type="submit" name="" value="Delete Account">
<p v-if="missingCredentials">Missing credentials to complete this action</p>
<p v-if="displayFirebaseSuccessMsg">{{ FirebaseSuccessMsg }}</p>
<p v-if="displayFirebaseError">{{ FirebaseError }}</p>
<h3>Delete filter preferences data</h3>
<button @click="deleteUserPreferences()">Delete preferences</button>
</div>
</template>
<script>
import Navbar from '../components/Navbar.vue'
import app from '../api/firebase'
import { getFunctions, httpsCallable, connectFunctionsEmulator } from "firebase/functions"
import { getAuth, updateEmail, updatePassword, deleteUser, reauthenticateWithCredential, EmailAuthProvider, sendPasswordResetEmail } from "firebase/auth";
import { createToast } from 'mosha-vue-toastify';
import 'mosha-vue-toastify/dist/style.css'
import Navbar from '../components/Navbar.vue'
import app from '../api/firebase'
const auth = getAuth();
export default {
@ -40,52 +41,48 @@ export default {
},
data() {
const toast = () => {
createToast(this.toastMessage, {
hideProgressBar: true,
timeout: 4000,
toastBackgroundColor: this.toastBackground
})
}
return {
user: null,
newEmail: "",
newPassword: "",
currentPassword: "",
displayFirebaseSuccessMsg: false,
FirebaseSuccessMsg: "",
displayFirebaseError: false,
FirebaseError: "",
toastMessage: "",
toastBackground: "",
reAuthSuccessful: false,
missingCredentials: false
toast
}
},
created() {
this.user = auth.currentUser
const functions = getFunctions(app)
let host = window.location.hostname
if (host === '127.0.0.1' || host === 'localhost') {
connectFunctionsEmulator(functions, host, 5001);
}
const secureFunction = httpsCallable(functions, 'securefunction')
secureFunction().then((response) => {
console.log(response);
})
},
methods: {
showToast(message, backgroundColour) {
this.toastMessage = message
this.toastBackground = backgroundColour
this.toast()
},
async authenticateUser(password) {
var credential = await EmailAuthProvider.credential(user.email, password)
await reauthenticateWithCredential(user, credential).then(() => {
var credential = await EmailAuthProvider.credential(this.user.email, password)
await reauthenticateWithCredential(this.user, credential).then(() => {
this.reAuthSuccessful = true
})
.catch((error) => {
this.reAuthSuccessful = false
this.FirebaseError = error.message
this.displayFirebaseError = true
this.showToast(error.message, "red")
})
},
resetMessages() {
this.missingCredentials = false
this.displayFirebaseError = false
this.displayFirebaseSuccessMsg = false
},
resetCredentials() {
this.newEmail = ""
this.newPassword = ""
@ -94,75 +91,94 @@ export default {
},
updateUserEmail() {
this.resetMessages()
if (!this.newEmail || !this.currentPassword) {
this.missingCredentials = true
this.showToast("Missing password input", "red")
return
}
this.authenticateUser(this.currentPassword).then(() => {
if (!this.reAuthSuccessful) return
updateEmail(this.user, this.newEmail).then(() => {
// might need to reset user here
this.resetCredentials()
this.FirebaseSuccessMsg = "Email updated"
this.displayFirebaseSuccessMsg = true
this.showToast("Email successfully updated", "green")
})
.catch((error) => {
this.FirebaseError = error.message
this.displayFirebaseError = true
this.showToast(error.message, "red")
})
})
},
updateUserPassword() {
this.resetMessages()
if (!this.newPassword || !this.currentPassword) {
this.missingCredentials = true
this.showToast("Missing password input", "red")
return
}
this.authenticateUser(this.currentPassword).then(() => {
if (!this.reAuthSuccessful) return
updatePassword(this.user, this.newPassword).then(() => {
this.resetCredentials()
this.FirebaseSuccessMsg = "Password updated"
this.displayFirebaseSuccessMsg = true
this.showToast("Password successfully updated", "green")
})
.catch((error) => {
this.FirebaseError = error.message
this.displayFirebaseError = true
this.showToast(error.message, "red")
})
})
},
deleteUserAccount() {
this.resetMessages()
if (!this.currentPassword) {
this.missingCredentials = true
this.showToast("Missing password input", "red")
return
}
this.authenticateUser(this.currentPassword).then(() => {
if (!this.reAuthSuccessful) return
deleteUser(this.user).then(() => {
this.resetCredentials()
this.FirebaseSuccessMsg = "Account deleted"
this.displayFirebaseSuccessMsg = true
this.showToast("Account successfully deleted", "green")
this.$router.push({path:'/'})
})
.catch((error) => {
this.FirebaseError = error.message
this.displayFirebaseError = true
this.showToast(error.message, "red")
})
})
},
resetPasswordEmail() {
sendPasswordResetEmail(auth, this.user.email).then(() => {
this.FirebaseSuccessMsg = "Reset password email sent"
this.displayFirebaseSuccessMsg = true
this.showToast("Reset password email sent", "green")
})
.catch((error) => {
this.FirebaseError = error.message
this.displayFirebaseError = true
this.showToast(error.message, "red")
})
},
deleteUserPreferences() {
if (!this.currentPassword) {
this.showToast("Missing password input", "red")
return
}
this.authenticateUser(this.currentPassword).then(() => {
if (!this.reAuthSuccessful) return
const functions = getFunctions(app)
let host = window.location.hostname
if (host === '127.0.0.1' || host === 'localhost') {
connectFunctionsEmulator(functions, host, 5001);
}
const deletePreferencesData = httpsCallable(functions, 'deletePreferences')
deletePreferencesData().then(() => {
this.resetCredentials()
this.showToast("Successfully deleted filter preferences", "green")
})
.catch((error) => {
this.showToast(error.message, "red")
})
})
.catch((error) => {
this.showToast(error.message, "red")
})
}
}

45
src/pages/LoginPage.vue
View File

@ -22,15 +22,14 @@
<a @click="forgotPassword = !forgotPassword; this.email = ''">Go back</a>
</div>
</div>
<p v-if="displayFirebaseError">{{ FirebaseError }}</p>
<p v-if="displayFirebaseSuccessMsg">{{ FirebaseSuccessMsg }}</p>
</div>
</template>
<script>
import app from '../api/firebase';
import { getAuth, signInWithEmailAndPassword, sendPasswordResetEmail } from "firebase/auth"
import { createToast } from 'mosha-vue-toastify';
import 'mosha-vue-toastify/dist/style.css'
import Navbar from '../components/Navbar.vue'
const auth = getAuth()
@ -38,14 +37,21 @@ export default {
name: "LoginPage",
data() {
const toast = () => {
createToast(this.toastMessage, {
hideProgressBar: true,
timeout: 4000,
toastBackgroundColor: this.toastBackground
})
}
return {
email: "",
password: "",
displayFirebaseError: false,
FirebaseError: "",
displayFirebaseSuccessMsg: false,
FirebaseSuccessMsg: "",
forgotPassword: false
toastMessage: "",
toastBackground: "",
forgotPassword: false,
toast
}
},
@ -54,29 +60,30 @@ export default {
},
methods: {
showToast(message, backgroundColour) {
this.toastMessage = message
this.toastBackground = backgroundColour
this.toast()
},
login() {
this.displayFirebaseError = false
const auth = getAuth(app)
signInWithEmailAndPassword(auth, this.email, this.password)
.then((userCredential) => {
const user = userCredential.user
this.$router.push({path:'/account'})
signInWithEmailAndPassword(auth, this.email, this.password).then(() => {
this.showToast("Logged in successfully", "green")
this.$router.push({path:'/'})
})
.catch((error) => {
this.FirebaseError = error.message
this.displayFirebaseError = true
this.showToast(error.message, "red")
})
},
resetPasswordEmail() {
sendPasswordResetEmail(auth, this.email).then(() => {
this.FirebaseSuccessMsg = "Reset password email sent"
this.displayFirebaseSuccessMsg = true
this.showToast("Reset password email sent", "green")
this.email = ""
})
.catch((error) => {
this.FirebaseError = error.message
this.displayFirebaseError = true
this.showToast(error.message, "red")
})
}
}

267
src/pages/MapPage.vue
View File

@ -1,14 +1,14 @@
<template>
<Navbar />
<nav class="navbar navbar-light bg-light">
<div class="container-fluid" @change="decideShowStations();">
<nav v-if="this.trainCoordinates.length>0" class="navbar navbar-light bg-light">
<div class="container-fluid" @change="decideShowStations()">
<input type="checkbox" id="showMainlandStations" v-model="showMainlandStations"/>
<label for="showMainlandStations">Show Mainland Stations</label>
<input type="checkbox" id="showDARTStations" v-model="showDARTStations"/>
<label for="showDARTStations">Show DART Stations</label>
</div>
<div class="container-fluid" @change="decideShowTrains();">
<div class="container-fluid" @change="decideShowTrains()">
<input type="checkbox" id="showLate" v-model="showLate"/>
<label for="showLate">Show Late Trains</label>
<input type="checkbox" id="showOnTime" v-model="showOnTime"/>
@ -24,6 +24,8 @@
<input type="checkbox" id="showNotYetRunning" v-model="showNotYetRunning"/>
<label for="showNotYetRunning">Show Not-Yet Running Trains</label>
</div>
<button v-if="store.loggedIn" @click="postPreferences()">Save Preferences</button>
</nav>
<transition id="sidebar" name="slideLeft">
@ -43,7 +45,7 @@
<!-- train overlay -->
<template v-for="coordinate, i in trainCoordinates" :position="inline-block">
<ol-overlay v-if="showTrains[i]" :position="coordinate" :positioning="center-center" :offset="[-14,-16]">
<ol-overlay v-if="showTrains[i]" :position="coordinate" :offset="[-14,-16]">
<div class="overlay-content" @click="getSelectedTrain(i)">
<div v-if="getTrainType(i) === 'DART'">
<img v-if="isTrainRunning(i) && isTrainLate(i)" src="../assets/red-train-tram-solid.png" class="trainMapIcon" alt="Late DART Icon">
@ -61,7 +63,7 @@
<!-- station overlay -->
<template v-for="coordinate, i in stationCoordinates" :position="inline-block">
<ol-overlay v-if="showStations[i]" :position="coordinate" :positioning="center-center" :offset="[-14,-16]">
<ol-overlay v-if="showStations[i]" :position="coordinate" :offset="[-14,-16]">
<div class="overlay-content" @click="getSelectedStation(i)">
<img src="../assets/station.png" class="stationMapIcon" alt="Station Icon">
</div>
@ -79,9 +81,10 @@
<script>
import { store } from '../store/store';
import { ref } from 'vue';
import { fromLonLat, toLonLat } from 'ol/proj.js';
import { fromLonLat } from 'ol/proj.js';
import { getFunctions, httpsCallable, connectFunctionsEmulator } from "firebase/functions";
import { createToast } from 'mosha-vue-toastify';
import 'mosha-vue-toastify/dist/style.css'
import app from '../api/firebase';
import Navbar from '../components/Navbar.vue';
import MarqueeText from 'vue-marquee-text-component';
@ -92,58 +95,44 @@ export default {
name: "MapPage",
data() {
const center = ref(fromLonLat([-7.5029786, 53.4494762]));
const projection = ref('EPSG:3857');
const zoom = ref(7);
const rotation = ref(0);
const radius = ref(10);
const strokeWidth = ref(1);
const strokeColor = ref('black');
const fillColor = ref('red');
const toast = () => {
createToast(this.toastMessage, {
hideProgressBar: true,
timeout: 4000,
toastBackgroundColor: this.toastBackground
})
}
let showTrains = [];
let showStations = [];
return {
center: fromLonLat([-7.5029786, 53.4494762]),
projection: 'EPSG:3857',
zoom: 7,
rotation: 0,
let showMainlandStations = true;
let showDARTStations = true;
let showLate = true;
let showOnTime = true;
let showMainland = true;
let showDART = true;
let showRunning = true;
let showTerminated = true;
let showNotYetRunning = true;
showTrains: [],
showStations: [],
trainCoordinates: [],
stationCoordinates: [],
allTrains: {},
allStations: {},
publicMessages: [],
isPaused: false,
store,
return {
center,
projection,
zoom,
rotation,
radius,
strokeWidth,
strokeColor,
fillColor,
toastMessage: "",
toastBackground: "",
toast,
showTrains: [],
showStations: [],
trainCoordinates: [],
stationCoordinates: [],
allTrains: {},
allStations: {},
publicMessages: [],
isPaused: false,
store,
showMainlandStations,
showDARTStations,
showLate,
showOnTime,
showMainland,
showDART,
showRunning,
showTerminated,
showNotYetRunning
}
showMainlandStations: true,
showDARTStations: true,
showLate: true,
showOnTime: true,
showMainland: true,
showDART: true,
showRunning: true,
showTerminated: true,
showNotYetRunning: true,
}
},
components: {
@ -161,38 +150,101 @@ export default {
else {
this.getTrainAndStationData();
}
// request new data every 60 seconds
// window.setInterval(this.getLiveTrainData, 60000);
// window.setInterval(this.getTrainAndStationData, 60000);
},
methods: {
showToast(message, backgroundColour) {
this.toastMessage = message
this.toastBackground = backgroundColour
this.toast()
},
getPreferences() {
if (!store.loggedIn) return
const functions = getFunctions(app);
let host = window.location.hostname
if (host === '127.0.0.1' || host == 'localhost') {
connectFunctionsEmulator(functions, host, 5001);
}
const getPreferencesData = httpsCallable(functions, 'getPreferences')
getPreferencesData().then((response) => {
if (response.data.data) {
this.showMainlandStations = response.data.data["showMainlandStations"]
this.showDARTStations = response.data.data["showDARTStations"]
this.showLate = response.data.data["showLate"]
this.showOnTime = response.data.data["showOnTime"]
this.showMainland = response.data.data["showMainland"]
this.showDART = response.data.data["showDART"]
this.showRunning = response.data.data["showRunning"]
this.showTerminated = response.data.data["showTerminated"]
this.showNotYetRunning = response.data.data["showNotYetRunning"]
// update the map with the user's preferences
this.decideShowStations()
this.decideShowTrains()
}
})
.catch((error) => {
console.log(error.message)
})
},
postPreferences() {
if (!store.loggedIn) return
let preferences = {
"showMainlandStations": this.showMainlandStations,
"showDARTStations": this.showDARTStations,
"showLate": this.showLate,
"showOnTime": this.showOnTime,
"showMainland": this.showMainland,
"showDART": this.showDART,
"showRunning": this.showRunning,
"showTerminated": this.showTerminated,
"showNotYetRunning": this.showNotYetRunning
}
const functions = getFunctions(app);
let host = window.location.hostname
if (host === '127.0.0.1' || host == 'localhost') {
connectFunctionsEmulator(functions, host, 5001);
}
const postPreferencesData = httpsCallable(functions, 'postPreferences')
postPreferencesData(preferences).then(() => {
this.showToast("Saved preferences successfully", "green")
})
.catch((error) => {
this.showToast(error.message, "red")
})
},
// method to determine whether or not to show each train
decideShowTrains() {
for (let i = 0; i < this.showTrains.length; i++) {
// determine whether or not the tain is a DART or not
let isDART = this.getTrainType(i) == "DART";
if ((this.showRunning && this.allTrains[i]["TrainStatus"][0] == "R") || (this.showTerminated && this.allTrains[i]["TrainStatus"][0] == "T") || this.showNotYetRunning && this.allTrains[i]["TrainStatus"][0] == "N") {
if ((this.showDART && isDART) || (this.showMainland && !isDART)) {
this.showTrains[i] = (this.showLate && this.isTrainLate(i)) || (this.showOnTime && !this.isTrainLate(i)); // || (this.showMainland && !isDART) || (this.showDART && isDART);
}
else {
this.showTrains[i] = false;
}
}
else {
this.showTrains[i] = false;
}
}
for (var i=0; i<this.showTrains.length; i++) {
let isDART = this.getTrainType(i) == "DART";
if ((this.showRunning && this.allTrains[i]["TrainStatus"][0] == "R") || (this.showTerminated && this.allTrains[i]["TrainStatus"][0] == "T") || this.showNotYetRunning && this.allTrains[i]["TrainStatus"][0] == "N") {
if ((this.showDART && isDART) || (this.showMainland && !isDART)) {
this.showTrains[i] = (this.showLate && this.isTrainLate(i)) || (this.showOnTime && !this.isTrainLate(i));
}
else {
this.showTrains[i] = false;
}
}
else {
this.showTrains[i] = false;
}
}
},
// method to determine whether or not to show each station
decideShowStations() {
for (let i = 0; i < this.showStations.length; i++) {
let isDARTStation = this.allStations[i]["StationType"][0] == "DART";
this.showStations[i] = (this.showDARTStations && isDARTStation) || (this.showMainlandStations && !isDARTStation);
}
for (var i=0; i<this.showStations.length; i++) {
let isDARTStation = this.getStationType(i) == "DART";
this.showStations[i] = (this.showDARTStations && isDARTStation) || (this.showMainlandStations && !isDARTStation);
}
},
// method to display a selected train
@ -226,12 +278,8 @@ export default {
// method to determine whether or not a selected train is running
isTrainRunning(i) {
if (this.allTrains[i]["TrainStatus"][0] == "R") {
return true;
}
else {
return false;
}
if (this.allTrains[i]["TrainStatus"][0] == "R") return true;
else return false;
},
// method that returns the type of train (either "Train" or "DART")
@ -239,6 +287,11 @@ export default {
return this.allTrains[i]["TrainType"][0];
},
// method that returns the type of station (either "Train" or "DART")
getStationType(i) {
return this.allStations[i]["StationType"][0]
},
// method to fetch live train and station data from the database
getTrainAndStationData() {
const functions = getFunctions(app);
@ -257,15 +310,16 @@ export default {
try {
if (!response.data) throw new Error("Error fetching live train data from the database");
var insights = {
"totalNumTrains": 0,
"numRunningTrains": 0,
"numLateRunningTrains": 0,
"numTrains": 0,
"numDarts": 0,
"totalNumStations": 0,
"numTrainStations": 0,
"numDartStations": 0
};
"totalNumTrains": 0,
"numRunningTrains": 0,
"numLateRunningTrains": 0,
"numTrains": 0,
"numDarts": 0,
"totalNumStations": 0,
"numTrainStations": 0,
"numDartStations": 0
};
var unorderedTrains = [];
var currentMessages = [];
var latest = null;
@ -277,13 +331,11 @@ export default {
for (var i=0; i<response.data.length; i++) {
let train = response.data[i];
this.allTrains[i] = train;
// filling showTrains witht the default value true
this.showTrains[i] = true;
this.trainCoordinates[i] = ref(fromLonLat([train["TrainLongitude"][0], train["TrainLatitude"][0]]))
this.trainCoordinates[i] = fromLonLat([train["TrainLongitude"][0], train["TrainLatitude"][0]])
insights["totalNumTrains"] += 1
// filling showTrains with the default value - true
this.showTrains[i] = true;
if (train["TrainType"][0] == "Train") insights["numTrains"] += 1;
else if (train["TrainType"][0] == "DART") insights["numDarts"] += 1;
@ -314,7 +366,6 @@ export default {
// train is early or ontime
else {
if (!earliest) earliest = train;
// check for a new earliest train (early trains are -x mins late)
if (num < currEarliestTime) {
earliest = train;
@ -339,26 +390,27 @@ export default {
const getStationData = httpsCallable(functions, 'getStationData');
getStationData().then((response) => {
if (!response.data) throw new Error("Error fetching station from the database");
for (var i=0; i<response.data.length; i++) {
let station = response.data[i];
this.allStations[i] = station;
this.stationCoordinates[i] = fromLonLat([station["StationLongitude"][0], station["StationLatitude"][0]])
insights["totalNumStations"] += 1
// setting the station to show on the map by default - true
this.showStations[i] = true;
this.stationCoordinates[i] = ref(fromLonLat([station["StationLongitude"][0], station["StationLatitude"][0]]))
insights["totalNumStations"] += 1
if (station["StationType"][0] == "DART") insights["numDartStations"] += 1;
else if (station["StationType"][0] == "Train") insights["numTrainStations"] += 1;
}
store.setInsights(insights);
loader.hide();
// request the user's preferences
this.getPreferences()
})
}
catch (error) {
console.log(error)
console.log(error.message)
loader.hide();
}
})
@ -371,12 +423,11 @@ export default {
if (host === '127.0.0.1' || host === 'localhost') {
connectFunctionsEmulator(functions, host, 5001);
}
// post live train data
const postTrainData = httpsCallable(functions, 'postLiveTrainData');
postTrainData().then((response) => {
// post station data
postTrainData().then(() => {
const postStationData = httpsCallable(functions, 'postStationData');
postStationData().then((reponse) => {
postStationData().then(() => {
this.getTrainAndStationData()
})
})
@ -462,4 +513,4 @@ export default {
text-align: bottom;
font-size: 16px;
}
</style>
</style>

31
src/pages/SignUpPage.vue
View File

@ -19,17 +19,28 @@
<script>
import app from '../api/firebase';
import {getAuth, createUserWithEmailAndPassword} from "firebase/auth"
import { createToast } from 'mosha-vue-toastify';
import 'mosha-vue-toastify/dist/style.css'
import Navbar from '../components/Navbar.vue'
export default {
name: "SignupPage",
data() {
const toast = () => {
createToast(this.toastMessage, {
hideProgressBar: true,
timeout: 4000,
toastBackgroundColor: this.toastBackground
})
}
return {
email: "",
password: "",
displayFirebaseError: false,
FirebaseError: ""
toastMessage: "",
toastBackground: "",
toast
}
},
@ -38,17 +49,21 @@ export default {
},
methods: {
showToast(message, backgroundColour) {
this.toastMessage = message
this.toastBackground = backgroundColour
this.toast()
},
signup() {
this.displayFirebaseError = false;
const auth = getAuth(app)
createUserWithEmailAndPassword(auth, this.email, this.password)
.then((userCredential) => {
const user = userCredential.user
this.$router.push({path:'/account'})
createUserWithEmailAndPassword(auth, this.email, this.password).then(() => {
this.showToast("Signed up successfully", "green")
this.$router.push({path:'/'})
})
.catch((error) => {
this.FirebaseError = error.message
this.displayFirebaseError = true
this.showToast(error.message, "red")
})
}
}

1
src/router/routes.js
View File

@ -2,7 +2,6 @@ import {getAuth, onAuthStateChanged} from "firebase/auth"
import app from '../api/firebase';
function isAuth(to, from, next) {
console.log("Checking auth")
const auth = getAuth(app)
onAuthStateChanged(auth, (user) => {
// user is logged in, continue to page

5
src/store/store.js
View File

@ -10,6 +10,7 @@ export const store = reactive({
rawData: {},
displaySelectedTrain: false,
displayedSelectedStation: false,
loggedIn: false,
setInsights(insights) {
this.insights = insights
@ -49,5 +50,9 @@ export const store = reactive({
setDisplaySelectedStation(bool) {
this.displaySelectedStation = bool
},
setLoginStatus(bool) {
this.loggedIn = bool
}
})