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

Insights super responsive, account settings page made edible

Browse Source
This commit is contained in:
J-Lennox10
2023-03-21 22:38:36 +00:00
parent 09b9c947a5
commit 937a78061b
4 changed files with 264 additions and 226 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/components/BarChart.vue
View File

@ -1,13 +1,7 @@
<template> <template>
<div id="statsDiv">
<div id="lateGraph"> <Bar :data="chartData" :id="barChart" :options="chartOptions" />
<Bar
id="my-chart-id"
:options="chartOptions"
:data="chartData"
/>
</div>
</div>
</template> </template>
<script scoped> <script scoped>
@ -25,23 +19,38 @@ export default {
labels: ['Punctuality Percentage'], labels: ['Punctuality Percentage'],
datasets: [{ datasets: [{
label: 'Late', label: 'Late',
backgroundColor: '#FF0000', backgroundColor: 'rgba(255, 0, 0, 0.3)',
hoverBackgroundColor: 'rgba(255, 0, 0, 0.8)',
borderColor: 'rgb(255, 0, 0)',
borderWidth: 1,
data: [store.insights["percentageLate"]] data: [store.insights["percentageLate"]]
}, },
{ {
label: 'Early/ontime', label: 'Early/ontime',
backgroundColor: '#4ADC57', backgroundColor: 'rgba(74, 220, 87, 0.3)',
hoverBackgroundColor: 'rgba(74, 220, 87), 0.8)',
borderColor: 'rgb(74, 220, 87)',
borderWidth: 1,
data: [store.insights["percentageNotLate"]] data: [store.insights["percentageNotLate"]]
}] }]
}, },
chartOptions: { chartOptions: {
responsive: false responsive: true,
maintainAspectRatio: false
} }
} }
} }
} }
</script> </script>
<style scoped> <style scoped>
div{
width: 70%;
}
</style> </style>

147
src/pages/AccountPage.vue
View File

@ -1,38 +1,37 @@
<template> <template>
<Navbar /> <Navbar />
<h1>Account Settings</h1> <div id="accountDiv">
<p v-if="this.user">Your Email: {{ this.user.email }}</p> <div id="mainDiv">
<div> <h1>Account Settings</h1>
<h3>Send a password reset email</h3> <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>
<button @click="resetPasswordEmail()" type="submit" name="" value="Send Password reset email" class="button">Send Password Reset Email</button>
<h3>Enter your current password to edit account settings</h3> <h3>Enter 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">
<!-- <div id="imgDiv1"> --> <!-- <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-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"> --> <!-- <img v-else id = "eyeImg" src="../assets/315220_eye_icon.png" @click="this.showPassword = !this.showPassword"> -->
<!-- </div> --> <!-- </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">
<button @click="updateUserEmail()" type="submit" name="" value="Update Email">Update email</button> <button @click="updateUserEmail()" id="emailUpdate" type="button" class="btn btn-primary" value="Update Email">Update email</button>
<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">
<!-- <div id="imgDiv2"> --> <!-- <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-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"> --> <!-- <img v-else id = "eyeImg" src="../assets/315220_eye_icon.png" @click="this.showPassword = !this.showPassword"> -->
<!-- </div> --> <!-- </div> -->
<input @click="updateUserPassword()" type="submit" name="" value="Update Password"> <button @click="updateUserPassword()" id="passUpdate" type="button" class="btn btn-primary">Update Password</button>
<h3>Delete account</h3> <button @click="deleteUserPreferences()" id="delPref" type="button" class="btn btn-danger">Delete Map Preferences</button>
<button @click="deleteUserAccount()" type="submit" name="" value="Delete Account">Delete Account</button> <button @click="deleteUserAccount()" id="delAcc" type="button" class="btn btn-danger" value="Delete Account">Delete Account</button>
<h3>Delete map filter preferences data</h3>
<button @click="deleteUserPreferences()">Delete preferences</button> </div>
</div> </div>
</template> </template>
@ -205,49 +204,73 @@ export default {
</script> </script>
<style scoped> <style scoped>
button {
background-color: blue; h1{
color: white; color:rgb(163, 163, 163);
padding: 10px 20px; text-align: center;
border-radius: 5px;
border: none;
margin: 10px;
font-size: 16px;
cursor: pointer;
} }
button:hover { h3{
background-color: darkblue; font-size: 18px;
padding-top: 20px;
} }
button:focus { #passReset{
font-size: 17px;
text-decoration: underline;
color: #39d3fa;
}
#passReset:hover{
color: #3993fa;
cursor: pointer;
}
#accountDiv{
position:absolute;
right:0px;
left:0px;
bottom:0px;
background-color: rgb(255, 255, 255);
height: 100%;
display: flex;
align-items: flex-start;
justify-content: center;
}
#accountDiv div{
position: inherit;
padding: 15px;
background-color: rgb(255, 255, 255);
width: 600px;
height: 80%;
top:14%;
text-align: left;
box-shadow: 0 0 8px 8px #b6b6b6;
}
#emailUpdate, #passUpdate{
position: relative;
left:10px;
width: 26%;
}
input{
border:none;
border-bottom: 1px solid #000000;
background: transparent;
outline: none; outline: none;
} }
.eye-button { #delAcc{
background-color: grey; position: absolute;
bottom: 10px;
left:10px;
} }
#imgDiv1{ #delPref{
height:8%; position: absolute;
left:190px; bottom: 10px;
top:260px; left:160px;
position: absolute;
}
#imgDiv2{
height:8%;
left:330px;
top:400px;
position: absolute;
}
#eyeImg{
height:60%;
width:100%;
}
#eyeImg:hover{
transform: scale(1.3);
} }
</style> </style>

299
src/pages/InsightsPage.vue
View File

@ -2,109 +2,85 @@
<Navbar /> <Navbar />
<!-- Table to be shown on screen widths > 1000px --> <!-- 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> <div class="card-group">
<div class="card">
</tr> <h4 style="text-align:center;">Train Insights</h4>
<tr> <div v-if="readyToRender"><pieChart :id="stationPie" :trainChart="true"/></div>
<td> <div class="card-body">
<p>Total number of trains: {{ this.insights["totalNumTrains"] }}</p> <h5 class="card-title">Train Data</h5>
<p class="card-text">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>
</td>
<td style="border-right: 1px solid;"> </div>
<p>Number of actively running trains: {{ this.insights["numRunningTrains"] }}</p> </div>
<p>Percentage late: {{ this.insights["percentageLate"] }}%</p> <div class="card">
<p>Percentage early or ontime: {{ this.insights["percentageNotLate"] }}%</p> <h4 style="text-align:center;">Station Insights</h4>
</td> <div v-if="readyToRender"><pieChart :id="stationPie" :trainChart="false"/></div>
<td> <div class="card-body">
<p>Total number of stations: {{ this.insights["totalNumStations"] }}</p> <h5 class="card-title">Station Data</h5>
<p class="card-text">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>
</td> </div>
</tr> </div>
</table> <div class="card">
<h4 style="text-align:center;">Punctuality Insights</h4>
<table id="statsTable" class="showMobile"> <div v-if="readyToRender"><BarChart id="barChart"/></div>
<tr> <div class="card-body">
<th colspan = "2" style="border-right: 1px solid;">Train Insights</th> <h5 class="card-title">Punctuality Data</h5>
<th colspan = "2">Station Insights</th> <p class="card-text">Number of actively running trains: {{ this.insights["numRunningTrains"] }}</p>
</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> <ul>
<li><p>Percentage late: {{ this.insights["percentageLate"] }}%</p></li> <li><p>Percentage late: {{ this.insights["percentageLate"] }}%</p></li>
<li><p>Percentage early or ontime: {{ this.insights["percentageNotLate"] }}%</p></li> <li><p>Percentage early or ontime: {{ this.insights["percentageNotLate"] }}%</p></li>
</ul> </ul>
</div>
</div>
</div>
</td> <div id="leaderboardTitleDiv"><p>Leaderboard</p></div>
<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> <table>
<div id = "leaderboardToggle" class="form-check form-switch"> <div style="left:3px; top:3px;" 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 v-if="showTopEarliestLatest" class="form-check-label" for="showTopEarliestLatest">Showing All Trains</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> <label v-else class="form-check-label" for="showTopEarliestLatest">Showing Top & Bottom 3</label>
</div> </div>
</div> <thead>
<tr>
<th>CODE</th>
<th>Time</th>
<th>Type</th>
<th>Direction</th>
</tr>
</thead>
<tbody v-if="!showTopEarliestLatest" v-for="train in topEarliestLatest">
<tr>
<td>{{ this.rawData[train.jsonIndex]["TrainCode"][0] }}</td>
<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>
</tr>
</tbody>
<tbody v-else v-for="train in orderedTrains">
<tr>
<td>{{ this.rawData[train.jsonIndex]["TrainCode"][0] }}</td>
<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>
</tr>
</tbody>
</table>
<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>
</template> </template>
@ -294,56 +270,33 @@ export default {
<style scoped> <style scoped>
.showMobile{/*Hides table for screens smaller than 1000px*/
display: none;
}
#trainPie, #stationPie{ #trainPie, #stationPie{
width: 40%; width: 40%;
position: absolute; position: absolute;
padding: 10px;
top: 20px;
} }
#barChart{
#lateGraph { position:relative;
position: relative; padding: 10px;
height: 20%; width: 100%;
width: 20%; top: 20px;
left: 10px; height: 40%;
} }
th{ th{
padding: 15px; padding: 15px;
text-align: center; text-align: center;
font-size: 22px; font-size: 22px;
} }
#statsTable{
border: 1px solid;
width: 80%;
left: 10%;
position: relative;
}
#leaderboard{ /* #leaderboardToggle{
width: 100%; position: absolute;
text-align: center; top: 70px;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; left: 35%;
font-size: small; } */
}
#leaderboardToggle{
position: relative;
top: -40px;
left: 20px;
}
#leaderboardTitleDiv div{
width: 10%;
top: -10px;
left:47%;
}
#leaderboardTitleDiv p{ #leaderboardTitleDiv p{
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
@ -352,49 +305,103 @@ th{
padding-top:10px; padding-top:10px;
text-shadow: 2px 2px rgb(155, 155, 155); text-shadow: 2px 2px rgb(155, 155, 155);
} }
#leaderEarly{
color: rgb(129, 213, 3);
text-align: center; table {
width:100%; border-spacing: 1;
z-index: 1; border-collapse: collapse;
background: white;
border-radius: 6px;
overflow: hidden;
max-width: 1400px;
width: 100%;
margin: 0 auto;
position: relative;
font-size: 24px;
}
*{
position: relative;
}
td,th {
padding-left: 8px;
} }
#leaderLate{ thead tr {
color: #fc1919; height: 60px;
text-align: center; background: #ffed86;
width: 100%; font-size: 16px;
z-index:2; }
tbody tr {
height: 48px;
border-bottom: 1px solid #e3f1d5;
} }
#filteredLeaderboard h2{ tbody tr:last-child {
text-shadow: 2px 1px rgb(110, 110, 110); border: 0;
border-bottom: 2px solid #d5e0f1;
} }
#fullLeaderBoard{ td, th{
text-align: center; text-align: left;
} }
@media screen and (max-width: 1000px) { td.l, th.l{
.hideMobile{ text-align: right;
display:none; }
}
.showMobile{ @media screen and (max-width: 820px){
table{
display:block; display:block;
} }
#statsTable p{ table tr,td,th, *{
font-size: 12px; display: block;
padding: 2px;
text-align: center;
} }
tr{ thead{
border: 1px solid; display:none;
} }
#statsTable{
padding: 2px; tbody tr {
border: 0px; height: auto;
padding: 8px 0;
} }
tbody tr td{
padding-left: 45%;
margin-bottom: 12px;
}
tbody tr td:last-child{
margin-bottom: 0;
}
tbody tr td:before{
position: absolute;
font-weight: 700;
width: 40%;
left: 10px;
top: 0;
}
tbody tr td:nth-child(1):before {
content: "Code";
}
tbody tr td:nth-child(2):before {
content: "Time";
}
tbody tr td:nth-child(3):before {
content: "Type";
}
tbody tr td:nth-child(4):before {
content: "Direction";
}
} }
</style> </style>

5
src/pages/MapPage.vue
View File

@ -504,8 +504,7 @@ export default {
} }
.trainMapIcon:hover { .trainMapIcon:hover {
width:30px; transform: scale(1.2);
height:34px;
cursor: pointer; cursor: pointer;
} }
@ -589,7 +588,7 @@ export default {
#publicMessageTicker { #publicMessageTicker {
z-index: 3; z-index: 3;
position: absolute; position: fixed;
bottom:0px; bottom:0px;
width:100%; width:100%;
background-color: rgb(255, 255, 125); background-color: rgb(255, 255, 125);