poprawki changeloga

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 {