Spythere/pojazdownik
1
0
Fork 0
mirror of https://github.com/Spythere/pojazdownik.git synced 2026-05-03 11:45:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: updated icons, storage tab layout

Browse Source
This commit is contained in:
Spythere
2025-03-07 14:34:10 +01:00
parent ff6622bc29
commit 72f28abf10
5 changed files with 490 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/tabs/StockListTab.vue
+31 -10
View File
@@ -4,12 +4,12 @@
<div class="stock_actions">
<button class="btn btn--image" @click="clickFileInput">
<input type="file" @change="uploadStockFromFile" ref="conFile" accept=".con,.txt" />
<img src="/images/icon-upload.svg" alt="upload icon" />
<ArrowUpTrayIcon />
{{ $t('stocklist.action-upload-file') }}
</button>
<button class="btn btn--image" @click="uploadStockFromClipboard">
<img src="/images/icon-upload.svg" alt="upload icon" />
<ArrowUpTrayIcon />
{{ $t('stocklist.action-upload-clipboard') }}
</button>
@@ -19,7 +19,7 @@
:disabled="stockIsEmpty"
@click="downloadStock"
>
<img src="/images/icon-download.svg" alt="download icon" />
<ArrowDownTrayIcon />
{{ $t('stocklist.action-download') }}
</button>
@@ -29,7 +29,7 @@
:disabled="stockIsEmpty"
@click="copyToClipboard"
>
<img src="/images/icon-copy.svg" alt="copy icon" />
<ClipboardDocumentIcon />
{{ $t('stocklist.action-copy') }}
</button>
@@ -39,7 +39,7 @@
:disabled="stockIsEmpty"
@click="resetStock"
>
<img src="/images/icon-reset.svg" alt="reset icon" />
<ArrowUturnLeftIcon />
{{ $t('stocklist.action-reset') }}
</button>
@@ -49,7 +49,7 @@
:disabled="stockIsEmpty"
@click="shuffleCars"
>
<img src="/images/icon-shuffle.svg" alt="shuffle icon" />
<ArrowPathIcon />
{{ $t('stocklist.action-shuffle') }}
</button>
</div>
@@ -60,7 +60,7 @@
:tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
@click="moveUpStock(store.chosenStockListIndex)"
>
<img :src="getIconURL('higher')" alt="move up vehicle" />
<ChevronUpIcon />
{{ $t('stocklist.action-move-up') }}
</button>
@@ -69,7 +69,7 @@
:tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
@click="moveDownStock(store.chosenStockListIndex)"
>
<img :src="getIconURL('lower')" alt="move down vehicle" />
<ChevronDownIcon />
{{ $t('stocklist.action-move-down') }}
</button>
@@ -78,7 +78,7 @@
:tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
@click="removeStock(store.chosenStockListIndex)"
>
<img :src="getIconURL('remove')" alt="remove vehicle" />
<TrashIcon />
{{ $t('stocklist.action-remove') }}
</button>
</div>
@@ -239,10 +239,31 @@ import StockThumbnails from '../utils/StockThumbnails.vue';
import stockMixin from '../../mixins/stockMixin';
import Checkbox from '../common/Checkbox.vue';
import { isTractionUnit } from '../../utils/vehicleUtils';
import {
ArrowDownTrayIcon,
ArrowPathIcon,
ArrowUpTrayIcon,
ArrowUturnLeftIcon,
ChevronDownIcon,
ChevronUpIcon,
ClipboardDocumentIcon,
TrashIcon,
} from '@heroicons/vue/20/solid';
export default defineComponent({
name: 'stock-list',
components: { StockThumbnails, Checkbox },
components: {
StockThumbnails,
Checkbox,
ArrowDownTrayIcon,
ArrowPathIcon,
ArrowUpTrayIcon,
ArrowUturnLeftIcon,
ChevronDownIcon,
ChevronUpIcon,
ClipboardDocumentIcon,
TrashIcon,
},
mixins: [imageMixin, stockMixin, stockPreviewMixin],
src/components/tabs/StorageTab.vue
+53 -22
View File
@@ -6,40 +6,71 @@
</div>
<div class="tab_content">
<div class="storage_actions">
<!-- :data-disabled="stockIsEmpty"
:disabled="stockIsEmpty"
@click="downloadStock" -->
<button
class="btn btn--image"
>
<img src="/images/icon-download.svg" alt="download icon" />
POBIERZ DO PLIKU
<div class="tab_actions">
<button class="btn btn--image">
<FolderArrowDownIcon />
ZAPISZ OBECNY SKŁAD
</button>
<button
class="btn btn--image"
>
<img src="/images/icon-download.svg" alt="download icon" />
SKOPIUJ DO SCHOWKA
<button class="btn btn--image">
<TrashIcon />
<span>USUŃ ZAPISANY SKŁAD</span>
</button>
</div>
</div>
</section>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
<script setup lang="ts">
import { defineComponent, onActivated, Reactive, reactive } from 'vue';
import { IStock } from '../../types/common.types';
import { FolderArrowDownIcon, TrashIcon } from '@heroicons/vue/20/solid';
export default defineComponent({
name: 'storage-tab',
let storageStockData: Reactive<IStock[][]> = reactive([]);
setup() {
return {};
},
onActivated(() => {
loadStockDataFromStorage();
});
function loadStockDataFromStorage() {
const savedData = localStorage.getItem('savedStockData');
if (!savedData) {
localStorage.setItem('savedStockData', JSON.stringify([]));
return;
}
try {
storageStockData = JSON.parse(savedData);
} catch (error) {
console.error('Wystąpił błąd podczas przetwarzania danych o składach z localStorage!', error);
}
}
function saveStockDataToStorage(stockList: IStock[]) {
storageStockData.push(stockList);
try {
localStorage.setItem('savedStockData', JSON.stringify(storageStockData));
} catch (error) {
console.error('Wystąpił błąd podczas zapisywania składu do localStorage!', error);
}
}
function removeStockIndexFromStorage(stockIndex: number) {
storageStockData.splice(stockIndex, 1);
try {
localStorage.setItem('savedStockData', JSON.stringify(storageStockData));
} catch (error) {
console.error('Wystąpił błąd podczas usuwania składu z localStorage!', error);
}
}
</script>
<style lang="scss" scoped>
@use '@/styles/tab';
.tab_actions {
grid-template-columns: repeat(2, 1fr);
}
</style>