Poprawki funkcjonalności c.d.

src/components/Order.vue

@@ -65,12 +65,11 @@ export default defineComponent({
 }
 
 .order {
-  max-width: 550px;
   background-color: white;
   color: black;
 
   max-height: 95vh;
-  overflow-y: auto;
+  overflow: auto;
 
   font-size: 15px;
 
@@ -179,3 +178,4 @@ select {
   }
 }
 </style>
+

src/components/OrderList.vue

@@ -5,7 +5,8 @@
     <transition-group name="list" tag="ul">
       <li class="no-orders-warning" v-if="sortedOrderList.length == 0" :key="-1">Brak zapisanych rozkazów!</li>
 
-      <li v-for="order in sortedOrderList" :key="order.id">
+      <li v-for="(order, i) in sortedOrderList" :key="order.id">
+        <b class="text--accent">#{{ sortedOrderList.length - i }}&nbsp;</b>
         <b>
           {{ getOrderName(order.orderType) }} nr {{ order.orderBody['header']['orderNo'] }} dla pociągu nr
           {{ order.orderBody['header']['trainNo'] }}
@@ -40,6 +41,7 @@ export default defineComponent({
   setup() {
     return {
       store: useStore(),
+      localStorage: window.localStorage,
     };
   },
 
@@ -136,3 +138,4 @@ li {
   }
 }
 </style>
+

src/components/OrderMessage.vue

@@ -3,6 +3,7 @@
     <h3>Wiadomość do wyświetlenia na czacie symulatora:</h3>
 
     <div class="message_body" v-html="fullOrderMessage"></div>
+    <p class="message_info">Po wygenerowaniu rozkazu skopiuj jego treść lub zapisz w pamięci przeglądarki za pomocą przycisków poniżej</p>
 
     <div class="message_actions">
       <button class="g-button action" @click="saveOrder">Zapisz nowy rozkaz</button>
@@ -158,6 +159,11 @@ export default defineComponent({
   -webkit-user-select: none;
 }
 
+.message_info {
+  text-align: center;
+  color: #ccc;
+}
+
 .message_actions {
   display: flex;
   align-items: center;

src/mixins/orderFooterMixin.ts

@@ -12,14 +12,19 @@ export default defineComponent({
     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}`;
+      const messageArray = [];
+
+      if (footer.stationName) messageArray.push(`stacja: ${footer.stationName}`);
+      if (footer.checkpointName) messageArray.push(`posterunek: ${footer.checkpointName}`);
+      if (footer.hour) messageArray.push(`godz. ${footer.hour}`);
+      if (footer.minutes) messageArray.push(`min. ${footer.minutes}`);
+      if (footer.dispatcherName) messageArray.push(`dyżurny ruchu ${footer.dispatcherName}`);
       if (footer.secondaryDispatcherName)
-        this.store.footerMessage += `, z polecenia dyżurnego ruchu ${footer.secondaryDispatcherName}`;
+        messageArray.push(`z polecenia dyżurnego ruchu ${footer.secondaryDispatcherName}`);
+
+      this.store.footerMessage = ` <b>|</b> ${messageArray.join(', ')} <b>|</b> Rozkaz otrzymałem, maszynista: (potwierdzić otrzymanie rozkazu)`;
     },
   },
 });
+
+

src/views/Home.vue

@@ -62,8 +62,6 @@ export default defineComponent({
 
   methods: {
     selectOrderMode(mode: string) {
-      console.log(mode);
-
       this.store.orderMode = mode;
     },
   },
@@ -94,12 +92,20 @@ export default defineComponent({
   min-height: 100vh;
   overflow-x: auto;
 
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  width: 100%;
+
   .home_container {
     display: flex;
     flex-wrap: wrap;
-    align-items: flex-start;
     justify-content: center;
-    padding: 2em 0;
+    gap: 2em 1em;
+    padding: 0.5em;
+
+    width: 100%;
 
     @media screen and (max-width: 650px) {
       padding-top: 85px;
@@ -108,13 +114,8 @@ export default defineComponent({
   }
 
   .order_container {
-    font-size: 0.9rem;
-    margin-right: 0.5em;
-    margin-bottom: 1em;
-
-    @media screen and (max-width: 550px) {
-      margin: 1em;
-    }
+    width: 100%;
+    max-width: 550px;
   }
 
   .message_container {