mirror of
https://github.com/Spythere/pojazdownik.git
synced 2026-05-03 11:45:34 +00:00
Version 1.9.0
v1.9.0
This commit is contained in:
Spythere
+29
-1
@@ -6,7 +6,7 @@
|
|||||||
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||||||
|
|
||||||
<title>Pojazdownik</title>
|
<title>Pojazdownik</title>
|
||||||
<meta name="description" content="Edytor pociągów online do symulatora Train Driver 2" />
|
<meta name="description" content="Edytor składów online dla symulatora Train Driver 2" />
|
||||||
|
|
||||||
<link rel="icon" href="/favicon.ico" sizes="any" />
|
<link rel="icon" href="/favicon.ico" sizes="any" />
|
||||||
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
|
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
|
||||||
@@ -16,6 +16,34 @@
|
|||||||
|
|
||||||
<meta name="msapplication-TileColor" content="#da532c" />
|
<meta name="msapplication-TileColor" content="#da532c" />
|
||||||
<meta name="theme-color" content="#111" />
|
<meta name="theme-color" content="#111" />
|
||||||
|
|
||||||
|
<!-- Static OpenGraph meta -->
|
||||||
|
<meta name="description" content="Edytor składów online dla symulatora Train Driver 2" />
|
||||||
|
<meta property="og:url" content="https://pojazdownik-td2.web.app/" />
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
|
<meta property="og:title" content="Pojazdownik" />
|
||||||
|
<meta
|
||||||
|
property="og:description"
|
||||||
|
content="Edytor składów online dla symulatora Train Driver 2"
|
||||||
|
/>
|
||||||
|
<meta
|
||||||
|
property="og:image"
|
||||||
|
content="https://raw.githubusercontent.com/Spythere/api/refs/heads/main/thumbnails/pojazdownik-banner.png"
|
||||||
|
/>
|
||||||
|
<meta property="og:image:width" content="1200" />
|
||||||
|
<meta property="og:image:height" content="630" />
|
||||||
|
<meta property="og:site_name" content="Pojazdownik" />
|
||||||
|
|
||||||
|
<meta name="twitter:card" content="summary_large_image" />
|
||||||
|
<meta name="twitter:title" content="Pojazdownik" />
|
||||||
|
<meta
|
||||||
|
name="twitter:description"
|
||||||
|
content="Edytor składów online dla symulatora Train Driver 2"
|
||||||
|
/>
|
||||||
|
<meta
|
||||||
|
name="twitter:image"
|
||||||
|
content="https://raw.githubusercontent.com/Spythere/api/refs/heads/main/thumbnails/pojazdownik-banner.png"
|
||||||
|
/>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<noscript>
|
<noscript>
|
||||||
|
|||||||
+4
-2
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "pojazdownik",
|
"name": "pojazdownik",
|
||||||
"version": "1.8.13",
|
"version": "1.9.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
@@ -12,6 +12,7 @@
|
|||||||
"format": "prettier --write src/"
|
"format": "prettier --write src/"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@heroicons/vue": "^2.2.0",
|
||||||
"axios": "^1.4.0",
|
"axios": "^1.4.0",
|
||||||
"pinia": "^2.0.17",
|
"pinia": "^2.0.17",
|
||||||
"prettier": "^3.0.3",
|
"prettier": "^3.0.3",
|
||||||
@@ -21,6 +22,7 @@
|
|||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@rushstack/eslint-patch": "^1.3.3",
|
"@rushstack/eslint-patch": "^1.3.3",
|
||||||
|
"@types/node": "^22.13.9",
|
||||||
"@vite-pwa/assets-generator": "^0.2.3",
|
"@vite-pwa/assets-generator": "^0.2.3",
|
||||||
"@vitejs/plugin-vue": "^5.0.3",
|
"@vitejs/plugin-vue": "^5.0.3",
|
||||||
"@vue/eslint-config-prettier": "^9.0.0",
|
"@vue/eslint-config-prettier": "^9.0.0",
|
||||||
@@ -32,6 +34,6 @@
|
|||||||
"typescript": "^5.0.2",
|
"typescript": "^5.0.2",
|
||||||
"vite": "^5.0.12",
|
"vite": "^5.0.12",
|
||||||
"vite-plugin-pwa": "^0.17.5",
|
"vite-plugin-pwa": "^0.17.5",
|
||||||
"vue-tsc": "^1.2.0"
|
"vue-tsc": "^2.2.8"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Binary file not shown.
|
After Width: | Height: | Size: 74 KiB |
+41
-11
@@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<AppModals />
|
<AppModals />
|
||||||
<ImageFullscreenPreview v-if="store.vehiclePreviewSrc" />
|
<ImageFullscreenPreview v-if="store.vehiclePreviewSrc" />
|
||||||
|
|
||||||
<router-view></router-view>
|
<router-view></router-view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -15,34 +15,64 @@ import AppModals from './components/app/AppModals.vue';
|
|||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components: { ImageFullscreenPreview, AppContainerView, AppModals },
|
components: { ImageFullscreenPreview, AppContainerView, AppModals },
|
||||||
data() {
|
data() {
|
||||||
return {
|
return { store: useStore() };
|
||||||
store: useStore(),
|
|
||||||
};
|
|
||||||
},
|
},
|
||||||
|
|
||||||
async created() {
|
created() {
|
||||||
this.store.handleRouting();
|
this.loadStockDataFromStorage();
|
||||||
this.store.setupAPIData();
|
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
|
||||||
|
);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@import './styles/global.scss';
|
|
||||||
|
|
||||||
/* APP */
|
/* APP */
|
||||||
#app {
|
#app {
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
|
||||||
color: $textColor;
|
color: global.$textColor;
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
||||||
@media screen and (max-width: $breakpointMd) {
|
@media screen and (max-width: global.$breakpointMd) {
|
||||||
font-size: calc(0.7rem + 0.75vw);
|
font-size: calc(0.7rem + 0.75vw);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (orientation: landscape) and (max-width: $breakpointMd) {
|
@media screen and (orientation: landscape) and (max-width: global.$breakpointMd) {
|
||||||
font-size: calc(0.75rem + 0.4vw);
|
font-size: calc(0.75rem + 0.4vw);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -3,7 +3,7 @@
|
|||||||
<LogoSection />
|
<LogoSection />
|
||||||
<InputsSection />
|
<InputsSection />
|
||||||
<TrainImageSection />
|
<TrainImageSection />
|
||||||
<StockSection />
|
<TabsSection />
|
||||||
</main>
|
</main>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -12,16 +12,14 @@ import { defineComponent } from 'vue';
|
|||||||
import LogoSection from '../sections/LogoSection.vue';
|
import LogoSection from '../sections/LogoSection.vue';
|
||||||
import InputsSection from '../sections/InputsSection.vue';
|
import InputsSection from '../sections/InputsSection.vue';
|
||||||
import TrainImageSection from '../sections/TrainImageSection.vue';
|
import TrainImageSection from '../sections/TrainImageSection.vue';
|
||||||
import StockSection from '../sections/StockSection.vue';
|
import TabsSection from '../sections/TabsSection.vue';
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components: { LogoSection, InputsSection, TrainImageSection, StockSection },
|
components: { LogoSection, InputsSection, TrainImageSection, TabsSection },
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import '../../styles/global.scss';
|
|
||||||
|
|
||||||
main {
|
main {
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: 1em;
|
gap: 1em;
|
||||||
@@ -32,7 +30,7 @@ main {
|
|||||||
grid-template-columns: 1fr 2fr;
|
grid-template-columns: 1fr 2fr;
|
||||||
grid-template-rows: auto 360px minmax(300px, 1fr);
|
grid-template-rows: auto 360px minmax(300px, 1fr);
|
||||||
|
|
||||||
background-color: darken($color: $bgColor, $amount: 5);
|
background-color: global.$bgColorDarker;
|
||||||
border-radius: 1em;
|
border-radius: 1em;
|
||||||
|
|
||||||
min-height: 950px;
|
min-height: 950px;
|
||||||
@@ -40,7 +38,7 @@ main {
|
|||||||
padding: 1em;
|
padding: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: $breakpointMd) {
|
@media screen and (max-width: global.$breakpointMd) {
|
||||||
main {
|
main {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|||||||
@@ -220,8 +220,6 @@ export default defineComponent({
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import '../../styles/global.scss';
|
|
||||||
|
|
||||||
.action-exit {
|
.action-exit {
|
||||||
display: flex;
|
display: flex;
|
||||||
background-color: #333;
|
background-color: #333;
|
||||||
@@ -249,7 +247,7 @@ export default defineComponent({
|
|||||||
|
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
|
|
||||||
@media screen and (max-width: $breakpointSm) {
|
@media screen and (max-width: global.$breakpointSm) {
|
||||||
height: 80vh;
|
height: 80vh;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -281,7 +279,7 @@ export default defineComponent({
|
|||||||
width: 35%;
|
width: 35%;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: $breakpointSm) {
|
@media screen and (max-width: global.$breakpointSm) {
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
|
||||||
input {
|
input {
|
||||||
@@ -309,7 +307,7 @@ ul {
|
|||||||
padding: 0.1em;
|
padding: 0.1em;
|
||||||
|
|
||||||
&[data-last-selected='true'] .stock-title {
|
&[data-last-selected='true'] .stock-title {
|
||||||
border: 1px solid $accentColor;
|
border: 1px solid global.$accentColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stock-title {
|
.stock-title {
|
||||||
@@ -325,7 +323,7 @@ ul {
|
|||||||
background: #222;
|
background: #222;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: $breakpointSm) {
|
@media screen and (max-width: global.$breakpointSm) {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
// grid-template-rows: 1fr 1fr;
|
// grid-template-rows: 1fr 1fr;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,9 +1,9 @@
|
|||||||
<template>
|
<template>
|
||||||
<section class="inputs-section">
|
<section class="inputs-section">
|
||||||
<div class="input_container">
|
<div class="input_container">
|
||||||
<h2 class="input_header">{{ $t('inputs.title') }}</h2>
|
|
||||||
|
|
||||||
<div class="input_list type">
|
<div class="input_list type">
|
||||||
|
<label for="cargo-select">{{ $t('inputs.vehicles-title') }}</label>
|
||||||
|
|
||||||
<div class="vehicle-types locos">
|
<div class="vehicle-types locos">
|
||||||
<button
|
<button
|
||||||
v-for="locoType in locomotiveTypeList"
|
v-for="locoType in locomotiveTypeList"
|
||||||
@@ -35,6 +35,8 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="input_list type">
|
<div class="input_list type">
|
||||||
|
<label for="cargo-select">{{ $t('inputs.carwagons-title') }}</label>
|
||||||
|
|
||||||
<div class="vehicle-types carwagons">
|
<div class="vehicle-types carwagons">
|
||||||
<button
|
<button
|
||||||
v-for="carType in carTypeList"
|
v-for="carType in carTypeList"
|
||||||
@@ -134,33 +136,15 @@ export default defineComponent({
|
|||||||
data: () => ({
|
data: () => ({
|
||||||
store: useStore(),
|
store: useStore(),
|
||||||
locomotiveTypeList: [
|
locomotiveTypeList: [
|
||||||
{
|
{ id: 'loco-electric', desc: 'ELEKTRYCZNE' },
|
||||||
id: 'loco-electric',
|
{ id: 'loco-diesel', desc: 'SPALINOWE' },
|
||||||
desc: 'ELEKTRYCZNE',
|
{ id: 'unit-electric', desc: 'ELEKTR. ZESPOŁY TRAKCYJNE' },
|
||||||
},
|
{ id: 'unit-diesel', desc: 'SPAL. ZESPOŁY TRAKCYJNE' },
|
||||||
{
|
|
||||||
id: 'loco-diesel',
|
|
||||||
desc: 'SPALINOWE',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'unit-electric',
|
|
||||||
desc: 'ELEKTR. ZESPOŁY TRAKCYJNE',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'unit-diesel',
|
|
||||||
desc: 'SPAL. ZESPOŁY TRAKCYJNE',
|
|
||||||
},
|
|
||||||
] as { id: LocoGroupType; desc: string }[],
|
] as { id: LocoGroupType; desc: string }[],
|
||||||
|
|
||||||
carTypeList: [
|
carTypeList: [
|
||||||
{
|
{ id: 'wagon-passenger', desc: 'PASAŻERSKIE' },
|
||||||
id: 'wagon-passenger',
|
{ id: 'wagon-freight', desc: 'TOWAROWE' },
|
||||||
desc: 'PASAŻERSKIE',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'wagon-freight',
|
|
||||||
desc: 'TOWAROWE',
|
|
||||||
},
|
|
||||||
] as { id: WagonGroupType; desc: string }[],
|
] as { id: WagonGroupType; desc: string }[],
|
||||||
}),
|
}),
|
||||||
|
|
||||||
@@ -240,8 +224,6 @@ export default defineComponent({
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import '../../styles/global';
|
|
||||||
|
|
||||||
.inputs-section {
|
.inputs-section {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@@ -255,16 +237,12 @@ export default defineComponent({
|
|||||||
max-width: 380px;
|
max-width: 380px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.input_header {
|
|
||||||
margin-bottom: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
button.btn--choice {
|
button.btn--choice {
|
||||||
font-size: 0.9em;
|
font-size: 0.9em;
|
||||||
padding: 0.3em 0.6em;
|
padding: 0.3em 0.6em;
|
||||||
|
|
||||||
&[data-selected='true'] {
|
&[data-selected='true'] {
|
||||||
background-color: $accentColor;
|
background-color: global.$accentColor;
|
||||||
color: black;
|
color: black;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -282,12 +260,12 @@ button.btn--choice {
|
|||||||
display: block;
|
display: block;
|
||||||
|
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $accentColor;
|
color: global.$accentColor;
|
||||||
margin-bottom: 0.3em;
|
margin-bottom: 0.3em;
|
||||||
}
|
}
|
||||||
|
|
||||||
select:focus {
|
select:focus {
|
||||||
border-color: $accentColor;
|
border-color: global.$accentColor;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -306,9 +284,13 @@ button.btn--choice {
|
|||||||
gap: 0.25em;
|
gap: 0.25em;
|
||||||
|
|
||||||
margin-bottom: 0.5em;
|
margin-bottom: 0.5em;
|
||||||
|
|
||||||
|
button {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: $breakpointMd) {
|
@media screen and (max-width: global.$breakpointMd) {
|
||||||
.inputs-section {
|
.inputs-section {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|||||||
@@ -21,14 +21,8 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
localeActions: [
|
localeActions: [
|
||||||
{
|
{ name: 'POLSKI', locale: 'pl' },
|
||||||
name: 'POLSKI',
|
{ name: 'ENGLISH', locale: 'en' },
|
||||||
locale: 'pl',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'ENGLISH',
|
|
||||||
locale: 'en',
|
|
||||||
},
|
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
@@ -46,8 +40,6 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import '../../styles/global.scss';
|
|
||||||
|
|
||||||
.logo-section {
|
.logo-section {
|
||||||
grid-row: 1;
|
grid-row: 1;
|
||||||
grid-column: 1;
|
grid-column: 1;
|
||||||
@@ -66,7 +58,7 @@ export default {
|
|||||||
|
|
||||||
button[data-selected='true'] {
|
button[data-selected='true'] {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $accentColor;
|
color: global.$accentColor;
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
+31
-13
@@ -1,9 +1,17 @@
|
|||||||
<template>
|
<template>
|
||||||
<section class="stock-section">
|
<section class="tabs-section">
|
||||||
<div class="section_modes">
|
<div class="tabs-modes">
|
||||||
<router-link v-for="(route, i) in routes" :key="route.name" class="link-btn" :to="route.href">
|
<router-link
|
||||||
|
v-for="(route, i) in routes"
|
||||||
|
:key="route.name"
|
||||||
|
class="link-btn"
|
||||||
|
:to="route.href"
|
||||||
|
:style="{ 'grid-area': route.name }"
|
||||||
|
>
|
||||||
<span class="text--accent">{{ i + 1 }}.</span> {{ $t(`topbar.${route.name}`) }}
|
<span class="text--accent">{{ i + 1 }}.</span> {{ $t(`topbar.${route.name}`) }}
|
||||||
<span class="text--grayed" v-if="route.name == 'stock'">({{ store.stockList.length }})</span>
|
<span class="text--grayed" v-if="route.name == 'stock'"
|
||||||
|
>({{ store.stockList.length }})</span
|
||||||
|
>
|
||||||
</router-link>
|
</router-link>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -33,6 +41,10 @@ const routes = [
|
|||||||
name: 'wiki',
|
name: 'wiki',
|
||||||
href: '/wiki',
|
href: '/wiki',
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
name: 'storage',
|
||||||
|
href: '/storage',
|
||||||
|
},
|
||||||
{
|
{
|
||||||
name: 'numgen',
|
name: 'numgen',
|
||||||
href: '/numgen',
|
href: '/numgen',
|
||||||
@@ -47,7 +59,7 @@ onMounted(() => {
|
|||||||
window.addEventListener('keydown', (e) => {
|
window.addEventListener('keydown', (e) => {
|
||||||
if (e.target instanceof HTMLInputElement) return;
|
if (e.target instanceof HTMLInputElement) return;
|
||||||
|
|
||||||
if (/^[1234]$/.test(e.key)) {
|
if (/^[12345]$/.test(e.key)) {
|
||||||
const keyNum = Number(e.key);
|
const keyNum = Number(e.key);
|
||||||
|
|
||||||
router.push(routes[keyNum - 1].href);
|
router.push(routes[keyNum - 1].href);
|
||||||
@@ -57,8 +69,6 @@ onMounted(() => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@import '../../styles/global.scss';
|
|
||||||
|
|
||||||
// Tab change animation
|
// Tab change animation
|
||||||
.tab-change {
|
.tab-change {
|
||||||
&-enter-from,
|
&-enter-from,
|
||||||
@@ -73,7 +83,7 @@ onMounted(() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Section styles
|
// Section styles
|
||||||
.stock-section {
|
.tabs-section {
|
||||||
grid-row: 1 / 4;
|
grid-row: 1 / 4;
|
||||||
grid-column: 2;
|
grid-column: 2;
|
||||||
|
|
||||||
@@ -81,9 +91,13 @@ onMounted(() => {
|
|||||||
padding: 1px;
|
padding: 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.section_modes {
|
.tabs-modes {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(4, 1fr);
|
grid-template-areas:
|
||||||
|
'stock stock wiki wiki storage storage'
|
||||||
|
'numgen numgen numgen stockgen stockgen stockgen';
|
||||||
|
grid-template-columns: repeat(6, 1fr);
|
||||||
|
// grid-template-rows: 1fr 1fr;
|
||||||
padding: 1px;
|
padding: 1px;
|
||||||
|
|
||||||
gap: 0.5em;
|
gap: 0.5em;
|
||||||
@@ -91,9 +105,13 @@ onMounted(() => {
|
|||||||
margin-bottom: 1em;
|
margin-bottom: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 650px) {
|
@media screen and (max-width: global.$breakpointSm) {
|
||||||
.section_modes {
|
.tabs-modes {
|
||||||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
grid-template-areas:
|
||||||
|
'stock wiki'
|
||||||
|
'storage storage'
|
||||||
|
'numgen stockgen';
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -152,7 +152,7 @@ export default defineComponent({
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import '../../styles/global';
|
|
||||||
|
|
||||||
.train-image-section {
|
.train-image-section {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -178,11 +178,11 @@ img {
|
|||||||
}
|
}
|
||||||
|
|
||||||
&[data-sponsor-only='true'] {
|
&[data-sponsor-only='true'] {
|
||||||
border: 1px solid $sponsorColor;
|
border: 1px solid global.$sponsorColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
&[data-team-only='true'] {
|
&[data-team-only='true'] {
|
||||||
border: 1px solid $teamColor;
|
border: 1px solid global.$teamColor;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -216,25 +216,25 @@ img {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 380px;
|
max-width: 380px;
|
||||||
|
|
||||||
background-color: $secondaryColor;
|
background-color: global.$secondaryColor;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.placeholder {
|
.placeholder {
|
||||||
height: 250px;
|
height: 250px;
|
||||||
|
|
||||||
background-color: $bgColor;
|
background-color: global.$bgColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sponsor-only {
|
.sponsor-only {
|
||||||
color: $sponsorColor;
|
color: global.$sponsorColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
.team-only {
|
.team-only {
|
||||||
color: $teamColor;
|
color: global.$teamColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: $breakpointMd) {
|
@media screen and (max-width: global.$breakpointMd) {
|
||||||
.train-image-section {
|
.train-image-section {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -224,8 +224,7 @@ const randomizeTrainNumber = (randomizeRegions = false) => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import '../../styles/tab.scss';
|
@use '../../styles/tab';
|
||||||
@import '../../styles/global.scss';
|
|
||||||
|
|
||||||
.category-select {
|
.category-select {
|
||||||
select {
|
select {
|
||||||
@@ -264,7 +263,7 @@ const randomizeTrainNumber = (randomizeRegions = false) => {
|
|||||||
|
|
||||||
margin: 0.5em 0;
|
margin: 0.5em 0;
|
||||||
padding: 0.5em;
|
padding: 0.5em;
|
||||||
background-color: $secondaryColor;
|
background-color: global.$secondaryColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
.category-rules {
|
.category-rules {
|
||||||
@@ -282,13 +281,13 @@ const randomizeTrainNumber = (randomizeRegions = false) => {
|
|||||||
margin: 0.25em 0;
|
margin: 0.25em 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: $breakpointMd) {
|
@media screen and (max-width: global.$breakpointMd) {
|
||||||
.number-generator {
|
.number-generator {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: $breakpointSm) {
|
@media screen and (max-width: global.$breakpointSm) {
|
||||||
.regions-select {
|
.regions-select {
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,9 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="stock-generator tab">
|
<div class="stock-generator tab">
|
||||||
<div class="tab_header">
|
|
||||||
<h2>{{ $t('stockgen.title') }}</h2>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="tab_content">
|
<div class="tab_content">
|
||||||
<div>
|
<div>
|
||||||
<h2>{{ $t('stockgen.properties-title') }}</h2>
|
<h2>{{ $t('stockgen.properties-title') }}</h2>
|
||||||
@@ -227,16 +223,10 @@ export default defineComponent({
|
|||||||
|
|
||||||
return acc;
|
return acc;
|
||||||
},
|
},
|
||||||
[] as {
|
[] as { constructionType: string; carPool: { carWagon: ICarWagon; cargo?: ICargo }[] }[]
|
||||||
constructionType: string;
|
|
||||||
carPool: { carWagon: ICarWagon; cargo?: ICargo }[];
|
|
||||||
}[]
|
|
||||||
);
|
);
|
||||||
|
|
||||||
let bestGeneration: { stockList: IStock[]; value: number } = {
|
let bestGeneration: { stockList: IStock[]; value: number } = { stockList: [], value: 0 };
|
||||||
stockList: [],
|
|
||||||
value: 0,
|
|
||||||
};
|
|
||||||
|
|
||||||
for (let i = 0; i < 10; i++) {
|
for (let i = 0; i < 10; i++) {
|
||||||
this.store.stockList.splice(
|
this.store.stockList.splice(
|
||||||
@@ -324,8 +314,7 @@ export default defineComponent({
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import '../../styles/global.scss';
|
@use '@/styles/tab';
|
||||||
@import '../../styles/tab.scss';
|
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
@@ -346,7 +335,7 @@ h2 {
|
|||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
|
||||||
background-color: $secondaryColor;
|
background-color: global.$secondaryColor;
|
||||||
|
|
||||||
&[data-excluded='true'] {
|
&[data-excluded='true'] {
|
||||||
background-color: gray;
|
background-color: gray;
|
||||||
@@ -360,7 +349,7 @@ h2 {
|
|||||||
padding: 5px;
|
padding: 5px;
|
||||||
|
|
||||||
transform: translate(-8px, -50%);
|
transform: translate(-8px, -50%);
|
||||||
background-color: $bgColor;
|
background-color: global.$bgColor;
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -401,7 +390,7 @@ h2 {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.generator_warning {
|
.generator_warning {
|
||||||
background-color: $accentColor;
|
background-color: global.$accentColor;
|
||||||
padding: 0.5em;
|
padding: 0.5em;
|
||||||
text-align: justify;
|
text-align: justify;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
|||||||
@@ -1,228 +1,20 @@
|
|||||||
<template>
|
<template>
|
||||||
<section class="stock-list-tab">
|
<section class="stock-list-tab">
|
||||||
<div class="tab_header">
|
|
||||||
<h2>{{ $t('stocklist.title') }}</h2>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="tab_content">
|
<div class="tab_content">
|
||||||
<div class="stock_actions">
|
<!-- Stock Actions -->
|
||||||
<button class="btn btn--image" @click="clickFileInput">
|
<StockActions />
|
||||||
<input type="file" @change="uploadStock" ref="conFile" accept=".con,.txt" />
|
|
||||||
<img src="/images/icon-upload.svg" alt="upload icon" />
|
|
||||||
{{ $t('stocklist.action-upload') }}
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button
|
<!-- Stock Specs -->
|
||||||
class="btn btn--image"
|
<StockSpecs />
|
||||||
:data-disabled="stockIsEmpty"
|
|
||||||
:disabled="stockIsEmpty"
|
|
||||||
@click="downloadStock"
|
|
||||||
>
|
|
||||||
<img src="/images/icon-download.svg" alt="download icon" />
|
|
||||||
{{ $t('stocklist.action-download') }}
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button
|
<!-- Stock Spawn Settings -->
|
||||||
class="btn btn--image"
|
<StockSpawnSettings />
|
||||||
:data-disabled="stockIsEmpty"
|
|
||||||
:disabled="stockIsEmpty"
|
|
||||||
@click="copyToClipboard"
|
|
||||||
>
|
|
||||||
<img src="/images/icon-copy.svg" alt="copy icon" />
|
|
||||||
{{ $t('stocklist.action-copy') }}
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button
|
<!-- Stock Warnings -->
|
||||||
class="btn btn--image"
|
<StockWarnings />
|
||||||
:data-disabled="stockIsEmpty"
|
|
||||||
:disabled="stockIsEmpty"
|
|
||||||
@click="resetStock"
|
|
||||||
>
|
|
||||||
<img src="/images/icon-reset.svg" alt="reset icon" />
|
|
||||||
{{ $t('stocklist.action-reset') }}
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button
|
<!-- Stock List -->
|
||||||
class="btn btn--image"
|
<StockList />
|
||||||
:data-disabled="stockIsEmpty"
|
|
||||||
:disabled="stockIsEmpty"
|
|
||||||
@click="shuffleCars"
|
|
||||||
>
|
|
||||||
<img src="/images/icon-shuffle.svg" alt="shuffle icon" />
|
|
||||||
{{ $t('stocklist.action-shuffle') }}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stock_controls" :data-disabled="store.chosenStockListIndex == -1">
|
|
||||||
<button
|
|
||||||
class="btn btn--image"
|
|
||||||
:tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
|
|
||||||
@click="moveUpStock(store.chosenStockListIndex)"
|
|
||||||
>
|
|
||||||
<img :src="getIconURL('higher')" alt="move up vehicle" />
|
|
||||||
{{ $t('stocklist.action-move-up') }}
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button
|
|
||||||
class="btn btn--image"
|
|
||||||
:tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
|
|
||||||
@click="moveDownStock(store.chosenStockListIndex)"
|
|
||||||
>
|
|
||||||
<img :src="getIconURL('lower')" alt="move down vehicle" />
|
|
||||||
{{ $t('stocklist.action-move-down') }}
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button
|
|
||||||
class="btn btn--image"
|
|
||||||
:tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
|
|
||||||
@click="removeStock(store.chosenStockListIndex)"
|
|
||||||
>
|
|
||||||
<img :src="getIconURL('remove')" alt="remove vehicle" />
|
|
||||||
{{ $t('stocklist.action-remove') }}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stock_specs">
|
|
||||||
<b class="real-stock-info" v-if="chosenRealComposition">
|
|
||||||
<span class="text--accent">
|
|
||||||
<img :src="getIconURL(chosenRealComposition.type)" :alt="chosenRealComposition.type" />
|
|
||||||
{{ chosenRealComposition.number }} {{ chosenRealComposition.name }}
|
|
||||||
</span>
|
|
||||||
|
|
|
||||||
</b>
|
|
||||||
|
|
||||||
<span>
|
|
||||||
{{ $t('stocklist.mass') }}
|
|
||||||
<span class="text--accent">{{ (store.totalWeight / 1000).toFixed(1) }}t</span>
|
|
||||||
({{ $t('stocklist.mass-accepted') }}:
|
|
||||||
<span class="text--accent">{{
|
|
||||||
store.acceptableWeight ? `${~~(store.acceptableWeight / 1000)}t` : '-'
|
|
||||||
}}</span
|
|
||||||
>) - {{ $t('stocklist.length') }}:
|
|
||||||
<span class="text--accent">{{ store.totalLength }}m</span>
|
|
||||||
- {{ $t('stocklist.vmax') }}
|
|
||||||
<span tabindex="0" :data-tooltip="$t('stocklist.disclaimer')">(?)</span>:
|
|
||||||
<span class="text--accent">{{ store.maxStockSpeed }} km/h</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div></div>
|
|
||||||
|
|
||||||
<div class="stock_spawn-settings">
|
|
||||||
<Checkbox :disabled="!store.stockSupportsColdStart" v-model="store.isColdStart">
|
|
||||||
{{ $t('stocklist.coldstart-info') }}
|
|
||||||
</Checkbox>
|
|
||||||
|
|
||||||
<Checkbox :disabled="!store.stockSupportsDoubleManning" v-model="store.isDoubleManned">
|
|
||||||
{{ $t('stocklist.doublemanning-info') }}
|
|
||||||
</Checkbox>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stock_warnings" v-if="hasAnyWarnings">
|
|
||||||
<div class="warning" v-if="locoNotSuitable">
|
|
||||||
(!) {{ $t('stocklist.warning-not-suitable') }}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="warning" v-if="lengthExceeded && store.isTrainPassenger">
|
|
||||||
(!) {{ $t('stocklist.warning-passenger-too-long') }}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="warning" v-if="lengthExceeded && !store.isTrainPassenger">
|
|
||||||
(!) {{ $t('stocklist.warning-freight-too-long') }}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="warning" v-if="teamOnlyVehicles.length > 0">
|
|
||||||
(!)
|
|
||||||
{{
|
|
||||||
$t('stocklist.warning-team-only-vehicle', [
|
|
||||||
teamOnlyVehicles.map((v) => v.vehicleRef.type).join(', '),
|
|
||||||
])
|
|
||||||
}}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="warning" v-if="weightExceeded">
|
|
||||||
(!)
|
|
||||||
<i18n-t keypath="stocklist.warning-too-heavy">
|
|
||||||
<template #href>
|
|
||||||
<a
|
|
||||||
target="_blank"
|
|
||||||
href="https://docs.google.com/spreadsheets/d/1BvTU-U7huIaEheov22TrhTtROUM4MwVfdbq03GVAEM8"
|
|
||||||
>
|
|
||||||
{{ $t('stocklist.acceptable-mass-docs') }}
|
|
||||||
</a>
|
|
||||||
</template>
|
|
||||||
</i18n-t>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="warning" v-if="locoCountExceeded">
|
|
||||||
{{ $t('stocklist.warning-too-many-locos') }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<StockThumbnails :onListItemClick="onListItemClick" />
|
|
||||||
|
|
||||||
<!-- Stock list -->
|
|
||||||
<div class="list-wrapper">
|
|
||||||
<div v-if="stockIsEmpty" class="list-empty">
|
|
||||||
<div class="stock-info">{{ $t('stocklist.list-empty') }}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<ul v-else>
|
|
||||||
<transition-group name="stock-list-anim">
|
|
||||||
<li
|
|
||||||
v-for="(stock, i) in store.stockList"
|
|
||||||
:key="stock.id"
|
|
||||||
:class="{ loco: isTractionUnit(stock.vehicleRef) }"
|
|
||||||
tabindex="0"
|
|
||||||
@click="onListItemClick(i)"
|
|
||||||
@keydown.enter="onListItemClick(i)"
|
|
||||||
@keydown.w="moveUpStock(i)"
|
|
||||||
@keydown.s="moveDownStock(i)"
|
|
||||||
@keydown.backspace="removeStock(i)"
|
|
||||||
ref="itemRefs"
|
|
||||||
>
|
|
||||||
<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 }}.
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<span
|
|
||||||
class="stock-info-type"
|
|
||||||
: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)
|
|
||||||
}}
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<span class="stock-info-cargo" v-if="stock.cargo">
|
|
||||||
{{ stock.cargo.id }}
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<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-speed">{{ stock.vehicleRef.maxSpeed }}km/h</span>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</transition-group>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</template>
|
</template>
|
||||||
@@ -230,473 +22,31 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent } from 'vue';
|
import { defineComponent } from 'vue';
|
||||||
|
|
||||||
import { useStore } from '../../store';
|
import StockActions from './stock-list/StockActions.vue';
|
||||||
|
import StockSpecs from './stock-list/StockSpecs.vue';
|
||||||
import imageMixin from '../../mixins/imageMixin';
|
import StockSpawnSettings from './stock-list/StockSpawnSettings.vue';
|
||||||
import stockPreviewMixin from '../../mixins/stockPreviewMixin';
|
import StockWarnings from './stock-list/StockWarnings.vue';
|
||||||
import StockThumbnails from '../utils/StockThumbnails.vue';
|
import StockList from './stock-list/StockList.vue';
|
||||||
import stockMixin from '../../mixins/stockMixin';
|
|
||||||
import Checkbox from '../common/Checkbox.vue';
|
|
||||||
import { isTractionUnit } from '../../utils/vehicleUtils';
|
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: 'stock-list',
|
name: 'stock-list',
|
||||||
components: { StockThumbnails, Checkbox },
|
|
||||||
|
|
||||||
mixins: [imageMixin, stockMixin, stockPreviewMixin],
|
components: {
|
||||||
|
StockActions,
|
||||||
setup() {
|
StockSpecs,
|
||||||
const store = useStore();
|
StockSpawnSettings,
|
||||||
|
StockWarnings,
|
||||||
return {
|
StockList,
|
||||||
store,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
data: () => ({
|
|
||||||
imageOffsetY: 0,
|
|
||||||
draggedVehicleID: -1,
|
|
||||||
|
|
||||||
stockActions: [{}],
|
|
||||||
}),
|
|
||||||
|
|
||||||
computed: {
|
|
||||||
chosenRealComposition() {
|
|
||||||
const currentStockString = this.store.stockList.map((s) => s.vehicleRef.type).join(';');
|
|
||||||
|
|
||||||
return this.store.realCompositionList.find((rc) => rc.stockString == currentStockString);
|
|
||||||
},
|
|
||||||
|
|
||||||
stockString() {
|
|
||||||
if (this.store.stockList.length == 0) return '';
|
|
||||||
|
|
||||||
const includeColdStart = this.store.isColdStart && this.store.stockSupportsColdStart;
|
|
||||||
const includeDoubleManned =
|
|
||||||
this.store.isDoubleManned && this.store.stockSupportsDoubleManning;
|
|
||||||
|
|
||||||
return this.store.stockList
|
|
||||||
.map((stock, i) => {
|
|
||||||
let stockTypeStr =
|
|
||||||
isTractionUnit(stock.vehicleRef) || !stock.cargo
|
|
||||||
? stock.vehicleRef.type
|
|
||||||
: `${stock.vehicleRef.type}:${stock.cargo.id}`;
|
|
||||||
|
|
||||||
if (i == 0 && (includeColdStart || includeDoubleManned))
|
|
||||||
return `${stockTypeStr},${includeColdStart ? 'c' : ''}${includeDoubleManned ? 'd' : ''}`;
|
|
||||||
|
|
||||||
return stockTypeStr;
|
|
||||||
})
|
|
||||||
.join(';');
|
|
||||||
},
|
|
||||||
|
|
||||||
stockIsEmpty() {
|
|
||||||
return this.store.stockList.length == 0;
|
|
||||||
},
|
|
||||||
|
|
||||||
chosenStockVehicle() {
|
|
||||||
return this.store.chosenStockListIndex == -1
|
|
||||||
? undefined
|
|
||||||
: this.store.stockList[this.store.chosenStockListIndex];
|
|
||||||
},
|
|
||||||
|
|
||||||
lengthExceeded() {
|
|
||||||
return (
|
|
||||||
(this.store.totalLength > 350 && this.store.isTrainPassenger) ||
|
|
||||||
(this.store.totalLength > 650 && !this.store.isTrainPassenger)
|
|
||||||
);
|
|
||||||
},
|
|
||||||
|
|
||||||
weightExceeded() {
|
|
||||||
return this.store.acceptableWeight && this.store.totalWeight > this.store.acceptableWeight;
|
|
||||||
},
|
|
||||||
|
|
||||||
locoNotSuitable() {
|
|
||||||
return (
|
|
||||||
!this.store.isTrainPassenger &&
|
|
||||||
this.store.stockList.length > 1 &&
|
|
||||||
!this.store.stockList.every((stock) => isTractionUnit(stock.vehicleRef)) &&
|
|
||||||
this.store.stockList.some(
|
|
||||||
(stock) => isTractionUnit(stock.vehicleRef) && stock.vehicleRef.type.startsWith('EP')
|
|
||||||
)
|
|
||||||
);
|
|
||||||
},
|
|
||||||
|
|
||||||
locoCountExceeded() {
|
|
||||||
return (
|
|
||||||
this.store.stockList.reduce((acc, stock) => {
|
|
||||||
if (isTractionUnit(stock.vehicleRef)) acc += 1;
|
|
||||||
return acc;
|
|
||||||
}, 0) > 2
|
|
||||||
);
|
|
||||||
},
|
|
||||||
|
|
||||||
teamOnlyVehicles() {
|
|
||||||
return this.store.stockList.filter((stock) => stock.vehicleRef.teamOnly);
|
|
||||||
},
|
|
||||||
|
|
||||||
hasAnyWarnings() {
|
|
||||||
return (
|
|
||||||
this.locoCountExceeded ||
|
|
||||||
this.weightExceeded ||
|
|
||||||
this.lengthExceeded ||
|
|
||||||
this.locoNotSuitable ||
|
|
||||||
this.teamOnlyVehicles
|
|
||||||
);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
isTractionUnit,
|
|
||||||
|
|
||||||
copyToClipboard() {
|
|
||||||
navigator.clipboard.writeText(this.stockString);
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
alert(this.$t('stocklist.alert-copied'));
|
|
||||||
}, 20);
|
|
||||||
},
|
|
||||||
|
|
||||||
clickFileInput() {
|
|
||||||
(this.$refs['conFile'] as HTMLInputElement).click();
|
|
||||||
},
|
|
||||||
|
|
||||||
onListItemClick(stockID: number) {
|
|
||||||
const stock = this.store.stockList[stockID];
|
|
||||||
|
|
||||||
this.store.chosenStockListIndex =
|
|
||||||
this.store.chosenStockListIndex == stockID &&
|
|
||||||
this.store.chosenVehicle?.type == stock.vehicleRef.type
|
|
||||||
? -1
|
|
||||||
: stockID;
|
|
||||||
|
|
||||||
if (this.store.chosenStockListIndex == -1) {
|
|
||||||
this.store.chosenVehicle = null;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.store.swapVehicles) this.store.swapVehicles = false;
|
|
||||||
|
|
||||||
this.previewStock(stock);
|
|
||||||
},
|
|
||||||
|
|
||||||
getCarSpecFromType(typeStr: string) {
|
|
||||||
const specArray = typeStr.split('_');
|
|
||||||
|
|
||||||
if (specArray.length == 0) return null;
|
|
||||||
|
|
||||||
/* 111a_Grafitti_1 */
|
|
||||||
if (specArray.length == 3) return `${specArray[0]} ${specArray[1]}-${specArray[2]}`;
|
|
||||||
|
|
||||||
/* 111a_PKP_Bnouz_01 */
|
|
||||||
return `${specArray[0]} ${specArray[2]}-${specArray[3]} (${specArray[1]})`;
|
|
||||||
},
|
|
||||||
|
|
||||||
resetStock() {
|
|
||||||
this.store.stockList.length = 0;
|
|
||||||
this.store.chosenStockListIndex = -1;
|
|
||||||
},
|
|
||||||
|
|
||||||
removeStock(index: number) {
|
|
||||||
if (index == -1) return;
|
|
||||||
|
|
||||||
this.store.stockList = this.store.stockList.filter((stock, i) => i != index);
|
|
||||||
|
|
||||||
if (this.store.stockList.length < index + 1) this.store.chosenStockListIndex = -1;
|
|
||||||
},
|
|
||||||
|
|
||||||
moveUpStock(index: number) {
|
|
||||||
if (index < 1) return;
|
|
||||||
|
|
||||||
const tempStock = this.store.stockList[index];
|
|
||||||
|
|
||||||
this.store.stockList[index] = this.store.stockList[index - 1];
|
|
||||||
this.store.stockList[index - 1] = tempStock;
|
|
||||||
|
|
||||||
this.store.chosenStockListIndex = index - 1;
|
|
||||||
},
|
|
||||||
|
|
||||||
moveDownStock(index: number) {
|
|
||||||
if (index == -1) return;
|
|
||||||
if (index > this.store.stockList.length - 2) return;
|
|
||||||
|
|
||||||
const tempStock = this.store.stockList[index];
|
|
||||||
|
|
||||||
this.store.stockList[index] = this.store.stockList[index + 1];
|
|
||||||
this.store.stockList[index + 1] = tempStock;
|
|
||||||
|
|
||||||
this.store.chosenStockListIndex = index + 1;
|
|
||||||
},
|
|
||||||
|
|
||||||
shuffleCars() {
|
|
||||||
const availableIndexes = this.store.stockList.reduce((acc, stock, i) => {
|
|
||||||
if (!isTractionUnit(stock.vehicleRef)) acc.push(i);
|
|
||||||
|
|
||||||
return acc;
|
|
||||||
}, [] as number[]);
|
|
||||||
|
|
||||||
for (let i = 0; i < this.store.stockList.length; i++) {
|
|
||||||
if (!availableIndexes.includes(i)) continue;
|
|
||||||
|
|
||||||
availableIndexes.splice(i, -1);
|
|
||||||
|
|
||||||
const randAvailableIndex =
|
|
||||||
availableIndexes[Math.floor(Math.random() * availableIndexes.length)];
|
|
||||||
const tempSwap = this.store.stockList[randAvailableIndex];
|
|
||||||
|
|
||||||
this.store.stockList[randAvailableIndex] = this.store.stockList[i];
|
|
||||||
this.store.stockList[i] = tempSwap;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
downloadStock() {
|
|
||||||
if (this.store.stockList.length == 0) return alert(this.$t('stocklist.alert-empty'));
|
|
||||||
|
|
||||||
const defaultName = `${this.chosenRealComposition ? this.chosenRealComposition.stockId + ' ' : ''}${this.store.stockList[0].vehicleRef.type} ${(this.store.totalWeight / 1000).toFixed(1)}t; ${
|
|
||||||
this.store.totalLength
|
|
||||||
}m; vmax ${this.store.maxStockSpeed}`;
|
|
||||||
|
|
||||||
const fileName = prompt(this.$t('stocklist.prompt-file'), defaultName);
|
|
||||||
|
|
||||||
if (!fileName) return;
|
|
||||||
|
|
||||||
const blob = new Blob([this.stockString]);
|
|
||||||
const file = fileName + '.con';
|
|
||||||
|
|
||||||
var e = document.createEvent('MouseEvents'),
|
|
||||||
a = document.createElement('a');
|
|
||||||
a.download = file;
|
|
||||||
a.href = window.URL.createObjectURL(blob);
|
|
||||||
a.dataset.downloadurl = ['', a.download, a.href].join(':');
|
|
||||||
e.initEvent('click', true, false);
|
|
||||||
a.dispatchEvent(e);
|
|
||||||
},
|
|
||||||
|
|
||||||
uploadStock() {
|
|
||||||
const inputEl = this.$refs['conFile'] as HTMLInputElement;
|
|
||||||
const files = inputEl.files;
|
|
||||||
|
|
||||||
if (files?.length != 1) return;
|
|
||||||
if (!/\.con$/.test(files[0].name)) return;
|
|
||||||
|
|
||||||
const reader = new FileReader();
|
|
||||||
reader.readAsText(files[0]);
|
|
||||||
|
|
||||||
reader.onload = (res) => {
|
|
||||||
const stockString = res.target?.result;
|
|
||||||
|
|
||||||
if (!stockString || typeof stockString !== 'string') return;
|
|
||||||
|
|
||||||
this.loadStockFromString(stockString);
|
|
||||||
};
|
|
||||||
|
|
||||||
reader.onerror = (err) => console.error(err);
|
|
||||||
|
|
||||||
inputEl.value = '';
|
|
||||||
},
|
|
||||||
|
|
||||||
onDragStart(vehicleIndex: number) {
|
|
||||||
this.draggedVehicleID = vehicleIndex;
|
|
||||||
},
|
|
||||||
|
|
||||||
onDrop(e: DragEvent, vehicleIndex: number) {
|
|
||||||
e.preventDefault();
|
|
||||||
|
|
||||||
let targetEl = (this.$refs['itemRefs'] as Element[])[vehicleIndex];
|
|
||||||
|
|
||||||
if (!targetEl) return;
|
|
||||||
|
|
||||||
const tempVehicle = this.store.stockList[vehicleIndex];
|
|
||||||
|
|
||||||
this.store.stockList[vehicleIndex] = this.store.stockList[this.draggedVehicleID];
|
|
||||||
this.store.stockList[this.draggedVehicleID] = tempVehicle;
|
|
||||||
|
|
||||||
this.store.chosenStockListIndex = vehicleIndex;
|
|
||||||
},
|
|
||||||
|
|
||||||
allowDrop(e: DragEvent) {
|
|
||||||
e.preventDefault();
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import '../../styles/global';
|
@use '@/styles/tab';
|
||||||
@import '../../styles/tab.scss';
|
|
||||||
|
|
||||||
.tab_content {
|
.tab_content {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 0.5em;
|
gap: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.warning {
|
|
||||||
padding: 0.25em;
|
|
||||||
margin: 0.25em 0;
|
|
||||||
background: $accentColor;
|
|
||||||
color: black;
|
|
||||||
|
|
||||||
font-weight: bold;
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: black;
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.stock_controls {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
|
|
||||||
gap: 0.5em;
|
|
||||||
|
|
||||||
padding: 0.5em;
|
|
||||||
|
|
||||||
background-color: #353a57;
|
|
||||||
|
|
||||||
&[data-disabled='true'] {
|
|
||||||
opacity: 0.8;
|
|
||||||
|
|
||||||
user-select: none;
|
|
||||||
-moz-user-select: none;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.stock_actions {
|
|
||||||
display: grid;
|
|
||||||
gap: 0.5em;
|
|
||||||
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
|
||||||
|
|
||||||
button {
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
input {
|
|
||||||
opacity: 0;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.stock_spawn-settings {
|
|
||||||
display: flex;
|
|
||||||
gap: 0.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.real-stock-info {
|
|
||||||
img {
|
|
||||||
height: 1.3ch;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-wrapper {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-empty {
|
|
||||||
background-color: $secondaryColor;
|
|
||||||
border-radius: 0.5em;
|
|
||||||
padding: 0.75em;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul {
|
|
||||||
overflow-y: scroll;
|
|
||||||
height: 500px;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul > li {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
min-width: 500px;
|
|
||||||
|
|
||||||
margin: 0.25em 0;
|
|
||||||
|
|
||||||
outline: none;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
&:focus-visible {
|
|
||||||
outline: 1px solid white;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
li > .stock-info {
|
|
||||||
display: flex;
|
|
||||||
gap: 0.25em;
|
|
||||||
|
|
||||||
color: white;
|
|
||||||
font-weight: 700;
|
|
||||||
|
|
||||||
transition: color 100ms;
|
|
||||||
|
|
||||||
& > span {
|
|
||||||
padding: 0.5em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.stock-info-no,
|
|
||||||
.stock-info-type {
|
|
||||||
background-color: $secondaryColor;
|
|
||||||
|
|
||||||
&[data-team-only='true'] {
|
|
||||||
color: $teamColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
&[data-sponsor-only='true'] {
|
|
||||||
color: $sponsorColor;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.stock-info-no {
|
|
||||||
min-width: 3.5em;
|
|
||||||
text-align: right;
|
|
||||||
|
|
||||||
&[data-selected='true'] {
|
|
||||||
color: $accentColor;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.stock-info-cargo {
|
|
||||||
background-color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stock-info-length,
|
|
||||||
.stock-info-mass,
|
|
||||||
.stock-info-speed {
|
|
||||||
background-color: #555;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stock-list-anim {
|
|
||||||
&-move, /* apply transition to moving elements */
|
|
||||||
&-enter-active,
|
|
||||||
&-leave-active {
|
|
||||||
transition: all 250ms ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-enter-from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(-25px);
|
|
||||||
}
|
|
||||||
|
|
||||||
&-leave-to {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-leave-active {
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: $breakpointMd) {
|
|
||||||
ul {
|
|
||||||
min-height: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -0,0 +1,237 @@
|
|||||||
|
<template>
|
||||||
|
<section class="tab storage-tab">
|
||||||
|
<div class="tab_header">
|
||||||
|
<h2>{{ $t('storage.title') }}</h2>
|
||||||
|
<h3>{{ $t('storage.subtitle') }}</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="tab_content">
|
||||||
|
<div class="storage-list-wrapper">
|
||||||
|
<transition-group name="storage-list-anim" tag="ul" class="storage-list">
|
||||||
|
<li v-for="storageEntry in storageStockDataList" :key="storageEntry.id">
|
||||||
|
<div class="storage-item-top">
|
||||||
|
<h3>
|
||||||
|
{{ storageEntry.id }}
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<div class="storage-item-top-actions">
|
||||||
|
<button class="btn btn--icon" @click="chooseStorageStock(storageEntry.id)">
|
||||||
|
<ArrowRightEndOnRectangleIcon style="width: 25px" />
|
||||||
|
</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" />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button class="btn btn--icon" @click="removeStockIndexFromStorage(storageEntry.id)">
|
||||||
|
<TrashIcon style="width: 25px" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="storage-item-expandable" v-if="expandedEntries.includes(storageEntry.id)">
|
||||||
|
<i>
|
||||||
|
{{ $t('storage.created-at') }}
|
||||||
|
{{ new Date(storageEntry.createdAt).toLocaleString($i18n.locale) }}</i
|
||||||
|
>
|
||||||
|
<i v-if="storageEntry.updatedAt">
|
||||||
|
• {{ $t('storage.updated-at') }}
|
||||||
|
{{ new Date(storageEntry.updatedAt).toLocaleString($i18n.locale) }}</i
|
||||||
|
>
|
||||||
|
|
||||||
|
<div style="margin-top: 0.5em">
|
||||||
|
<i>{{ $t('storage.stock-title') }} </i>
|
||||||
|
{{ shortenStockString(storageEntry.stockString) }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li v-if="Object.keys(storageStockDataList).length == 0" class="storage-no-entries">
|
||||||
|
{{ $t('storage.no-entires') }}
|
||||||
|
</li>
|
||||||
|
</transition-group>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<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';
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
components: {
|
||||||
|
ChevronDownIcon,
|
||||||
|
ChevronUpIcon,
|
||||||
|
FolderArrowDownIcon,
|
||||||
|
TrashIcon,
|
||||||
|
ArrowRightEndOnRectangleIcon,
|
||||||
|
},
|
||||||
|
|
||||||
|
mixins: [stockMixin],
|
||||||
|
|
||||||
|
data: () => ({
|
||||||
|
store: useStore(),
|
||||||
|
expandedEntries: [] as string[],
|
||||||
|
}),
|
||||||
|
|
||||||
|
computed: {
|
||||||
|
storageStockDataList() {
|
||||||
|
return Object.values(this.store.storageStockData)
|
||||||
|
.sort((a, b) => (b.updatedAt ?? b.createdAt) - (a.updatedAt ?? a.createdAt))
|
||||||
|
.map((data) => ({
|
||||||
|
...data,
|
||||||
|
isExpanded: false,
|
||||||
|
}));
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
shortenStockString(stockString: string) {
|
||||||
|
return Array.from(
|
||||||
|
stockString.split(';').reduce(
|
||||||
|
(acc, s) => {
|
||||||
|
const stockName = s.split(/:|,/)[0];
|
||||||
|
acc.set(stockName, (acc.get(stockName) ?? 0) + 1);
|
||||||
|
|
||||||
|
return acc;
|
||||||
|
},
|
||||||
|
new Map() as Map<string, number>
|
||||||
|
)
|
||||||
|
).map(([stockName, count]) => `${count}x ${stockName.replace(/_/g, ' ')}`).join(', ');
|
||||||
|
},
|
||||||
|
removeStockIndexFromStorage(stockName: string) {
|
||||||
|
let removeConfirm = confirm(this.$t('storage.remove-confirm'));
|
||||||
|
|
||||||
|
if (!removeConfirm) return;
|
||||||
|
|
||||||
|
delete this.store.storageStockData[stockName];
|
||||||
|
this.store.chosenStorageStockName = '';
|
||||||
|
this.store.chosenStorageStockString = '';
|
||||||
|
|
||||||
|
try {
|
||||||
|
localStorage.setItem('savedStockData', JSON.stringify(this.store.storageStockData));
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Wystąpił błąd podczas usuwania składu z localStorage!', error);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
chooseStorageStock(stockName: string) {
|
||||||
|
try {
|
||||||
|
this.loadStockFromString(this.store.storageStockData[stockName].stockString);
|
||||||
|
this.store.chosenStorageStockName = stockName;
|
||||||
|
this.store.chosenStorageStockString = this.store.storageStockData[stockName].stockString;
|
||||||
|
|
||||||
|
this.$router.push('/');
|
||||||
|
} catch (error) {
|
||||||
|
console.log(error);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
toggleStorageEntryExpand(stockName: string) {
|
||||||
|
const stockIndex = this.expandedEntries.indexOf(stockName);
|
||||||
|
|
||||||
|
if (stockIndex == -1) this.expandedEntries.push(stockName);
|
||||||
|
else this.expandedEntries.splice(stockIndex, 1);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@use '@/styles/tab';
|
||||||
|
|
||||||
|
.tab_actions {
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
}
|
||||||
|
|
||||||
|
.storage-list-wrapper {
|
||||||
|
position: relative;
|
||||||
|
height: 730px;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.storage-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.5em;
|
||||||
|
margin-top: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.storage-list > li {
|
||||||
|
padding: 0.5em;
|
||||||
|
background-color: global.$secondaryColor;
|
||||||
|
|
||||||
|
&[data-current='true'] {
|
||||||
|
background-color: #3b3b3b;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.storage-item-top {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.storage-item-top > h3 {
|
||||||
|
font-size: 1.2em;
|
||||||
|
width: 100%;
|
||||||
|
text-align: left;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.storage-item-top-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.5em;
|
||||||
|
|
||||||
|
& > button {
|
||||||
|
background-color: #333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.storage-item-expandable {
|
||||||
|
margin-top: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.storage-no-entries {
|
||||||
|
padding: 1em;
|
||||||
|
font-size: 1.15em;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.storage-list-anim {
|
||||||
|
&-move,
|
||||||
|
&-enter-active,
|
||||||
|
&-leave-active {
|
||||||
|
transition: all 120ms ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-enter-from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(-25px);
|
||||||
|
}
|
||||||
|
|
||||||
|
&-leave-to {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-leave-active {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -1,9 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<section class="wiki-list tab">
|
<section class="wiki-list tab">
|
||||||
<div class="tab_header">
|
|
||||||
<h2>{{ $t('wiki.title') }}</h2>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="tab_content">
|
<div class="tab_content">
|
||||||
<div class="actions">
|
<div class="actions">
|
||||||
<div class="action action-input">
|
<div class="action action-input">
|
||||||
@@ -248,7 +244,7 @@ export default defineComponent({
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import '../../styles/tab.scss';
|
@use '@/styles/tab';
|
||||||
|
|
||||||
.actions {
|
.actions {
|
||||||
display: grid;
|
display: grid;
|
||||||
@@ -322,7 +318,7 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
|
|
||||||
.sponsor-only {
|
.sponsor-only {
|
||||||
color: $sponsorColor;
|
color: global.$sponsorColor;
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
content: '*';
|
content: '*';
|
||||||
@@ -330,7 +326,7 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
|
|
||||||
.team-only {
|
.team-only {
|
||||||
color: $teamColor;
|
color: global.$teamColor;
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
content: '*';
|
content: '*';
|
||||||
@@ -347,7 +343,7 @@ export default defineComponent({
|
|||||||
background-color: #161c2e;
|
background-color: #161c2e;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: $breakpointSm) {
|
@media screen and (max-width: global.$breakpointSm) {
|
||||||
.actions-panel {
|
.actions-panel {
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|||||||
@@ -0,0 +1,344 @@
|
|||||||
|
<template>
|
||||||
|
<div class="stock_actions">
|
||||||
|
<div class="actions-top">
|
||||||
|
<button
|
||||||
|
class="btn btn--image"
|
||||||
|
@click="clickFileInput"
|
||||||
|
:data-button-tooltip="$t('stocklist.action-upload-file')"
|
||||||
|
>
|
||||||
|
<input type="file" @change="uploadStockFromFile" ref="conFile" accept=".con,.txt" />
|
||||||
|
<FolderPlusIcon />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
class="btn btn--image"
|
||||||
|
@click="uploadStockFromClipboard"
|
||||||
|
:data-button-tooltip="$t('stocklist.action-upload-clipboard')"
|
||||||
|
>
|
||||||
|
<ClipboardDocumentCheckIcon />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
class="btn btn--image"
|
||||||
|
:data-disabled="stockIsEmpty"
|
||||||
|
:disabled="stockIsEmpty"
|
||||||
|
@click="downloadStock"
|
||||||
|
:data-button-tooltip="$t('stocklist.action-download')"
|
||||||
|
>
|
||||||
|
<ArrowDownTrayIcon />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
class="btn btn--image"
|
||||||
|
:data-disabled="stockIsEmpty"
|
||||||
|
:disabled="stockIsEmpty"
|
||||||
|
@click="copyToClipboard"
|
||||||
|
:data-button-tooltip="$t('stocklist.action-copy')"
|
||||||
|
>
|
||||||
|
<DocumentDuplicateIcon />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
class="btn btn--image"
|
||||||
|
:data-disabled="stockIsEmpty"
|
||||||
|
:disabled="stockIsEmpty"
|
||||||
|
@click="saveStockDataToStorage"
|
||||||
|
:data-button-tooltip="$t('stocklist.action-bookmark')"
|
||||||
|
>
|
||||||
|
<BookmarkIcon />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
class="btn btn--image"
|
||||||
|
:data-disabled="stockIsEmpty"
|
||||||
|
:disabled="stockIsEmpty"
|
||||||
|
@click="resetStock"
|
||||||
|
:data-button-tooltip="$t('stocklist.action-reset')"
|
||||||
|
>
|
||||||
|
<ArrowUturnLeftIcon />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
class="btn btn--image"
|
||||||
|
:data-disabled="stockIsEmpty"
|
||||||
|
:disabled="stockIsEmpty"
|
||||||
|
@click="shuffleCars"
|
||||||
|
:data-button-tooltip="$t('stocklist.action-shuffle')"
|
||||||
|
>
|
||||||
|
<ArrowPathIcon />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="actions-bottom" :data-disabled="store.chosenStockListIndex == -1">
|
||||||
|
<button
|
||||||
|
class="btn btn--image"
|
||||||
|
:tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
|
||||||
|
@click="stockListUtils.moveUpStock(store.chosenStockListIndex)"
|
||||||
|
>
|
||||||
|
<ChevronUpIcon />
|
||||||
|
{{ $t('stocklist.action-move-up') }}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
class="btn btn--image"
|
||||||
|
:tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
|
||||||
|
@click="stockListUtils.moveDownStock(store.chosenStockListIndex)"
|
||||||
|
>
|
||||||
|
<ChevronDownIcon />
|
||||||
|
{{ $t('stocklist.action-move-down') }}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
class="btn btn--image"
|
||||||
|
:tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
|
||||||
|
@click="stockListUtils.removeStock(store.chosenStockListIndex)"
|
||||||
|
>
|
||||||
|
<TrashIcon />
|
||||||
|
{{ $t('stocklist.action-remove') }}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent } from 'vue';
|
||||||
|
import { useStore } from '../../../store';
|
||||||
|
|
||||||
|
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';
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
mixins: [stockMixin],
|
||||||
|
|
||||||
|
components: {
|
||||||
|
ArrowDownTrayIcon,
|
||||||
|
ArrowPathIcon,
|
||||||
|
ArrowUturnLeftIcon,
|
||||||
|
BookmarkIcon,
|
||||||
|
ChevronDownIcon,
|
||||||
|
ChevronUpIcon,
|
||||||
|
ClipboardDocumentCheckIcon,
|
||||||
|
DocumentDuplicateIcon,
|
||||||
|
FolderPlusIcon,
|
||||||
|
TrashIcon,
|
||||||
|
},
|
||||||
|
|
||||||
|
data: () => ({
|
||||||
|
store: useStore(),
|
||||||
|
}),
|
||||||
|
|
||||||
|
setup() {
|
||||||
|
const fileUtils = useFileUtils();
|
||||||
|
const stockListUtils = useStockListUtils();
|
||||||
|
|
||||||
|
return {
|
||||||
|
fileUtils,
|
||||||
|
stockListUtils,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {
|
||||||
|
stockIsEmpty() {
|
||||||
|
return this.store.stockList.length == 0;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
copyToClipboard() {
|
||||||
|
navigator.clipboard.writeText(this.store.stockString);
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
alert(this.$t('stocklist.alert-copied'));
|
||||||
|
}, 20);
|
||||||
|
},
|
||||||
|
|
||||||
|
clickFileInput() {
|
||||||
|
(this.$refs['conFile'] as HTMLInputElement).click();
|
||||||
|
},
|
||||||
|
|
||||||
|
resetStock() {
|
||||||
|
this.store.stockList.length = 0;
|
||||||
|
this.store.chosenStockListIndex = -1;
|
||||||
|
},
|
||||||
|
|
||||||
|
shuffleCars() {
|
||||||
|
const availableIndexes = this.store.stockList.reduce((acc, stock, i) => {
|
||||||
|
if (!isTractionUnit(stock.vehicleRef)) acc.push(i);
|
||||||
|
|
||||||
|
return acc;
|
||||||
|
}, [] as number[]);
|
||||||
|
|
||||||
|
for (let i = 0; i < this.store.stockList.length; i++) {
|
||||||
|
if (!availableIndexes.includes(i)) continue;
|
||||||
|
|
||||||
|
availableIndexes.splice(i, -1);
|
||||||
|
|
||||||
|
const randAvailableIndex =
|
||||||
|
availableIndexes[Math.floor(Math.random() * availableIndexes.length)];
|
||||||
|
const tempSwap = this.store.stockList[randAvailableIndex];
|
||||||
|
|
||||||
|
this.store.stockList[randAvailableIndex] = this.store.stockList[i];
|
||||||
|
this.store.stockList[i] = tempSwap;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
downloadStock() {
|
||||||
|
if (this.store.stockList.length == 0) return alert(this.$t('stocklist.alert-empty'));
|
||||||
|
|
||||||
|
const defaultName = this.fileUtils.getCurrentStockFileName();
|
||||||
|
const fileName = prompt(this.$t('stocklist.prompt-file'), defaultName);
|
||||||
|
|
||||||
|
if (!fileName) return;
|
||||||
|
|
||||||
|
const blob = new Blob([this.store.stockString]);
|
||||||
|
const file = fileName + '.con';
|
||||||
|
|
||||||
|
var e = document.createEvent('MouseEvents'),
|
||||||
|
a = document.createElement('a');
|
||||||
|
a.download = file;
|
||||||
|
a.href = window.URL.createObjectURL(blob);
|
||||||
|
a.dataset.downloadurl = ['', a.download, a.href].join(':');
|
||||||
|
e.initEvent('click', true, false);
|
||||||
|
a.dispatchEvent(e);
|
||||||
|
},
|
||||||
|
|
||||||
|
uploadStockFromFile() {
|
||||||
|
const inputEl = this.$refs['conFile'] as HTMLInputElement;
|
||||||
|
const files = inputEl.files;
|
||||||
|
|
||||||
|
if (files?.length != 1) return;
|
||||||
|
if (!/\.con$/.test(files[0].name)) return;
|
||||||
|
|
||||||
|
const reader = new FileReader();
|
||||||
|
reader.readAsText(files[0]);
|
||||||
|
|
||||||
|
reader.onload = (res) => {
|
||||||
|
const stockString = res.target?.result;
|
||||||
|
|
||||||
|
if (!stockString || typeof stockString !== 'string') return;
|
||||||
|
|
||||||
|
this.loadStockFromString(stockString);
|
||||||
|
};
|
||||||
|
|
||||||
|
reader.onerror = (err) => console.error(err);
|
||||||
|
|
||||||
|
inputEl.value = '';
|
||||||
|
},
|
||||||
|
|
||||||
|
saveStockDataToStorage() {
|
||||||
|
if (this.store.stockList.length == 0) return;
|
||||||
|
|
||||||
|
const defaultName = this.fileUtils.getCurrentStockFileName();
|
||||||
|
const entryName = prompt(this.$t('stocklist.prompt-bookmark'), defaultName);
|
||||||
|
|
||||||
|
if (!entryName) return;
|
||||||
|
|
||||||
|
if (entryName in this.store.storageStockData) {
|
||||||
|
const overwriteDataConfirm = confirm(this.$t('stocklist.prompt-bookmark-overwrite'));
|
||||||
|
|
||||||
|
if (!overwriteDataConfirm) return;
|
||||||
|
|
||||||
|
this.store.storageStockData[entryName]['updatedAt'] = Date.now();
|
||||||
|
this.store.storageStockData[entryName]['stockString'] = this.store.stockString;
|
||||||
|
} else {
|
||||||
|
this.store.storageStockData[entryName] = {
|
||||||
|
id: entryName,
|
||||||
|
createdAt: Date.now(),
|
||||||
|
stockString: this.store.stockString,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
localStorage.setItem('savedStockData', JSON.stringify(this.store.storageStockData));
|
||||||
|
this.store.chosenStorageStockName = entryName;
|
||||||
|
this.store.chosenStorageStockString = this.store.stockString;
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Wystąpił błąd podczas zapisywania składu do localStorage!', error);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async uploadStockFromClipboard() {
|
||||||
|
try {
|
||||||
|
const content = await navigator.clipboard.readText();
|
||||||
|
this.loadStockFromString(content);
|
||||||
|
} catch (error) {
|
||||||
|
switch (error) {
|
||||||
|
case 'stock-loading-error':
|
||||||
|
alert(this.$t('stocklist.stock-loading-error'));
|
||||||
|
break;
|
||||||
|
|
||||||
|
default:
|
||||||
|
alert(this.$t('stocklist.stock-clipboard-error'));
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.stock_actions {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions-bottom {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
gap: 0.5em;
|
||||||
|
|
||||||
|
padding: 0.5em;
|
||||||
|
|
||||||
|
background-color: #353a57;
|
||||||
|
|
||||||
|
&[data-disabled='true'] {
|
||||||
|
opacity: 0.8;
|
||||||
|
|
||||||
|
user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions-top {
|
||||||
|
display: grid;
|
||||||
|
gap: 0.5em;
|
||||||
|
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
|
||||||
|
|
||||||
|
button {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
&[data-button-tooltip] {
|
||||||
|
font-size: 0.85em;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
opacity: 0;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,261 @@
|
|||||||
|
<template>
|
||||||
|
<div class="list-wrapper">
|
||||||
|
<StockThumbnails :onListItemClick="onListItemClick" />
|
||||||
|
|
||||||
|
<div v-if="stockIsEmpty" class="list-empty">
|
||||||
|
<div class="stock-info">{{ $t('stocklist.list-empty') }}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ul v-else>
|
||||||
|
<transition-group name="stock-list-anim">
|
||||||
|
<li
|
||||||
|
v-for="(stock, i) in store.stockList"
|
||||||
|
:key="stock.id"
|
||||||
|
:class="{ loco: isTractionUnit(stock.vehicleRef) }"
|
||||||
|
tabindex="0"
|
||||||
|
@click="onListItemClick(i)"
|
||||||
|
@keydown.enter="onListItemClick(i)"
|
||||||
|
@keydown.w="stockListUtils.moveUpStock(i)"
|
||||||
|
@keydown.s="stockListUtils.moveDownStock(i)"
|
||||||
|
@keydown.backspace="stockListUtils.removeStock(i)"
|
||||||
|
ref="itemRefs"
|
||||||
|
>
|
||||||
|
<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 }}.
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<span
|
||||||
|
class="stock-info-type"
|
||||||
|
: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)
|
||||||
|
}}
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<span class="stock-info-cargo" v-if="stock.cargo">
|
||||||
|
{{ stock.cargo.id }}
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<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-speed">{{ stock.vehicleRef.maxSpeed }}km/h</span>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</transition-group>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent } from 'vue';
|
||||||
|
import { useStore } from '../../../store';
|
||||||
|
import { isTractionUnit } from '../../../utils/vehicleUtils';
|
||||||
|
import { useStockListUtils } from '../../../utils/stockListUtils';
|
||||||
|
import stockPreviewMixin from '../../../mixins/stockPreviewMixin';
|
||||||
|
import StockThumbnails from './StockThumbnails.vue';
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
mixins: [stockPreviewMixin],
|
||||||
|
components: { StockThumbnails },
|
||||||
|
|
||||||
|
setup() {
|
||||||
|
const stockListUtils = useStockListUtils();
|
||||||
|
|
||||||
|
return { stockListUtils };
|
||||||
|
},
|
||||||
|
|
||||||
|
data: () => ({
|
||||||
|
store: useStore(),
|
||||||
|
draggedVehicleID: -1,
|
||||||
|
}),
|
||||||
|
|
||||||
|
computed: {
|
||||||
|
stockIsEmpty() {
|
||||||
|
return this.store.stockList.length == 0;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
isTractionUnit,
|
||||||
|
|
||||||
|
onDragStart(vehicleIndex: number) {
|
||||||
|
this.draggedVehicleID = vehicleIndex;
|
||||||
|
},
|
||||||
|
|
||||||
|
onDrop(e: DragEvent, vehicleIndex: number) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
let targetEl = (this.$refs['itemRefs'] as Element[])[vehicleIndex];
|
||||||
|
|
||||||
|
if (!targetEl) return;
|
||||||
|
|
||||||
|
const tempVehicle = this.store.stockList[vehicleIndex];
|
||||||
|
|
||||||
|
this.store.stockList[vehicleIndex] = this.store.stockList[this.draggedVehicleID];
|
||||||
|
this.store.stockList[this.draggedVehicleID] = tempVehicle;
|
||||||
|
|
||||||
|
this.store.chosenStockListIndex = vehicleIndex;
|
||||||
|
},
|
||||||
|
|
||||||
|
allowDrop(e: DragEvent) {
|
||||||
|
e.preventDefault();
|
||||||
|
},
|
||||||
|
|
||||||
|
onListItemClick(stockID: number) {
|
||||||
|
const stock = this.store.stockList[stockID];
|
||||||
|
|
||||||
|
this.store.chosenStockListIndex =
|
||||||
|
this.store.chosenStockListIndex == stockID &&
|
||||||
|
this.store.chosenVehicle?.type == stock.vehicleRef.type
|
||||||
|
? -1
|
||||||
|
: stockID;
|
||||||
|
|
||||||
|
if (this.store.chosenStockListIndex == -1) {
|
||||||
|
this.store.chosenVehicle = null;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.store.swapVehicles) this.store.swapVehicles = false;
|
||||||
|
|
||||||
|
this.previewStock(stock);
|
||||||
|
},
|
||||||
|
|
||||||
|
getCarSpecFromType(typeStr: string) {
|
||||||
|
const specArray = typeStr.split('_');
|
||||||
|
|
||||||
|
if (specArray.length == 0) return null;
|
||||||
|
|
||||||
|
/* 111a_Grafitti_1 */
|
||||||
|
if (specArray.length == 3) return `${specArray[0]} ${specArray[1]}-${specArray[2]}`;
|
||||||
|
|
||||||
|
/* 111a_PKP_Bnouz_01 */
|
||||||
|
return `${specArray[0]} ${specArray[2]}-${specArray[3]} (${specArray[1]})`;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.list-wrapper {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-empty {
|
||||||
|
background-color: global.$secondaryColor;
|
||||||
|
border-radius: 0.5em;
|
||||||
|
padding: 0.75em;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
overflow-y: scroll;
|
||||||
|
height: 500px;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul > li {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
min-width: 500px;
|
||||||
|
|
||||||
|
margin: 0.25em 0;
|
||||||
|
|
||||||
|
outline: none;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:focus-visible {
|
||||||
|
outline: 1px solid white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
li > .stock-info {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.25em;
|
||||||
|
|
||||||
|
color: white;
|
||||||
|
font-weight: 700;
|
||||||
|
|
||||||
|
transition: color 100ms;
|
||||||
|
|
||||||
|
& > span {
|
||||||
|
padding: 0.5em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.stock-info-no,
|
||||||
|
.stock-info-type {
|
||||||
|
background-color: global.$secondaryColor;
|
||||||
|
|
||||||
|
&[data-team-only='true'] {
|
||||||
|
color: global.$teamColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
&[data-sponsor-only='true'] {
|
||||||
|
color: global.$sponsorColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.stock-info-no {
|
||||||
|
min-width: 3.5em;
|
||||||
|
text-align: right;
|
||||||
|
|
||||||
|
&[data-selected='true'] {
|
||||||
|
color: global.$accentColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.stock-info-cargo {
|
||||||
|
background-color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stock-info-length,
|
||||||
|
.stock-info-mass,
|
||||||
|
.stock-info-speed {
|
||||||
|
background-color: #555;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stock-list-anim {
|
||||||
|
&-move, /* apply transition to moving elements */
|
||||||
|
&-enter-active,
|
||||||
|
&-leave-active {
|
||||||
|
transition: all 250ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-enter-from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(-25px);
|
||||||
|
}
|
||||||
|
|
||||||
|
&-leave-to {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-leave-active {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: global.$breakpointMd) {
|
||||||
|
ul {
|
||||||
|
min-height: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,32 @@
|
|||||||
|
<template>
|
||||||
|
<div class="stock_spawn-settings">
|
||||||
|
<Checkbox :disabled="!store.stockSupportsColdStart" v-model="store.isColdStart">
|
||||||
|
{{ $t('stocklist.coldstart-info') }}
|
||||||
|
</Checkbox>
|
||||||
|
|
||||||
|
<Checkbox :disabled="!store.stockSupportsDoubleManning" v-model="store.isDoubleManned">
|
||||||
|
{{ $t('stocklist.doublemanning-info') }}
|
||||||
|
</Checkbox>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent } from 'vue';
|
||||||
|
import { useStore } from '../../../store';
|
||||||
|
import Checkbox from '../../common/Checkbox.vue';
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
components: { Checkbox },
|
||||||
|
|
||||||
|
data: () => ({
|
||||||
|
store: useStore(),
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.stock_spawn-settings {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.5em;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,72 @@
|
|||||||
|
<template>
|
||||||
|
<div class="stock_specs">
|
||||||
|
<div v-if="store.chosenStorageStockName || chosenRealComposition">
|
||||||
|
<b class="bookmarked-stock-info" v-if="store.chosenStorageStockName">
|
||||||
|
<span
|
||||||
|
class="text--accent"
|
||||||
|
:title="store.chosenStorageStockName.length > 41 ? store.chosenStorageStockName : ''"
|
||||||
|
>
|
||||||
|
<BookmarkIcon />
|
||||||
|
{{ 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" />
|
||||||
|
{{ chosenRealComposition.number }} {{ chosenRealComposition.name }}
|
||||||
|
</span>
|
||||||
|
</b>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<span>
|
||||||
|
{{ $t('stocklist.mass') }}
|
||||||
|
<span class="text--accent">{{ (store.totalWeight / 1000).toFixed(1) }}t</span>
|
||||||
|
({{ $t('stocklist.mass-accepted') }}:
|
||||||
|
<span class="text--accent">{{
|
||||||
|
store.acceptableWeight ? `${~~(store.acceptableWeight / 1000)}t` : '-'
|
||||||
|
}}</span
|
||||||
|
>) - {{ $t('stocklist.length') }}:
|
||||||
|
<span class="text--accent">{{ store.totalLength }}m</span>
|
||||||
|
- {{ $t('stocklist.vmax') }}
|
||||||
|
<span tabindex="0" :data-tooltip="$t('stocklist.disclaimer')">(?)</span>:
|
||||||
|
<span class="text--accent">{{ store.maxStockSpeed }} km/h</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent } from 'vue';
|
||||||
|
import { useStore } from '../../../store';
|
||||||
|
import imageMixin from '../../../mixins/imageMixin';
|
||||||
|
import { BookmarkIcon } from '@heroicons/vue/20/solid';
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
components: { BookmarkIcon },
|
||||||
|
|
||||||
|
mixins: [imageMixin],
|
||||||
|
|
||||||
|
data: () => ({
|
||||||
|
store: useStore(),
|
||||||
|
}),
|
||||||
|
|
||||||
|
computed: {
|
||||||
|
chosenRealComposition() {
|
||||||
|
const currentStockString = this.store.stockList.map((s) => s.vehicleRef.type).join(';');
|
||||||
|
|
||||||
|
return this.store.realCompositionList.find((rc) => rc.stockString == currentStockString);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.bookmarked-stock-info,
|
||||||
|
.real-stock-info {
|
||||||
|
svg,
|
||||||
|
img {
|
||||||
|
height: 1.3ch;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
+3
-5
@@ -46,7 +46,7 @@
|
|||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { Ref, computed, nextTick, ref, watch } from 'vue';
|
import { Ref, computed, nextTick, ref, watch } from 'vue';
|
||||||
import { useStore } from '../../store';
|
import { useStore } from '../../../store';
|
||||||
|
|
||||||
const store = useStore();
|
const store = useStore();
|
||||||
const emit = defineEmits(['listItemClick']);
|
const emit = defineEmits(['listItemClick']);
|
||||||
@@ -173,8 +173,6 @@ const getVehicleThumbnails = (vehicleString: string) => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import '../../styles/global.scss';
|
|
||||||
|
|
||||||
.stock-thumbnails {
|
.stock-thumbnails {
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
background-color: #353a57;
|
background-color: #353a57;
|
||||||
@@ -201,11 +199,11 @@ ul {
|
|||||||
}
|
}
|
||||||
|
|
||||||
&[data-sponsor-only='true'] > b {
|
&[data-sponsor-only='true'] > b {
|
||||||
color: $sponsorColor;
|
color: global.$sponsorColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
&[data-team-only='true'] > b {
|
&[data-team-only='true'] > b {
|
||||||
color: $teamColor;
|
color: global.$teamColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
@@ -0,0 +1,102 @@
|
|||||||
|
<template>
|
||||||
|
<div class="stock_warnings" v-if="hasAnyWarnings">
|
||||||
|
<div class="warning" v-if="locoNotSuitable">(!) {{ $t('stocklist.warning-not-suitable') }}</div>
|
||||||
|
|
||||||
|
<div class="warning" v-if="lengthExceeded && store.isTrainPassenger">
|
||||||
|
(!) {{ $t('stocklist.warning-passenger-too-long') }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="warning" v-if="lengthExceeded && !store.isTrainPassenger">
|
||||||
|
(!) {{ $t('stocklist.warning-freight-too-long') }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="warning" v-if="teamOnlyVehicles.length > 0">
|
||||||
|
(!)
|
||||||
|
{{
|
||||||
|
$t('stocklist.warning-team-only-vehicle', [
|
||||||
|
teamOnlyVehicles.map((v) => v.vehicleRef.type).join(', '),
|
||||||
|
])
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="warning" v-if="weightExceeded">
|
||||||
|
(!)
|
||||||
|
<i18n-t keypath="stocklist.warning-too-heavy">
|
||||||
|
<template #href>
|
||||||
|
<a
|
||||||
|
target="_blank"
|
||||||
|
href="https://docs.google.com/spreadsheets/d/1BvTU-U7huIaEheov22TrhTtROUM4MwVfdbq03GVAEM8"
|
||||||
|
>
|
||||||
|
{{ $t('stocklist.acceptable-mass-docs') }}
|
||||||
|
</a>
|
||||||
|
</template>
|
||||||
|
</i18n-t>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- <div class="warning" v-if="locoCountExceeded">
|
||||||
|
{{ $t('stocklist.warning-too-many-locos') }}
|
||||||
|
</div> -->
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent } from 'vue';
|
||||||
|
import { useStore } from '../../../store';
|
||||||
|
import { isTractionUnit } from '../../../utils/vehicleUtils';
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
data: () => ({
|
||||||
|
store: useStore(),
|
||||||
|
}),
|
||||||
|
|
||||||
|
computed: {
|
||||||
|
teamOnlyVehicles() {
|
||||||
|
return this.store.stockList.filter((stock) => stock.vehicleRef.teamOnly);
|
||||||
|
},
|
||||||
|
|
||||||
|
hasAnyWarnings() {
|
||||||
|
return (
|
||||||
|
this.weightExceeded || this.lengthExceeded || this.locoNotSuitable || this.teamOnlyVehicles
|
||||||
|
);
|
||||||
|
},
|
||||||
|
|
||||||
|
lengthExceeded() {
|
||||||
|
return (
|
||||||
|
(this.store.totalLength > 350 && this.store.isTrainPassenger) ||
|
||||||
|
(this.store.totalLength > 650 && !this.store.isTrainPassenger)
|
||||||
|
);
|
||||||
|
},
|
||||||
|
|
||||||
|
weightExceeded() {
|
||||||
|
return this.store.acceptableWeight && this.store.totalWeight > this.store.acceptableWeight;
|
||||||
|
},
|
||||||
|
|
||||||
|
locoNotSuitable() {
|
||||||
|
return (
|
||||||
|
!this.store.isTrainPassenger &&
|
||||||
|
this.store.stockList.length > 1 &&
|
||||||
|
!this.store.stockList.every((stock) => isTractionUnit(stock.vehicleRef)) &&
|
||||||
|
this.store.stockList.some(
|
||||||
|
(stock) => isTractionUnit(stock.vehicleRef) && stock.vehicleRef.type.startsWith('EP')
|
||||||
|
)
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.warning {
|
||||||
|
padding: 0.25em;
|
||||||
|
margin: 0.25em 0;
|
||||||
|
background: global.$accentColor;
|
||||||
|
color: black;
|
||||||
|
|
||||||
|
font-weight: bold;
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: black;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
+25
-16
@@ -12,7 +12,9 @@
|
|||||||
"title": "CHOOSE A VEHICLE",
|
"title": "CHOOSE A VEHICLE",
|
||||||
"input-vehicle": "Choose a traction unit",
|
"input-vehicle": "Choose a traction unit",
|
||||||
"input-carwagon": "Choose a carriage",
|
"input-carwagon": "Choose a carriage",
|
||||||
"cargo-title": "Cargo (only selected freight cars)",
|
"vehicles-title": "Traction units",
|
||||||
|
"carwagons-title": "Car wagons",
|
||||||
|
"cargo-title": "Available cargo",
|
||||||
"no-cargo-available": "no cargo available",
|
"no-cargo-available": "no cargo available",
|
||||||
"cargo-empty": "empty",
|
"cargo-empty": "empty",
|
||||||
"loco-electric": "ELECTR.",
|
"loco-electric": "ELECTR.",
|
||||||
@@ -44,7 +46,8 @@
|
|||||||
"stock": "STOCK",
|
"stock": "STOCK",
|
||||||
"wiki": "VEHICLES",
|
"wiki": "VEHICLES",
|
||||||
"numgen": "NUMBER GEN.",
|
"numgen": "NUMBER GEN.",
|
||||||
"stockgen": "STOCK GEN."
|
"stockgen": "STOCK GEN.",
|
||||||
|
"storage": "SAVED STOCKS"
|
||||||
},
|
},
|
||||||
"stocklist": {
|
"stocklist": {
|
||||||
"title": "STOCK EDITOR",
|
"title": "STOCK EDITOR",
|
||||||
@@ -52,16 +55,20 @@
|
|||||||
"alert-copied": "The rolling stock has been copied to your clipboard!",
|
"alert-copied": "The rolling stock has been copied to your clipboard!",
|
||||||
"alert-empty": "Lista pojazdów jest pusta!",
|
"alert-empty": "Lista pojazdów jest pusta!",
|
||||||
"prompt-file": "Name a file and download it to the Presets folder (Documents/TTSK/TrainDriver2):",
|
"prompt-file": "Name a file and download it to the Presets folder (Documents/TTSK/TrainDriver2):",
|
||||||
|
"prompt-bookmark": "Enter the name of this composition:",
|
||||||
|
"prompt-bookmark-overwrite": "A composition with this name is already bookmarked! Do you want to overwrite it?",
|
||||||
"vehicle-no": "VEHICLE NO.",
|
"vehicle-no": "VEHICLE NO.",
|
||||||
"no-vehicle-chosen": "NO VEHICLE CHOSEN",
|
"no-vehicle-chosen": "NO VEHICLE CHOSEN",
|
||||||
"action-move-up": "MOVE UP",
|
"action-move-up": "MOVE UP",
|
||||||
"action-move-down": "MOVE DOWN",
|
"action-move-down": "MOVE DOWN",
|
||||||
"action-remove": "REMOVE",
|
"action-remove": "REMOVE",
|
||||||
"action-upload": "LOAD",
|
"action-upload-file": "LOAD FILE",
|
||||||
"action-download": "DOWNLOAD",
|
"action-upload-clipboard": "LOAD CLIPBOARD",
|
||||||
"action-copy": "COPY",
|
"action-download": "DOWNLOAD TO FILE",
|
||||||
|
"action-copy": "COPY TO CLIPBOARD",
|
||||||
"action-reset": "RESET",
|
"action-reset": "RESET",
|
||||||
"action-shuffle": "SHUFFLE",
|
"action-shuffle": "SHUFFLE",
|
||||||
|
"action-bookmark": "BOOKMARK",
|
||||||
"mass": "Mass",
|
"mass": "Mass",
|
||||||
"mass-accepted": "accepted",
|
"mass-accepted": "accepted",
|
||||||
"length": "Length",
|
"length": "Length",
|
||||||
@@ -69,14 +76,15 @@
|
|||||||
"coldstart-info": "Locomotive cold start",
|
"coldstart-info": "Locomotive cold start",
|
||||||
"doublemanning-info": "Double manning",
|
"doublemanning-info": "Double manning",
|
||||||
"list-empty": "Stock list is empty!",
|
"list-empty": "Stock list is empty!",
|
||||||
|
|
||||||
"warning-not-suitable": "EP series locomotives are designed for passenger traffic only!",
|
"warning-not-suitable": "EP series locomotives are designed for passenger traffic only!",
|
||||||
"warning-passenger-too-long": "Maximum length of a passenger train may not be greater than 350m!",
|
"warning-passenger-too-long": "Maximum length of a passenger train may not be greater than 350m!",
|
||||||
"warning-freight-too-long": "Maximum length of a freight train may not be greater than 650m!",
|
"warning-freight-too-long": "Maximum length of a freight train may not be greater than 650m!",
|
||||||
"warning-too-many-locos": "This train has too many traction units!",
|
"warning-too-many-locos": "This train has too many traction units!",
|
||||||
"warning-too-heavy": "This train is too heavy! Check {href}",
|
"warning-too-heavy": "This train is too heavy! Check {href}",
|
||||||
"warning-team-only-vehicle": "There's at least one vehicle available only for TD2 team members in your stock composition! ({0})",
|
"warning-team-only-vehicle": "There's at least one vehicle available only for TD2 team members in your stock composition! ({0})",
|
||||||
"acceptable-mass-docs": "acceptable rolling stock masses (PL)"
|
"acceptable-mass-docs": "acceptable rolling stock masses (PL)",
|
||||||
|
"stock-loading-error": "An error occurred: cannot parse data from the file - make sure it's in a proper format!",
|
||||||
|
"stock-clipboard-error": "An error occurred: cannot read data from the clipboard - make sure the site has been granted right permissions for this action!"
|
||||||
},
|
},
|
||||||
"stockgen": {
|
"stockgen": {
|
||||||
"title": "FREIGHT TRAIN GENERATOR",
|
"title": "FREIGHT TRAIN GENERATOR",
|
||||||
@@ -108,7 +116,6 @@
|
|||||||
"action-random-region": "DRAW REGIONS",
|
"action-random-region": "DRAW REGIONS",
|
||||||
"action-random-number": "DRAW LAST DIGITS",
|
"action-random-number": "DRAW LAST DIGITS",
|
||||||
"action-random-category": "DRAW A CATEGORY",
|
"action-random-category": "DRAW A CATEGORY",
|
||||||
|
|
||||||
"rules": {
|
"rules": {
|
||||||
"first-digit": "First digit:",
|
"first-digit": "First digit:",
|
||||||
"second-digit": "Second digit:",
|
"second-digit": "Second digit:",
|
||||||
@@ -123,25 +130,20 @@
|
|||||||
"for-region-end": "for the terminating construction region",
|
"for-region-end": "for the terminating construction region",
|
||||||
"from-range": "from range of"
|
"from-range": "from range of"
|
||||||
},
|
},
|
||||||
|
|
||||||
"categories": {
|
"categories": {
|
||||||
"EI": "EI - domestic express",
|
"EI": "EI - domestic express",
|
||||||
"EC": "EC - international express",
|
"EC": "EC - international express",
|
||||||
"EN": "EN - domestic night express",
|
"EN": "EN - domestic night express",
|
||||||
|
|
||||||
"MP": "MP - intervoivodeship bullet",
|
"MP": "MP - intervoivodeship bullet",
|
||||||
"MO": "MO - intervoivodeship regio",
|
"MO": "MO - intervoivodeship regio",
|
||||||
"MM": "MM - international bullet",
|
"MM": "MM - international bullet",
|
||||||
"MH": "MH - intervoivodeship night bullet",
|
"MH": "MH - intervoivodeship night bullet",
|
||||||
|
|
||||||
"RP": "RP - voivodeship bullet",
|
"RP": "RP - voivodeship bullet",
|
||||||
"RM": "RM - international voivodeship regio",
|
"RM": "RM - international voivodeship regio",
|
||||||
"RO": "RO - voivodeship regio",
|
"RO": "RO - voivodeship regio",
|
||||||
"RA": "RA - voivodeship regio (urban)",
|
"RA": "RA - voivodeship regio (urban)",
|
||||||
|
|
||||||
"PW": "PW - empty passenger",
|
"PW": "PW - empty passenger",
|
||||||
"PX": "PX - empty passenger test drive",
|
"PX": "PX - empty passenger test drive",
|
||||||
|
|
||||||
"TC": "TC - international freight (intermodal)",
|
"TC": "TC - international freight (intermodal)",
|
||||||
"TG": "TG - international freight (organized cargo)",
|
"TG": "TG - international freight (organized cargo)",
|
||||||
"TR": "TR - international freight (unorganized cargo)",
|
"TR": "TR - international freight (unorganized cargo)",
|
||||||
@@ -151,12 +153,10 @@
|
|||||||
"TK": "TK - freight (for stations & sidings)",
|
"TK": "TK - freight (for stations & sidings)",
|
||||||
"TS": "TS - empty freight test drive",
|
"TS": "TS - empty freight test drive",
|
||||||
"TH": "TH - locomotive rolling stock (over 3 vehicles)",
|
"TH": "TH - locomotive rolling stock (over 3 vehicles)",
|
||||||
|
|
||||||
"LT": "LT - freight locomotive only",
|
"LT": "LT - freight locomotive only",
|
||||||
"LP": "LP - passenger locomotive only",
|
"LP": "LP - passenger locomotive only",
|
||||||
"LS": "LS - shunting locomotive only",
|
"LS": "LS - shunting locomotive only",
|
||||||
"LZ": "LS - shunting locomotive only",
|
"LZ": "LS - shunting locomotive only",
|
||||||
|
|
||||||
"ZN": "ZN - inspection / diagnostic type",
|
"ZN": "ZN - inspection / diagnostic type",
|
||||||
"ZU": "ZU - other maintenance type"
|
"ZU": "ZU - other maintenance type"
|
||||||
}
|
}
|
||||||
@@ -208,6 +208,15 @@
|
|||||||
"search-stock": "Search by vehicles",
|
"search-stock": "Search by vehicles",
|
||||||
"action-reset": "RESET"
|
"action-reset": "RESET"
|
||||||
},
|
},
|
||||||
|
"storage": {
|
||||||
|
"title": "BOOKMARKED COMPOSITIONS",
|
||||||
|
"subtitle": "Manage your rolling stock compositions saved locally in the browser memory",
|
||||||
|
"remove-confirm": "Are you sure you want to delete this entry?",
|
||||||
|
"no-entires": "No bookmarked compositions - save a new one in the Stock tab",
|
||||||
|
"created-at": "Created at:",
|
||||||
|
"updated-at": "Updated at:",
|
||||||
|
"stock-title": "Rolling stock:"
|
||||||
|
},
|
||||||
"cargo": {
|
"cargo": {
|
||||||
"kontenery": "containers",
|
"kontenery": "containers",
|
||||||
"chłodnia": "refrigerator",
|
"chłodnia": "refrigerator",
|
||||||
@@ -313,4 +322,4 @@
|
|||||||
"418Vb_ZOS": "loose cargo (sand, stone)",
|
"418Vb_ZOS": "loose cargo (sand, stone)",
|
||||||
"418Vb_ZUE": "loose cargo (sand, stone)"
|
"418Vb_ZUE": "loose cargo (sand, stone)"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
+25
-16
@@ -12,7 +12,9 @@
|
|||||||
"title": "WYBIERZ POJAZD",
|
"title": "WYBIERZ POJAZD",
|
||||||
"input-vehicle": "Wybierz pojazd trakcyjny",
|
"input-vehicle": "Wybierz pojazd trakcyjny",
|
||||||
"input-carwagon": "Wybierz wagon",
|
"input-carwagon": "Wybierz wagon",
|
||||||
"cargo-title": "Ładunek (tylko wybrane towarowe)",
|
"vehicles-title": "Pojazdy trakcyjne",
|
||||||
|
"carwagons-title": "Wagony",
|
||||||
|
"cargo-title": "Dostępne ładunki",
|
||||||
"no-cargo-available": "brak dostępnych ładunków",
|
"no-cargo-available": "brak dostępnych ładunków",
|
||||||
"cargo-empty": "próżny",
|
"cargo-empty": "próżny",
|
||||||
"loco-electric": "ELEKTR.",
|
"loco-electric": "ELEKTR.",
|
||||||
@@ -44,7 +46,8 @@
|
|||||||
"stock": "SKŁAD",
|
"stock": "SKŁAD",
|
||||||
"wiki": "POJAZDY",
|
"wiki": "POJAZDY",
|
||||||
"numgen": "GNR NUMERU",
|
"numgen": "GNR NUMERU",
|
||||||
"stockgen": "GNR SKŁADU"
|
"stockgen": "GNR SKŁADU",
|
||||||
|
"storage": "ZAPISANE SKŁADY"
|
||||||
},
|
},
|
||||||
"stocklist": {
|
"stocklist": {
|
||||||
"title": "EDYTOR SKŁADU",
|
"title": "EDYTOR SKŁADU",
|
||||||
@@ -52,16 +55,20 @@
|
|||||||
"alert-copied": "Skład został skopiowany do twojego schowka!",
|
"alert-copied": "Skład został skopiowany do twojego schowka!",
|
||||||
"alert-empty": "Lista pojazdów jest pusta!",
|
"alert-empty": "Lista pojazdów jest pusta!",
|
||||||
"prompt-file": "Nazwij plik, a następnie pobierz do folderu Presets (Dokumenty/TTSK/TrainDriver2):",
|
"prompt-file": "Nazwij plik, a następnie pobierz do folderu Presets (Dokumenty/TTSK/TrainDriver2):",
|
||||||
|
"prompt-bookmark": "Nazwij skład do zapisania:",
|
||||||
|
"prompt-bookmark-overwrite": "Skład o tej nazwie jest już zapisany. Czy chcesz go podmienić?",
|
||||||
"vehicle-no": "POJAZD NR",
|
"vehicle-no": "POJAZD NR",
|
||||||
"no-vehicle-chosen": "NIE WYBRANO POJAZDU",
|
"no-vehicle-chosen": "NIE WYBRANO POJAZDU",
|
||||||
"action-move-up": "PRZENIEŚ WYŻEJ",
|
"action-move-up": "PRZENIEŚ WYŻEJ",
|
||||||
"action-move-down": "PRZENIEŚ NIŻEJ",
|
"action-move-down": "PRZENIEŚ NIŻEJ",
|
||||||
"action-remove": "USUŃ",
|
"action-remove": "USUŃ",
|
||||||
"action-upload": "WCZYTAJ",
|
"action-upload-file": "WCZYTAJ Z PLIKU",
|
||||||
"action-download": "POBIERZ",
|
"action-upload-clipboard": "WCZYTAJ ZE SCHOWKA",
|
||||||
"action-copy": "SKOPIUJ",
|
"action-download": "POBIERZ DO PLIKU",
|
||||||
|
"action-copy": "SKOPIUJ DO SCHOWKA",
|
||||||
"action-reset": "ZRESETUJ",
|
"action-reset": "ZRESETUJ",
|
||||||
"action-shuffle": "PRZETASUJ",
|
"action-shuffle": "PRZETASUJ",
|
||||||
|
"action-bookmark": "ZAPISZ",
|
||||||
"mass": "Masa",
|
"mass": "Masa",
|
||||||
"mass-accepted": "dopuszczalna",
|
"mass-accepted": "dopuszczalna",
|
||||||
"length": "Długość",
|
"length": "Długość",
|
||||||
@@ -69,14 +76,15 @@
|
|||||||
"coldstart-info": "Zimny start",
|
"coldstart-info": "Zimny start",
|
||||||
"doublemanning-info": "Podwójna obsada",
|
"doublemanning-info": "Podwójna obsada",
|
||||||
"list-empty": "Lista pojazdów jest pusta!",
|
"list-empty": "Lista pojazdów jest pusta!",
|
||||||
|
|
||||||
"warning-not-suitable": "Lokomotywy serii EP są przeznaczone jedynie do ruchu pasażerskiego!",
|
"warning-not-suitable": "Lokomotywy serii EP są przeznaczone jedynie do ruchu pasażerskiego!",
|
||||||
"warning-passenger-too-long": "Maksymalna długość składów pasażerskich nie może przekraczać 350m!",
|
"warning-passenger-too-long": "Maksymalna długość składów pasażerskich nie może przekraczać 350m!",
|
||||||
"warning-freight-too-long": "Maksymalna długość składów innych niż pasażerskie nie może przekraczać 650m!",
|
"warning-freight-too-long": "Maksymalna długość składów innych niż pasażerskie nie może przekraczać 650m!",
|
||||||
"warning-too-many-locos": "Ten skład posiada za dużo pojazdów trakcyjnych!",
|
"warning-too-many-locos": "Ten skład posiada za dużo pojazdów trakcyjnych!",
|
||||||
"warning-too-heavy": "Ten skład jest za ciężki! Sprawdź {href}",
|
"warning-too-heavy": "Ten skład jest za ciężki! Sprawdź {href}",
|
||||||
"warning-team-only-vehicle": "W zestawieniu znajduje się co najmniej jeden pojazd dostępny tylko dla członków zespołu TD2! ({0})",
|
"warning-team-only-vehicle": "W zestawieniu znajduje się co najmniej jeden pojazd dostępny tylko dla członków zespołu TD2! ({0})",
|
||||||
"acceptable-mass-docs": "dopuszczalne masy składów"
|
"acceptable-mass-docs": "dopuszczalne masy składów",
|
||||||
|
"stock-loading-error": "Wystąpił błąd: nie można przetworzyć danych ze schowka! Upewnij się, że są one w poprawnym formacie!",
|
||||||
|
"stock-clipboard-error": "Wystąpił błąd: nie można odczytać danych ze schowka! Upewnij się, że nadałeś uprawnienia stronie do tej akcji!"
|
||||||
},
|
},
|
||||||
"stockgen": {
|
"stockgen": {
|
||||||
"title": "GENERATOR SKŁADU TOWAROWEGO",
|
"title": "GENERATOR SKŁADU TOWAROWEGO",
|
||||||
@@ -108,7 +116,6 @@
|
|||||||
"action-random-region": "LOSUJ OBSZARY",
|
"action-random-region": "LOSUJ OBSZARY",
|
||||||
"action-random-number": "LOSUJ KOŃCÓWKĘ",
|
"action-random-number": "LOSUJ KOŃCÓWKĘ",
|
||||||
"action-random-category": "LOSUJ KATEGORIĘ",
|
"action-random-category": "LOSUJ KATEGORIĘ",
|
||||||
|
|
||||||
"rules": {
|
"rules": {
|
||||||
"first-digit": "Pierwsza cyfra:",
|
"first-digit": "Pierwsza cyfra:",
|
||||||
"second-digit": "Druga cyfra:",
|
"second-digit": "Druga cyfra:",
|
||||||
@@ -123,25 +130,20 @@
|
|||||||
"for-region-end": "dla końcowego obszaru konstrukcyjnego",
|
"for-region-end": "dla końcowego obszaru konstrukcyjnego",
|
||||||
"from-range": "z przedziału"
|
"from-range": "z przedziału"
|
||||||
},
|
},
|
||||||
|
|
||||||
"categories": {
|
"categories": {
|
||||||
"EI": "EI - ekspres krajowy",
|
"EI": "EI - ekspres krajowy",
|
||||||
"EC": "EC - ekspres międzynarodowy",
|
"EC": "EC - ekspres międzynarodowy",
|
||||||
"EN": "EN - ekspres krajowy nocny",
|
"EN": "EN - ekspres krajowy nocny",
|
||||||
|
|
||||||
"MP": "MP - międzywoj. pośpieszny",
|
"MP": "MP - międzywoj. pośpieszny",
|
||||||
"RP": "RP - wojewódzki pośpieszny",
|
"RP": "RP - wojewódzki pośpieszny",
|
||||||
"MO": "MO - międzywoj. osobowy",
|
"MO": "MO - międzywoj. osobowy",
|
||||||
"RO": "RO - wojewódzki osobowy",
|
"RO": "RO - wojewódzki osobowy",
|
||||||
|
|
||||||
"MM": "MM - międzynar. pośpieszny",
|
"MM": "MM - międzynar. pośpieszny",
|
||||||
"MH": "MH - międzywoj. pośpieszny hotelowy",
|
"MH": "MH - międzywoj. pośpieszny hotelowy",
|
||||||
"RM": "RM - woj. osobowy międzynarodowy",
|
"RM": "RM - woj. osobowy międzynarodowy",
|
||||||
"RA": "RA - woj. osobowy aglomeracyjny",
|
"RA": "RA - woj. osobowy aglomeracyjny",
|
||||||
|
|
||||||
"PW": "PW - pasażerski próżny - służbowy",
|
"PW": "PW - pasażerski próżny - służbowy",
|
||||||
"PX": "PX - pasażerski próżny próbny",
|
"PX": "PX - pasażerski próżny próbny",
|
||||||
|
|
||||||
"TC": "TC - towarowy międzynarodowy intermodalny",
|
"TC": "TC - towarowy międzynarodowy intermodalny",
|
||||||
"TG": "TG - towarowy międzynarodowy masowy",
|
"TG": "TG - towarowy międzynarodowy masowy",
|
||||||
"TR": "TR - towarowy międzynarodowy niemasowy",
|
"TR": "TR - towarowy międzynarodowy niemasowy",
|
||||||
@@ -151,12 +153,10 @@
|
|||||||
"TK": "TK - towarowy (stacje i bocznice)",
|
"TK": "TK - towarowy (stacje i bocznice)",
|
||||||
"TS": "TS - towarowy próżny próbny",
|
"TS": "TS - towarowy próżny próbny",
|
||||||
"TH": "TH - skład lokomotyw (powyżej 3 pojazdów)",
|
"TH": "TH - skład lokomotyw (powyżej 3 pojazdów)",
|
||||||
|
|
||||||
"LT": "LT - lokomotywa towarowa luzem",
|
"LT": "LT - lokomotywa towarowa luzem",
|
||||||
"LP": "LP - lokomotywa pasażerska luzem",
|
"LP": "LP - lokomotywa pasażerska luzem",
|
||||||
"LS": "LS - lokomotywa manewrowa luzem",
|
"LS": "LS - lokomotywa manewrowa luzem",
|
||||||
"LZ": "LZ - lokomotywa dla poc. utrzymaniowo-naprawczych",
|
"LZ": "LZ - lokomotywa dla poc. utrzymaniowo-naprawczych",
|
||||||
|
|
||||||
"ZN": "ZN - inspekcyjny / diagnostyczny",
|
"ZN": "ZN - inspekcyjny / diagnostyczny",
|
||||||
"ZU": "ZU - inny utrzymaniowy"
|
"ZU": "ZU - inny utrzymaniowy"
|
||||||
}
|
}
|
||||||
@@ -208,6 +208,15 @@
|
|||||||
"search-stock": "Szukaj po pojazdach",
|
"search-stock": "Szukaj po pojazdach",
|
||||||
"action-reset": "RESETUJ"
|
"action-reset": "RESETUJ"
|
||||||
},
|
},
|
||||||
|
"storage": {
|
||||||
|
"title": "ZAPISANE SKŁADY",
|
||||||
|
"subtitle": "Zarządzaj składami zapisanymi lokalnie w pamięci przeglądarki",
|
||||||
|
"remove-confirm": "Czy na pewno chcesz usunąć ten wpis?",
|
||||||
|
"no-entires": "Brak zapisanych składów - dodaj nowy przez zakładkę ze Składem",
|
||||||
|
"created-at": "Stworzony:",
|
||||||
|
"updated-at": "Zaktualizowany:",
|
||||||
|
"stock-title": "Skład:"
|
||||||
|
},
|
||||||
"cargo": {
|
"cargo": {
|
||||||
"kontenery": "kontenery",
|
"kontenery": "kontenery",
|
||||||
"chłodnia": "chłodnia",
|
"chłodnia": "chłodnia",
|
||||||
@@ -312,4 +321,4 @@
|
|||||||
"418Vb_ZOS": "drobnica, ładunki sypkie (piasek, kamień)",
|
"418Vb_ZOS": "drobnica, ładunki sypkie (piasek, kamień)",
|
||||||
"418Vb_ZUE": "drobnica, ładunki sypkie (piasek, kamień)"
|
"418Vb_ZUE": "drobnica, ładunki sypkie (piasek, kamień)"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -53,6 +53,7 @@ export default defineComponent({
|
|||||||
|
|
||||||
loadStockFromString(stockString: string) {
|
loadStockFromString(stockString: string) {
|
||||||
const stockArray = stockString.trim().split(';');
|
const stockArray = stockString.trim().split(';');
|
||||||
|
let failureCount = 0;
|
||||||
|
|
||||||
this.store.stockList.length = 0;
|
this.store.stockList.length = 0;
|
||||||
this.store.chosenVehicle = null;
|
this.store.chosenVehicle = null;
|
||||||
@@ -85,10 +86,19 @@ export default defineComponent({
|
|||||||
if (cargo) vehicleCargo = vehicle?.cargoTypes.find((c) => c.id == cargo) || null;
|
if (cargo) vehicleCargo = vehicle?.cargoTypes.find((c) => c.id == cargo) || null;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!vehicle) console.warn('Brak pojazdu / rodzaj pojazdu źle wczytany:', type);
|
if (!vehicle && type) {
|
||||||
|
failureCount++;
|
||||||
|
console.warn(`Wystąpił błąd - nie wczytano pojazdu o nazwie: ${type}`);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
this.addVehicle(vehicle, vehicleCargo);
|
this.addVehicle(vehicle, vehicleCargo);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
if (failureCount != 0 && failureCount == stockArray.length) {
|
||||||
|
console.warn('Wystąpił błąd - niepoprawny format');
|
||||||
|
throw 'stock-loading-error';
|
||||||
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -4,6 +4,7 @@ import WikiListTab from './components/tabs/WikiListTab.vue';
|
|||||||
import StockListTab from './components/tabs/StockListTab.vue';
|
import StockListTab from './components/tabs/StockListTab.vue';
|
||||||
import NumberGeneratorTab from './components/tabs/NumberGeneratorTab.vue';
|
import NumberGeneratorTab from './components/tabs/NumberGeneratorTab.vue';
|
||||||
import StockGeneratorTab from './components/tabs/StockGeneratorTab.vue';
|
import StockGeneratorTab from './components/tabs/StockGeneratorTab.vue';
|
||||||
|
import StorageTab from './components/tabs/StorageTab.vue';
|
||||||
|
|
||||||
const routes: RouteRecordRaw[] = [
|
const routes: RouteRecordRaw[] = [
|
||||||
{
|
{
|
||||||
@@ -41,6 +42,13 @@ const routes: RouteRecordRaw[] = [
|
|||||||
viewMode: StockGeneratorTab,
|
viewMode: StockGeneratorTab,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: 'storage',
|
||||||
|
component: AppContainerView,
|
||||||
|
meta: {
|
||||||
|
viewMode: StorageTab,
|
||||||
|
},
|
||||||
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|||||||
+32
-32
@@ -9,6 +9,7 @@ import {
|
|||||||
LocoGroupType,
|
LocoGroupType,
|
||||||
WagonGroupType,
|
WagonGroupType,
|
||||||
IVehicleData,
|
IVehicleData,
|
||||||
|
StorageStockEntry,
|
||||||
} from './types/common.types';
|
} from './types/common.types';
|
||||||
import { defineStore } from 'pinia';
|
import { defineStore } from 'pinia';
|
||||||
import {
|
import {
|
||||||
@@ -18,6 +19,8 @@ import {
|
|||||||
isTrainPassenger,
|
isTrainPassenger,
|
||||||
locoDataList,
|
locoDataList,
|
||||||
maxStockSpeed,
|
maxStockSpeed,
|
||||||
|
stockSupportsColdStart,
|
||||||
|
stockSupportsDoubleManning,
|
||||||
totalLength,
|
totalLength,
|
||||||
totalWeight,
|
totalWeight,
|
||||||
} from './utils/vehicleUtils';
|
} from './utils/vehicleUtils';
|
||||||
@@ -57,6 +60,10 @@ export const useStore = defineStore({
|
|||||||
|
|
||||||
lastFocusedElement: null as HTMLElement | null,
|
lastFocusedElement: null as HTMLElement | null,
|
||||||
|
|
||||||
|
storageStockData: {} as Record<string, StorageStockEntry>,
|
||||||
|
chosenStorageStockName: '',
|
||||||
|
chosenStorageStockString: '',
|
||||||
|
|
||||||
compatibleSimulatorVersion: '2024.3.1',
|
compatibleSimulatorVersion: '2024.3.1',
|
||||||
}),
|
}),
|
||||||
|
|
||||||
@@ -73,6 +80,31 @@ export const useStore = defineStore({
|
|||||||
isTrainPassenger: (state) => isTrainPassenger(state.stockList),
|
isTrainPassenger: (state) => isTrainPassenger(state.stockList),
|
||||||
acceptableWeight: (state) => acceptableWeight(state.stockList),
|
acceptableWeight: (state) => acceptableWeight(state.stockList),
|
||||||
|
|
||||||
|
stockSupportsColdStart: (state) => stockSupportsColdStart(state.stockList),
|
||||||
|
stockSupportsDoubleManning: (state) => stockSupportsDoubleManning(state.stockList),
|
||||||
|
|
||||||
|
stockString: (state) => {
|
||||||
|
if (state.stockList.length == 0) return '';
|
||||||
|
|
||||||
|
const coldStartActive = state.isColdStart && stockSupportsColdStart(state.stockList);
|
||||||
|
const doubleManningActive =
|
||||||
|
state.isDoubleManned && stockSupportsDoubleManning(state.stockList);
|
||||||
|
|
||||||
|
return state.stockList
|
||||||
|
.map((stock, i) => {
|
||||||
|
let stockTypeStr =
|
||||||
|
isTractionUnit(stock.vehicleRef) || !stock.cargo
|
||||||
|
? stock.vehicleRef.type
|
||||||
|
: `${stock.vehicleRef.type}:${stock.cargo.id}`;
|
||||||
|
|
||||||
|
if (i == 0 && (coldStartActive || doubleManningActive))
|
||||||
|
return `${stockTypeStr},${coldStartActive ? 'c' : ''}${doubleManningActive ? 'd' : ''}`;
|
||||||
|
|
||||||
|
return stockTypeStr;
|
||||||
|
})
|
||||||
|
.join(';');
|
||||||
|
},
|
||||||
|
|
||||||
realCompositionList: (state) => {
|
realCompositionList: (state) => {
|
||||||
if (!state.vehiclesData) return [];
|
if (!state.vehiclesData) return [];
|
||||||
|
|
||||||
@@ -94,32 +126,6 @@ export const useStore = defineStore({
|
|||||||
return acc;
|
return acc;
|
||||||
}, []);
|
}, []);
|
||||||
},
|
},
|
||||||
|
|
||||||
stockSupportsColdStart: (state) => {
|
|
||||||
if (state.stockList.length == 0) return false;
|
|
||||||
|
|
||||||
if (!isTractionUnit(state.stockList[0].vehicleRef)) return false;
|
|
||||||
else if (state.stockList.length > 1) return false;
|
|
||||||
|
|
||||||
const headingLoco = state.stockList[0];
|
|
||||||
|
|
||||||
return (
|
|
||||||
state.vehiclesData?.find((vehicle) => vehicle.name == headingLoco.vehicleRef.type)?.group
|
|
||||||
.locoProps?.coldStart ?? false
|
|
||||||
);
|
|
||||||
},
|
|
||||||
|
|
||||||
stockSupportsDoubleManning: (state) => {
|
|
||||||
if (state.stockList.length == 0) return false;
|
|
||||||
if (!isTractionUnit(state.stockList[0].vehicleRef)) return false;
|
|
||||||
|
|
||||||
const headingLoco = state.stockList[0];
|
|
||||||
|
|
||||||
return (
|
|
||||||
state.vehiclesData?.find((vehicle) => vehicle.name == headingLoco.vehicleRef.type)?.group
|
|
||||||
.locoProps?.doubleManned ?? false
|
|
||||||
);
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
|
|
||||||
actions: {
|
actions: {
|
||||||
@@ -135,11 +141,5 @@ export const useStore = defineStore({
|
|||||||
async setupAPIData() {
|
async setupAPIData() {
|
||||||
await this.fetchVehiclesAPI();
|
await this.fetchVehiclesAPI();
|
||||||
},
|
},
|
||||||
|
|
||||||
handleRouting() {
|
|
||||||
if (window.location.search.includes('trainId=')) {
|
|
||||||
const trainId = window.location.search;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -2,6 +2,7 @@ $breakpointMd: 960px;
|
|||||||
$breakpointSm: 550px;
|
$breakpointSm: 550px;
|
||||||
|
|
||||||
$bgColor: #2b3552;
|
$bgColor: #2b3552;
|
||||||
|
$bgColorDarker: #1f263b;
|
||||||
$textColor: #fff;
|
$textColor: #fff;
|
||||||
$secondaryColor: #1b1b1b;
|
$secondaryColor: #1b1b1b;
|
||||||
$accentColor: #e4c428;
|
$accentColor: #e4c428;
|
||||||
@@ -121,21 +122,43 @@ button {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-tooltip]:hover::after,
|
|
||||||
[data-tooltip]:focus::after {
|
|
||||||
position: absolute;
|
|
||||||
transform: translateX(10px);
|
|
||||||
|
|
||||||
content: attr(data-tooltip);
|
|
||||||
color: white;
|
|
||||||
background: black;
|
|
||||||
padding: 0.5em;
|
|
||||||
max-width: 300px;
|
|
||||||
z-index: 100;
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-tooltip] {
|
[data-tooltip] {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:hover::after,
|
||||||
|
&:focus-visible::after {
|
||||||
|
position: absolute;
|
||||||
|
transform: translateX(10px);
|
||||||
|
|
||||||
|
content: attr(data-tooltip);
|
||||||
|
color: white;
|
||||||
|
background: black;
|
||||||
|
padding: 0.5em;
|
||||||
|
max-width: 300px;
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-button-tooltip] {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&:hover::after,
|
||||||
|
&:focus-visible::after {
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
max-width: 300px;
|
||||||
|
|
||||||
|
top: 100%;
|
||||||
|
transform: translateY(5px);
|
||||||
|
border-radius: inherit;
|
||||||
|
|
||||||
|
content: attr(data-button-tooltip);
|
||||||
|
color: white;
|
||||||
|
background: #111;
|
||||||
|
padding: 0.5em;
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn,
|
.btn,
|
||||||
@@ -189,9 +212,10 @@ button {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 0.5em;
|
gap: 0.5em;
|
||||||
|
|
||||||
img {
|
img,
|
||||||
width: 1.3em;
|
svg {
|
||||||
vertical-align: middle;
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -199,12 +223,21 @@ button {
|
|||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
transition: all 250ms;
|
transition: all 250ms;
|
||||||
background: none;
|
background: none;
|
||||||
padding: 0;
|
padding: 0.25em;
|
||||||
|
border-radius: 0;
|
||||||
|
|
||||||
&:focus-visible {
|
&:focus-visible {
|
||||||
outline: 1px solid white;
|
outline: 1px solid white;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&--icon {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
padding: 0.25em;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.link-btn.router-link-exact-active {
|
.link-btn.router-link-exact-active {
|
||||||
@@ -1,4 +1,4 @@
|
|||||||
@import './global.scss';
|
@use 'global';
|
||||||
|
|
||||||
.tab {
|
.tab {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@@ -7,7 +7,7 @@
|
|||||||
&_header {
|
&_header {
|
||||||
padding: 0.5em 1em;
|
padding: 0.5em 1em;
|
||||||
|
|
||||||
background-color: $secondaryColor;
|
background-color: global.$secondaryColor;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
@@ -97,3 +97,10 @@ export interface IVehicleLocoProps {
|
|||||||
coldStart: boolean;
|
coldStart: boolean;
|
||||||
doubleManned: boolean;
|
doubleManned: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export interface StorageStockEntry {
|
||||||
|
id: string;
|
||||||
|
createdAt: number;
|
||||||
|
updatedAt?: number;
|
||||||
|
stockString: string;
|
||||||
|
}
|
||||||
@@ -0,0 +1,27 @@
|
|||||||
|
import { useStore } from '../store';
|
||||||
|
|
||||||
|
export const useFileUtils = () => {
|
||||||
|
const store = useStore();
|
||||||
|
|
||||||
|
function getCurrentStockFileName() {
|
||||||
|
let fileName = '';
|
||||||
|
|
||||||
|
const currentStockString = store.stockList.map((s) => s.vehicleRef.type).join(';');
|
||||||
|
|
||||||
|
const currentRealComp = store.realCompositionList.find(
|
||||||
|
(rc) => rc.stockString == currentStockString
|
||||||
|
);
|
||||||
|
|
||||||
|
// Append real composition to the name if chosen
|
||||||
|
if (currentRealComp != undefined) {
|
||||||
|
fileName += `${currentRealComp.stockId} `;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Append default props
|
||||||
|
fileName += `${store.stockList[0].vehicleRef.type} ${(store.totalWeight / 1000).toFixed(1)}t; ${store.totalLength}m; vmax ${store.maxStockSpeed}`;
|
||||||
|
|
||||||
|
return fileName;
|
||||||
|
}
|
||||||
|
|
||||||
|
return { getCurrentStockFileName };
|
||||||
|
};
|
||||||
@@ -0,0 +1,38 @@
|
|||||||
|
import { useStore } from '../store';
|
||||||
|
|
||||||
|
export const useStockListUtils = () => {
|
||||||
|
const store = useStore();
|
||||||
|
|
||||||
|
function removeStock(index: number) {
|
||||||
|
if (index == -1) return;
|
||||||
|
|
||||||
|
store.stockList = store.stockList.filter((stock, i) => i != index);
|
||||||
|
|
||||||
|
if (store.stockList.length < index + 1) store.chosenStockListIndex = -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
function moveUpStock(index: number) {
|
||||||
|
if (index < 1) return;
|
||||||
|
|
||||||
|
const tempStock = store.stockList[index];
|
||||||
|
|
||||||
|
store.stockList[index] = store.stockList[index - 1];
|
||||||
|
store.stockList[index - 1] = tempStock;
|
||||||
|
|
||||||
|
store.chosenStockListIndex = index - 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
function moveDownStock(index: number) {
|
||||||
|
if (index == -1) return;
|
||||||
|
if (index > store.stockList.length - 2) return;
|
||||||
|
|
||||||
|
const tempStock = store.stockList[index];
|
||||||
|
|
||||||
|
store.stockList[index] = store.stockList[index + 1];
|
||||||
|
store.stockList[index + 1] = tempStock;
|
||||||
|
|
||||||
|
store.chosenStockListIndex = index + 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
return { removeStock, moveDownStock, moveUpStock };
|
||||||
|
};
|
||||||
@@ -127,3 +127,19 @@ export function isTrainPassenger(stockList: IStock[]) {
|
|||||||
.filter((stock) => !isTractionUnit(stock.vehicleRef))
|
.filter((stock) => !isTractionUnit(stock.vehicleRef))
|
||||||
.every((stock) => stock.vehicleRef.group === 'wagon-passenger');
|
.every((stock) => stock.vehicleRef.group === 'wagon-passenger');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function stockSupportsColdStart(stockList: IStock[]) {
|
||||||
|
return (
|
||||||
|
stockList.length == 1 &&
|
||||||
|
isTractionUnit(stockList[0].vehicleRef) &&
|
||||||
|
stockList[0].vehicleRef.coldStart
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function stockSupportsDoubleManning(stockList: IStock[]) {
|
||||||
|
return (
|
||||||
|
stockList.length != 0 &&
|
||||||
|
isTractionUnit(stockList[0].vehicleRef) &&
|
||||||
|
stockList[0].vehicleRef.doubleManned
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|||||||
+13
-11
@@ -2,14 +2,21 @@ import { defineConfig } from 'vite';
|
|||||||
import vue from '@vitejs/plugin-vue';
|
import vue from '@vitejs/plugin-vue';
|
||||||
|
|
||||||
import { VitePWA } from 'vite-plugin-pwa';
|
import { VitePWA } from 'vite-plugin-pwa';
|
||||||
|
import path from 'path';
|
||||||
|
|
||||||
// https://vitejs.dev/config/
|
// https://vitejs.dev/config/
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
server: {
|
server: { port: 2138 },
|
||||||
port: 2138,
|
preview: { port: 4138 },
|
||||||
|
css: {
|
||||||
|
preprocessorOptions: {
|
||||||
|
scss: { additionalData: `@use '@/styles/global';`, silenceDeprecations: ['legacy-js-api'] },
|
||||||
|
},
|
||||||
},
|
},
|
||||||
preview: {
|
resolve: {
|
||||||
port: 4138,
|
alias: {
|
||||||
|
'@': path.resolve(__dirname, 'src'),
|
||||||
|
},
|
||||||
},
|
},
|
||||||
plugins: [
|
plugins: [
|
||||||
vue(),
|
vue(),
|
||||||
@@ -18,10 +25,7 @@ export default defineConfig({
|
|||||||
|
|
||||||
includeAssets: ['/images/*.{png,svg,jpg}', '/fonts/*.{woff,woff2,ttf}'],
|
includeAssets: ['/images/*.{png,svg,jpg}', '/fonts/*.{woff,woff2,ttf}'],
|
||||||
|
|
||||||
devOptions: {
|
devOptions: { suppressWarnings: true, enabled: true },
|
||||||
suppressWarnings: true,
|
|
||||||
enabled: true,
|
|
||||||
},
|
|
||||||
|
|
||||||
workbox: {
|
workbox: {
|
||||||
cleanupOutdatedCaches: true,
|
cleanupOutdatedCaches: true,
|
||||||
@@ -31,9 +35,7 @@ export default defineConfig({
|
|||||||
{
|
{
|
||||||
urlPattern: /^https:\/\/.*\.spythere\.eu\/.*/i,
|
urlPattern: /^https:\/\/.*\.spythere\.eu\/.*/i,
|
||||||
handler: 'StaleWhileRevalidate',
|
handler: 'StaleWhileRevalidate',
|
||||||
options: {
|
options: { cacheName: 'spythere-cache' },
|
||||||
cacheName: 'spythere-cache',
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user