Merge pull request #70 from 0hAodha/addingLegend
Complete Sidebar revamp, other visual bugs patched
This commit is contained in:
Conor McNamara
BIN
src/assets/dateIcon.png
Normal file
BIN
src/assets/dateIcon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.9 KiB |
BIN
src/assets/directionIcon.png
Normal file
BIN
src/assets/directionIcon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 94 KiB |
BIN
src/assets/locationIcon.png
Normal file
BIN
src/assets/locationIcon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
BIN
src/assets/publicMessageIcon.png
Normal file
BIN
src/assets/publicMessageIcon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
BIN
src/assets/trainTypeIcon.png
Normal file
BIN
src/assets/trainTypeIcon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
@ -1,7 +1,9 @@
|
||||
<template>
|
||||
<div id="sidebarDiv">
|
||||
<div id="sidebarDiv">
|
||||
<div v-on:click="store.setDisplaySelectedTrain(false)" id="xButton">X</div>
|
||||
<h2 style="padding: 10px;">Train Code: {{ store.selectedTrain["TrainCode"][0] }}</h2>
|
||||
<div id="sidebarHeader">
|
||||
|
||||
<p id="originDiv">Origin:<br> {{ getOrigin(store.selectedTrain["PublicMessage"][0]) }}</p>
|
||||
<div id = "imageDiv" v-if="getTrainType() === 'DART'">
|
||||
<img v-if="isTrainRunning() && isTrainLate()" src="../assets/red-train-tram-solid.png" class="headerImage" alt="Late DART Icon">
|
||||
<img v-else-if="isTrainRunning() && !isTrainLate()" src="../assets/green-train-tram-solid.png" class="headerImage" alt="On-Time DART Icon">
|
||||
@ -12,20 +14,50 @@
|
||||
<img v-else-if="isTrainRunning() && !isTrainLate()" src="../assets/green-train-solid.png" class="headerImage" alt="On-Time Train Icon">
|
||||
<img v-else src="../assets/train-solid.svg" class="headerImage" alt="Not Running Train Icon">
|
||||
</div>
|
||||
<div v-on:click="store.setDisplaySelectedTrain(false)" id="xButton">X</div>
|
||||
<p id="destinationDiv">Destination:<br> {{ getDestination(store.selectedTrain["PublicMessage"][0]) }}</p>
|
||||
</div>
|
||||
|
||||
<div id="sidebarDiv">
|
||||
<h2>Train Code: {{ store.selectedTrain["TrainCode"][0] }}</h2>
|
||||
<p id="typeP">Type: {{ store.selectedTrain["TrainType"][0] }}</p>
|
||||
<p id="dateP">Date: {{ store.selectedTrain["TrainDate"][0] }}</p>
|
||||
<p id="dateP">Status: {{ store.selectedTrain["TrainStatus"][0] }}</p>
|
||||
<p id="dateP">Train Position - Long: {{ store.selectedTrain["TrainLongitude"][0] }} Lat: {{ store.selectedTrain["TrainLatitude"][0] }}</p>
|
||||
<p id="directionP">Direction: {{ store.selectedTrain["Direction"][0] }}</p>
|
||||
<p id="messageP">Public Message: {{ store.selectedTrain["PublicMessage"][0] }}</p>
|
||||
<div id="typeDiv">
|
||||
<div id="typeIcon">
|
||||
<img id="typeImage" src = "../assets/trainTypeIcon.png">
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<p id="typeP"><span style="color:grey; font-size: 14px;">Type:</span><br>{{ store.selectedTrain["TrainType"][0] }}</p>
|
||||
</div>
|
||||
|
||||
<div id="dateDiv">
|
||||
<div id="dateIcon">
|
||||
<img id="dateImage" src = "../assets/dateIcon.png">
|
||||
</div>
|
||||
<p id="dateP"><span style="color:grey; font-size: 14px;">Date:</span><br>{{ store.selectedTrain["TrainDate"][0] }}</p>
|
||||
</div>
|
||||
|
||||
<div id="positionDiv">
|
||||
<div id="positionIcon">
|
||||
<img id="positionImage" src = "../assets/locationIcon.png">
|
||||
</div>
|
||||
<div id="positionParagraphDiv">
|
||||
<p id="longP"><span style="color:grey; font-size: 14px;">Longitude:</span><br>{{ store.selectedTrain["TrainLongitude"][0] }}</p>
|
||||
<p id="latP"><span style="color:grey; font-size: 14px;">Latitude:</span><br>{{ store.selectedTrain["TrainLatitude"][0] }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="directionDiv">
|
||||
<div id="directionIcon">
|
||||
<img id="directionImage" src="../assets/directionIcon.png">
|
||||
</div>
|
||||
<p id="directionP"><span style="color:grey; font-size: 14px;">Direction:</span><br>{{ store.selectedTrain["Direction"][0] }}</p>
|
||||
</div>
|
||||
|
||||
<div id="publicMessageDiv">
|
||||
<div id="publicMessageIcon">
|
||||
<img id="publicMessageImage" src="../assets/publicMessageIcon.png">
|
||||
</div>
|
||||
<p id="publicMessageP"><span style="color:grey; font-size: 14px;">Public Message:</span><br>Public Message: {{ store.selectedTrain["PublicMessage"][0] }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { store } from '../store/store'
|
||||
@ -54,6 +86,19 @@ export default {
|
||||
return false;
|
||||
},
|
||||
|
||||
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 ");
|
||||
let startDestination = endOrigin + 3;
|
||||
let endDestination = publicMessage.indexOf("(") - 1;
|
||||
return publicMessage.substring(startDestination, endDestination);
|
||||
},
|
||||
|
||||
// method to determine whether or not a selected train is running
|
||||
isTrainRunning() {
|
||||
if (store.selectedTrain["TrainStatus"][0] == "R") {
|
||||
@ -72,6 +117,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
#sidebarHeader{
|
||||
position: relative;
|
||||
@ -79,38 +125,135 @@ export default {
|
||||
height: 15%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background-color: rgb(214, 214, 214);
|
||||
box-shadow: 0 0 5px 2px rgb(190, 190, 190);
|
||||
}
|
||||
|
||||
#sidebarDiv{
|
||||
position: absolute;
|
||||
height: 80%;
|
||||
width: 100%;
|
||||
color: rgb(0, 0, 0);
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
|
||||
.headerImage{
|
||||
height: 100%;
|
||||
width: 40px;
|
||||
padding-top: 10px;
|
||||
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.imageDiv{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
#imageDiv{
|
||||
background-color: rgb(230, 230, 230);
|
||||
border-radius: 50%;
|
||||
order:1;
|
||||
}
|
||||
|
||||
#xButton{
|
||||
font-size: 80%;
|
||||
font-size: 16px;
|
||||
font-family: Georgia;
|
||||
color: rgb(0, 0, 0);
|
||||
position: absolute;
|
||||
top:10px;
|
||||
right:10px;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
#xButton:hover{
|
||||
color:red;
|
||||
}
|
||||
|
||||
#originDiv, #destinationDiv{
|
||||
position: relative;
|
||||
width: 40%;
|
||||
font-size: 18px;
|
||||
align-self: center;
|
||||
padding-top: 3%;
|
||||
}
|
||||
#originDiv{
|
||||
order:0;
|
||||
}
|
||||
|
||||
#destinationDiv{
|
||||
order:2;
|
||||
}
|
||||
|
||||
|
||||
/* Sidebar Section Divs */
|
||||
|
||||
#typeDiv, #dateDiv, #positionDiv, #directionDiv, #publicMessageDiv{
|
||||
background-color: rgb(230, 230, 230);
|
||||
height: 12%;
|
||||
position: absolute;
|
||||
right:0px;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
#typeIcon, #dateIcon, #positionIcon, #directionIcon, #publicMessageIcon{
|
||||
background-color: rgb(214, 214, 214);
|
||||
width:20%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left:0px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#publicMessageIcon{
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#typeP, #dateP, #longP, #latP, #directionP, #publicMessageP{
|
||||
font-size: 16px;
|
||||
position: relative;
|
||||
bottom: 2px;
|
||||
width: 40%;
|
||||
left: 22%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#positionParagraphDiv{
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#latP{
|
||||
left: 3%;
|
||||
}
|
||||
|
||||
#publicMessageP{
|
||||
width: 78%;
|
||||
}
|
||||
|
||||
/*Different Icons CSS*/
|
||||
#typeImage{
|
||||
width: 70%;
|
||||
}
|
||||
#dateImage, #positionImage, #directionImage{
|
||||
padding-top: 2px;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
#publicMessageImage{
|
||||
height: 40%;
|
||||
position: relative;
|
||||
top:-10px;
|
||||
}
|
||||
|
||||
/*Positioning rows*/
|
||||
#dateDiv{top: 60px;}
|
||||
#positionDiv{top: 110px;}
|
||||
#directionDiv{top: 160px;}
|
||||
#publicMessageDiv{
|
||||
top:210px;
|
||||
height: 40%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media screen and (max-width: 850px) {
|
||||
.headerImage{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -33,16 +33,20 @@ export default {
|
||||
trainData: {
|
||||
labels: ['Trains', 'Darts'],
|
||||
datasets: [{
|
||||
backgroundColor: ['#41B883', '#E46651', '#00D8FF'],
|
||||
data: [store.insights["numTrains"], store.insights["numDarts"]]
|
||||
backgroundColor: ['#ffdf9e', '#c3eefa', '#00D8FF'],
|
||||
data: [store.insights["numTrains"], store.insights["numDarts"]],
|
||||
borderColor: ['#000000', '#000000', '#00D8FF'],
|
||||
borderWidth: .5
|
||||
}]
|
||||
},
|
||||
|
||||
stationData: {
|
||||
labels: ['Train Stations', 'Dart Stations'],
|
||||
datasets: [{
|
||||
backgroundColor: ['#41B883', '#E46651', '#00D8FF'],
|
||||
data: [store.insights["numTrainStations"], store.insights["numDartStations"]]
|
||||
backgroundColor: ['#ffdf9e', '#c3eefa', '#00D8FF'],
|
||||
data: [store.insights["numTrainStations"], store.insights["numDartStations"]],
|
||||
borderColor: ['#000000', '#000000', '#00D8FF'],
|
||||
borderWidth: .5
|
||||
}]
|
||||
},
|
||||
|
||||
|
||||
@ -6,25 +6,27 @@
|
||||
<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 the below settings</h3>
|
||||
<input v-if="showCurrentPassword" type="text" v-model="currentPassword" placeholder="Enter existing password">
|
||||
<div id="imgDiv1">
|
||||
<img v-if="!showCurrentPassword" id="eyeImg" src="../assets/314858_hidden_eye_icon.png" @click="this.showCurrentPassword = !this.showCurrentPassword" alt="show">
|
||||
<img v-else id = "eyeImg" src="../assets/315220_eye_icon.png" @click="this.showCurrentPassword = !this.showCurrentPassword">
|
||||
</div>
|
||||
|
||||
<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"> -->
|
||||
<!-- <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">
|
||||
<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">
|
||||
<input v-else type="password" v-model="newPassword" placeholder="Enter new password">
|
||||
<div id="imgDiv2">
|
||||
<img v-if="!showNewPassword" id="eyeImg" src="../assets/314858_hidden_eye_icon.png" @click="this.showNewPassword = !this.showNewPassword" alt="show">
|
||||
<img v-else id = "eyeImg" src="../assets/315220_eye_icon.png" @click="this.showNewPassword = !this.showNewPassword">
|
||||
</div>
|
||||
|
||||
<input v-if="!showNewPassword" type="text" v-model="newPassword" placeholder="Enter existing password">
|
||||
<input v-else type="password" v-model="newPassword" placeholder="Enter existing password">
|
||||
|
||||
<!-- <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> -->
|
||||
<button @click="updateUserPassword()" id="passUpdate" type="button" class="btn btn-primary">Update Password</button>
|
||||
|
||||
<button @click="deleteUserPreferences()" id="delPref" type="button" class="btn btn-danger">Delete Map Preferences</button>
|
||||
@ -237,7 +239,7 @@ h3 {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#accountDiv div {
|
||||
#mainDiv{
|
||||
position: inherit;
|
||||
padding: 15px;
|
||||
background-color: rgb(255, 255, 255);
|
||||
@ -246,12 +248,11 @@ h3 {
|
||||
top: 14%;
|
||||
text-align: left;
|
||||
box-shadow: 0 0 4px 4px #b6b6b6;
|
||||
|
||||
}
|
||||
|
||||
#emailUpdate, #passUpdate {
|
||||
position: relative;
|
||||
left:10px;
|
||||
left:40px;
|
||||
width: 26%;
|
||||
}
|
||||
|
||||
@ -272,5 +273,86 @@ input {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left:160px;
|
||||
}
|
||||
|
||||
#imgDiv1{
|
||||
position: absolute;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
top:180px;
|
||||
left: 195px;
|
||||
}
|
||||
|
||||
#imgDiv2{
|
||||
position: absolute;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
bottom:165px;
|
||||
left: 195px;
|
||||
}
|
||||
|
||||
#imgDiv1:hover, #imgDiv2:hover{
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
#eyeImg{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 786px) {
|
||||
|
||||
#mainDiv{
|
||||
position: inherit;
|
||||
padding: 15px;
|
||||
background-color: rgb(255, 255, 255);
|
||||
width: 90%;
|
||||
height: 80%;
|
||||
top: 14%;
|
||||
text-align: left;
|
||||
box-shadow: 0 0 4px 4px #b6b6b6;
|
||||
}
|
||||
|
||||
#delAcc {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left:10px;
|
||||
height: 10%;
|
||||
}
|
||||
|
||||
#delPref {
|
||||
width: 50%;
|
||||
left: 150px;
|
||||
right: 10px;
|
||||
height: 10%;
|
||||
}
|
||||
|
||||
button{
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
#imgDiv1{
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
height: 40px;
|
||||
top:175px;
|
||||
left: 195px;
|
||||
}
|
||||
|
||||
#imgDiv2{
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
height: 40px;
|
||||
bottom:194px;
|
||||
left: 195px;
|
||||
}
|
||||
|
||||
#eyeImg{
|
||||
width:60%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 786px) {
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -71,6 +71,22 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="legendDropdown" class="dropdown">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Legend
|
||||
</button>
|
||||
<div style="padding-bottom: 7px; padding-left:7px;" id="dropMenu" class="dropdown-menu" aria-labelledby="dropdownMenuButton1" v-on:click.stop="handleClick">
|
||||
<dl>
|
||||
<dt style="color:red;">Red</dt>
|
||||
<dd>Late Train</dd>
|
||||
<dt style="color:green;">Green</dt>
|
||||
<dd>Early/On Time Train</dd>
|
||||
<dt style="color:black;">Black</dt>
|
||||
<dd>Terminated/Not Yet Running Train</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
<transition id="sidebar" name="slideLeft">
|
||||
<div v-if="store.displaySelectedTrain && store.selectedTrain">
|
||||
<TrainSidebar />
|
||||
@ -547,24 +563,28 @@ export default {
|
||||
#searchContainer{
|
||||
position: absolute;
|
||||
top: 11%;
|
||||
background-color: #ffffff;
|
||||
background-color: #6e757d;
|
||||
width: 190px;
|
||||
height: 40px;
|
||||
z-index: 3;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: black;
|
||||
box-shadow: 0 0 5px 2px #6e757dbe;
|
||||
box-shadow: 0 0 5px 2px #6e757d;
|
||||
border-radius: 6%;
|
||||
}
|
||||
|
||||
::placeholder{
|
||||
color: white;
|
||||
}
|
||||
#searchBar{
|
||||
text-align: center;
|
||||
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
|
||||
color: white;
|
||||
background-color: #6e757d;
|
||||
border: none;
|
||||
border-bottom: 1px solid black;
|
||||
border-bottom: 1px solid rgb(255, 255, 255);
|
||||
z-index: 3;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
|
||||
@ -575,6 +595,13 @@ export default {
|
||||
top: 11%;
|
||||
}
|
||||
|
||||
#legendDropdown {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
right: 1%;
|
||||
top: 18%;
|
||||
}
|
||||
|
||||
#prefHeader {
|
||||
font-size: 18px;
|
||||
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
|
||||
@ -585,7 +612,7 @@ export default {
|
||||
#sidebar {
|
||||
position: absolute;
|
||||
height: 80%;
|
||||
width: 20%;
|
||||
width: 30%;
|
||||
left: 2%;
|
||||
top: 14%;
|
||||
z-index: 2;
|
||||
@ -605,8 +632,8 @@ export default {
|
||||
position: relative;
|
||||
}
|
||||
.slideLeft-enter-active, .slideLeft-leave-active {
|
||||
transition: opacity .5s;
|
||||
transition: all 0.8s;
|
||||
transition: opacity .8s;
|
||||
transition: all 1.2s;
|
||||
|
||||
}
|
||||
.slideLeft-enter-from, .slideLeft-leave-to {
|
||||
@ -635,7 +662,8 @@ export default {
|
||||
color: black;
|
||||
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
|
||||
text-align: bottom;
|
||||
font-size: 16px;
|
||||
font-size: 18px;
|
||||
height: 4.2vh;
|
||||
}
|
||||
|
||||
/* Phone Screen CSS */
|
||||
@ -653,26 +681,26 @@ export default {
|
||||
display: flex;
|
||||
justify-content: left;
|
||||
z-index: 3;
|
||||
}
|
||||
}
|
||||
|
||||
#searchBar{
|
||||
width: 100px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#searchContainer{
|
||||
position: absolute;
|
||||
top: 11%;
|
||||
left: 10px;
|
||||
background-color: #ffffff;
|
||||
width: 120px;
|
||||
height: 40px;
|
||||
z-index: 3;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: black;
|
||||
box-shadow: 0 0 5px 2px #6e757dbe;
|
||||
border-radius: 6%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.slideLeft-enter-from, .slideLeft-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(-750px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user