Stopka rozkazu z informacjami

src/components/Order.vue

@@ -1,56 +1,12 @@
 <template>
-  <div class="rozkaz">
+  <div class="order">
     <transition name="order-anim" mode="out-in">
       <keep-alive>
-        <component :is="chosenOrderComponent"></component>
+        <component :is="chosenOrderComponent" :key="chosenOrderComponent.name"></component>
       </keep-alive>
     </transition>
 
-    <section class="info">
+    <OrderFooter />
-      <table class="info-table">
-        <tbody>
-          <tr>
-            <td colspan="4">
-              <input type="text" v-model="info.stationName" />
-              <br />
-              stacja
-            </td>
-
-            <td colspan="3">
-              <input type="text" v-model="info.checkpointName" />
-              <br />
-              posterunek
-            </td>
-
-            <td colspan="2">
-              <input type="text" v-model="info.hour" />
-              <br />
-              godz.
-            </td>
-
-            <td colspan="1">
-              <input type="text" v-model="info.minutes" />
-              <br />
-              min.
-            </td>
-          </tr>
-
-          <tr>
-            <td colspan="5">
-              <input type="text" v-model="info.dispatcherName" />
-              <br />
-              dyżurny ruchu
-            </td>
-
-            <td colspan="5">
-              <input type="text" v-model="info.secondaryDispatcherName" />
-              <br />
-              z polecenia dyżurnego ruchu
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </section>
   </div>
 </template>
 
@@ -59,16 +15,16 @@ import { defineComponent } from 'vue';
 import { useStore } from '../store/store';
 import OrderNVue from './OrderN.vue';
 import OrderSVue from './OrderS.vue';
+import OrderFooter from './OrderFooter.vue';
 
 export default defineComponent({
-  components: { OrderNVue, OrderSVue },
+  components: { OrderNVue, OrderSVue, OrderFooter },
 
   setup() {
     const store = useStore();
 
     return {
       store,
-      info: store.orderInfo,
     };
   },
 
@@ -77,13 +33,15 @@ export default defineComponent({
       return this.store.chosenOrderType == 'OrderS' ? OrderSVue : OrderNVue;
     },
   },
+
+
 });
 </script>
 
 <style lang="scss">
 @import '../styles/global.scss';
 
-.rozkaz {
+.order {
   max-width: 500px;
   background-color: white;
   color: black;
@@ -167,24 +125,6 @@ select {
   }
 }
 
-table.info-table {
-  border-collapse: collapse;
-  width: 100%;
-  table-layout: fixed;
-
-  td {
-    border: 2px solid black;
-    border-collapse: collapse;
-    padding: 0.35em;
-  }
-
-  input {
-    max-width: 95%;
-  }
-
-  text-align: center;
-}
-
 .order-anim {
   &-enter-active,
   &-leave-active {

src/components/OrderFooter.vue

@@ -0,0 +1,97 @@
+<template>
+  <section class="order_info">
+    <table>
+      <tbody>
+        <tr>
+          <td colspan="4">
+            <input type="text" v-model="footerInfo.stationName" />
+            <br />
+            stacja
+          </td>
+
+          <td colspan="3">
+            <input type="text" v-model="footerInfo.checkpointName" />
+            <br />
+            posterunek
+          </td>
+
+          <td colspan="2">
+            <input type="text" v-model="footerInfo.hour" />
+            <br />
+            godz.
+          </td>
+
+          <td colspan="1">
+            <input type="text" v-model="footerInfo.minutes" />
+            <br />
+            min.
+          </td>
+        </tr>
+
+        <tr>
+          <td colspan="5">
+            <input type="text" v-model="footerInfo.dispatcherName" />
+            <br />
+            dyżurny ruchu
+          </td>
+
+          <td colspan="5">
+            <input type="text" v-model="footerInfo.secondaryDispatcherName" />
+            <br />
+            z polecenia dyżurnego ruchu
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </section>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import orderFooterMixin from '../mixins/orderFooterMixin';
+import { useStore } from '../store/store';
+
+export default defineComponent({
+  mixins: [orderFooterMixin],
+
+  setup() {
+    const store = useStore();
+
+    return {
+      store,
+      footerInfo: store.orderFooter,
+    };
+  },
+
+  watch: {
+    footerInfo: {
+      deep: true,
+      handler() {
+        this.generateFooter();
+      },
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.order_info {
+  table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+
+    td {
+      border: 2px solid black;
+      border-collapse: collapse;
+      padding: 0.35em;
+    }
+
+    input {
+      max-width: 95%;
+    }
+
+    text-align: center;
+  }
+}
+</style>

src/components/OrderN.vue

@@ -208,6 +208,7 @@
 
 <script lang="ts">
 import { defineComponent, reactive } from 'vue';
+import orderFooterMixin from '../mixins/orderFooterMixin';
 import { useStore } from '../store/store';
 
 type OrderRowRange = 1 | 2 | 3 | 4 | 5;
@@ -248,7 +249,7 @@ export default defineComponent({
         if (row2.checkbox == 'checkbox-2a') {
           message += ` przejechać obok wskazującego sygnał "Stój" semafora ${row2.signalType || '_'} `;
 
-          if (row2.signalType == 'wyjazdowego') message += row2.signal1 || "_";
+          if (row2.signalType == 'wyjazdowego') message += row2.signal1 || '_';
           if (row2.signalType == 'drogowskazowego')
             message += `${row2.signal2 || '_'} (odnoszącego się do wyjazdu pociągu)`;
           if (row2.signalType == 'wjazdowego') message += `${row2.signal3 || '_'} na post. odg. bez sem. wyjazdowego`;
@@ -336,8 +337,6 @@ export default defineComponent({
 
       this.store.orderMessage = message;
     },
-
-    generateFooter() {},
   },
 });
 </script>

src/components/OrderS.vue

@@ -78,7 +78,8 @@
                   v-model="order.row2.signalType"
                 />
                 <label for="radio-2a-2"
-                  >drogowskazowego <input type="text" v-model="order.row2.signal2" /> (odnoszącego się do wyjazdu pociągu)
+                  >drogowskazowego <input type="text" v-model="order.row2.signal2" /> (odnoszącego się do wyjazdu
+                  pociągu)
                 </label>
                 <br />
                 <input
@@ -106,10 +107,11 @@
               </div>
             </td>
             <td>
-              Od <input type="text" v-model="order.row3.from" /> do <input type="text" v-model="order.row3.to" /> po torze
+              Od <input type="text" v-model="order.row3.from" /> do <input type="text" v-model="order.row3.to" /> po
-              nr <input type="text" v-model="order.row3.trackNo" /> ruch pociągów prowadzony jest w odstępie posterunków
+              torze nr <input type="text" v-model="order.row3.trackNo" /> ruch pociągów prowadzony jest w odstępie
-              następczych. Wskazania semaforów sbl są nieważne. Zachować ostrożność od ostatniego semafora ze wskaźnikiem
+              posterunków następczych. Wskazania semaforów sbl są nieważne. Zachować ostrożność od ostatniego semafora
-              "W18". Szlak wolny, ostatni pociąg nr <input type="text" v-model="order.row3.trainNo" /> przybył do
+              ze wskaźnikiem "W18". Szlak wolny, ostatni pociąg nr
+              <input type="text" v-model="order.row3.trainNo" /> przybył do
               <input type="text" v-model="order.row3.arrivedTo" /> o godzinie
               <input type="text" v-model="order.row3.hour" />
             </td>
@@ -135,6 +137,7 @@
 
 <script lang="ts">
 import { defineComponent, reactive } from 'vue';
+import orderFooterMixin from '../mixins/orderFooterMixin';
 import { useStore } from '../store/store';
 
 type OrderRowRange = 1 | 2 | 3 | 4;
@@ -248,7 +251,6 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-
 textarea {
   width: 95%;
   height: 200px;

src/mixins/orderFooterMixin.ts

@@ -0,0 +1,25 @@
+import { defineComponent } from 'vue';
+import { useStore } from '../store/store';
+
+export default defineComponent({
+  setup() {
+    return {
+      store: useStore(),
+    };
+  },
+
+  methods: {
+    generateFooter() {
+      const footer = this.store.orderFooter;
+
+      this.store.footerMessage = ' <b>|</b> ';
+      if (footer.stationName) this.store.footerMessage += ` Stacja: ${footer.stationName}`;
+      if (footer.checkpointName) this.store.footerMessage += ` Posterunek: ${footer.checkpointName}`;
+      if (footer.hour) this.store.footerMessage += `, godz. ${footer.hour}`;
+      if (footer.minutes) this.store.footerMessage += ` min. ${footer.minutes}`;
+      if (footer.dispatcherName) this.store.footerMessage += `, dyżurny ruchu ${footer.dispatcherName}`;
+      if (footer.secondaryDispatcherName)
+        this.store.footerMessage += `, z polecenia dyżurnego ruchu ${footer.secondaryDispatcherName}`;
+    },
+  },
+});

src/store/store.ts

@@ -5,7 +5,7 @@ export const useStore = defineStore('store', {
     return {
       chosenOrderType: 'OrderS',
 
-      orderInfo: {
+      orderFooter: {
         stationName: '',
         checkpointName: '',
         hour: '',
@@ -15,6 +15,7 @@ export const useStore = defineStore('store', {
       },
 
       orderMessage: '',
+      footerMessage: '',
 
       orderN: {
         header: {

src/views/Home.vue

@@ -10,7 +10,7 @@
       <div class="message_container">
         <h3>Wiadomość do wyświetlenia na czacie symulatora:</h3>
 
-        <div class="message_body" v-html="store.orderMessage"></div>
+        <div class="message_body" v-html="fullOrderMessage"></div>
 
         <div class="message_actions">
           <button class="g-button" @click="copyMessage">Zapisz ten rozkaz</button>
@@ -35,9 +35,15 @@ export default defineComponent({
     };
   },
 
+  computed: {
+    fullOrderMessage() {
+      return this.store.orderMessage + this.store.footerMessage;
+    },
+  },
+
   methods: {
     copyMessage() {
-      navigator.clipboard.writeText(this.store.orderMessage);
+      navigator.clipboard.writeText(this.fullOrderMessage);
     },
   },
 });
@@ -97,7 +103,8 @@ export default defineComponent({
 }
 
 .message_body {
-  min-height: 250px;
+  height: 250px;
+  overflow: auto;
   text-align: justify;
 
   background-color: #fff;