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

Przywrócono podział typów pojazdów w menu wyboru

Browse Source
This commit is contained in:
Spythere
2022-08-01 09:05:53 +02:00
parent 5505e0d475
commit 116b3d27ca
5 changed files with 194 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.vue
+1 -1
View File
@@ -150,7 +150,7 @@ main {
min-height: 75vh;
grid-template-columns: 1fr 2fr;
grid-template-rows: 350px auto;
grid-template-rows: 330px minmax(400px, 1fr);
padding: 0.5em;
}
src/components/InputsSection.vue
+122 -79
View File
@@ -4,7 +4,17 @@
<h2 class="input_header">WYBIERZ POJAZDY / WAGONY</h2>
<div class="input_list type">
<label for="locomotives-list">Pojazdy trakcyjne</label>
<div class="vehicle-types locos">
<button
v-for="locoType in locomotiveTypeList"
class="btn--choice"
:data-selected="locoType.id == store.chosenLocoPower"
@click="selectLocoType(locoType.id)"
>
{{ locoType.value }}
</button>
</div>
<select
id="locomotives-list"
v-model="store.chosenLoco"
@@ -21,7 +31,16 @@
</div>
<div class="input_list type">
<label for="locomotives-list">Wagony</label>
<div class="vehicle-types carwagons">
<button
v-for="carType in carTypeList"
class="btn--choice"
:data-selected="carType.id == store.chosenCarUseType"
@click="selectCarWagonType(carType.id)"
>
{{ carType.value }}
</button>
</div>
<select
id="carwagons-list"
@@ -95,6 +114,12 @@ import imageMixin from '../mixins/imageMixin';
import { useStore } from '../store';
import { isLocomotive } from '../utils/vehicleUtils';
interface ILocoType {
id: string;
value: string;
desc: string;
}
export default defineComponent({
components: {
ReadyStockList,
@@ -103,8 +128,41 @@ export default defineComponent({
mixins: [imageMixin],
data: () => ({
chosenLocomotiveType: '',
chosenCarWagonType: '',
locomotiveTypeList: [
{
id: 'loco-e',
value: 'ELEKTR',
desc: 'ELEKTRYCZNE',
},
{
id: 'loco-s',
value: 'SPAL',
desc: 'SPALINOWE',
},
{
id: 'loco-ezt',
value: 'EZT',
desc: 'ELEKTR. ZESPOŁY TRAKCYJNE',
},
{
id: 'loco-szt',
value: 'SZT',
desc: 'SPAL. ZESPOŁY TRAKCYJNE',
},
] as ILocoType[],
carTypeList: [
{
id: 'car-passenger',
value: 'PAS',
desc: 'PASAŻERSKIE',
},
{
id: 'car-cargo',
value: 'TOW',
desc: 'TOWAROWE',
},
],
}),
setup() {
@@ -115,36 +173,34 @@ export default defineComponent({
};
},
// mounted() {
// document.addEventListener('keydown', (ev) => {
// const keyName = ev.key.toLowerCase();
// if (keyName == 'enter') {
// ev.preventDefault();
// this.addVehicle();
// }
// if (keyName == 'backspace') {
// if (this.store.stockList.length == 0) return;
// const lastStock = this.store.stockList.slice(-1)[0];
// if (lastStock.count > 1) lastStock.count--;
// else this.store.stockList.splice(-1);
// }
// });
// },
computed: {
locoOptions() {
return this.store.locoDataList.sort((a, b) => (a.type > b.type ? 1 : -1));
return this.store.locoDataList
.sort((a, b) => (a.type > b.type ? 1 : -1))
.filter((loco) => loco.power == this.store.chosenLocoPower);
},
carOptions() {
return this.store.carDataList.sort((a, b) => (a.type > b.type ? 1 : -1));
return this.store.carDataList
.sort((a, b) => (a.type > b.type ? 1 : -1))
.filter((car) => car.useType == this.store.chosenCarUseType);
},
},
methods: {
selectLocoType(locoTypeId: string) {
this.store.chosenLocoPower = locoTypeId;
this.store.chosenVehicle = this.locoOptions[0];
this.store.chosenLoco = this.locoOptions[0];
},
selectCarWagonType(carWagonTypeId: string) {
this.store.chosenCarUseType = carWagonTypeId;
this.store.chosenVehicle = this.carOptions[0];
this.store.chosenCar = this.carOptions[0];
this.store.chosenCargo = null;
},
prepareSwapVehicles() {
this.store.swapVehicles = true;
},
@@ -256,66 +312,53 @@ export default defineComponent({
grid-row: 1;
grid-column: 1;
}
&_car {
&.disabled {
opacity: 0.75;
pointer-events: none;
}
.input_header {
margin-bottom: 1em;
}
.btn--choice {
margin-right: 0.5em;
font-weight: bold;
background-color: #444;
&[data-selected='true'] {
background-color: $accentColor;
color: black;
}
transition: all 120ms ease;
}
.input_list {
margin: 0.5em 0;
label {
display: block;
font-weight: bold;
color: $accentColor;
margin-bottom: 0.3em;
}
select:focus {
border-color: $accentColor;
}
}
.input {
&_header {
margin-bottom: 1em;
.input_actions {
display: flex;
flex-wrap: wrap;
button {
margin: 0.5em 0.5em 0 0;
}
}
&_list {
margin: 0.5em 0;
label {
display: block;
font-weight: bold;
color: $accentColor;
margin-bottom: 0.3em;
}
select:focus {
border-color: $accentColor;
}
}
&_list button {
margin-left: 0.5em;
font-weight: bold;
&:hover img {
border-color: $accentColor;
}
&:focus img {
border-color: $accentColor;
}
img {
border: 2px solid white;
padding: 0.25em;
height: 2.35em;
vertical-align: middle;
}
}
&_actions {
display: flex;
flex-wrap: wrap;
button {
margin: 0.5em 0.5em 0 0;
}
}
.vehicle-types {
margin-bottom: 0.5em;
}
@media screen and (max-width: $breakpointMd) {
src/components/ListSection.vue
+51 -18
View File
@@ -8,43 +8,70 @@
<button class="btn" @click="store.isRandomizerCardOpen = true">LOSUJ SKŁAD</button>
</div>
<div class="stock_actions" v-if="chosenStockVehicle">
<div class="stock_actions" :data-disabled="store.chosenStockListIndex == -1">
<b class="no">
POJAZD NR <span class="text--accent">{{ store.chosenStockListIndex + 1 }}</span> &nbsp;
</b>
<div class="count">
<button class="action-btn" @click="subStock(store.chosenStockListIndex)">
<button
class="action-btn"
:tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
@click="subStock(store.chosenStockListIndex)"
>
<img :src="icons.sub" alt="subtract vehicle count" />
1
</button>
<input type="number" min="1" name="stock-count" id="stock-count" v-model="chosenStockVehicle.count" />
<input
v-if="chosenStockVehicle"
v-model="chosenStockVehicle.count"
type="number"
min="1"
name="stock-count"
id="stock-count"
/>
<button class="action-btn" @click="addStock(store.chosenStockListIndex)">
<input v-else id="stock-count" type="number" value="0" :tabindex="store.chosenStockListIndex == -1 ? -1 : 0" />
<button
class="action-btn"
:tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
@click="addStock(store.chosenStockListIndex)"
>
<img :src="icons.add" alt="add vehicle count" />
1
</button>
</div>
<button class="action-btn" @click="moveUpStock(store.chosenStockListIndex)">
<button
class="action-btn"
:tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
@click="moveUpStock(store.chosenStockListIndex)"
>
<img :src="icons.higher" alt="move up vehicle" />
Przenieś wyżej
</button>
<button class="action-btn" @click="moveDownStock(store.chosenStockListIndex)">
<button
class="action-btn"
:tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
@click="moveDownStock(store.chosenStockListIndex)"
>
<img :src="icons.lower" alt="move down vehicle" />
Przenieś niżej
</button>
<button class="action-btn" @click="removeStock(store.chosenStockListIndex)">
<button
class="action-btn"
:tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
@click="removeStock(store.chosenStockListIndex)"
>
<img :src="icons.remove" alt="remove vehicle" />
Usuń
</button>
</div>
<div class="stock_actions no-chosen-vehicle" v-else>Wybierz pojazd z listy poniżej, aby pokazać opcje</div>
<div class="stock_specs">
<div>
Masa: <span class="text--accent">{{ store.totalMass }}t</span> | Długość:
@@ -234,14 +261,15 @@ export default defineComponent({
const chosenLoco = this.store.locoDataList.find((v) => v.type == vehicle.type) || null;
this.store.chosenVehicle = chosenLoco;
this.store.chosenLoco = chosenLoco;
// this.store.chosenCargo = null;
this.store.chosenLocoPower = vehicle.useType;
} else {
const chosenCar = this.store.carDataList.find((v) => v.type == vehicle.type) || null;
this.store.chosenVehicle = chosenCar;
this.store.chosenCar = chosenCar;
this.store.chosenCargo = vehicle.cargo || null;
this.store.chosenCarUseType = vehicle.useType;
}
if (this.store.swapVehicles) {
@@ -436,6 +464,16 @@ export default defineComponent({
margin: 1em 0;
outline: 1px solid white;
&[data-disabled='true'] {
opacity: 0.8;
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
pointer-events: none;
}
&.no-chosen-vehicle {
font-size: 1.05em;
padding: 0.5em;
@@ -454,16 +492,13 @@ export default defineComponent({
margin: 0.25em;
padding: 0.25em;
border: 2px solid gray;
border-radius: 0.25em;
&:focus-visible {
outline: 1px solid white;
}
img {
vertical-align: text-bottom;
margin-right: 0.5em;
margin-right: 0.25em;
width: 1.1em;
height: 1.1em;
@@ -479,13 +514,11 @@ export default defineComponent({
ul {
position: relative;
overflow-y: auto;
overflow-x: hidden;
overflow: auto;
height: 50vh;
min-height: 500px;
margin-top: 1em;
padding: 0.25em;
}
ul > li {
@@ -503,7 +536,7 @@ ul > li {
}
&.list-empty {
outline: 1px solid white;
border: 1px solid white;
padding: 0.5em;
}
}
src/components/TrainImageSection.vue
+8 -9
View File
@@ -14,15 +14,14 @@
</div>
<div class="train-image__info" v-if="store.chosenVehicle">
<b class="text--accent">{{ store.chosenVehicle.type }} </b>
<b class="text--accent">{{ store.chosenVehicle.type }}</b> &bull;
<b style="color: #ccc">{{
vehicleTypes[
isLocomotive(store.chosenVehicle) ? store.chosenVehicle.power : store.chosenVehicle.useType || 'loco-e'
]
}}</b>
<div style="color: #ccc">
<b>{{
vehicleTypes[
isLocomotive(store.chosenVehicle) ? store.chosenVehicle.power : store.chosenVehicle.useType || 'loco-e'
]
}}</b>
<div>
{{ store.chosenVehicle.length }}m | {{ store.chosenVehicle.mass }}t |
{{ store.chosenVehicle.maxSpeed }} km/h
@@ -103,13 +102,12 @@ export default defineComponent({
grid-row: 2;
grid-column: 1;
display: flex;
margin-top: 2em;
}
.train-image {
&__wrapper {
text-align: center;
}
&__content {
@@ -156,6 +154,7 @@ export default defineComponent({
.train-image__info {
margin: 1em 0;
font-size: 1.1em;
padding: 0 1em;
b {
font-size: 1.1em;
src/styles/global.scss
+12
View File
@@ -113,6 +113,18 @@ button.btn {
font-weight: bold;
transition: all 250ms;
border: none;
&:focus-visible {
outline: 1px solid white;
}
}
&--choice {
padding: 0.25em 0.3em;
&:focus-visible {
outline: 1px solid white;
}
}
}