feat: copying a railway stock of active drivers and timetable journal

src/components/JournalView/JournalTimetables/EntryDetails.vue

@@ -95,7 +95,11 @@
         <div class="g-separator"></div>
         <b>{{ $t('journal.stock-preview') }}:</b>
 
-        <div class="stock-history" v-if="stockHistory.length > 1">
+        <div class="stock-history">
+          <button class="btn btn--action" @click="copyStockToClipboard()">
+            <i class="fa-regular fa-copy"></i> {{ $t('journal.stock-copy') }}
+          </button>
+
           <button
             v-for="(sh, i) in stockHistory"
             :key="i"
@@ -128,6 +132,7 @@ import StockList from '../../Global/StockList.vue';
 import { API } from '../../../typings/api';
 import { RouteLocationRaw } from 'vue-router';
 import EntryStops from './EntryStops.vue';
+import { useI18n } from 'vue-i18n';
 
 export default defineComponent({
   components: { StockList, EntryStops },
@@ -146,7 +151,8 @@ export default defineComponent({
   },
   data() {
     return {
-      currentHistoryIndex: 0
+      currentHistoryIndex: 0,
+      i18n: useI18n()
     };
   },
   computed: {
@@ -167,6 +173,7 @@ export default defineComponent({
           };
         });
     },
+
     driverRouteLocation(): RouteLocationRaw | null {
       if (this.timetable.terminated) return null;
       return {
@@ -185,6 +192,25 @@ export default defineComponent({
 
     toggleExtraInfo() {
       this.$emit('toggleExtraInfo', this.timetable.id);
+    },
+
+    copyStockToClipboard() {
+      const currentStockString =
+        this.stockHistory[this.currentHistoryIndex]?.stockString ?? this.timetable.stockString;
+
+      if (!currentStockString) {
+        alert(this.i18n.t('journal.stock-clipboard-failure'));
+        return;
+      }
+
+      navigator.clipboard
+        .writeText(currentStockString)
+        .then(() => {
+          prompt(this.i18n.t('journal.stock-clipboard-success'), currentStockString);
+        })
+        .catch(() => {
+          alert(this.i18n.t('journal.stock-clipboard-failure'));
+        });
     }
   }
 });

src/locales/en.json

@@ -423,7 +423,11 @@
     "driver-not-found-desc-2": "You can browse timetable history in the",
     "driver-not-found-journal": "TIMETABLES JOURNAL",
     "driver-not-found-others": "Player {driver} is online as:",
-    "driver-not-found-return": "GO BACK TO THE MAIN SITE"
+    "driver-not-found-return": "GO BACK TO THE MAIN SITE",
+
+    "stock-copy": "COPY THE STOCK",
+    "stock-clipboard-success": "Successfully copied the railway stock in a text form to your clipboard!",
+    "stock-clipboard-failure": "Oops! Something happened and the railway stock couldn't be copied to your clipboard! :/"
   },
   "train-stats": {
     "stats-button": "STATISTICS",
@@ -478,6 +482,9 @@
 
     "stock-dangers": "ADDITIONAL NOTES",
     "stock-preview": "STOCK PREVIEW",
+    "stock-copy": "COPY THE STOCK",
+   "stock-clipboard-success": "Successfully copied the railway stock in a text form to your clipboard:",
+    "stock-clipboard-failure": "Oops! Something happened and the railway stock couldn't be copied to your clipboard! :/",
 
     "load-data": "Load further data...",
 

src/locales/pl.json

@@ -409,7 +409,11 @@
     "driver-not-found-desc-2": "Historię rozkładów jazdy możesz przejrzeć w",
     "driver-not-found-journal": "DZIENNIKU RJ",
     "driver-not-found-others": "Gracz {driver} jest online jako:",
-    "driver-not-found-return": "WRÓĆ NA STRONĘ GŁÓWNĄ"
+    "driver-not-found-return": "WRÓĆ NA STRONĘ GŁÓWNĄ",
+
+    "stock-copy": "SKOPIUJ SKŁAD",
+    "stock-clipboard-success": "Pomyślnie skopiowano skład w postaci tekstowej do schowka!",
+    "stock-clipboard-failure": "Ups! Nie udało się skopiować składu do schowka! :/"
   },
   "train-stats": {
     "stats-button": "STATYSTYKI",
@@ -462,6 +466,9 @@
 
     "stock-dangers": "DODATKOWE UWAGI",
     "stock-preview": "PODGLĄD SKŁADU",
+    "stock-copy": "SKOPIUJ SKŁAD",
+    "stock-clipboard-success": "Pomyślnie skopiowano skład w postaci tekstowej do schowka:",
+    "stock-clipboard-failure": "Ups! Nie udało się skopiować składu do schowka! :/",
 
     "load-data": "Pobierz dalszą historię...",
 

src/styles/global.scss

@@ -227,7 +227,7 @@ a.a-button {
     font-weight: bold;
 
     &:hover {
-      background-color: #424242;
+      background-color: #505050;
     }
 
     &:disabled {

src/views/DriverView.vue

@@ -17,16 +17,19 @@
             <span class="hidable">
               {{ $t('trains.driver-journal-link') }}
             </span>
-            
+
             <img src="/images/icon-train.svg" alt="train icon" />
           </router-link>
         </div>
 
         <div class="train-card">
           <TrainInfo :train="chosenTrain" :extended="true" />
-          <div style="margin-top: 1em">
-            <StockList :trainStockList="chosenTrain.stockList" />
-          </div>
+
+          <button class="btn btn--action" style="margin: 1em 0" @click="copyStockToClipboard()">
+            <i class="fa-regular fa-copy"></i> {{ $t('trains.stock-copy') }}
+          </button>
+
+          <StockList :trainStockList="chosenTrain.stockList" />
           <TrainSchedule :train="chosenTrain" />
         </div>
       </div>
@@ -79,6 +82,7 @@ import { useMainStore } from '../store/mainStore';
 import { useApiStore } from '../store/apiStore';
 import { Status } from '../typings/common';
 import { regions as regionsJSON } from '../data/options.json';
+import { useI18n } from 'vue-i18n';
 
 const props = defineProps({
   trainId: {
@@ -93,6 +97,8 @@ const props = defineProps({
 const mainStore = useMainStore();
 const apiStore = useApiStore();
 
+const i18n = useI18n();
+
 const chosenTrain = computed(() =>
   mainStore.trainList.find((train) => train.id == props.trainId || train.modalId == props.modalId)
 );
@@ -104,6 +110,24 @@ const otherDriverTrains = computed(() => {
       (train.timetableData || train.online || train.lastSeen >= Date.now() - 60000)
   );
 });
+
+function copyStockToClipboard() {
+  const stockString = chosenTrain.value?.stockList.join(';');
+
+  if (!stockString) {
+    alert(i18n.t('trains.stock-clipboard-failure'));
+    return;
+  }
+
+  navigator.clipboard
+    .writeText(stockString)
+    .then(() => {
+      prompt(i18n.t('trains.stock-clipboard-success'), stockString);
+    })
+    .catch(() => {
+      alert(i18n.t('trains.stock-clipboard-failure'));
+    });
+}
 </script>
 
 <style lang="scss" scoped>