100 lines
2.4 KiB
Vue
100 lines
2.4 KiB
Vue
<template>
|
|
<div class="container">
|
|
<p class="lead">
|
|
<strong>{{ line.label }}</strong>
|
|
vers
|
|
<strong>{{ destination.label }}</strong>
|
|
<br />
|
|
Descente à <a v-bind:href="'#/station/' + $route.params.station">
|
|
<strong>{{ station.label }}</strong>
|
|
</a>
|
|
</p>
|
|
<img src="../assets/val.svg" :class="{'flipx': isReversed}" />
|
|
<div class="row waggon-row">
|
|
<div class="col waggon-col"
|
|
v-for="waggon in [['1','2','3'],['4','5','6']]"
|
|
:key="waggon.toString()">
|
|
<div class="row">
|
|
<div class="col" v-for="door in waggon" :key="door">
|
|
<img v-for="icon in doors[door]"
|
|
:key="icon"
|
|
:src="icons[icon].path"
|
|
:alt="icons[icon].label"
|
|
:title="icons[icon].label" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<ul>
|
|
<li v-for="(dooricons, code) in doors" v-bind:key="code">
|
|
Porte {{ code }}
|
|
<ul>
|
|
<li v-for="icon in dooricons" v-bind:key="icon">
|
|
{{ icons[icon].label }}
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'Doors',
|
|
data() {
|
|
return {
|
|
line: this.$parent.$data.lines[this.$route.params.line],
|
|
destination: this.$parent.$data.stations[this.$route.params.dest],
|
|
station: this.$parent.$data.stations[this.$route.params.station],
|
|
doorData: this.$parent.$data.stations[this.$route.params.station]
|
|
.doors[this.$route.params.line][this.$route.params.dest],
|
|
icons: this.$parent.$data.icons,
|
|
};
|
|
},
|
|
computed: {
|
|
isReversed() {
|
|
return this.doorData.reverse;
|
|
},
|
|
doors() {
|
|
const doorCopy = { ...this.doorData };
|
|
delete doorCopy.reverse;
|
|
return doorCopy;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
img {
|
|
max-width: 100%;
|
|
}
|
|
.waggon-row {
|
|
margin: 1em 5% 0;
|
|
}
|
|
.waggon-col img {
|
|
margin-right: 0.5em;
|
|
margin-bottom: 0.5em;
|
|
max-width: 30%;
|
|
}
|
|
.waggon-col .col {
|
|
text-align: center;
|
|
padding: 0;
|
|
}
|
|
.waggon-col:first-child {
|
|
padding-left: 1%;
|
|
padding-right: 6%;
|
|
}
|
|
.waggon-col:last-child {
|
|
padding-left: 6%;
|
|
padding-right: 1%;
|
|
}
|
|
.flipx {
|
|
-moz-transform: scaleX(-1);
|
|
-o-transform: scaleX(-1);
|
|
-webkit-transform: scaleX(-1);
|
|
transform: scaleX(-1);
|
|
filter: FlipH;
|
|
-ms-filter: "FlipH";
|
|
}
|
|
</style>
|