Dodano changelog; poprawki reaktywności

src/App.vue

@@ -77,12 +77,15 @@ button {
   transition: background-color 100ms;
 }
 
-button:hover {
-  background-color: #505050;
+button:focus-visible {
+  border: 1px solid gold;
 }
 
-button:focus-within {
-  border: 1px solid gold;
+// Text
+.text {
+  &--accent {
+    color: gold;
+  }
 }
 
 // Card modal

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 {

src/mixins/changeMixin.ts

@@ -1,6 +1,6 @@
 import { defineComponent } from 'vue';
 import { useStore } from '../store';
-import { SceneryRowItem } from '../types/types';
+import { ChangeProp, SceneryRowItem } from '../types/types';
 
 export default defineComponent({
   setup() {
@@ -13,50 +13,57 @@ export default defineComponent({
     addChange(sceneryData: SceneryRowItem, propName: string, oldValue: any, newValue: any) {
       if (oldValue === newValue) return;
 
+      const changePropName = propName as ChangeProp;
+
       const sceneryId = sceneryData.id;
 
-      if (this.store.changeList[sceneryId] === null || !(sceneryId in this.store.changeList))
-        this.store.changeList[sceneryId] = {};
+      let changeItem = this.store.changeList.find((item) => item.id == sceneryId);
 
-      // if (propName === 'name') {
-      //   const rowStationData = this.store.stationList[this.store.stationList.findIndex((v) => v.id == sceneryId)];
-
-      //   this.store.changeList[sceneryId][propName] = newValue;
-      //   this.store.changeBackupList[sceneryId] = { ...rowStationData, name: oldValue };
-      // } else {
-      this.store.changeList[sceneryId][propName] = newValue;
-
-      if (!this.store.changeBackupList[sceneryId]) this.store.changeBackupList[sceneryId] = {};
-
-      if (this.store.changeBackupList[sceneryId][propName] === undefined)
-        this.store.changeBackupList[sceneryId][propName] = oldValue;
-      // }
-
-      if (this.store.changeList[sceneryId][propName] == this.store.changeBackupList[sceneryId][propName]) {
-        delete this.store.changeList[sceneryId][propName];
-        delete this.store.changeBackupList[sceneryId][propName];
-
-        if (Object.keys(this.store.changeList[sceneryId]).length == 0) delete this.store.changeList[sceneryId];
-
-        if (Object.keys(this.store.changeBackupList[sceneryId]).length == 0)
-          delete this.store.changeBackupList[sceneryId];
+      if (!changeItem) {
+        changeItem = { id: sceneryId, name: sceneryData.name };
+        this.store.changeList.push(changeItem);
       }
 
-      this.store.unsavedChanges = Object.keys(this.store.changeList).length != 0;
+      changeItem[changePropName] = newValue;
+
+      const sceneryBackup = this.store.backupList.find((scenery) => scenery.id == sceneryId);
+      if (!sceneryBackup) return;
+
+      if (sceneryBackup && sceneryBackup[changePropName] == changeItem[changePropName])
+        delete changeItem[changePropName];
+
+      if (Object.keys(changeItem).length == 2 && changeItem.id)
+        this.store.changeList = this.store.changeList.filter((item) => changeItem?.id != item.id);
+
+      // if (
+      //   changeItem[changePropName] !== undefined &&
+      //   backupChangeItem[changePropName] !== undefined &&
+      //   changeItem[changePropName] == backupChangeItem[changePropName]
+      // ) {
+      //   console.log('delete');
+
+      //   delete changeItem[changePropName];
+      //   delete backupChangeItem[changePropName];
+
+      //   if (Object.keys(changeItem).length == 1 && changeItem.id)
+      //     this.store.changeList = this.store.changeList.filter((item) => changeItem?.id != item.id);
+
+      //   if (Object.keys(backupChangeItem).length == 1 && backupChangeItem.id)
+      //     this.store.changeBackupList = this.store.changeList.filter((item) => backupChangeItem?.id != item.id);
+      // }
+
+      this.store.unsavedChanges = this.store.changeList.length != 0;
     },
 
     addRemovalChange(sceneryData: SceneryRowItem) {
       const sceneryId = sceneryData.id;
 
-      this.store.changeBackupList[sceneryId] = { ...sceneryData };
+      let changeItem = this.store.changeList.find((item) => item.id == sceneryId);
 
-      this.store.changeList[sceneryId] = {
-        name: sceneryData.name,
-        toRemove: true,
-      };
+      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;
-
       console.log(this.store.changeList);
     },
   },

src/mixins/dataMixin.ts

@@ -29,11 +29,10 @@ export default defineComponent({
           })
         ).data;
 
-        this.store.backupList = JSON.stringify(data);
+        this.store.backupList = JSON.parse(JSON.stringify(data));
         this.store.stationList = data;
         this.store.unsavedChanges = false;
         this.store.changeList = [];
-        this.store.changeBackupList = [];
 
         this.store.dataState = 'LOADED';
       } catch (error) {

src/mixins/routesMixin.ts

@@ -0,0 +1,22 @@
+import { defineComponent } from 'vue';
+import { SceneryRowItem } from '../types/types';
+
+export default defineComponent({
+  methods: {
+    getRouteNames(routes: SceneryRowItem['routes']) {
+      return routes
+        .split(';')
+        .map((route) => {
+          // !Oc_2EPB
+          const props1 = route.split('_')[0];
+          const props2 = route.split('_')[1];
+          const isInternal = props1.startsWith('!');
+          const name = isInternal ? props1.replace('!', '') : props1;
+          return `${isInternal ? '<u>' + name + '</u>' : name} <span style='color: #aaa'>(${props2[0]}/${props2[1]}/${
+            props2[2]
+          }${props2[3] ? '/B' : ''})</span>`;
+        })
+        .join(', ');
+    },
+  },
+});

src/store.ts

@@ -1,5 +1,6 @@
 import { defineStore } from 'pinia';
-import { IStore } from './types/types';
+import { Availability, ChangeProp, HeaderTypes, IStore } from './types/types';
+import { getAvailabilityValue } from './types/typeUitls';
 
 export const useStore = defineStore('store', {
   state: () =>
@@ -7,11 +8,10 @@ export const useStore = defineStore('store', {
       dataState: 'LOADING',
       unsavedChanges: false,
       stationList: [],
-      backupList: '',
+      backupList: [],
       stationsToRemove: [],
       searchedSceneryName: '',
-      changeList: {},
-      changeBackupList: {},
+      changeList: [],
       newStationsCount: 0,
       routesModalVisible: true,
       currentStation: null,
@@ -23,6 +23,6 @@ export const useStore = defineStore('store', {
       alertMessage: '',
       confirmMessage: '',
 
-      changesResponse: []
+      changesResponse: [],
     } as IStore),
 });

src/types/typeUitls.ts

@@ -0,0 +1,5 @@
+import { Availability, AvailabilityTypes } from './types';
+
+export function getAvailabilityValue(availability: Availability) {
+  return AvailabilityTypes[availability];
+}

src/types/types.ts

@@ -1,4 +1,41 @@
 export type Availability = 'default' | 'unavailable' | 'nonPublic' | 'abandoned' | 'nonDefault';
+export type ChangeProp =
+  | 'name'
+  | 'url'
+  | 'lines'
+  | 'project'
+  | 'reqLevel'
+  | 'signalType'
+  | 'controlType'
+  | 'SUP'
+  | 'routes'
+  | 'checkpoints'
+  | 'authors'
+  | 'availability';
+
+export enum HeaderTypes {
+  name = 'Nazwa',
+  url = 'URL',
+  lines = 'Linie',
+  project = 'Projekt',
+  reqLevel = 'Wym. poziom',
+  signalType = 'Sygnalizacja',
+  controlType = 'Sterowanie',
+  SUP = 'SUP',
+  authors = 'Autorzy',
+  routes = 'Szlaki',
+  checkpoints = 'Posterunki',
+  availability = 'Dostępność',
+  toRemove = 'Usuń',
+}
+
+export enum AvailabilityTypes {
+  'default' = 'w paczce',
+  'nonDefault' = 'poza paczką',
+  'nonPublic' = 'niepubliczna',
+  'abandoned' = 'wycofana',
+  'unavailable' = 'niedostępna',
+}
 
 export interface SceneryRowItem {
   id: string;
@@ -16,15 +53,23 @@ export interface SceneryRowItem {
   availability: Availability;
 }
 
+export type ChangeItem = {
+  [key in ChangeProp]?: string | number | boolean | null;
+} & {
+  id: string;
+  name: string;
+
+  toRemove?: boolean;
+};
+
 export interface IStore {
   dataState: string;
   unsavedChanges: boolean;
   stationList: SceneryRowItem[];
-  backupList: string;
+  backupList: SceneryRowItem[];
   stationsToRemove: string[];
   searchedSceneryName: string;
-  changeList: { [key: string]: any };
-  changeBackupList: { [key: string]: any };
+  changeList: ChangeItem[];
   newStationsCount: number;
   routesModalVisible: boolean;
   currentStation: SceneryRowItem | null;

src/views/ManagerView.vue

@@ -4,6 +4,7 @@
 
     <hr color="white" />
     <TableActions />
+
     <hr color="white" />
 
     <div class="table_container">
@@ -18,8 +19,13 @@
           <tr v-for="(station, row) in sortedStationList" tabindex="0">
             <td v-for="(value, propName) in headerNameList" @click="changeProperty(station, row, propName as string)">
               <span v-if="propName === 'url'" :style="station.url ? 'color: gold' : 'color: gray;'">URL</span>
+
               <span v-else-if="propName === 'checkpoints'">{{ station[propName] ? 'POKAŻ' : 'DODAJ' }}</span>
-              <span v-else-if="propName === 'routes'" v-html="getRouteNames(station)"></span>
+
+              <span v-else-if="propName === 'routes'" v-html="getRouteNames(station.routes)"></span>
+
+              <span v-else-if="propName === 'signalType'"> {{ station[propName] }}</span>
+
               <span v-else-if="typeof (station as any)[propName] === 'boolean'">
                 {{ (station as any)[propName] ? '✅' : '❌' }}
               </span>
@@ -57,10 +63,11 @@ import { useStore } from '../store';
 import { SceneryRowItem, Availability } from '../types/types';
 import RoutesModal from '../components/RoutesModal.vue';
 import TableActions from '../components/TableActions.vue';
+import routesMixin from '../mixins/routesMixin';
 
 export default defineComponent({
   components: { RoutesModal, TableActions },
-  mixins: [dataMixin, changeMixin],
+  mixins: [dataMixin, changeMixin, routesMixin],
 
   data: () => ({
     headerNameList: {
@@ -103,23 +110,6 @@ export default defineComponent({
   },
 
   methods: {
-    getRouteNames(station: SceneryRowItem) {
-      if (!station.routes) return '';
-      return station.routes
-        .split(';')
-        .map((route) => {
-          // !Oc_2EPB
-          const props1 = route.split('_')[0];
-          const props2 = route.split('_')[1];
-          const isInternal = props1.startsWith('!');
-          const name = isInternal ? props1.replace('!', '') : props1;
-          return `${isInternal ? '<u>' + name + '</u>' : name} <span style='color: #aaa'>(${props2[0]}/${props2[1]}/${
-            props2[2]
-          }${props2[3] ? '/B' : ''})</span>`;
-        })
-        .join(', ');
-    },
-
     changeProperty(station: SceneryRowItem, row: number, propertyName: string) {
       this.store.selectedStationName = station.name;
 
@@ -174,6 +164,10 @@ export default defineComponent({
     },
 
     removeStation(scenery: SceneryRowItem) {
+      const confirmRemove = confirm('Czy na pewno chcesz zaznaczyć tę scenerię do usunięcia?');
+
+      if (!confirmRemove) return;
+
       this.store.stationList = this.store.stationList.filter(({ id }) => id != scenery.id);
       this.addRemovalChange(scenery);
     },
@@ -245,4 +239,10 @@ td img {
   height: 1.45em;
   vertical-align: middle;
 }
+
+@media screen and (max-width: 550px) {
+  table {
+    font-size: 0.85em;
+  }
+}
 </style>