add 'select all stations' toggle

src/pages/MapPage.vue

@@ -8,6 +8,10 @@
   <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">Select All Stations</label>
+        </div>
         <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>
@@ -157,6 +161,7 @@ export default {
           toast,
           loader,
 
+          showAllStations: true,
           showMainlandStations: true, 
           showDARTStations: true,
           showLate: true,
@@ -289,6 +294,12 @@ export default {
           }
         },
 
+        // method to select all stations 
+        selectAllStations() {
+            this.showDARTStations = this.showAllStations; 
+            this.showMainlandStations = this.showAllStations;
+        },
+
         // method to display a selected train
         getSelectedTrain(i) {
           store.setSelectedTrain(this.allTrains[i]);
@@ -560,4 +571,4 @@ export default {
   text-align: bottom;
   font-size: 16px;
 }
-</style>
+</style>