station-manager-2.0/src/components/TableActions.vue

<template>
  <div class="table-actions">
    <div class="pane info-pane">
      <div>
        <span v-if="store.user">
          Zalogowany jako <b>{{ store.user.name }}</b>
        </span>
        &bull;
        <span class="info-file" :class="store.dataState">
          <span v-if="store.dataState == 'LOADING'">Ładowanie danych...</span>
          <span v-if="store.dataState == 'LOADED'">Załadowano dane z bazy!</span>
          <span v-if="store.dataState == 'ERROR'">Błąd podczas pobierania danych!</span>
        </span>
        //
        <span class="file-changes" style="color: salmon" v-if="store.unsavedChanges">Niezapisane zmiany!</span>
        <span class="file-changes" style="color: #aaa" v-else>Brak niezapisanych zmian</span>
      </div>
    </div>

    <div class="pane actions-pane">
      <button @click="addNewStation">Dodaj nową stację</button>
      <button @click="confirmLoadData">Odśwież dane</button>
      &nbsp;
      <button @click="confirmUpdateList" :data-disabled="!store.unsavedChanges" :disabled="!store.unsavedChanges">
        Zapisz zmiany
      </button>
      <button @click="signOut">Wyloguj się</button>
    </div>

    <div class="pane notify-pane">
      <label id="notify">
        <input
          type="checkbox"
          v-model="store.notifyDiscord"
          @input="onNotifyCheckboxChange(($event.target as HTMLInputElement)!.checked)"
        />
        <span>
          Powiadom o zmianach: <b>{{ store.notifyDiscord ? 'TAK' : 'NIE' }}</b>
        </span>
      </label>
    </div>

    <div class="pane search-pane">
      <input
        class="search"
        ref="search"
        type="text"
        v-model="store.searchedSceneryName"
        placeholder="Wpisz nazwę scenerii..."
        width="350"
      />

      <button style="margin-left: 0.5em" @click="clearInput">Wyczyść</button>
    </div>
  </div>
</template>

<script lang="ts">
import axios from 'axios';
import { defineComponent } from 'vue';
import dataMixin from '../mixins/dataMixin';
import { useStore } from '../store';
import { SceneryRowItem } from '../types/types';

export default defineComponent({
  setup() {
    return {
      store: useStore(),
    };
  },

  mixins: [dataMixin],

  methods: {
    confirmLoadData() {
      const confirmed = confirm('Czy na pewno chcesz odświeżyć dane? Wszelkie niezapisane zmiany zostaną utracone!');

      if (confirmed) this.loadData();
    },

    confirmRestoreList() {
      const confirmed = confirm(
        'Czy na pewno chcesz zresetować listę do ustawień z pliku? Wszelkie niezapisane zmiany zostaną utracone!'
      );

      if (confirmed) this.restoreList();
    },

    confirmUpdateList() {
      const confirmed = confirm('Czy na pewno chcesz wprowadzić obecne zmiany?');

      if (confirmed) this.updateListToDb();
    },

    signOut() {
      this.store.token = null;
      this.store.isAuthorized = false;

      window.localStorage.removeItem('auth-token');
      window.localStorage.removeItem('user');

      this.$router.push('/login');
    },

    onNotifyCheckboxChange(value: boolean) {
      window.localStorage.setItem('notifyDiscord', Number(value).toString());
    },

    async updateListToDb() {
      try {
        const mappedChangeList = Object.entries(this.store.changeList).map(([k, v]) => {
          return { name: k, ...v };
        });

        await axios.post(
          `${this.API_URL}/manager/updateSceneryList`,
          {
            changeList: mappedChangeList,
            token: this.store.token,
            notify: this.store.notifyDiscord,
          },
          {
            headers: {
              'Content-Type': 'application/json',
              Authorization: `Bearer ${this.store.token}`,
            },
          }
        );

        alert('Zapisano do bazy!');
        this.loadData();
      } catch (error) {
        this.store.alertMessage = 'Ups!  Wystąpił błąd podczas zapisywania danych!';
      }
    },

    addNewStation() {
      const name = prompt('Nazwa nowej scenerii');
      if (!name) return;

      if (
        this.store.stationList.some(
          (station) => station.name.toLocaleLowerCase('pl-PL') == name.toLocaleLowerCase('pl-PL')
        )
      ) {
        this.store.alertMessage = 'Sceneria o takiej nazwie już istnieje!';
        return;
      }

      this.store.newStationsCount++;

      const newSt: SceneryRowItem = {
        name,
        url: '',
        lines: '',
        project: null,
        reqLevel: -1,
        signalType: 'współczesna',
        controlType: 'SCS',
        SUP: false,
        routes: 'Test_1EPB"',
        checkpoints: '',
        authors: '',
        availability: 'default',
      };

      this.store.changeList[name] = { ...newSt };
      this.store.changeBackupList[name] = null;
      this.store.searchedSceneryName = name;

      this.store.unsavedChanges = true;

      this.store.stationList.unshift(newSt);
    },

    restoreList() {
      if (this.store.backupList.length == 0) return;

      this.store.stationList = JSON.parse(this.store.backupList);
      this.store.changeList = {};
      this.store.changeBackupList = {};
      this.store.stationsToRemove = [];
      this.store.unsavedChanges = false;
      this.store.searchedSceneryName = '';
    },

    clearInput() {
      this.store.searchedSceneryName = '';
    },
  },
});
</script>

<style lang="scss" scoped>
button {
  &[data-disabled='true'] {
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;

    color: #999;
  }
}

.info-file {
  color: greenyellow;
}

.info-file.LOADING {
  color: #aaa;
}

.info-file.ERROR {
  color: salmon;
}

#notify-checkbox:checked + label {
  color: gold;
}

.search {
  color: black;

  border: 1px solid white;
  outline: none;
  appearance: none;

  padding: 0.35em 0.4em;
}

.pane {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.actions-pane {
  margin-top: 1em;

  button {
    margin: 0.5em 0.5em 0 0;
  }
}

.notify-pane {
  margin: 1em 0;
}

.search-pane {
  margin-top: 0.5em;
}

label#notify {
  cursor: pointer;
  text-align: center;

  color: #000;

  span {
    padding: 0.3em 0.25em;
    background-color: salmon;
  }

  input {
    display: none;

    &:checked + span {
      background-color: lightblue;
    }
  }
}

@media screen and (max-width: 550px) {
  .pane {
    justify-content: center;
    text-align: center;
  }
}
</style>