diff --git a/src/components/SceneryView/SceneryTimetable.vue b/src/components/SceneryView/SceneryTimetable.vue index abdc825..8579bf4 100644 --- a/src/components/SceneryView/SceneryTimetable.vue +++ b/src/components/SceneryView/SceneryTimetable.vue @@ -4,12 +4,15 @@ :station="station" :onlineScenery="onlineScenery" :chosenCheckpoint="chosenCheckpoint" + :showStockThumbnails="showStockThumbnails" + @toggleThumbnails="toggleThumbnails" /> @@ -45,7 +48,8 @@ export default defineComponent({ }, data: () => ({ - listOpen: false + listOpen: false, + showStockThumbnails: false }), activated() { @@ -82,6 +86,10 @@ export default defineComponent({ }, methods: { + toggleThumbnails() { + this.showStockThumbnails = !this.showStockThumbnails; + }, + loadSelectedOption() { const queryCheckpoint = this.$route.query['checkpoint']?.toString(); diff --git a/src/components/SceneryView/SceneryTimetable/SceneryTimetableHeader.vue b/src/components/SceneryView/SceneryTimetable/SceneryTimetableHeader.vue index c15271d..044139e 100644 --- a/src/components/SceneryView/SceneryTimetable/SceneryTimetableHeader.vue +++ b/src/components/SceneryView/SceneryTimetable/SceneryTimetableHeader.vue @@ -39,6 +39,15 @@ > icon-tablice + + @@ -61,9 +70,16 @@ const props = defineProps({ chosenCheckpoint: { type: String, required: true + }, + + showStockThumbnails: { + type: Boolean, + required: true } }); +const emits = defineEmits(['toggleThumbnails']); + const mainStore = useMainStore(); const tabliceZbiorczeHref = computed(() => { @@ -83,6 +99,10 @@ const pragotronHref = computed(() => { const generatorHref = computed(() => { return `https://generator-td2.spythere.eu/?sceneryId=${props.onlineScenery!.name}|${props.onlineScenery!.region}`; }); + +function toggleThumbnails() { + emits('toggleThumbnails'); +} diff --git a/src/components/SceneryView/SceneryTimetable/SceneryTimetableList.vue b/src/components/SceneryView/SceneryTimetable/SceneryTimetableList.vue index 9772bf6..d62d37a 100644 --- a/src/components/SceneryView/SceneryTimetable/SceneryTimetableList.vue +++ b/src/components/SceneryView/SceneryTimetable/SceneryTimetableList.vue @@ -35,15 +35,6 @@ -
-
- -
-
-
= computed(() => { if (!props.onlineScenery) return []; @@ -310,7 +304,7 @@ const sceneryTimetables: ComputedRef = computed(() => { .scenery-timetable-list { display: grid; - grid-template-rows: auto auto 1fr; + grid-template-rows: auto 1fr; overflow: hidden; } @@ -358,26 +352,6 @@ const sceneryTimetables: ComputedRef = computed(() => { } } -.thumbnails-checkbox { - label { - cursor: pointer; - color: #aaa; - } - - input { - width: 0; - outline: none; - } - - input:checked + span { - color: var(--clr-success); - } - - input:focus-visible + span { - outline: 1px solid white; - } -} - .list-container { position: relative; overflow-y: auto; diff --git a/src/locales/pl.json b/src/locales/pl.json index ba1ce1d..6fc4b1d 100644 --- a/src/locales/pl.json +++ b/src/locales/pl.json @@ -558,6 +558,8 @@ "option-active-timetables": "Aktywne rozkłady jazdy", "option-timetables-history": "Historia rozkładów PL1", "option-dispatchers-history": "Historia dyżurów PL1", + "btn-show-timetable-thumbnails": "Pokazuj podglądy składów", + "btn-hide-timetable-thumbnails": "Ukrywaj podglądy składów", "timetable-includesScenery": "WSZYSTKIE RJ", "timetable-via": "PRZEJEŻDŻA", "timetable-issuedFrom": "ROZPOCZYNA BIEG",