mirror of
https://github.com/Spythere/pojazdownik.git
synced 2026-05-02 21:08:12 +00:00
Merge pull request #55 from Spythere/development
Migration to new domain
This commit is contained in:
Spythere
@@ -1,8 +1,13 @@
|
||||
name: Build & Deploy to VPS
|
||||
'on':
|
||||
|
||||
on:
|
||||
push:
|
||||
branches:
|
||||
- master
|
||||
- main
|
||||
|
||||
env:
|
||||
PROJECT_NAME: pojazdownik-td2
|
||||
|
||||
jobs:
|
||||
build_and_deploy:
|
||||
runs-on: ubuntu-latest
|
||||
@@ -14,9 +19,5 @@ jobs:
|
||||
run: |
|
||||
mkdir -p ~/.ssh
|
||||
echo "${{ secrets.VPS_SSH_PRIVATE_KEY }}" > ~/.ssh/id_rsa && chmod 600 ~/.ssh/id_rsa
|
||||
- name: Remove old assets
|
||||
run: |
|
||||
ssh -o StrictHostKeyChecking=no -i ~/.ssh/id_rsa ${{ secrets.VPS_USER }}@${{ secrets.VPS_HOST }} -p 2022 "rm -rf /var/www/pojazdownik/assets"
|
||||
- name: Send the build files to web server
|
||||
run: |
|
||||
scp -o StrictHostKeyChecking=no -i ~/.ssh/id_rsa -P 2022 -r ./dist/* ${{ secrets.VPS_USER }}@${{ secrets.VPS_HOST }}:/var/www/pojazdownik
|
||||
- name: Send new files
|
||||
run: rsync -avP -e "ssh -o StrictHostKeyChecking=no -i ~/.ssh/id_rsa -p 2022" ./dist/ ${{ secrets.VPS_USER }}@${{ secrets.VPS_HOST }}:/var/www/$PROJECT_NAME --delete
|
||||
@@ -5,7 +5,7 @@ name: Deploy to Firebase Hosting on merge
|
||||
'on':
|
||||
push:
|
||||
branches:
|
||||
- main
|
||||
- main-old
|
||||
jobs:
|
||||
build_and_deploy:
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
+6
-6
@@ -13,22 +13,22 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^1.4.0",
|
||||
"lucide-vue-next": "^0.552.0",
|
||||
"lucide-vue-next": "^0.576.0",
|
||||
"pinia": "^3.0.3",
|
||||
"prettier": "^3.0.3",
|
||||
"vue": "^3.2.37",
|
||||
"vue-i18n": "11.1.12",
|
||||
"vue-router": "4"
|
||||
"vue-i18n": "11.2.8",
|
||||
"vue-router": "5.0.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@rushstack/eslint-patch": "^1.3.3",
|
||||
"@types/node": "^24.10.0",
|
||||
"@types/node": "^25.3.3",
|
||||
"@vite-pwa/assets-generator": "^1.0.2",
|
||||
"@vitejs/plugin-vue": "^6.0.1",
|
||||
"@vue/eslint-config-prettier": "^10.2.0",
|
||||
"@vue/eslint-config-typescript": "^14.6.0",
|
||||
"@vue/tsconfig": "^0.8.1",
|
||||
"eslint": "^9.39.1",
|
||||
"@vue/tsconfig": "^0.9.0",
|
||||
"eslint": "^10.0.2",
|
||||
"eslint-plugin-vue": "^10.5.1",
|
||||
"sass": "^1.59.3",
|
||||
"typescript": "^5.0.2",
|
||||
|
||||
+56
-50
@@ -2,82 +2,88 @@
|
||||
<AppModals />
|
||||
<ImageFullscreenPreview v-if="store.vehiclePreviewSrc" />
|
||||
|
||||
<transition name="slide-bottom-anim">
|
||||
<MigrationInfo v-if="store.isMigrationInfoOpen" />
|
||||
</transition>
|
||||
|
||||
<router-view></router-view>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
<script lang="ts" setup>
|
||||
import { useStore } from './store';
|
||||
import ImageFullscreenPreview from './components/utils/ImageFullscreenPreview.vue';
|
||||
import AppContainerView from './views/AppContainerView.vue';
|
||||
import AppModals from './components/app/AppModals.vue';
|
||||
import { computed, onMounted, watchEffect } from 'vue';
|
||||
import { registerSW } from 'virtual:pwa-register';
|
||||
import MigrationInfo from './components/app/MigrationInfo.vue';
|
||||
|
||||
const store = useStore();
|
||||
|
||||
registerSW({
|
||||
immediate: true,
|
||||
onNeedRefresh() {
|
||||
console.log('Needs refresh!');
|
||||
},
|
||||
});
|
||||
|
||||
export default defineComponent({
|
||||
components: { ImageFullscreenPreview, AppContainerView, AppModals },
|
||||
data() {
|
||||
return { store: useStore() };
|
||||
},
|
||||
|
||||
created() {
|
||||
this.loadStockDataFromStorage();
|
||||
this.store.setupAPIData();
|
||||
},
|
||||
|
||||
computed: {
|
||||
currentStockString() {
|
||||
return this.store.stockString;
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
currentStockString(val: string) {
|
||||
if (val != this.store.chosenStorageStockString) {
|
||||
this.store.chosenStorageStockName = '';
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
loadStockDataFromStorage() {
|
||||
const savedData = localStorage.getItem('savedStockData');
|
||||
|
||||
if (!savedData) {
|
||||
localStorage.setItem('savedStockData', JSON.stringify({}));
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
this.store.storageStockData = JSON.parse(savedData);
|
||||
} catch (error) {
|
||||
console.error('Wystąpił błąd podczas przetwarzania danych o składach z localStorage!', error);
|
||||
}
|
||||
},
|
||||
},
|
||||
onMounted(() => {
|
||||
loadStockDataFromStorage();
|
||||
showMigrationInfo();
|
||||
store.setupAPIData();
|
||||
});
|
||||
|
||||
const currentStockString = computed(() => store.stockString);
|
||||
|
||||
watchEffect(() => {
|
||||
if (currentStockString.value != store.chosenStorageStockString) {
|
||||
store.chosenStorageStockName = '';
|
||||
}
|
||||
});
|
||||
|
||||
function showMigrationInfo() {
|
||||
// Show only on old domain
|
||||
if (location.hostname !== 'pojazdownik-td2.web.app' && location.hostname !== 'localhost') return;
|
||||
|
||||
const showInfo = localStorage.getItem('showMigrationInfo');
|
||||
|
||||
// Do not show if already acknowledged
|
||||
if (showInfo === 'false') return;
|
||||
|
||||
setTimeout(() => {
|
||||
store.isMigrationInfoOpen = true;
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
function loadStockDataFromStorage() {
|
||||
const savedData = localStorage.getItem('savedStockData');
|
||||
|
||||
if (!savedData) {
|
||||
localStorage.setItem('savedStockData', JSON.stringify({}));
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
store.storageStockData = JSON.parse(savedData);
|
||||
} catch (error) {
|
||||
console.error('Wystąpił błąd podczas przetwarzania danych o składach z localStorage!', error);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@use './styles/global';
|
||||
@use './styles/responsive';
|
||||
|
||||
/* APP */
|
||||
#app {
|
||||
margin: 0 auto;
|
||||
|
||||
color: global.$textColor;
|
||||
color: var(--textColor);
|
||||
font-size: 1em;
|
||||
padding: 0;
|
||||
|
||||
@media screen and (max-width: global.$breakpointMd) {
|
||||
@include responsive.midScreen {
|
||||
font-size: calc(0.7rem + 0.75vw);
|
||||
}
|
||||
|
||||
@media screen and (orientation: landscape) and (max-width: global.$breakpointMd) {
|
||||
@include responsive.midScreenLandscape {
|
||||
font-size: calc(0.75rem + 0.4vw);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,19 +6,9 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
<script lang="ts" setup>
|
||||
import { useStore } from '../../store';
|
||||
import RealStockCard from '../cards/RealStockCard.vue';
|
||||
|
||||
export default defineComponent({
|
||||
components: { RealStockCard },
|
||||
data() {
|
||||
return {
|
||||
store: useStore(),
|
||||
};
|
||||
},
|
||||
});
|
||||
const store = useStore();
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
||||
@@ -20,6 +20,8 @@ export default defineComponent({
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@use '@/styles/responsive';
|
||||
|
||||
main {
|
||||
display: grid;
|
||||
gap: 1em;
|
||||
@@ -30,7 +32,7 @@ main {
|
||||
grid-template-columns: 1fr 2fr;
|
||||
grid-template-rows: auto 360px minmax(300px, 1fr);
|
||||
|
||||
background-color: global.$bgColorDarker;
|
||||
background-color: var(--bgColorDarker);
|
||||
border-radius: 1em;
|
||||
|
||||
min-height: 950px;
|
||||
@@ -38,7 +40,7 @@ main {
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
@media screen and (max-width: global.$breakpointMd) {
|
||||
@include responsive.midScreen {
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<div class="migrate-info">
|
||||
<i18n-t keypath="migrate-info.line-1" for="migrate-info">
|
||||
<a href="https://pojazdownik-td2.spythere.eu/" target="_blank">{{ $t('migrate-info.link') }}</a>
|
||||
</i18n-t>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.migrate-info {
|
||||
position: fixed;
|
||||
z-index: 100;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
|
||||
padding: 0.25em;
|
||||
text-align: center;
|
||||
|
||||
width: 100%;
|
||||
background-color: var(--accentColor);
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
a {
|
||||
color: black;
|
||||
text-decoration: underline;
|
||||
|
||||
&:hover {
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -220,6 +220,8 @@ export default defineComponent({
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@use '@/styles/responsive';
|
||||
|
||||
.action-exit {
|
||||
display: flex;
|
||||
background-color: #333;
|
||||
@@ -247,7 +249,7 @@ export default defineComponent({
|
||||
|
||||
z-index: 100;
|
||||
|
||||
@media screen and (max-width: global.$breakpointSm) {
|
||||
@include responsive.smallScreen {
|
||||
height: 80vh;
|
||||
}
|
||||
}
|
||||
@@ -279,7 +281,7 @@ export default defineComponent({
|
||||
width: 35%;
|
||||
}
|
||||
|
||||
@media screen and (max-width: global.$breakpointSm) {
|
||||
@include responsive.smallScreen {
|
||||
flex-wrap: wrap;
|
||||
|
||||
input {
|
||||
@@ -307,7 +309,7 @@ ul {
|
||||
padding: 0.1em;
|
||||
|
||||
&[data-last-selected='true'] .stock-title {
|
||||
border: 1px solid global.$accentColor;
|
||||
border: 1px solid var(--accentColor);
|
||||
}
|
||||
|
||||
.stock-title {
|
||||
@@ -323,7 +325,7 @@ ul {
|
||||
background: #222;
|
||||
}
|
||||
|
||||
@media screen and (max-width: global.$breakpointSm) {
|
||||
@include responsive.smallScreen {
|
||||
grid-template-columns: 1fr;
|
||||
// grid-template-rows: 1fr 1fr;
|
||||
}
|
||||
|
||||
@@ -224,6 +224,8 @@ export default defineComponent({
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@use '@/styles/responsive';
|
||||
|
||||
.inputs-section {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@@ -242,7 +244,7 @@ button.btn--choice {
|
||||
padding: 0.3em 0.6em;
|
||||
|
||||
&[data-selected='true'] {
|
||||
background-color: global.$accentColor;
|
||||
background-color: var(--accentColor);
|
||||
color: black;
|
||||
}
|
||||
|
||||
@@ -260,12 +262,12 @@ button.btn--choice {
|
||||
display: block;
|
||||
|
||||
font-weight: bold;
|
||||
color: global.$accentColor;
|
||||
color: var(--accentColor);
|
||||
margin-bottom: 0.3em;
|
||||
}
|
||||
|
||||
select:focus {
|
||||
border-color: global.$accentColor;
|
||||
border-color: var(--accentColor);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -290,7 +292,7 @@ button.btn--choice {
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: global.$breakpointMd) {
|
||||
@include responsive.midScreen {
|
||||
.inputs-section {
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
|
||||
@@ -58,7 +58,7 @@ export default {
|
||||
|
||||
button[data-selected='true'] {
|
||||
font-weight: bold;
|
||||
color: global.$accentColor;
|
||||
color: var(--accentColor);
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -69,6 +69,8 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@use '@/styles/responsive';
|
||||
|
||||
// Tab change animation
|
||||
.tab-change {
|
||||
&-enter-from,
|
||||
@@ -105,7 +107,7 @@ onMounted(() => {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
@media screen and (max-width: global.$breakpointSm) {
|
||||
@include responsive.smallScreen {
|
||||
.tabs-modes {
|
||||
grid-template-areas:
|
||||
'stock wiki'
|
||||
|
||||
@@ -152,7 +152,7 @@ export default defineComponent({
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@use '@/styles/responsive';
|
||||
|
||||
.train-image-section {
|
||||
display: flex;
|
||||
@@ -178,11 +178,11 @@ img {
|
||||
}
|
||||
|
||||
&[data-sponsor-only='true'] {
|
||||
border: 1px solid global.$sponsorColor;
|
||||
border: 1px solid var(--accentColor);
|
||||
}
|
||||
|
||||
&[data-team-only='true'] {
|
||||
border: 1px solid global.$teamColor;
|
||||
border: 1px solid var(--teamColor);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -216,25 +216,25 @@ img {
|
||||
width: 100%;
|
||||
max-width: 380px;
|
||||
|
||||
background-color: global.$secondaryColor;
|
||||
background-color: var(--secondaryColor);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
height: 250px;
|
||||
|
||||
background-color: global.$bgColor;
|
||||
background-color: var(--bgColor);
|
||||
}
|
||||
|
||||
.sponsor-only {
|
||||
color: global.$sponsorColor;
|
||||
color: var(--accentColor);
|
||||
}
|
||||
|
||||
.team-only {
|
||||
color: global.$teamColor;
|
||||
color: var(--teamColor);
|
||||
}
|
||||
|
||||
@media screen and (max-width: global.$breakpointMd) {
|
||||
@include responsive.midScreen {
|
||||
.train-image-section {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@@ -224,7 +224,8 @@ const randomizeTrainNumber = (randomizeRegions = false) => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@use '../../styles/tab';
|
||||
@use '@/styles/tab';
|
||||
@use '@/styles/responsive';
|
||||
|
||||
.category-select {
|
||||
select {
|
||||
@@ -263,7 +264,7 @@ const randomizeTrainNumber = (randomizeRegions = false) => {
|
||||
|
||||
margin: 0.5em 0;
|
||||
padding: 0.5em;
|
||||
background-color: global.$secondaryColor;
|
||||
background-color: var(--secondaryColor);
|
||||
}
|
||||
|
||||
.category-rules {
|
||||
@@ -281,13 +282,13 @@ const randomizeTrainNumber = (randomizeRegions = false) => {
|
||||
margin: 0.25em 0;
|
||||
}
|
||||
|
||||
@media screen and (max-width: global.$breakpointMd) {
|
||||
@include responsive.midScreen {
|
||||
.number-generator {
|
||||
min-height: 100vh;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: global.$breakpointSm) {
|
||||
@include responsive.smallScreen {
|
||||
.regions-select {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
@@ -81,27 +81,15 @@
|
||||
<hr />
|
||||
|
||||
<div class="tab_actions">
|
||||
<button
|
||||
class="btn"
|
||||
:data-disabled="computedChosenCarTypes.size == 0"
|
||||
@click="generateStock()"
|
||||
>
|
||||
<button class="btn" :data-disabled="computedChosenCarTypes.size == 0" @click="generateStock()">
|
||||
{{ $t('stockgen.action-generate') }}
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="btn"
|
||||
:data-disabled="computedChosenCarTypes.size == 0"
|
||||
@click="generateStock(true)"
|
||||
>
|
||||
<button class="btn" :data-disabled="computedChosenCarTypes.size == 0" @click="generateStock(true)">
|
||||
{{ $t('stockgen.action-generate-empty') }}
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="btn"
|
||||
:data-disabled="computedChosenCarTypes.size == 0"
|
||||
@click="resetChosenCargo"
|
||||
>
|
||||
<button class="btn" :data-disabled="computedChosenCarTypes.size == 0" @click="resetChosenCargo">
|
||||
{{ $t('stockgen.action-reset') }}
|
||||
</button>
|
||||
</div>
|
||||
@@ -183,9 +171,7 @@ export default defineComponent({
|
||||
if (!this.isCarGroupingEnabled) return false;
|
||||
|
||||
stockList.sort((s1, s2) => {
|
||||
return (s1.vehicleRef.constructionType + s1.cargo?.id).localeCompare(
|
||||
s2.vehicleRef.constructionType + s2.cargo?.id
|
||||
);
|
||||
return (s1.vehicleRef.constructionType + s1.cargo?.id).localeCompare(s2.vehicleRef.constructionType + s2.cargo?.id);
|
||||
});
|
||||
},
|
||||
|
||||
@@ -202,14 +188,11 @@ export default defineComponent({
|
||||
|
||||
if (!cargoType || empty) cargoObjs.push(undefined);
|
||||
else if (cargoType == 'all') cargoObjs.push(...carWagonObjs[0]!.cargoTypes);
|
||||
else
|
||||
cargoObjs.push(carWagonObjs[0]?.cargoTypes.find((cargo) => cargo.id == cargoType));
|
||||
else cargoObjs.push(carWagonObjs[0]?.cargoTypes.find((cargo) => cargo.id == cargoType));
|
||||
|
||||
carWagonObjs.forEach((cw) => {
|
||||
cargoObjs.forEach((cargoObj) => {
|
||||
const chosenStock = acc.find((a) =>
|
||||
a.constructionType.includes(cw.constructionType)
|
||||
);
|
||||
const chosenStock = acc.find((a) => a.constructionType.includes(cw.constructionType));
|
||||
|
||||
if (!chosenStock)
|
||||
acc.push({
|
||||
@@ -229,24 +212,15 @@ export default defineComponent({
|
||||
let bestGeneration: { stockList: IStock[]; value: number } = { stockList: [], value: 0 };
|
||||
|
||||
for (let i = 0; i < 10; i++) {
|
||||
this.store.stockList.splice(
|
||||
this.store.stockList.length > 0 && isTractionUnit(this.store.stockList[0].vehicleRef)
|
||||
? 1
|
||||
: 0
|
||||
);
|
||||
this.store.stockList.splice(this.store.stockList.length > 0 && isTractionUnit(this.store.stockList[0].vehicleRef) ? 1 : 0);
|
||||
|
||||
let carCount = 0;
|
||||
const maxWeight =
|
||||
this.store.acceptableWeight > 0
|
||||
? Math.min(this.store.acceptableWeight, this.maxTons * 1000)
|
||||
: this.maxTons * 1000;
|
||||
const maxWeight = this.store.acceptableWeight > 0 ? Math.min(this.store.acceptableWeight, this.maxTons * 1000) : this.maxTons * 1000;
|
||||
|
||||
// eslint-disable-next-line no-constant-condition
|
||||
while (true) {
|
||||
const randomStockType =
|
||||
generatedChosenStockList[~~(Math.random() * generatedChosenStockList.length)];
|
||||
const { carWagon, cargo } =
|
||||
randomStockType.carPool[~~(Math.random() * randomStockType.carPool.length)];
|
||||
const randomStockType = generatedChosenStockList[~~(Math.random() * generatedChosenStockList.length)];
|
||||
const { carWagon, cargo } = randomStockType.carPool[~~(Math.random() * randomStockType.carPool.length)];
|
||||
|
||||
if (
|
||||
this.store.totalWeight + (carWagon.weight + (cargo?.weight ?? 0)) > maxWeight ||
|
||||
@@ -335,8 +309,6 @@ h2 {
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
|
||||
background-color: global.$secondaryColor;
|
||||
|
||||
&[data-excluded='true'] {
|
||||
background-color: gray;
|
||||
box-shadow: none;
|
||||
@@ -349,7 +321,7 @@ h2 {
|
||||
padding: 5px;
|
||||
|
||||
transform: translate(-8px, -50%);
|
||||
background-color: global.$bgColor;
|
||||
background-color: var(--bgColor);
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
@@ -390,7 +362,7 @@ h2 {
|
||||
}
|
||||
|
||||
.generator_warning {
|
||||
background-color: global.$accentColor;
|
||||
background-color: var(--accentColor);
|
||||
padding: 0.5em;
|
||||
text-align: justify;
|
||||
font-weight: bold;
|
||||
|
||||
@@ -165,7 +165,7 @@ ul.storage-list {
|
||||
|
||||
ul.storage-list > li {
|
||||
padding: 0.5em;
|
||||
background-color: global.$secondaryColor;
|
||||
background-color: var(--secondaryColor);
|
||||
|
||||
&[data-current='true'] {
|
||||
background-color: #3b3b3b;
|
||||
|
||||
@@ -245,6 +245,7 @@ export default defineComponent({
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@use '@/styles/tab';
|
||||
@use '@/styles/responsive';
|
||||
|
||||
.actions {
|
||||
display: grid;
|
||||
@@ -318,7 +319,7 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
.sponsor-only {
|
||||
color: global.$sponsorColor;
|
||||
color: var(--accentColor);
|
||||
|
||||
&::after {
|
||||
content: '*';
|
||||
@@ -326,7 +327,7 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
.team-only {
|
||||
color: global.$teamColor;
|
||||
color: var(--teamColor);
|
||||
|
||||
&::after {
|
||||
content: '*';
|
||||
@@ -343,7 +344,7 @@ export default defineComponent({
|
||||
background-color: #161c2e;
|
||||
}
|
||||
|
||||
@media screen and (max-width: global.$breakpointSm) {
|
||||
@include responsive.smallScreen {
|
||||
.actions-panel {
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
|
||||
@@ -20,13 +20,7 @@
|
||||
@keydown.backspace="stockListUtils.removeStock(i)"
|
||||
ref="itemRefs"
|
||||
>
|
||||
<div
|
||||
class="stock-info"
|
||||
@dragstart="onDragStart(i)"
|
||||
@drop="onDrop($event, i)"
|
||||
@dragover="allowDrop"
|
||||
draggable="true"
|
||||
>
|
||||
<div class="stock-info" @dragstart="onDragStart(i)" @drop="onDrop($event, i)" @dragover="allowDrop" draggable="true">
|
||||
<span class="stock-info-no" :data-selected="i == store.chosenStockListIndex">
|
||||
<span v-if="i == store.chosenStockListIndex">• </span>
|
||||
{{ i + 1 }}.
|
||||
@@ -34,17 +28,10 @@
|
||||
|
||||
<span
|
||||
class="stock-info-type"
|
||||
:data-sponsor-only="
|
||||
stock.vehicleRef.sponsorOnlyTimestamp &&
|
||||
stock.vehicleRef.sponsorOnlyTimestamp > Date.now()
|
||||
"
|
||||
:data-sponsor-only="stock.vehicleRef.sponsorOnlyTimestamp && stock.vehicleRef.sponsorOnlyTimestamp > Date.now()"
|
||||
:data-team-only="stock.vehicleRef.teamOnly"
|
||||
>
|
||||
{{
|
||||
isTractionUnit(stock.vehicleRef)
|
||||
? stock.vehicleRef.type
|
||||
: getCarSpecFromType(stock.vehicleRef.type)
|
||||
}}
|
||||
{{ isTractionUnit(stock.vehicleRef) ? stock.vehicleRef.type : getCarSpecFromType(stock.vehicleRef.type) }}
|
||||
</span>
|
||||
|
||||
<span class="stock-info-cargo" v-if="stock.cargo">
|
||||
@@ -53,9 +40,7 @@
|
||||
|
||||
<span class="stock-info-length">{{ stock.vehicleRef.length }}m</span>
|
||||
|
||||
<span class="stock-info-mass">
|
||||
{{ ((stock.vehicleRef.weight + (stock.cargo?.weight ?? 0)) / 1000).toFixed(1) }}t
|
||||
</span>
|
||||
<span class="stock-info-mass"> {{ ((stock.vehicleRef.weight + (stock.cargo?.weight ?? 0)) / 1000).toFixed(1) }}t </span>
|
||||
<span class="stock-info-speed">{{ stock.vehicleRef.maxSpeed }}km/h</span>
|
||||
</div>
|
||||
</li>
|
||||
@@ -123,10 +108,7 @@ export default defineComponent({
|
||||
const stock = this.store.stockList[stockID];
|
||||
|
||||
this.store.chosenStockListIndex =
|
||||
this.store.chosenStockListIndex == stockID &&
|
||||
this.store.chosenVehicle?.type == stock.vehicleRef.type
|
||||
? -1
|
||||
: stockID;
|
||||
this.store.chosenStockListIndex == stockID && this.store.chosenVehicle?.type == stock.vehicleRef.type ? -1 : stockID;
|
||||
|
||||
if (this.store.chosenStockListIndex == -1) {
|
||||
this.store.chosenVehicle = null;
|
||||
@@ -154,12 +136,14 @@ export default defineComponent({
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@use '@/styles/responsive';
|
||||
|
||||
.list-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.list-empty {
|
||||
background-color: global.$secondaryColor;
|
||||
background-color: var(--secondaryColor);
|
||||
border-radius: 0.5em;
|
||||
padding: 0.75em;
|
||||
font-weight: bold;
|
||||
@@ -202,14 +186,14 @@ li > .stock-info {
|
||||
|
||||
.stock-info-no,
|
||||
.stock-info-type {
|
||||
background-color: global.$secondaryColor;
|
||||
background-color: var(--secondaryColor);
|
||||
|
||||
&[data-team-only='true'] {
|
||||
color: global.$teamColor;
|
||||
color: var(--teamColor);
|
||||
}
|
||||
|
||||
&[data-sponsor-only='true'] {
|
||||
color: global.$sponsorColor;
|
||||
color: var(--accentColor);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -218,7 +202,7 @@ li > .stock-info {
|
||||
text-align: right;
|
||||
|
||||
&[data-selected='true'] {
|
||||
color: global.$accentColor;
|
||||
color: var(--accentColor);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -253,7 +237,7 @@ li > .stock-info {
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: global.$breakpointMd) {
|
||||
@include responsive.midScreen {
|
||||
ul {
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
@@ -199,11 +199,11 @@ ul {
|
||||
}
|
||||
|
||||
&[data-sponsor-only='true'] > b {
|
||||
color: global.$sponsorColor;
|
||||
color: var(--accentColor);
|
||||
}
|
||||
|
||||
&[data-team-only='true'] > b {
|
||||
color: global.$teamColor;
|
||||
color: var(--teamColor);
|
||||
}
|
||||
|
||||
img {
|
||||
|
||||
@@ -91,7 +91,7 @@ export default defineComponent({
|
||||
.warning {
|
||||
padding: 0.25em;
|
||||
margin: 0.25em 0;
|
||||
background: global.$accentColor;
|
||||
background: var(--accentColor);
|
||||
color: black;
|
||||
|
||||
font-weight: bold;
|
||||
|
||||
+9
-1
@@ -339,5 +339,13 @@
|
||||
"warning_un1965_tn": "TN: LPG - empty tank (UN 1965)",
|
||||
"warning_un1202_tn": "TN: diesel fuel (UN 1202)",
|
||||
"warning_military_pn": "PN: military transport"
|
||||
},
|
||||
"migrate-info": {
|
||||
"tooltip-content": "Information about migration of\nStacjownik site!",
|
||||
"header-text": "Information about the site migration",
|
||||
"paragraph-1-html": "Due to the migration of all my applications to a common dedicated domain, <b>Pojazdownik is being moved to:</b>",
|
||||
"paragraph-2-link-text": "https://pojazdownik-td2.spythere.eu/",
|
||||
"paragraph-3-text": "This website will no longer receive future updates and <b>after March 14th</b> it will only redirect to the address above.",
|
||||
"confirm-btn": "ROGER THAT!"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+5
-1
@@ -338,5 +338,9 @@
|
||||
"warning_un1965_tn": "TN: gazy węglowodorowe skroplone - puste cysterny (UN 1965)",
|
||||
"warning_un1202_tn": "TN: olej napędowy (UN 1202)",
|
||||
"warning_military_pn": "PN: transport wojskowy"
|
||||
},
|
||||
"migrate-info": {
|
||||
"line-1": "Pojazdownik zostaje przeniesiony na nową domenę - {0}! Możesz korzystać z obecnej strony, jednak nie będzie ona otrzymywać już aktualizacji i w przyszłości zostanie wyłączona!",
|
||||
"link": "https://pojazdownik-td2.spythere.eu/"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -52,6 +52,7 @@ export const useStore = defineStore('store', {
|
||||
|
||||
vehiclePreviewSrc: '',
|
||||
|
||||
isMigrationInfoOpen: false,
|
||||
isRandomizerCardOpen: false,
|
||||
isRealStockListCardOpen: false,
|
||||
|
||||
|
||||
@@ -0,0 +1,19 @@
|
||||
@font-face {
|
||||
font-family: 'Lato';
|
||||
src:
|
||||
url('/fonts/Lato-Bold.woff2') format('woff2'),
|
||||
url('/fonts/Lato-Bold.woff') format('woff');
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Lato';
|
||||
src:
|
||||
url('/fonts/Lato-Regular.woff2') format('woff2'),
|
||||
url('/fonts/Lato-Regular.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
+43
-60
@@ -1,33 +1,15 @@
|
||||
$breakpointMd: 960px;
|
||||
$breakpointSm: 550px;
|
||||
@use 'fonts';
|
||||
@use 'responsive';
|
||||
|
||||
$bgColor: #2b3552;
|
||||
$bgColorDarker: #1f263b;
|
||||
$textColor: #fff;
|
||||
$secondaryColor: #1b1b1b;
|
||||
$accentColor: #e4c428;
|
||||
:root {
|
||||
--bgColor: #2b3552;
|
||||
--bgColorDarker: #1f263b;
|
||||
--textColor: #fff;
|
||||
--secondaryColor: #1b1b1b;
|
||||
--accentColor: #e4c428;
|
||||
|
||||
$sponsorColor: gold;
|
||||
$teamColor: #ff4848;
|
||||
|
||||
@font-face {
|
||||
font-family: 'Lato';
|
||||
src:
|
||||
url('/fonts/Lato-Bold.woff2') format('woff2'),
|
||||
url('/fonts/Lato-Bold.woff') format('woff');
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Lato';
|
||||
src:
|
||||
url('/fonts/Lato-Regular.woff2') format('woff2'),
|
||||
url('/fonts/Lato-Regular.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
--sponsorColor: gold;
|
||||
--teamColor: #ff4848;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
@@ -56,7 +38,7 @@ html {
|
||||
|
||||
font-family: Lato, sans-serif;
|
||||
|
||||
background-color: $bgColor;
|
||||
background-color: var(--bgColor);
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
@@ -71,15 +53,6 @@ a {
|
||||
text-decoration: none;
|
||||
|
||||
transition: color 250ms;
|
||||
|
||||
&:visited {
|
||||
color: white;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $accentColor;
|
||||
}
|
||||
}
|
||||
|
||||
select,
|
||||
@@ -104,11 +77,11 @@ button {
|
||||
color: white;
|
||||
|
||||
&:hover {
|
||||
color: $accentColor;
|
||||
color: var(--accentColor);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 1px solid $accentColor;
|
||||
outline: 1px solid var(--accentColor);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -130,7 +103,7 @@ button {
|
||||
|
||||
z-index: 100;
|
||||
|
||||
@media screen and (max-width: $breakpointSm) {
|
||||
@include responsive.smallScreen {
|
||||
left: 50%;
|
||||
transform: translate(-50%, 3ex);
|
||||
text-align: center;
|
||||
@@ -165,7 +138,7 @@ button {
|
||||
padding: 0.4em 0.75em;
|
||||
|
||||
outline: none;
|
||||
background-color: $secondaryColor;
|
||||
background-color: var(--secondaryColor);
|
||||
border-radius: 8px;
|
||||
font-weight: bold;
|
||||
|
||||
@@ -174,25 +147,25 @@ button {
|
||||
background-color 150ms;
|
||||
|
||||
&:hover {
|
||||
color: $accentColor;
|
||||
color: var(--accentColor);
|
||||
}
|
||||
|
||||
&.btn--outline {
|
||||
background: none;
|
||||
font-weight: bold;
|
||||
outline: 1px solid $accentColor;
|
||||
outline: 1px solid var(--accentColor);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
color: $accentColor;
|
||||
color: var(--accentColor);
|
||||
outline: 1px solid white;
|
||||
}
|
||||
|
||||
&[data-chosen='true'] {
|
||||
background-color: $accentColor;
|
||||
background-color: var(--accentColor);
|
||||
color: black;
|
||||
|
||||
box-shadow: 0 0 5px 1px $accentColor;
|
||||
box-shadow: 0 0 5px 1px var(--accentColor);
|
||||
}
|
||||
|
||||
&[data-disabled='true'] {
|
||||
@@ -240,13 +213,13 @@ button {
|
||||
}
|
||||
|
||||
.link-btn.router-link-exact-active {
|
||||
color: $accentColor;
|
||||
color: var(--accentColor);
|
||||
}
|
||||
|
||||
select,
|
||||
input[type='text'],
|
||||
input[type='number'] {
|
||||
background: $bgColor;
|
||||
background: var(--bgColor);
|
||||
border: 2px solid #aaa;
|
||||
outline: none;
|
||||
|
||||
@@ -257,7 +230,7 @@ input[type='number'] {
|
||||
font-size: 1em;
|
||||
|
||||
&:focus-visible {
|
||||
border-color: $accentColor;
|
||||
border-color: var(--accentColor);
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
@@ -268,7 +241,7 @@ input[type='number'] {
|
||||
option {
|
||||
color: white;
|
||||
border: none;
|
||||
background-color: $bgColor;
|
||||
background-color: var(--bgColor);
|
||||
}
|
||||
|
||||
ul {
|
||||
@@ -279,7 +252,7 @@ ul {
|
||||
|
||||
.text {
|
||||
&--accent {
|
||||
color: $accentColor;
|
||||
color: var(--accentColor);
|
||||
}
|
||||
|
||||
&--grayed {
|
||||
@@ -336,19 +309,18 @@ hr {
|
||||
}
|
||||
|
||||
span:focus {
|
||||
color: $accentColor;
|
||||
color: var(--accentColor);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
label>input:checked+span {
|
||||
color: $accentColor;
|
||||
border-color: $accentColor;
|
||||
label > input:checked + span {
|
||||
color: var(--accentColor);
|
||||
border-color: var(--accentColor);
|
||||
}
|
||||
}
|
||||
|
||||
// Vue Transition anims
|
||||
.slide-top {
|
||||
|
||||
.slide-top-anim {
|
||||
&-enter-from,
|
||||
&-leave-to {
|
||||
transform: translateY(-100%);
|
||||
@@ -360,8 +332,19 @@ hr {
|
||||
}
|
||||
}
|
||||
|
||||
.card-appear {
|
||||
.slide-bottom-anim {
|
||||
&-enter-from,
|
||||
&-leave-to {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
&-enter-active,
|
||||
&-leave-active {
|
||||
transition: transform 100ms ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
.card-appear-anim {
|
||||
&-enter-from,
|
||||
&-leave-to {
|
||||
opacity: 0;
|
||||
@@ -371,4 +354,4 @@ hr {
|
||||
&-leave-active {
|
||||
transition: all 100ms ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,20 @@
|
||||
$breakpointMd: 960px;
|
||||
$breakpointSm: 550px;
|
||||
|
||||
@mixin smallScreen() {
|
||||
@media only screen and (max-width: $breakpointSm) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin midScreen() {
|
||||
@media only screen and (max-width: $breakpointMd) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin midScreenLandscape() {
|
||||
@media only screen and (orientation: landscape) and (max-device-height: $breakpointMd) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,3 @@
|
||||
@use 'global';
|
||||
|
||||
.tab {
|
||||
height: 100%;
|
||||
margin-top: 1px;
|
||||
@@ -7,7 +5,7 @@
|
||||
&_header {
|
||||
padding: 0.5em 1em;
|
||||
|
||||
background-color: global.$secondaryColor;
|
||||
background-color: var(--secondaryColor);
|
||||
text-align: center;
|
||||
|
||||
h2 {
|
||||
|
||||
+2
-4
@@ -10,7 +10,7 @@ export default defineConfig({
|
||||
preview: { port: 4138 },
|
||||
css: {
|
||||
preprocessorOptions: {
|
||||
scss: { additionalData: `@use '@/styles/global';`, silenceDeprecations: ['legacy-js-api'] },
|
||||
scss: { silenceDeprecations: ['legacy-js-api'] },
|
||||
},
|
||||
},
|
||||
resolve: {
|
||||
@@ -23,13 +23,11 @@ export default defineConfig({
|
||||
VitePWA({
|
||||
registerType: 'autoUpdate',
|
||||
|
||||
includeAssets: ['/images/*.{png,svg,jpg}', '/fonts/*.{woff,woff2,ttf}'],
|
||||
|
||||
devOptions: { suppressWarnings: true, enabled: true },
|
||||
|
||||
workbox: {
|
||||
cleanupOutdatedCaches: true,
|
||||
globPatterns: ['**/*.{js,css,html,jpg,png,svg,img,woff,woff2}'],
|
||||
globPatterns: ['**/*.{js,css,html,ico,woff,woff2,ttf}', '**/*.{png,jpg,jpeg,svg,webp,gif}'],
|
||||
|
||||
runtimeCaching: [
|
||||
{
|
||||
|
||||
Reference in New Issue
Block a user