feat: added filter options dropdown above table

src/components/FiltersDropdown.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="filters-dropdown">
+    <div class="wrapper">
+      <div class="checkboxes">
+        <label>
+          <input type="checkbox" v-model="mainStore.filters.nonPassenger" />
+          {{ $t('options.checkbox-non-passenger') }}
+        </label>
+
+        <label>
+          <input type="checkbox" v-model="mainStore.filters.terminating" />
+          {{ $t('options.checkbox-terminating') }}
+        </label>
+
+        <label>
+          <input type="checkbox" v-model="mainStore.filters.soundsEnabled" />
+          {{ $t('options.checkbox-sounds') }}
+        </label>
+      </div>
+
+      <hr />
+
+      <div class="selectors">
+        <label for="station" v-if="apiStore.activeData">
+          {{ $t('options.station-name') }}
+          <select id="station" v-model="mainStore.selectedStationName" @change="selectStation">
+            <option
+              v-for="scenery in sceneriesOnline"
+              :value="scenery.stationName"
+              :key="scenery.stationName"
+            >
+              {{ scenery.stationName }}
+            </option>
+          </select>
+        </label>
+
+        <label for="checkpoint">
+          {{ $t('options.checkpoint-name') }}
+          <select id="checkpoint" v-model="mainStore.selectedCheckpointName">
+            <option
+              v-for="checkpointName in mainStore.selectedStation?.stationCheckpoints"
+              :value="checkpointName"
+              :key="checkpointName"
+            >
+              {{ checkpointName }}
+            </option>
+          </select>
+        </label>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { useMainStore } from '../stores/mainStore';
+import { useApiStore } from '../stores/apiStore';
+
+const mainStore = useMainStore();
+const apiStore = useApiStore();
+
+const emits = defineEmits(['stationChanged']);
+
+function selectStation() {
+  emits('stationChanged');
+}
+
+const sceneriesOnline = computed(() => {
+  if (!apiStore.activeData) return [];
+
+  return apiStore.activeData.activeSceneries
+    .filter((station) => {
+      return station.region == mainStore.region && station.isOnline;
+    }, [])
+    .sort((s1, s2) => s1.stationName.localeCompare(s2.stationName));
+});
+</script>
+
+<style lang="scss" scoped>
+.filters-dropdown {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  width: 100%;
+  max-width: 400px;
+  height: auto;
+}
+
+.wrapper {
+  background-color: rgba(0, 0, 0, 0.95);
+  padding: 0.5em;
+  border-radius: 0.5em 0 0.5em 0.5em;
+}
+
+.checkboxes label,
+.selectors label {
+  display: block;
+  text-align: left;
+  padding: 0.25em;
+}
+</style>

src/locales/en.json

@@ -12,10 +12,11 @@
     "header-5": "DELAYED"
   },
   "options": {
-    "header": "Options",
+    "btn-title": "OPTIONS",
     "checkbox-non-passenger": "Non-passenger trains",
     "checkbox-terminating": "Terminating trains",
     "checkbox-sounds": "Sounds",
-    "checkpoint-name": "Checkpoint:"
+    "checkpoint-name": "Checkpoint:",
+    "station-name": "Scenery:"
   }
 }

src/locales/pl.json

@@ -12,10 +12,11 @@
     "header-5": "OPÓŹNIONY"
   },
   "options": {
-    "header": "Opcje",
+    "btn-title": "OPCJE",
     "checkbox-non-passenger": "Relacje niepasażerskie",
     "checkbox-terminating": "Relacje kończące bieg",
     "checkbox-sounds": "Dźwięki",
-    "checkpoint-name": "Posterunek:"
+    "checkpoint-name": "Posterunek:",
+    "station-name": "Sceneria:"
   }
 }

src/views/PragotronView.vue

@@ -2,36 +2,15 @@
   <div class="pragotron">
     <div class="pragotron_content">
       <div class="pragotron_options">
-        <div class="options-checkboxes">
+        <div v-click-outside="() => (isFiltersDropdownOpen = false)">
-          <label>
+          <button class="options-btn" @click="isFiltersDropdownOpen = !isFiltersDropdownOpen">
-            <input type="checkbox" v-model="mainStore.filters.nonPassenger" />
+            <img src="/icon-options.svg" width="20" alt="" />
-            {{ $t('options.checkbox-non-passenger') }}
+            {{ $t('options.btn-title') }}
-          </label>
+          </button>
 
-          <label>
+          <transition name="filters-anim">
-            <input type="checkbox" v-model="mainStore.filters.terminating" />
+            <filters-dropdown @stationChanged="selectStation()" v-if="isFiltersDropdownOpen" />
-            {{ $t('options.checkbox-terminating') }}
+          </transition>
-          </label>
-
-          <label>
-            <input type="checkbox" v-model="mainStore.filters.soundsEnabled" />
-            {{ $t('options.checkbox-sounds') }}
-          </label>
-        </div>
-
-        <div class="options-checkpoints">
-          <label for="checkpoint">
-            {{ $t('options.checkpoint-name') }}
-            <select id="checkpoint" v-model="mainStore.selectedCheckpointName">
-              <option
-                v-for="cp in mainStore.selectedStation?.stationCheckpoints"
-                :value="cp"
-                :key="cp"
-              >
-                {{ cp }}
-              </option>
-            </select>
-          </label>
         </div>
       </div>
 
@@ -122,6 +101,7 @@ import { defineComponent } from 'vue';
 import { useMainStore } from '../stores/mainStore';
 import { useApiStore } from '../stores/apiStore';
 import { RowIndex, type ITableRow } from '../typings/common';
+import FiltersDropdown from '../components/FiltersDropdown.vue';
 
 const departureInfoEmptyObj: ITableRow = {
   timetableId: -1,
@@ -151,6 +131,8 @@ const departureInfoEmptyObj: ITableRow = {
 };
 
 export default defineComponent({
+  components: { FiltersDropdown },
+
   props: {
     stationName: {
       type: String,
@@ -170,6 +152,8 @@ export default defineComponent({
     includeNonPassenger: true,
     includeArrivals: true,
 
+    isFiltersDropdownOpen: false,
+
     isAnimationRunning: true,
     lastRefreshTime: 0,
 
@@ -362,6 +346,20 @@ export default defineComponent({
         this.mainStore.selectedStation?.stationCheckpoints[0] || this.stationName;
     },
 
+    selectStation() {
+      console.log('xd');
+      this.$router.push({
+        path: '/board',
+        query: {
+          name: this.mainStore.selectedStationName,
+          region: this.mainStore.region
+        }
+      });
+
+      this.selectDefaultCheckpoint();
+      this.shuffleRoutes();
+    },
+
     abbrevStationName(name: string) {
       return name.toUpperCase();
     },
@@ -466,6 +464,19 @@ export default defineComponent({
   }
 }
 
+.filters-anim {
+  &-enter-active,
+  &-leave-active {
+    transition: all 100ms ease-in-out;
+  }
+
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+    transform: translateY(15px);
+  }
+}
+
 /* ************** */
 
 .pragotron {
@@ -475,11 +486,19 @@ export default defineComponent({
 }
 
 .pragotron_options {
+  position: relative;
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-end;
-  flex-wrap: wrap;
   width: 100%;
-  margin-bottom: 0.5em;
+}
+
+.options-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.25em;
+  font-weight: bold;
+  padding: 0.25em 0.5em;
+  border-radius: 0.5em 0.5em 0 0;
 }
 
 .pragotron_content {