Przywrócono zmianę nazwy scenerii i usuwanie

src/views/ManagerView.vue

@@ -11,6 +11,7 @@
         <thead>
           <th v-for="header in headerNameList">{{ header }}</th>
           <th>Dostępność</th>
+          <th>Usuń</th>
         </thead>
 
         <tbody>
@@ -19,7 +20,7 @@
               <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="typeof (station as any)[propName] === 'boolean' && propName !== 'supportersOnly'">
+              <span v-else-if="typeof (station as any)[propName] === 'boolean'">
                 {{ (station as any)[propName] ? '✅' : '❌' }}
               </span>
               <span v-else>{{ (station as any)[propName] }}</span>
@@ -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)"
               >
                 <option value="default">dostępna (w paczce)</option>
                 <option value="nonDefault">dostępna (poza paczką)</option>
@@ -39,6 +40,8 @@
                 <option value="abandoned">wycofana</option>
               </select>
             </td>
+
+            <td @click="removeStation(station)"><img src="/icon-trash.svg" alt="remove" /></td>
           </tr>
         </tbody>
       </table>
@@ -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;
+}
 </style>