chore: added print and refresh buttons

package.json

@@ -1,7 +1,7 @@
 {
   "name": "srjp-td2",
   "private": true,
-  "version": "0.0.0",
+  "version": "0.1.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@heroicons/vue": "^2.2.0",
     "axios": "^1.7.9",
     "pinia": "^2.3.1",
     "vue": "^3.5.13"

public/icons/printer.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5 fill-white">
+  <path fill-rule="evenodd" d="M5 2.75C5 1.784 5.784 1 6.75 1h6.5c.966 0 1.75.784 1.75 1.75v3.552c.377.046.752.097 1.126.153A2.212 2.212 0 0 1 18 8.653v4.097A2.25 2.25 0 0 1 15.75 15h-.241l.305 1.984A1.75 1.75 0 0 1 14.084 19H5.915a1.75 1.75 0 0 1-1.73-2.016L4.492 15H4.25A2.25 2.25 0 0 1 2 12.75V8.653c0-1.082.775-2.034 1.874-2.198.374-.056.75-.107 1.127-.153L5 6.25v-3.5Zm8.5 3.397a41.533 41.533 0 0 0-7 0V2.75a.25.25 0 0 1 .25-.25h6.5a.25.25 0 0 1 .25.25v3.397ZM6.608 12.5a.25.25 0 0 0-.247.212l-.693 4.5a.25.25 0 0 0 .247.288h8.17a.25.25 0 0 0 .246-.288l-.692-4.5a.25.25 0 0 0-.247-.212H6.608Z" clip-rule="evenodd" />
+</svg>

src/App.vue

@@ -3,25 +3,41 @@
     <nav class="bg-zinc-900 w-full p-1 print:hidden">
       <div class="flex items-center">
         <img src="/favicon.svg" class="size-8 inline" />
-        <b class="ml-2 text-lg">Rozkładownik TD2</b>
+        <b class="ml-2 text-lg"
+          >Rozkładownik TD2 <sup class="font-semibold text-zinc-300">{{ version }}</sup></b
+        >
       </div>
     </nav>
 
     <main class="grid print:block p-3 mx-auto max-w-[800px] h-screen grid-rows-[auto_1fr_20px] gap-1">
-      <select
+      <div class="flex gap-2 mb-2">
-        name="trains"
+        <select
-        id="trains-select"
+          name="trains"
-        class="mb-2 bg-zinc-800 p-1 rounded-md print:hidden w-full"
+          id="trains-select"
-        v-model="selectedTrainId"
+          class="bg-zinc-800 p-1 rounded-md print:hidden w-full"
-        @change="selectTrain"
+          v-model="selectedTrainId"
-      >
+          @change="selectTrain"
-        <option :value="train.id" v-for="train in activeTimetableTrains">
+        >
-          {{ train.driverName }} | {{ train.timetable?.category }} {{ train.trainNo }}
+          <option :value="train.id" v-for="train in activeTimetableTrains">
-        </option>
+            {{ train.driverName }} | {{ train.timetable?.category }} {{ train.trainNo }}
-      </select>
+          </option>
+        </select>
+
+        <button class="bg-zinc-800 p-1 rounded-md hover:bg-zinc-700" @click="openPrintingWindow">
+          <PrinterIcon class="text-white size-6" />
+        </button>
+
+        <button class="bg-zinc-800 p-1 rounded-md hover:bg-zinc-700" @click="refreshData">
+          <ArrowPathIcon class="text-white size-6" />
+        </button>
+      </div>
 
       <div class="overflow-auto py-1">
-        <table class="table-fixed">
+        <b v-if="selectedTrain" class="my-2"
+          >{{ selectedTrain.timetable!.category }} {{ selectedTrain.trainNo }} Relacja {{ selectedTrain.timetable?.route.replace('|', ' - ') }}</b
+        >
+
+        <table class="table-fixed mt-2">
           <thead>
             <tr>
               <th width="40" class="border border-white print:border-black">Nr <br />linii</th>
@@ -213,8 +229,8 @@
         </table>
       </div>
 
-      <footer v-if="generatedDate" class="text-center text-sm text-zinc-400 mt-1">
+      <footer v-if="generatedDate" class="text-center text-sm text-zinc-400 mt-1 print:hidden">
-        Wygenerowano w {{ generatedMs }}ms o {{ generatedDate.toLocaleTimeString() }}
+        Rozkład wygenerowany w {{ generatedMs }}ms - aktualny dla godziny: {{ generatedDate.toLocaleTimeString() }}
       </footer>
     </main>
   </div>
@@ -227,6 +243,9 @@ import { useGlobalStore } from './stores/global.store';
 import sceneryCorrections from './data/corrections.json';
 import type { ActiveTrain } from './types/common.types';
 
+import { version } from '../package.json';
+import { PrinterIcon, ArrowPathIcon } from '@heroicons/vue/16/solid';
+
 interface StopRow {
   pointName: string;
   pointKm: string;
@@ -259,6 +278,7 @@ interface StopRow {
 }
 
 export default defineComponent({
+  components: { PrinterIcon, ArrowPathIcon },
   data: () => ({
     selectedTrainId: '',
     globalStore: useGlobalStore(),
@@ -266,6 +286,7 @@ export default defineComponent({
 
     generatedMs: 0,
     generatedDate: null as Date | null,
+    version,
   }),
 
   mounted() {
@@ -280,6 +301,14 @@ export default defineComponent({
 
       if (this.selectTrain != null) this.generatedDate = new Date();
     },
+
+    openPrintingWindow() {
+      window.print();
+    },
+
+    refreshData() {
+      this.selectTrain();
+    },
   },
 
   computed: {

yarn.lock

@@ -157,6 +157,11 @@
   resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.24.2.tgz#34aa0b52d0fbb1a654b596acfa595f0c7b77a77b"
   integrity sha512-7VTgWzgMGvup6aSqDPLiW5zHaxYJGTO4OokMjIlrCtf+VpEL+cXKtCvg723iguPYI5oaUNdS+/V7OU2gvXVWEg==
 
+"@heroicons/vue@^2.2.0":
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/@heroicons/vue/-/vue-2.2.0.tgz#d81f14eed448eec9859849ed63facd3f29bca2b3"
+  integrity sha512-G3dbSxoeEKqbi/DFalhRxJU4mTXJn7GwZ7ae8NuEQzd1bqdd0jAbdaBZlHPcvPD2xI1iGzNVB4k20Un2AguYPw==
+
 "@isaacs/cliui@^8.0.2":
   version "8.0.2"
   resolved "https://registry.yarnpkg.com/@isaacs/cliui/-/cliui-8.0.2.tgz#b37667b7bc181c168782259bab42474fbf52b550"