feature: vmax i dł. szlaków

src/App.vue

@@ -87,6 +87,10 @@ html {
   margin: 0;
   background-color: #1e2341;
   color: white;
+
+  @media screen and (max-width: 600px) {
+    font-size: calc(0.7vw + 0.7rem);
+  }
 }
 
 button {

src/components/RoutesModal.vue

@@ -1,40 +1,52 @@
 <template>
+  <div class="bg" @click="closeRoutesModal"></div>
   <div class="routes-modal" v-if="store.currentStation">
+    <div class="modal-content">
+      <div class="modal-wrapper">
+        <h1>
+          Szlaki na scenerii {{ store.currentStation.name }}
           <div class="exit" @click="closeRoutesModal">
             <img src="/icon-exit.svg" alt="exit icon" />
           </div>
-
+        </h1>
-    <div class="modal-wrapper">
-      <h1>Szlaki na scenerii {{ store.currentStation.name }}</h1>
 
         <ul class="route-list">
           <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 action="javascript:void(0);">
-            <div>Szlak: <input type="text" v-model="route.routeName" /></div>
+              <div style="display: flex; justify-content: space-between; align-items: center; gap: 1em">
-            <div>
+                <span>
+                  Szlak: <input type="text" v-model="route.routeName" />
+                  &nbsp;
+
+                  <label :for="`${route.routeName}-internal`" style="display: inline-block">
                     <input
                       type="checkbox"
                       :name="`${route.routeName}-internal`"
                       :id="`${route.routeName}-internal`"
                       v-model="route.routeIsInternal"
                     />
-              <label :for="`${route.routeName}-internal`">Szlak wewnętrzny</label>
+                    WEWNĘTRZNY
+                  </label>
+                </span>
+
+                <img @click="removeRoute(i)" class="route-delete" src="/icon-trash.svg" alt="icon trash" />
               </div>
 
               <div>
-              <span>Liczba torów: </span>
+                <b>Liczba torów:</b>
+                <label class="radio-choice">
                   <input
                     type="radio"
                     :name="`${route.routeName}-tracks`"
                     :id="`${route.routeName}-track1`"
-                :value="Number(1)"
+                    :value="1"
                     :checked="route.routeTracks == 1"
                     v-model="route.routeTracks"
                   />
-              <label :for="`${route.routeName}-track1`">1</label>
+                  <span>1</span>
+                </label>
 
+                <label class="radio-choice">
                   <input
                     type="radio"
                     :name="`${route.routeName}-tracks`"
@@ -43,11 +55,13 @@
                     :checked="route.routeTracks == 2"
                     v-model="route.routeTracks"
                   />
-              <label :for="`${route.routeName}-track2`">2</label>
+                  <span>2</span>
+                </label>
               </div>
               <div>
-              <span>Elektryfikacja: </span>
+                <b>Elektryfikacja:</b>
 
+                <label class="radio-choice">
                   <input
                     type="radio"
                     :name="`${route.routeName}-electr`"
@@ -56,8 +70,10 @@
                     value="E"
                     v-model="route.routeElectrification"
                   />
-              <label :for="`${route.routeName}-E`">Tak</label>
+                  <span>Tak</span>
+                </label>
 
+                <label class="radio-choice" :for="`${route.routeName}-N`">
                   <input
                     type="radio"
                     :name="`${route.routeName}-electr`"
@@ -66,11 +82,13 @@
                     value="N"
                     v-model="route.routeElectrification"
                   />
-              <label :for="`${route.routeName}-N`">Nie</label>
+                  <span>Nie</span>
+                </label>
               </div>
               <div>
-              <span>Typ blokady: </span>
+                <b>Typ blokady:</b>
 
+                <label class="radio-choice">
                   <input
                     type="radio"
                     :name="`${route.routeName}-block`"
@@ -78,9 +96,10 @@
                     :checked="route.routeBlockType == 'P'"
                     value="P"
                     v-model="route.routeBlockType"
-              />
+                  /><span>PBL</span>
-              <label :for="`${route.routeName}-PBL`">PBL</label>
+                </label>
 
+                <label class="radio-choice">
                   <input
                     type="radio"
                     :name="`${route.routeName}-block`"
@@ -88,13 +107,14 @@
                     :checked="route.routeBlockType == 'S'"
                     value="S"
                     v-model="route.routeBlockType"
-              />
+                  /><span>SBL</span>
-              <label :for="`${route.routeName}-SBL`">SBL</label>
+                </label>
               </div>
 
               <div>
-              <span>Blokada dwukierunkowa: </span>
+                <b>Blokada dwukierunkowa:</b>
 
+                <label class="radio-choice">
                   <input
                     type="radio"
                     :name="`${route.routeName}-2twb`"
@@ -102,9 +122,10 @@
                     :checked="route.routeHasTwoWayBlock"
                     :value="true"
                     v-model="route.routeHasTwoWayBlock"
-              />
+                  /><span>Tak</span>
-              <label :for="`${route.routeName}-twb`">Tak</label>
+                </label>
 
+                <label class="radio-choice">
                   <input
                     type="radio"
                     :name="`${route.routeName}-2twb`"
@@ -112,9 +133,12 @@
                     :checked="!route.routeHasTwoWayBlock"
                     :value="false"
                     v-model="route.routeHasTwoWayBlock"
-              />
+                  /><span>Nie</span>
-              <label :for="`${route.routeName}-notwb`">Nie</label>
+                </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>
           </li>
         </ul>
@@ -126,66 +150,75 @@
         <button @click="closeRoutesModal">Zamknij</button>
       </div>
     </div>
+  </div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { computed, defineComponent, ref } from 'vue';
 import changeMixin from '../mixins/changeMixin';
 import { useStore } from '../store';
 
 export default defineComponent({
   setup() {
-    return {
+    const store = useStore();
-      store: useStore(),
+    const currentRoutes = ref('');
-    };
+    const routeBackup = ref('');
-  },
 
-  mixins: [changeMixin],
+    const computedRouteList = computed(() => {
+      if (!store.currentStation) return [];
 
-  data: () => ({
+      if (currentRoutes.value.length == 0) return [];
-    currentRoutes: '',
-    routeBackup: '',
-  }),
 
-  computed: {
+      return currentRoutes.value.split(';').map((route) => {
-    computedRouteList() {
-      if (!this.store.currentStation) return [];
-
-      if (this.currentRoutes.length == 0) return [];
-
-      return this.currentRoutes.split(';').map((route) => {
         /*
-          Route: !Oc_2EPB
+          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] ? true : false,
+          routeHasTwoWayBlock: routeSpecs[3] == 'B' ? true : false,
           routeIsInternal,
+          routeSpeed,
+          routeLength,
         };
       });
+    });
+
+    return {
+      store,
+      computedRouteList,
+      currentRoutes,
+      routeBackup,
+    };
   },
-  },
+
+  mixins: [changeMixin],
+
+  data: () => ({}),
 
   mounted() {
     if (this.store.currentStation) {
       this.currentRoutes = this.store.currentStation.routes;
       this.routeBackup = this.currentRoutes;
     }
-    // console.log(this.currentRoutes + " git");
   },
 
   methods: {
@@ -195,8 +228,8 @@ export default defineComponent({
     },
 
     addNewRoute() {
-      this.currentRoutes += (this.currentRoutes.length != 0 ? ';' : '') + `-_1EP`;
+      this.currentRoutes += (this.currentRoutes.length != 0 ? ';' : '') + `-_1EP:0:0`;
-      this.saveRoutes();
+      // this.saveRoutes();
     },
 
     removeRoute(index: number) {
@@ -205,7 +238,22 @@ export default defineComponent({
         .filter((_, i) => i != index)
         .join(';');
 
-      this.saveRoutes();
+      // this.saveRoutes();
+    },
+
+    parseRoutes() {
+      const routeString = this.computedRouteList
+        .map(
+          (route) =>
+            `${route.routeIsInternal ? '!' : ''}${route.routeName.trim()}_${route.routeTracks}${
+              route.routeElectrification
+            }${route.routeBlockType}${route.routeHasTwoWayBlock ? 'B' : ''}:${route.routeSpeed || 0}:${
+              route.routeLength || 0
+            }`
+        )
+        .join(';');
+
+      return routeString;
     },
 
     saveRoutes() {
@@ -213,96 +261,132 @@ export default defineComponent({
 
       if (index == -1) return;
 
-      const routeString = this.computedRouteList
+      const routeString = this.parseRoutes();
-        .map(
-          (route) =>
-            `${route.routeIsInternal ? '!' : ''}${route.routeName.trim()}_${route.routeTracks}${
-              route.routeElectrification
-            }${route.routeBlockType}${route.routeHasTwoWayBlock ? 'B' : ''}`
-        )
-        .join(';');
-
-      this.store.stationList[index]['routes'] = routeString;
-      this.currentRoutes = routeString;
 
       this.addChange(this.store.currentStation!, 'routes', this.routeBackup, routeString);
+      this.store.stationList[index]['routes'] = routeString;
+      this.currentRoutes = routeString;
     },
   },
 });
 </script>
 
 <style lang="scss" scoped>
+.bg {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+
+  z-index: 100;
+
+  background-color: #00000081;
+}
+
 .routes-modal {
   position: fixed;
   top: 50%;
   left: 50%;
 
-  width: 90%;
+  width: 95%;
   max-width: 800px;
 
-  height: 95%;
+  height: 95vh;
-  overflow: hidden;
+  max-height: 1000px;
-  padding: 0.5em 0;
-
-  display: flex;
-  flex-direction: column;
 
   transform: translate(-50%, -50%);
-  z-index: 100;
-
-  background-color: #333;
-}
-
-.modal-wrapper {
-  overflow: auto;
-  flex-grow: 2;
-}
-
-.routes-modal h1 {
-  position: sticky;
-  top: 0;
-
-  z-index: 100;
-
-  background-color: #333;
-  padding: 0.5em 2em;
-
-  text-align: center;
-}
-
-.routes-modal label {
-  padding: 0;
-}
-
-.routes-modal .exit {
-  position: absolute;
-  top: 0;
-  right: 0;
   z-index: 101;
+  padding: 0.5em 0;
 
-  cursor: pointer;
+  background-color: #333;
-  margin: 0.5em 1.5em;
+  border-radius: 1rem;
-}
 
-.exit img {
+  input {
-  width: 2.5em;
-}
-
-.routes-modal input {
     display: inline;
-  padding: 0;
+    margin: 0.25em 0;
-  margin: 0.5em 0;
 
     color: black;
     font-size: 1em;
 
     max-width: 120px;
   }
+}
 
-ul {
+label.radio-choice {
+  display: inline-block;
+  position: relative;
+
+  background-color: #333;
+  margin: 0.25em;
+  cursor: pointer;
+
+  input {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+  }
+
+  span {
+    display: flex;
+    padding: 0.25em 0.75em;
+  }
+
+  input:checked + span {
+    color: gold;
+    font-weight: bold;
+  }
+
+  input:focus-visible + span {
+    outline: 1px solid white;
+  }
+}
+
+.exit {
+  img {
+    vertical-align: text-bottom;
+    width: 1.4em;
+  }
+
+  cursor: pointer;
+}
+
+h1 {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.5em;
+
+  position: sticky;
+  top: -1px;
+
+  z-index: 100;
+
+  background-color: #333;
+  border-radius: 1rem 1rem 0 0;
+  padding: 0.25em 0.5em;
+  margin: 0;
+
+  font-size: 2em;
+
+  text-align: center;
+}
+
+.modal-content {
+  display: grid;
+  grid-template-rows: 1fr auto;
+
+  height: 100%;
+}
+
+.modal-wrapper {
+  overflow: auto;
+}
+
+.routes-modal ul {
   list-style: none;
   padding: 0 1em;
   margin: 0;
+  overflow: auto;
 }
 
 ul li {
@@ -315,9 +399,6 @@ ul li {
 }
 
 .route-delete {
-  position: absolute;
-  top: 0;
-  right: 0;
   margin: 0.5em;
   width: 1.15em;
 
@@ -325,15 +406,19 @@ ul li {
 }
 
 .routes-actions {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 0.5em;
   background-color: #333;
   width: 100%;
 
-  margin-top: 0.5em;
   padding: 0.5em 0;
   text-align: center;
 }
 
 .routes-actions button {
   font-size: 1.2em;
+  margin: 0;
 }
 </style>

src/components/TableActions.vue

@@ -117,7 +117,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);
+            if (propChange == 'routes') value = this.getRouteNames(changeItem[propChange] as string, true);
 
             itemChanges.push(`<i>${(HeaderTypes as any)[propChange]}:</i> ${value || '-'}`);
           }
@@ -173,7 +173,7 @@ export default defineComponent({
           return { ...v };
         });
 
-        const updateResData = (await this.store.updateSceneriesData(mappedChangeList)).data
+        const updateResData = (await this.store.updateSceneriesData(mappedChangeList)).data;
         this.store.changesResponse = updateResData;
 
         this.store.fetchSceneriesData();
@@ -207,7 +207,7 @@ export default defineComponent({
         signalType: 'współczesna',
         controlType: 'SCS',
         SUP: false,
-        routes: 'Test_1EPB"',
+        routes: 'Test_1EPB:0:0',
         checkpoints: '',
         authors: '',
         availability: 'default',

src/mixins/routesMixin.ts

@@ -3,18 +3,22 @@ import { SceneryRowItem } from '../types/types';
 
 export default defineComponent({
   methods: {
-    getRouteNames(routes: SceneryRowItem['routes']) {
+    getRouteNames(routes: SceneryRowItem['routes'], showAdditional = false) {
       return routes
         .split(';')
         .map((route) => {
           // !Oc_2EPB
+          const [_, speed, length] = route.split(':');
+
           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]}/${
+          return `<span ${speed != '0' && length != '0' ? 'class="text--accent"' : ''}>${
-            props2[2]
+            isInternal ? '<u>' + name + '</u>' : name
-          }${props2[3] ? '/B' : ''})</span>`;
+          }</span> <span style='color: #aaa'>(${props2[0]}/${props2[1]}/${props2[2]}${props2[3] == 'B' ? '/B' : ''}${
+            speed && showAdditional ? '/' + speed : ''
+          }${length && showAdditional ? '/' + length : ''})</span>`;
         })
         .join(', ');
     },

src/views/ManagerView.vue

@@ -19,7 +19,9 @@
           <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 === 'projectUrl'" :style="station.projectUrl ? 'color: gold' : 'color: gray;'">URL</span>
+              <span v-else-if="propName === 'projectUrl'" :style="station.projectUrl ? 'color: gold' : 'color: gray;'"
+                >URL</span
+              >
 
               <span v-else-if="propName === 'checkpoints'">{{ station[propName] ? 'POKAŻ' : 'DODAJ' }}</span>
 
@@ -240,10 +242,4 @@ td img {
   height: 1.45em;
   vertical-align: middle;
 }
-
-@media screen and (max-width: 550px) {
-  table {
-    font-size: 0.85em;
-  }
-}
 </style>