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>
<div id="statsDiv">
<div id="lateGraph">
<Bar
id="my-chart-id"
:options="chartOptions"
:data="chartData"
/>
</div>
</div>
<Bar :data="chartData" :id="barChart" :options="chartOptions" />
</template>
<script scoped>
@ -25,23 +19,38 @@ export default {
labels: ['Punctuality Percentage'],
datasets: [{
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"]]
},
{
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"]]
}]
},
chartOptions: {
responsive: false
responsive: true,
maintainAspectRatio: false
}
}
}
}
</script>
<style scoped>
div{
width: 70%;
}
</style>

113
src/pages/AccountPage.vue
View File

@ -1,12 +1,11 @@
<template>
<Navbar />
<h1>Account Settings</h1>
<p v-if="this.user">Your Email: {{ this.user.email }}</p>
<div>
<h3>Send a password reset email</h3>
<button @click="resetPasswordEmail()" type="submit" name="" value="Send Password reset email" class="button">Send Password Reset Email</button>
<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>
<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-else type="password" v-model="currentPassword" placeholder="Enter existing password">
<!-- <div id="imgDiv1"> -->
@ -16,7 +15,7 @@
<h3>Change email</h3>
<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>
<input v-if="showNewPassword" type="text" v-model="newPassword" placeholder="Enter new password">
@ -26,13 +25,13 @@
<!-- <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">
<button @click="updateUserPassword()" id="passUpdate" type="button" class="btn btn-primary">Update Password</button>
<h3>Delete account</h3>
<button @click="deleteUserAccount()" type="submit" name="" value="Delete Account">Delete Account</button>
<button @click="deleteUserPreferences()" id="delPref" type="button" class="btn btn-danger">Delete Map Preferences</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>
</template>
@ -205,49 +204,73 @@ export default {
</script>
<style scoped>
button {
background-color: blue;
color: white;
padding: 10px 20px;
border-radius: 5px;
border: none;
margin: 10px;
font-size: 16px;
h1{
color:rgb(163, 163, 163);
text-align: center;
}
h3{
font-size: 18px;
padding-top: 20px;
}
#passReset{
font-size: 17px;
text-decoration: underline;
color: #39d3fa;
}
#passReset:hover{
color: #3993fa;
cursor: pointer;
}
button:hover {
background-color: darkblue;
#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;
}
button:focus {
#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;
}
.eye-button {
background-color: grey;
}
#imgDiv1{
height:8%;
left:190px;
top:260px;
#delAcc{
position: absolute;
bottom: 10px;
left:10px;
}
#imgDiv2{
height:8%;
left:330px;
top:400px;
#delPref{
position: absolute;
}
#eyeImg{
height:60%;
width:100%;
}
#eyeImg:hover{
transform: scale(1.3);
bottom: 10px;
left:160px;
}
</style>

299
src/pages/InsightsPage.vue
View File

@ -2,109 +2,85 @@
<Navbar />
<!-- 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>
<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 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>
</ul>
</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>
</div>
</div>
<div class="card">
<h4 style="text-align:center;">Station Insights</h4>
<div v-if="readyToRender"><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>
</ul>
</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>
</div>
</div>
<div class="card">
<h4 style="text-align:center;">Punctuality Insights</h4>
<div v-if="readyToRender"><BarChart id="barChart"/></div>
<div class="card-body">
<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>
</ul>
</div>
</div>
</div>
</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>
<div id="leaderboardTitleDiv">
<p>Leaderboard</p>
<div id = "leaderboardToggle" class="form-check form-switch">
<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>
</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>
@ -294,56 +270,33 @@ export default {
<style scoped>
.showMobile{/*Hides table for screens smaller than 1000px*/
display: none;
}
#trainPie, #stationPie{
width: 40%;
position: absolute;
padding: 10px;
top: 20px;
}
#lateGraph {
position: relative;
height: 20%;
width: 20%;
left: 10px;
#barChart{
position:relative;
padding: 10px;
width: 100%;
top: 20px;
height: 40%;
}
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%;
}
/* #leaderboardToggle{
position: absolute;
top: 70px;
left: 35%;
} */
#leaderboardTitleDiv p{
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
@ -352,49 +305,103 @@ th{
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;
table {
border-spacing: 1;
border-collapse: collapse;
background: white;
border-radius: 6px;
overflow: hidden;
max-width: 1400px;
width: 100%;
z-index:2;
margin: 0 auto;
position: relative;
font-size: 24px;
}
*{
position: relative;
}
td,th {
padding-left: 8px;
}
thead tr {
height: 60px;
background: #ffed86;
font-size: 16px;
}
tbody tr {
height: 48px;
border-bottom: 1px solid #e3f1d5;
}
#filteredLeaderboard h2{
text-shadow: 2px 1px rgb(110, 110, 110);
tbody tr:last-child {
border: 0;
border-bottom: 2px solid #d5e0f1;
}
#fullLeaderBoard{
text-align: center;
td, th{
text-align: left;
}
@media screen and (max-width: 1000px) {
.hideMobile{
display:none;
}
.showMobile{
td.l, th.l{
text-align: right;
}
@media screen and (max-width: 820px){
table{
display:block;
}
#statsTable p{
font-size: 12px;
padding: 2px;
text-align: center;
table tr,td,th, *{
display: block;
}
tr{
border: 1px solid;
thead{
display:none;
}
#statsTable{
padding: 2px;
border: 0px;
tbody tr {
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>

5
src/pages/MapPage.vue
View File

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