Checkboxy i numeracja rozkazów

src/components/OrderMessage.vue

@@ -18,6 +18,30 @@
       </button>
     </div>
 
+    <div class="message_checkboxes">
+      <label for="copy-increment">
+        <input
+          type="checkbox"
+          name="copy-increment"
+          id="copy-increment"
+          v-model="incrementOnCopy"
+          @change="onCheckboxChange"
+        />
+        Aktualizuj numer rozkazu po skopiowaniu
+      </label>
+      <br />
+      <label for="save-increment">
+        <input
+          type="checkbox"
+          name="save-increment"
+          id="save-increment"
+          v-model="incrementOnSave"
+          @change="onCheckboxChange"
+        />
+        Aktualizuj numer rokazu po zapisaniu
+      </label>
+    </div>
+
     <transition name="monit-anim">
       <div class="action_monit" v-if="actionMonit" v-html="actionMonit"></div>
     </transition>
@@ -42,6 +66,9 @@ export default defineComponent({
       saveIcon,
       actionMonit: '',
       monitTimeout: undefined as number | undefined,
+
+      incrementOnSave: true,
+      incrementOnCopy: true,
     };
   },
 
@@ -51,6 +78,11 @@ export default defineComponent({
     };
   },
 
+  mounted() {
+    this.incrementOnSave = this.getOrderSetting('save-increment') === 'false' ? false : true;
+    this.incrementOnCopy = this.getOrderSetting('copy-increment') === 'false' ? false : true;
+  },
+
   computed: {
     fullOrderMessage() {
       return this.store.orderMessage + this.store.footerMessage;
@@ -58,6 +90,13 @@ export default defineComponent({
   },
 
   methods: {
+    onCheckboxChange(e: Event) {
+      const checkbox = e.target as HTMLInputElement;
+      console.log(checkbox.id, checkbox.checked);
+
+      this.saveOrderSetting(checkbox.id, checkbox.checked);
+    },
+
     showActionMonit(text: string) {
       if (this.monitTimeout) {
         this.actionMonit = '';
@@ -81,6 +120,12 @@ export default defineComponent({
       }, 5000);
     },
 
+    incrementOrderNo() {
+      const order = this.store[this.store.chosenOrderType];
+
+      order.header.orderNo = (Number(order.header.orderNo) + 1).toString();
+    },
+
     copyMessage() {
       if (!navigator.clipboard)
         return this.showActionMonit(
@@ -90,8 +135,14 @@ export default defineComponent({
       const hasAtLeastOneRow = /(\[ \d \])/g.test(this.fullOrderMessage);
       const hasAllInputsFilled = !/_/g.test(this.store.orderMessage);
 
-      if (!hasAllInputsFilled) return this.showActionMonit(`<span class="text--warn">Wypełnij puste rubryki rozkazu przed jego skopiowaniem!</span>`);
-      if (!hasAtLeastOneRow) return this.showActionMonit(`<span class="text--warn">Dodaj co najmniej jedną działkę rozkazu przed jego skopiowaniem!</span>`);
+      if (!hasAllInputsFilled)
+        return this.showActionMonit(
+          `<span class="text--warn">Wypełnij puste rubryki rozkazu przed jego skopiowaniem!</span>`
+        );
+      if (!hasAtLeastOneRow)
+        return this.showActionMonit(
+          `<span class="text--warn">Dodaj co najmniej jedną działkę rozkazu przed jego skopiowaniem!</span>`
+        );
 
       const fieldsToCorrect = this.verifyOrderFields();
 
@@ -104,6 +155,8 @@ export default defineComponent({
 
       navigator.clipboard.writeText(this.fullOrderMessage);
 
+      if (this.incrementOnCopy) this.incrementOrderNo();
+
       this.showActionMonit(
         '<b class="text--accent">Skopiowano!</b> Możesz teraz wkleić treść rozkazu na czacie symulatora!'
       );
@@ -123,6 +176,8 @@ export default defineComponent({
           break;
         case 1:
           this.showActionMonit('Zapisano treść <b class="text--accent">rozkazu</b> w pamięci przeglądarki!');
+
+          if (this.incrementOnSave) this.incrementOrderNo();
           break;
 
         default:
@@ -201,6 +256,10 @@ export default defineComponent({
   }
 }
 
+.message_checkboxes {
+  margin-top: 1em;
+}
+
 .action_monit {
   text-align: center;
   padding: 1.5em;

src/components/OrderN.vue

@@ -3,7 +3,7 @@
     <section class="header" ref="header">
       <h2 class="flex-center">
         Rozkaz pisemny "N" nr
-        <input type="text" v-model="order.header.orderNo" placeholder="nr rozkazu" />
+        <input type="number" v-model="order.header.orderNo" placeholder="nr rozkazu" min="1" />
       </h2>
       <div class="flex-row">
         dla pociągu nr <input type="text" v-model="order.header.trainNo" placeholder="nr pociągu" /> dnia

src/components/OrderO.vue

@@ -3,7 +3,7 @@
     <section class="order_header">
       <h2 class="flex-center" style="padding: 0 0.5em">
         Rozkaz pisemny "O" nr
-        <input type="text" v-model="order.header.orderNo" placeholder="nr rozkazu"/>
+        <input type="number" v-model="order.header.orderNo" placeholder="nr rozkazu" min="1" />
       </h2>
 
       <div class="flex-row" style="padding: 0 0.5em">

src/components/OrderS.vue

@@ -3,7 +3,7 @@
     <section class="header">
       <h2 class="flex-center">
         Rozkaz pisemny "S" nr
-        <input type="text" v-model="order.header.orderNo" placeholder="nr rozkazu" />
+        <input type="number" v-model="order.header.orderNo" placeholder="nr rozkazu" min="1" />
       </h2>
       <div class="flex-row">
         dla
@@ -304,7 +304,7 @@ export default defineComponent({
     };
   },
 
-activated() {
+  activated() {
     this.generateMessage();
   },
 
@@ -335,7 +335,7 @@ activated() {
       });
     },
 
-   generateMessage() {
+    generateMessage() {
       let message = this.rowMethods[0]();
 
       for (let i = 0; i < 4; i++) {

src/mixins/orderStorageMixin.ts

@@ -10,6 +10,18 @@ export default defineComponent({
   },
 
   methods: {
+    saveOrderSetting(key: string, value: string | number | boolean) {
+      window.localStorage.setItem(key, value.toString());
+    },
+
+    getOrderSetting(key: string) {
+      return window.localStorage.getItem(key);
+    },
+
+    removeOrderSetting(key: string) {
+      window.localStorage.removeItem(key);
+    },
+
     saveLocalOrder() {
       let orderObj: LocalStorageOrder = {
         id: '',
@@ -120,3 +132,4 @@ export default defineComponent({
     },
   },
 });
+