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