More things work now

2026-04-27 00:42:14 +02:00
parent 2b07cc98a6
commit c7aac117c7
16 changed files with 607 additions and 59 deletions
--- a/frontend/app/components/windows/SettingsWindow.vue
+++ b/frontend/app/components/windows/SettingsWindow.vue
@@ -0,0 +1,144 @@
+<script setup>
+import { onMounted, ref } from 'vue';
+
+import WindowHandle from './partials/WindowHandle.vue';
+import Tabs from '../layouts/Tabs.vue';
+import Dropdown from '../layouts/Dropdown.vue';
+import { GetUser, GetUserSetting, SetUserSetting } from '@/services/User';
+import { SetupHandle, SetSize, ResetPosition, Top, ClearWindow, CreateWindow, SetMinSize, SetResizable } from '@/services/Windows';
+
+const handle = ref(null);
+const wrapper = ref(null);
+
+const props = defineProps(['data']);
+const data = props.data;
+
+const id = data.id;
+
+const rows = ref([{id: "account-settings", value: "settings.tabs.account-settings"}]);
+
+/* TODO
+const languageOptions = ref(["English", "Spanish", "Catalan"])
+const langSelector = ref(null);
+const currentLanguage = ref("");
+*/
+onBeforeMount(() => {
+    /*
+    let codes = {
+        "en-US": "English",
+        "es-ES": "Spanish",
+        "ca": "Catalan"
+    }
+    GetUserSetting('lang').then(value => {
+        currentLanguage.value = codes[value ?? 'en']
+        console.log(currentLanguage.value)
+    });
+    */
+    if(GetUser().admin) rows.value.push({
+        id: "site-administration",
+        value: "settings.tabs.site-administration"
+    });
+});
+
+onMounted(() => {
+    Top(wrapper);
+    SetupHandle(id, handle);
+    SetSize(id, {width: 400, height: 480});
+    ResetPosition(id, "center");
+
+    SetResizable(id, true);
+    SetMinSize(id, {width: 350, height: 280});
+});
+
+function OpenManageAccounts(){
+    ClearWindow('settings');
+    CreateWindow('account_management', {
+        type: 'account_management',
+        title: 'settings.site-administration.manage-accounts.title',
+        id: 'account-management',
+        back: () => {
+            ClearWindow('account-management')
+            CreateWindow('settings', {
+                id: 'settings',
+                type: 'settings',
+                title: 'settings.title',
+                back: () => { ClearWindow('settings'); CreateWindow('main_menu');  }
+            });
+        }
+    })
+}
+
+function OpenManagePlugins(){
+    ClearWindow('settings');
+    CreateWindow('plugin_management', {
+        type: 'plugin_management',
+        title: 'settings.site-administration.manage-plugins.title',
+        id: 'plugin-management',
+        back: () => {
+            ClearWindow('plugin-management')
+            CreateWindow('settings', {
+                id: 'settings',
+                type: 'settings',
+                title: 'settings.title',
+                back: () => { ClearWindow('settings'); CreateWindow('main_menu');  }
+            });
+        }
+    })
+}
+
+</script>
+
+
+<template>
+    <div class="window-wrapper" :id="'window-wrapper-' + id" ref="wrapper">
+        <WindowHandle :window="id" ref="handle"></WindowHandle>
+
+        <!-- Body -->
+        <Tabs :rows="rows">
+            <template #account-settings>
+                <div class="form-container">
+                    <div class="form-element">
+                        <label>{{ $t('settings.account.language') }}</label>
+                        
+                    </div>
+                </div>
+            </template>
+            <template #site-administration>
+                <div class="form-element centered">
+                    <button v-on:click.prevent="OpenManageAccounts">{{ $t('settings.site-administration.manage-accounts-button') }}</button>
+                </div>
+                <div class="form-element centered">
+                    <button v-on:click.prevent="OpenManagePlugins">{{ $t('settings.site-administration.manage-plugins-button') }}</button>
+                </div>
+            </template>
+        </Tabs>
+    </div>
+</template>
+
+
+<style scoped>
+.window-wrapper {
+    width: 100%;
+    display: flex;
+    align-items: center;
+}
+
+.splash-image {
+    width: 600px;
+    height: 250px;
+}
+
+.form-field {
+    padding: 10px;
+    display: flex;
+    align-items: left;
+    flex-direction: column;
+    justify-content: left;
+    width: 600px;
+}
+
+label {
+    text-align: left;
+}
+
+</style>