Merge pull request #43 from Spythere/development

v1.9.1

.gitignore

@@ -24,5 +24,8 @@ pnpm-debug.log*
 *.sw?
 node_modules
 
+# Lock files
+*.lock
+
 # Dev files
 stockInfoDev.json

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pojazdownik",
-  "version": "1.9.0",
+  "version": "1.9.1",
   "private": true,
   "type": "module",
   "scripts": {
@@ -12,8 +12,8 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "@heroicons/vue": "^2.2.0",
     "axios": "^1.4.0",
+    "lucide-vue-next": "^0.487.0",
     "pinia": "^2.0.17",
     "prettier": "^3.0.3",
     "vue": "^3.2.37",

src/components/tabs/StorageTab.vue

@@ -16,19 +16,16 @@
 
               <div class="storage-item-top-actions">
                 <button class="btn btn--icon" @click="chooseStorageStock(storageEntry.id)">
-                  <ArrowRightEndOnRectangleIcon style="width: 25px" />
+                  <LogIn />
                 </button>
 
                 <button class="btn btn--icon" @click="toggleStorageEntryExpand(storageEntry.id)">
-                  <ChevronDownIcon
-                    v-if="!expandedEntries.includes(storageEntry.id)"
-                    style="width: 25px"
-                  />
-                  <ChevronUpIcon v-else style="width: 25px" />
+                  <ChevronDown v-if="!expandedEntries.includes(storageEntry.id)" />
+                  <ChevronUp v-else />
                 </button>
 
                 <button class="btn btn--icon" @click="removeStockIndexFromStorage(storageEntry.id)">
-                  <TrashIcon style="width: 25px" />
+                  <Trash2 />
                 </button>
               </div>
             </div>
@@ -62,24 +59,16 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 
-import {
-  ArrowRightEndOnRectangleIcon,
-  ChevronDownIcon,
-  ChevronUpIcon,
-  FolderArrowDownIcon,
-  TrashIcon,
-} from '@heroicons/vue/20/solid';
-
 import { useStore } from '../../store';
 import stockMixin from '../../mixins/stockMixin';
+import { ChevronDown, ChevronUp, LogIn, Trash2 } from 'lucide-vue-next';
 
 export default defineComponent({
   components: {
-    ChevronDownIcon,
-    ChevronUpIcon,
-    FolderArrowDownIcon,
-    TrashIcon,
-    ArrowRightEndOnRectangleIcon,
+    ChevronDown,
+    ChevronUp,
+    LogIn,
+    Trash2,
   },
 
   mixins: [stockMixin],
@@ -112,7 +101,9 @@ export default defineComponent({
           },
           new Map() as Map<string, number>
         )
-      ).map(([stockName, count]) => `${count}x ${stockName.replace(/_/g, ' ')}`).join(', ');
+      )
+        .map(([stockName, count]) => `${count}x ${stockName.replace(/_/g, ' ')}`)
+        .join(', ');
     },
     removeStockIndexFromStorage(stockName: string) {
       let removeConfirm = confirm(this.$t('storage.remove-confirm'));
@@ -184,10 +175,10 @@ ul.storage-list > li {
 .storage-item-top {
   display: flex;
   align-items: center;
+  gap: 0.5em;
 }
 
 .storage-item-top > h3 {
-  font-size: 1.2em;
   width: 100%;
   text-align: left;
   margin: 0;

src/components/tabs/stock-list/StockActions.vue

@@ -7,7 +7,7 @@
         :data-button-tooltip="$t('stocklist.action-upload-file')"
       >
         <input type="file" @change="uploadStockFromFile" ref="conFile" accept=".con,.txt" />
-        <FolderPlusIcon />
+        <FolderUp :stroke-width="2.5" />
       </button>
 
       <button
@@ -15,7 +15,7 @@
         @click="uploadStockFromClipboard"
         :data-button-tooltip="$t('stocklist.action-upload-clipboard')"
       >
-        <ClipboardDocumentCheckIcon />
+        <ClipboardPaste :stroke-width="2.5" />
       </button>
 
       <button
@@ -25,7 +25,7 @@
         @click="downloadStock"
         :data-button-tooltip="$t('stocklist.action-download')"
       >
-        <ArrowDownTrayIcon />
+        <FolderDown :stroke-width="2.5" />
       </button>
 
       <button
@@ -35,7 +35,7 @@
         @click="copyToClipboard"
         :data-button-tooltip="$t('stocklist.action-copy')"
       >
-        <DocumentDuplicateIcon />
+        <ClipboardCopy :stroke-width="2.5" />
       </button>
 
       <button
@@ -45,7 +45,7 @@
         @click="saveStockDataToStorage"
         :data-button-tooltip="$t('stocklist.action-bookmark')"
       >
-        <BookmarkIcon />
+        <Bookmark :stroke-width="2.5" />
       </button>
 
       <button
@@ -55,7 +55,7 @@
         @click="resetStock"
         :data-button-tooltip="$t('stocklist.action-reset')"
       >
-        <ArrowUturnLeftIcon />
+        <ListRestart :stroke-width="2.5" />
       </button>
 
       <button
@@ -65,7 +65,17 @@
         @click="shuffleCars"
         :data-button-tooltip="$t('stocklist.action-shuffle')"
       >
-        <ArrowPathIcon />
+        <Shuffle :stroke-width="2.5" />
+      </button>
+
+      <button
+        class="btn btn--image"
+        :data-disabled="stockIsEmpty"
+        :disabled="stockIsEmpty"
+        @click="turnAroundCars"
+        :data-button-tooltip="$t('stocklist.action-switch')"
+      >
+        <Repeat :stroke-width="2.5" />
       </button>
     </div>
 
@@ -75,7 +85,7 @@
         :tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
         @click="stockListUtils.moveUpStock(store.chosenStockListIndex)"
       >
-        <ChevronUpIcon />
+        <ChevronUp :stroke-width="2.5" />
         {{ $t('stocklist.action-move-up') }}
       </button>
 
@@ -84,7 +94,7 @@
         :tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
         @click="stockListUtils.moveDownStock(store.chosenStockListIndex)"
       >
-        <ChevronDownIcon />
+        <ChevronDown :stroke-width="2.5" />
         {{ $t('stocklist.action-move-down') }}
       </button>
 
@@ -93,7 +103,7 @@
         :tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
         @click="stockListUtils.removeStock(store.chosenStockListIndex)"
       >
-        <TrashIcon />
+        <Trash2 :stroke-width="2.5" />
         {{ $t('stocklist.action-remove') }}
       </button>
     </div>
@@ -108,33 +118,38 @@ import { isTractionUnit } from '../../../utils/vehicleUtils';
 import { useFileUtils } from '../../../utils/fileUtils';
 import stockMixin from '../../../mixins/stockMixin';
 import { useStockListUtils } from '../../../utils/stockListUtils';
+
 import {
-  ArrowDownTrayIcon,
-  ArrowPathIcon,
-  ArrowUturnLeftIcon,
-  BookmarkIcon,
-  ChevronDownIcon,
-  ChevronUpIcon,
-  ClipboardDocumentCheckIcon,
-  DocumentDuplicateIcon,
-  FolderPlusIcon,
-  TrashIcon,
-} from '@heroicons/vue/20/solid';
+  Bookmark,
+  ChevronDown,
+  ChevronUp,
+  ClipboardCopy,
+  ClipboardPaste,
+  Download,
+  FolderDown,
+  FolderUp,
+  ListRestart,
+  Repeat,
+  Shuffle,
+  Trash2,
+} from 'lucide-vue-next';
 
 export default defineComponent({
   mixins: [stockMixin],
 
   components: {
-    ArrowDownTrayIcon,
-    ArrowPathIcon,
-    ArrowUturnLeftIcon,
-    BookmarkIcon,
-    ChevronDownIcon,
-    ChevronUpIcon,
-    ClipboardDocumentCheckIcon,
-    DocumentDuplicateIcon,
-    FolderPlusIcon,
-    TrashIcon,
+    Bookmark,
+    ChevronDown,
+    ChevronUp,
+    ClipboardCopy,
+    ClipboardPaste,
+    Download,
+    FolderUp,
+    ListRestart,
+    Repeat,
+    Shuffle,
+    FolderDown,
+    Trash2,
   },
 
   data: () => ({
@@ -196,6 +211,22 @@ export default defineComponent({
       }
     },
 
+    turnAroundCars() {
+      if (this.store.stockList.length <= 1) return;
+
+      const isFirstTractionUnit = isTractionUnit(this.store.stockList[0].vehicleRef);
+
+      const sliceToSwap = isFirstTractionUnit
+        ? this.store.stockList.slice(1)
+        : this.store.stockList.slice();
+
+      sliceToSwap.reverse();
+
+      if (isFirstTractionUnit) sliceToSwap.unshift(this.store.stockList[0]);
+
+      this.store.stockList = sliceToSwap;
+    },
+
     downloadStock() {
       if (this.store.stockList.length == 0) return alert(this.$t('stocklist.alert-empty'));
 

src/components/tabs/stock-list/StockSpecs.vue

@@ -1,20 +1,26 @@
 <template>
-  <div class="stock_specs">
+  <div class="stock-specs">
     <div v-if="store.chosenStorageStockName || chosenRealComposition">
-      <b class="bookmarked-stock-info" v-if="store.chosenStorageStockName">
+      <b v-if="store.chosenStorageStockName">
         <span
           class="text--accent"
           :title="store.chosenStorageStockName.length > 41 ? store.chosenStorageStockName : ''"
         >
-          <BookmarkIcon />
+          <BookmarkCheck :size="19" />
           {{ store.chosenStorageStockName.slice(0, 40) }}
           {{ store.chosenStorageStockName.length > 41 ? '...' : '' }}
         </span>
       </b>
+
       <span v-if="store.chosenStorageStockName && chosenRealComposition"> | </span>
+
       <b class="real-stock-info" v-if="chosenRealComposition">
         <span class="text--accent">
-          <img :src="getIconURL(chosenRealComposition.type)" :alt="chosenRealComposition.type" />
+          <img
+            class="real-stock-icon"
+            :src="getIconURL(chosenRealComposition.type)"
+            :alt="chosenRealComposition.type"
+          />
           {{ chosenRealComposition.number }} {{ chosenRealComposition.name }}
         </span>
       </b>
@@ -40,10 +46,10 @@
 import { defineComponent } from 'vue';
 import { useStore } from '../../../store';
 import imageMixin from '../../../mixins/imageMixin';
-import { BookmarkIcon } from '@heroicons/vue/20/solid';
+import { BookmarkCheck } from 'lucide-vue-next';
 
 export default defineComponent({
-  components: { BookmarkIcon },
+  components: { BookmarkCheck },
 
   mixins: [imageMixin],
 
@@ -62,11 +68,11 @@ export default defineComponent({
 </script>
 
 <style scoped>
-.bookmarked-stock-info,
-.real-stock-info {
-  svg,
-  img {
-    height: 1.3ch;
-  }
+.real-stock-icon {
+  height: 1.3ch;
+}
+
+.stock-specs svg {
+  vertical-align: text-top;
 }
 </style>

src/locales/en.json

@@ -68,6 +68,7 @@
     "action-copy": "COPY TO CLIPBOARD",
     "action-reset": "RESET",
     "action-shuffle": "SHUFFLE",
+    "action-switch": "TURN AROUND",
     "action-bookmark": "BOOKMARK",
     "mass": "Mass",
     "mass-accepted": "accepted",

src/locales/pl.json

@@ -68,6 +68,7 @@
     "action-copy": "SKOPIUJ DO SCHOWKA",
     "action-reset": "ZRESETUJ",
     "action-shuffle": "PRZETASUJ",
+    "action-switch": "ODWRÓĆ",
     "action-bookmark": "ZAPISZ",
     "mass": "Masa",
     "mass-accepted": "dopuszczalna",

src/store.ts

@@ -64,7 +64,7 @@ export const useStore = defineStore({
     chosenStorageStockName: '',
     chosenStorageStockString: '',
 
-    compatibleSimulatorVersion: '2024.3.1',
+    compatibleSimulatorVersion: '2025.1.1',
   }),
 
   getters: {

src/styles/_global.scss

@@ -128,14 +128,23 @@ button {
   &:hover::after,
   &:focus-visible::after {
     position: absolute;
-    transform: translateX(10px);
 
     content: attr(data-tooltip);
     color: white;
     background: black;
+    border-radius: 0.5em;
+    margin: 0 0.75em;
     padding: 0.5em;
+
     max-width: 300px;
+
     z-index: 100;
+
+    @media screen and (max-width: $breakpointSm) {
+      left: 50%;
+      transform: translate(-50%, 3ex);
+      text-align: center;
+    }
   }
 }