Merge pull request #4 from Spythere/development

feature: ukrywanie szlaków

package.json

@@ -1,7 +1,7 @@
 {
   "name": "station-manager-2.0",
   "private": true,
-  "version": "2.3.1",
+  "version": "2.4.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

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,85 @@
+<template>
+  <div class="changelog">
+    <h3>Changelog:</h3>
+    <hr color="white" />
+
+    <!-- Changelog -->
+    <ul>
+      <li 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>
+      </li>
+    </ul>
+  </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] })),
+        };
+      });
+    },
+  },
+  components: { RouteList },
+});
+</script>
+
+<style lang="scss" scoped>
+ul {
+  height: 200px;
+  overflow: auto;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+h3 {
+  margin: 0;
+}
+</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>
-                  Szlak: <input type="text" v-model="route.routeName" />
-                  &nbsp;
+                <span> Szlak: <input type="text" v-model="route.routeName" /> </span>
 
-                  <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>
-                </span>
+                <button class="btn--icon">
+                  <img @click="removeRoute(i)" class="route-delete" src="/icon-trash.svg" alt="icon trash" />
+                </button>
+              </div>
 
-                <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
-                    type="radio"
-                    :name="`${route.routeName}-tracks`"
-                    :value="1"
-                    :checked="route.routeTracks == 1"
-                    v-model="route.routeTracks"
-                  />
+                  <input 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
-                    type="radio"
-                    :name="`${route.routeName}-tracks`"
-                    :value="2"
-                    :checked="route.routeTracks == 2"
-                    v-model="route.routeTracks"
-                  />
+                  <input 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
-                    type="radio"
-                    :name="`${route.routeName}-electr`"
-                    :value="true"
-                    :checked="route.isElectric"
-                    v-model="route.isElectric"
-                  />
+                  <input type="radio" :name="`${route.routeName}-electr`" :value="true" :checked="route.isElectric" v-model="route.isElectric" />
                   <span>Tak</span>
                 </label>
 
                 <label class="radio-choice">
-                  <input
-                    type="radio"
-                    :name="`${route.routeName}-electr`"
-                    :value="false"
-                    :checked="!route.isElectric"
-                    v-model="route.isElectric"
-                  />
+                  <input 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.isElectric ? 'E' : 'N'
-            }${route.isRouteSBL ? 'S' : 'P'}:${route.routeSpeed || 0}:${route.routeLength || 0}`
+            `${route.isInternal ? '!' : ''}${route.routeName.trim()}_${route.routeTracks}${route.isElectric ? 'E' : 'N'}${
+              route.isRouteSBL ? 'S' : 'P'
+            }:${route.routeSpeed || 0}:${route.routeLength || 0}`
         )
         .join(';');
 
@@ -197,11 +174,10 @@ export default defineComponent({
 
       if (index == -1) return;
 
-      const routeString = this.parseRoutes();
+      // const routeString = this.parseRoutes();
 
       this.addChange(this.store.currentStation!, 'routesInfo', this.routeBackup, this.currentRoutes);
       this.store.stationList[index]['routesInfo'] = this.currentRoutes;
-      // this.currentRoutes.push(this.cur)
     },
   },
 });
@@ -334,6 +310,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 +328,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

@@ -61,27 +61,23 @@
     </div>
 
     <div class="pane">
-      <button @click="changelogVisible = !changelogVisible">{{ changelogVisible ? 'Ukryj' : 'Pokaż' }} changelog</button>
+      <button @click="changelogVisible = !changelogVisible">
+        {{ changelogVisible ? 'Ukryj' : 'Pokaż' }} changelog ({{ store.changeList.length }})
+      </button>
     </div>
 
-    <div class="changelog" v-if="changelogVisible">
-      <h3>Changelog:</h3>
-      <hr color="white" />
-
-      <div v-html="changelog || 'brak zmian'"></div>
-    </div>
+    <Changelog v-if="changelogVisible" />
   </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 { SceneryRowItem } from '../types/types';
 import client from '../common/http';
 
 import { version } from '../../package.json';
+import Changelog from './Changelog.vue';
 
 export default defineComponent({
   setup() {
@@ -89,108 +85,57 @@ export default defineComponent({
       store: useStore(),
     };
   },
-
   data() {
     return {
       changelogVisible: false,
       packageVersion: version,
     };
   },
-
-  mixins: [routesMixin],
-
-  computed: {
-    changelog() {
-      console.log(this.store.changeList);
-
-      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 /> ');
-    },
-  },
-
   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)) {
+          if (/^#/.test(v.id.toString())) {
             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),
@@ -214,6 +159,7 @@ export default defineComponent({
             routeSpeed: 0,
             routeTracks: 1,
             routeName: 'Test',
+            hidden: false,
           },
         ],
         checkpoints: '',
@@ -221,51 +167,27 @@ 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;
@@ -349,19 +271,6 @@ label.notify {
     }
   }
 }
-.changelog {
-  position: relative;
-
-  div {
-    height: 200px;
-
-    overflow: auto;
-  }
-
-  h3 {
-    margin: 0;
-  }
-}
 
 @media screen and (max-width: 550px) {
   .pane {

src/mixins/changeMixin.ts

@@ -33,19 +33,21 @@ export default defineComponent({
 
       if (Object.keys(changeItem).length == 2 && changeItem.id)
         this.store.changeList = this.store.changeList.filter((item) => changeItem?.id != item.id);
-
-      this.store.unsavedChanges = this.store.changeList.length != 0;
     },
 
     addRemovalChange(sceneryData: SceneryRowItem) {
       const sceneryId = sceneryData.id;
 
+      // Sceneria niewpisana do bazy danych (id stworzone przez stronę)
+      if (sceneryId.toString().startsWith('#')) {
+        this.store.changeList = this.store.changeList.filter((item) => item.id != sceneryId);
+        return;
+      }
+
       let changeItem = this.store.changeList.find((item) => item.id == sceneryId);
 
       if (!changeItem) this.store.changeList.push({ id: sceneryId, name: sceneryData.name, toRemove: true });
       else changeItem['toRemove'] = true;
-
-      this.store.unsavedChanges = Object.keys(this.store.changeList).length != 0;
     },
   },
 });

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/store.ts

@@ -8,7 +8,6 @@ export const useStore = defineStore('store', {
       dataState: 'LOADING',
       authState: AuthState.LOADING,
 
-      unsavedChanges: false,
       stationList: [],
       backupList: [],
       stationsToRemove: [],
@@ -39,7 +38,6 @@ export const useStore = defineStore('store', {
         this.dataState = 'LOADED';
         this.backupList = JSON.parse(JSON.stringify(data));
         this.stationList = data;
-        this.unsavedChanges = false;
         this.changeList = [];
       } catch (error: any) {
         this.dataState = 'ERROR';
@@ -80,5 +78,9 @@ export const useStore = defineStore('store', {
         .sort((a, b) => (a.name > b.name ? 1 : -1))
         .filter((_, i) => i < state.maxVisibleResults);
     },
+
+    unsavedChanges(state) {
+      return Object.keys(state.changeList).length != 0;
+    },
   },
 });

src/types/types.ts

@@ -52,10 +52,11 @@ export interface SceneryRoutesInfo {
   routeSpeed: number;
   routeLength: number;
   routeTracks: number;
+  hidden?: boolean;
 }
 
 export interface SceneryRowItem {
-  id: string;
+  id: string | number;
   hash: string;
   name: string;
   abbr: string;
@@ -78,7 +79,7 @@ export interface SceneryRowItem {
 export type ChangeItem = {
   [key in ChangeProp]?: any;
 } & {
-  id: string;
+  id: string | number;
   name: string;
 
   toRemove?: boolean;
@@ -100,7 +101,6 @@ export interface IStore {
   dataState: string;
   authState: AuthState;
 
-  unsavedChanges: boolean;
   stationList: SceneryRowItem[];
   backupList: SceneryRowItem[];
   stationsToRemove: string[];

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 },
-  mixins: [changeMixin, routesMixin],
+  components: { RoutesModal, TableActions, UpdateCard, RouteList },
+  mixins: [changeMixin],
 
   data: () => ({
     AuthState,
@@ -181,6 +182,8 @@ table {
   color: white;
   position: relative;
   border-collapse: collapse;
+  width: 100%;
+  min-width: 1600px;
 }
 
 table thead {