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

grouping generated stock (wip)

Browse Source
This commit is contained in:
Spythere
2024-01-30 16:39:16 +01:00
parent bd9af9a630
commit 6101c9bfb2
8 changed files with 133 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.vue
+1 -1
View File
@@ -34,7 +34,7 @@ export default defineComponent({
color: $textColor;
font-size: 1em;
padding: 1em 0.5em;
padding: 0;
@media screen and (max-width: $breakpointMd) {
font-size: calc(0.7rem + 0.75vw);
src/components/app/MainContainer.vue
+12 -7
View File
@@ -8,11 +8,11 @@
</template>
<script lang="ts">
import { defineComponent } from "vue";
import LogoSection from "../sections/LogoSection.vue";
import InputsSection from "../sections/InputsSection.vue";
import TrainImageSection from "../sections/TrainImageSection.vue";
import StockSection from "../sections/StockSection.vue";
import { defineComponent } from 'vue';
import LogoSection from '../sections/LogoSection.vue';
import InputsSection from '../sections/InputsSection.vue';
import TrainImageSection from '../sections/TrainImageSection.vue';
import StockSection from '../sections/StockSection.vue';
export default defineComponent({
components: { LogoSection, InputsSection, TrainImageSection, StockSection },
@@ -20,18 +20,23 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
@import "../../styles/global.scss";
@import '../../styles/global.scss';
main {
display: grid;
gap: 1em;
width: 100%;
max-width: 1300px;
max-width: 1350px;
min-height: 75vh;
grid-template-columns: 1fr 2fr;
grid-template-rows: auto 360px minmax(400px, 1fr);
background-color: darken($color: $bgColor, $amount: 5);
border-radius: 1em;
padding: 1em;
}
@media screen and (max-width: $breakpointMd) {
src/components/common/Checkbox.vue
+58
View File
@@ -0,0 +1,58 @@
<template>
<label>
<input type="checkbox" v-model="model" />
<div><slot /></div>
</label>
</template>
<script lang="ts" setup>
const model = defineModel();
</script>
<style lang="scss" scoped>
label {
cursor: pointer;
text-transform: uppercase;
transition: color 200ms;
}
div {
padding: 0.25em 0.5em;
color: white;
background-color: #222;
border-radius: 0.25em;
user-select: none;
&::before {
content: '\2716';
margin-right: 0.5em;
color: #aaa;
}
}
input {
position: absolute;
clip: rect(1px, 1px, 1px, 1px);
padding: 0;
border: 0;
height: 1px;
width: 1px;
overflow: hidden;
&:focus-visible + div {
outline: 1px solid white;
}
&:checked + div {
color: palegreen;
&::before {
color: palegreen;
content: '\2714';
}
}
}
</style>
src/components/tabs/StockGeneratorTab.vue
+32 -1
View File
@@ -28,6 +28,12 @@
<input type="number" v-model="maxCarCount" step="1" max="60" min="1" />
</label>
</div>
<!-- <hr style="margin: 1em 0" /> -->
<!-- <div class="generator_options">
<Checkbox v-model="isCarGroupingEnabled">Grupuj wylosowane wagony (ustawia podobne wagony obok siebie w składzie)</Checkbox>
</div> -->
</div>
<div>
@@ -105,7 +111,6 @@ import warningsMixin from '../../mixins/warningsMixin';
export default defineComponent({
name: 'stock-generator',
mixins: [stockMixin, warningsMixin],
data() {
@@ -121,6 +126,8 @@ export default defineComponent({
maxLength: 650,
maxCarCount: 50,
isCarGroupingEnabled: false,
store: useStore(),
};
},
@@ -163,6 +170,15 @@ export default defineComponent({
this.excludedCarTypes.length = 0;
},
// WIP
groupStock(stockList: IStock[]) {
if (!this.isCarGroupingEnabled) return false;
stockList.sort((s1, s2) => {
return (s1.constructionType + s1.cargo?.id).localeCompare(s2.constructionType + s2.cargo?.id);
});
},
generateStock(empty = false) {
const generatedChosenStockList = this.chosenCargoTypes.reduce(
(acc, type) => {
@@ -237,6 +253,10 @@ export default defineComponent({
}
}
const bestStockList = bestGeneration.stockList;
this.groupStock(bestStockList);
this.store.stockList = bestGeneration.stockList;
this.store.stockSectionMode = 'stock-list';
},
@@ -283,6 +303,11 @@ export default defineComponent({
@import '../../styles/global.scss';
@import '../../styles/tab.scss';
h2 {
margin-top: 0;
margin-bottom: 0.5em;
}
.generator_cargo,
.generator_vehicles {
display: grid;
@@ -323,6 +348,12 @@ export default defineComponent({
gap: 1em;
}
.generator_options {
display: flex;
flex-direction: column;
gap: 0.5em;
}
.generator_warning {
background-color: $accentColor;
padding: 0.5em;
src/components/tabs/StockListTab.vue
+14 -72
View File
@@ -33,27 +33,17 @@
</div>
<div class="stock_controls" :data-disabled="store.chosenStockListIndex == -1">
<b v-if="store.chosenStockListIndex >= 0">
{{ $t('stocklist.vehicle-no') }}
<span class="text--accent">{{ store.chosenStockListIndex + 1 }}</span>
&nbsp;
</b>
<b v-else>
{{ $t('stocklist.no-vehicle-chosen') }}
</b>
<button class="btn" :tabindex="store.chosenStockListIndex == -1 ? -1 : 0" @click="moveUpStock(store.chosenStockListIndex)">
<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" :tabindex="store.chosenStockListIndex == -1 ? -1 : 0" @click="moveDownStock(store.chosenStockListIndex)">
<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" :tabindex="store.chosenStockListIndex == -1 ? -1 : 0" @click="removeStock(store.chosenStockListIndex)">
<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>
@@ -80,15 +70,13 @@
</div>
<div class="stock_spawn-settings">
<label v-if="store.stockSupportsColdStart" :data-checked="store.isColdStart">
<input type="checkbox" v-model="store.isColdStart" />
<Checkbox v-if="store.stockSupportsColdStart" v-model="store.isColdStart">
{{ $t('stocklist.coldstart-info') }}
</label>
</Checkbox>
<label v-if="store.stockSupportsDoubleManning" :data-checked="store.isDoubleManned">
<input type="checkbox" v-model="store.isDoubleManned" />
<Checkbox v-if="store.stockSupportsDoubleManning" v-model="store.isDoubleManned">
{{ $t('stocklist.doublemanning-info') }}
</label>
</Checkbox>
</div>
<div class="stock_warnings" v-if="stockHasWarnings">
@@ -122,7 +110,7 @@
<div class="stock-info">{{ $t('stocklist.list-empty') }}</div>
</li>
<TransitionGroup name="stock-list-anim">
<TransitionGroup name="stock-list-anim" v-else>
<li
v-for="(stock, i) in store.stockList"
:key="stock.id"
@@ -168,10 +156,11 @@ import imageMixin from '../../mixins/imageMixin';
import stockPreviewMixin from '../../mixins/stockPreviewMixin';
import StockThumbnails from '../utils/StockThumbnails.vue';
import stockMixin from '../../mixins/stockMixin';
import Checkbox from '../common/Checkbox.vue';
export default defineComponent({
name: 'stock-list',
components: { StockThumbnails },
components: { StockThumbnails, Checkbox },
mixins: [warningsMixin, imageMixin, stockMixin, stockPreviewMixin],
@@ -409,8 +398,9 @@ export default defineComponent({
@import '../../styles/tab.scss';
.stock-list-tab {
display: grid;
grid-gap: 0.5em;
display: flex;
flex-direction: column;
gap: 0.5em;
}
.warning {
@@ -430,9 +420,9 @@ export default defineComponent({
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 0.5em;
flex-wrap: wrap;
padding: 0.5em;
@@ -447,21 +437,6 @@ export default defineComponent({
pointer-events: none;
}
input#stock-count {
width: 3em;
margin: 0;
padding: 0.25em;
outline: none;
border: none;
}
button {
img {
margin-right: 0.25em;
}
}
}
.stock_actions {
@@ -484,39 +459,6 @@ export default defineComponent({
.stock_spawn-settings {
display: flex;
gap: 0.5em;
label > input {
position: absolute;
clip: rect(1px, 1px, 1px, 1px);
padding: 0;
border: 0;
height: 1px;
width: 1px;
overflow: hidden;
}
label {
padding: 0.25em 0.5em;
border-radius: 0.25em;
background-color: #222;
color: #aaa;
cursor: pointer;
text-transform: uppercase;
transition: color 200ms;
&::before {
content: '\2716';
}
}
label[data-checked='true'] {
color: palegreen;
&::before {
content: '\2714';
}
}
}
.real-stock-info {
src/styles/global.scss
+9 -2
View File
@@ -3,7 +3,7 @@ $breakpointSm: 550px;
$bgColor: #2b3552;
$textColor: #fff;
$secondaryColor: #222;
$secondaryColor: #1b1b1b;
$accentColor: #e4c428;
@font-face {
@@ -118,7 +118,7 @@ button {
padding: 0.4em 0.75em;
outline: none;
background-color: #222;
background-color: $secondaryColor;
border-radius: 8px;
font-weight: bold;
@@ -227,6 +227,13 @@ ul {
}
}
hr {
height: 3px;
background-color: white;
outline: none;
margin: 0;
}
.g-card {
position: fixed;
top: 1em;
src/styles/tab.scss
+1 -8
View File
@@ -1,4 +1,4 @@
@import "./global.scss";
@import './global.scss';
.tab {
height: 100%;
@@ -58,13 +58,6 @@
}
}
hr {
height: 3px;
background-color: white;
outline: none;
margin: 0;
}
@media only screen and (max-width: 470px) {
.tab_attributes {
label {
src/views/AppContainerView.vue
+6 -4
View File
@@ -6,11 +6,11 @@
</template>
<script lang="ts">
import { defineComponent } from "vue";
import { useStore } from "../store";
import { defineComponent } from 'vue';
import { useStore } from '../store';
import MainContainer from "../components/app/MainContainer.vue";
import FooterVue from "../components/app/Footer.vue";
import MainContainer from '../components/app/MainContainer.vue';
import FooterVue from '../components/app/Footer.vue';
export default defineComponent({
components: {
@@ -31,5 +31,7 @@ export default defineComponent({
display: flex;
flex-direction: column;
align-items: center;
padding: 0.5em;
}
</style>