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

Update insights and settings styles

Browse Source
This commit is contained in:
Conor McNamara
2023-03-22 20:43:25 +00:00
parent 937a78061b
commit d59ea2db3c
6 changed files with 71 additions and 231 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/pieChart.vue
View File

@ -1,9 +1,8 @@
<template>
<div v-if="trainChart">
<div v-if="trainChart" class="piechart">
<Pie :data="trainData" :options="chartOptions" />
</div>
<div v-if="!trainChart">
<div v-if="!trainChart" class="barchart">
<Pie :data="stationData" :options="chartOptions" />
</div>
@ -59,8 +58,7 @@ export default {
</script>
<style scoped>
div{
div {
width: 70%;
}
</style>

34
src/pages/AccountPage.vue
View File

@ -3,9 +3,9 @@
<div id="accountDiv">
<div id="mainDiv">
<h1>Account Settings</h1>
<p style="text-align:center" v-if="this.user">Your Email: <b>{{ this.user.email }}</b><br><span id="passReset" @click="resetPasswordEmail()">Send Password Reset Email</span></p>
<p style="text-align:center" v-if="this.user">Your email: <b>{{ this.user.email }}</b><br><span id="passReset" @click="resetPasswordEmail()">Send password reset email</span></p>
<h3>Enter Current Password to Edit Account Settings</h3>
<h3>Enter your current password to edit the below settings</h3>
<input v-if="showCurrentPassword" type="text" v-model="currentPassword" placeholder="Enter existing password">
<input v-else type="password" v-model="currentPassword" placeholder="Enter existing password">
<!-- <div id="imgDiv1"> -->
@ -205,28 +205,27 @@ export default {
<style scoped>
h1{
color:rgb(163, 163, 163);
h1 {
color:black;
text-align: center;
}
h3{
h3 {
font-size: 18px;
padding-top: 20px;
}
#passReset{
#passReset {
font-size: 17px;
text-decoration: underline;
color: #39d3fa;
}
#passReset:hover{
#passReset:hover {
color: #3993fa;
cursor: pointer;
}
#accountDiv{
#accountDiv {
position:absolute;
right:0px;
left:0px;
@ -238,37 +237,38 @@ h3{
justify-content: center;
}
#accountDiv div{
#accountDiv div {
position: inherit;
padding: 15px;
background-color: rgb(255, 255, 255);
width: 600px;
width: 45%;
height: 80%;
top:14%;
top: 14%;
text-align: left;
box-shadow: 0 0 8px 8px #b6b6b6;
box-shadow: 0 0 4px 4px #b6b6b6;
}
#emailUpdate, #passUpdate{
#emailUpdate, #passUpdate {
position: relative;
left:10px;
width: 26%;
}
input{
input {
border:none;
border-bottom: 1px solid #000000;
background: transparent;
outline: none;
}
#delAcc{
#delAcc {
position: absolute;
bottom: 10px;
left:10px;
}
#delPref{
#delPref {
position: absolute;
bottom: 10px;
left:160px;

83
src/pages/InsightsPage.vue
View File

@ -2,30 +2,28 @@
<Navbar />
<!-- Table to be shown on screen widths > 1000px -->
<div class="card-group">
<div class="card">
<h4 style="text-align:center;">Train Insights</h4>
<div v-if="readyToRender"><pieChart :id="stationPie" :trainChart="true"/></div>
<div v-if="readyToRender" class="piechart"><pieChart :id="stationPie" :trainChart="true"/></div>
<div class="card-body">
<h5 class="card-title">Train Data</h5>
<p class="card-text">Total number of trains: {{ this.insights["totalNumTrains"] }}</p>
<ul>
<li><p>Trains: {{ this.insights["numTrains"] }}</p></li>
<li><p>Darts: {{ this.insights["numDarts"] }}</p></li>
<li><p class="card-stats">Trains: {{ this.insights["numTrains"] }}</p></li>
<li><p class="card-stats">Darts: {{ this.insights["numDarts"] }}</p></li>
</ul>
</div>
</div>
<div class="card">
<h4 style="text-align:center;">Station Insights</h4>
<div v-if="readyToRender"><pieChart :id="stationPie" :trainChart="false"/></div>
<div v-if="readyToRender" class="piechart"><pieChart :id="stationPie" :trainChart="false"/></div>
<div class="card-body">
<h5 class="card-title">Station Data</h5>
<p class="card-text">Total number of stations: {{ this.insights["totalNumStations"] }}</p>
<ul>
<li><p>Trains: {{ this.insights["numTrainStations"] }}</p></li>
<li><p>Darts: {{ this.insights["numDartStations"] }}</p></li>
<li><p class="card-stats">Trains: {{ this.insights["numTrainStations"] }}</p></li>
<li><p class="card-stats">Darts: {{ this.insights["numDartStations"] }}</p></li>
</ul>
</div>
</div>
@ -36,28 +34,26 @@
<h5 class="card-title">Punctuality Data</h5>
<p class="card-text">Number of actively running trains: {{ this.insights["numRunningTrains"] }}</p>
<ul>
<li><p>Percentage late: {{ this.insights["percentageLate"] }}%</p></li>
<li><p>Percentage early or ontime: {{ this.insights["percentageNotLate"] }}%</p></li>
<li><p class="card-stats">Percentage late: {{ this.insights["percentageLate"] }}%</p></li>
<li><p class="card-stats">Percentage early or ontime: {{ this.insights["percentageNotLate"] }}%</p></li>
</ul>
</div>
</div>
</div>
<div id="leaderboardTitleDiv"><p>Leaderboard</p></div>
<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 v-if="showTopEarliestLatest" class="form-check-label" for="showTopEarliestLatest">Showing All Trains</label>
<label v-else class="form-check-label" for="showTopEarliestLatest">Showing Top & Bottom 3</label>
<label class="form-check-label" for="showTopEarliestLatest">Show All Train Entries</label>
</div>
<thead>
<tr>
<th>CODE</th>
<th>Code</th>
<th>Time</th>
<th>Type</th>
<th>Direction</th>
<th>Origin</th>
<th>Destination</th>
</tr>
</thead>
<tbody v-if="!showTopEarliestLatest" v-for="train in topEarliestLatest">
@ -66,7 +62,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>{{ this.rawData[train.jsonIndex]["Direction"][0] }}</td>
<td>{{ getOrigin(this.rawData[train.jsonIndex]["PublicMessage"][0]) }}</td>
<td>{{ getDestination(this.rawData[train.jsonIndex]["PublicMessage"][0]) }}</td>
</tr>
</tbody>
@ -76,12 +73,11 @@
<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>{{ this.rawData[train.jsonIndex]["Direction"][0] }}</td>
<td>{{ getOrigin(this.rawData[train.jsonIndex]["PublicMessage"][0]) }}</td>
<td>{{ getDestination(this.rawData[train.jsonIndex]["PublicMessage"][0]) }}</td>
</tr>
</tbody>
</table>
</template>
<script>
@ -162,6 +158,19 @@ 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") - 1;
let startDestination = endOrigin + 4;
let endDestination = publicMessage.indexOf("(") - 1;
return publicMessage.substring(startDestination, endDestination);
},
postTrainAndStationData() {
const functions = getFunctions(app);
let host = window.location.hostname
@ -268,16 +277,19 @@ export default {
</script>
<style scoped>
#trainPie, #stationPie{
width: 40%;
position: absolute;
padding: 10px;
top: 20px;
.card-text, .card-stats {
font-size: 17px;
}
#barChart{
.piechart {
display: flex;
justify-content: center;
padding-bottom: 0;
margin-bottom: 0;
height: 53%
}
#barChart {
position:relative;
padding: 10px;
width: 100%;
@ -285,10 +297,10 @@ export default {
height: 40%;
}
th{
th {
padding: 15px;
text-align: center;
font-size: 22px;
font-size: 19px;
}
@ -298,12 +310,11 @@ th{
left: 35%;
} */
#leaderboardTitleDiv p{
#leaderboardTitleDiv p {
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
text-align: center;
font-size: 50px;
padding-top:10px;
text-shadow: 2px 2px rgb(155, 155, 155);
}
@ -317,7 +328,7 @@ table {
width: 100%;
margin: 0 auto;
position: relative;
font-size: 24px;
font-size: 19px;
}
*{
position: relative;
@ -400,8 +411,10 @@ td.l, th.l{
content: "Type";
}
tbody tr td:nth-child(4):before {
content: "Direction";
content: "Origin";
}
tbody tr td:nth-child(5):before {
content: "Destination";
}
}
</style>

2
src/pages/LoginPage.vue
View File

@ -164,7 +164,7 @@ export default {
}
#eyeImg:hover{
transform: scale(1.3);
transform: scale(1.1);
}
h1 {

4
src/pages/SignUpPage.vue
View File

@ -6,7 +6,7 @@
<h1>Sign Up</h1>
<p>Email Address</p>
<input type="email" v-model="email" aria-describedby="emailHelp" placeholder="Enter email">
<p>Password (6 or more characters)</p>
<p>Password (6+ characters)</p>
<div id="imgDiv">
<img v-if="showPassword" id="eyeImg" src="../assets/314858_hidden_eye_icon.png" @click="this.showPassword = !this.showPassword" alt="show">
<img v-else id = "eyeImg" src="../assets/315220_eye_icon.png" @click="this.showPassword = !this.showPassword">
@ -129,7 +129,7 @@ export default {
}
#eyeImg:hover{
transform: scale(1.3);
transform: scale(1.1);
}
h1 {

171
src/store/new.js
View File

@ -1,171 +0,0 @@
import { reactive } from 'vue'
import { fromLonLat } from 'ol/proj.js';
import { getFunctions, httpsCallable, connectFunctionsEmulator } from "firebase/functions";
import app from '../api/firebase';
export const store = reactive({
// map and insights data
insights: {},
latestTrain: {},
earliestTrain: {},
orderedTrains: [],
selectedTrain: {},
selectedStation: {},
allTrainsJSON: {},
// side bar
displaySelectedTrain: false,
displayedSelectedStation: false,
// login status
loggedIn: false,
isWaitingForLoginStatus: true,
setOrderedTrains(unorderedTrains) {
// sort in ascending order
unorderedTrains.sort((a, b) => {
return a.time - b.time
})
this.orderedTrains = unorderedTrains
},
// method to populate the database for local testing
postTrainAndStationData(host) {
const functions = getFunctions(app);
if (host === '127.0.0.1' || host === 'localhost') {
connectFunctionsEmulator(functions, host, 5001);
}
const postTrainData = httpsCallable(functions, 'postLiveTrainData');
postTrainData().then(() => {
const postStationData = httpsCallable(functions, 'postStationData');
postStationData().then(() => {
this.getTrainAndStationData(host)
})
})
.catch((error) => {
console.log(error.message)
//this.showToast(error.message, "red")
})
},
// method to fetch live train and station data from Firestore
getTrainAndStationData(host) {
const functions = getFunctions(app);
if (host === '127.0.0.1' || host == 'localhost') {
connectFunctionsEmulator(functions, host, 5001);
}
const getTrainData = httpsCallable(functions, 'getLiveTrainData');
getTrainData().then((response) => {
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
};
var unorderedTrains = [];
var currentMessages = [];
var latest = null;
var earliest = null;
var currLatestTime = null;
var currEarliestTime = null;
for (var i=0; i<response.data.length; i++) {
let train = response.data[i];
this.allTrains[i] = train;
this.trainCoordinates[i] = fromLonLat([train["TrainLongitude"][0], train["TrainLatitude"][0]])
insights["totalNumTrains"] += 1
// fill 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;
// filter out \n in public messages
train["PublicMessage"][0] = train["PublicMessage"][0].replace(/\\n/g, ". ");
let publicMessage = train["PublicMessage"][0];
currentMessages.push(publicMessage);
// check if the train is running
if (train["TrainStatus"][0] == "R") {
insights["numRunningTrains"] += 1;
let startTimeStr = publicMessage.indexOf("(");
let timeEnd = publicMessage.indexOf(" ", startTimeStr+1);
let num = parseInt(publicMessage.substring(startTimeStr+1, timeEnd))
unorderedTrains.push({"time": num, "jsonIndex": i})
// check if the train is late
if (publicMessage[startTimeStr+1] != "-" && publicMessage[startTimeStr+1] != "0") {
insights["numLateRunningTrains"] += 1;
if (!latest) latest = train;
// check for a new latest train
if (num > currLatestTime) {
latest = train;
currLatestTime = num;
}
}
// 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;
currEarliestTime = num;
}
}
}
}
// assign results after looping through JSON
insights["percentageLate"] = ((insights["numLateRunningTrains"] / insights["numRunningTrains"]) * 100).toFixed(2);
insights["percentageNotLate"] = (100 - insights["percentageLate"]).toFixed(2);
insights["latestTime"] = currLatestTime;
insights["earliestTime"] = currEarliestTime;
this.publicMessages = currentMessages;
// assign the results to the Vue Store
store.setEarliestTrain(earliest);
store.setLatestTrain(latest);
store.setRawData(response.data);
store.setOrderedTrains(unorderedTrains);
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;
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) {
//loader.hide()
//this.showToast(error.message, "red")
}
})
.catch((error) => {
//loader.hide()
//this.showToast("Error fetching live data", "red")
})
}
})