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

Wygląd, responsywność, poprawki funkcjonalności

Browse Source
This commit is contained in:
Spythere
2021-11-12 13:49:01 +01:00
parent 62262ae613
commit 78db5942d4
2 changed files with 298 additions and 263 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{ {
"name": "pojazdownik", "name": "pojazdownik",
"version": "1.0.0", "version": "1.0.1",
"private": true, "private": true,
"scripts": { "scripts": {
"serve": "vue-cli-service serve", "serve": "vue-cli-service serve",
src/App.vue
+297 -262
View File
@@ -5,223 +5,225 @@
</header> </header>
<main> <main>
<div class="inputs_loco"> <section class="inputs">
<div class="input_container"> <div class="input inputs_loco">
<h2 class="input_header">LOKOMOTYWA / ZESP. TRAKCYJNY</h2> <div class="input_container">
<div class="input_radio"> <h2 class="input_header">LOKOMOTYWA / ZESP. TRAKCYJNY</h2>
<label v-for="label in locoLabels" :for="label.id" :key="label.id"> <div class="input_radio">
<input <label v-for="label in locoLabels" :for="label.id" :key="label.id">
type="radio" <input
name="loco" type="radio"
:id="label.id" name="loco"
:value="label.id" :id="label.id"
:checked="chosenLocoPower == label.id" :value="label.id"
@change="onLocoPowerChange(label.id)" :checked="chosenLocoPower == label.id"
v-model="chosenLocoPower" @change="onLocoPowerChange(label.id)"
/> v-model="chosenLocoPower"
<span>{{ label.title }}</span> />
</label> <span>{{ label.title }}</span>
</div> </label>
</div>
<div class="input_list type"> <div class="input_list type">
<select <select
id="loco-select" id="loco-select"
v-model="chosenLoco" v-model="chosenLoco"
@change="onLocoTypeChange" @change="onLocoTypeChange"
>
<option :value="null" disabled>Wybierz pojazd z listy</option>
<option v-for="loco in locoOptions" :value="loco" :key="loco.type">
{{ loco.type }}
</option>
</select>
<button @click="addVehicle">
<img :src="icons.add" alt="add vehicle" />
</button>
</div>
</div>
</div>
<div
class="inputs_car"
:class="{
disabled:
chosenLocoPower == 'loco-ezt' || chosenLocoPower == 'loco-szt',
}"
>
<div class="input_container">
<h2 class="input_header">RODZAJ WAGONU</h2>
<div class="input_radio">
<label v-for="label in carLabels" :for="label.id" :key="label.id">
<input
type="radio"
name="car"
:id="label.id"
:checked="chosenCarUseType == label.id"
:value="label.id"
v-model="chosenCarUseType"
@change="onCarUseTypeChange(label.id)"
/>
<span>{{ label.title }}</span>
</label>
</div>
<div class="input_list type">
<select id="car-select" v-model="chosenCar" @change="onCarTypeChange">
<option :value="null" disabled>Wybierz wagon z listy</option>
<option v-for="car in carOptions" :value="car" :key="car.type">
{{ car.type }}
</option>
</select>
<button @click="addVehicle">
<img :src="icons.add" alt="add vehicle" />
</button>
</div>
<div class="input_list cargo">
<select
id="cargo-select"
:disabled="
(chosenCar && !chosenCar.loadable) ||
(chosenCar && chosenCar.useType == 'car-passenger') ||
!chosenCar
"
v-model="chosenCargo"
>
<option :value="null">brak</option>
<option
v-for="cargo in chosenCar?.cargoList"
:value="cargo"
:key="cargo.id"
> >
{{ cargo.id }} <option :value="null" disabled>Wybierz pojazd z listy</option>
</option> <option
</select> v-for="loco in locoOptions"
:value="loco"
:key="loco.type"
>
{{ loco.type }}
</option>
</select>
<button @click="addVehicle">
<img :src="icons.add" alt="add vehicle" />
</button>
</div>
<div class="input_checkbox">
<label for="supporter">
<input type="checkbox" id="supporter" v-model="showSupporter" />
<span>Pokaż pojazdy dla supporterów</span>
</label>
</div>
</div> </div>
</div> </div>
</div>
<section class="images"> <div
<div class="image"> class="input inputs_car"
<div class="image-content"> :class="{
<div class="no-img" v-if="!chosenCar && !chosenLoco"> disabled:
POGLĄD WYBRANEGO POJAZDU chosenLocoPower == 'loco-ezt' || chosenLocoPower == 'loco-szt',
}"
>
<div class="input_container">
<h2 class="input_header">RODZAJ WAGONU</h2>
<div class="input_radio">
<label v-for="label in carLabels" :for="label.id" :key="label.id">
<input
type="radio"
name="car"
:id="label.id"
:checked="chosenCarUseType == label.id"
:value="label.id"
v-model="chosenCarUseType"
@change="onCarUseTypeChange(label.id)"
/>
<span>{{ label.title }}</span>
</label>
</div> </div>
<div class="empty-message" v-if="imageLoading"> <div class="input_list type">
ŁADOWANIE OBRAZU... <select
id="car-select"
v-model="chosenCar"
@change="onCarTypeChange"
>
<option :value="null" disabled>Wybierz wagon z listy</option>
<option v-for="car in carOptions" :value="car" :key="car.type">
{{ car.type }}
</option>
</select>
<button @click="addVehicle">
<img :src="icons.add" alt="add vehicle" />
</button>
</div> </div>
<img <div class="input_list cargo">
v-if="chosenLoco && !chosenCar" <select
:src="chosenLoco.imageSrc" id="cargo-select"
:alt="chosenLoco.type" :disabled="
@load="onImageLoad" (chosenCar && !chosenCar.loadable) ||
/> (chosenCar && chosenCar.useType == 'car-passenger') ||
!chosenCar
<img "
v-if="chosenCar" v-model="chosenCargo"
:src="chosenCar.imageSrc" >
:alt="chosenCar.type" <option :value="null">brak</option>
@load="onImageLoad" <option
/> v-for="cargo in chosenCar?.cargoList"
:value="cargo"
:key="cargo.id"
>
{{ cargo.id }}
</option>
</select>
</div>
</div> </div>
<button class="btn-rect" @click="addVehicle">+</button>
</div> </div>
</section> </section>
<section class="stock-list"> <div class="bottom">
<div class="stock-list_buttons"> <section class="image">
<button class="btn btn--copy" @click="downloadStock"> <div class="image__wrapper">
POBIERZ SKŁAD <div class="image__content">
</button> <div class="no-img" v-if="!chosenCar && !chosenLoco">
<!-- <button class="btn btn--show-text">WCZYTAJ SKŁAD</button> --> POGLĄD WYBRANEGO POJAZDU
</div> </div>
<div class="empty-message" v-if="imageLoading">
<div class="stock-list_specs"> ŁADOWANIE OBRAZU...
Masa: <span class="text--accent">{{ totalMass }}</span> t | Długość: </div>
<span class="text--accent">{{ totalLength }}</span> <img
m | Vmax: <span class="text--accent">{{ maxSpeed }} </span> km/h v-if="chosenLoco && !chosenCar"
</div> :src="chosenLoco.imageSrc"
:alt="chosenLoco.type"
<ul> @load="onImageLoad"
<li v-if="stockList.length == 0" class="list-empty"> />
Lista pojazdów jest pusta! <img
</li> v-if="chosenCar"
:src="chosenCar.imageSrc"
<li :alt="chosenCar.type"
v-for="(stock, i) in stockList" @load="onImageLoad"
:key="stock.type + i" />
:class="{ loco: stock.isLoco }"
:data-id="i"
tabindex="0"
@focus="onListItemFocus(i)"
:ref="`item-${i}`"
>
<div
class="item-content"
@dragstart="onDragStart(i)"
@drop="onDrop($event, i)"
@dragover="allowDrop"
draggable="true"
>
<span>
{{ stock.isLoco ? stock.type : getCarSpecFromType(stock.type) }}
</span>
<span v-if="stock.cargo"> &nbsp; ({{ stock.cargo?.id }}) </span>
&nbsp;
<span> {{ stock.length }}m</span>
&nbsp;
<span>{{ stock.cargo ? stock.cargo.totalMass : stock.mass }}t</span>
</div> </div>
</div>
<!-- <button class="btn-rect" @click="addVehicle">+</button> -->
</section>
<div class="item-actions"> <section class="spacer"></section>
<div class="count">
<button class="action-btn" @click="subStock(i)">
<img :src="icons.sub" alt="subtract vehicle count" />
</button>
<span>{{ stock.count }} </span> <section class="stock-list">
<div class="stock-list_buttons">
<button class="btn btn--copy" @click="downloadStock">
POBIERZ SKŁAD
</button>
<!-- <button class="btn btn--show-text">WCZYTAJ SKŁAD</button> -->
</div>
<div class="stock-list_specs">
Masa: <span class="text--accent">{{ totalMass }}</span> t | Długość:
<span class="text--accent">{{ totalLength }}</span>
m | Vmax składu:
<span class="text--accent">{{ maxSpeed }} </span> km/h
</div>
<ul>
<li v-if="stockList.length == 0" class="list-empty">
<div class="item-content">Lista pojazdów jest pusta!</div>
</li>
<button class="action-btn" @click="addStock(i)"> <li
<img :src="icons.add" alt="add vehicle count" /> v-for="(stock, i) in stockList"
</button> :key="stock.type + i"
:class="{ loco: stock.isLoco }"
:data-id="i"
tabindex="0"
@focus="onListItemFocus(i)"
:ref="`item-${i}`"
>
<div
class="item-content"
@dragstart="onDragStart(i)"
@drop="onDrop($event, i)"
@dragover="allowDrop"
draggable="true"
>
<span>
{{ stock.isLoco ? stock.type : getCarSpecFromType(stock.type) }}
</span>
<span v-if="stock.cargo"> &nbsp; ({{ stock.cargo?.id }}) </span>
&nbsp;
<span> {{ stock.length }}m</span>
&nbsp;
<span
>{{ stock.cargo ? stock.cargo.totalMass : stock.mass }}t</span
>
</div> </div>
<button class="action-btn" @click="moveUpStock(i)"> <div class="item-actions">
<img :src="icons.higher" alt="move up vehicle" /> <div class="count">
</button> <button class="action-btn" @click="subStock(i)">
<img :src="icons.sub" alt="subtract vehicle count" />
<button class="action-btn" @click="moveDownStock(i)"> </button>
<img :src="icons.lower" alt="move down vehicle" /> <span>{{ stock.count }} </span>
</button> <button class="action-btn" @click="addStock(i)">
<img :src="icons.add" alt="add vehicle count" />
<button class="action-btn" @click="removeStock(i)"> </button>
<img :src="icons.remove" alt="remove vehicle" /> </div>
</button> <button class="action-btn" @click="moveUpStock(i)">
</div> <img :src="icons.higher" alt="move up vehicle" />
<!-- <span class="type"></span> </button>
<span class="cargo"></span> <button class="action-btn" @click="moveDownStock(i)">
<span class="cargo"></span> <img :src="icons.lower" alt="move down vehicle" />
</button>
<span class="actions"> <button class="action-btn" @click="removeStock(i)">
<div class="car-count">5</div> <img :src="icons.remove" alt="remove vehicle" />
<button class="btn--remove"></button> </button>
<button class="btn--moveup"></button> </div>
<button class="btn--movedown"></button> </li>
</span> --> </ul>
</li> </section>
</ul> </div>
</section>
</main> </main>
<footer> <footer>
<span class="text--grayed"> <div class="text--grayed" style="margin-bottom: 0.25em">
Ta strona ma charakter informacyjny. Autor nie ponosi odpowiedzialności za Ta strona ma charakter informacyjny. Autor nie ponosi odpowiedzialności za
tworzenie składów niezgodnych z regulaminem symulatora Train Driver 2! tworzenie składów niezgodnych z regulaminem symulatora Train Driver 2!
</span> </div>
<br />
&copy; Spythere 2021 | v{{ VERSION }} &copy; Spythere 2021 | v{{ VERSION }}
</footer> </footer>
</template> </template>
@@ -314,6 +316,8 @@ export default class App extends Vue {
}, },
]; ];
showSupporter = false;
chosenLocoPower = "loco-e"; chosenLocoPower = "loco-e";
chosenCarUseType = "car-passenger"; chosenCarUseType = "car-passenger";
@@ -479,6 +483,10 @@ export default class App extends Vue {
} }
downloadStock() { downloadStock() {
const fileName = prompt("Nazwij plik:", "sklad");
if (!fileName) return;
const stockString = this.stockList const stockString = this.stockList
.map((stock) => { .map((stock) => {
let s = let s =
@@ -493,8 +501,6 @@ export default class App extends Vue {
}) })
.join(";"); .join(";");
const fileName = prompt("Nazwij plik:", "sklad");
const blob = new Blob([stockString]); const blob = new Blob([stockString]);
const file = fileName + ".con"; const file = fileName + ".con";
@@ -505,8 +511,6 @@ export default class App extends Vue {
a.dataset.downloadurl = ["", a.download, a.href].join(":"); a.dataset.downloadurl = ["", a.download, a.href].join(":");
e.initEvent("click", true, false); e.initEvent("click", true, false);
a.dispatchEvent(e); a.dispatchEvent(e);
console.log(stockString);
} }
get locoDataList() { get locoDataList() {
@@ -516,6 +520,8 @@ export default class App extends Vue {
const locoVehiclesData = (vehicleDataJSON as VehicleData)[vehicleTypeKey]; const locoVehiclesData = (vehicleDataJSON as VehicleData)[vehicleTypeKey];
locoVehiclesData.forEach((loco) => { locoVehiclesData.forEach((loco) => {
if (loco[4] && !this.showSupporter) return;
const locoType = loco[0] as string; const locoType = loco[0] as string;
let length = 0, let length = 0,
@@ -599,6 +605,8 @@ export default class App extends Vue {
const carVehiclesData = (vehicleDataJSON as VehicleData)[vehicleTypeKey]; const carVehiclesData = (vehicleDataJSON as VehicleData)[vehicleTypeKey];
carVehiclesData.forEach((car) => { carVehiclesData.forEach((car) => {
if (car[3] && !this.showSupporter) return;
const carPropsData = vehiclePropsJSON.find((v) => const carPropsData = vehiclePropsJSON.find((v) =>
car[0].toString().includes(v.type) car[0].toString().includes(v.type)
); );
@@ -632,6 +640,10 @@ export default class App extends Vue {
const vehicle = this.chosenCar || this.chosenLoco; const vehicle = this.chosenCar || this.chosenLoco;
if (!vehicle) return; if (!vehicle) return;
if (vehicle.length + this.totalLength > 650) {
alert("Maksymalna długość składu to 650m!");
return;
}
const previousStock = const previousStock =
this.stockList.length > 0 this.stockList.length > 0
@@ -772,32 +784,25 @@ h2 {
/* MAIN SECTION */ /* MAIN SECTION */
main { main {
display: grid; /* display: grid; */
grid-template-areas: "loco car" "image list"; /* grid-template-areas:
gap: 4em 2em; "loco car"
"image image"
"stock stock"; */
align-content: flex-start; margin-top: 8em;
margin-top: 6em;
@media screen and (max-width: 800px) {
grid-template-areas: "loco" "car" "image" "list";
justify-content: center;
margin-top: 2.5em;
gap: 2em;
}
} }
.inputs { .inputs {
&_loco { display: flex;
grid-area: "loco"; justify-content: space-between;
@media screen and (max-width: 800px) {
flex-direction: column;
} }
&_car { &_car {
grid-area: "car";
&.disabled { &.disabled {
opacity: 0.75; opacity: 0.75;
pointer-events: none; pointer-events: none;
@@ -811,19 +816,44 @@ main {
} }
&_radio { &_radio {
label span {
padding: 0.25em 0.55em;
border: 2px solid white;
}
}
&_checkbox {
label span {
/* padding: 0.25em 0.55em; */
/* border: 2px solid white; */
color: #aaa;
&::before {
content: "";
display: inline-block;
width: 1.5ex;
height: 1.5ex;
background: #aaa;
margin-right: 0.5em;
}
}
input:checked + span::before {
background-color: $accentColor;
}
}
&_radio,
&_checkbox {
margin: 1em 0; margin: 1em 0;
label { label {
cursor: pointer; cursor: pointer;
margin-right: 0.5em; margin-right: 0.5em;
span { input {
padding: 0.25em 0.55em;
border: 2px solid white;
}
& > input {
display: none; display: none;
&:checked + span { &:checked + span {
@@ -858,23 +888,42 @@ main {
} }
} }
.images { .bottom {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap;
.image { margin-top: 2.5em;
position: relative;
grid-area: "image"; @media screen and (max-width: 800px) {
flex-direction: column;
align-items: center;
.image {
display: flex;
padding: 0 0 2em 0;
}
}
}
.spacer {
flex: 2 1 10%;
}
.image {
flex-grow: 2;
padding: 0 1em 0 0;
&__wrapper {
max-width: 380px; max-width: 380px;
width: 22em; width: 22em;
height: 13em; height: 13em;
border: 1px solid white; }
&-content { &__content {
height: 100%; border: 1px solid white;
} position: relative;
height: 100%;
img { img {
width: 100%; width: 100%;
@@ -900,28 +949,17 @@ main {
background: rgba(#000, 0.75); background: rgba(#000, 0.75);
} }
} }
button {
position: absolute;
right: 0;
top: 0;
margin: 0.25em;
}
img {
width: 100%;
height: 100%;
}
} }
.stock-list { .stock-list {
grid-area: "list"; flex-grow: 3;
width: 100%;
&_buttons { &_buttons {
button { button {
font-size: 0.9em; font-size: 0.9em;
padding: 0.2em 0.5em; padding: 0.4em 0.5em;
margin-bottom: 0.5em; margin-bottom: 0.5em;
} }
} }
@@ -934,6 +972,11 @@ main {
outline: none; outline: none;
cursor: pointer; cursor: pointer;
&.list-empty {
border: 1px solid whitesmoke;
padding: 0 0.5em;
}
&:focus .item-content { &:focus .item-content {
color: $accentColor; color: $accentColor;
} }
@@ -990,17 +1033,12 @@ main {
font-size: calc(0.75vw + 0.6rem); font-size: calc(0.75vw + 0.6rem);
} }
header { main {
font-size: 0.85em; margin-top: 3.5em;
} }
.images { header {
justify-content: center; font-size: 0.85em;
> .image {
width: 25em;
height: 15em;
}
} }
.input { .input {
@@ -1012,12 +1050,9 @@ main {
text-align: center; text-align: center;
} }
&_radio { &_radio,
display: flex; &_list,
justify-content: center; &_checkbox {
}
&_list {
display: flex; display: flex;
justify-content: center; justify-content: center;
} }