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

Merge branch 'main' into owen

Browse Source
This commit is contained in:
Aindréas Ó hAodha
2023-03-21 14:43:52 +00:00
committed by GitHub
parent 0c0464ea5a 8500cd5e41
commit 513cb153f5
10 changed files with 294 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/314858_hidden_eye_icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.6 KiB

BIN
src/assets/315220_eye_icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.5 KiB

8
src/components/BarChart.vue
View File

@ -35,7 +35,7 @@ export default {
}] }]
}, },
chartOptions: { chartOptions: {
responsive: true responsive: false
} }
} }
} }
@ -43,9 +43,5 @@ export default {
</script> </script>
<style scoped> <style scoped>
#lateGraph{
position: relative;
height:48%;
left:0px;
}
</style> </style>

2
src/components/Navbar.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<nav class="navbar navbar-expand-sm navbar-light bg-light"> <nav style="z-index:4 " class="navbar navbar-expand-sm navbar-light bg-light">
<div class="container-fluid"> <div class="container-fluid">
<router-link tag="a" style="text-decoration: none; color: black; font-weight: 100;" to="/" class="navbar-brand"> <router-link tag="a" style="text-decoration: none; color: black; font-weight: 100;" to="/" class="navbar-brand">
<img src="https://cdn.discordapp.com/attachments/1017419092447207436/1063092138029625394/pixil-frame-0.png" alt="mascot" width="55" height="40" class="d-inline-block align-text-middle"> <img src="https://cdn.discordapp.com/attachments/1017419092447207436/1063092138029625394/pixil-frame-0.png" alt="mascot" width="55" height="40" class="d-inline-block align-text-middle">

19
src/components/pieChart.vue
View File

@ -1,12 +1,12 @@
<template> <template>
<div id="statsDiv">
<div id="trainPie"> <div v-if="trainChart">
<Pie :data="trainData" :options="chartOptions" /> <Pie :data="trainData" :options="chartOptions" />
</div> </div>
<div id="stationPie"> <div v-if="!trainChart">
<Pie :data="stationData" :options="chartOptions" /> <Pie :data="stationData" :options="chartOptions" />
</div> </div>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -22,6 +22,13 @@ export default {
Pie Pie
}, },
props: {
trainChart: {
type: Boolean,
default: false
}
},
data() { data() {
return{ return{
trainData: { trainData: {
@ -52,4 +59,8 @@ export default {
</script> </script>
<style scoped> <style scoped>
div{
width: 70%;
}
</style> </style>

35
src/pages/AccountPage.vue
View File

@ -9,7 +9,10 @@
<h3>Enter your current password to edit account settings</h3> <h3>Enter your current password to edit account settings</h3>
<input v-if="showCurrentPassword" type="text" v-model="currentPassword" placeholder="Enter existing password"> <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"> <input v-else type="password" v-model="currentPassword" placeholder="Enter existing password">
<button @click="this.showCurrentPassword = !this.showCurrentPassword" class="eye-button">Eye</button> <div id="imgDiv1">
<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">
</div>
<h3>Change email</h3> <h3>Change email</h3>
<input type="email" v-model="newEmail" aria-describedby="emailHelp" placeholder="Enter new email"> <input type="email" v-model="newEmail" aria-describedby="emailHelp" placeholder="Enter new email">
@ -18,8 +21,12 @@
<h3>Change password</h3> <h3>Change password</h3>
<input v-if="showNewPassword" type="text" v-model="newPassword" placeholder="Enter new password"> <input v-if="showNewPassword" type="text" v-model="newPassword" placeholder="Enter new password">
<input v-else type="password" v-model="newPassword" placeholder="Enter new password"> <input v-else type="password" v-model="newPassword" placeholder="Enter new password">
<button @click="this.showNewPassword = !this.showNewPassword" class="eye-button">Eye</button>
<button @click="updateUserPassword()" type="submit" name="" value="Update Password">Update Password</button> <div id="imgDiv2">
<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">
</div>
<input @click="updateUserPassword()" type="submit" name="" value="Update Password">
<h3>Delete account</h3> <h3>Delete account</h3>
<button @click="deleteUserAccount()" type="submit" name="" value="Delete Account">Delete Account</button> <button @click="deleteUserAccount()" type="submit" name="" value="Delete Account">Delete Account</button>
@ -221,4 +228,26 @@ button:focus {
background-color: grey; background-color: grey;
} }
#imgDiv1{
height:8%;
left:190px;
top:260px;
position: absolute;
}
#imgDiv2{
height:8%;
left:330px;
top:400px;
position: absolute;
}
#eyeImg{
height:60%;
width:100%;
}
#eyeImg:hover{
transform: scale(1.3);
}
</style> </style>

261
src/pages/InsightsPage.vue
View File

@ -1,71 +1,111 @@
<template> <template>
<Navbar /> <Navbar />
<div v-if="this.insights" id="insightDiv">
<h1 style="padding-left: 10px;">Train Insights</h1> <!-- Table to be shown on screen widths > 1000px -->
<div id="trainTotal"> <table id="statsTable" class="hideMobile">
<div id="trainTotalText"> <tr>
<th colspan = "2" style="border-right: 1px solid;">Train Insights</th>
<th colspan = "2">Station Insights</th>
</tr>
<tr>
<td><div v-if="readyToRender"><pieChart :id="stationPie" :trainChart="true"/></div></td>
<td style="border-right: 1px solid;">
<div v-if="readyToRender" id="statsDiv">
<BarChart id="lateGraph" />
</div>
</td>
<td><div style="position:relative; left:30px;" v-if="readyToRender"><pieChart :id="stationPie" :trainChart="false"/></div></td>
</tr>
<tr>
<td>
<p>Total number of trains: {{ this.insights["totalNumTrains"] }}</p> <p>Total number of trains: {{ this.insights["totalNumTrains"] }}</p>
<ul> <ul>
<li><p>Trains: {{ this.insights["numTrains"] }}</p></li> <li><p>Trains: {{ this.insights["numTrains"] }}</p></li>
<li><p>Darts: {{ this.insights["numDarts"] }}</p></li> <li><p>Darts: {{ this.insights["numDarts"] }}</p></li>
</ul> </ul>
</div> </td>
<div v-if="readyToRender" id="trainTotalChart"> <td style="border-right: 1px solid;">
<pieChart id="trainPie" />
</div>
</div>
<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>
<p>Percentage early or ontime: {{ this.insights["percentageNotLate"] }}%</p> <p>Percentage early or ontime: {{ this.insights["percentageNotLate"] }}%</p>
<div v-if="readyToRender" id="statsDiv"> </td>
<BarChart id="lateGraph" /> <td>
</div>
<h1 style="padding-left: 10px;">Station Insights</h1>
<div id="stationTotal">
<div id="stationTotalText">
<p>Total number of stations: {{ this.insights["totalNumStations"] }}</p> <p>Total number of stations: {{ this.insights["totalNumStations"] }}</p>
<ul> <ul>
<li><p>Trains: {{ this.insights["numTrainStations"] }}</p></li> <li><p>Trains: {{ this.insights["numTrainStations"] }}</p></li>
<li><p>Darts: {{ this.insights["numDartStations"] }}</p></li> <li><p>Darts: {{ this.insights["numDartStations"] }}</p></li>
</ul> </ul>
</div> </td>
<div id="stationTotalChart"> </tr>
<pieChart v-if="readyToRender" id="stationPie" /> </table>
</div>
</div>
</div>
<div id="ads"> <table id="statsTable" class="showMobile">
<h2>AdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAds <tr>
AdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAds <th colspan = "2" style="border-right: 1px solid;">Train Insights</th>
AdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAds <th colspan = "2">Station Insights</th>
AdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAds </tr>
AdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAds <tr>
AdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAds <td>
</h2> <p>Total number of trains: {{ this.insights["totalNumTrains"] }}</p>
</div> <ul>
<hr> <li><p>Trains: {{ this.insights["numTrains"] }}</p></li>
<li><p>Darts: {{ this.insights["numDarts"] }}</p></li>
</ul>
</td>
<td style="border-right: 1px solid;">
<p>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>
</ul>
<h1>Leaderboard</h1> </td>
<div class="form-check form-switch"> <td>
<p>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>
</ul>
</td>
</tr>
</table>
<div id="leaderboardTitleDiv">
<p>Leaderboard</p>
<div id = "leaderboardToggle" class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" v-model="showTopEarliestLatest"/> <input class="form-check-input" type="checkbox" role="switch" v-model="showTopEarliestLatest"/>
<label class="form-check-label" for="showTopEarliestLatest">Show top three earliest and latest</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 & Bottom 3</label>
</div>
</div> </div>
<div v-if="!showTopEarliestLatest" v-for="train in orderedTrains">
<h2>{{ this.rawData[train.jsonIndex]["TrainCode"][0] }}</h2> <div id="leaderboard">
<div v-if="!showTopEarliestLatest" v-for="train in topEarliestLatest" id="filteredLeaderboard">
<div v-if="train.time > 0" id="leaderLate">
<h2>{{ this.rawData[train.jsonIndex]["TrainCode"][0] }} - <span style="font-size:28px">Type: {{ this.rawData[train.jsonIndex]["TrainType"][0] }} | Heading {{ this.rawData[train.jsonIndex]["Direction"][0] }} </span></h2>
<p>{{ train.time }} mins late</p>
</div>
<div v-else id="leaderEarly">
<h2>{{ this.rawData[train.jsonIndex]["TrainCode"][0] }} - <span style="font-size:28px">Type: {{ this.rawData[train.jsonIndex]["TrainType"][0] }} | Heading {{ this.rawData[train.jsonIndex]["Direction"][0] }} </span></h2>
<p>{{ train.time * -1}} mins early</p>
</div>
</div>
<div v-else v-for="train in orderedTrains" id="fullLeaderBoard">
<div>
<h2>{{ this.rawData[train.jsonIndex]["TrainCode"][0] }} - <span style="font-size:28px">Type: {{ this.rawData[train.jsonIndex]["TrainType"][0] }} | Heading {{ this.rawData[train.jsonIndex]["Direction"][0] }} </span></h2>
<p v-if="train.time > 0">{{ train.time }} mins late</p> <p v-if="train.time > 0">{{ train.time }} mins late</p>
<p v-else>{{ train.time * -1}} mins early</p> <p v-else>{{ train.time * -1}} mins early</p>
</div> </div>
<div v-else v-for="train in topEarliestLatest">
<h2>{{ this.rawData[train.jsonIndex]["TrainCode"][0] }}</h2>
<p v-if="train.time > 0">{{ train.time }} mins late</p>
<p v-else>{{ train.time * -1}} mins early</p>
</div> </div>
</div>
</template> </template>
<script> <script>
@ -252,50 +292,109 @@ export default {
</script> </script>
<style scoped> <style scoped>
#insightDiv {
color: black;
padding-left: 10px; .showMobile{/*Hides table for screens smaller than 1000px*/
width:80%; display: none;
background-color: rgb(250, 235, 215);
} }
#trainTotal, #stationTotal { #trainPie, #stationPie{
height: 280px; width: 40%;
}
#trainTotalText, #stationTotalText {
position: relative;
width: 30%;
height: 100%;
right:0px;
}
#trainTotalChart, #stationTotalChart {
position: absolute; position: absolute;
top:114px;
width: 50%;
height: 20%;
left: 20%;
} }
#lateGraph { #lateGraph {
position: absolute; position: relative;
height:50%; height: 20%;
left:0px;
}
#statsDiv {
height: 230px;
}
#ads {
position: absolute;
background-color:rgb(78, 232, 109);
right: 0px;
width: 20%; width: 20%;
height: 110%; left: 10px;
top:66px; }
word-wrap: break-word;
overflow-y: hidden;
th{
padding: 15px;
text-align: center;
font-size: 22px;
}
#statsTable{
border: 1px solid;
width: 80%;
left: 10%;
position: relative;
}
#leaderboard{
width: 100%;
text-align: center;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: small;
}
#leaderboardToggle{
position: relative;
top: -40px;
left: 20px;
}
#leaderboardTitleDiv div{
width: 10%;
top: -10px;
left:47%;
}
#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);
}
#leaderEarly{
color: rgb(129, 213, 3);
text-align: center;
width:100%;
z-index: 1;
}
#leaderLate{
color: #fc1919;
text-align: center;
width: 100%;
z-index:2;
}
#filteredLeaderboard h2{
text-shadow: 2px 1px rgb(110, 110, 110);
}
#fullLeaderBoard{
text-align: center;
}
@media screen and (max-width: 1000px) {
.hideMobile{
display:none;
}
.showMobile{
display:block;
}
#statsTable p{
font-size: 12px;
padding: 2px;
text-align: center;
}
tr{
border: 1px solid;
}
#statsTable{
padding: 2px;
border: 0px;
}
} }
</style> </style>

24
src/pages/LoginPage.vue
View File

@ -8,9 +8,14 @@
<p>Email Address</p> <p>Email Address</p>
<input type="email" v-model="email" aria-describedby="emailHelp" placeholder="Enter email"> <input type="email" v-model="email" aria-describedby="emailHelp" placeholder="Enter email">
<p>Password</p> <p>Password</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">
</div>
<input v-if="showPassword" type="text" v-model="password" placeholder="Enter password"> <input v-if="showPassword" type="text" v-model="password" placeholder="Enter password">
<input v-else type="password" v-model="password" placeholder="Enter password"> <input v-else type="password" v-model="password" placeholder="Enter password">
<button @click="this.showPassword = !this.showPassword">Eye</button>
<input @click="login" type="submit" name="" value="Login"> <input @click="login" type="submit" name="" value="Login">
<a @click="forgotPassword = !forgotPassword; this.email = ''">Forgot password?</a> <a @click="forgotPassword = !forgotPassword; this.email = ''">Forgot password?</a>
<a><router-link to="/signup">Don't have an account?</router-link></a> <a><router-link to="/signup">Don't have an account?</router-link></a>
@ -145,6 +150,23 @@ export default {
padding: 70px 30px; padding: 70px 30px;
} }
#imgDiv{
height:10%;
width:10%;
right: 40px;
bottom:150px;
position: absolute;
}
#eyeImg{
height:80%;
width:100%;
}
#eyeImg:hover{
transform: scale(1.3);
}
h1 { h1 {
margin: 0; margin: 0;
padding: 0 0 20px; padding: 0 0 20px;

10
src/pages/MapPage.vue
View File

@ -598,4 +598,14 @@ export default {
text-align: bottom; text-align: bottom;
font-size: 16px; font-size: 16px;
} }
/* Phone Screen CSS */
@media screen and (max-width: 850px) {
#sidebar {
height: 75%;
width: 90%;
left:5%;
top: 18%;
}
}
</style> </style>

27
src/pages/SignUpPage.vue
View File

@ -6,11 +6,13 @@
<h1>Sign Up</h1> <h1>Sign Up</h1>
<p>Email Address</p> <p>Email Address</p>
<input type="email" v-model="email" aria-describedby="emailHelp" placeholder="Enter email"> <input type="email" v-model="email" aria-describedby="emailHelp" placeholder="Enter email">
<p>Password</p> <p>Password (6 or more 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">
</div>
<input v-if="showPassword" type="text" v-model="password" placeholder="Enter password"> <input v-if="showPassword" type="text" v-model="password" placeholder="Enter password">
<input v-else type="password" v-model="password" placeholder="Enter password"> <input v-else type="password" v-model="password" placeholder="Enter password">
<button @click="this.showPassword = !this.showPassword">Eye</button>
<a>Passwords must have 6 or more characters</a>
<input @click="signup" type="submit" name="" value="Sign Up"> <input @click="signup" type="submit" name="" value="Sign Up">
<a><router-link to="/login">Already have an account?</router-link></a> <a><router-link to="/login">Already have an account?</router-link></a>
</div> </div>
@ -41,7 +43,7 @@ export default {
password: "", password: "",
toastMessage: "", toastMessage: "",
toastBackground: "", toastBackground: "",
showPassword: true, showPassword: false,
toast toast
} }
}, },
@ -113,6 +115,23 @@ export default {
padding: 70px 30px; padding: 70px 30px;
} }
#imgDiv{
height:10%;
width:10%;
right: 40px;
bottom:150px;
position: absolute;
}
#eyeImg{
height:80%;
width:100%;
}
#eyeImg:hover{
transform: scale(1.3);
}
h1 { h1 {
margin: 0; margin: 0;
padding: 0 0 20px; padding: 0 0 20px;