42 lines
876 B
Vue
42 lines
876 B
Vue
<template>
|
|
<div id="sidebar">
|
|
<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">
|
|
.lineLabel {
|
|
cursor: pointer;
|
|
}
|
|
.lineLabel.selected {
|
|
color: red !important;
|
|
}
|
|
#sidebar {
|
|
hewight: 100%;
|
|
overflow: auto;
|
|
grid-area: sidebar;
|
|
}
|
|
</style>
|