Merge pull request #61 from 0hAodha/metatoggles

Metatoggles

src/pages/MapPage.vue

@@ -8,44 +8,57 @@
   <div style="padding-bottom: 7px;" id="dropMenu" class="dropdown-menu" aria-labelledby="dropdownMenuButton1" v-on:click.stop="handleClick">
     <div id="prefHeader">STATIONS</div>
       <div class="container-fluid" @change="decideShowStations();">
+        <div class="form-check form-switch">
+          <input @change="selectAllStations();" class="form-check-input" type="checkbox" role="switch" id="showAllStations" v-model="showAllStations"/>
+          <label class="form-check-label" for="showAllStations">All Stations</label>
+        </div>
+        <hr/>
         <div class="form-check form-switch">
           <input class="form-check-input" type="checkbox" role="switch" id="showMainlandStations" v-model="showMainlandStations"/>
-          <label class="form-check-label" for="showMainlandStations">Mainline Stations</label>
+          <label class="form-check-label" for="showMainlandStations">Mainline</label>
         </div>
         <div class="form-check form-switch">
           <input class="form-check-input" type="checkbox" role="switch" id="showDARTStations" v-model="showDARTStations"/>
-          <label class="form-check-label" for="showDARTStations">DART Stations</label>
+          <label class="form-check-label" for="showDARTStations">DART</label>
         </div>
       </div>
+      <hr/>
       <div id="prefHeader">TRAINS</div>
       <div class="container-fluid" @change="decideShowTrains();">
+        <div class="form-check form-switch">
+          <input @change="selectAllTrains();" class="form-check-input" type="checkbox" role="switch" id="showAllTrains" v-model="showAllTrains"/>
+          <label class="form-check-label" for="showAllTrains">All Trains</label>
+        </div>
+        <hr/>
         <div class="form-check form-switch">
           <input class="form-check-input" type="checkbox" role="switch" id="showMainland" v-model="showMainland"/>
-          <label class="form-check-label" for="showMainland">Mainline Trains</label>
+          <label class="form-check-label" for="showMainland">Mainline</label>
-        </div>
-        <div class="form-check form-switch">
-          <input class="form-check-input" type="checkbox" role="switch" id="showLate" v-model="showLate"/>
-          <label class="form-check-label" for="showLate">Late Trains</label>
-        </div>
-        <div class="form-check form-switch">
-          <input class="form-check-input" type="checkbox" role="switch" id="showOnTime" v-model="showOnTime"/>
-          <label class="form-check-label" for="showOnTime">On-time Trains</label>
         </div>
         <div class="form-check form-switch">
           <input class="form-check-input" type="checkbox" role="switch" id="showDART" v-model="showDART"/>
           <label class="form-check-label" for="showDART">DARTs</label>
         </div>
+        <hr/>
+        <div class="form-check form-switch">
+          <input class="form-check-input" type="checkbox" role="switch" id="showOnTime" v-model="showOnTime"/>
+          <label class="form-check-label" for="showOnTime">On-Time</label>
+        </div>
+        <div class="form-check form-switch">
+          <input class="form-check-input" type="checkbox" role="switch" id="showLate" v-model="showLate"/>
+          <label class="form-check-label" for="showLate">Late</label>
+        </div>
+        <hr/>
+        <div class="form-check form-switch">
+          <input class="form-check-input" type="checkbox" role="switch" id="showNotYetRunning" v-model="showNotYetRunning"/>
+          <label class="form-check-label" for="showNotYetRunning">Not-Yet Running</label>
+        </div>
         <div class="form-check form-switch">
           <input class="form-check-input" type="checkbox" role="switch" id="showRunning" v-model="showRunning"/>
-          <label class="form-check-label" for="showRunning">Running Trains</label>
+          <label class="form-check-label" for="showRunning">Running</label>
         </div>
         <div class="form-check form-switch">
           <input class="form-check-input" type="checkbox" role="switch" id="showTerminated" v-model="showTerminated"/>
-          <label class="form-check-label" for="showTerminated">Terminated Trains</label>
+          <label class="form-check-label" for="showTerminated">Terminated</label>
-        </div>
-        <div class="form-check form-switch">
-          <input class="form-check-input" type="checkbox" role="switch" id="showNotYetRunning" v-model="showNotYetRunning"/>
-          <label class="form-check-label" for="showNotYetRunning">Not-yet Running Trains</label>
         </div>
       </div>
       <button id="savePref" class="btn btn-outline-info" v-if="store.loggedIn" @click="postPreferences()">Save Preferences</button>
@@ -157,8 +170,10 @@ export default {
           toast,
           loader,
 
+          showAllStations: true,
           showMainlandStations: true, 
           showDARTStations: true,
+          showAllTrains: true,
           showLate: true,
           showOnTime: true,
           showMainland: true,
@@ -289,6 +304,23 @@ export default {
           }
         },
 
+        // method to select all stations 
+        selectAllStations() {
+            this.showDARTStations = this.showAllStations; 
+            this.showMainlandStations = this.showAllStations;
+        },
+
+        // method to select all trains 
+        selectAllTrains() {
+          this.showLate = this.showAllTrains; 
+          this.showOnTime = this.showAllTrains;
+          this.showMainland = this.showAllTrains;
+          this.showDART = this.showAllTrains;
+          this.showRunning = this.showAllTrains;
+          this.showTerminated = this.showAllTrains;
+          this.showNotYetRunning = this.showAllTrains;
+        },
+
         // method to display a selected train
         getSelectedTrain(i) {
           store.setSelectedTrain(this.allTrains[i]);
@@ -560,4 +592,4 @@ export default {
   text-align: bottom;
   font-size: 16px;
 }
-</style>
+</style>