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

refactor: home component setup

Browse Source
This commit is contained in:
Spythere
2025-09-27 22:19:48 +02:00
parent 5a2be7b25e
commit 81f484793f
1 changed files with 34 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/Home.vue
+15 -40
View File
@@ -14,13 +14,13 @@
:data-active="store.panelMode == action.mode" :data-active="store.panelMode == action.mode"
@click="selectOrderMode(action.mode)" @click="selectOrderMode(action.mode)"
> >
{{ $t(`navbar.${action.value}`) }} {{ t(`navbar.${action.value}`) }}
</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>
@@ -28,23 +28,20 @@
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue'; import { computed } from 'vue';
import { useStore } from '../store/store';
import { useI18n } from 'vue-i18n';
import Order from '../components/Order/Order.vue'; import Order from '../components/Order/Order.vue';
import SideBar from '../components/SideBar.vue';
import OrderMessage from '../components/OrderMessage.vue'; import OrderMessage from '../components/OrderMessage.vue';
import OrderList from '../components/OrderList.vue'; import OrderList from '../components/OrderList.vue';
import { useStore } from '../store/store';
import OrderTrainPicker from '../components/OrderTrainPicker.vue'; import OrderTrainPicker from '../components/OrderTrainPicker.vue';
import { LanguagesIcon } from 'lucide-vue-next';
import StorageManager from '../managers/storageManager';
export default defineComponent({ const { t } = useI18n();
components: { Order, SideBar, LanguagesIcon }, const store = useStore();
data() { const navActions = [
return {
navActions: [
{ {
mode: 'OrderMessage', mode: 'OrderMessage',
value: 'order-message' value: 'order-message'
@@ -57,34 +54,14 @@ export default defineComponent({
mode: 'OrderTrainPicker', mode: 'OrderTrainPicker',
value: 'order-train-picker' value: 'order-train-picker'
} }
] ];
};
},
methods: { function selectOrderMode(mode: string) {
selectOrderMode(mode: string) { store.panelMode = mode;
this.store.panelMode = mode;
},
switchLanguages() {
const lang = this.store.currentAppLocale == 'pl' ? 'en' : 'pl';
this.$i18n.locale = lang;
this.store.currentAppLocale = lang;
StorageManager.setStringValue('lang', lang);
} }
},
setup() { const panelComponent = computed(() => {
return { switch (store.panelMode) {
store: useStore()
};
},
computed: {
orderModeComponent() {
switch (this.store.panelMode) {
case 'OrderMessage': case 'OrderMessage':
return OrderMessage; return OrderMessage;
case 'OrderList': case 'OrderList':
@@ -94,8 +71,6 @@ export default defineComponent({
default: default:
return OrderMessage; return OrderMessage;
} }
}
}
}); });
</script> </script>