improve local-app

2022-02-22 10:05:21 +01:00
parent 6b208ceb0c
commit ac18aab773
30 changed files with 841 additions and 105 deletions
@@ -1,12 +1,36 @@
 <script lang="ts">
-import { newServer, addServer } from '../store';
+    import InputField from "~/lib/InputField.svelte";
+    import TextInput from "~/lib/TextInput.svelte";
+
+    import { newServer, addServer } from "~/store";
+
+    let error = "";
+    async function _addServer() {
+        try {
+            await addServer();
+        } catch(e) {
+            console.log(e);
+            error = e.message;
+        }
+    }
 </script>

 <div class="flex w-full h-full justify-center items-center">
-
-  <form class="flex flex-col justify-center space-y-2" on:submit|preventDefault={addServer}>
-    <input type="text" class="w-full h-12 px-4 py-2 bg-gray-200 rounded-lg" placeholder="Name" required bind:value={$newServer.name}>
-    <input type="text" class="w-full h-12 px-4 py-2 bg-gray-200 rounded-lg" placeholder="Url" required bind:value={$newServer.url}>
-    <input type="submit" value="Add server" />
-  </form>
+    <form class="flex flex-col justify-center" on:submit|preventDefault={_addServer}>
+        <!-- <input type="text" class="w-full h-12 px-4 py-2 bg-gray-200 rounded-lg" placeholder="Url" required > -->
+        <InputField title="Name" id="name">
+            <TextInput bind:value={$newServer.name} required id="name" />
+        </InputField>
+        <InputField title="Url" id="url">
+            <TextInput bind:value={$newServer.url} required id="url" />
+        </InputField>
+        {#if error}
+            <div class="text-red-500 text-center mb-2">{error}</div>
+        {/if}
+        <input
+            type="submit"
+            value="Add server"
+            class="mt-4 rounded-md p-2 bg-gray-300 cursor-pointer hover:bg-gray-400"
+        />
+    </form>
 </div>
@@ -1,7 +1,18 @@
 <script lang="ts">
-    import logo from "../../../assets/icons/logo-text.png";
+    import { onMount } from "svelte";
+
+    import Logo from "~/../../assets/icons/logo.svg";
+
+    let version = "";
+
+    onMount(async () => {
+        version = await window?.WorkAdventureDesktopApi?.getVersion();
+    });
 </script>

-<div class="flex w-full h-full justify-center items-center">
-  <img src={logo} alt="WorkAdeventure logo" />
+<div class="flex flex-col w-full h-full justify-center items-center">
+    <Logo height="100" class="my-auto" />
+    <div class="flex my-4 items-center space-x-4">
+        <span class="text-gray-300 text-lg ">Desktop-App Version: {version}</span>
+    </div>
 </div>
@@ -0,0 +1,59 @@
+<script lang="ts">
+    import { onMount } from "svelte";
+    import { writable } from "svelte/store";
+
+    import ToggleSwitch from "~/lib/ToggleSwitch.svelte";
+    import InputField from "~/lib/InputField.svelte";
+    import KeyRecord from "~/lib/KeyRecord.svelte";
+
+    const shortCuts = writable<Record<string, string> | undefined>({});
+
+    onMount(async () => {
+        shortCuts.set(await window?.WorkAdventureDesktopApi?.getShortcuts());
+    });
+
+    async function saveShortcut(key: string, value: string) {
+        await window?.WorkAdventureDesktopApi?.saveShortcut(key, value);
+    }
+</script>
+
+<div class="flex flex-col w-full h-full justify-center items-center">
+    <h1 class="text-gray-200 text-2xl mb-6">Settings</h1>
+
+    <div class="flex flex-col justify-start max-w-152">
+        {#if $shortCuts}
+            <InputField
+                id="toggle-camera"
+                title="Toggle Mute"
+                description="Set a shortcut to turn your microphone on and off"
+            >
+                <KeyRecord
+                    id="toggle-mute"
+                    value={$shortCuts.mute_toggle}
+                    on:change={(e) => saveShortcut("mute_toggle", e.detail)}
+                />
+            </InputField>
+
+            <InputField
+                id="toggle-camera"
+                title="Toggle Camera"
+                description="Set a shortcut to turn your camera on and off"
+            >
+                <KeyRecord
+                    id="toggle-camera"
+                    value={$shortCuts.camera_toggle}
+                    on:change={(e) => saveShortcut("camera_toggle", e.detail)}
+                />
+            </InputField>
+        {/if}
+
+        <InputField id="toggle-autostart" title="Toggle autostart">
+            <ToggleSwitch
+                id="toggle-autostart"
+                value={true}
+                title="Autostart WorkAdventure after your PC started"
+                on:change={(e) => {}}
+            />
+        </InputField>
+    </div>
+</div>