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

Extend operations handled by functions

Browse Source
This commit is contained in:
Conor McNamara
2023-03-27 20:21:10 +01:00
parent 789479cc99
commit dc25571c4d
4 changed files with 142 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/components/TrainSidebar.vue
View File

@ -3,7 +3,7 @@
<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>
<p id="originDiv">Origin:<br> {{ store.selectedTrain["Origin"][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">
@ -14,7 +14,7 @@
<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>
<p id="destinationDiv">Destination:<br> {{ getDestination(store.selectedTrain["PublicMessage"][0]) }}</p>
<p id="destinationDiv">Destination:<br> {{ store.selectedTrain["Destination"][0] }}</p>
</div>
<div id="sidebarDiv">
@ -49,6 +49,13 @@
<p id="directionP"><span style="color:grey; font-size: 14px;">Direction:</span><br>{{ store.selectedTrain["Direction"][0] }}</p>
</div>
<div v-if="store.selectedTrain['TrainStatus'][0] != 'N'" id="punctualityDiv">
<div id="punctualityIcon">
<img id="punctualityImage" src="../assets/publicMessageIcon.png">
</div>
<p id="punctualityP"><span style="color:grey; font-size: 14px;">Punctuality:</span><br>{{ store.selectedTrain["Punctuality"][0] }}</p>
</div>
<div id="publicMessageDiv">
<div id="publicMessageIcon">
<img id="publicMessageImage" src="../assets/publicMessageIcon.png">
@ -86,19 +93,6 @@ 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") {
@ -112,7 +106,7 @@ export default {
// method that returns the type of train (either "Train" or "DART")
getTrainType() {
return store.selectedTrain["TrainType"][0];
},
}
}
}
</script>
@ -130,6 +124,7 @@ export default {
background-color: rgb(214, 214, 214);
box-shadow: 0 0 5px 2px rgb(190, 190, 190);
}
#sidebarDiv{
position: absolute;
height: 80%;
@ -137,11 +132,13 @@ export default {
color: rgb(0, 0, 0);
padding-top: 10px;
}
.headerImage{
height: 100%;
width: 100%;
padding: 10px;
}
#imageDiv{
background-color: rgb(230, 230, 230);
border-radius: 50%;
@ -157,6 +154,7 @@ export default {
right:10px;
z-index: 5;
}
#xButton:hover{
color:red;
}
@ -168,6 +166,7 @@ export default {
align-self: center;
padding-top: 3%;
}
#originDiv{
order:0;
}
@ -178,8 +177,7 @@ export default {
/* Sidebar Section Divs */
#typeDiv, #dateDiv, #positionDiv, #directionDiv, #publicMessageDiv{
#typeDiv, #dateDiv, #positionDiv, #directionDiv, #publicMessageDiv, #punctualityDiv{
background-color: rgb(230, 230, 230);
height: 12%;
position: absolute;
@ -187,7 +185,7 @@ export default {
width:100%;
}
#typeIcon, #dateIcon, #positionIcon, #directionIcon, #publicMessageIcon{
#typeIcon, #dateIcon, #positionIcon, #directionIcon, #publicMessageIcon, #punctualityIcon{
background-color: rgb(214, 214, 214);
width:20%;
height: 100%;
@ -201,7 +199,7 @@ export default {
align-items: center;
}
#typeP, #dateP, #longP, #latP, #directionP, #publicMessageP{
#typeP, #dateP, #longP, #latP, #directionP, #publicMessageP, #punctualityP{
font-size: 16px;
position: relative;
bottom: 2px;
@ -226,6 +224,7 @@ export default {
#typeImage{
width: 70%;
}
#dateImage, #positionImage, #directionImage{
padding-top: 2px;
padding-bottom: 2px;
@ -241,13 +240,12 @@ export default {
#dateDiv{top: 60px;}
#positionDiv{top: 110px;}
#directionDiv{top: 160px;}
#punctualityDiv{top: 210px;}
#publicMessageDiv{
top:210px;
top:260px;
height: 40%;
}
@media screen and (max-width: 850px) {
.headerImage{
height: 100%;

24
src/pages/InsightsPage.vue
View File

@ -45,7 +45,8 @@
<table>
<div style="left:3px; top:3px;" class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" v-model="showTopEarliestLatest"/>
<label class="form-check-label" for="showTopEarliestLatest">Show All Train Entries</label>
<label v-if="showTopEarliestLatest" class="form-check-label" for="showTopEarliestLatest">Showing All Trains</label>
<label v-else class="form-check-label" for="showTopEarliestLatest">Showing Top 3 Earliest/Latest Trains</label>
</div>
<thead>
<tr>
@ -62,8 +63,8 @@
<td v-if="train.time > 0"><span style="color: #fc1919;">{{ train.time }} mins late</span></td>
<td v-else><span style="color: rgb(129, 213, 3);">{{ train.time * -1}} mins early</span></td>
<td>{{ this.rawData[train.jsonIndex]["TrainType"][0] }}</td>
<td>{{ getOrigin(this.rawData[train.jsonIndex]["PublicMessage"][0]) }}</td>
<td>{{ getDestination(this.rawData[train.jsonIndex]["PublicMessage"][0]) }}</td>
<td>{{ this.rawData[train.jsonIndex]["Origin"][0] }}</td>
<td>{{ this.rawData[train.jsonIndex]["Destination"][0] }}</td>
</tr>
</tbody>
@ -73,8 +74,8 @@
<td v-if="train.time > 0"><span style="color: #fc1919;">{{ train.time }} mins late</span></td>
<td v-else><span style="color: rgb(129, 213, 3);">{{ train.time * -1}} mins early</span></td>
<td>{{ this.rawData[train.jsonIndex]["TrainType"][0] }}</td>
<td>{{ getOrigin(this.rawData[train.jsonIndex]["PublicMessage"][0]) }}</td>
<td>{{ getDestination(this.rawData[train.jsonIndex]["PublicMessage"][0]) }}</td>
<td>{{ this.rawData[train.jsonIndex]["Origin"][0] }}</td>
<td>{{ this.rawData[train.jsonIndex]["Destination"][0] }}</td>
</tr>
</tbody>
</table>
@ -158,19 +159,6 @@ export default {
this.toast()
},
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);
},
postTrainAndStationData() {
const functions = getFunctions(app);
let host = window.location.hostname

7
src/pages/MapPage.vue
View File

@ -434,8 +434,7 @@ export default {
if (train["TrainType"][0] == "Train") insights["numTrains"] += 1;
else if (train["TrainType"][0] == "DART") insights["numDarts"] += 1;
// filter out \n in public messages
train["PublicMessage"][0] = train["PublicMessage"][0].replace(/\\n/g, ". ");
let publicMessage = train["PublicMessage"][0];
currentMessages.push(publicMessage);
@ -662,8 +661,8 @@ export default {
color: black;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
text-align: bottom;
font-size: 18px;
height: 4.2vh;
font-size: 16.5px;
height: 4vh;
}
/* Phone Screen CSS */