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

chore: settings card; language button

Browse Source
This commit is contained in:
Spythere
2025-01-31 17:04:55 +01:00
parent fb9cff3a00
commit ea99c68911
6 changed files with 89 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/App/Navbar.vue
+17 -4
View File
@@ -1,18 +1,31 @@
<template>
<nav class="bg-zinc-900 w-full p-1 print:hidden flex justify-between items-center">
<nav class="bg-zinc-900 w-full p-1 print:hidden flex justify-between items-center relative">
<div class="flex items-center">
<img src="/favicon.svg" class="size-8 inline" />
<b class="ml-2 text-lg"
>Rozkładownik TD2 <sup class="font-semibold text-zinc-300">{{ version }}</sup></b
>
</div>
<div v-if="apiMode == 'mocking'"><ExclamationTriangleIcon class="size-6 inline mr-1 text-yellow-400" /> API mocking</div>
<div>
<button class="bg-slate-600 p-1 px-2 rounded-md hover:bg-slate-500 flex items-center" @click="changeLang()">
<LanguageIcon class="size-5 inline-block align-middle mr-2" /> {{ i18n.locale.value == 'pl' ? 'POL' : 'ENG' }}
</button>
</div>
<!-- <div v-if="apiMode == 'mocking'"><ExclamationTriangleIcon class="size-6 inline mr-1 text-yellow-400" /> API mocking</div> -->
</nav>
</template>
<script setup lang="ts">
import { LanguageIcon } from '@heroicons/vue/16/solid';
import { version } from '../../../package.json';
import { ExclamationTriangleIcon } from '@heroicons/vue/16/solid';
import { useI18n } from 'vue-i18n';
const apiMode = import.meta.env.VITE_API_MODE;
const i18n = useI18n();
function changeLang(locale?: string) {
i18n.locale.value = locale ?? i18n.locale.value == 'pl' ? 'en' : 'pl';
window.localStorage.setItem('locale', i18n.locale.value);
}
// const apiMode = import.meta.env.VITE_API_MODE;
</script>
src/components/App/SettingsCard.vue
+42
View File
@@ -0,0 +1,42 @@
<template>
<div class="fixed top-0 left-0 w-screen h-screen z-10 bg-black bg-opacity-70" v-if="globalStore.showSettings" @click="globalStore.showSettings = false">
<!-- <div class="fixed top-0 left-0 w-screen h-screen z-10" v-show="showSettings" @click="showSettings = false"></div> -->
<!-- <div class="absolute mt-2 top-full right-0 p-1 rounded-md bg-slate-600 w-full z-20 max-w-[250px]" v-show="showSettings"></div> -->
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[500px] bg-zinc-800 p-2 h-[500px] z-20">
<div class="grid grid-cols-2 gap-2">
<button
class="bg-slate-900 p-1 rounded-md hover:bg-slate-800"
:class="{ 'font-bold text-yellow-400': i18n.locale.value == 'pl' }"
@click="chooseLang('pl')"
>
POLSKI
</button>
<button
class="bg-slate-900 p-1 rounded-md hover:bg-slate-800"
:class="{ 'font-bold text-yellow-400': i18n.locale.value == 'en' }"
@click="chooseLang('en')"
>
ENGLISH
</button>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { useI18n } from 'vue-i18n';
import { useGlobalStore } from '../../stores/global.store';
const i18n = useI18n();
const globalStore = useGlobalStore();
function chooseLang(locale: string) {
i18n.locale.value = locale;
window.localStorage.setItem('locale', i18n.locale.value);
globalStore.showSettings = false;
}
</script>
<style scoped></style>