54 lines
1.4 KiB
Vue
54 lines
1.4 KiB
Vue
<template>
|
|
<div class="container">
|
|
<p class="lead">
|
|
<strong>{{ line.label }}</strong>
|
|
vers
|
|
<strong>{{ stations[$route.params.dest].label }}</strong>
|
|
</p>
|
|
<h2>Sélectionnez la destination</h2>
|
|
<div class="list-group">
|
|
<a v-for="station in lineStations" :key="station"
|
|
:href="'#/doors/' + $route.params.line + '/' + $route.params.dest + '/' + station"
|
|
class="list-group-item list-group-item-action">
|
|
{{ stations[station].label }}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'LineStations',
|
|
data() {
|
|
return {
|
|
line: this.$parent.$data.lines[this.$route.params.line],
|
|
stations: this.$parent.$data.stations,
|
|
};
|
|
},
|
|
computed: {
|
|
lineStations() {
|
|
return this.line.stations[0] === this.$route.params.dest
|
|
? this.line.stations.slice().reverse()
|
|
: this.line.stations;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.list-group-item {
|
|
padding: 1em 1em 1em 4em;
|
|
min-height: 4em;
|
|
background-image: url('../assets/station.svg');
|
|
background-repeat: no-repeat;
|
|
background-position: 1em 0;
|
|
background-size: contain;
|
|
}
|
|
.list-group-item:first-child {
|
|
background-image: url('../assets/station_first.svg');
|
|
}
|
|
.list-group-item:last-child {
|
|
background-image: url('../assets/station_last.svg');
|
|
}
|
|
</style>
|