Wygląd i polepszenie responsywności z bazą danych

src/views/HistoryView.vue

@@ -8,9 +8,9 @@
 
       <div class="search-box">
         <div class="search-box_content">
-          <label>
+          <label :class="{ disabled: dataLoading }">
-            <select v-model="inputStationName">
+            <select v-model="inputStationName" :disabled="dataLoading">
-              <option value disabled selected hidden>Wybierz scenerię</option>
+              <option value disabled selected hidden>{{ dataLoading ? 'Pobieranie danych...' : 'Wybierz scenerię' }}</option>
               <option v-for="(station) in filteredStationList" :key="station" :value="station">{{ station }}</option>
             </select>
           </label>
@@ -25,17 +25,22 @@
       <div class="list">
         <div class="list_wrapper">
           <!-- <div class="list_loading" v-if="dataLoading">POBIERANIE DANYCH...</div> -->
-          <transition name="list-anim" :key="inputStationName" mode="out-in">
+          <transition name="list-anim" mode="out-in">
-            <ul class="list_content" v-if="!dataLoading && computedHistoryList.length != 0">
+            <ul class="list_content" v-if="!dataLoading && computedHistoryList.length != 0" :key="inputStationName">
               <li v-if="currentDispatcherFrom != -1" class="current">
-                <div class="dispatcher-name">{{ currentDispatcher }}</div>
+                <div class="dispatcher-name">
+                  <a :href="`https://td2.info.pl/profile/?u=${currentDispatcherId}`">{{ currentDispatcher}}</a>
+                </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-name">
+                  <a :href="`https://td2.info.pl/profile/?u=${history.dispatcherId}`">{{ history.dispatcherName }}</a>
+                </div>
                 <div class="dispatcher-date">
                   <div>
                     <span style="color: #888">{{history.dispatcherFromDate }}</span>
@@ -48,7 +53,6 @@
                 </div>
               </li>
             </ul>
-            <div v-if="!dataLoading && inputStationName != ''" class="list_no-info">BRAK ZEBRANYCH DANYCH O RUCHU!</div>
           </transition>
         </div>
       </div>
@@ -69,12 +73,13 @@ interface ISceneryHistory {
   stationHash: string;
   stationName: string;
   currentDispatcher: string;
-  currentDispatcherId: string;
+  currentDispatcherId: number;
   currentDispatcherFrom: number;
   currentDispatcherTo: number;
   dispatcherHistory: {
     dispatcherName: string;
     dispatcherFrom: number;
+    dispatcherId: number;
     dispatcherTo: number;
   }[];
 }
@@ -83,12 +88,31 @@ interface ISceneryHistory {
 export default class HistoryView extends Vue {
   @Getter("getStationList") stationList!: Station[];
 
+  sceneryHistoryList: ISceneryHistory[] = [];
+
   currentSceneryHistory: ISceneryHistory["dispatcherHistory"] = [];
   currentDispatcher: string = "";
+  currentDispatcherId: number = 0;
   currentDispatcherFrom: number = -1;
 
   inputStationName = "";
-  dataLoading = false;
+  dataLoading = true;
+
+  async mounted() {
+    try {
+      const responseData: ISceneryHistory[] = await (
+        await axios.get(
+          "https://stacjownik.herokuapp.com/api/getSceneryHistory"
+        )
+      ).data;
+
+      this.sceneryHistoryList = responseData;
+    } catch (error) {
+      console.error(error);
+    }
+
+    this.dataLoading = false;
+  }
 
   @Watch("inputStationName")
   onInputChanged(val: string) {
@@ -96,55 +120,46 @@ export default class HistoryView extends Vue {
   }
 
   get filteredStationList() {
-    return this.stationList
+    return this.sceneryHistoryList
       .map((station) => station.stationName)
       .sort((a, b) => (a.toLowerCase() >= b.toLowerCase() ? 1 : -1));
   }
 
   get computedHistoryList() {
     return this.currentSceneryHistory
-      .map(({ dispatcherName, dispatcherFrom, dispatcherTo }) => ({
+      .map(
-        dispatcherName,
+        ({ dispatcherName, dispatcherFrom, dispatcherTo, dispatcherId }) => ({
-        dispatcherFrom,
+          dispatcherName,
-        dispatcherTo,
+          dispatcherFrom,
-        dispatcherFromDate: new Date(dispatcherFrom).toLocaleDateString(
+          dispatcherTo,
-          "pl-PL"
+          dispatcherId,
-        ),
+          dispatcherFromDate: new Date(dispatcherFrom).toLocaleDateString(
-        dispatcherFromTime: new Date(dispatcherFrom).toLocaleTimeString(
+            "pl-PL"
-          "pl-PL",
+          ),
-          { hour: "2-digit", minute: "2-digit" }
+          dispatcherFromTime: new Date(
-        ),
+            dispatcherFrom
-        dispatcherToDate: new Date(dispatcherTo).toLocaleDateString("pl-PL"),
+          ).toLocaleTimeString("pl-PL", { hour: "2-digit", minute: "2-digit" }),
-        dispatcherToTime: new Date(dispatcherTo).toLocaleTimeString("pl-PL", {
+          dispatcherToDate: new Date(dispatcherTo).toLocaleDateString("pl-PL"),
-          hour: "2-digit",
+          dispatcherToTime: new Date(dispatcherTo).toLocaleTimeString("pl-PL", {
-          minute: "2-digit",
+            hour: "2-digit",
-        }),
+            minute: "2-digit",
-      }))
+          }),
+        })
+      )
       .reverse();
   }
 
-  async itemSelected(itemName: string) {
+  itemSelected(itemName: string) {
-    this.dataLoading = true;
+    const selectedScenery = this.sceneryHistoryList.find(
+      (scenery) => scenery.stationName == itemName
+    );
 
-    try {
+    if (!selectedScenery) return;
-      const responseData: ISceneryHistory = await (
-        await axios.get(
-          `https://stacjownik.herokuapp.com/api/getSceneryHistory?name=${itemName.replaceAll(
-            " ",
-            "_"
-          )}`
-        )
-      ).data;
 
-      this.currentSceneryHistory = responseData.dispatcherHistory;
+    this.currentSceneryHistory = selectedScenery.dispatcherHistory;
-      this.currentDispatcher = responseData.currentDispatcher;
+    this.currentDispatcher = selectedScenery.currentDispatcher;
-      this.currentDispatcherFrom = responseData.currentDispatcherFrom;
+    this.currentDispatcherId = selectedScenery.currentDispatcherId;
-    } catch (error) {
+    this.currentDispatcherFrom = selectedScenery.currentDispatcherFrom;
-      this.currentSceneryHistory = [];
-      this.currentDispatcher = "";
-      this.currentDispatcherFrom = -1;
-    }
-    this.dataLoading = false;
   }
 }
 </script>
@@ -219,6 +234,10 @@ export default class HistoryView extends Vue {
   label {
     position: relative;
 
+    &.disabled::after {
+      color: gray;
+    }
+
     &::after {
       content: "<>";