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

Merge pull request #56 from 0hAodha/404error

Browse Source 
Implement 404 handling
This commit is contained in:
Conor McNamara
2023-03-17 11:50:24 +00:00
committed by GitHub
parent d9d1dfa363 242dbd862c
commit 9a600b7d4a
5 changed files with 68 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
dist/index.html vendored
View File

@ -10,6 +10,6 @@
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body> </body>
</html> </html>

17
src/pages/404Page.vue Normal file
View File

@ -0,0 +1,17 @@
<template>
<Navbar />
<h1>404 - You've been derailed :(</h1>
</template>
<script>
import Navbar from '../components/Navbar.vue'
export default {
name: "404Page",
components: {
Navbar
}
}
</script>
<style scoped>
</style>

4
src/pages/InsightsPage.vue
View File

@ -14,7 +14,7 @@
<pieChart id="trainPie" /> <pieChart id="trainPie" />
</div> </div>
</div> </div>
<hr> <hr>
<p>Number of actively running trains: {{ this.insights["numRunningTrains"] }}</p> <p>Number of actively running trains: {{ this.insights["numRunningTrains"] }}</p>
<p>Percentage late: {{ this.insights["percentageLate"] }}%</p> <p>Percentage late: {{ this.insights["percentageLate"] }}%</p>
@ -100,7 +100,7 @@ export default {
color: black; color: black;
padding-left: 10px; padding-left: 10px;
width:80%; width:80%;
background-color: antiquewhite; background-color: rgb(250, 235, 215);
} }
#trainTotal, #stationTotal { #trainTotal, #stationTotal {

63
src/pages/MapPage.vue
View File

@ -3,54 +3,54 @@
<div id="preferenceDropdown" class="dropdown"> <div id="preferenceDropdown" class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
Preferences Map Filters
</button> </button>
<div id="dropMenu" class="dropdown-menu" aria-labelledby="dropdownMenuButton1"> <div style="padding-bottom: 7px;" id="dropMenu" class="dropdown-menu" aria-labelledby="dropdownMenuButton1" v-on:click.stop="handleClick">
<div id="prefHeader">~SHOW~</div>
<div class="container-fluid" @change="decideShowStations();"> <div class="container-fluid" @change="decideShowStations();">
<div class="form-check form-switch"> <div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="showMainlandStations" v-model="showMainlandStations"/> <input class="form-check-input" type="checkbox" role="switch" id="showMainlandStations" v-model="showMainlandStations"/>
<label class="form-check-label" for="showMainlandStations">Show Mainland Stations</label> <label class="form-check-label" for="showMainlandStations">Mainland Stations</label>
</div> </div>
<div class="form-check form-switch"> <div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="showDARTStations" v-model="showDARTStations"/> <input class="form-check-input" type="checkbox" role="switch" id="showDARTStations" v-model="showDARTStations"/>
<label class="form-check-label" for="showMainlandStations">Show Mainland Stations</label> <label class="form-check-label" for="showDARTStations">Dart Stations</label>
</div> </div>
</div> </div>
<div class="container-fluid" @change="decideShowTrains();"> <div class="container-fluid" @change="decideShowTrains();">
<div class="form-check form-switch"> <div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="showLate" v-model="showLate"/> <input class="form-check-input" type="checkbox" role="switch" id="showLate" v-model="showLate"/>
<label class="form-check-label" for="showLate">Show Late Trains</label> <label class="form-check-label" for="showLate">Late Trains</label>
</div> </div>
<div class="form-check form-switch"> <div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="showOnTime" v-model="showOnTime"/> <input class="form-check-input" type="checkbox" role="switch" id="showOnTime" v-model="showOnTime"/>
<label class="form-check-label" for="showOnTime">Show On-Time Trains</label> <label class="form-check-label" for="showOnTime">On-Time Trains</label>
</div> </div>
<div class="form-check form-switch"> <div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="showMainland" v-model="showMainland"/> <input class="form-check-input" type="checkbox" role="switch" id="showMainland" v-model="showMainland"/>
<label class="form-check-label" for="showMainland">Show Mainland Trains</label> <label class="form-check-label" for="showMainland">Mainland Trains</label>
</div> </div>
<div class="form-check form-switch"> <div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="showDART" v-model="showDART"/> <input class="form-check-input" type="checkbox" role="switch" id="showDART" v-model="showDART"/>
<label class="form-check-label" for="showDart">Show DARTs</label> <label class="form-check-label" for="showDART">DARTs</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="showRunning" v-model="showRunning"/>
<label class="form-check-label" for="showRunning">Running Trains</label>
</div> </div>
<div class="form-check form-switch"> <div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="showTerminated" v-model="showTerminated"/> <input class="form-check-input" type="checkbox" role="switch" id="showTerminated" v-model="showTerminated"/>
<label class="form-check-label" for="showRunning">Show Running Trains</label> <label class="form-check-label" for="showTerminated">Terminated Trains</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="showTerminated" v-model="showTerminated"/>
<label class="form-check-label" for="showTerminated">Show Terminated Trains</label>
</div> </div>
<div class="form-check form-switch"> <div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="showNotYetRunning" v-model="showNotYetRunning"/> <input class="form-check-input" type="checkbox" role="switch" id="showNotYetRunning" v-model="showNotYetRunning"/>
<label class="form-check-label" for="showNotYetRunning">Show Not-Yet Running Trains</label> <label class="form-check-label" for="showNotYetRunning">Not-Yet Running Trains</label>
</div> </div>
</div> </div>
<button id="savePref" class="btn btn-outline-info" v-if="store.loggedIn" @click="postPreferences()">Save Preferences</button>
</div> </div>
</div> </div>
<button v-if="store.loggedIn" @click="postPreferences()">Save Preferences</button>
<transition id="sidebar" name="slideLeft"> <transition id="sidebar" name="slideLeft">
<div v-if="store.displaySelectedTrain && store.selectedTrain"> <div v-if="store.displaySelectedTrain && store.selectedTrain">
<TrainSidebar /> <TrainSidebar />
@ -164,7 +164,7 @@ export default {
TrainSidebar, TrainSidebar,
StationSidebar StationSidebar
}, },
created() { created() {
let host = window.location.hostname let host = window.location.hostname
if (host === '127.0.0.1' || host === 'localhost') { if (host === '127.0.0.1' || host === 'localhost') {
@ -184,6 +184,10 @@ export default {
this.toast() this.toast()
}, },
handleClick(e){
e.stopPropagation();
},
getPreferences() { getPreferences() {
if (!store.loggedIn) return if (!store.loggedIn) return
const functions = getFunctions(app); const functions = getFunctions(app);
@ -485,24 +489,31 @@ export default {
height: 19px; height: 19px;
cursor: pointer; cursor: pointer;
} }
#dropdownMenuButton1{ #dropdownMenuButton1 {
box-shadow: 0 0 5px 2px #6e757dbe; box-shadow: 0 0 5px 2px #6e757dbe;
} }
#dropMenu{ #dropMenu {
/*In case we want to edit dropdown menu*/ /*In case we want to edit dropdown menu*/
font-size: 15px; font-size: 14.6px;
} }
#preferenceDropdown{ #preferenceDropdown{
position: absolute; position: absolute;
z-index: 3; z-index: 3;
right: 1%; right: 1%;
top: 10%; top: 11%;
} }
#prefHeader{
font-size: 18px;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
text-align: center;
position: relative;
}
#sidebar{ #sidebar {
position: absolute; position: absolute;
height: 80%; height: 80%;
width: 20%; width: 20%;
@ -518,12 +529,18 @@ export default {
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif
} }
#savePref{
left:2%;
top: 2px;
width: 96%;
position: relative;
}
.slideLeft-enter-active, .slideLeft-leave-active { .slideLeft-enter-active, .slideLeft-leave-active {
transition: opacity .5s; transition: opacity .5s;
transition: all 0.8s; transition: all 0.8s;
} }
.slideLeft-enter-from, .slideLeft-leave-to{ .slideLeft-enter-from, .slideLeft-leave-to {
opacity: 0; opacity: 0;
transform: translateX(-100px); transform: translateX(-100px);
} }

12
src/router/routes.js
View File

@ -20,9 +20,11 @@ function loadPage(component) {
} }
export default [ export default [
{path: "/", component:loadPage("MapPage")}, { path: "/", component:loadPage("MapPage") },
{path: "/insights", component:loadPage("InsightsPage")}, { path: "/insights", component:loadPage("InsightsPage") },
{path: "/account", component:loadPage('AccountPage'), beforeEnter: isAuth}, { path: "/account", component:loadPage('AccountPage'), beforeEnter: isAuth },
{path: "/signup", component:loadPage('SignUpPage')}, { path: "/signup", component:loadPage('SignUpPage') },
{path: "/login", component:loadPage('LoginPage')}, { path: "/login", component:loadPage('LoginPage') },
{ path: "/404", component:loadPage('404Page') },
{ path: "/:catchAll(.*)", component:loadPage('404Page') }
] ]