46 lines
932 B
Vue
46 lines
932 B
Vue
<template>
|
|
<div id="lineSelector">
|
|
<div
|
|
v-for="route of store.routes"
|
|
:key="route.id"
|
|
:class="{
|
|
selected: store.selectedRouteIds.includes(route.id),
|
|
lineLabel: true,
|
|
}"
|
|
:style="{
|
|
background: '#' + route.color,
|
|
color: '#' + route.textColor,
|
|
}"
|
|
@click="selectRoute(route.id)"
|
|
>
|
|
{{ route.type }} : {{ route.shortName }}
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const store = useMresoStore();
|
|
|
|
function selectRoute(routeId: string) {
|
|
navigateTo(`/lines/${routeId}`);
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="css">
|
|
#lineSelector {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
height: 100vh;
|
|
overflow: auto;
|
|
background: white;
|
|
}
|
|
|
|
.lineLabel {
|
|
cursor: pointer;
|
|
}
|
|
.lineLabel.selected {
|
|
color: red !important;
|
|
}
|
|
</style>
|