Update insights and settings styles

src/components/pieChart.vue

@@ -1,9 +1,8 @@
 <template>
-
+<div v-if="trainChart" class="piechart">
-<div v-if="trainChart">
     <Pie :data="trainData" :options="chartOptions" />
 </div>
-<div v-if="!trainChart">
+<div v-if="!trainChart" class="barchart">
     <Pie :data="stationData" :options="chartOptions" />
 </div>
 
@@ -59,8 +58,7 @@ export default {
 </script>
 
 <style scoped>
-
+div {
-div{
     width: 70%;
 }
 </style>

src/pages/AccountPage.vue

@@ -3,9 +3,9 @@
 <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>
+        <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 Current Password to Edit Account Settings</h3>
+        <h3>Enter your current password to edit the below 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"> -->
@@ -205,28 +205,27 @@ export default {
 
 <style scoped>
 
-h1{
+h1 {
-    color:rgb(163, 163, 163);
+    color:black;
     text-align: center;
 }
 
-h3{
+h3 {
     font-size: 18px;
     padding-top: 20px;
 }
 
-#passReset{
+#passReset {
     font-size: 17px;
     text-decoration: underline;
     color: #39d3fa;
 }
 
-#passReset:hover{
+#passReset:hover {
-    
     color: #3993fa;
     cursor: pointer;
 }
-#accountDiv{
+#accountDiv {
     position:absolute;
     right:0px;
     left:0px;
@@ -238,37 +237,38 @@ h3{
     justify-content: center;
 }
 
-#accountDiv div{
+#accountDiv div {
     position: inherit;
     padding: 15px;
     background-color: rgb(255, 255, 255);
-    width: 600px;
+    width: 45%;
     height: 80%;
-    top:14%;
+    top: 14%;
     text-align: left;
-    box-shadow: 0 0 8px 8px #b6b6b6;
+    box-shadow: 0 0 4px 4px #b6b6b6;
     
 }
 
-#emailUpdate, #passUpdate{
+#emailUpdate, #passUpdate {
     position: relative;
     left:10px;
     width: 26%;
 }
-input{
+
+input {
     border:none;
     border-bottom: 1px solid #000000;
     background: transparent;
     outline: none;
 }
 
-#delAcc{
+#delAcc {
     position: absolute;
     bottom: 10px;
     left:10px;
 }
 
-#delPref{
+#delPref {
     position: absolute;
     bottom: 10px;
     left:160px;

src/pages/InsightsPage.vue

@@ -2,30 +2,28 @@
 <Navbar />
 
 <!-- Table to be shown on screen widths > 1000px -->
-
 <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 v-if="readyToRender" class="piechart"><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 class="card-stats">Trains: {{ this.insights["numTrains"] }}</p></li>
-                <li><p>Darts: {{ this.insights["numDarts"] }}</p></li>
+                <li><p class="card-stats">Darts: {{ this.insights["numDarts"] }}</p></li>
             </ul>
-      
     </div>
   </div>
   <div class="card">
     <h4 style="text-align:center;">Station Insights</h4>
-    <div v-if="readyToRender"><pieChart :id="stationPie" :trainChart="false"/></div>
+    <div v-if="readyToRender" class="piechart"><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 class="card-stats">Trains: {{ this.insights["numTrainStations"] }}</p></li>
-                <li><p>Darts: {{ this.insights["numDartStations"] }}</p></li>
+                <li><p class="card-stats">Darts: {{ this.insights["numDartStations"] }}</p></li>
             </ul>     
     </div>
   </div>
@@ -36,28 +34,26 @@
       <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 class="card-stats">Percentage late: {{ this.insights["percentageLate"] }}%</p></li>
-                <li><p>Percentage early or ontime: {{ this.insights["percentageNotLate"] }}%</p></li>
+                <li><p class="card-stats">Percentage early or ontime: {{ this.insights["percentageNotLate"] }}%</p></li>
             </ul>
     </div>
   </div>
 </div>
 
 <div id="leaderboardTitleDiv"><p>Leaderboard</p></div>
-
-
 <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 class="form-check-label" for="showTopEarliestLatest">Show All Train Entries</label>
-        <label v-else class="form-check-label" for="showTopEarliestLatest">Showing Top & Bottom 3</label>
     </div>
       <thead>
         <tr>
-          <th>CODE</th>
+          <th>Code</th>
           <th>Time</th>
           <th>Type</th>
-          <th>Direction</th>
+          <th>Origin</th>
+          <th>Destination</th>
         </tr>
     </thead>
       <tbody v-if="!showTopEarliestLatest" v-for="train in topEarliestLatest">
@@ -66,7 +62,8 @@
           <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>
+          <td>{{ getOrigin(this.rawData[train.jsonIndex]["PublicMessage"][0]) }}</td>
+          <td>{{ getDestination(this.rawData[train.jsonIndex]["PublicMessage"][0]) }}</td>
         </tr>
       </tbody>
 
@@ -76,12 +73,11 @@
           <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>
+          <td>{{ getOrigin(this.rawData[train.jsonIndex]["PublicMessage"][0]) }}</td>
+          <td>{{ getDestination(this.rawData[train.jsonIndex]["PublicMessage"][0]) }}</td>
         </tr>
       </tbody>
 </table>
-
-
 </template>
     
 <script>
@@ -162,6 +158,19 @@ export default {
           this.toast()
         },
 
+        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") - 1;
+            let startDestination = endOrigin + 4;
+            let endDestination = publicMessage.indexOf("(") - 1;
+            return publicMessage.substring(startDestination, endDestination);
+        },
+
         postTrainAndStationData() {
             const functions = getFunctions(app);
             let host = window.location.hostname
@@ -268,16 +277,19 @@ export default {
 </script>
     
 <style scoped>
-
+.card-text, .card-stats {
-
+    font-size: 17px;
-#trainPie, #stationPie{
-    width: 40%;
-    position: absolute;
-    padding: 10px;
-    top: 20px;
 }
 
-#barChart{
+.piechart {
+    display: flex;
+    justify-content: center;
+    padding-bottom: 0;
+    margin-bottom: 0;
+    height: 53%
+}
+
+#barChart {
     position:relative;
     padding: 10px;
     width: 100%;
@@ -285,10 +297,10 @@ export default {
     height: 40%;
 }
 
-th{
+th {
     padding: 15px;
     text-align: center;
-    font-size: 22px;
+    font-size: 19px;
 }
 
 
@@ -298,12 +310,11 @@ th{
     left: 35%;
 } */
 
-#leaderboardTitleDiv p{
+#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);
 }
 
 
@@ -317,7 +328,7 @@ table {
   width: 100%;
   margin: 0 auto;
   position: relative;
-  font-size: 24px;
+  font-size: 19px;
 }
 *{
     position: relative;
@@ -400,8 +411,10 @@ td.l, th.l{
           content: "Type";
     }
     tbody tr td:nth-child(4):before {
-          content: "Direction";
+          content: "Origin";
+    }
+    tbody tr td:nth-child(5):before {
+          content: "Destination";
     }
-    
 }
 </style>

src/pages/LoginPage.vue

@@ -164,7 +164,7 @@ export default {
 }
 
 #eyeImg:hover{
-  transform: scale(1.3);
+  transform: scale(1.1);
 }
 
 h1 {

src/pages/SignUpPage.vue

@@ -6,7 +6,7 @@
     <h1>Sign Up</h1>
     <p>Email Address</p>
     <input type="email" v-model="email" aria-describedby="emailHelp" placeholder="Enter email">
-    <p>Password (6 or more characters)</p>
+    <p>Password (6+ 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">
@@ -129,7 +129,7 @@ export default {
 }
 
 #eyeImg:hover{
-  transform: scale(1.3);
+  transform: scale(1.1);
 }
 
 h1 {

src/store/new.js

@@ -1,171 +0,0 @@
-import { reactive } from 'vue'
-import { fromLonLat } from 'ol/proj.js';
-import { getFunctions, httpsCallable, connectFunctionsEmulator } from "firebase/functions";
-import app from '../api/firebase';
-
-export const store = reactive({
-    // map and insights data
-    insights: {},
-    latestTrain: {},
-    earliestTrain: {},
-    orderedTrains: [],
-    selectedTrain: {},
-    selectedStation: {},
-    allTrainsJSON: {},
-
-    // side bar
-    displaySelectedTrain: false,
-    displayedSelectedStation: false,
-
-    // login status
-    loggedIn: false,
-    isWaitingForLoginStatus: true,
-
-    setOrderedTrains(unorderedTrains) {
-        // sort in ascending order
-        unorderedTrains.sort((a, b) => {
-            return a.time - b.time
-        })
-        this.orderedTrains = unorderedTrains
-    },
-
-    // method to populate the database for local testing
-    postTrainAndStationData(host) {
-        const functions = getFunctions(app);
-        if (host === '127.0.0.1' || host === 'localhost') {
-            connectFunctionsEmulator(functions, host, 5001);
-        }
-
-        const postTrainData = httpsCallable(functions, 'postLiveTrainData');
-        postTrainData().then(() => {
-            const postStationData = httpsCallable(functions, 'postStationData');
-            postStationData().then(() => {
-            this.getTrainAndStationData(host)
-            })
-        })
-        .catch((error) => {
-            console.log(error.message)
-            //this.showToast(error.message, "red")
-        })
-    },
-
-    // method to fetch live train  and station data from Firestore
-    getTrainAndStationData(host) {
-        const functions = getFunctions(app);
-        if (host === '127.0.0.1' || host == 'localhost') {
-            connectFunctionsEmulator(functions, host, 5001);
-        }
-        const getTrainData = httpsCallable(functions, 'getLiveTrainData');
-        getTrainData().then((response) => {
-            try {
-                if (!response.data) throw new Error("Error fetching live train data from the database")
-                var insights =  {
-                    "totalNumTrains": 0,
-                    "numRunningTrains": 0,
-                    "numLateRunningTrains": 0,
-                    "numTrains": 0,
-                    "numDarts": 0,
-                    "totalNumStations": 0,
-                    "numTrainStations": 0,
-                    "numDartStations": 0
-                };
-
-                var unorderedTrains = [];
-                var currentMessages = [];
-                var latest = null;
-                var earliest = null;
-                var currLatestTime = null;
-                var currEarliestTime = null;
-
-                for (var i=0; i<response.data.length; i++) {
-                    let train = response.data[i];
-                    this.allTrains[i] = train;
-                    this.trainCoordinates[i] = fromLonLat([train["TrainLongitude"][0], train["TrainLatitude"][0]])
-                    insights["totalNumTrains"] += 1
-
-                    // fill showTrains with the default value - true
-                    this.showTrains[i] = true;
-                    if (train["TrainType"][0] == "Train") insights["numTrains"] += 1;
-                    else if (train["TrainType"][0] == "DART") insights["numDarts"] += 1;
-
-                    // filter out \n in public messages
-                    train["PublicMessage"][0] = train["PublicMessage"][0].replace(/\\n/g, ". ");
-                    let publicMessage = train["PublicMessage"][0];
-                    currentMessages.push(publicMessage);
-
-                    // check if the train is running
-                    if (train["TrainStatus"][0] == "R") {
-                        insights["numRunningTrains"] += 1;
-                        let startTimeStr = publicMessage.indexOf("(");
-                        let timeEnd = publicMessage.indexOf(" ", startTimeStr+1);
-                        let num = parseInt(publicMessage.substring(startTimeStr+1, timeEnd))
-                        unorderedTrains.push({"time": num, "jsonIndex": i})
-
-                        // check if the train is late
-                        if (publicMessage[startTimeStr+1] != "-" && publicMessage[startTimeStr+1] != "0") {
-                            insights["numLateRunningTrains"] += 1;
-                            if (!latest) latest = train;
-
-                            // check for a new latest train
-                            if (num > currLatestTime) {
-                                latest = train;
-                                currLatestTime = num;
-                            }
-                        }
-                        // train is early or ontime
-                        else {
-                            if (!earliest) earliest = train;
-                            // check for a new earliest train (early trains are -x mins late)
-                            if (num < currEarliestTime) {
-                                earliest = train;
-                                currEarliestTime = num;
-                            }
-                        }
-                    }
-                }
-
-                // assign results after looping through JSON
-                insights["percentageLate"] = ((insights["numLateRunningTrains"] / insights["numRunningTrains"]) * 100).toFixed(2);
-                insights["percentageNotLate"] = (100 - insights["percentageLate"]).toFixed(2);
-                insights["latestTime"] = currLatestTime;
-                insights["earliestTime"] = currEarliestTime;
-                this.publicMessages = currentMessages;
-
-                // assign the results to the Vue Store
-                store.setEarliestTrain(earliest);
-                store.setLatestTrain(latest);
-                store.setRawData(response.data);
-                store.setOrderedTrains(unorderedTrains);
-
-                const getStationData = httpsCallable(functions, 'getStationData');
-                getStationData().then((response) => {
-                    if (!response.data) throw new Error("Error fetching station from the database");
-                    for (var i=0; i<response.data.length; i++) {
-                        let station = response.data[i];
-                        this.allStations[i] = station;
-                        this.stationCoordinates[i] = fromLonLat([station["StationLongitude"][0], station["StationLatitude"][0]])
-                        insights["totalNumStations"] += 1
-
-                        // setting the station to show on the map by default - true
-                        this.showStations[i] = true; 
-                        if (station["StationType"][0] == "DART") insights["numDartStations"] += 1;
-                        else if (station["StationType"][0] == "Train") insights["numTrainStations"] += 1;
-                        store.setInsights(insights);
-                        loader.hide();
-                        // request the user's preferences
-                        this.getPreferences()
-                    }
-                })
-
-            }
-            catch (error) {
-                //loader.hide()
-                //this.showToast(error.message, "red")
-            }
-        })
-        .catch((error) => {
-            //loader.hide()
-            //this.showToast("Error fetching live data", "red")
-          })
-    }
-})