1.3.5->1.4a: poprawki w wyglądzie, dodanie dziennika ruchu stacji

src/App.vue

@@ -22,7 +22,8 @@
 
           <span class="header_links">
             <router-link class="route" active-class="route-active" to="/" exact>SCENERIE</router-link>/
-            <router-link class="route" active-class="route-active" to="/trains">POCIĄGI</router-link>
+            <router-link class="route" active-class="route-active" to="/trains">POCIĄGI</router-link>/
+            <router-link class="route" active-class="route-active" to="/history">DZIENNIK</router-link>
           </span>
         </div>
       </header>
@@ -59,7 +60,7 @@ export default class App extends Vue {
   @Action("synchronizeData") synchronizeData;
   @Getter("getAllData") data;
 
-  private VERSION = "1.3.6";
+  private VERSION = "1.4a";
 
   async mounted() {
     this.synchronizeData();
@@ -104,12 +105,12 @@ export default class App extends Vue {
   background: $bgCol;
   color: white;
 
-  font-size: calc(1.1rem + 2.1vw);
-
   overflow: hidden;
 
-  @include smallScreen() {
-    font-size: 2.5rem;
+  font-size: calc(0.4rem + 0.4vw);
+
+  @include bigScreen {
+    font-size: 1rem;
   }
 }
 
@@ -132,11 +133,15 @@ export default class App extends Vue {
 
   display: flex;
   justify-content: center;
+
+  @include smallScreen() {
+    font-size: 1.2em;
+  }
 }
 
 .header_brand {
   width: 100%;
-  font-size: 1.1em;
+  font-size: 4.5em;
 
   text-align: center;
 
@@ -149,9 +154,14 @@ export default class App extends Vue {
   display: flex;
   justify-content: space-between;
 
+  font-size: 1.35em;
+
   margin: 0 0.3em;
   padding: 0.2em;
-  font-size: 0.35em;
+
+  @include smallScreen() {
+    font-size: 1.5em;
+  }
 }
 
 .header_links {
@@ -160,8 +170,12 @@ export default class App extends Vue {
 
   border-radius: 0.7em;
 
-  padding: 0.2em;
-  font-size: 0.35em;
+  font-size: 1.2em;
+  padding: 0.5em;
+
+  @include smallScreen() {
+    font-size: 1.4em;
+  }
 }
 
 // COUNTER
@@ -170,8 +184,6 @@ export default class App extends Vue {
   align-items: center;
   color: $accentCol;
 
-  font-size: 1em;
-
   span {
     margin: 0 0.15em;
   }

src/components/App/Clock.vue

@@ -32,9 +32,5 @@ export default Vue.extend({
   display: flex;
   justify-content: center;
   align-items: center;
-
-  @include smallScreen() {
-    font-size: 0.95rem;
-  }
 }
 </style>

src/components/Global/Dropdown.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="dropdown">
+    <div class="dropdown_wrapper">
+      <div class="dropdown_selected" @click="toggleList">
+        {{selectedItem}}
+        <img :src="isListOpen ? arrowAsc : arrowDesc" alt="arrow" />
+      </div>
+      <ul class="dropdown_list" v-if="isListOpen">
+        <li v-for="(item, i) in itemList" @click="selectItem(item)" :key="i">{{item}}</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from "vue-property-decorator";
+
+@Component
+export default class Dropdown extends Vue {
+  arrowDesc = require("@/assets/icon-arrow-desc.svg");
+  arrowAsc = require("@/assets/icon-arrow-asc.svg");
+
+  selectedItem: string = "---";
+  isListOpen: boolean = false;
+
+  @Prop() itemList!: string[];
+
+  mounted() {
+    // this.selectedItem = this.itemList[0];
+  }
+
+  toggleList() {
+    this.isListOpen = !this.isListOpen;
+  }
+
+  selectItem(itemName: string) {
+    this.selectedItem = itemName;
+    this.isListOpen = false;
+
+    this.$emit("itemSelected", this.selectedItem);
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.dropdown {
+  &_wrapper {
+    font-size: 1.15em;
+    min-width: 13em;
+
+    position: relative;
+  }
+
+  &_selected {
+    background-color: #333;
+    padding: 0.2em 0.5em;
+
+    cursor: pointer;
+
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    img {
+      width: 1.35em;
+      vertical-align: middle;
+
+      margin-left: 0.5em;
+    }
+  }
+
+  &_list {
+    position: absolute;
+    width: 100%;
+
+    max-height: 250px;
+    overflow-y: scroll;
+  }
+
+  &_list > li {
+    padding: 0.3em 0.5em;
+    background-color: #666;
+
+    font-size: 0.8em;
+
+    cursor: pointer;
+
+    &:hover {
+      background-color: #555;
+    }
+  }
+}
+</style>

src/components/StationsView/FilterCard.vue

@@ -164,13 +164,12 @@ export default class FilterCard extends Vue {
 
   background: #262a2e;
 
-  font-size: calc(0.75rem + 0.45vw);
+  font-size: 1.5em;
 
   box-shadow: 0 0 15px 5px #474747;
 
   @include smallScreen() {
-    width: 100%;
-    font-size: calc(0.7em + 1.1vw);
+    width: 95%;
   }
 
   @include bigScreen {

src/components/StationsView/Options.vue

@@ -80,8 +80,6 @@ export default class Options extends Vue {
 }
 
 .options {
-  font-size: calc(0.6rem + 0.9vw);
-
   &-actions {
     display: flex;
   }
@@ -95,7 +93,7 @@ export default class Options extends Vue {
   border: none;
 
   color: #e0e0e0;
-  font-size: 0.75em;
+  font-size: 0.4em;
 
   padding: 0.3em;
 

src/components/StationsView/StationTable.vue

@@ -164,7 +164,6 @@
 </template>
 
 <script lang="ts">
-import Vue from "vue";
 import { Component, Prop } from "vue-property-decorator";
 
 import Station from "@/scripts/interfaces/Station";
@@ -253,9 +252,7 @@ section.station_table {
   font-size: calc(0.55rem + 0.35vw);
   font-weight: 500;
 
-  @include smallScreen() {
-    font-size: 0.6rem;
-  }
+  font-size: 1.2em;
 }
 
 .table_wrapper {

src/router/index.ts

@@ -30,6 +30,11 @@ const routes: Array<RouteConfig> = [
     component: () => import('@/views/SceneryView.vue'),
     props: true,
   },
+  {
+    path: '/history',
+    name: 'HistoryView',
+    component: () => import('@/views/HistoryView.vue'),
+  },
 ];
 
 const router = new VueRouter({

src/views/HistoryView.vue

@@ -0,0 +1,167 @@
+<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>
+
+      <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>
+
+            <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>
+                {{ new Date(currentDispatcherFrom).toLocaleTimeString('pl-PL', { hour: '2-digit', minute: '2-digit' })}}
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import axios from "axios";
+
+import { Component, Vue } from "vue-property-decorator";
+import { Getter } from "vuex-class";
+import Dropdown from "@/components/Global/Dropdown.vue";
+
+import Station from "@/scripts/interfaces/Station";
+
+interface ISceneryHistory {
+  _id: string;
+  stationHash: string;
+  stationName: string;
+  currentDispatcher: string;
+  currentDispatcherId: string;
+  currentDispatcherFrom: number;
+  currentDispatcherTo: number;
+  dispatcherHistory: {
+    dispatcherName: string;
+    dispatcherFrom: number;
+    dispatcherTo: number;
+  }[];
+}
+
+@Component({
+  components: {
+    Dropdown,
+  },
+})
+export default class HistoryView extends Vue {
+  @Getter("getStationList") stationList!: Station[];
+
+  currentSceneryHistory: ISceneryHistory["dispatcherHistory"] = [];
+  currentDispatcher: string = "";
+  currentDispatcherFrom: number = -1;
+
+  get sortedList() {
+    return this.stationList
+      .map((v) => v.stationName)
+      .sort((a, b) => (a.toLowerCase() >= b.toLowerCase() ? 1 : -1));
+  }
+
+  async itemSelected(itemName: string) {
+    try {
+      const responseData: ISceneryHistory = await (
+        await axios.get(
+          `https://stacjownik.herokuapp.com/api/getSceneryHistory?name=${itemName.replaceAll(
+            " ",
+            "_"
+          )}`
+        )
+      ).data;
+
+      this.currentSceneryHistory = responseData.dispatcherHistory;
+      this.currentDispatcher = responseData.currentDispatcher;
+      this.currentDispatcherFrom = responseData.currentDispatcherFrom;
+    } catch (error) {
+      this.currentSceneryHistory = [];
+    }
+  }
+}
+</script>
+
+<style scoped lang="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%;
+  }
+
+  &_list > li {
+    display: flex;
+    justify-content: center;
+
+    background: #222;
+    padding: 0.5em 0.3em;
+    margin: 0.3em 0;
+
+    & > div {
+      margin: 0 0.5em;
+    }
+
+    &.current {
+      background: #007200;
+    }
+  }
+}
+
+.list_wrapper {
+  display: flex;
+  justify-content: center;
+}
+</style>

src/views/SceneryView.vue

@@ -96,7 +96,7 @@ h3 {
     display: flex;
     justify-content: center;
 
-    font-size: calc(0.5rem + 0.65vw);
+    font-size: 1.35em;
 
     @include bigScreen() {
       font-size: 1.25rem;

src/views/StationsView.vue

@@ -247,10 +247,10 @@ export default class StationsView extends Vue {
 .stations_view {
   position: relative;
 
+  font-size: 0.95em;
+
   padding: 1rem 0;
   min-height: 100%;
-
-  font-size: calc(0.6rem + 0.9vw);
 }
 
 .stations_wrapper {
@@ -270,6 +270,7 @@ export default class StationsView extends Vue {
 
 .bar_actions {
   display: flex;
+  font-size: 1.25em;
 
   button {
     margin-right: 0.5em;
@@ -285,13 +286,12 @@ export default class StationsView extends Vue {
     justify-content: center;
     align-items: center;
 
-    width: 1.2em;
-    height: 1.2em;
-
+    width: 2.5em;
+    height: 2.5em;
     margin-left: 0.5em;
 
     // background-color: #e68e00;
-    border-radius: 0.5em 0.5em 0 0;
+    border-radius: 1em 1em 0 0;
 
     &.loading {
       background-color: $accentCol;
@@ -306,14 +306,9 @@ export default class StationsView extends Vue {
     }
 
     & > img {
-      width: 0.9em;
+      width: 1.7em;
       animation: blinkAnim 2s ease-in-out infinite forwards;
     }
-
-    @include smallScreen() {
-      width: 1.5em;
-      height: 1.5em;
-    }
   }
 }
 
@@ -325,7 +320,7 @@ export default class StationsView extends Vue {
   border: none;
 
   color: #e0e0e0;
-  font-size: 0.65em;
+  font-size: 1em;
 
   padding: 0.3em;
 
@@ -356,7 +351,7 @@ export default class StationsView extends Vue {
   }
 
   @include smallScreen() {
-    font-size: 0.75rem;
+    font-size: 1.2em;
   }
 }