feature: routesInfo update

src/components/RoutesModal.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="bg" @click="closeRoutesModal"></div>
-  <div class="routes-modal" v-if="store.currentStation">
+  <div class="routes-modal" v-if="store.currentStation" @keydown.esc="closeRoutesModal" tabindex="0" ref="modal">
     <div class="modal-content">
       <div class="modal-wrapper">
         <h1>
@@ -11,7 +11,7 @@
         </h1>
 
         <ul class="route-list">
-          <li class="route" v-for="(route, i) in computedRouteList" :key="route.routeName + i">
+          <li class="route" v-for="(route, i) in currentRoutes" :key="i">
             <form action="javascript:void(0);">
               <div style="display: flex; justify-content: space-between; align-items: center; gap: 1em">
                 <span>
@@ -23,7 +23,7 @@
                       type="checkbox"
                       :name="`${route.routeName}-internal`"
                       :id="`${route.routeName}-internal`"
-                      v-model="route.routeIsInternal"
+                      v-model="route.isInternal"
                     />
                     WEWNĘTRZNY
                   </label>
@@ -66,9 +66,9 @@
                     type="radio"
                     :name="`${route.routeName}-electr`"
                     :id="`${route.routeName}-E`"
-                    :checked="route.routeElectrification == 'E'"
+                    :checked="route.isElectric"
+                    v-model="route.isElectric"
                     value="E"
-                    v-model="route.routeElectrification"
                   />
                   <span>Tak</span>
                 </label>
@@ -78,9 +78,9 @@
                     type="radio"
                     :name="`${route.routeName}-electr`"
                     :id="`${route.routeName}-N`"
-                    :checked="route.routeElectrification == 'N'"
+                    :checked="!route.isElectric"
+                    v-model="route.isElectric"
                     value="N"
-                    v-model="route.routeElectrification"
                   />
                   <span>Nie</span>
                 </label>
@@ -93,9 +93,9 @@
                     type="radio"
                     :name="`${route.routeName}-block`"
                     :id="`${route.routeName}-PBL`"
-                    :checked="route.routeBlockType == 'P'"
+                    :checked="!route.isRouteSBL"
+                    v-model="route.isRouteSBL"
                     value="P"
-                    v-model="route.routeBlockType"
                   /><span>PBL</span>
                 </label>
 
@@ -104,39 +104,13 @@
                     type="radio"
                     :name="`${route.routeName}-block`"
                     :id="`${route.routeName}-SBL`"
-                    :checked="route.routeBlockType == 'S'"
+                    :checked="route.isRouteSBL"
+                    v-model="route.isRouteSBL"
                     value="S"
-                    v-model="route.routeBlockType"
                   /><span>SBL</span>
                 </label>
               </div>
 
-              <div>
-                <b>Blokada dwukierunkowa:</b>
-
-                <label class="radio-choice">
-                  <input
-                    type="radio"
-                    :name="`${route.routeName}-2twb`"
-                    :id="`${route.routeName}-twb`"
-                    :checked="route.routeHasTwoWayBlock"
-                    :value="true"
-                    v-model="route.routeHasTwoWayBlock"
-                  /><span>Tak</span>
-                </label>
-
-                <label class="radio-choice">
-                  <input
-                    type="radio"
-                    :name="`${route.routeName}-2twb`"
-                    :id="`${route.routeName}-notwb`"
-                    :checked="!route.routeHasTwoWayBlock"
-                    :value="false"
-                    v-model="route.routeHasTwoWayBlock"
-                  /><span>Nie</span>
-                </label>
-              </div>
-
               <div>Prędkość: <input type="number" v-model="route.routeSpeed" /> km/h</div>
               <div>Długość: <input type="number" v-model="route.routeLength" /> m</div>
             </form>
@@ -154,59 +128,21 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref } from 'vue';
+import { Ref, computed, defineComponent, ref } from 'vue';
 import changeMixin from '../mixins/changeMixin';
 import { useStore } from '../store';
+import { SceneryRoutesInfo } from '../types/types';
 
 export default defineComponent({
   setup() {
     const store = useStore();
-    const currentRoutes = ref('');
+    const currentRoutes: Ref<SceneryRoutesInfo[]> = ref([]);
-    const routeBackup = ref('');
+    const routeBackup: Ref<SceneryRoutesInfo[]> = ref([]);
-
-    const computedRouteList = computed(() => {
-      if (!store.currentStation) return [];
-
-      if (currentRoutes.value.length == 0) return [];
-
-      return currentRoutes.value.split(';').map((route) => {
-        /*
-          Route: !Oc_2EPB:100:3000
-          ! - szlak wewnętrzny (! - tak, brak wykrzyknika - nie)
-          Oc - nazwa scenerii
-          2 - liczba torów (1 lub 2)
-          E - elektryfikacja (E - tak, N - nie)
-          P - rodzaj blokady (P - PBL, S - SBL)
-          B - blokada dwukierunkowa (B - tak, brak litery - nie)
-          100 - vmax szlaku
-          3000 - dł. szlaku
-        */
-        const routeProps = route.split('_');
-        const routeIsInternal = routeProps[0].startsWith('!');
-        const routeName = routeIsInternal ? routeProps[0].replace('!', '') : routeProps[0];
-        const routeSpeed = Number(route.split(':')[1]) || 0;
-        const routeLength = Number(route.split(':')[2]) || 0;
-
-        const routeSpecs = routeProps[1];
-
-        return {
-          routeName,
-          routeTracks: Number(routeSpecs[0]),
-          routeElectrification: routeSpecs[1],
-          routeBlockType: routeSpecs[2],
-          routeHasTwoWayBlock: routeSpecs[3] == 'B' ? true : false,
-          routeIsInternal,
-          routeSpeed,
-          routeLength,
-        };
-      });
-    });
 
     return {
       store,
-      computedRouteList,
-      currentRoutes,
       routeBackup,
+      currentRoutes,
     };
   },
 
@@ -216,40 +152,44 @@ export default defineComponent({
 
   mounted() {
     if (this.store.currentStation) {
-      this.currentRoutes = this.store.currentStation.routes;
+      // unrefed copy of routesInfo object
-      this.routeBackup = this.currentRoutes;
+      this.currentRoutes = JSON.parse(JSON.stringify(this.store.currentStation.routesInfo));
+      this.routeBackup = [...this.store.currentStation.routesInfo];
+
+      (this.$refs['modal'] as HTMLElement).focus();
     }
   },
 
   methods: {
     closeRoutesModal() {
       this.store.currentStation = null;
-      this.currentRoutes = '';
     },
 
     addNewRoute() {
-      this.currentRoutes += (this.currentRoutes.length != 0 ? ';' : '') + `-_1EP:0:0`;
+      this.currentRoutes.push({
-      // this.saveRoutes();
+        routeName: '-',
+        isElectric: true,
+        isInternal: false,
+        isRouteSBL: false,
+        routeLength: 0,
+        routeSpeed: 0,
+        routeTracks: 1,
+      });
+      this.saveRoutes();
     },
 
     removeRoute(index: number) {
-      this.currentRoutes = this.currentRoutes
+      this.currentRoutes = this.currentRoutes.filter((_, i) => i !== index);
-        .split(';')
+      this.saveRoutes();
-        .filter((_, i) => i != index)
-        .join(';');
-
-      // this.saveRoutes();
     },
 
     parseRoutes() {
-      const routeString = this.computedRouteList
+      const routeString = this.store.currentStation?.routesInfo
         .map(
           (route) =>
-            `${route.routeIsInternal ? '!' : ''}${route.routeName.trim()}_${route.routeTracks}${
+            `${route.isInternal ? '!' : ''}${route.routeName.trim()}_${route.routeTracks}${
-              route.routeElectrification
+              route.isElectric ? 'E' : 'N'
-            }${route.routeBlockType}${route.routeHasTwoWayBlock ? 'B' : ''}:${route.routeSpeed || 0}:${
+            }${route.isRouteSBL ? 'S' : 'P'}:${route.routeSpeed || 0}:${route.routeLength || 0}`
-              route.routeLength || 0
-            }`
         )
         .join(';');
 
@@ -263,9 +203,9 @@ export default defineComponent({
 
       const routeString = this.parseRoutes();
 
-      this.addChange(this.store.currentStation!, 'routes', this.routeBackup, routeString);
+      this.addChange(this.store.currentStation!, 'routesInfo', this.routeBackup, this.currentRoutes);
-      this.store.stationList[index]['routes'] = routeString;
+      this.store.stationList[index]['routesInfo'] = this.currentRoutes;
-      this.currentRoutes = routeString;
+      // this.currentRoutes.push(this.cur)
     },
   },
 });

src/components/TableActions.vue

@@ -83,7 +83,7 @@
 import { defineComponent } from 'vue';
 import routesMixin from '../mixins/routesMixin';
 import { useStore } from '../store';
-import { AuthState, Availability, ChangeProp, HeaderTypes, SceneryRowItem } from '../types/types';
+import { AuthState, Availability, ChangeProp, HeaderTypes, SceneryRoutesInfo, SceneryRowItem } from '../types/types';
 import { getAvailabilityValue } from '../types/typeUitls';
 
 export default defineComponent({
@@ -122,7 +122,7 @@ export default defineComponent({
                 : changeItem[propChange];
 
             if (propChange == 'availability') value = getAvailabilityValue(changeItem[propChange] as Availability);
-            if (propChange == 'routes') value = this.getRouteNames(changeItem[propChange] as string, true);
+            if (propChange == 'routesInfo') value = this.getRouteNames(changeItem[propChange] as SceneryRoutesInfo[]);
 
             itemChanges.push(`<i>${(HeaderTypes as any)[propChange]}:</i> ${value || '-'}`);
           }
@@ -215,6 +215,17 @@ export default defineComponent({
         controlType: 'SCS',
         SUP: false,
         routes: 'Test_1EPB:0:0',
+        routesInfo: [
+          {
+            isElectric: true,
+            isInternal: false,
+            isRouteSBL: false,
+            routeLength: 0,
+            routeSpeed: 0,
+            routeTracks: 1,
+            routeName: 'Test',
+          },
+        ],
         checkpoints: '',
         authors: '',
         availability: 'default',

src/mixins/changeMixin.ts

@@ -64,7 +64,6 @@ export default defineComponent({
       else changeItem['toRemove'] = true;
 
       this.store.unsavedChanges = Object.keys(this.store.changeList).length != 0;
-      console.log(this.store.changeList);
     },
   },
 });

src/mixins/routesMixin.ts

@@ -3,22 +3,15 @@ import { SceneryRowItem } from '../types/types';
 
 export default defineComponent({
   methods: {
-    getRouteNames(routes: SceneryRowItem['routes'], showAdditional = false) {
+    getRouteNames(routes: SceneryRowItem['routesInfo']) {
       return routes
-        .split(';')
         .map((route) => {
           // !Oc_2EPB
-          const [_, speed, length] = route.split(':');
+          return `<span ${route.routeSpeed != 0 && route.routeLength != 0 ? 'class="text--accent"' : ''}>${
-
+            route.isInternal ? '<u>' + route.routeName + '</u>' : route.routeName
-          const props1 = route.split('_')[0];
+          }</span> <span style='color: #aaa'>(${route.routeTracks}/${route.isElectric ? 'E' : 'N'}/${
-          const props2 = route.split('_')[1];
+            route.isRouteSBL ? 'S' : 'P'
-          const isInternal = props1.startsWith('!');
+          })`;
-          const name = isInternal ? props1.replace('!', '') : props1;
-          return `<span ${speed != '0' && length != '0' ? 'class="text--accent"' : ''}>${
-            isInternal ? '<u>' + name + '</u>' : name
-          }</span> <span style='color: #aaa'>(${props2[0]}/${props2[1]}/${props2[2]}${props2[3] == 'B' ? '/B' : ''}${
-            speed && showAdditional ? '/' + speed : ''
-          }${length && showAdditional ? '/' + length : ''})</span>`;
         })
         .join(', ');
     },

src/types/types.ts

@@ -10,14 +10,14 @@ export type ChangeProp =
   | 'signalType'
   | 'controlType'
   | 'SUP'
-  | 'routes'
+  | 'routesInfo'
   | 'checkpoints'
   | 'authors'
   | 'availability';
 
 export enum HeaderTypes {
   name = 'Nazwa',
-  abbr = "Skrót posterunku",
+  abbr = 'Skrót posterunku',
   url = 'URL',
   hash = 'Hash',
   lines = 'Linie',
@@ -28,7 +28,7 @@ export enum HeaderTypes {
   controlType = 'Sterowanie',
   SUP = 'SUP',
   authors = 'Autorzy',
-  routes = 'Szlaki',
+  routesInfo = 'Szlaki',
   checkpoints = 'Posterunki',
   availability = 'Dostępność',
   toRemove = 'Usuń',
@@ -42,6 +42,16 @@ export enum AvailabilityTypes {
   'unavailable' = 'niedostępna',
 }
 
+export interface SceneryRoutesInfo {
+  routeName: string;
+  isElectric: boolean;
+  isRouteSBL: boolean;
+  isInternal: boolean;
+  routeSpeed: number;
+  routeLength: number;
+  routeTracks: number;
+}
+
 export interface SceneryRowItem {
   id: string;
   hash: string;
@@ -56,13 +66,14 @@ export interface SceneryRowItem {
   controlType: string;
   SUP: boolean;
   routes: string;
+  routesInfo: SceneryRoutesInfo[];
   checkpoints: string;
   authors: string;
   availability: Availability;
 }
 
 export type ChangeItem = {
-  [key in ChangeProp]?: string | number | boolean | null;
+  [key in ChangeProp]?: any;
 } & {
   id: string;
   name: string;

src/views/ManagerView.vue

@@ -25,7 +25,7 @@
 
               <span v-else-if="propName === 'checkpoints'">{{ station[propName] ? 'POKAŻ' : 'DODAJ' }}</span>
 
-              <span v-else-if="propName === 'routes'" v-html="getRouteNames(station.routes)"></span>
+              <span v-else-if="propName === 'routes'" v-html="getRouteNames(station.routesInfo)"></span>
 
               <span v-else-if="propName === 'signalType'"> {{ station[propName] }}</span>