aindreas/traintracker
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #61 from 0hAodha/metatoggles

Browse Source 
Metatoggles
This commit is contained in:
Conor McNamara
2023-03-20 18:12:40 +00:00
committed by GitHub
parent 5823fab47e 851760fcc6
commit dd4979e5eb
1 changed files with 50 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
src/pages/MapPage.vue
View File

@ -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>
</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>
<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="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>
</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>
<label class="form-check-label" for="showTerminated">Terminated</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>