chore: added footer and missing html messages

src/components/Order/OrderFooter.vue

@@ -1,7 +1,77 @@
 <template>
-  <div></div>
+  <table class="order-table">
+    <tbody>
+      <tr>
+        <td width="50%">
+          <div>
+            <input
+              type="text"
+              class="order-input"
+              id="footer-V"
+              v-model="store.orderData.footer.V"
+            />
+            <label class="order-input-label" for="footer-V">{{ t('order.footer.V') }}</label>
+          </div>
+        </td>
+        <td>
+          <div>
+            <input
+              type="text"
+              class="order-input"
+              id="footer-W"
+              v-model="store.orderData.footer.W"
+            />
+            <label class="order-input-label" for="footer-W">{{ t('order.footer.W') }}</label>
+          </div>
+        </td>
+      </tr>
+
+      <tr>
+        <td>
+          <div>
+            <input
+              type="text"
+              class="order-input"
+              id="footer-Y"
+              v-model="store.orderData.footer.Y"
+            />
+            <label class="order-input-label" for="footer-Y">{{ t('order.footer.Y') }}</label>
+          </div>
+        </td>
+        <td>
+          <div>
+            <input
+              type="text"
+              class="order-input"
+              id="footer-Z"
+              v-model="store.orderData.footer.Z"
+            />
+            <label class="order-input-label" for="footer-Z">{{ t('order.footer.Z') }}</label>
+          </div>
+        </td>
+      </tr>
+    </tbody>
+  </table>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+import { useStore } from '../../store/store';
 
-<style scoped></style>
+const { t } = useI18n();
+
+const store = useStore();
+</script>
+
+<style scoped>
+.order-input {
+  max-width: 100%;
+  width: 100%;
+  text-align: left;
+}
+
+.order-table > tbody > tr > td > div {
+  width: 100%;
+  padding: 0.5em 1rem;
+}
+</style>

src/components/Order/OrderHeader.vue

@@ -69,7 +69,7 @@ const store = useStore();
 <style scoped>
 .header-input-box {
   width: 100%;
-  padding: 0 1rem;
+  padding: 0.5em 1em;
 }
 
 .order-input {

src/components/Order/OrderMainContent.vue

@@ -82,9 +82,9 @@
             <!-- For 23.10 only -->
             <template v-slot:text-list v-if="instruction.key == '2310'">
               <i18n-t
+                v-for="(fieldInputs, i) in instruction.listFields"
                 :keypath="`order.${instruction.key}.text-list`"
                 tag="div"
-                v-for="(fieldInputs, i) in instruction.listFields"
               >
                 <template v-slot:bold>
                   <label>

src/locales/pl.json

@@ -202,23 +202,27 @@
          "signalbox1": "x.2 posterunek",
          "km1": "x.3 km",
          "signalbox2": "x.4 posterunek",
-         "hour1": "x.5 godzina"
+         "hour1": "x.5 godzina",
+         "message-html": "<b>Polecam jazdę po torze zamkniętym</b> nr {0} w kierunku {1} do km {2} zjazd do {3} do godz. {4}"
       },
       "2181": {
          "text": "{bold1}",
-         "bold1": "Tor zamknięty wolny od taboru"
+         "bold1": "Tor zamknięty wolny od taboru",
+         "message-html": "<b>Tor zamknięty wolny od taboru</b> "
       },
       "2182": {
          "text": "{bold1} {train1} w km {km1}",
          "bold1": "Na torze pracuje pociąg",
          "train1": "x.1 numer pociągu",
-         "km1": "x.2 km"
+         "km1": "x.2 km",
+         "message-html": "<b>Na torze pracuje pociąg</b> {0} w km {1}"
       },
       "2183": {
          "text": "{bold1} {train1} do km {km1}",
          "bold1": "Na tor zostanie wyprawiony pociąg",
          "train1": "x.1 numer pociągu",
-         "km1": "x.2 km"
+         "km1": "x.2 km",
+         "message-html": "<b>Na tor zostanie wyprawiony pociąg</b> {0} do km {1}"
       },
       "2185": {
          "text": "{bold1} na tor nr {track1} w km {km1} na szlaku {'|'} {signalbox1} {'|'} {signalbox2}",
@@ -226,7 +230,8 @@
          "track1": "x.1 tor",
          "km1": "x.2 km",
          "signalbox1": "x.3 posterunek",
-         "signalbox2": "x.4 posterunek"
+         "signalbox2": "x.4 posterunek",
+         "message-html": "<b>Zezwalam na wstawienie PSD</b> na tor nr {0} w km {1} na szlaku {'|'} {2} {'|'} {3}"
       },
       "2310": {
          "text": "{bold1}{br}{text-list}",
@@ -239,15 +244,18 @@
          "vmax1": "x.{0} km/h",
          "km1": "x.{0} km",
          "km2": "x.{0} km",
-         "other1": "x.{1} przyczyna"
+         "other1": "x.{1} przyczyna",
+         "message-html": "<b>Nie przekraczać prędkości i zachować ostrożność:</b> <br /> "
       },
       "2311": {
          "text": "{bold1}",
-         "bold1": "Podawać sygnał „Baczność”"
+         "bold1": "Podawać sygnał „Baczność”",
+         "message-html": "<b>Podawać sygnał „Baczność”</b>"
       },
       "2320": {
          "text": "{other2320}",
-         "other2320": "x.96 inne"
+         "other2320": "x.96 inne",
+         "message-html": "Inne: {0}"
       },
       "footer": {
          "V": "V Identyfikator maszynisty",

src/store/store.ts

@@ -292,6 +292,12 @@ export const useStore = defineStore('store', {
             inputFields: {},
             optionalFieldNames: []
           }
+        },
+        footer: {
+          V: '',
+          W: '',
+          Y: '',
+          Z: ''
         }
       },