wskaźnik wersji na stronie

src/components/TableActions.vue

@@ -1,18 +1,24 @@
 <template>
   <div class="table-actions">
-    <div class="pane info-pane">
-      <img src="/favicon.svg" width="50" alt="" />
+    <div class="info-pane">
+      <div>
+        <img src="/favicon.svg" width="50" alt="" />
+      </div>
 
       <div>
-        <span v-if="store.user">
-          Zalogowany jako <b>{{ store.user.name }}</b>
-        </span>
-        &bull;
-        <span class="info-file" :class="store.dataState">
-          <span v-if="store.dataState == 'LOADING'">Ładowanie danych...</span>
-          <span v-if="store.dataState == 'LOADED'">Załadowano dane z bazy!</span>
-          <span v-if="store.dataState == 'ERROR'">Błąd podczas pobierania danych!</span>
-        </span>
+        <div style="font-size: 0.75em; color: #ccc">v{{ packageVersion }}</div>
+        <div>
+          <span v-if="store.user">
+            Zalogowany jako <b>{{ store.user.name }}</b>
+          </span>
+          &bull;
+          <span class="info-file" :class="store.dataState">
+            <span v-if="store.dataState == 'LOADING'">Ładowanie danych...</span>
+            <span v-if="store.dataState == 'LOADED'">Załadowano dane z bazy!</span>
+            <span v-if="store.dataState == 'ERROR'">Błąd podczas pobierania danych!</span>
+          </span>
+        </div>
+
         <div>
           <span class="file-changes" style="color: salmon" v-if="store.unsavedChanges">Niezapisane zmiany!</span>
           <span class="file-changes" style="color: #aaa" v-else>Brak niezapisanych zmian</span>
@@ -74,6 +80,8 @@ import { Availability, ChangeProp, HeaderTypes, SceneryRoutesInfo, SceneryRowIte
 import { getAvailabilityValue } from '../types/typeUitls';
 import client from '../common/http';
 
+import { version } from '../../package.json';
+
 export default defineComponent({
   setup() {
     return {
@@ -84,6 +92,7 @@ export default defineComponent({
   data() {
     return {
       changelogVisible: false,
+      packageVersion: version,
     };
   },
 
@@ -265,6 +274,7 @@ button {
 
 .info-pane {
   display: flex;
+  align-items: center;
   gap: 0.5em;
 }