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

Insights page cleaned up + small quality changes

Browse Source
This commit is contained in:
J-Lennox10
2023-03-20 19:11:15 +00:00
parent c408f21d91
commit 33e694482b
10 changed files with 294 additions and 106 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: {
responsive: true
responsive: false
}
}
}
@ -43,9 +43,5 @@ export default {
</script>
<style scoped>
#lateGraph{
position: relative;
height:48%;
left:0px;
}
</style>

2
src/components/Navbar.vue
View File

@ -1,5 +1,5 @@
<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">
<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">

25
src/components/pieChart.vue
View File

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

34
src/pages/AccountPage.vue
View File

@ -9,7 +9,10 @@
<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-else type="password" v-model="currentPassword" placeholder="Enter existing password">
<button @click="this.showCurrentPassword = !this.showCurrentPassword">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>
<input type="email" v-model="newEmail" aria-describedby="emailHelp" placeholder="Enter new email">
@ -18,7 +21,10 @@
<h3>Change password</h3>
<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">
<button @click="this.showNewPassword = !this.showNewPassword">Eye</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>
@ -198,4 +204,28 @@ export default {
</script>
<style scoped>
#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>

269
src/pages/InsightsPage.vue
View File

@ -1,71 +1,111 @@
<template>
<Navbar />
<div v-if="this.insights" id="insightDiv">
<h1 style="padding-left: 10px;">Train Insights</h1>
<div id="trainTotal">
<div id="trainTotalText">
<!-- Table to be shown on screen widths > 1000px -->
<table id="statsTable" class="hideMobile">
<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>
<ul>
<li><p>Trains: {{ this.insights["numTrains"] }}</p></li>
<li><p>Darts: {{ this.insights["numDarts"] }}</p></li>
</ul>
</div>
<div v-if="readyToRender" id="trainTotalChart">
<pieChart id="trainPie" />
</div>
</div>
<hr>
<p>Number of actively running trains: {{ this.insights["numRunningTrains"] }}</p>
<p>Percentage late: {{ this.insights["percentageLate"] }}%</p>
<p>Percentage early or ontime: {{ this.insights["percentageNotLate"] }}%</p>
<div v-if="readyToRender" id="statsDiv">
<BarChart id="lateGraph" />
</div>
<h1 style="padding-left: 10px;">Station Insights</h1>
<div id="stationTotal">
<div id="stationTotalText">
</td>
<td style="border-right: 1px solid;">
<p>Number of actively running trains: {{ this.insights["numRunningTrains"] }}</p>
<p>Percentage late: {{ this.insights["percentageLate"] }}%</p>
<p>Percentage early or ontime: {{ this.insights["percentageNotLate"] }}%</p>
</td>
<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>
</div>
<div id="stationTotalChart">
<pieChart v-if="readyToRender" id="stationPie" />
</div>
</td>
</tr>
</table>
<table id="statsTable" class="showMobile">
<tr>
<th colspan = "2" style="border-right: 1px solid;">Train Insights</th>
<th colspan = "2">Station Insights</th>
</tr>
<tr>
<td>
<p>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>
</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>
</td>
<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"/>
<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 id="ads">
<h2>AdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAds
AdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAds
AdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAds
AdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAds
AdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAds
AdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAds
</h2>
</div>
<hr>
<h1>Leaderboard</h1>
<div 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 top three earliest and latest</label>
<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-else>{{ train.time * -1}} mins early</p>
</div>
</div>
</div>
<div v-if="!showTopEarliestLatest" v-for="train in orderedTrains">
<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 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>
</template>
<script>
@ -252,50 +292,109 @@ export default {
</script>
<style scoped>
#insightDiv {
color: black;
padding-left: 10px;
width:80%;
background-color: rgb(250, 235, 215);
.showMobile{/*Hides table for screens smaller than 1000px*/
display: none;
}
#trainTotal, #stationTotal {
height: 280px;
}
#trainTotalText, #stationTotalText {
position: relative;
width: 30%;
height: 100%;
right:0px;
}
#trainTotalChart, #stationTotalChart {
#trainPie, #stationPie{
width: 40%;
position: absolute;
top:114px;
width: 50%;
height: 20%;
left: 20%;
}
#lateGraph {
position: absolute;
height:50%;
left:0px;
position: relative;
height: 20%;
width: 20%;
left: 10px;
}
#statsDiv {
height: 230px;
th{
padding: 15px;
text-align: center;
font-size: 22px;
}
#ads {
position: absolute;
background-color:rgb(78, 232, 109);
right: 0px;
width:20%;
height: 110%;
top:66px;
word-wrap: break-word;
overflow-y: hidden;
#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>

24
src/pages/LoginPage.vue
View File

@ -8,9 +8,14 @@
<p>Email Address</p>
<input type="email" v-model="email" aria-describedby="emailHelp" placeholder="Enter email">
<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-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">
<a @click="forgotPassword = !forgotPassword; this.email = ''">Forgot password?</a>
<a><router-link to="/signup">Don't have an account?</router-link></a>
@ -145,6 +150,23 @@ export default {
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 {
margin: 0;
padding: 0 0 20px;

11
src/pages/MapPage.vue
View File

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

27
src/pages/SignUpPage.vue
View File

@ -6,11 +6,13 @@
<h1>Sign Up</h1>
<p>Email Address</p>
<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-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">
<a><router-link to="/login">Already have an account?</router-link></a>
</div>
@ -41,7 +43,7 @@ export default {
password: "",
toastMessage: "",
toastBackground: "",
showPassword: true,
showPassword: false,
toast
}
},
@ -113,6 +115,23 @@ export default {
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 {
margin: 0;
padding: 0 0 20px;