refactor: organized files, refreshed design and layout

src/components/Orders/OrderO.vue

@@ -0,0 +1,198 @@
+<template>
+  <section class="order-o">
+    <section class="order_header">
+      <h2 class="flex-center" style="padding: 0 0.5em">
+        Rozkaz pisemny "O" nr &nbsp;
+        <input type="number" v-model="order.header.orderNo" placeholder="nr rozkazu" min="1" />
+      </h2>
+
+      <div class="flex-row" style="padding: 0 0.5em">
+        dla pociągu nr
+        <input type="text" v-model="order.header.trainNo" placeholder="nr pociągu" />
+        dnia
+        <input type="text" v-model="order.header.date" />
+      </div>
+
+      <div class="horizontal-bar"></div>
+
+      <div style="display: flex; padding: 0 0.5em">
+        <b>1.</b>
+
+        <div style="margin-left: 1.5em">
+          1) zmniejszyć prędkość jazdy i zachować ostrożność <br />2) jechać ostrożnie (j.o.)
+        </div>
+      </div>
+    </section>
+
+    <section class="order_table">
+      <table cellborder="1">
+        <tbody>
+          <tr class="tr-header">
+            <td rowspan="2" width="35%">
+              Na posterunku, <br />
+              na szlaku
+            </td>
+            <td width="20%">od</td>
+            <td width="20%">do</td>
+            <td rowspan="2">1) prędkość najwyżej km/h</td>
+            <td rowspan="2">2) j.o.</td>
+            <td rowspan="2" width="35%">z powodu</td>
+          </tr>
+
+          <tr class="tr-header">
+            <td colspan="2">kilometra</td>
+          </tr>
+
+          <tr v-for="(row, i) in order.orderList" :key="i" class="tr-data">
+            <td>
+              <textarea v-model="row.name"></textarea>
+            </td>
+            <td>
+              <textarea v-model="row.from"></textarea>
+            </td>
+            <td>
+              <textarea v-model="row.to"></textarea>
+            </td>
+            <td>
+              <input type="text" v-model="row.vmax" />
+            </td>
+            <td>
+              <input type="checkbox" v-model="row.jo" />
+            </td>
+            <td>
+              <textarea v-model="row.reason"></textarea>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </section>
+
+    <div class="order_other">
+      <span><b>2.</b> Inne:</span>
+      <br />
+      <textarea class="others" cols="30" rows="10" v-model="order.other"></textarea>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import { defineComponent, reactive } from 'vue';
+import { useStore } from '../../store/store';
+
+export default defineComponent({
+  name: 'OrderO',
+
+  setup() {
+    const store = useStore();
+    const order = reactive(store.orderO);
+
+    const rowMethods = [
+      () => {
+        const { header } = order;
+
+        return `\n<i><b>Rozkaz pisemny "O" nr ${header.orderNo || '_'}</b> dla pociągu nr ${
+          header.trainNo || '_'
+        } dnia ${header.date || '_'}</i>`;
+      }
+    ];
+
+    return {
+      store,
+      order,
+      rowMethods
+    };
+  },
+
+  activated() {
+    this.generateMessage();
+  },
+
+  watch: {
+    order: {
+      deep: true,
+      handler() {
+        this.generateMessage();
+      }
+    }
+  },
+
+  methods: {
+    generateMessage() {
+      let message = this.rowMethods[0]();
+
+      if (this.order.orderList.some((row) => row.name)) {
+        message += `\n--------\n<b>[ 1 ]</b>`;
+        message += '\n1) zmniejszyć prędkość jazdy i zachować ostrożność';
+        message += '\n2) jechać ostrożnie (j.o.)\n';
+      }
+
+      for (let i = 0; i < this.order.orderList.length; i++) {
+        const row = this.order.orderList[i];
+        if (!row.name) continue;
+
+        message += `\n- ${row.name || '_'} od ${row.from || '_'} do ${row.to || '_'} kilometra`;
+
+        if (row.vmax) message += ` prędkość najwyżej ${row.vmax} km/h`;
+        if (row.jo) message += ` jechać ostrożnie`;
+
+        message += ` z powodu: ${row.reason || '_'}`;
+      }
+
+      if (this.order.other) message += `\n--------\n<b>[ 2 ]</b> Inne: ${this.order.other}`;
+
+      this.store.orderMessage = message;
+    }
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+table,
+td,
+th {
+  border: 2px solid black;
+  border-collapse: collapse;
+}
+
+.order_header {
+  padding: 0.5em 0;
+}
+
+.order_table {
+  .tr-header td {
+    padding: 1em 0.5em;
+  }
+
+  .tr-data td {
+    padding: 0.5em 0;
+  }
+
+  tbody {
+    font-weight: normal;
+    text-align: center;
+    vertical-align: middle;
+  }
+
+  input {
+    width: 80%;
+  }
+}
+
+.order_table {
+  textarea {
+    width: 90%;
+    min-height: 50px;
+    resize: vertical;
+  }
+}
+
+.order_other {
+  border-left: 2px solid black;
+  border-right: 2px solid black;
+
+  display: flex;
+  flex-direction: column;
+
+  padding: 0.5em;
+}
+</style>