From a8ddac118f60d8670ba410f694daf1f4ccefc292 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Thu, 4 Jan 2024 15:33:59 +0100
Subject: [PATCH] poprawki changeloga

---
 src/components/Changelog.vue    | 82 ++++++++++++++++-----------------
 src/components/RoutesModal.vue  |  3 +-
 src/components/TableActions.vue | 53 +++------------------
 src/mixins/changeMixin.ts       | 10 ++--
 src/store.ts                    |  6 ++-
 src/types/types.ts              |  1 -
 src/views/ManagerView.vue       |  2 +
 7 files changed, 58 insertions(+), 99 deletions(-)

diff --git a/src/components/Changelog.vue b/src/components/Changelog.vue
index 62cebc4..c5e4b68 100644
--- a/src/components/Changelog.vue
+++ b/src/components/Changelog.vue
@@ -4,35 +4,37 @@
     <hr color="white" />
 
     <!-- Changelog -->
-    <div v-for="(item, listIndex) in changeList" :key="listIndex">
-      <b class="text--accent">{{ item.name }}</b> ->
+    <ul>
+      <li v-for="(item, listIndex) in changeList" :key="listIndex">
+        <b class="text--accent">{{ item.name }}</b> ->
 
-      <!-- Info dla scenerii do usunięcia -->
-      <span v-if="item.toRemove" class="text--accent"> do usunięcia</span>
+        <!-- Info dla scenerii do usunięcia -->
+        <span v-if="item.toRemove" class="text--accent"> do usunięcia</span>
 
-      <!-- Info dla scenerii do ze zmianiami do zaktualizowania -->
-      <span v-else>
-        <span v-for="({ name: changeName, value: changeValue }, changeIndex) in item.changes" :key="changeIndex">
-          <i style="color: white">{{ (HeaderTypes as any)[changeName] }}: </i>
+        <!-- Info dla scenerii do ze zmianiami do zaktualizowania -->
+        <span v-else>
+          <span v-for="({ name: changeName, value: changeValue }, changeIndex) in item.changes" :key="changeIndex">
+            <i style="color: white">{{ (HeaderTypes as any)[changeName] }}: </i>
 
-          <span v-if="changeName == 'availability'">
-            {{ getAvailabilityValue(changeValue as Availability) }}
+            <span v-if="changeName == 'availability'">
+              {{ getAvailabilityValue(changeValue as Availability) }}
+            </span>
+
+            <RouteList v-else-if="changeName == 'routesInfo'" :routes="changeValue" />
+
+            <span v-else-if="typeof changeValue === 'boolean'">
+              {{ changeValue ? 'TAK' : 'NIE' }}
+            </span>
+
+            <span v-else>
+              {{ changeValue }}
+            </span>
+
+            <span v-if="changeIndex < item.changes.length - 1">; </span>
           </span>
-
-          <RouteList v-else-if="changeName == 'routesInfo'" :routes="changeValue" />
-
-          <span v-else-if="typeof changeValue === 'boolean'">
-            {{ changeValue ? 'TAK' : 'NIE' }}
-          </span>
-
-          <span v-else>
-            {{ changeValue }}
-          </span>
-
-          <span v-if="changeIndex < item.changes.length - 1">; </span>
         </span>
-      </span>
-    </div>
+      </li>
+    </ul>
   </div>
 </template>
 
@@ -63,27 +65,21 @@ export default defineComponent({
         };
       });
     },
-    //  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 /> ');
-    //  },
   },
   components: { RouteList },
 });
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+ul {
+  height: 200px;
+  overflow: auto;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+h3 {
+  margin: 0;
+}
+</style>
diff --git a/src/components/RoutesModal.vue b/src/components/RoutesModal.vue
index 1578f6d..c7b4456 100644
--- a/src/components/RoutesModal.vue
+++ b/src/components/RoutesModal.vue
@@ -174,11 +174,10 @@ export default defineComponent({
 
       if (index == -1) return;
 
-      const routeString = this.parseRoutes();
+      // const routeString = this.parseRoutes();
 
       this.addChange(this.store.currentStation!, 'routesInfo', this.routeBackup, this.currentRoutes);
       this.store.stationList[index]['routesInfo'] = this.currentRoutes;
-      // this.currentRoutes.push(this.cur)
     },
   },
 });
diff --git a/src/components/TableActions.vue b/src/components/TableActions.vue
index f207d7f..a301af8 100644
--- a/src/components/TableActions.vue
+++ b/src/components/TableActions.vue
@@ -61,25 +61,19 @@
     </div>
 
     <div class="pane">
-      <button @click="changelogVisible = !changelogVisible">{{ changelogVisible ? 'Ukryj' : 'Pokaż' }} changelog</button>
+      <button @click="changelogVisible = !changelogVisible">
+        {{ changelogVisible ? 'Ukryj' : 'Pokaż' }} changelog ({{ store.changeList.length }})
+      </button>
     </div>
 
-    <Changelog />
-
-    <!-- <div class="changelog" v-if="changelogVisible">
-      <h3>Changelog:</h3>
-      <hr color="white" />
-
-      <div v-html="changelog || 'brak zmian'"></div>
-    </div> -->
+    <Changelog v-if="changelogVisible" />
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { useStore } from '../store';
-import { Availability, ChangeProp, HeaderTypes, SceneryRoutesInfo, SceneryRowItem } from '../types/types';
-import { getAvailabilityValue } from '../types/typeUitls';
+import { SceneryRowItem } from '../types/types';
 import client from '../common/http';
 
 import { version } from '../../package.json';
@@ -97,27 +91,6 @@ export default defineComponent({
       packageVersion: version,
     };
   },
-  computed: {
-    //   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!');
@@ -186,6 +159,7 @@ export default defineComponent({
             routeSpeed: 0,
             routeTracks: 1,
             routeName: 'Test',
+            hidden: false,
           },
         ],
         checkpoints: '',
@@ -196,7 +170,6 @@ export default defineComponent({
       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() {
@@ -204,7 +177,6 @@ export default defineComponent({
       this.store.stationList = JSON.parse(JSON.stringify(this.store.backupList));
       this.store.changeList = [];
       this.store.stationsToRemove = [];
-      this.store.unsavedChanges = false;
       this.store.searchedSceneryName = '';
     },
     clearInput() {
@@ -299,19 +271,6 @@ label.notify {
     }
   }
 }
-.changelog {
-  position: relative;
-
-  div {
-    height: 200px;
-
-    overflow: auto;
-  }
-
-  h3 {
-    margin: 0;
-  }
-}
 
 @media screen and (max-width: 550px) {
   .pane {
diff --git a/src/mixins/changeMixin.ts b/src/mixins/changeMixin.ts
index 0045c9c..44b215e 100644
--- a/src/mixins/changeMixin.ts
+++ b/src/mixins/changeMixin.ts
@@ -33,19 +33,21 @@ export default defineComponent({
 
       if (Object.keys(changeItem).length == 2 && changeItem.id)
         this.store.changeList = this.store.changeList.filter((item) => changeItem?.id != item.id);
-
-      this.store.unsavedChanges = this.store.changeList.length != 0;
     },
 
     addRemovalChange(sceneryData: SceneryRowItem) {
       const sceneryId = sceneryData.id;
 
+      // Sceneria niewpisana do bazy danych (id stworzone przez stronę)
+      if (sceneryId.startsWith('#')) {
+        this.store.changeList.filter((item) => item.id != sceneryId);
+        return;
+      }
+
       let changeItem = this.store.changeList.find((item) => item.id == sceneryId);
 
       if (!changeItem) this.store.changeList.push({ id: sceneryId, name: sceneryData.name, toRemove: true });
       else changeItem['toRemove'] = true;
-
-      this.store.unsavedChanges = Object.keys(this.store.changeList).length != 0;
     },
   },
 });
diff --git a/src/store.ts b/src/store.ts
index f0d8b8d..06d5e78 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -8,7 +8,6 @@ export const useStore = defineStore('store', {
       dataState: 'LOADING',
       authState: AuthState.LOADING,
 
-      unsavedChanges: false,
       stationList: [],
       backupList: [],
       stationsToRemove: [],
@@ -39,7 +38,6 @@ export const useStore = defineStore('store', {
         this.dataState = 'LOADED';
         this.backupList = JSON.parse(JSON.stringify(data));
         this.stationList = data;
-        this.unsavedChanges = false;
         this.changeList = [];
       } catch (error: any) {
         this.dataState = 'ERROR';
@@ -80,5 +78,9 @@ export const useStore = defineStore('store', {
         .sort((a, b) => (a.name > b.name ? 1 : -1))
         .filter((_, i) => i < state.maxVisibleResults);
     },
+
+    unsavedChanges(state) {
+      return Object.keys(state.changeList).length != 0;
+    },
   },
 });
diff --git a/src/types/types.ts b/src/types/types.ts
index e745873..d3e2e4a 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -101,7 +101,6 @@ export interface IStore {
   dataState: string;
   authState: AuthState;
 
-  unsavedChanges: boolean;
   stationList: SceneryRowItem[];
   backupList: SceneryRowItem[];
   stationsToRemove: string[];
diff --git a/src/views/ManagerView.vue b/src/views/ManagerView.vue
index 383c075..4537574 100644
--- a/src/views/ManagerView.vue
+++ b/src/views/ManagerView.vue
@@ -182,6 +182,8 @@ table {
   color: white;
   position: relative;
   border-collapse: collapse;
+  width: 100%;
+  min-width: 1600px;
 }
 
 table thead {