From 937a78061bdb5da06880937036c273b77d210c2d Mon Sep 17 00:00:00 2001
From: J-Lennox10 <jacklennox1@gmail.com>
Date: Tue, 21 Mar 2023 22:38:36 +0000
Subject: [PATCH] Insights super responsive, account settings page made edible

---
 src/components/BarChart.vue |  33 ++--
 src/pages/AccountPage.vue   | 147 +++++++++--------
 src/pages/InsightsPage.vue  | 305 ++++++++++++++++++------------------
 src/pages/MapPage.vue       |   5 +-
 4 files changed, 264 insertions(+), 226 deletions(-)

diff --git a/src/components/BarChart.vue b/src/components/BarChart.vue
index ee872b2..49f6f98 100644
--- a/src/components/BarChart.vue
+++ b/src/components/BarChart.vue
@@ -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>
\ No newline at end of file
diff --git a/src/pages/AccountPage.vue b/src/pages/AccountPage.vue
index 305d084..a497276 100644
--- a/src/pages/AccountPage.vue
+++ b/src/pages/AccountPage.vue
@@ -1,38 +1,37 @@
 <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>
-    <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>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"> -->
+        <!--     <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()" type="submit" name="" value="Update Email">Update email</button>
+        <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">
+        <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="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">
+        <!-- <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>
 
-    <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;
-  cursor: pointer;
+
+h1{
+    color:rgb(163, 163, 163);
+    text-align: center;
 }
 
-button:hover {
-  background-color: darkblue;
+h3{
+    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;
 }
 
-.eye-button {
-  background-color: grey;
+#delAcc{
+    position: absolute;
+    bottom: 10px;
+    left:10px;
 }
 
-#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);
+#delPref{
+    position: absolute;
+    bottom: 10px;
+    left:160px;
 }
 </style>
diff --git a/src/pages/InsightsPage.vue b/src/pages/InsightsPage.vue
index 34662ae..5056aa8 100644
--- a/src/pages/InsightsPage.vue
+++ b/src/pages/InsightsPage.vue
@@ -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>
+            </ul>     
+    </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>
-            
-        </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>
+  </div>
+</div>
 
-<div id="leaderboardTitleDiv">
-    <p>Leaderboard</p>
-    <div id = "leaderboardToggle" class="form-check form-switch">
+<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 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;
+
+
+table {
+  border-spacing: 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{
-    color: #fc1919;
-    text-align: center;
-    width: 100%;
-    z-index:2;
+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>
\ No newline at end of file
diff --git a/src/pages/MapPage.vue b/src/pages/MapPage.vue
index 5292d82..4963932 100644
--- a/src/pages/MapPage.vue
+++ b/src/pages/MapPage.vue
@@ -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);