Dodano dziennik stacji (wersja testowa)

src/components/StationsView/Table.vue

@@ -25,7 +25,7 @@
         class="table-item"
         v-for="(station, i) in computedStations"
         :key="i + station.stationHash"
-        @click="() => { if(station.online) setFocusedStation(station.stationName) }"
+        @click="() => {  setFocusedStation(station.stationName) }"
       >
         <td
           class="item-station-name"

src/components/ui/StationCard.vue

@@ -4,7 +4,54 @@
       <img :src="require('@/assets/icon-exit.svg')" alt="exit icon" />
     </div>
 
-    <div class="card-content">
+    <div class="card-history">
+      <div class="history-title title">DZIENNIK STACJI</div>
+
+      <ul class="history-list">
+        <div
+          class="history-info"
+        >Wersja eksperymentalna! Dziennik aktualizowany co 20 minut od 23:00 14 sierpnia 2020r.</div>
+        <li class="history-log" v-for="(log, i) in computedHistory" :key="i">
+          <div class="log-time">
+            <div class="from">
+              <span>
+                {{ new Date(log.occupiedFrom).toLocaleDateString('pl-PL', {
+                day: "2-digit",
+                month: "2-digit",
+                year: "2-digit",
+                }) }}
+              </span>
+              <span>
+                {{ new Date(log.occupiedFrom).toLocaleTimeString('pl-PL', {
+                hour: "2-digit",
+                minute: "2-digit"
+                }) }}
+              </span>
+            </div>
+
+            <div class="to">
+              <span>
+                {{ new Date(log.occupiedTo).toLocaleDateString('pl-PL', {
+                day: "2-digit",
+                month: "2-digit",
+                year: "2-digit",
+                }) }}
+              </span>
+              <span>
+                {{ new Date(log.occupiedTo).toLocaleTimeString('pl-PL', {
+                hour: "2-digit",
+                minute: "2-digit"
+                }) }}
+              </span>
+            </div>
+          </div>
+
+          <div class="log-dispatcher">{{log.dispatcher}}</div>
+        </li>
+      </ul>
+    </div>
+
+    <div class="card-content" :class="{'offline': !stationInfo.online}">
       <div class="main">
         <div class="main-content">
           <span
@@ -68,14 +115,14 @@
         <div
           class="dispatcher-level flex"
           :style="calculateExpStyle(stationInfo.dispatcherExp)"
-        >{{computedExp}}</div>
+        >{{stationInfo.online ? computedExp : ""}}</div>
         <div class="dispatcher-info">
           <div class="dispatcher-name">
             <a
               :href="'https://td2.info.pl/profile/?u=' + stationInfo.dispatcherId"
               target="_blank"
               rel="noopener noreferrer"
-            >{{stationInfo.dispatcherName}}</a>
+            >{{stationInfo.dispatcherName || "---"}}</a>
           </div>
 
           <div class="dispatcher-rate">
@@ -136,19 +183,73 @@
 </template>
 
 <script lang="ts">
-import { Component, Prop } from "vue-property-decorator";
+import { Component, Prop, Watch } from "vue-property-decorator";
 import styleMixin from "@/mixins/styleMixin";
 
+import db from "@/scripts/firebase/firebaseInit";
+
 @Component
 export default class StationCard extends styleMixin {
   @Prop() stationInfo;
+  @Prop() dispatcherHistory;
   @Prop() exit!: void;
 
+  history: any[] = [];
+
   get computedExp(): string {
     return this.stationInfo.dispatcherExp < 2
       ? "L"
       : `${this.stationInfo.dispatcherExp}`;
   }
+
+  toLocaleDate(timestamp: number) {
+    return new Date(timestamp).toLocaleDateString("pl-PL", {
+      hour: "2-digit",
+      minute: "2-digit",
+    });
+  }
+
+  get computedHistory() {
+    return this.history.sort((a, b) => {
+      if (a.occupiedFrom < b.occupiedFrom) return 1;
+      else return -1;
+    });
+  }
+
+  async loadHistory() {
+    const historyRef = await db
+      .collection("history")
+      .doc(this.stationInfo.stationName)
+      .collection("dispatcherHistory")
+      .get();
+
+    this.history = historyRef.docs
+      .filter((doc) => doc.data().occupiedTo != 0)
+      .map((doc) => {
+        const occupiedFrom = doc.data().occupiedFrom;
+        const occupiedTo = doc.data().occupiedTo;
+
+        const sameDay =
+          new Date(occupiedFrom).getDate() == new Date(occupiedTo).getDate();
+
+        return {
+          occupiedFrom,
+          occupiedTo,
+          dispatcher:
+            doc.data().currentDispatcherName || doc.data().dispatcherName,
+          sameDay,
+        };
+      });
+  }
+
+  @Watch("stationInfo")
+  async onStationChange(val: any, oldVal: any) {
+    this.loadHistory();
+  }
+
+  created() {
+    this.loadHistory();
+  }
 }
 </script>
 
@@ -172,18 +273,112 @@ export default class StationCard extends styleMixin {
 
   &-content {
     display: grid;
-    grid-template-areas: "main main" "icons icons" "dispatcher hours" "users spawns";
+    grid-template-areas: "main main" "icons icons" "dispatcher hours" "users spawns" "history history";
     grid-template-columns: repeat(2, minmax(0, 1fr));
     min-width: 200px;
 
     gap: 1.5em;
 
+    margin-bottom: 2.5rem;
+
+    &.offline {
+      .users,
+      .spawns,
+      .dispatcher {
+        filter: grayscale(1);
+        opacity: 0.5;
+      }
+    }
+
     @include smallScreen() {
       grid-template-areas: "main main" "icons icons" "dispatcher dispatcher" "hours hours" "users spawns";
     }
   }
 }
 
+.card-history {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+
+  overflow: hidden;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  // height: 10%;
+  min-height: 0;
+  max-height: 90%;
+  min-width: 100%;
+
+  padding: 0.4rem;
+  // border-radius: 1em 1em 0 0;
+
+  z-index: 5;
+
+  background: rgba($color: #000000, $alpha: 0.9);
+
+  font-size: 1em;
+
+  transition: min-height 150ms ease-in, min-width 150ms ease-in,
+    font-size 150ms ease-in;
+
+  &:hover {
+    min-height: 90%;
+
+    & > .history-list {
+      opacity: 1;
+      max-height: 350px;
+    }
+
+    & > .history-title {
+      font-size: 2em;
+    }
+  }
+}
+
+.history {
+  &-title {
+    transition: font-size 150ms ease-in;
+  }
+
+  &-info {
+    font-size: 1em;
+    color: #999;
+
+    transition: all 150ms ease-in;
+  }
+
+  &-list {
+    max-height: 0;
+    opacity: 0;
+    transition: opacity 150ms;
+
+    font-size: 1em;
+
+    transition: max-height 150ms ease-in-out;
+
+    overflow: auto;
+  }
+
+  &-log {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    padding: 0.5em;
+    margin: 1em;
+
+    background: #333;
+
+    &:nth-child(odd) {
+      background: rgb(92, 92, 92);
+    }
+  }
+}
+
 .main {
   grid-area: main;
   text-align: center;

src/views/StationsView.vue

@@ -5,7 +5,12 @@
 
     <div class="list flex" v-if="connectionState == 2">
       <transition name="card-anim">
-        <StationCard v-if="focusedStationInfo" :stationInfo="focusedStationInfo" :exit="closeCard" />
+        <StationCard
+          v-if="focusedStationInfo"
+          :stationInfo="focusedStationInfo"
+          :dispatcherHistory="dispatcherHistory()"
+          :exit="closeCard"
+        />
       </transition>
       <!-- <div class="info" v-if="stations.length == 0">Ups! Brak stacji do wyświetlenia!</div> -->
 
@@ -61,6 +66,24 @@ export default class StationsView extends Vue {
     else this.focusedStationName = name;
   }
 
+  get dispatcherHistory() {
+    return async () => {
+      let history: any[] = [];
+
+      if (this.focusedStationName != "") {
+        const historyRef = await db
+          .collection("history")
+          .doc(this.focusedStationName)
+          .collection("dispatcherHistory")
+          .get();
+
+        history = historyRef.docs.map((doc) => doc.data());
+      }
+
+      return history;
+    };
+  }
+
   get focusedStationInfo() {
     return this.stations.find(
       (station) => station.stationName === this.focusedStationName
@@ -68,7 +91,6 @@ export default class StationsView extends Vue {
   }
 
   async mounted() {
-    // const { docs } = await db.collection("history").get();
     // docs.forEach((doc) => {
     //   console.log(doc.data());
     // });