From 5bb19c5493f084782336217c670a46e41bfd22b5 Mon Sep 17 00:00:00 2001
From: jdoppelhofer <jdoppelhofer@student.tgm.ac.at>
Date: Thu, 11 Apr 2024 14:24:44 +0200
Subject: [PATCH] =?UTF-8?q?F=C3=BCge=20Link-Synchronisierungsfunktion=20hi?=
 =?UTF-8?q?nzu=20in=20+page.svelte?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/src/routes/settings/+page.svelte | 127 ++++++++++++++-------------
 1 file changed, 66 insertions(+), 61 deletions(-)

diff --git a/app/src/routes/settings/+page.svelte b/app/src/routes/settings/+page.svelte
index a4eb324..d8db0b5 100644
--- a/app/src/routes/settings/+page.svelte
+++ b/app/src/routes/settings/+page.svelte
@@ -1,75 +1,80 @@
 <script lang="ts">
 	import { db } from '$lib/db';
-    import { Input, Button, P, Heading, Label } from 'flowbite-svelte';
-    let link: string = '';
-    let request_success = false;
-    let replicationError: string | null = null;
+	import { Input, Button, P, Heading, Label } from 'flowbite-svelte';
+	let link: string = '';
+	let request_success = false;
+	let replicationError: string | null = null;
+	let storedLink = localStorage.getItem('syncLink');
 
-    function validateLink(value: string): boolean {
-        value = value.trim();
-        const pattern: RegExp = /^https?:\/\/.+/;
-        return pattern.test(value);
-    }
-    $: isValidLink = link !== '' && validateLink(link);
+	function validateLink(value: string): boolean {
+		value = value.trim();
+		const pattern: RegExp = /^https?:\/\/.+/;
+		return pattern.test(value);
+	}
+	$: isValidLink = link !== '' && validateLink(link);
 
-    // Handler für Sync-Ereignisse
-    function onSyncChange(change: any) {
-        console.log('Sync change:', change);
-    }
+	// Handler für Sync-Ereignisse
+	function onSyncChange(change: any) {
+		console.log('Sync change:', change);
+	}
 
-    function onSyncPaused(error: any) {
-        if (error) {
-            console.log('Sync paused due to replication error', error);
-        } else {
-            console.log('Sync paused/resumed');
-        }
-    }
+	function onSyncPaused(error: any) {
+		if (error) {
+			console.log('Sync paused due to replication error', error);
+		} else {
+			console.log('Sync paused/resumed');
+		}
+	}
 
-    function onSyncError(error: any) {
-        console.error('Sync error:', error);
-        replicationError = "Fehler bei der Synchronisation. Bitte überprüfen Sie den Link und versuchen Sie es erneut.";
-    }
+	function onSyncError(error: any) {
+		console.error('Sync error:', error);
+		replicationError =
+			'Fehler bei der Synchronisation. Bitte überprüfen Sie den Link und versuchen Sie es erneut.';
+	}
 
-    async function handleReplication() {
-        if (isValidLink) {
-            const opts = { live: true, retry: true };
-            request_success = false;
-            replicationError = null;
-            $db.replicate.from(link).on('complete', function() {
-                $db.sync(link, opts)
-                    .on('change', onSyncChange)
-                    .on('paused', onSyncPaused)
-                    .on('error', onSyncError);
-                request_success = true;
-            }).on('error', onSyncError);
-        }
-    }
+	async function handleReplication() {
+		if (isValidLink) {
+			const opts = { live: true, retry: true };
+			request_success = false;
+			replicationError = null;
+			$db.replicate
+				.from(link)
+				.on('complete', function () {
+					$db
+						.sync(link, opts)
+						.on('change', onSyncChange)
+						.on('paused', onSyncPaused)
+						.on('error', onSyncError);
+					request_success = true;
+				})
+				.on('error', onSyncError);
+
+			localStorage.setItem('syncLink', link);
+			storedLink = link;
+		}
+	}
+
+	function clearLink() {
+		localStorage.removeItem('syncLink');
+		storedLink = null;
+	}
 </script>
 
 <svelte:head>
-    <title>Settings - G'schäft'lhaberer</title>
+	<title>Settings - G'schäft'lhaberer</title>
 </svelte:head>
 
 <form on:submit|preventDefault={handleReplication}>
-    <Heading class="my-5">Settings</Heading>
-    <div class="flex flex-col gap-4 mt-6">
-        <Label>Link für die Synchronisation</Label>
-        <Input
-            bind:value={link} 
-            placeholder="https://example.com"
-            invalid={!isValidLink && link !== ''}
-            aria-label="Link eingeben"
-            class={isValidLink ? 'valid-input' : link !== '' ? 'invalid-input' : ''}
-        />
-
-        <Button color="green" type="submit" disabled={!isValidLink} class={isValidLink ? 'valid-button' : ''}>
-            Bestätigen
-        </Button>
-        {#if replicationError}
-            <P class="text-red-500">{replicationError}</P>
-        {/if}
-        {#if request_success}
-            <P>Einmalige Replikation abgeschlossen. Kontinuierliche Synchronisation gestartet.</P>
-        {/if}
-    </div>
+	<Heading class="my-5">Settings</Heading>
+	<div class="mt-6 flex flex-col gap-4">
+		<Label>Link für die Synchronisation</Label>
+		<Input bind:value={link} placeholder="https://example.com" />
+		<Button type="submit" class="mt-4">Synchronisieren</Button>
+		{#if storedLink}
+			<div class="mt-4">
+				<p>Gespeicherter Link: {storedLink}</p>
+				<Button on:click={clearLink} class="mt-2">Link löschen</Button>
+			</div>
+		{/if}
+	</div>
 </form>