chore: added helper placeholders to header & footer fields

src/components/Order/OrderFooter.vue

@@ -9,6 +9,7 @@
               class="order-input"
               id="footer-V"
               v-model="store.orderData.footer.V"
+              placeholder="Nick maszynisty"
             />
             <label class="order-input-label" for="footer-V">{{ t('order.footer.V') }}</label>
           </div>
@@ -20,6 +21,7 @@
               class="order-input"
               id="footer-W"
               v-model="store.orderData.footer.W"
+              placeholder="Nick dyżurnego"
             />
             <label class="order-input-label" for="footer-W">{{ t('order.footer.W') }}</label>
           </div>
@@ -34,6 +36,7 @@
               class="order-input"
               id="footer-Y"
               v-model="store.orderData.footer.Y"
+              placeholder="Godzina w formacie HH:MM"
             />
             <label class="order-input-label" for="footer-Y">{{ t('order.footer.Y') }}</label>
           </div>
@@ -45,6 +48,7 @@
               class="order-input"
               id="footer-Z"
               v-model="store.orderData.footer.Z"
+              placeholder="RD-(nr rozkazu)-(hash sc.)-(2 ostatnie cyfry roku)"
             />
             <label class="order-input-label" for="footer-Z">{{ t('order.footer.Z') }}</label>
           </div>

src/components/Order/OrderHeader.vue

@@ -15,6 +15,7 @@
               class="order-input"
               id="header-A"
               v-model="store.orderData.header.A"
+              :placeholder="t('order.header.A-placeholder')"
             />
             <label class="order-input-label" for="header-A">{{ t('order.header.A') }}</label>
           </div>
@@ -40,6 +41,7 @@
               class="order-input"
               id="header-C"
               v-model="store.orderData.header.C"
+              :placeholder="t('order.header.C-placeholder')"
             />
             <label class="order-input-label" for="header-C">{{ t('order.header.C') }}</label>
           </div>
@@ -51,6 +53,7 @@
               class="order-input"
               id="header-D"
               v-model="store.orderData.header.D"
+              :placeholder="t('order.header.D-placeholder')"
             />
             <label class="order-input-label" for="header-D">{{ t('order.header.D') }}</label>
           </div>

src/locales/en.json

@@ -77,9 +77,12 @@
       "title": "Train order",
       "header": {
          "A": "A Nr pociągu {'|'} składu manewrowego",
+         "A-placeholder": "Numer pociągu lub manewru",
          "B": "B Data",
          "C": "C Lokalizacja pociągu {'|'} składu manewrowego",
-         "D": "D Lokalizacja nadawcy"
+         "C-placeholder": "Nazwa posterunku lub szlaku",
+         "D": "D Lokalizacja nadawcy",
+         "D-placeholder": "Nazwa posterunku"
       },
       "22": {
          "text": "Dotyczy jazdy torem lewym",

src/locales/pl.json

@@ -77,9 +77,12 @@
       "title": "Rozkaz pisemny",
       "header": {
          "A": "A Nr pociągu {'|'} składu manewrowego",
+         "A-placeholder": "Numer pociągu lub manewru",
          "B": "B Data",
          "C": "C Lokalizacja pociągu {'|'} składu manewrowego",
-         "D": "D Lokalizacja nadawcy"
+         "C-placeholder": "Nazwa posterunku lub szlaku",
+         "D": "D Lokalizacja nadawcy",
+         "D-placeholder": "Nazwa posterunku"
       },
       "22": {
          "text": "Dotyczy jazdy torem lewym",
@@ -264,9 +267,13 @@
       },
       "footer": {
          "V": "V Identyfikator maszynisty",
+         "V-placeholder": "Nick maszynisty",
          "W": "W Identyfikator nadawcy",
+         "W-placeholder": "Nick dyżurnego",
          "Y": "Y Godzina",
-         "Z": "Z Identyfikator rozkazu pisemnego"
+         "Y-placeholder": "Godzina w formacie HH:MM np. 09:25",
+         "Z": "Z Identyfikator rozkazu pisemnego",
+         "Z-placeholder": "RD-(nr rozkazu)-(hash sc.)-(2 ostatnie cyfry roku)"
       }
    }
 }

src/styles/_order.scss

@@ -83,6 +83,10 @@ input.order-input {
     font-size: 0.8em;
     color: black;
   }
+
+  &::placeholder {
+    font-size: 0.85em;
+  }
 }
 
 label.order-input-label {