stacjownik/src/views/StationsView.vue

<template>
  <div class="stations-view">
    <div class="stations-wrapper">
      <div class="stations-body">
        <div class="options">
          <div class="options-actions">
            <button class="action-btn" :class="{ open: filterCardOpen }" @click="() => toggleCardsState('filter')">
              <img :src="require('@/assets/icon-filter2.svg')" alt="icon-filter" />
              <p>FILTRY</p>
            </button>
          </div>
        </div>

        <StationTable
          :stations="computedStations"
          :sorterActive="sorterActive"
          :setFocusedStation="setFocusedStation"
          :changeSorter="changeSorter"
        />
      </div>
    </div>

    <transition name="card-anim">
      <StationCard v-if="focusedStationInfo" :stationInfo="focusedStationInfo" :exit="closeCard" />
    </transition>

    <transition name="card-anim">
      <FilterCard
        v-if="filterCardOpen"
        :exit="() => toggleCardsState('filter')"
        @changeFilterValue="changeFilterValue"
        @resetFilters="resetFilters"
      />
    </transition>
  </div>
</template>

<script lang="ts">
  import { Vue, Component } from "vue-property-decorator";
  import { Getter } from "vuex-class";

  import Station from "@/scripts/interfaces/Station";
  import Train from "@/scripts/interfaces/Train";

  import inputData from "@/data/options.json";

  import StationTable from "@/components/StationsView/StationTable.vue";
  import StationCard from "@/components/StationsView/StationCard.vue";
  import FilterCard from "@/components/StationsView/FilterCard.vue";

  const filterInitStates = {
    default: false,
    notDefault: false,
    nonPublic: false,
    SPK: false,
    SCS: false,
    ręczne: false,
    mechaniczne: false,
    współczesna: false,
    kształtowa: false,
    historyczna: false,
    mieszana: false,
    minLevel: 0,
    minOneWayCatenary: 0,
    minOneWay: 0,
    minTwoWayCatenary: 0,
    minTwoWay: 0,
    "no-1track": false,
    "no-2track": false,
    free: true,
    occupied: false,
    ending: false,
  };

  @Component({
    components: {
      StationCard,
      StationTable,
      FilterCard,
    },
  })
  export default class StationsView extends Vue {
    STORAGE_KEY: string = "options_saved";

    sorterActive: { index: number; dir: number } = { index: 0, dir: 1 };
    focusedStationName: string = "";
    filterCardOpen: boolean = false;
    filters = { ...filterInitStates };

    inputs = inputData;

    @Getter("getStationList") stationList!: Station[];

    toggleCardsState(name: string): void {
      if (name == "filter") {
        this.filterCardOpen = !this.filterCardOpen;
      }
    }

    changeSorter(index: number) {
      if (index > 5) return;

      if (index == this.sorterActive.index) this.sorterActive.dir = -1 * this.sorterActive.dir;
      else this.sorterActive.dir = 1;

      this.sorterActive.index = index;
    }

    changeFilterValue(filter: { name: string; value: number }) {
      this.filters[filter.name] = filter.value;
    }

    resetFilters() {
      this.filters = { ...filterInitStates };
    }

    get computedStations() {
      const dir: number = this.sorterActive.dir;
      // const scheduledTrainList = this.scheduledTrains;

      return this.stationList
        .filter((station) => {
          if (!station.reqLevel || station.reqLevel == "-1") return true;

          if ((station.nonPublic || !station.reqLevel) && this.filters["nonPublic"]) return false;

          if (station.online && station.occupiedTo == "KOŃCZY" && this.filters["ending"]) return false;

          if (station.online && this.filters["occupied"]) return false;
          if (!station.online && this.filters["free"]) return false;

          if (station.default && this.filters["default"]) return false;
          if (!station.default && this.filters["notDefault"]) return false;

          if (parseInt(station.reqLevel) < this.filters["minLevel"]) return false;

          if (
            this.filters["no-1track"] &&
            (station.routes.oneWay.catenary != 0 || station.routes.oneWay.noCatenary != 0)
          )
            return false;
          if (
            this.filters["no-2track"] &&
            (station.routes.twoWay.catenary != 0 || station.routes.twoWay.noCatenary != 0)
          )
            return false;

          if (station.routes.oneWay.catenary < this.filters["minOneWayCatenary"]) return false;
          if (station.routes.oneWay.noCatenary < this.filters["minOneWay"]) return false;

          if (station.routes.twoWay.catenary < this.filters["minTwoWayCatenary"]) return false;
          if (station.routes.twoWay.noCatenary < this.filters["minTwoWay"]) return false;

          if (this.filters[station.controlType]) return false;
          if (this.filters[station.signalType]) return false;

          if (this.filters["SPK"] && (station.controlType === "SPK" || station.controlType.includes("+SPK")))
            return false;
          if (this.filters["SCS"] && (station.controlType === "SCS" || station.controlType.includes("+SCS")))
            return false;

          if (
            this.filters["SCS"] &&
            this.filters["SPK"] &&
            (station.controlType.includes("SPK") || station.controlType.includes("SCS"))
          )
            return false;

          if (this.filters["mechaniczne"] && station.controlType.includes("mechaniczne")) return false;

          if (this.filters["ręczne"] && station.controlType.includes("ręczne")) return false;

          return true;
        })
        .sort((a, b) => {
          switch (this.sorterActive.index) {
            case 1:
              if (parseInt(a.reqLevel) > parseInt(b.reqLevel)) return dir;
              if (parseInt(a.reqLevel) < parseInt(b.reqLevel)) return -dir;
              break;

            case 2:
              if (a.statusTimestamp > b.statusTimestamp) return dir;
              if (a.statusTimestamp < b.statusTimestamp) return -dir;
              break;

            case 3:
              if (a.dispatcherName.toLowerCase() > b.dispatcherName.toLowerCase()) return dir;
              if (a.dispatcherName.toLowerCase() < b.dispatcherName.toLowerCase()) return -dir;
              break;

            case 4:
              if (a.dispatcherExp > b.dispatcherExp) return dir;
              if (a.dispatcherExp < b.dispatcherExp) return -dir;
              break;

            case 5:
              if (a.currentUsers > b.currentUsers) return dir;
              if (a.currentUsers < b.currentUsers) return -dir;
              if (a.maxUsers > b.maxUsers) return dir;
              if (a.maxUsers < b.maxUsers) return -dir;
              break;

            default:
              break;
          }

          if (a.stationName.toLowerCase() >= b.stationName.toLowerCase()) return dir;
          return -dir;
        });
    }

    mounted() {
      const storage = window.localStorage;

      if (storage.getItem(this.STORAGE_KEY) !== "true") return;

      this.inputs.options.forEach((option) => {
        const value = storage.getItem(option.name) === "true" ? true : false;

        this.changeFilterValue({ name: option.name, value: value ? 0 : 1 });
        option.value = value;
      });

      this.inputs.sliders.forEach((slider) => {
        const value = parseInt(storage.getItem(slider.name) || "0");

        this.changeFilterValue({ name: slider.name, value });
        slider.value = value;
      });

      window.addEventListener("keydown", (e: KeyboardEvent) => {
        if (e.keyCode == 27 && this.focusedStationName != "") {
          this.focusedStationName = "";
        }
      });
    }

    closeCard() {
      this.focusedStationName = "";
    }

    setFocusedStation(name: string) {
      if (this.focusedStationName == name) this.focusedStationName = "";
      else this.focusedStationName = name;
    }

    get focusedStationInfo() {
      return this.computedStations.find((station) => station.stationName === this.focusedStationName);
    }
  }
</script>

<style lang="scss" scoped>
  .stations-view {
    padding: 1rem 0;
    min-height: 100%;

    font-size: calc(0.6rem + 0.9vw);

    position: relative;
  }

  @import "../styles/variables.scss";
  @import "../styles/responsive.scss";

  .card-anim {
    &-enter-active,
    &-leave-active {
      transition: all 0.25s ease-in-out;
    }

    &-enter,
    &-leave-to {
      transform: translate(-45%, -50%);
      opacity: 0;
    }
  }

  .options {
    &-actions {
      display: flex;
    }
  }

  .action-btn {
    display: flex;
    align-items: center;

    background: #333;
    border: none;

    color: #e0e0e0;
    font-size: 0.65em;

    padding: 0.3em;

    outline: none;
    cursor: pointer;

    transition: all 0.3s;

    img {
      width: 1.3em;
      margin-right: 0.2em;
    }

    p {
      font-size: 1em;
      overflow: hidden;

      transition: max-width 0.35s ease-in-out;
    }

    &:hover {
      color: $accentCol;
      background: rgba(#e0e0e0, 0.4);
    }

    &.open {
      color: $accentCol;
    }
  }

  @include smallScreen {
    .options {
      display: flex;
      justify-content: center;
    }

    .action-btn {
      font-size: 0.75rem;
    }
  }

  .stations-wrapper {
    display: flex;
    justify-content: center;
  }

  .stations-body {
    margin: 0 auto;
    overflow: auto;
  }
</style>