Poprawki w order helperze

src/components/OrderHelper.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="order-helper g-modal">
+    <div class="modal-bg" @click="store.helperModalOpen = false"></div>
+
+    <div class="content modal-content">
+      <h2>Rozkazy pisemne - zastosowania w TD2</h2>
+
+      <hr />
+      <b>Rozkaz pisemny "S" (dot. semaforów)</b>
+      <p>Rozkaz pisemny "S" jest stosowany w następujących sytuacjach:</p>
+
+      <ul>
+        <li v-for="data in orderHelperData.orderS">{{ data }}</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useStore } from '../store/store';
+import orderHelperData from '../data/orderHelperData.json';
+
+export default defineComponent({
+  setup() {
+    return {
+      store: useStore(),
+      orderHelperData,
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.content {
+  width: 100%;
+  max-width: 800px;
+
+  height: 100vh;
+  max-height: 800px;
+
+  margin: 1em;
+  padding: 1em;
+  background-color: #2b2b2b;
+
+  text-align: center;
+}
+
+ul {
+  text-align: left;
+  list-style: inside;
+}
+</style>

src/components/SideBar.vue

@@ -5,6 +5,8 @@
         <img :src="saveIcon" alt="save icon" />
       </button> -->
 
+      <!-- <button @click="store.helperModalOpen = true">?</button> -->
+
       <button
         v-for="orderType in orderTypeList"
         :key="orderType.id"

src/data/orderHelperData.json

@@ -0,0 +1,15 @@
+{
+  "orderS": [
+    "zezwolenie na przejechanie obok semafora wyjazdowego, wskazującego sygnał „Stój”, sygnał wątpliwy, białe światło bądź nieoświetlonego, o ile nie można podać sygnału zastępczego „Sz”",
+    "zezwolenie na wyjazd ze stacji posiadającej semafory wyjazdowe z toru, przy którym nie ma semafora wyjazdowego",
+    "zezwolenie na przejechanie obok semafora wjazdowego, drogowskazowego lub obsługiwanego semafora odstępowego albo tarczy zaporowej, wskazujących sygnał „Stój”, również sygnał wątpliwy, białe światło, bądź nieoświetlonych, o ile nie można podać sygnału zastępczego „Sz”",
+    "zezwolenie na jazdę manewrową taboru w kierunku szlaku, poza ustaloną granicę przetaczania (wskaźnik W 5) lub poza ostatni rozjazd",
+    "zezwolenie na jazdę w przypadku, gdy pojazd trakcyjny znajduje się poza semaforem wskazującym sygnał zezwalający, którego prowadzący pojazd kolejowy nie widzi,",
+    "zezwolenie na dalszą jazdę zatrzymanego pociągu skierowanego na tor prawy, gdy jego czoło minęło semafor z wyświetlonym wskaźnikiem W 24,",
+    "zezwolenie na dalszą jazdę zatrzymanego pociągu, gdy pociąg przejechał i zatrzymał się za semaforem wskazującym sygnał „Stój”",
+    "polecenie jazdy pociągu do określonego kilometra na szlaku jednotorowym, zatrzymania się i powrotu najpóźniej w nakazanym czasie",
+    "polecenie nieprzewidzianego wewnętrznym rozkładem jazdy zatrzymania na szlaku pociągu, z określeniem celu i czasu postoju,",
+    "informację o tym, że w czasie prowadzenia ruchu pociągów w odstępach posterunków następczych sygnały na samoczynnych semaforach odstępowych są nieważne",
+    "informację o unieważnieniu sygnałów na semaforach SBL"
+  ]
+}

src/store/store.ts

@@ -3,6 +3,8 @@ import { defineStore } from 'pinia';
 export const useStore = defineStore('store', {
   state: () => {
     return {
+      helperModalOpen: false,
+
       chosenOrderType: 'orderN' as 'orderO' | 'orderS' | 'orderN',
       chosenLocalOrderId: '',
 

src/styles/global.scss

@@ -15,6 +15,10 @@ html {
   font-weight: 500;
 }
 
+* {
+  box-sizing: border-box;
+}
+
 a {
   color: white;
   text-decoration: none;
@@ -112,3 +116,34 @@ ul {
 ::-webkit-scrollbar-thumb:hover {
   background: #555;
 }
+
+// Modal
+.g-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 1000;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .modal-bg {
+    position: fixed;
+    width: 100vw;
+    height: 100vh;
+
+    cursor: pointer;
+
+    background-color: #000000aa;
+  }
+
+  .modal-content {
+    position: relative;
+    z-index: 1001;
+
+    overflow: auto;
+  }
+}

src/views/Home.vue

@@ -1,4 +1,5 @@
 <template>
+  <OrderHelper v-if="store.helperModalOpen" />
   <SideBar />
 
   <div class="home">
@@ -39,9 +40,10 @@ import SideBar from '../components/SideBar.vue';
 import OrderMessage from '../components/OrderMessage.vue';
 import OrderList from '../components/OrderList.vue';
 import { useStore } from '../store/store';
+import OrderHelper from '../components/OrderHelper.vue';
 
 export default defineComponent({
-  components: { OrderVue, SideBar },
+  components: { OrderVue, SideBar, OrderHelper },
 
   data() {
     return {