poprawki changeloga

src/components/Changelog.vue

@@ -4,7 +4,8 @@
     <hr color="white" />
 
     <!-- Changelog -->
-    <div v-for="(item, listIndex) in changeList" :key="listIndex">
+    <ul>
+      <li v-for="(item, listIndex) in changeList" :key="listIndex">
         <b class="text--accent">{{ item.name }}</b> ->
 
         <!-- Info dla scenerii do usunięcia -->
@@ -32,7 +33,8 @@
             <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>

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)
     },
   },
 });

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 />
+    <Changelog v-if="changelogVisible" />
-
-    <!-- <div class="changelog" v-if="changelogVisible">
-      <h3>Changelog:</h3>
-      <hr color="white" />
-
-      <div v-html="changelog || 'brak zmian'"></div>
-    </div> -->
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { useStore } from '../store';
-import { Availability, ChangeProp, HeaderTypes, SceneryRoutesInfo, SceneryRowItem } from '../types/types';
+import { SceneryRowItem } from '../types/types';
-import { getAvailabilityValue } from '../types/typeUitls';
 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 {

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;
     },
   },
 });

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;
+    },
   },
 });

src/types/types.ts

@@ -101,7 +101,6 @@ export interface IStore {
   dataState: string;
   authState: AuthState;
 
-  unsavedChanges: boolean;
   stationList: SceneryRowItem[];
   backupList: SceneryRowItem[];
   stationsToRemove: string[];

src/views/ManagerView.vue

@@ -182,6 +182,8 @@ table {
   color: white;
   position: relative;
   border-collapse: collapse;
+  width: 100%;
+  min-width: 1600px;
 }
 
 table thead {