From 21e15ef316761e4fbc60ce9617be1d2539f2ac61 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Fri, 8 Oct 2021 12:09:01 +0200
Subject: [PATCH] =?UTF-8?q?Zamiana=20menu=20na=20list=C4=99=20posterunk?=
 =?UTF-8?q?=C3=B3w=20w=20karcie=20scenerii?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../SceneryView/SceneryTimetable.vue          | 45 ++++++++++++-------
 src/store/index.ts                            |  1 -
 src/styles/global.scss                        | 17 +++++++
 3 files changed, 47 insertions(+), 16 deletions(-)

diff --git a/src/components/SceneryView/SceneryTimetable.vue b/src/components/SceneryView/SceneryTimetable.vue
index c8c9c45..96f7cb9 100644
--- a/src/components/SceneryView/SceneryTimetable.vue
+++ b/src/components/SceneryView/SceneryTimetable.vue
@@ -16,17 +16,19 @@
       </a>
     </h3>
 
-    <div class="checkpoints">
-      <select-box
-        v-if="stationInfo && stationInfo.checkpoints"
-        :itemList="
-          stationInfo.checkpoints.map((cp, i) => ({
-            id: cp.checkpointName,
-            value: cp.checkpointName,
-          }))
-        "
-        @selected="selectCheckpoint"
-      ></select-box>
+    <div
+      class="checkpoints"
+      v-if="stationInfo && stationInfo.online && stationInfo.checkpoints"
+    >
+      <button
+        class="checkpoint_item btn--text"
+        :class="{ current: selectedCheckpoint === cp.checkpointName }"
+        v-for="cp in stationInfo.checkpoints"
+        :key="cp.checkpointName"
+        @click="selectCheckpoint(cp)"
+      >
+        {{ cp.checkpointName }}
+      </button>
     </div>
 
     <span class="timetable-item loading" v-if="dataStatus == 0">{{
@@ -207,8 +209,8 @@ export default defineComponent({
       this.selectedCheckpoint = this.stationInfo.checkpoints[0].checkpointName;
     },
 
-    selectCheckpoint(item: { id: number | string; value: string }) {
-      this.selectedCheckpoint = item.value;
+    selectCheckpoint(cp: { checkpointName: string }) {
+      this.selectedCheckpoint = cp.checkpointName;
     },
   },
 
@@ -408,8 +410,21 @@ h3 {
   display: flex;
   justify-content: center;
 
-  & > div {
-    border: 1px solid white;
+  flex-wrap: wrap;
+
+  font-size: 1.2em;
+
+  > .checkpoint_item {
+    &.current {
+      font-weight: bold;
+      color: $accentCol;
+    }
+
+    &:not(:last-child)::after {
+      margin: 0 0.5em;
+      content: "•";
+      color: white;
+    }
   }
 }
 
diff --git a/src/store/index.ts b/src/store/index.ts
index 905f790..1e463bf 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -334,7 +334,6 @@ export const store = createStore<State>({
             statusTimeString: "",
             stationTrains: [],
             scheduledTrains: [],
-            checkpoints: null
           });
 
         return acc;
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 6266360..e439316 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -198,4 +198,21 @@ ul {
   &--grayed {
     color: #ccc;
   }
+}
+
+.btn {
+  &--text {
+    background: none;
+    color: white;
+    font-size: 1em;
+
+    cursor: pointer;
+
+    transition: color 0.3s;
+
+
+    &:hover, &:focus {
+      color: $accentCol;
+    }
+  }
 }
\ No newline at end of file