Dodanie opcji sortowania (W.I.P.), zmiana czcionki

src/components/ui/Card.vue

@@ -168,6 +168,7 @@ export default Vue.extend({
 .card {
   display: flex;
   flex-direction: column;
+
   position: fixed;
   top: 50%;
   left: 50%;

src/components/ui/Icon.vue

@@ -0,0 +1,10 @@
+<template>
+  <img class="icon" :src="require(`@/assets/icon-${name}.svg`)" alt />
+</template>
+
+<script lang="ts">
+import Vue from "vue";
+export default Vue.extend({
+  props: ["name"]
+});
+</script>

src/components/ui/List.vue

@@ -2,33 +2,29 @@
   <div class="list flex">
     <Card :stationInfo="focusedStationInfo" :closeCard="closeCard" />
 
-    <!-- <div class="info">Ups! Brak stacji do wyświetlenia!</div> -->
+    <!-- <div class="info" v-if="stations.length == 0">Ups! Brak stacji do wyświetlenia!</div> -->
 
-    <div class="table-wrapper">
-      <table class="table" v-if="stations.length > 0">
+    <div class="table-wrapper" v-if="stations.length > 0">
+      <table class="table">
         <thead>
           <tr>
-            <th>Stacja</th>
-            <th>Status</th>
-            <th>Dyżurny</th>
-            <th>Poziom</th>
-            <th>Maszyniści</th>
-            <th>
-              Informacje
-              <div>ogólne</div>
-            </th>
-            <th>
-              Szlaki
-              <div>2-torowe</div>
-            </th>
-            <th>
-              Szlaki
-              <div>1-torowe</div>
+            <th v-for="(head, i) in headTitles" :key="i" @click="() => changeSorter(i)">
+              <span>
+                <div>
+                  <div>{{head[0]}}</div>
+                  <div v-if="head.length > 1">{{head[1]}}</div>
+                </div>
+
+                <Icon
+                  :name="`arrow-${sorterActive.type == 1 ? 'asc' : 'desc'}`"
+                  v-if="sorterActive.index == i"
+                />
+              </span>
             </th>
           </tr>
         </thead>
 
-        <tbody>
+        <transition-group tag="tbody" name="table-anim">
           <tr
             class="table-item"
             v-for="(station, i) in computedStations"
@@ -51,7 +47,7 @@
               <span
                 v-if="station.online"
                 :style="calculateStyle(station.dispatcherExp)"
-              >{{station.dispatcherExp}}</span>
+              >{{station.dispatcherExp < 2 ? 'L' : station.dispatcherExp}}</span>
             </td>
             <td
               class="users"
@@ -121,7 +117,7 @@
               >{{station.routes.oneWay.noCatenary}}</span>
             </td>
           </tr>
-        </tbody>
+        </transition-group>
       </table>
     </div>
   </div>
@@ -132,21 +128,105 @@ import Vue from "vue";
 import { mapGetters } from "vuex";
 
 import Card from "@/components/ui/Card.vue";
+import Icon from "@/components/ui/Icon.vue";
 
 export default Vue.extend({
   name: "List",
   components: {
-    Card
+    Card,
+    Icon
   },
   data: () => ({
-    focusedStationName: ""
+    focusedStationName: "",
+    sorterActive: { index: 0, type: 1 },
+    headTitles: [
+      ["Stacja"],
+      ["Status"],
+      ["Dyżurny"],
+      ["Poziom"],
+      ["Maszyniści"],
+      ["Informacje", "ogólne"],
+      ["Szlaki", "dwutorowe"],
+      ["Szlaki", "jednotorowe"]
+    ]
   }),
   computed: {
     ...mapGetters({ stations: "getStations" }),
     computedStations() {
-      return this.stations.sort((a: any, b: any) =>
-        a.stationName < b.stationName ? -1 : 1
-      );
+      let sortFun;
+      const type: number = this.sorterActive.type;
+
+      const sortByName = (a, b) => {
+        if (a.stationName > b.stationName) return type;
+        if (a.stationName < b.stationName) return -type;
+      };
+
+      switch (this.sorterActive.index) {
+        case 0:
+        default:
+          sortFun = sortByName;
+          break;
+
+        case 1:
+          sortFun = (a, b) => {
+            if (a.occupiedTo > b.occupiedTo) return type;
+            if (a.occupiedTo < b.occupiedTo) return -type;
+
+            sortByName(a, b);
+
+            return 0;
+          };
+          break;
+
+        case 2:
+          sortFun = (a, b) => {
+            if (a.dispatcherName > b.dispatcherName) return type;
+            if (a.dispatcherName < b.dispatcherName) return -type;
+
+            sortByName(a, b);
+
+            return 0;
+          };
+          break;
+
+        case 3:
+          sortFun = (a, b) => {
+            if (a.dispatcherExp > b.dispatcherExp) return type;
+            if (a.dispatcherExp < b.dispatcherExp) return -type;
+
+            // TO DO: naprawić bugujące się sortowanie
+
+            // sortByName(a, b);
+
+            return 0;
+          };
+          break;
+
+        case 4:
+          sortFun = (a, b) => {
+            if (a.currentUsers > b.currentUsers) return type;
+            if (a.currentUsers < b.currentUsers) return -type;
+
+            sortByName(a, b);
+
+            return 0;
+          };
+          break;
+
+        case 5:
+          sortFun = (a, b) => {
+            if (a.currentUsers > b.currentUsers) return type;
+            if (a.currentUsers < b.currentUsers) return -type;
+
+            if (a.maxUsers > b.maxUsers) return type;
+            if (a.maxUsers < b.maxUsers) return -type;
+
+            return 0;
+          };
+          break;
+      }
+
+      return this.stations.sort(sortFun);
     },
     focusedStationInfo() {
       return this.stations.find(
@@ -155,9 +235,17 @@ export default Vue.extend({
     }
   },
   methods: {
+    changeSorter(index: number) {
+      if (index >= 5) return;
+
+      if (index == this.sorterActive.index)
+        this.sorterActive.type = this.sorterActive.type == 1 ? -1 : 1;
+      else this.sorterActive.type = 1;
+
+      this.sorterActive.index = index;
+    },
     calculateStyle: (exp: string | number) => {
-      const bgColor =
-        exp === "L" ? "#26B0D9" : `hsl(${-exp * 5 + 100},  65%, 50%)`;
+      const bgColor = exp < 2 ? "#26B0D9" : `hsl(${-exp * 5 + 100},  65%, 50%)`;
       const fontColor = exp > 15 ? "white" : "black";
 
       return `backgroundColor: ${bgColor}; color: ${fontColor}`;
@@ -276,9 +364,25 @@ export default Vue.extend({
     font-size: 0.75rem;
   }
 
-  thead th {
+  th {
     padding: 0.3rem;
     background-color: #444;
+    min-width: 150px;
+
+    cursor: pointer;
+    user-select: none;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+
+    span {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      & > img {
+        width: 1.5em;
+      }
+    }
   }
 
   tr {

src/components/ui/OptionCard.vue

@@ -1,14 +1,14 @@
 <template>
-  <transition name="slide">
-    <section class="filter-card">
+  <transition name="appear">
+    <section class="option-card">
       <div class="card-exit" @click="exit">
         <img :src="require('@/assets/icon-exit.svg')" alt="exit icon" />
       </div>
 
-      <div class="card-title flex">FILTRY</div>
+      <div class="card-title flex">FILTRUJ STACJE</div>
 
       <div class="card-options">
-        <div class="option" v-for="(option, i) in options" :key="i">
+        <div class="option" v-for="(option, i) in inputs.options" :key="i">
           <label class="option-label">
             <input
               class="option-input"
@@ -24,8 +24,12 @@
         </div>
       </div>
 
+      <div class="card-sorts">
+        <!-- <div class="sort" v-for="(sort, i) in inputs.sorts" :key="i">{{ sort.content }}</div> -->
+      </div>
+
       <div class="card-sliders">
-        <div class="slider" v-for="(slider, i) in sliders" :key="i">
+        <div class="slider" v-for="(slider, i) in inputs.sliders" :key="i">
           <input
             class="slider-input"
             type="range"
@@ -51,225 +55,79 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component } from "vue-property-decorator";
-import { mapActions } from "vuex";
+import { Vue, Component, Prop } from "vue-property-decorator";
+import { Action } from "vuex-class";
 
-export default Vue.extend({
-  name: "list-filter",
-  data: () => ({
-    options: [
-      {
-        id: "is-default",
-        name: "default",
-        section: "access",
-        value: true,
-        defaultValue: true,
-        content: "W PACZCE"
-      },
-      {
-        id: "not-default",
-        name: "notDefault",
-        section: "access",
-        value: true,
-        defaultValue: true,
-        content: "POZA PACZKĄ"
-      },
-      {
-        id: "non-public",
-        name: "nonPublic",
-        section: "access",
-        value: true,
-        defaultValue: true,
-        content: "NIEPUBLICZNA"
-      },
-      {
-        id: "SPK",
-        name: "SPK",
-        section: "control",
-        value: true,
-        defaultValue: true,
-        content: "SPK"
-      },
-      {
-        id: "SCS",
-        name: "SCS",
-        section: "control",
-        value: true,
-        defaultValue: true,
-        content: "SCS"
-      },
-      {
-        id: "by-hand",
-        name: "ręczne",
-        section: "control",
-        value: true,
-        defaultValue: true,
-        content: "RĘCZNE"
-      },
-      {
-        id: "levers",
-        name: "mechaniczne",
-        section: "control",
-        value: true,
-        defaultValue: true,
-        content: "MECHANICZNE"
-      },
-      {
-        id: "modern",
-        name: "współczesna",
-        section: "signals",
-        value: true,
-        defaultValue: true,
-        content: "WSPÓŁCZESNA"
-      },
-      {
-        id: "semaphore",
-        name: "kształtowa",
-        section: "signals",
-        value: true,
-        defaultValue: true,
-        content: "KSZTAŁTOWA"
-      },
-      {
-        id: "mixed",
-        name: "mieszana",
-        section: "signals",
-        value: true,
-        defaultValue: true,
-        content: "MIESZANA"
-      },
-      {
-        id: "historic",
-        name: "historyczna",
-        section: "signals",
-        value: true,
-        defaultValue: true,
-        content: "HISTORYCZNA"
-      },
+import inputData from "@/data/options.json";
 
-      {
-        id: "free",
-        name: "free",
-        section: "status",
-        value: false,
-        defaultValue: false,
-        content: "WOLNA"
-      },
-      {
-        id: "occupied",
-        name: "occupied",
-        section: "status",
-        value: true,
-        defaultValue: true,
-        content: "ZAJĘTA"
-      },
-      {
-        id: "ending",
-        name: "ending",
-        section: "status",
-        value: true,
-        defaultValue: true,
-        content: "KOŃCZY"
-      }
-    ],
+@Component
+export default class OptionCard extends Vue {
+  inputs = { ...inputData };
 
-    sliders: [
-      {
-        id: "min-level",
-        name: "minLevel",
-        minRange: 0,
-        maxRange: 20,
-        value: 0,
-        defaultValue: 0,
-        content: "MINIMALNY WYMAGANY POZIOM DYŻURNEGO"
-      },
-      {
-        id: "min-oneway-e",
-        name: "minOneWayCatenary",
-        minRange: 0,
-        maxRange: 5,
-        value: 0,
-        defaultValue: 0,
-        content: "SZLAKI JEDNOTOROWE ZELEKTR. (MINIMUM)"
-      },
-      {
-        id: "min-oneway-ne",
-        name: "minOneWay",
-        minRange: 0,
-        maxRange: 5,
-        value: 0,
-        defaultValue: 0,
-        content: "SZLAKI JEDNOTOROWE NIEZELEKTR. (MINIMUM)"
-      },
-      {
-        id: "min-twoway-e",
-        name: "minTwoWayCatenary",
-        minRange: 0,
-        maxRange: 5,
-        value: 0,
-        defaultValue: 0,
-        content: "SZLAKI DWUTOROWE ZELEKTR. (MINIMUM)"
-      },
-      {
-        id: "min-twoway-ne",
-        name: "minTwoWay",
-        minRange: 0,
-        maxRange: 5,
-        value: 0,
-        defaultValue: 0,
-        content: "SZLAKI DWUTOROWE NIEELEKTR. (MINIMUM)"
-      }
-    ]
-  }),
-  props: ["exit"],
-  methods: {
-    ...mapActions(["setFilter", "resetFilters"]),
-    handleChange(e: any) {
-      this.setFilter({
-        filterName: e.target.name,
-        value: !e.target.checked
-      });
-    },
-    handleInput(e: any) {
-      this.setFilter({
-        filterName: e.target.name,
-        value: parseInt(e.target.value)
-      });
-    },
-    reset() {
-      this.options.forEach(option => (option.value = option.defaultValue));
-      this.sliders.forEach(slider => (slider.value = slider.defaultValue));
+  mounted() {}
 
-      this.resetFilters();
-    },
-    exitFilters() {
-      this.exit();
-    }
+  @Prop() exit!: () => void;
+
+  @Action("setFilter") setFilter;
+  @Action("resetFilters") resetFilters;
+
+  handleChange(e: Event): void {
+    const target = <HTMLInputElement>e.target;
+
+    this.setFilter({
+      filterName: target.name,
+      value: !target.checked
+    });
   }
-});
+
+  handleInput(e: Event): void {
+    const target = <HTMLInputElement>e.target;
+
+    this.setFilter({
+      filterName: target.name,
+      value: parseInt(target.value)
+    });
+  }
+
+  reset(): void {
+    this.inputs.options.forEach(option => {
+      option.value = option.defaultValue;
+    });
+
+    this.inputs.sliders.forEach(slider => {
+      slider.value = slider.defaultValue;
+    });
+
+    this.resetFilters();
+  }
+
+  closeCard(): void {
+    this.exit();
+  }
+}
 </script>
 
 <style lang="scss" scoped>
 @import "../../styles/responsive";
 @import "../../styles/variables";
 
-.slide-enter-active,
-.slide-leave-active {
+.appear-enter-active,
+.appear-leave-active {
   transition: all 0.3s ease;
 }
 
-.slide-enter,
-.slide-leave-to {
+.appear-enter,
+.appear-leave-to {
   opacity: 0;
 }
 
-.filter-card {
+.option-card {
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
 
-  z-index: 0;
+  z-index: 3;
 
   overflow: auto;
   max-height: 95vh;
@@ -281,12 +139,12 @@ export default Vue.extend({
   background: #262a2e;
 
   font-size: calc(0.75rem + 0.4vw);
+  box-shadow: 0 0 15px 5px #474747;
 
   @include smallScreen() {
     width: 85vw;
     font-size: 1em;
   }
-  box-shadow: 0 0 15px 5px #474747;
 }
 
 .card {
@@ -294,6 +152,7 @@ export default Vue.extend({
     position: absolute;
     top: 0;
     right: 0;
+
     margin: 0.8em;
 
     img {

src/components/ui/Options.vue

@@ -1,30 +1,31 @@
 <template>
   <div class="options">
-    <div class="option-buttons">
-      <button class="button" :class="{'open': filtersOpen}" @click="filtersOpen = !filtersOpen">
-        <img :src="require('@/assets/icon-filter2.svg')" alt="icon-filter" /> FILTRY
+    <div class="options-actions">
+      <button class="action-btn button" :class="{'open': filterCardOpen}" @click="toggleCardState">
+        <img :src="require('@/assets/icon-filter2.svg')" alt="icon-filter" /> OPCJE
       </button>
     </div>
 
     <keep-alive>
-      <ListFilter v-if="filtersOpen" :exit="() => filtersOpen = !filtersOpen" />
+      <OptionCard v-if="filterCardOpen" :exit="toggleCardState" />
     </keep-alive>
   </div>
 </template>
 
 <script lang="ts">
-import Vue from "vue";
-import ListFilter from "@/components/utils/ListFilter.vue";
+import { Vue, Component } from "vue-property-decorator";
+import OptionCard from "@/components/ui/OptionCard.vue";
 
-export default Vue.extend({
-  components: {
-    ListFilter
-  },
-  data: () => ({
-    filtersOpen: false,
-    sortingsOpen: false
-  })
-});
+@Component({
+  components: { OptionCard }
+})
+export default class Options extends Vue {
+  filterCardOpen: boolean = false;
+
+  toggleCardState(): void {
+    this.filterCardOpen = !this.filterCardOpen;
+  }
+}
 </script>
 
 
@@ -34,10 +35,15 @@ export default Vue.extend({
 
 .options {
   font-size: calc(0.6rem + 0.9vw);
+
+  &-actions {
+    display: flex;
+  }
 }
 
-.button {
+.action-btn {
   font-size: 0.75em;
+  margin: 0 0.2em;
 
   img {
     width: 1.3em;