Dodano changelog; poprawki reaktywności

src/components/RoutesModal.vue

@@ -11,7 +11,7 @@
         <li class="route" v-for="(route, i) in computedRouteList" :key="route.routeName + i">
           <img @click="removeRoute(i)" class="route-delete" src="/icon-trash.svg" alt="icon trash" />
 
-          <form>
+          <form action="javascript:void(0);">
             <div>Szlak: <input type="text" v-model="route.routeName" /></div>
             <div>
               <input
@@ -128,11 +128,11 @@
   </div>
 </template>
 
-<script lang="ts">import { defineComponent } from 'vue';
+<script lang="ts">
+import { defineComponent } from 'vue';
 import changeMixin from '../mixins/changeMixin';
 import { useStore } from '../store';
 
-
 export default defineComponent({
   setup() {
     return {
@@ -182,11 +182,10 @@ export default defineComponent({
 
   mounted() {
     if (this.store.currentStation) {
-       this.currentRoutes = this.store.currentStation.routes;
-       this.routeBackup = this.currentRoutes;
+      this.currentRoutes = this.store.currentStation.routes;
+      this.routeBackup = this.currentRoutes;
     }
     // console.log(this.currentRoutes + " git");
-    
   },
 
   methods: {

src/components/TableActions.vue

@@ -52,6 +52,18 @@
 
       <button style="margin-left: 0.5em" @click="clearInput">Wyczyść</button>
     </div>
+
+    <div class="pane">
+      <button @click="changelogVisible = !changelogVisible">
+        {{ changelogVisible ? 'Ukryj' : 'Pokaż' }} changelog
+      </button>
+    </div>
+
+    <div class="changelog" v-if="changelogVisible">
+      <div style="margin-bottom: 0.25em">Changelog:</div>
+
+      <div v-html="changelog || 'brak zmian'"></div>
+    </div>
   </div>
 </template>
 
@@ -59,8 +71,10 @@
 import axios from 'axios';
 import { defineComponent } from 'vue';
 import dataMixin from '../mixins/dataMixin';
+import routesMixin from '../mixins/routesMixin';
 import { useStore } from '../store';
-import { SceneryRowItem } from '../types/types';
+import { Availability, ChangeProp, HeaderTypes, SceneryRowItem } from '../types/types';
+import { getAvailabilityValue } from '../types/typeUitls';
 
 export default defineComponent({
   setup() {
@@ -69,7 +83,45 @@ export default defineComponent({
     };
   },
 
-  mixins: [dataMixin],
+  data() {
+    return {
+      changelogVisible: false,
+    };
+  },
+
+  mixins: [dataMixin, routesMixin],
+
+  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 == 'routes') value = this.getRouteNames(changeItem[propChange] as string);
+
+            itemChanges.push(`<i>${(HeaderTypes as any)[propChange]}:</i> ${value || '-'}`);
+          }
+
+          return `<b class='text--accent'>${changeItem.name} -></b> ` + itemChanges.join('; ');
+        })
+        .join(' <br /> ');
+    },
+  },
 
   methods: {
     confirmLoadData() {
@@ -108,13 +160,12 @@ export default defineComponent({
 
     async updateListToDb() {
       try {
-        const mappedChangeList = Object.entries(this.store.changeList).map(([id, v]) => {
-          if (/^#/.test(id)) {
-            delete v.id;
-            return { ...v };
+        const mappedChangeList = this.store.changeList.map((v) => {
+          if (/^#/.test(v.id)) {
+            return { ...v, id: undefined };
           }
 
-          return { id: id, ...v };
+          return { ...v };
         });
 
         const response = await axios.post(
@@ -133,7 +184,7 @@ export default defineComponent({
         );
 
         this.store.changesResponse = response.data;
-        alert("Pomyślnie wprowadzono zmiany!")
+        alert('Pomyślnie wprowadzono zmiany!');
 
         this.loadData();
       } catch (error) {
@@ -172,8 +223,8 @@ export default defineComponent({
         id: `#${Math.random().toString(32).substring(2)}`,
       };
 
-      this.store.changeList[newSt.id] = { ...newSt };
-      this.store.changeBackupList[newSt.id] = null;
+      this.store.changeList.push({ ...newSt });
+      // this.store.changeBackupList[newSt.id] = null;
       this.store.searchedSceneryName = name;
 
       this.store.unsavedChanges = true;
@@ -184,9 +235,8 @@ export default defineComponent({
     restoreList() {
       if (this.store.backupList.length == 0) return;
 
-      this.store.stationList = JSON.parse(this.store.backupList);
-      this.store.changeList = {};
-      this.store.changeBackupList = {};
+      this.store.stationList = JSON.parse(JSON.stringify(this.store.backupList));
+      this.store.changeList = [];
       this.store.stationsToRemove = [];
       this.store.unsavedChanges = false;
       this.store.searchedSceneryName = '';
@@ -277,6 +327,10 @@ label#notify {
     }
   }
 }
+.changelog {
+  height: 200px;
+  overflow: auto;
+}
 
 @media screen and (max-width: 550px) {
   .pane {