refactor: modal for updating vehicles; global & modal styles changes

2026-05-03 21:48:14 +00:00 · 2025-11-27 02:48:06 +01:00
parent 3698552e28
commit f29678a811
9 changed files with 481 additions and 262 deletions
@@ -1,13 +1,20 @@
 <template>
-  <div class="bg" @click="closeRoutesModal"></div>
-  <div class="routes-modal" v-if="sceneriesStore.currentStation" @keydown.esc="closeRoutesModal" tabindex="0" ref="modal">
+  <div class="modal-bg" @click="closeRoutesModal"></div>
+
+  <div
+    v-if="sceneriesStore.currentStation"
+    class="modal routes-modal"
+    @keydown.esc="closeRoutesModal"
+    tabindex="0"
+    ref="modal"
+  >
    <div class="modal-content">
      <div class="modal-wrapper">
-        <h1>
+        <h1 class="modal-header">
          Szlaki na scenerii {{ sceneriesStore.currentStation.name }}
-          <div class="exit" @click="closeRoutesModal">
-            <img src="/icon-exit.svg" alt="exit icon" />
-          </div>
+          <button class="modal-exit" @click="closeRoutesModal">
+            <LucideX :size="20" />
+          </button>
        </h1>

        <ul class="route-list">
@@ -16,19 +23,29 @@
              <div style="display: flex; justify-content: space-between; align-items: center; gap: 1em">
                <span> Szlak: <input type="text" v-model="route.routeName" /> </span>

-                <button class="btn--icon">
-                  <img @click="removeRoute(i)" class="route-delete" src="/icon-trash.svg" alt="icon trash" />
+                <button class="route-delete-btn" @click="removeRoute(i)">
+                  <LucideTrash />
                </button>
              </div>

              <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" />
+                  <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" />
+                  <input
+                    type="checkbox"
+                    :name="`${route.routeName}-hidden`"
+                    :id="`${route.routeName}-hidden`"
+                    v-model="route.hidden"
+                  />
                  UKRYTY
                </label>
              </div>
@@ -36,12 +53,24 @@
              <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>
@@ -49,12 +78,24 @@
                <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>
@@ -86,9 +127,13 @@

              <div v-if="route.routeTracks == 1">Prędkość: <input type="number" v-model="route.routeSpeed" /> km/h</div>

-              <div v-if="route.routeTracks == 2">Prędkość (wjazd na sc.): <input type="number" v-model="route.routeSpeed" /> km/h</div>
-              <div v-if="route.routeTracks == 2">Prędkość (wyjazd ze sc.): <input type="number" v-model="route.routeSpeedExit" /> km/h</div>
-              
+              <div v-if="route.routeTracks == 2">
+                Prędkość (wjazd na sc.): <input type="number" v-model="route.routeSpeed" /> km/h
+              </div>
+              <div v-if="route.routeTracks == 2">
+                Prędkość (wyjazd ze sc.): <input type="number" v-model="route.routeSpeedExit" /> km/h
+              </div>
+
              <div>Długość: <input type="number" v-model="route.routeLength" /> m</div>
              <div>Linia kolejowa: <input type="number" v-model="route.realLineNo" /></div>
            </form>
@@ -110,8 +155,11 @@ import { Ref, defineComponent, ref } from 'vue';
 import changeMixin from '../mixins/changeMixin';
 import { SceneryRoutesInfo } from '../types/sceneries.types';
 import { useSceneriesStore } from '../stores/sceneries.store';
+import { LucideTrash, LucideX } from 'lucide-vue-next';

 export default defineComponent({
+  components: { LucideX, LucideTrash },
+
  setup() {
    const sceneriesStore = useSceneriesStore();
    const currentRoutes: Ref<SceneryRoutesInfo[]> = ref([]);
@@ -164,9 +212,9 @@ export default defineComponent({
      const routeString = this.sceneriesStore.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(';');

@@ -174,7 +222,9 @@ export default defineComponent({
    },

    saveRoutes() {
-      const index = this.sceneriesStore.stationList.findIndex((station) => station.name === this.sceneriesStore.currentStation?.name);
+      const index = this.sceneriesStore.stationList.findIndex(
+        (station) => station.name === this.sceneriesStore.currentStation?.name,
+      );

      if (index == -1) return;

@@ -186,45 +236,16 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
-.bg {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
+@use '../styles/modal';

-  z-index: 100;
+.routes-modal input {
+  display: inline;
+  margin: 0.25em 0;

-  background-color: #00000081;
-}
+  color: black;
+  font-size: 1em;

-.routes-modal {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-
-  width: 95%;
-  max-width: 800px;
-
-  height: 95vh;
-  max-height: 1000px;
-
-  transform: translate(-50%, -50%);
-  z-index: 101;
-  padding: 0.5em 0;
-
-  background-color: #333;
-  border-radius: 1rem;
-
-  input {
-    display: inline;
-    margin: 0.25em 0;
-
-    color: black;
-    font-size: 1em;
-
-    max-width: 120px;
-  }
+  max-width: 120px;
 }

 label.radio-choice {
@@ -256,35 +277,6 @@ label.radio-choice {
  }
 }

-.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;
@@ -292,18 +284,14 @@ h1 {
  height: 100%;
 }

-.modal-wrapper {
-  overflow: auto;
-}
-
-.routes-modal ul {
+ul.route-list {
  list-style: none;
  padding: 0 1em;
  margin: 0;
  overflow: auto;
 }

-ul li {
+ul.route-list li {
  padding: 0.65em;
  margin: 0.5em 0;

@@ -312,19 +300,12 @@ ul li {
  background-color: #222;
 }

-li > form {
+ul.route-list li > form {
  display: flex;
  flex-direction: column;
  gap: 0.25em;
 }

-.route-delete {
-  margin: 0.5em;
-  width: 1.15em;
-
-  cursor: pointer;
-}
-
 .routes-actions {
  display: flex;
  justify-content: center;
@@ -340,4 +321,13 @@ li > form {
  font-size: 1.2em;
  margin: 0;
 }
+
+.route-delete-btn {
+  background-color: #444;
+  border-radius: 0.5em;
+
+  &:hover {
+    background-color: #555;
+  }
+}
 </style>