From 64eca66fd8d384a2e0903d8603008dba1c164fb6 Mon Sep 17 00:00:00 2001 From: Spythere Date: Thu, 18 Aug 2022 12:08:11 +0200 Subject: [PATCH] =?UTF-8?q?Przywr=C3=B3cono=20zmian=C4=99=20nazwy=20scener?= =?UTF-8?q?ii=20i=20usuwanie?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env | 3 +- src/components/RoutesModal.vue | 2 +- src/components/TableActions.vue | 20 +++++++---- src/mixins/changeMixin.ts | 58 ++++++++++++++++++------------ src/types/types.ts | 1 + src/views/ManagerView.vue | 63 +++++++++++++++------------------ 6 files changed, 83 insertions(+), 64 deletions(-) diff --git a/.env b/.env index fd88d3e..f336b2a 100644 --- a/.env +++ b/.env @@ -1 +1,2 @@ -VITE_API_URL="https://stacjownik.eu-4.evennode.com" \ No newline at end of file +VITE_API_URL="http://localhost:3000" +VITE_API_URL_DEV="https://stacjownik.eu-4.evennode.com" \ No newline at end of file diff --git a/src/components/RoutesModal.vue b/src/components/RoutesModal.vue index 8f5618f..f9c4571 100644 --- a/src/components/RoutesModal.vue +++ b/src/components/RoutesModal.vue @@ -226,7 +226,7 @@ export default defineComponent({ this.store.stationList[index]['routes'] = routeString; this.currentRoutes = routeString; - this.addChange(this.store.currentStation!.name, 'routes', this.routeBackup, routeString); + this.addChange(this.store.currentStation!, 'routes', this.routeBackup, routeString); }, }, }); diff --git a/src/components/TableActions.vue b/src/components/TableActions.vue index dc9716f..48b680f 100644 --- a/src/components/TableActions.vue +++ b/src/components/TableActions.vue @@ -108,11 +108,16 @@ export default defineComponent({ async updateListToDb() { try { - const mappedChangeList = Object.entries(this.store.changeList).map(([k, v]) => { - return { name: k, ...v }; + const mappedChangeList = Object.entries(this.store.changeList).map(([id, v]) => { + if (/^#/.test(id)) { + delete v.id; + return { ...v }; + } + + return { id: id, ...v }; }); - await axios.post( + const response = await axios.post( `${this.API_URL}/manager/updateSceneryList`, { changeList: mappedChangeList, @@ -127,10 +132,12 @@ export default defineComponent({ } ); + console.log(response.data); + alert('Zapisano do bazy!'); this.loadData(); } catch (error) { - this.store.alertMessage = 'Ups! Wystąpił błąd podczas zapisywania danych!'; + this.store.alertMessage = 'Ups! Wystąpił błąd podczas zapisywania danych!'; } }, @@ -162,10 +169,11 @@ export default defineComponent({ checkpoints: '', authors: '', availability: 'default', + id: `#${Math.random().toString(32).substring(2)}`, }; - this.store.changeList[name] = { ...newSt }; - this.store.changeBackupList[name] = null; + this.store.changeList[newSt.id] = { ...newSt }; + this.store.changeBackupList[newSt.id] = null; this.store.searchedSceneryName = name; this.store.unsavedChanges = true; diff --git a/src/mixins/changeMixin.ts b/src/mixins/changeMixin.ts index ee516a2..f275c1e 100644 --- a/src/mixins/changeMixin.ts +++ b/src/mixins/changeMixin.ts @@ -1,5 +1,6 @@ import { defineComponent } from 'vue'; import { useStore } from '../store'; +import { SceneryRowItem } from '../types/types'; export default defineComponent({ setup() { @@ -9,41 +10,54 @@ export default defineComponent({ }, methods: { - addChange(stationName: string, propName: string, oldValue: any, newValue: any) { + addChange(sceneryData: SceneryRowItem, propName: string, oldValue: any, newValue: any) { if (oldValue === newValue) return; - if (this.store.changeList[stationName] === null || !(stationName in this.store.changeList)) - this.store.changeList[stationName] = {}; + const sceneryId = sceneryData.id; - if (propName === 'name') { - const station = this.store.stationList[this.store.stationList.findIndex((v) => v.name == newValue)]; - console.log(oldValue, newValue, station); + if (this.store.changeList[sceneryId] === null || !(sceneryId in this.store.changeList)) + this.store.changeList[sceneryId] = {}; - this.store.changeBackupList[oldValue] = { ...station, name: oldValue }; - this.store.changeBackupList[newValue] = null; + // if (propName === 'name') { + // const rowStationData = this.store.stationList[this.store.stationList.findIndex((v) => v.id == sceneryId)]; - this.store.changeList[oldValue] = null; - this.store.changeList[newValue] = { ...station }; - } else { - this.store.changeList[stationName][propName] = newValue; + // this.store.changeList[sceneryId][propName] = newValue; + // this.store.changeBackupList[sceneryId] = { ...rowStationData, name: oldValue }; + // } else { + this.store.changeList[sceneryId][propName] = newValue; - if (!this.store.changeBackupList[stationName]) this.store.changeBackupList[stationName] = {}; + if (!this.store.changeBackupList[sceneryId]) this.store.changeBackupList[sceneryId] = {}; - if (this.store.changeBackupList[stationName][propName] === undefined) - this.store.changeBackupList[stationName][propName] = oldValue; - } + if (this.store.changeBackupList[sceneryId][propName] === undefined) + this.store.changeBackupList[sceneryId][propName] = oldValue; + // } - if (this.store.changeList[stationName][propName] == this.store.changeBackupList[stationName][propName]) { - delete this.store.changeList[stationName][propName]; - delete this.store.changeBackupList[stationName][propName]; + 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[stationName]).length == 0) delete this.store.changeList[stationName]; + if (Object.keys(this.store.changeList[sceneryId]).length == 0) delete this.store.changeList[sceneryId]; - if (Object.keys(this.store.changeBackupList[stationName]).length == 0) - delete this.store.changeBackupList[stationName]; + if (Object.keys(this.store.changeBackupList[sceneryId]).length == 0) + delete this.store.changeBackupList[sceneryId]; } this.store.unsavedChanges = Object.keys(this.store.changeList).length != 0; }, + + addRemovalChange(sceneryData: SceneryRowItem) { + const sceneryId = sceneryData.id; + + this.store.changeBackupList[sceneryId] = { ...sceneryData }; + + this.store.changeList[sceneryId] = { + name: sceneryData.name, + toRemove: true, + }; + + this.store.unsavedChanges = Object.keys(this.store.changeList).length != 0; + + console.log(this.store.changeList); + }, }, }); diff --git a/src/types/types.ts b/src/types/types.ts index 4d49ff4..0e23bb7 100644 --- a/src/types/types.ts +++ b/src/types/types.ts @@ -1,6 +1,7 @@ export type Availability = 'default' | 'unavailable' | 'nonPublic' | 'abandoned' | 'nonDefault'; export interface SceneryRowItem { + id: string; name: string; url: string; lines: string; diff --git a/src/views/ManagerView.vue b/src/views/ManagerView.vue index 1871750..86aa84c 100644 --- a/src/views/ManagerView.vue +++ b/src/views/ManagerView.vue @@ -11,6 +11,7 @@ {{ header }} Dostępność + Usuń @@ -19,7 +20,7 @@ URL {{ station[propName] ? 'POKAŻ' : 'DODAJ' }} - + {{ (station as any)[propName] ? '✅' : '❌' }} {{ (station as any)[propName] }} @@ -30,7 +31,7 @@ name="availability" :id="`select-${row}`" v-model="sortedStationList[row]['availability']" - @input="(e) => changeAvailability(station.name, sortedStationList[row]['availability'], e)" + @input="(e) => changeAvailability(station, sortedStationList[row]['availability'], e)" > @@ -39,6 +40,8 @@ + + remove @@ -100,25 +103,6 @@ export default defineComponent({ }, methods: { - addNewStation() { - this.store.newStationsCount++; - const newSt: SceneryRowItem = { - name: `${this.store.newStationsCount}_Sceneria`, - url: '', - lines: '', - project: null, - reqLevel: 0, - signalType: '', - controlType: '', - SUP: false, - routes: '', - checkpoints: '', - authors: '', - availability: 'default', - }; - this.store.stationList.unshift(newSt); - }, - getRouteNames(station: SceneryRowItem) { if (!station.routes) return ''; return station.routes @@ -138,58 +122,64 @@ export default defineComponent({ changeProperty(station: SceneryRowItem, row: number, propertyName: string) { this.store.selectedStationName = station.name; - if (propertyName == 'name') return; + if (propertyName == 'checkpoints') { this.changeCheckpoints(row); return; } + if (propertyName == 'routes') { this.showRoutesModal(station); return; } + const stationListRow = this.store.stationList.findIndex( (station) => station.name == this.sortedStationList[row].name ); + if (stationListRow == -1) return; const oldValue = (this.store.stationList[stationListRow] as any)[propertyName]; if (typeof oldValue === 'boolean') { (this.store.stationList[stationListRow] as any)[propertyName] = !oldValue; // this.$set(this.stationList[stationListRow], propertyName, !oldValue); - this.addChange(station.name, propertyName, oldValue, !oldValue); + this.addChange(station, propertyName, oldValue, !oldValue); return; } + let newValue = prompt(`Zmień wartość dla rubryki ${this.headerNameList[propertyName]}`, oldValue); if (newValue == null) return; (this.store.stationList[stationListRow] as any)[propertyName] = typeof oldValue === 'number' ? parseInt(newValue) : newValue; // this.$set(this.stationList[stationListRow], propertyName, parseInt(newValue)); - this.addChange( - station.name, - propertyName, - oldValue, - typeof oldValue === 'number' ? parseInt(newValue) : newValue - ); + this.addChange(station, propertyName, oldValue, typeof oldValue === 'number' ? parseInt(newValue) : newValue); }, changeCheckpoints(row: number) { const stationListRow = this.store.stationList.findIndex( (station) => station.name == this.sortedStationList[row].name ); + if (stationListRow == -1) return; const oldCheckpoints = this.store.stationList[stationListRow].checkpoints; const newCheckpoints = prompt('Wpisz posterunki (oddzielone średnikiem):', oldCheckpoints); if (newCheckpoints === null) return; + this.store.stationList[stationListRow]['checkpoints'] = newCheckpoints; - this.addChange(this.sortedStationList[row].name, 'checkpoints', oldCheckpoints, newCheckpoints); + this.addChange(this.sortedStationList[row], 'checkpoints', oldCheckpoints, newCheckpoints); }, - changeAvailability(stationName: string, availability: Availability, e: Event) { + changeAvailability(scenery: SceneryRowItem, availability: Availability, e: Event) { const selectedAvailability: Availability = (e.target as HTMLSelectElement).value as Availability; - this.addChange(stationName, 'availability', availability, selectedAvailability); + this.addChange(scenery, 'availability', availability, selectedAvailability); }, - showRoutesModal(station: SceneryRowItem) { - this.store.currentStation = station; + removeStation(scenery: SceneryRowItem) { + this.store.stationList = this.store.stationList.filter(({ id }) => id != scenery.id); + this.addRemovalChange(scenery); + }, + + showRoutesModal(scenery: SceneryRowItem) { + this.store.currentStation = scenery; }, }, }); @@ -250,4 +240,9 @@ table tr td { overflow: auto; text-overflow: ellipsis; } + +td img { + height: 1.45em; + vertical-align: middle; +}