Spythere/genera-tor
1
0
Fork 0
mirror of https://github.com/Spythere/genera-tor.git synced 2026-05-03 13:38:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: organized files, refreshed design and layout

Browse Source
This commit is contained in:
Spythere
2026-01-15 19:55:02 +01:00
parent 4d06b85fc1
commit 1f8365340b
23 changed files with 510 additions and 409 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+1 -1
View File
@@ -13,7 +13,7 @@
}, },
"dependencies": { "dependencies": {
"axios": "^1.6.2", "axios": "^1.6.2",
"lucide-vue-next": "^0.525.0", "lucide-vue-next": "^0.562.0",
"pinia": "^2.1.7", "pinia": "^2.1.7",
"showdown": "^2.1.0", "showdown": "^2.1.0",
"vue": "^3.3.11", "vue": "^3.3.11",
src/App.vue
+20 -48
View File
@@ -1,47 +1,41 @@
<template> <template>
<div id="app_wrapper"> <div id="app_wrapper">
<UpdateCard />
<router-view />
<transition name="slide-anim"> <transition name="slide-anim">
<div v-if="needRefresh" class="update-prompt" @click="updateServiceWorker(true)"> <UpdateCard />
{{ $t('update.update-available-text') }}
<u>{{ $t('update.update-available-underline') }}</u>
</div>
</transition> </transition>
<footer> <transition name="slide-anim">
&copy; <a href="https://td2.info.pl/profile/?u=20777">Spythere</a> <UpdatePrompt />
{{ new Date().getUTCFullYear() }} | </transition>
<button class="g-button text" @click="store.updateCardOpen = true">v{{ appVersion }}</button>
</footer> <div class="app-body">
<Navbar />
<main>
<RouterView />
</main>
</div>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { useRegisterSW } from 'virtual:pwa-register/vue';
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import packageInfo from '../package.json'; import UpdateCard from './components/Global/UpdateCard.vue';
import { useStore } from './store/store';
import orderStorageMixin from './mixins/orderStorageMixin'; import orderStorageMixin from './mixins/orderStorageMixin';
import StorageManager from './managers/storageManager'; import { useStore } from './store/store';
import packageInfo from '../package.json';
import axios from 'axios'; import axios from 'axios';
import UpdateCard from './components/UpdateCard.vue'; import StorageManager from './managers/storageManager';
import Navbar from './components/App/Navbar.vue';
import UpdatePrompt from './components/Global/UpdatePrompt.vue';
const STORAGE_VERSION_KEY = 'app_version'; const STORAGE_VERSION_KEY = 'app_version';
export default defineComponent({ export default defineComponent({
components: { UpdateCard }, components: { UpdateCard, UpdatePrompt, Navbar },
mixins: [orderStorageMixin], mixins: [orderStorageMixin],
setup() {
const { offlineReady, needRefresh, updateServiceWorker } = useRegisterSW({ immediate: true });
return { offlineReady, needRefresh, updateServiceWorker };
},
data() { data() {
return { appVersion: packageInfo.version, store: useStore() }; return { appVersion: packageInfo.version, store: useStore() };
}, },
@@ -69,7 +63,7 @@ export default defineComponent({
const id = query.get('sceneryId'); const id = query.get('sceneryId');
if (id != null) { if (id != null) {
this.store.orderMode = 'OrderTrainPicker'; this.store.panelMode = 'OrderTrainPickerPanel';
} }
}, },
@@ -130,31 +124,9 @@ export default defineComponent({
#app { #app {
color: white; color: white;
min-height: 100vh; min-height: 100vh;
} }
.update-prompt {
position: fixed;
bottom: 0;
left: 0;
padding: 0.5em;
font-weight: bold;
text-align: center;
width: 100%;
background-color: colors.$accentCol;
cursor: pointer;
}
footer {
text-align: center;
padding: 0.5em 0;
}
@media screen and (max-width: 500px) { @media screen and (max-width: 500px) {
#app { #app {
font-size: calc(1vw + 0.65rem); font-size: calc(1vw + 0.65rem);
src/components/App/Navbar.vue
+74
View File
@@ -0,0 +1,74 @@
<template>
<nav class="app-navbar">
<div class="navbar-brand">
<img src="/favicon.ico" alt="generator logo" width="30" />
<b>
Genera<span class="text--accent">TOR</span> <sup class="text--grayed">v{{ version }}</sup>
</b>
</div>
<div class="navbar-actions">
<button class="g-button action icon" @click="switchDarkMode">
<LucideMoon :size="20" v-if="store.orderDarkMode" />
<LucideSun :size="20" v-else />
</button>
<button class="g-button action icon" @click="switchLang">
<LucideGlobe :size="20" />
<span>{{ store.currentAppLocale == 'pl' ? 'POL' : 'ENG' }}</span>
</button>
</div>
</nav>
</template>
<script setup lang="ts">
import { LucideGlobe, LucideMoon, LucideSun } from 'lucide-vue-next';
import { version } from '../../../package.json';
import { useStore } from '../../store/store';
const store = useStore();
function switchDarkMode() {
store.orderDarkMode = !store.orderDarkMode;
window.localStorage.setItem('dark-mode', `${store.orderDarkMode}`);
}
function switchLang() {
store.changeLang(store.currentAppLocale == 'pl' ? 'en' : 'pl');
}
</script>
<style lang="scss" scoped>
.app-navbar {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 40px;
padding: 0.25em;
background-color: #1c1c1c;
}
.navbar-brand {
display: flex;
align-items: center;
gap: 0.5em;
sup {
font-size: 0.75em;
}
}
.navbar-actions {
display: flex;
align-items: center;
gap: 0.5em;
button {
padding: 0.5em;
gap: 0.25em;
border-radius: 0.5em;
}
}
</style>
src/components/OrderHelper.vue → src/components/Global/OrderHelper.vue
+3 -4
View File
@@ -29,18 +29,17 @@
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import { useStore } from '../store/store'; import { useStore } from '../../store/store';
import orderHelperData from '../data/orderHelperData.json';
export default defineComponent({ export default defineComponent({
setup() { setup() {
return { store: useStore(), orderHelperData }; return { store: useStore() };
} }
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@use '../styles/colors'; @use '../../styles/colors';
.content { .content {
width: 100%; width: 100%;
src/components/UpdateCard.vue → src/components/Global/UpdateCard.vue
+1 -1
View File
@@ -23,7 +23,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import { computed, ref, watch } from 'vue'; import { computed, ref, watch } from 'vue';
import { Converter } from 'showdown'; import { Converter } from 'showdown';
import { useStore } from '../store/store'; import { useStore } from '../../store/store';
const converter = new Converter(); const converter = new Converter();
const store = useStore(); const store = useStore();
src/components/Global/UpdatePrompt.vue
+34
View File
@@ -0,0 +1,34 @@
<template>
<div v-if="needRefresh" class="update-prompt" @click="updateServiceWorker(true)">
{{ $t('update.update-available-text') }}
<u>{{ $t('update.update-available-underline') }}</u>
</div>
</template>
<script setup lang="ts">
import { useRegisterSW } from 'virtual:pwa-register/vue';
const { needRefresh, updateServiceWorker } = useRegisterSW({ immediate: true });
</script>
<style lang="scss" scoped>
@use '../../styles/colors';
.update-prompt {
position: fixed;
bottom: 0;
left: 0;
padding: 0.5em;
z-index: 200;
font-weight: bold;
text-align: center;
width: 100%;
background-color: colors.$accentCol;
cursor: pointer;
}
</style>
src/components/Order.vue → src/components/Orders/Order.vue
+33 -18
View File
@@ -1,28 +1,33 @@
<template> <template>
<div class="order" :class="{ dark: store.orderDarkMode }"> <div class="order-container">
<div class="order_content"> <OrderSideBar />
<transition name="order-anim" mode="out-in">
<keep-alive> <div class="order" :class="{ dark: store.orderDarkMode }">
<component :is="chosenOrderComponent" :key="chosenOrderComponent.name"></component> <div class="order_content">
</keep-alive> <transition name="order-anim" mode="out-in">
</transition> <keep-alive>
<OrderFooter /> <component :is="chosenOrderComponent" :key="chosenOrderComponent.name"></component>
</keep-alive>
</transition>
<OrderFooter />
</div>
</div> </div>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import { useStore } from '../store/store'; import { useStore } from '../../store/store';
import OrderNVue from './OrderN.vue'; import OrderN from './OrderN.vue';
import OrderSVue from './OrderS.vue'; import OrderS from './OrderS.vue';
import OrderO from './OrderO.vue';
import OrderFooter from './OrderFooter.vue'; import OrderFooter from './OrderFooter.vue';
import OrderOVue from './OrderO.vue'; import OrderSideBar from './OrderSideBar.vue';
const orderComponents = { orderN: OrderNVue, orderS: OrderSVue, orderO: OrderOVue }; const orderComponents = { orderN: OrderN, orderS: OrderS, orderO: OrderO };
export default defineComponent({ export default defineComponent({
components: { OrderNVue, OrderSVue, OrderFooter }, components: { OrderN, OrderO, OrderS, OrderFooter, OrderSideBar },
setup() { setup() {
const store = useStore(); const store = useStore();
@@ -39,22 +44,32 @@ export default defineComponent({
</script> </script>
<style lang="scss"> <style lang="scss">
@use '../styles/colors'; @use '../../styles/colors';
$darkModeTextCol: #eee; $darkModeTextCol: #eee;
.order-container {
display: flex;
align-items: start;
max-width: 800px;
@media screen and (max-width: 650px) {
flex-direction: column;
}
}
.order { .order {
background-color: white; background-color: white;
color: black; color: black;
height: calc(100vh - 5em);
overflow: auto;
&.dark { &.dark {
background-color: colors.$bgColDarker; background-color: colors.$bgColDarker;
color: $darkModeTextCol; color: $darkModeTextCol;
} }
max-height: 95vh;
overflow: auto;
font-size: 15px; font-size: 15px;
h2 { h2 {
src/components/OrderFooter.vue → src/components/Orders/OrderFooter.vue
+2 -2
View File
@@ -52,8 +52,8 @@
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import orderFooterMixin from '../mixins/orderFooterMixin'; import orderFooterMixin from '../../mixins/orderFooterMixin';
import { useStore } from '../store/store'; import { useStore } from '../../store/store';
export default defineComponent({ export default defineComponent({
mixins: [orderFooterMixin], mixins: [orderFooterMixin],
src/components/OrderN.vue → src/components/Orders/OrderN.vue
+2 -2
View File
@@ -334,8 +334,8 @@
<script lang="ts"> <script lang="ts">
import { defineComponent, reactive } from 'vue'; import { defineComponent, reactive } from 'vue';
import { useStore } from '../store/store'; import { handleOrderPlaceholders } from '../../handlers/orderPlaceholderHandler';
import { handleOrderPlaceholders } from '../handlers/orderPlaceholderHandler'; import { useStore } from '../../store/store';
type TOrderRows = 1 | 2 | 3 | 4 | 5; type TOrderRows = 1 | 2 | 3 | 4 | 5;
src/components/OrderO.vue → src/components/Orders/OrderO.vue
+3 -4
View File
@@ -77,7 +77,7 @@
<script lang="ts"> <script lang="ts">
import { defineComponent, reactive } from 'vue'; import { defineComponent, reactive } from 'vue';
import { useStore } from '../store/store'; import { useStore } from '../../store/store';
export default defineComponent({ export default defineComponent({
name: 'OrderO', name: 'OrderO',
@@ -122,11 +122,10 @@ export default defineComponent({
if (this.order.orderList.some((row) => row.name)) { if (this.order.orderList.some((row) => row.name)) {
message += `\n--------\n<b>[ 1 ]</b>`; message += `\n--------\n<b>[ 1 ]</b>`;
message += '\n1) zmniejszyć prędkość jazdy i zachować ostrożność' message += '\n1) zmniejszyć prędkość jazdy i zachować ostrożność';
message += '\n2) jechać ostrożnie (j.o.)\n' message += '\n2) jechać ostrożnie (j.o.)\n';
} }
for (let i = 0; i < this.order.orderList.length; i++) { for (let i = 0; i < this.order.orderList.length; i++) {
const row = this.order.orderList[i]; const row = this.order.orderList[i];
if (!row.name) continue; if (!row.name) continue;
src/components/OrderS.vue → src/components/Orders/OrderS.vue
+5 -3
View File
@@ -60,7 +60,9 @@
holder="nazwa sem." holder="nazwa sem."
:radio-checked="order.rows[0].radio1 == 'radio-1a-1'" :radio-checked="order.rows[0].radio1 == 'radio-1a-1'"
/> />
<span v-if="order.rows[0].optionSignal == 'drogowskazowego'"> (odnoszącego się do wyjazdu pociągu)</span> <span v-if="order.rows[0].optionSignal == 'drogowskazowego'">
(odnoszącego się do wyjazdu pociągu)</span
>
<br /> <br />
</label> </label>
<hr /> <hr />
@@ -284,8 +286,8 @@
<script lang="ts"> <script lang="ts">
import { defineComponent, reactive } from 'vue'; import { defineComponent, reactive } from 'vue';
import { handleOrderPlaceholders } from '../handlers/orderPlaceholderHandler'; import { handleOrderPlaceholders } from '../../handlers/orderPlaceholderHandler';
import { useStore } from '../store/store'; import { useStore } from '../../store/store';
type TOrderRows = 1 | 2 | 3 | 4; type TOrderRows = 1 | 2 | 3 | 4;
src/components/SideBar.vue → src/components/Orders/OrderSideBar.vue
+5 -6
View File
@@ -23,7 +23,7 @@
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import { useStore } from '../store/store'; import { useStore } from '../../store/store';
export default defineComponent({ export default defineComponent({
data() { data() {
@@ -61,11 +61,11 @@ export default defineComponent({
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@use '../styles/colors'; @use '../../styles/colors';
.sidebar_content { .sidebar_content {
display: grid; display: flex;
grid-template-rows: repeat(3, 1fr); flex-direction: column;
gap: 0.25em; gap: 0.25em;
font-size: 1.5em; font-size: 1.5em;
@@ -128,8 +128,7 @@ button.option-save {
@media screen and (max-width: 650px) { @media screen and (max-width: 650px) {
.sidebar_content { .sidebar_content {
display: flex; flex-direction: row;
justify-content: space-between;
& > button { & > button {
height: 40px; height: 40px;
src/components/OrderList.vue → src/components/Panels/OrderListPanel.vue
+4 -4
View File
@@ -50,9 +50,9 @@
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import orderStorageMixin from '../mixins/orderStorageMixin'; import orderStorageMixin from '../../mixins/orderStorageMixin';
import { useStore } from '../store/store'; import { useStore } from '../../store/store';
import { LocalStorageOrder } from '../types/orderTypes'; import { LocalStorageOrder } from '../../types/orderTypes';
export default defineComponent({ export default defineComponent({
name: 'OrderList', name: 'OrderList',
@@ -114,7 +114,7 @@ export default defineComponent({
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@use '../styles/colors'; @use '../../styles/colors';
.list { .list {
&-move, &-move,
src/components/OrderMessage.vue → src/components/Panels/OrderMessagePanel.vue
+65 -40
View File
@@ -8,36 +8,33 @@
</p> </p>
<div class="message_actions"> <div class="message_actions">
<button class="g-button action" @click="saveOrder"> <button class="g-button action icon" @click="saveOrder">
<LucideSave />
{{ $t('order-message.button-save') }} {{ $t('order-message.button-save') }}
</button> </button>
<button class="g-button action" @click="copyMessage">
<button class="g-button action icon" @click="copyMessage">
<LucideCopy />
{{ $t('order-message.button-copy') }} {{ $t('order-message.button-copy') }}
</button> </button>
<button <button
class="g-button action" class="g-button action icon"
:data-disabled="!store.chosenLocalOrderId" :data-disabled="!store.chosenLocalOrderId"
@click="updateOrder" @click="updateOrder"
> >
<LucidePencil />
{{ $t('order-message.button-update') }} {{ $t('order-message.button-update') }}
<span class="text--accent" <span class="text--accent" v-if="store.chosenLocalOrderId">#{{ store.chosenLocalOrderId.split('-')[1] }} </span>
>{{ store.chosenLocalOrderId && `#${store.chosenLocalOrderId.split('-')[1]}` }} </button>
</span>
<button class="g-button action icon" @click="resetOrder">
<LucideRotateCcw />
{{ $t('order-message.button-reset') }}
</button> </button>
</div> </div>
<div class="message_checkboxes"> <div class="message_checkboxes">
<label for="dark-mode" class="g-checkbox">
<input
type="checkbox"
name="dark-mode"
id="dark-mode"
v-model="store.orderDarkMode"
@change="onCheckboxChange"
/>
<span>{{ $t('order-options.dark-mode') }}</span>
</label>
<label for="copy-increment" class="g-checkbox"> <label for="copy-increment" class="g-checkbox">
<input <input
type="checkbox" type="checkbox"
@@ -80,23 +77,22 @@
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import { useStore } from '../store/store'; import orderStorageMixin from '../../mixins/orderStorageMixin';
import orderValidationMixin from '../../mixins/orderValidationMixin';
import saveIcon from '../assets/icon-save.svg'; import { useStore } from '../../store/store';
import orderStorageMixin from '../mixins/orderStorageMixin'; import { currentFormattedHours, currentFormattedMinutes } from '../../utils/dateUtils';
import orderValidationMixin from '../mixins/orderValidationMixin'; import { LucideCopy, LucidePencil, LucideRotateCcw, LucideSave } from 'lucide-vue-next';
import { currentFormattedHours, currentFormattedMinutes } from '../utils/dateUtils';
export default defineComponent({ export default defineComponent({
name: 'OrderMessage', name: 'OrderMessage',
components: { LucideCopy, LucidePencil, LucideRotateCcw, LucideSave },
mixins: [orderStorageMixin, orderValidationMixin], mixins: [orderStorageMixin, orderValidationMixin],
data() { data() {
return { return {
saveIcon,
actionMonit: '', actionMonit: '',
monitTimeout: undefined as number | undefined, monitTimeout: null as number | null,
incrementOnSave: true, incrementOnSave: true,
incrementOnCopy: true, incrementOnCopy: true,
@@ -143,25 +139,20 @@ export default defineComponent({
}, },
showActionMonit(text: string) { showActionMonit(text: string) {
if (this.monitTimeout) { if (this.monitTimeout != null) {
this.actionMonit = ''; this.actionMonit = '';
clearTimeout(this.monitTimeout); clearTimeout(this.monitTimeout);
setTimeout(() => { setTimeout(() => {
this.actionMonit = text; this.actionMonit = text;
}, 100);
this.monitTimeout = window.setTimeout(() => { } else {
this.actionMonit = ''; this.actionMonit = text;
}, 5000);
}, 300);
return;
} }
this.actionMonit = text;
this.monitTimeout = window.setTimeout(() => { this.monitTimeout = window.setTimeout(() => {
this.actionMonit = ''; this.actionMonit = '';
this.monitTimeout = null;
}, 5000); }, 5000);
}, },
@@ -248,13 +239,44 @@ export default defineComponent({
this.showActionMonit(this.$t('order-message.success-update-html')); this.showActionMonit(this.$t('order-message.success-update-html'));
break; break;
} }
},
resetOrder() {
const order = this.store[this.store.chosenOrderType];
// TODO
// Object.keys(store.orderData.header).forEach((k) => {
// store.orderData['header'][k as keyof IOrderHeader] = '';
// });
// Object.keys(store.orderData.footer).forEach((k) => {
// store.orderData['footer'][k as keyof IOrderFooter] = '';
// });
// store.orderData.instructions.forEach((instruction) => {
// instruction.active = false;
// Object.keys(instruction.inputFields).forEach((k) => {
// instruction.inputFields[k] = '';
// });
// if (instruction.listFields) {
// instruction.listFields.forEach((field) => {
// Object.keys(field.values).forEach((k) => {
// field.active = false;
// field.values[k] = '';
// });
// });
// }
// });
} }
} }
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@use '../styles/colors'; @use '../../styles/colors';
.order-message { .order-message {
h3 { h3 {
@@ -289,10 +311,13 @@ export default defineComponent({
} }
.message_actions { .message_actions {
display: flex; display: grid;
align-items: center; grid-template-columns: repeat(2, 1fr);
justify-content: center; gap: 0.5em;
margin-top: 1em;
button.icon {
gap: 0.5em;
}
button img { button img {
height: 2ch; height: 2ch;
src/components/OrderTrainPicker.vue → src/components/Panels/OrderTrainPickerPanel.vue
+9 -9
View File
@@ -111,16 +111,16 @@
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import { useStore } from '../store/store'; import http from '../../http';
import { useStore } from '../../store/store';
import { API } from '../../types/apiTypes';
import { ISceneryData } from '../../types/dataTypes';
import { import {
currentFormattedDate, currentFormattedDate,
currentFormattedHours, currentFormattedHours,
currentFormattedMinutes currentFormattedMinutes
} from '../utils/dateUtils'; } from '../../utils/dateUtils';
import http from '../http'; import { getRegionNameById } from '../../utils/sceneryUtils';
import { ISceneryData } from '../types/dataTypes';
import { API } from '../types/apiTypes';
import { getRegionNameById } from '../utils/sceneryUtils';
export default defineComponent({ export default defineComponent({
name: 'order-train-picker', name: 'order-train-picker',
@@ -261,7 +261,7 @@ export default defineComponent({
sceneryAbbrev || this.store.orderFooter.stationName.slice(0, 2); sceneryAbbrev || this.store.orderFooter.stationName.slice(0, 2);
} }
this.store.orderMode = 'OrderMessage'; this.store.panelMode = 'OrderMessagePanel';
}, },
handleQueries() { handleQueries() {
@@ -283,7 +283,7 @@ export default defineComponent({
this.selectOption(); this.selectOption();
this.store.orderMode = 'OrderTrainPicker'; this.store.panelMode = 'OrderTrainPickerPanel';
} }
} }
} }
@@ -292,7 +292,7 @@ export default defineComponent({
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@use '../styles/colors'; @use '../../styles/colors';
.order-train-picker { .order-train-picker {
display: flex; display: flex;
src/data/orderHelperData.json
-3
View File
@@ -1,3 +0,0 @@
{
"orderS": ["D"]
}
src/locales/en.json
+72 -71
View File
@@ -1,72 +1,73 @@
{ {
"locale": { "locale": {
"pl": "POL", "pl": "POL",
"en": "ENG" "en": "ENG"
}, },
"navbar": { "navbar": {
"order-message": "ORDER MESSAGE", "OrderMessagePanel": "MESSAGE",
"order-list": "SAVED ORDERS", "OrderListPanel": "SAVED",
"order-train-picker": "TRAINS" "OrderTrainPickerPanel": "TRAINS"
}, },
"update": { "update": {
"update-available-text": "New GeneraTOR version is available!", "update-available-text": "New GeneraTOR version is available!",
"update-available-underline": "Click here to update!", "update-available-underline": "Click here to update!",
"title": "GeneraTOR update!", "title": "GeneraTOR update!",
"confirm": "ROGER THAT!", "confirm": "ROGER THAT!",
"no-data": "No changelog available!", "no-data": "No changelog available!",
"info-1": "This changelog will be available to see once again after clicking the version number in the footer", "info-1": "This changelog will be available to see once again after clicking the version number in the footer",
"info-2": "The full app changelog available on <a href='https://github.com/Spythere/genera-tor' target='_blank'>the project's GitHub</a>" "info-2": "The full app changelog available on <a href='https://github.com/Spythere/genera-tor' target='_blank'>the project's GitHub</a>"
}, },
"order-message": { "order-message": {
"title": "Message to display in the simulator's chatbox:", "title": "Message to display in the simulator's chatbox:",
"info": "Copy or save the content of the generated train order using buttons below:", "info": "Copy or save the content of the generated train order using buttons below:",
"button-save": "Save as new order", "button-save": "Save new",
"button-copy": "Copy the order message", "button-copy": "Copy message",
"button-update": "Update the order", "button-update": "Update",
"warning-outdated-clipboard": "Oops! Your browser may be a little bit depraceted since it's not supporting saving data to the clipboard! :/", "button-reset": "Reset",
"warning-fill-inputs": "Fill all the empty fields before copying the order!", "warning-outdated-clipboard": "Oops! Your browser may be a little bit depraceted since it's not supporting saving data to the clipboard! :/",
"warning-add-rows": "Add at least one row before copying the order!", "warning-fill-inputs": "Fill all the empty fields before copying the order!",
"warning-fill-footer": "Fill the following rows in the order's footer before copying it:", "warning-add-rows": "Add at least one row before copying the order!",
"warning-fill-top": "Fill the order number, train number and date before saving it!", "warning-fill-footer": "Fill the following rows in the order's footer before copying it:",
"warning-order-identical": "Last saved order is identical as the current one!", "warning-fill-top": "Fill the order number, train number and date before saving it!",
"warning-no-order-selected": "Choose the already saved order first!", "warning-order-identical": "Last saved order is identical as the current one!",
"error-update": "An error occurred while saving this order! :/", "warning-no-order-selected": "Choose the already saved order first!",
"success-update-html": "Updated this <b class=\"text--accent\">order's</b> message!", "error-update": "An error occurred while saving this order! :/",
"success-save-html": "Saved <b class=\"text--accent\">order's</b> message in the browser memory!", "success-update-html": "Updated this <b class=\"text--accent\">order's</b> message!",
"success-copy-html": "<b class=\"text--accent\">Success!</b> You may paste the order message in the simulator's chatbox now!" "success-save-html": "Saved <b class=\"text--accent\">order's</b> message in the browser memory!",
}, "success-copy-html": "<b class=\"text--accent\">Success!</b> You may paste the order message in the simulator's chatbox now!"
"order-footer": { },
"field-stationName": "station", "order-footer": {
"field-checkpointName": "checkpoint", "field-stationName": "station",
"field-hour": "hour", "field-checkpointName": "checkpoint",
"field-minutes": "minute", "field-hour": "hour",
"field-dispatcherName": "dispatcher", "field-minutes": "minute",
"field-secondaryDispatcherName": "ordering dispatcher", "field-dispatcherName": "dispatcher",
"field-dispatcherOrSecondaryName": "dispatcher (or ordering dispatcher)" "field-secondaryDispatcherName": "ordering dispatcher",
}, "field-dispatcherOrSecondaryName": "dispatcher (or ordering dispatcher)"
"order-options": { },
"dark-mode": "Order dark theme", "order-options": {
"update-number-on-copy": "Update order number on copy", "dark-mode": "Order dark theme",
"update-number-on-save": "Update order number on save", "update-number-on-copy": "Update order number on copy",
"update-hours": "Update order hour on edit" "update-number-on-save": "Update order number on save",
}, "update-hours": "Update order hour on edit"
"order-list": { },
"title": "Saved train orders", "order-list": {
"order-title": "Order \"{orderName}\" no. {orderNo} for train no. {trainNo}", "title": "Saved train orders",
"no-saved-orders": "No saved orders!", "order-title": "Order \"{orderName}\" no. {orderNo} for train no. {trainNo}",
"order-added": "Added:", "no-saved-orders": "No saved orders!",
"order-updated": "Updated:", "order-added": "Added:",
"button-order-select": "Select", "order-updated": "Updated:",
"button-order-remove": "Remove" "button-order-select": "Select",
}, "button-order-remove": "Remove"
"order-train-picker": { },
"placeholder-scenery-name": "Scenery name", "order-train-picker": {
"placeholder-region-name": "Region", "placeholder-scenery-name": "Scenery name",
"placeholder-checkpoint-name": "Checkpoint name", "placeholder-region-name": "Region",
"autofill-checkpoint-id": "Autofill checkpoint's abbreviation", "placeholder-checkpoint-name": "Checkpoint name",
"info": "Select scenery name to display active trains", "autofill-checkpoint-id": "Autofill checkpoint's abbreviation",
"title": "Active timetables and trains on the scenery", "info": "Select scenery name to display active trains",
"subtitle": "Click on the user below to fill the current order with their information", "title": "Active timetables and trains on the scenery",
"no-trains": "No trains to display" "subtitle": "Click on the user below to fill the current order with their information",
} "no-trains": "No trains to display"
} }
}
src/locales/pl.json
+72 -71
View File
@@ -1,72 +1,73 @@
{ {
"locale": { "locale": {
"pl": "POL", "pl": "POL",
"en": "ENG" "en": "ENG"
}, },
"update": { "update": {
"update-available-text": "Nowa wersja GeneraTORa dostępna!", "update-available-text": "Nowa wersja GeneraTORa dostępna!",
"update-available-underline": "Kliknij, aby odświeżyć aplikację!", "update-available-underline": "Kliknij, aby odświeżyć aplikację!",
"title": "Aktualizacja GeneraTORa!", "title": "Aktualizacja GeneraTORa!",
"no-data": "Brak dostępnego changelogu!", "no-data": "Brak dostępnego changelogu!",
"confirm": "Przyjąłem!", "confirm": "Przyjąłem!",
"info-1": "Ten changelog będzie zawsze dostępny po kliknięciu numeru wersji w stopce strony", "info-1": "Ten changelog będzie zawsze dostępny po kliknięciu numeru wersji w stopce strony",
"info-2": "Pełny changelog dostępny na <a href='https://github.com/Spythere/genera-tor' target='_blank'>GitHubie projektu</a>" "info-2": "Pełny changelog dostępny na <a href='https://github.com/Spythere/genera-tor' target='_blank'>GitHubie projektu</a>"
}, },
"navbar": { "navbar": {
"order-message": "TREŚĆ ROZKAZU", "OrderMessagePanel": "WIADOMOŚĆ",
"order-list": "ZAPISANE ROZ.", "OrderListPanel": "ZAPISANE",
"order-train-picker": "POCIĄGI" "OrderTrainPickerPanel": "POCIĄGI"
}, },
"order-message": { "order-message": {
"title": "Wiadomość do wyświetlenia na czacie symulatora:", "title": "Wiadomość do wyświetlenia na czacie symulatora:",
"info": "Po wygenerowaniu rozkazu skopiuj jego treść lub zapisz w pamięci przeglądarki za pomocą przycisków poniżej:", "info": "Po wygenerowaniu rozkazu skopiuj jego treść lub zapisz w pamięci przeglądarki za pomocą przycisków poniżej:",
"button-save": "Zapisz nowy rozkaz", "button-save": "Zapisz nowy",
"button-copy": "Kopiuj treść rozkazu", "button-copy": "Skopiuj treść",
"button-update": "Zaktualizuj rozkaz", "button-update": "Zaktualizuj",
"warning-outdated-clipboard": "Ups! Twoja przeglądarka musi być dosyć przestarzała, ponieważ nie obsługuje zapisu do schowka! :/", "button-reset": "Zresetuj",
"warning-fill-inputs": "Wypełnij puste rubryki rozkazu przed jego skopiowaniem!", "warning-outdated-clipboard": "Ups! Twoja przeglądarka musi być dosyć przestarzała, ponieważ nie obsługuje zapisu do schowka! :/",
"warning-add-rows": "Dodaj co najmniej jedną działkę rozkazu przed jego skopiowaniem!", "warning-fill-inputs": "Wypełnij puste rubryki rozkazu przed jego skopiowaniem!",
"warning-fill-footer": "Uzupełnij następujące rubryki na dole rozkazu przed jego skopiowaniem:", "warning-add-rows": "Dodaj co najmniej jedną działkę rozkazu przed jego skopiowaniem!",
"warning-fill-top": "Wypełnij numer rozkazu, numer pociągu i datę zanim dodasz rozkaz!", "warning-fill-footer": "Uzupełnij następujące rubryki na dole rozkazu przed jego skopiowaniem:",
"warning-order-identical": "Ostatni zapisany rozkaz jest identyczny z obecnym!", "warning-fill-top": "Wypełnij numer rozkazu, numer pociągu i datę zanim dodasz rozkaz!",
"warning-no-order-selected": "Wybierz rozkaz, który chcesz zaktualizować!", "warning-order-identical": "Ostatni zapisany rozkaz jest identyczny z obecnym!",
"error-update": "Wystąpił błąd podczas aktualizowania tego rozkazu! :/", "warning-no-order-selected": "Wybierz rozkaz, który chcesz zaktualizować!",
"success-update-html": "Zaktualizowano treść <b class=\"text--accent\">rozkazu</b>!", "error-update": "Wystąpił błąd podczas aktualizowania tego rozkazu! :/",
"success-save-html": "Zapisano treść <b class=\"text--accent\">rozkazu</b> w pamięci przeglądarki!", "success-update-html": "Zaktualizowano treść <b class=\"text--accent\">rozkazu</b>!",
"success-copy-html": "<b class=\"text--accent\">Skopiowano!</b> Możesz teraz wkleić treść rozkazu na czacie symulatora!" "success-save-html": "Zapisano treść <b class=\"text--accent\">rozkazu</b> w pamięci przeglądarki!",
}, "success-copy-html": "<b class=\"text--accent\">Skopiowano!</b> Możesz teraz wkleić treść rozkazu na czacie symulatora!"
"order-footer": { },
"field-stationName": "stacja", "order-footer": {
"field-checkpointName": "posterunek", "field-stationName": "stacja",
"field-hour": "godzina", "field-checkpointName": "posterunek",
"field-minutes": "minuta", "field-hour": "godzina",
"field-dispatcherName": "dyżurny ruchu", "field-minutes": "minuta",
"field-secondaryDispatcherName": "z polecenia dyżurnego ruchu", "field-dispatcherName": "dyżurny ruchu",
"field-dispatcherOrSecondaryName": "dyżurny ruchu (lub z polecenia dyżurnego ruchu)" "field-secondaryDispatcherName": "z polecenia dyżurnego ruchu",
}, "field-dispatcherOrSecondaryName": "dyżurny ruchu (lub z polecenia dyżurnego ruchu)"
"order-options": { },
"dark-mode": "Ciemny motyw bloczka rozkazu", "order-options": {
"update-number-on-copy": "Aktualizuj numer rozkazu po skopiowaniu", "dark-mode": "Ciemny motyw bloczka rozkazu",
"update-number-on-save": "Aktualizuj numer rozkazu po zapisaniu", "update-number-on-copy": "Aktualizuj numer rozkazu po skopiowaniu",
"update-hours": "Aktualizuj godziny przy edycji" "update-number-on-save": "Aktualizuj numer rozkazu po zapisaniu",
}, "update-hours": "Aktualizuj godziny przy edycji"
"order-list": { },
"title": "Zapisane rozkazy pisemne", "order-list": {
"no-saved-orders": "Brak zapisanych rozkazów!", "title": "Zapisane rozkazy pisemne",
"order-title": "Rozkaz \"{orderName}\" nr {orderNo} dla pociągu nr {trainNo}", "no-saved-orders": "Brak zapisanych rozkazów!",
"order-added": "Dodano:", "order-title": "Rozkaz \"{orderName}\" nr {orderNo} dla pociągu nr {trainNo}",
"order-updated": "Zaktualizowano:", "order-added": "Dodano:",
"button-order-select": "Wybierz", "order-updated": "Zaktualizowano:",
"button-order-remove": "Usuń" "button-order-select": "Wybierz",
}, "button-order-remove": "Usuń"
"order-train-picker": { },
"placeholder-scenery-name": "Sceneria", "order-train-picker": {
"placeholder-region-name": "Region", "placeholder-scenery-name": "Sceneria",
"placeholder-checkpoint-name": "Posterunek", "placeholder-region-name": "Region",
"autofill-checkpoint-id": "Uzupełniaj skrót wybranego posterunku", "placeholder-checkpoint-name": "Posterunek",
"info": "Wybierz dyżurnego oraz scenerię, aby zobaczyć pociągi", "autofill-checkpoint-id": "Uzupełniaj skrót wybranego posterunku",
"title": "Aktywne RJ i gracze na scenerii", "info": "Wybierz dyżurnego oraz scenerię, aby zobaczyć pociągi",
"subtitle": "Kliknij na gracza, aby wypełnić obecny rozkaz jego danymi", "title": "Aktywne RJ i gracze na scenerii",
"no-trains": "Brak pociągów do wyświetlenia" "subtitle": "Kliknij na gracza, aby wypełnić obecny rozkaz jego danymi",
} "no-trains": "Brak pociągów do wyświetlenia"
} }
}
src/mixins/orderStorageMixin.ts
+1 -1
View File
@@ -157,7 +157,7 @@ export default defineComponent({
this.store.chosenOrderType = localOrder.orderType; this.store.chosenOrderType = localOrder.orderType;
this.store.chosenLocalOrderId = localOrder.id; this.store.chosenLocalOrderId = localOrder.id;
this.store.orderMode = 'OrderMessage'; this.store.panelMode = 'OrderMessagePanel';
} }
} }
}); });
src/store/store.ts
+14 -4
View File
@@ -1,22 +1,24 @@
import { defineStore } from 'pinia'; import { defineStore } from 'pinia';
import { IOrderN, IOrderO, IOrderS, TOrder } from '../types/orderTypes'; import { IOrderN, IOrderO, IOrderS, TOrder, TPanel } from '../types/orderTypes';
import { import {
currentFormattedDate, currentFormattedDate,
currentFormattedHours, currentFormattedHours,
currentFormattedMinutes currentFormattedMinutes
} from '../utils/dateUtils'; } from '../utils/dateUtils';
import i18n from '../i18n';
import StorageManager from '../managers/storageManager';
export const useStore = defineStore('store', { export const useStore = defineStore('store', {
state: () => { state: () => {
return { return {
currentAppLocale: 'pl', currentAppLocale: 'pl',
appUpdateData: { appUpdateData: {
version: '', version: '',
changelog: '', changelog: '',
releaseURL: '' releaseURL: ''
}, },
updateCardOpen: false, updateCardOpen: false,
helperModalOpen: false, helperModalOpen: false,
orderDarkMode: false, orderDarkMode: false,
@@ -24,7 +26,7 @@ export const useStore = defineStore('store', {
chosenOrderType: 'orderN' as TOrder, chosenOrderType: 'orderN' as TOrder,
chosenLocalOrderId: '', chosenLocalOrderId: '',
orderMode: 'OrderMessage', panelMode: 'OrderMessagePanel' as TPanel,
orderFooter: { orderFooter: {
stationName: '', stationName: '',
@@ -214,5 +216,13 @@ export const useStore = defineStore('store', {
] ]
} as IOrderS } as IOrderS
}; };
},
actions: {
changeLang(lang: string) {
i18n.global.locale.value = lang as typeof i18n.global.locale.value;
this.currentAppLocale = lang;
StorageManager.setStringValue('lang', lang);
}
} }
}); });
src/types/orderTypes.ts
+1
View File
@@ -1,4 +1,5 @@
export type TOrder = 'orderO' | 'orderS' | 'orderN'; export type TOrder = 'orderO' | 'orderS' | 'orderN';
export type TPanel = 'OrderMessagePanel' | 'OrderListPanel' | 'OrderTrainPickerPanel';
export interface LocalStorageOrder { export interface LocalStorageOrder {
id: string; id: string;
src/views/Home.vue
+85 -113
View File
@@ -2,33 +2,45 @@
<!-- <OrderHelper v-if="store.helperModalOpen" /> --> <!-- <OrderHelper v-if="store.helperModalOpen" /> -->
<div class="home"> <div class="home">
<div class="home_container"> <div class="home-container">
<div class="order_container"> <Order />
<SideBar />
<OrderVue />
</div>
<div class="message_container"> <div class="panel-container">
<div class="message_nav"> <div class="panel-nav">
<button class="g-button icon" @click="switchLanguages"> <button
<LanguagesIcon :size="18" /> key="OrderMessagePanel"
<span style="margin-left: 0.25em">{{ $t('locale.' + store.currentAppLocale) }}</span> class="g-button"
:data-active="store.panelMode == 'OrderMessagePanel'"
@click="selectPanelMode('OrderMessagePanel')"
>
<MessageSquareTextIcon :size="20" />
{{ t(`navbar.OrderMessagePanel`) }}
</button> </button>
<button <button
v-for="(action, i) in navActions" key="OrderListPanel"
:key="action.mode" class="g-button"
class="g-button option" :data-active="store.panelMode == 'OrderListPanel'"
:data-active="store.orderMode == action.mode" @click="selectPanelMode('OrderListPanel')"
@click="selectOrderMode(action.mode)"
> >
{{ $t(`navbar.${action.value}`) }} <BookMarkedIcon :size="20" />
{{ t(`navbar.OrderListPanel`) }}
</button>
<button
key="OrderTrainPickerPanel"
class="g-button"
:data-active="store.panelMode == 'OrderTrainPickerPanel'"
@click="selectPanelMode('OrderTrainPickerPanel')"
>
<TrainFrontIcon :size="20" />
{{ t(`navbar.OrderTrainPickerPanel`) }}
</button> </button>
</div> </div>
<transition name="order-anim" mode="out-in"> <transition name="order-anim" mode="out-in">
<keep-alive> <keep-alive>
<Component :is="orderModeComponent" /> <Component :is="panelComponent" />
</keep-alive> </keep-alive>
</transition> </transition>
</div> </div>
@@ -36,74 +48,34 @@
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue'; import { computed } from 'vue';
import OrderVue from '../components/Order.vue'; import { useI18n } from 'vue-i18n';
import SideBar from '../components/SideBar.vue';
import OrderMessage from '../components/OrderMessage.vue';
import OrderList from '../components/OrderList.vue';
import { useStore } from '../store/store'; import { useStore } from '../store/store';
import OrderHelper from '../components/OrderHelper.vue'; import OrderMessagePanel from '../components/Panels/OrderMessagePanel.vue';
import OrderTrainPicker from '../components/OrderTrainPicker.vue'; import OrderListPanel from '../components/Panels/OrderListPanel.vue';
import { LanguagesIcon } from 'lucide-vue-next'; import OrderTrainPickerPanel from '../components/Panels/OrderTrainPickerPanel.vue';
import StorageManager from '../managers/storageManager'; import SideBar from '../components/App/SideBar.vue';
import Order from '../components/Orders/Order.vue';
import { BookMarkedIcon, MessageSquareTextIcon, TrainFrontIcon } from 'lucide-vue-next';
import { TPanel } from '../types/orderTypes';
export default defineComponent({ const store = useStore();
components: { OrderVue, SideBar, OrderHelper, LanguagesIcon }, const { t } = useI18n();
data() { function selectPanelMode(mode: TPanel) {
return { store.panelMode = mode;
navActions: [ }
{
mode: 'OrderMessage',
value: 'order-message'
},
{
mode: 'OrderList',
value: 'order-list'
},
{
mode: 'OrderTrainPicker',
value: 'order-train-picker'
}
]
};
},
methods: { const panelComponent = computed(() => {
selectOrderMode(mode: string) { switch (store.panelMode) {
this.store.orderMode = mode; case 'OrderListPanel':
}, return OrderListPanel;
case 'OrderTrainPickerPanel':
switchLanguages() { return OrderTrainPickerPanel;
const lang = this.store.currentAppLocale == 'pl' ? 'en' : 'pl'; case 'OrderMessagePanel':
default:
this.$i18n.locale = lang; return OrderMessagePanel;
this.store.currentAppLocale = lang;
StorageManager.setStringValue('lang', lang);
}
},
setup() {
return {
store: useStore()
};
},
computed: {
orderModeComponent() {
switch (this.store.orderMode) {
case 'OrderMessage':
return OrderMessage;
case 'OrderList':
return OrderList;
case 'OrderTrainPicker':
return OrderTrainPicker;
default:
return OrderMessage;
}
}
} }
}); });
</script> </script>
@@ -112,7 +84,6 @@ export default defineComponent({
@use '../styles/colors'; @use '../styles/colors';
.home { .home {
min-height: 100vh;
overflow-x: auto; overflow-x: auto;
display: flex; display: flex;
@@ -122,63 +93,60 @@ export default defineComponent({
width: 100%; width: 100%;
} }
.home_container { .home-container {
display: flex; display: grid;
flex-wrap: wrap; grid-template-columns: 600px 500px;
justify-content: center; justify-content: center;
gap: 2em 1em; gap: 2em 1em;
padding: 0.5em; padding: 1em;
width: 100%; width: 100%;
@media screen and (max-width: 650px) { @media screen and (max-width: 1350px) {
grid-template-columns: auto;
padding: 1em 0.5em; padding: 1em 0.5em;
} }
} }
.order_container { .panel-container {
width: 100%;
max-width: 600px;
display: flex;
align-items: start;
@media screen and (max-width: 650px) {
flex-direction: column;
}
}
.message_container {
padding: 2px;
width: 100%;
max-width: 500px;
display: grid; display: grid;
grid-template-rows: auto auto 1fr; grid-template-rows: auto auto 1fr;
height: 95vh; padding: 2px;
max-width: 800px;
height: calc(100vh - 5em);
overflow: auto; overflow: auto;
} }
.message_nav { .panel-nav {
display: flex; display: flex;
align-items: center;
justify-content: center; justify-content: center;
gap: 0.25em; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
gap: 0.25em;
margin-bottom: 1.5em; margin-bottom: 1.5em;
} }
.message_nav > button { .panel-nav > button {
position: relative; position: relative;
display: flex;
justify-content: center;
align-items: center;
gap: 0.5em;
min-width: 8em;
padding: 0.25em 0.5em;
&:focus-visible {
outline: 1px solid white;
}
&::before { &::before {
position: absolute; position: absolute;
content: ''; content: '';
bottom: -3px; bottom: -3px;
left: 0; left: 50%;
transform: translateX(-50%);
width: 0; width: 0;
height: 3px; height: 3px;
@@ -187,6 +155,10 @@ export default defineComponent({
background-color: colors.$accentCol; background-color: colors.$accentCol;
} }
&[data-active='true'] {
color: colors.$accentCol;
}
&[data-active='true']::before { &[data-active='true']::before {
width: 100%; width: 100%;
} }
yarn.lock
+4 -4
View File
@@ -3122,10 +3122,10 @@ lru-cache@^5.1.1:
dependencies: dependencies:
yallist "^3.0.2" yallist "^3.0.2"
lucide-vue-next@^0.525.0: lucide-vue-next@^0.562.0:
version "0.525.0" version "0.562.0"
resolved "https://registry.yarnpkg.com/lucide-vue-next/-/lucide-vue-next-0.525.0.tgz#94bafb8dcb6b6344dbbd8a00d8230cf5478e444e" resolved "https://registry.yarnpkg.com/lucide-vue-next/-/lucide-vue-next-0.562.0.tgz#a4cc08c2d00b9664c768e5da76e6634212a02a23"
integrity sha512-Xf8+x8B2DrnGDV/rxylS+KBp2FIe6ljwDn2JsGTZZvXIfhmm/q+nv8RuGO1OyoMjOVkkz7CqtUqJfwtFPRbB2w== integrity sha512-LN0BLGKMFulv0lnfK29r14DcngRUhIqdcaL0zXTt2o0oS9odlrjCGaU3/X9hIihOjjN8l8e+Y9G/famcNYaI7Q==
magic-string@^0.25.0, magic-string@^0.25.7: magic-string@^0.25.0, magic-string@^0.25.7:
version "0.25.9" version "0.25.9"