Przywrócono select box dla stacji z wieloma posterunkami

src/components/Global/SelectBox.vue

@@ -2,7 +2,10 @@
   <div class="select-box">
     <div class="select-box_content">
       <label>
-        <select v-model="selectedItem">
+        <select
+          v-model="selectedItem"
+          :style="bgColor ? 'background-color:' + bgColor : ''"
+        >
           <option value disabled selected hidden>
             {{ title }}
           </option>
@@ -10,8 +13,7 @@
             {{ item.value }}
           </option>
         </select>
-
-        <span> </span>
+        <span class="arrows"></span>
       </label>
     </div>
   </div>
@@ -24,6 +26,7 @@ import { Component, Vue, Prop, Watch, Emit } from "vue-property-decorator";
 export default class SelectBox extends Vue {
   @Prop({ required: true }) title!: string;
   @Prop({ required: true }) itemList!: { id: string | number; value: string }[];
+  @Prop() bgColor!: string;
 
   @Emit("selected")
   onItemSelected() {
@@ -47,19 +50,20 @@ export default class SelectBox extends Vue {
 
 .select-box {
   &_content {
+    // display: inline-block;
+
     position: relative;
-    margin: 0.5em 0;
+    margin: 0.5em auto;
   }
 
   select {
     border: none;
     outline: none;
-    min-width: 10em;
-
-    background-color: #333;
-    border-radius: 0.5em;
 
+    background: #333;
     padding: 0.35em 0.5em;
+    padding-right: 2em;
+    border-radius: 0.5em;
 
     font-size: 1em;
     color: white;
@@ -73,7 +77,13 @@ export default class SelectBox extends Vue {
     transition: all 0.3s;
 
     &:focus {
-      background: #5c5c5c;
+      // border: 1px solid red;
+
+      background: #777;
+
+      option {
+        background: #333;
+      }
     }
   }
 
@@ -81,13 +91,13 @@ export default class SelectBox extends Vue {
     position: relative;
   }
 
-  span {
+  .arrows {
     $arrowCol: #d8d8d8;
     $arrowWidth: 0.35em;
 
     position: absolute;
     top: 20%;
-    right: 0.25em;
+    // right: 0.25em;
 
     pointer-events: none;
 

src/components/SceneryView/SceneryTimetable.vue

@@ -16,28 +16,18 @@
       </a>
     </h3>
 
-    <!-- <div class="select-box" v-if="stationInfo.checkpoints">
-      <div class="option-container">
-        <div class="option-selected" @click="toggleOptionList">
-          <span>{{ selectedOption }}</span>
-          <img :src="require('@/assets/icon-select.svg')" alt="icon-select" />
-        </div>
-
-        <ul class="option-list" :class="{ open: listOpen }">
-          <li
-            class="option-item"
-            v-for="(cp, i) in stationInfo.checkpoints"
-            :key="i"
-            @click="() => chooseOption(cp.checkpointName)"
-          >
-            <input type="option-radio" name="sort" />
-            <label :id="cp.checkpointName">{{ cp.checkpointName }}</label>
-          </li>
-        </ul>
-      </div>
-    </div> -->
-
-    <!-- <select-box></select-box> -->
+    <select-box
+      v-if="stationInfo && stationInfo.checkpoints"
+      :title="selectedOption"
+      :itemList="
+        stationInfo.checkpoints.map((cp, i) => ({
+          id: cp.checkpointName,
+          value: cp.checkpointName,
+        }))
+      "
+      bgColor="#444"
+      @selected="chooseOption"
+    ></select-box>
 
     <span class="timetable-item loading" v-if="dataStatus == 0">{{
       $t("app.loading")
@@ -156,32 +146,24 @@ export default class SceneryTimetable extends Vue {
   listOpen: boolean = false;
   selectedOption: string = "";
 
-  mounted() {
+  loadSelectedOption() {
+    if (!this.stationInfo) return;
     if (!this.stationInfo.checkpoints) return;
+    if (this.selectedOption != "") return;
 
-    if (this.selectedOption == "")
-      this.selectedOption = this.stationInfo.checkpoints[0].checkpointName;
+    this.selectedOption = this.stationInfo.checkpoints[0].checkpointName;
+  }
+
+  mounted() {
+    this.loadSelectedOption();
   }
 
   activated() {
-    if (!this.stationInfo) return;
-    if (!this.stationInfo.checkpoints) return;
-
-    if (this.selectedOption == "")
-      this.selectedOption = this.stationInfo.checkpoints[0].checkpointName;
-  }
-
-  toggleOptionList() {
-    this.listOpen = !this.listOpen;
-  }
-
-  closeOptionList() {
-    this.listOpen = false;
+    this.loadSelectedOption();
   }
 
   chooseOption(name: string) {
     this.selectedOption = name;
-    this.closeOptionList();
   }
 
   get currentURL() {
@@ -255,9 +237,6 @@ h3 {
 }
 
 .select-box {
-  display: flex;
-  justify-content: center;
-
   font-size: 1.2em;
 }