1.4: Dodano działający dziennik aktywności scenerii

src/App.vue

@@ -60,7 +60,7 @@ export default class App extends Vue {
   @Action("synchronizeData") synchronizeData;
   @Getter("getAllData") data;
 
-  private VERSION = "1.4a";
+  private VERSION = "1.4";
 
   async mounted() {
     this.synchronizeData();

src/views/HistoryView.vue

@@ -1,43 +1,55 @@
 <template>
   <div class="history_view">
     <div class="history_wrapper">
-      <div class="history_dropdown">
-        <div class="history_title title">Wybierz scenerię</div>
-        <Dropdown :itemList="sortedList" @itemSelected="itemSelected" />
+      <div class="header">
+        <h2>DZIENNIK AKTYWNOŚCI SCENERII</h2>
+        <p style="color: #ccc;">Pokazuje dyżurnych, którzy ostatnio byli aktywni na wybranej scenerii</p>
       </div>
 
-      <div class="history_content">
-        <div class="history_station-name title">DZIENNIK RUCHU DLA SCENERII ALEKSANDRÓW KUJAWSKI</div>
-        <div class="list_wrapper">
-          <ul class="history_list">
-            <li v-for="(history, i) in currentSceneryHistory" :key="i">
-              <div class="history_dispatcher">{{history.dispatcherName }}</div>
-              <div class="history_from">
-                <span
-                  style="color: #888"
-                >{{ new Date(history.dispatcherFrom).toLocaleDateString('pl-PL') }}</span>
-                {{ new Date(history.dispatcherFrom).toLocaleTimeString('pl-PL', { hour: '2-digit', minute: '2-digit' })}}
-              </div>
-              <div>-</div>
-              <div class="history_to">
-                <span
-                  style="color: #888"
-                >{{ new Date(history.dispatcherTo).toLocaleDateString('pl-PL') }}</span>
-                {{ new Date(history.dispatcherTo).toLocaleTimeString('pl-PL', { hour: '2-digit', minute: '2-digit' })}}
-              </div>
-            </li>
+      <div class="search-box">
+        <div class="search-box_content">
+          <label>
+            <select v-model="inputStationName">
+              <option value disabled selected hidden>Wybierz scenerię</option>
+              <option v-for="(station) in filteredStationList" :key="station" :value="station">{{ station }}</option>
+            </select>
+          </label>
+        </div>
+      </div>
 
+      <div class="disclaimer">
+        <h4>Ta funkcjonalność jest w testach beta!</h4>
+        <p>Informacje pokazywane na ekranie mogą znikać, a ich zawartość może być fałszywa!</p>
+      </div>
+
+      <div class="list">
+        <div class="list_wrapper">
+          <div class="list_loading" v-if="dataLoading">POBIERANIE DANYCH...</div>
+          <ul class="list_content" v-else-if="computedHistoryList.length != 0">
             <li v-if="currentDispatcherFrom != -1" class="current">
-              <div class="history_dispatcher">{{ currentDispatcher }}</div>
-              <div class="history_from">
-                DYŻURUJE OD:
-                <span
-                  style="color: #bbb"
-                >{{ new Date(currentDispatcherFrom).toLocaleDateString('pl-PL') }}</span>
+              <div class="dispatcher-name">{{ currentDispatcher }}</div>
+              <div class="dispatcher-date">
+                <span style="color: #bbb">{{ new Date(currentDispatcherFrom).toLocaleDateString('pl-PL') }}</span>
                 {{ new Date(currentDispatcherFrom).toLocaleTimeString('pl-PL', { hour: '2-digit', minute: '2-digit' })}}
               </div>
             </li>
+
+            <li v-for="(history, i) in computedHistoryList" :key="i">
+              <div class="dispatcher-name">{{history.dispatcherName }}</div>
+              <div class="dispatcher-date">
+                <div>
+                  <span style="color: #888">{{history.dispatcherFromDate }}</span>
+                  {{ history.dispatcherFromTime }}
+                </div>
+                <div>
+                  <span style="color: #888">{{ history.dispatcherToDate }}</span>
+                  {{ history.dispatcherToTime }}
+                </div>
+              </div>
+            </li>
           </ul>
+
+          <div v-else-if="inputStationName != ''" class="list_no-info">BRAK ZEBRANYCH DANYCH O RUCHU!</div>
         </div>
       </div>
     </div>
@@ -47,9 +59,8 @@
 <script lang="ts">
 import axios from "axios";
 
-import { Component, Vue } from "vue-property-decorator";
+import { Component, Vue, Watch } from "vue-property-decorator";
 import { Getter } from "vuex-class";
-import Dropdown from "@/components/Global/Dropdown.vue";
 
 import Station from "@/scripts/interfaces/Station";
 
@@ -68,11 +79,7 @@ interface ISceneryHistory {
   }[];
 }
 
-@Component({
-  components: {
-    Dropdown,
-  },
-})
+@Component
 export default class HistoryView extends Vue {
   @Getter("getStationList") stationList!: Station[];
 
@@ -80,13 +87,45 @@ export default class HistoryView extends Vue {
   currentDispatcher: string = "";
   currentDispatcherFrom: number = -1;
 
-  get sortedList() {
+  inputStationName = "";
+  dataLoading = false;
+
+  @Watch("inputStationName")
+  onInputChanged(val: string) {
+    this.itemSelected(val);
+  }
+
+  get filteredStationList() {
     return this.stationList
-      .map((v) => v.stationName)
+      .map((station) => station.stationName)
       .sort((a, b) => (a.toLowerCase() >= b.toLowerCase() ? 1 : -1));
   }
 
+  get computedHistoryList() {
+    return this.currentSceneryHistory
+      .map(({ dispatcherName, dispatcherFrom, dispatcherTo }) => ({
+        dispatcherName,
+        dispatcherFrom,
+        dispatcherTo,
+        dispatcherFromDate: new Date(dispatcherFrom).toLocaleDateString(
+          "pl-PL"
+        ),
+        dispatcherFromTime: new Date(dispatcherFrom).toLocaleTimeString(
+          "pl-PL",
+          { hour: "2-digit", minute: "2-digit" }
+        ),
+        dispatcherToDate: new Date(dispatcherTo).toLocaleDateString("pl-PL"),
+        dispatcherToTime: new Date(dispatcherTo).toLocaleTimeString("pl-PL", {
+          hour: "2-digit",
+          minute: "2-digit",
+        }),
+      }))
+      .reverse();
+  }
+
   async itemSelected(itemName: string) {
+    this.dataLoading = true;
+
     try {
       const responseData: ISceneryHistory = await (
         await axios.get(
@@ -102,66 +141,135 @@ export default class HistoryView extends Vue {
       this.currentDispatcherFrom = responseData.currentDispatcherFrom;
     } catch (error) {
       this.currentSceneryHistory = [];
+      this.currentDispatcher = "";
+      this.currentDispatcherFrom = -1;
     }
+    this.dataLoading = false;
   }
 }
 </script>
 
 <style scoped lang="scss">
+@import "../styles/responsive.scss";
+
 .history {
   &_view {
     font-size: 1.5em;
-
     display: flex;
   }
 
-  &_title {
-    text-align: center;
-    font-size: 1.2em;
-  }
-
   &_wrapper {
     width: 100%;
-  }
-
-  &_dropdown {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    flex-direction: column;
-  }
-
-  &_content {
     text-align: center;
 
     margin-top: 1em;
   }
+}
 
-  &_list {
-    min-width: 45%;
+.disclaimer {
+  color: #aaa;
+}
+
+.search-box {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  &_content {
+    position: relative;
+    margin: 1em 0;
+    font-size: 1em;
   }
 
-  &_list > li {
-    display: flex;
-    justify-content: center;
+  select {
+    border: none;
+    font-size: 1em;
+
+    background-color: rgb(87, 87, 87);
+    padding: 0.3em;
+    padding-right: 50px;
+    outline: none;
+
+    color: white;
+
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+
+    cursor: pointer;
+  }
+
+  label {
+    position: relative;
+
+    &::after {
+      content: "<>";
+
+      position: absolute;
+      top: -5%;
+      right: 0.3em;
+      font-weight: bold;
+    }
+  }
+}
+
+.list {
+  text-align: center;
+  margin: 1em 0;
+
+  display: flex;
+  justify-content: center;
+
+  &_loading,
+  &_no-info {
+    margin: 0.3em 0;
+    padding: 0.5em 2em;
+
+    color: white;
+  }
+
+  &_loading {
+    background-color: #b96b11;
+  }
+
+  &_no-info {
+    background-color: firebrick;
+  }
+
+  &_wrapper {
+    @include smallScreen() {
+      width: 95%;
+      font-size: 0.9em;
+    }
+  }
+
+  &_content > li {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
 
     background: #222;
-    padding: 0.5em 0.3em;
+    padding: 0.5em 0.8em;
     margin: 0.3em 0;
 
+    gap: 10em;
+
+    @include smallScreen() {
+      gap: 1em;
+    }
+
     & > div {
-      margin: 0 0.5em;
+      margin: 0 1em;
     }
 
     &.current {
       background: #007200;
     }
+
+    & > .dispatcher-name {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
   }
 }
-
-.list_wrapper {
-  display: flex;
-  justify-content: center;
-}
 </style>