dodano pole do ukrywania szlaków

src/App.vue

@@ -96,7 +96,7 @@ button {
   outline: none;
   border: none;
 
-  background-color: #0066ff;
+  background-color: #3c5a89;
   color: white;
 
   padding: 0.5em 0.5em;
@@ -107,13 +107,26 @@ button {
   cursor: pointer;
   transition: all 75ms;
 
+  &:hover:not([data-disabled='true']),
   &:focus-visible {
-    outline: 1px solid gold;
+    background-color: lighten($color: #3c5a89, $amount: 10%);
+  }
+
+  &[data-disabled='true'] {
+    user-select: none;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+
+    color: #999;
+  }
+
+  &.btn--icon {
+    background-color: transparent;
+    padding: 0;
   }
 
-  &:hover,
   &:focus-visible {
-    background-color: lighten($color: #0066ff, $amount: 10%);
+    outline: 1px solid gold;
   }
 }
 

src/components/Changelog.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="changelog">
+    <h3>Changelog:</h3>
+    <hr color="white" />
+
+    <!-- Changelog -->
+    <div v-for="(item, listIndex) in changeList" :key="listIndex">
+      <b class="text--accent">{{ item.name }}</b> ->
+
+      <!-- Info dla scenerii do usunięcia -->
+      <span v-if="item.toRemove" class="text--accent"> do usunięcia</span>
+
+      <!-- Info dla scenerii do ze zmianiami do zaktualizowania -->
+      <span v-else>
+        <span v-for="({ name: changeName, value: changeValue }, changeIndex) in item.changes" :key="changeIndex">
+          <i style="color: white">{{ (HeaderTypes as any)[changeName] }}: </i>
+
+          <span v-if="changeName == 'availability'">
+            {{ getAvailabilityValue(changeValue as Availability) }}
+          </span>
+
+          <RouteList v-else-if="changeName == 'routesInfo'" :routes="changeValue" />
+
+          <span v-else-if="typeof changeValue === 'boolean'">
+            {{ changeValue ? 'TAK' : 'NIE' }}
+          </span>
+
+          <span v-else>
+            {{ changeValue }}
+          </span>
+
+          <span v-if="changeIndex < item.changes.length - 1">; </span>
+        </span>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useStore } from '../store';
+import { Availability, HeaderTypes } from '../types/types';
+import { getAvailabilityValue } from '../types/typeUitls';
+import RouteList from './RouteList.vue';
+
+export default defineComponent({
+  data() {
+    return {
+      store: useStore(),
+      getAvailabilityValue,
+      HeaderTypes,
+    };
+  },
+  computed: {
+    changeList() {
+      return this.store.changeList.map((changeItem) => {
+        return {
+          name: changeItem.name,
+          toRemove: changeItem.toRemove,
+          changes: Object.keys(changeItem)
+            .filter((k) => !/^(id|name)$/.test(k))
+            .map((k) => ({ name: k, value: (changeItem as any)[k] })),
+        };
+      });
+    },
+    //  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 == 'routesInfo') value = this.getRouteNames(changeItem[propChange] as SceneryRoutesInfo[]);
+    //          itemChanges.push(`<i style='color: white'>${(HeaderTypes as any)[propChange]}:</i> ${value ?? '-'}`);
+    //        }
+    //        console.log(itemChanges);
+    //        return `<b class='text--accent'>${changeItem.name} -></b> ` + itemChanges.join('; ');
+    //      })
+    //      .join(' <br /> ');
+    //  },
+  },
+  components: { RouteList },
+});
+</script>
+
+<style lang="scss" scoped></style>

src/components/RouteList.vue

@@ -0,0 +1,47 @@
+<template>
+  <span class="routes">
+    <span
+      v-for="(route, i) in routes"
+      class="route"
+      :key="i"
+      :class="{
+        'text--accent': route.routeSpeed != 0 && route.routeLength != 0,
+        internal: route.isInternal,
+        hidden: route.hidden,
+      }"
+    >
+      <span class="route-name">{{ route.routeName }}</span>
+      <span class="route-info"> ({{ route.routeTracks }}/{{ route.isElectric ? 'E' : 'N' }}/{{ route.isRouteSBL ? 'S' : 'P' }}) </span>
+    </span>
+  </span>
+</template>
+
+<script lang="ts">
+import { PropType, defineComponent } from 'vue';
+import { SceneryRoutesInfo } from '../types/types';
+
+export default defineComponent({
+  props: {
+    routes: {
+      type: Array as PropType<SceneryRoutesInfo[]>,
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.route {
+  &.internal > .route-name {
+    text-decoration: underline;
+  }
+
+  &.hidden > .route-name {
+    // text-decoration: underline;
+    color: #ccc;
+  }
+}
+
+.route-info {
+  color: #aaa;
+}
+</style>

src/components/RoutesModal.vue

@@ -14,45 +14,34 @@
           <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>
+                <span> Szlak: <input type="text" v-model="route.routeName" /> </span>
-                  Szlak: <input type="text" v-model="route.routeName" />
-                  &nbsp;
 
-                  <label :for="`${route.routeName}-internal`" style="display: inline-block">
+                <button class="btn--icon">
-                    <input
+                  <img @click="removeRoute(i)" class="route-delete" src="/icon-trash.svg" alt="icon trash" />
-                      type="checkbox"
+                </button>
-                      :name="`${route.routeName}-internal`"
+              </div>
-                      :id="`${route.routeName}-internal`"
-                      v-model="route.isInternal"
-                    />
-                    WEWNĘTRZNY
-                  </label>
-                </span>
 
-                <img @click="removeRoute(i)" class="route-delete" src="/icon-trash.svg" alt="icon trash" />
+              <div>
+                <label :for="`${route.routeName}-internal`" style="display: inline-block">
+                  <input type="checkbox" :name="`${route.routeName}-internal`" :id="`${route.routeName}-internal`" v-model="route.isInternal" />
+                  WEWNĘTRZNY
+                </label>
+                &nbsp;
+                <label :for="`${route.routeName}-hidden`" style="display: inline-block">
+                  <input type="checkbox" :name="`${route.routeName}-hidden`" :id="`${route.routeName}-hidden`" v-model="route.hidden" />
+                  UKRYTY
+                </label>
               </div>
 
               <div>
                 <b>Liczba torów:</b>
                 <label class="radio-choice">
-                  <input
+                  <input type="radio" :name="`${route.routeName}-tracks`" :value="1" :checked="route.routeTracks == 1" v-model="route.routeTracks" />
-                    type="radio"
-                    :name="`${route.routeName}-tracks`"
-                    :value="1"
-                    :checked="route.routeTracks == 1"
-                    v-model="route.routeTracks"
-                  />
                   <span>1</span>
                 </label>
 
                 <label class="radio-choice">
-                  <input
+                  <input type="radio" :name="`${route.routeName}-tracks`" :value="2" :checked="route.routeTracks == 2" v-model="route.routeTracks" />
-                    type="radio"
-                    :name="`${route.routeName}-tracks`"
-                    :value="2"
-                    :checked="route.routeTracks == 2"
-                    v-model="route.routeTracks"
-                  />
                   <span>2</span>
                 </label>
               </div>
@@ -60,24 +49,12 @@
                 <b>Elektryfikacja:</b>
 
                 <label class="radio-choice">
-                  <input
+                  <input type="radio" :name="`${route.routeName}-electr`" :value="true" :checked="route.isElectric" v-model="route.isElectric" />
-                    type="radio"
-                    :name="`${route.routeName}-electr`"
-                    :value="true"
-                    :checked="route.isElectric"
-                    v-model="route.isElectric"
-                  />
                   <span>Tak</span>
                 </label>
 
                 <label class="radio-choice">
-                  <input
+                  <input type="radio" :name="`${route.routeName}-electr`" :value="false" :checked="!route.isElectric" v-model="route.isElectric" />
-                    type="radio"
-                    :name="`${route.routeName}-electr`"
-                    :value="false"
-                    :checked="!route.isElectric"
-                    v-model="route.isElectric"
-                  />
                   <span>Nie</span>
                 </label>
               </div>
@@ -183,9 +160,9 @@ export default defineComponent({
       const routeString = this.store.currentStation?.routesInfo
         .map(
           (route) =>
-            `${route.isInternal ? '!' : ''}${route.routeName.trim()}_${route.routeTracks}${
+            `${route.isInternal ? '!' : ''}${route.routeName.trim()}_${route.routeTracks}${route.isElectric ? 'E' : 'N'}${
-              route.isElectric ? 'E' : 'N'
+              route.isRouteSBL ? 'S' : 'P'
-            }${route.isRouteSBL ? 'S' : 'P'}:${route.routeSpeed || 0}:${route.routeLength || 0}`
+            }:${route.routeSpeed || 0}:${route.routeLength || 0}`
         )
         .join(';');
 
@@ -334,6 +311,12 @@ ul li {
   background-color: #222;
 }
 
+li > form {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25em;
+}
+
 .route-delete {
   margin: 0.5em;
   width: 1.15em;
@@ -346,7 +329,6 @@ ul li {
   justify-content: center;
   flex-wrap: wrap;
   gap: 0.5em;
-  background-color: #333;
   width: 100%;
 
   padding: 0.5em 0;

src/components/TableActions.vue

@@ -64,24 +64,26 @@
       <button @click="changelogVisible = !changelogVisible">{{ changelogVisible ? 'Ukryj' : 'Pokaż' }} changelog</button>
     </div>
 
-    <div class="changelog" v-if="changelogVisible">
+    <Changelog />
+
+    <!-- <div class="changelog" v-if="changelogVisible">
       <h3>Changelog:</h3>
       <hr color="white" />
 
       <div v-html="changelog || 'brak zmian'"></div>
-    </div>
+    </div> -->
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import routesMixin from '../mixins/routesMixin';
 import { useStore } from '../store';
 import { Availability, ChangeProp, HeaderTypes, SceneryRoutesInfo, SceneryRowItem } from '../types/types';
 import { getAvailabilityValue } from '../types/typeUitls';
 import client from '../common/http';
 
 import { version } from '../../package.json';
+import Changelog from './Changelog.vue';
 
 export default defineComponent({
   setup() {
@@ -89,108 +91,78 @@ export default defineComponent({
       store: useStore(),
     };
   },
-
   data() {
     return {
       changelogVisible: false,
       packageVersion: version,
     };
   },
-
-  mixins: [routesMixin],
-
   computed: {
-    changelog() {
+    //   changelog() {
-      console.log(this.store.changeList);
+    //     return this.store.changeList
-
+    //       .map((changeItem) => {
-      return this.store.changeList
+    //         let itemChanges = [];
-        .map((changeItem) => {
+    //         if (changeItem.toRemove) return `<b class='text--accent'>${changeItem.name} -></b> do usunięcia`;
-          let itemChanges = [];
+    //         for (let change in changeItem) {
-
+    //           let propChange = change as ChangeProp;
-          if (changeItem.toRemove) return `<b class='text--accent'>${changeItem.name} -></b> do usunięcia`;
+    //           if (/^(id|name)$/.test(propChange)) continue;
-
+    //           let value = typeof changeItem[propChange] === 'boolean' ? (changeItem[propChange] ? 'TAK' : 'NIE') : changeItem[propChange];
-          for (let change in changeItem) {
+    //           if (propChange == 'availability') value = getAvailabilityValue(changeItem[propChange] as Availability);
-            let propChange = change as ChangeProp;
+    //           // if (propChange == 'routesInfo') value = this.getRouteNames(changeItem[propChange] as SceneryRoutesInfo[]);
-
+    //           itemChanges.push(`<i style='color: white'>${(HeaderTypes as any)[propChange]}:</i> ${value ?? '-'}`);
-            if (/^(id|name)$/.test(propChange)) continue;
+    //         }
-
+    //         console.log(itemChanges);
-            let value = typeof changeItem[propChange] === 'boolean' ? (changeItem[propChange] ? 'TAK' : 'NIE') : changeItem[propChange];
+    //         return `<b class='text--accent'>${changeItem.name} -></b> ` + itemChanges.join('; ');
-
+    //       })
-            if (propChange == 'availability') value = getAvailabilityValue(changeItem[propChange] as Availability);
+    //       .join(' <br /> ');
-            if (propChange == 'routesInfo') value = this.getRouteNames(changeItem[propChange] as SceneryRoutesInfo[]);
+    //   },
-
+    // },
-            itemChanges.push(`<i style='color: white'>${(HeaderTypes as any)[propChange]}:</i> ${value ?? '-'}`);
-          }
-
-          console.log(itemChanges);
-
-          return `<b class='text--accent'>${changeItem.name} -></b> ` + itemChanges.join('; ');
-        })
-        .join(' <br /> ');
-    },
   },
-
   methods: {
     confirmLoadData() {
       const confirmed = confirm('Czy na pewno chcesz odświeżyć dane? Wszelkie niezapisane zmiany zostaną utracone!');
-
       if (confirmed) this.store.fetchSceneriesData();
     },
-
     confirmRestoreList() {
       const confirmed = confirm('Czy na pewno chcesz zresetować listę do ustawień z pliku? Wszelkie niezapisane zmiany zostaną utracone!');
-
       if (confirmed) this.restoreList();
     },
-
     confirmUpdateList() {
       const confirmed = confirm('Czy na pewno chcesz wprowadzić obecne zmiany?');
-
       if (confirmed) this.updateListToDb();
     },
-
     async signOut() {
       await client.post('/auth/logout');
-
       this.$router.push('/login');
       this.store.removeUserData();
     },
-
     onNotifyCheckboxChange(value: boolean) {
       window.localStorage.setItem('notifyDiscord', Number(value).toString());
     },
-
     async updateListToDb() {
       try {
         const mappedChangeList = this.store.changeList.map((v) => {
           if (/^#/.test(v.id)) {
             return { ...v, id: undefined };
           }
-
           return { ...v };
         });
-
         const updateResData = (await this.store.updateSceneriesData(mappedChangeList)).data;
         this.store.changesResponse = updateResData;
-
         this.store.fetchSceneriesData();
       } catch (error) {
         this.store.alertMessage = 'Ups! Wystąpił błąd podczas zapisywania danych!';
         console.error(error);
       }
     },
-
     addNewStation() {
       const name = prompt('Nazwa nowej scenerii');
       if (!name) return;
-
       if (this.store.stationList.some((station) => station.name.toLocaleLowerCase('pl-PL') == name.toLocaleLowerCase('pl-PL'))) {
         this.store.alertMessage = 'Sceneria o takiej nazwie już istnieje!';
         return;
       }
-
       this.store.newStationsCount++;
-
       const newSt: SceneryRowItem = {
         name,
         abbr: name.slice(0, 2),
@@ -221,51 +193,29 @@ export default defineComponent({
         availability: 'default',
         id: `#${Math.random().toString(32).substring(2)}`,
       };
-
       this.store.changeList.push({ ...newSt });
       // this.store.changeBackupList[newSt.id] = null;
       this.store.searchedSceneryName = name;
-
       this.store.unsavedChanges = true;
-
       this.store.stationList.unshift(newSt);
     },
-
     restoreList() {
       if (this.store.backupList.length == 0) return;
-
       this.store.stationList = JSON.parse(JSON.stringify(this.store.backupList));
       this.store.changeList = [];
       this.store.stationsToRemove = [];
       this.store.unsavedChanges = false;
       this.store.searchedSceneryName = '';
     },
-
     clearInput() {
       this.store.searchedSceneryName = '';
     },
   },
+  components: { Changelog },
 });
 </script>
 
 <style lang="scss" scoped>
-button {
-  background-color: #3c5a89;
-
-  &:hover:not([data-disabled='true']),
-  &:focus-visible {
-    background-color: lighten($color: #3c5a89, $amount: 10%);
-  }
-
-  &[data-disabled='true'] {
-    user-select: none;
-    -moz-user-select: none;
-    -webkit-user-select: none;
-
-    color: #999;
-  }
-}
-
 .table-actions {
   display: flex;
   flex-direction: column;

src/mixins/routesMixin.ts

@@ -6,6 +6,8 @@ export default defineComponent({
     getRouteNames(routes: SceneryRowItem['routesInfo']) {
       return routes
         .map((route) => {
+          const routeNameClr = route.routeSpeed != 0 && route.routeLength != 0 ? 'text--accent' : '';
+
           // !Oc_2EPB
           return `<span ${route.routeSpeed != 0 && route.routeLength != 0 ? 'class="text--accent"' : ''}>${
             route.isInternal ? '<u>' + route.routeName + '</u>' : route.routeName

src/types/types.ts

@@ -52,6 +52,7 @@ export interface SceneryRoutesInfo {
   routeSpeed: number;
   routeLength: number;
   routeTracks: number;
+  hidden?: boolean;
 }
 
 export interface SceneryRowItem {

src/views/ManagerView.vue

@@ -23,7 +23,8 @@
 
               <span v-else-if="propName === 'checkpoints'">{{ station[propName] ? 'POKAŻ' : 'DODAJ' }}</span>
 
-              <span v-else-if="propName === 'routes'" v-html="getRouteNames(station.routesInfo)"></span>
+              <RouteList v-else-if="propName === 'routes'" :routes="station.routesInfo" />
+              <!-- <span v-else-if="propName === 'routes'" v-html="getRouteNames(station.routesInfo)"></span> -->
 
               <span v-else-if="propName === 'signalType'"> {{ station[propName] }}</span>
 
@@ -63,12 +64,12 @@ import { useStore } from '../store';
 import { SceneryRowItem, Availability, AuthState } from '../types/types';
 import RoutesModal from '../components/RoutesModal.vue';
 import TableActions from '../components/TableActions.vue';
-import routesMixin from '../mixins/routesMixin';
 import UpdateCard from '../components/UpdateCard.vue';
+import RouteList from '../components/RouteList.vue';
 
 export default defineComponent({
-  components: { RoutesModal, TableActions, UpdateCard },
+  components: { RoutesModal, TableActions, UpdateCard, RouteList },
-  mixins: [changeMixin, routesMixin],
+  mixins: [changeMixin],
 
   data: () => ({
     AuthState,