dodano pole do ukrywania szlaków

src/components/TableActions.vue

@@ -64,24 +64,26 @@
       <button @click="changelogVisible = !changelogVisible">{{ changelogVisible ? 'Ukryj' : 'Pokaż' }} changelog</button>
     </div>
 
-    <div class="changelog" v-if="changelogVisible">
+    <Changelog />
+
+    <!-- <div class="changelog" v-if="changelogVisible">
       <h3>Changelog:</h3>
       <hr color="white" />
 
       <div v-html="changelog || 'brak zmian'"></div>
-    </div>
+    </div> -->
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import routesMixin from '../mixins/routesMixin';
 import { useStore } from '../store';
 import { Availability, ChangeProp, HeaderTypes, SceneryRoutesInfo, SceneryRowItem } from '../types/types';
 import { getAvailabilityValue } from '../types/typeUitls';
 import client from '../common/http';
 
 import { version } from '../../package.json';
+import Changelog from './Changelog.vue';
 
 export default defineComponent({
   setup() {
@@ -89,108 +91,78 @@ export default defineComponent({
       store: useStore(),
     };
   },
-
   data() {
     return {
       changelogVisible: false,
       packageVersion: version,
     };
   },
-
-  mixins: [routesMixin],
-
   computed: {
-    changelog() {
-      console.log(this.store.changeList);
-
-      return this.store.changeList
-        .map((changeItem) => {
-          let itemChanges = [];
-
-          if (changeItem.toRemove) return `<b class='text--accent'>${changeItem.name} -></b> do usunięcia`;
-
-          for (let change in changeItem) {
-            let propChange = change as ChangeProp;
-
-            if (/^(id|name)$/.test(propChange)) continue;
-
-            let value = typeof changeItem[propChange] === 'boolean' ? (changeItem[propChange] ? 'TAK' : 'NIE') : changeItem[propChange];
-
-            if (propChange == 'availability') value = getAvailabilityValue(changeItem[propChange] as Availability);
-            if (propChange == 'routesInfo') value = this.getRouteNames(changeItem[propChange] as SceneryRoutesInfo[]);
-
-            itemChanges.push(`<i style='color: white'>${(HeaderTypes as any)[propChange]}:</i> ${value ?? '-'}`);
-          }
-
-          console.log(itemChanges);
-
-          return `<b class='text--accent'>${changeItem.name} -></b> ` + itemChanges.join('; ');
-        })
-        .join(' <br /> ');
-    },
+    //   changelog() {
+    //     return this.store.changeList
+    //       .map((changeItem) => {
+    //         let itemChanges = [];
+    //         if (changeItem.toRemove) return `<b class='text--accent'>${changeItem.name} -></b> do usunięcia`;
+    //         for (let change in changeItem) {
+    //           let propChange = change as ChangeProp;
+    //           if (/^(id|name)$/.test(propChange)) continue;
+    //           let value = typeof changeItem[propChange] === 'boolean' ? (changeItem[propChange] ? 'TAK' : 'NIE') : changeItem[propChange];
+    //           if (propChange == 'availability') value = getAvailabilityValue(changeItem[propChange] as Availability);
+    //           // if (propChange == 'routesInfo') value = this.getRouteNames(changeItem[propChange] as SceneryRoutesInfo[]);
+    //           itemChanges.push(`<i style='color: white'>${(HeaderTypes as any)[propChange]}:</i> ${value ?? '-'}`);
+    //         }
+    //         console.log(itemChanges);
+    //         return `<b class='text--accent'>${changeItem.name} -></b> ` + itemChanges.join('; ');
+    //       })
+    //       .join(' <br /> ');
+    //   },
+    // },
   },
-
   methods: {
     confirmLoadData() {
       const confirmed = confirm('Czy na pewno chcesz odświeżyć dane? Wszelkie niezapisane zmiany zostaną utracone!');
-
       if (confirmed) this.store.fetchSceneriesData();
     },
-
     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();
     },
-
     async signOut() {
       await client.post('/auth/logout');
-
       this.$router.push('/login');
       this.store.removeUserData();
     },
-
     onNotifyCheckboxChange(value: boolean) {
       window.localStorage.setItem('notifyDiscord', Number(value).toString());
     },
-
     async updateListToDb() {
       try {
         const mappedChangeList = this.store.changeList.map((v) => {
           if (/^#/.test(v.id)) {
             return { ...v, id: undefined };
           }
-
           return { ...v };
         });
-
         const updateResData = (await this.store.updateSceneriesData(mappedChangeList)).data;
         this.store.changesResponse = updateResData;
-
         this.store.fetchSceneriesData();
       } catch (error) {
         this.store.alertMessage = 'Ups! Wystąpił błąd podczas zapisywania danych!';
         console.error(error);
       }
     },
-
     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,
         abbr: name.slice(0, 2),
@@ -221,51 +193,29 @@ export default defineComponent({
         availability: 'default',
         id: `#${Math.random().toString(32).substring(2)}`,
       };
-
       this.store.changeList.push({ ...newSt });
       // this.store.changeBackupList[newSt.id] = 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(JSON.stringify(this.store.backupList));
       this.store.changeList = [];
       this.store.stationsToRemove = [];
       this.store.unsavedChanges = false;
       this.store.searchedSceneryName = '';
     },
-
     clearInput() {
       this.store.searchedSceneryName = '';
     },
   },
+  components: { Changelog },
 });
 </script>
 
 <style lang="scss" scoped>
-button {
-  background-color: #3c5a89;
-
-  &:hover:not([data-disabled='true']),
-  &:focus-visible {
-    background-color: lighten($color: #3c5a89, $amount: 10%);
-  }
-
-  &[data-disabled='true'] {
-    user-select: none;
-    -moz-user-select: none;
-    -webkit-user-select: none;
-
-    color: #999;
-  }
-}
-
 .table-actions {
   display: flex;
   flex-direction: column;