reorganized some stuff

README.md

@@ -4,7 +4,7 @@ A word of warning, this repository is heavily been worked on. It is not yet prod
 
 This project aims to port the fabulous [rjwats/esp8266-react](https://github.com/rjwats/esp8266-react) project to Sveltekit and to add some more useful features.
 
-A simple, secure and extensible framework for IoT projects built on ESP32 platforms with responsive [Sveltekit](https://kit.svelte.dev/) front-end built with [TailwindCSS](https://tailwindcss.com/) and [DaisyUI](https://daisyui.com/).
+A simple, secure and extensible framework for IoT projects for ESP32 platforms with responsive [Sveltekit](https://kit.svelte.dev/) front-end built with [TailwindCSS](https://tailwindcss.com/) and [DaisyUI](https://daisyui.com/).
 
 First Step - recreate the Front End with SvelteKit:
 
@@ -13,7 +13,7 @@ First Step - recreate the Front End with SvelteKit:
 - [x] System-API
 - [x] OTA-API
 - [x] Firmware Upload API
-- [ ] MQTT-API
+- [x] MQTT-API
 - [x] NTP-API
 - [ ] Feature Selector Front End
 - [ ] Demo Project

factory_settings.ini

@@ -13,7 +13,7 @@ build_flags =
 
   ; Access point settings
   -D FACTORY_AP_PROVISION_MODE=AP_MODE_DISCONNECTED
-  -D FACTORY_AP_SSID=\"ESP32-Sveltekit-#{unique_id}\" ; 1-64 characters, supports placeholders
+  -D FACTORY_AP_SSID=\"ESP32-SvelteKit-#{unique_id}\" ; 1-64 characters, supports placeholders
   -D FACTORY_AP_PASSWORD=\"esp-sveltekit\" ; 8-64 characters
   -D FACTORY_AP_CHANNEL=1
   -D FACTORY_AP_SSID_HIDDEN=false

interface/src/lib/components/SettingsCard.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	export let open = true;
+	export let collapsable = true;
+</script>
+
+{#if collapsable}
+	<div
+		class="collapse-arrow bg-base-200 rounded-box shadow-primary/50 collapse w-full max-w-2xl self-center shadow-lg"
+	>
+		<input type="checkbox" class="peer" checked={open} />
+		<div class="collapse-title text-xl font-medium">
+			<span class="inline-flex items-baseline">
+				<slot name="icon" />
+				<slot name="title" />
+			</span>
+		</div>
+		<div class="collapse-content flex flex-col gap-2">
+			<slot />
+		</div>
+	</div>
+{:else}
+	<div
+		class="bg-base-200 rounded-box shadow-primary/50 relative grid w-full max-w-2xl self-center overflow-hidden shadow-lg"
+	>
+		<div class="min-h-16 w-full p-4 text-xl font-medium">
+			<span class="inline-flex items-baseline">
+				<slot name="icon" />
+				<slot name="title" />
+			</span>
+		</div>
+		<div class="flex flex-col gap-2 p-4 pt-0">
+			<slot />
+		</div>
+	</div>
+{/if}

interface/src/lib/components/spinner.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import Spinner from '~icons/tabler/loader-2';
+</script>
+
+<div class=" bg-base-100 flex h-full w-full flex-col items-center justify-center p-6">
+	<Spinner class="text-primary h-14 w-auto animate-spin stroke-2" />
+	<p class="text-xl">Loading...</p>
+</div>

interface/src/lib/stores/features.ts

@@ -0,0 +1,20 @@
+import { readable } from 'svelte/store';
+
+type features = {
+	project: boolean;
+	security: boolean;
+	mqtt: boolean;
+	ntp: boolean;
+	ota: boolean;
+	upload_firmware: boolean;
+};
+
+export const time = readable(new Date(), function start(set) {
+	const interval = setInterval(() => {
+		set(new Date());
+	}, 1000);
+
+	return function stop() {
+		clearInterval(interval);
+	};
+});

interface/src/routes/+page.svelte

@@ -11,7 +11,7 @@
 		<div class="card-body w-80">
 			<h2 class="card-title text-center text-2xl">Welcome to ESP32-SvelteKit</h2>
 			<p class="py-6 text-center">
-				A simple, secure and extensible framework for IoT projects built on ESP32 platforms with
+				A simple, secure and extensible framework for IoT projects for ESP32 platforms with
 				responsive <a
 					href="https://kit.svelte.dev/"
 					class="link"

interface/src/routes/connections/MQTT.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { onMount, onDestroy } from 'svelte';
-	import InputPassword from '$lib/InputPassword.svelte';
-	import SettingsCard from '$lib/SettingsCard.svelte';
+	import InputPassword from '$lib/components/InputPassword.svelte';
+	import SettingsCard from '$lib/components/SettingsCard.svelte';
 
 	import MQTT from '~icons/tabler/topology-star-3';
 	import Client from '~icons/tabler/robot';
@@ -123,7 +123,7 @@
 	}
 </script>
 
-<SettingsCard open={true}>
+<SettingsCard open={true} collapsable={false}>
 	<MQTT slot="icon" class="lex-shrink-0 mr-2 h-6 w-6 self-end" />
 	<span slot="title">MQTT</span>
 	<div class="w-full overflow-x-auto">
@@ -179,7 +179,7 @@
 		</table>
 	</div>
 
-	<div class="collapse">
+	<div class="collapse-arrow collapse">
 		<input type="checkbox" />
 		<div class="collapse-title text-xl font-medium">Change MQTT Settings</div>
 		<div class="collapse-content">
@@ -275,9 +275,9 @@
 						<input
 							type="checkbox"
 							bind:checked={mqttSettings.clean_session}
-							class="checkbox checkbox-primary sm:-mb-5"
+							class="checkbox checkbox-primary mt-2 sm:-mb-8 sm:mt-0"
 						/>
-						<span class="mt-2 sm:-mb-5 sm:mt-0">Clean Session?</span>
+						<span class="mt-2 sm:-mb-8 sm:mt-0">Clean Session?</span>
 					</label>
 					<!-- Keep Alive -->
 					<div>

interface/src/routes/connections/NTP.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { onMount, onDestroy } from 'svelte';
-	import SettingsCard from '$lib/SettingsCard.svelte';
+	import SettingsCard from '$lib/components/SettingsCard.svelte';
 	import type { TimeZones } from './timezones';
 	import { TIME_ZONES } from './timezones';
 
@@ -120,7 +120,7 @@
 	}
 </script>
 
-<SettingsCard open={false}>
+<SettingsCard open={true}>
 	<Clock slot="icon" class="lex-shrink-0 mr-2 h-6 w-6 self-end" />
 	<span slot="title">Network Time</span>
 	<div class="w-full overflow-x-auto">

interface/src/routes/demo/+page.svelte

@@ -1,6 +1,13 @@
 <script lang="ts">
-	import type { PageData } from '../app/$types';
-	import Spinner from '$lib/spinner.svelte';
+	import type { PageData } from '../$types';
+	import Demo from './Demo.svelte';
 
 	export let data: PageData;
 </script>
+
+<div
+	class="mx-8 my-8 flex
+     flex-col gap-4"
+>
+	<Demo lightState={data.lightState} />
+</div>

interface/src/routes/demo/+page.ts

@@ -1,7 +1,11 @@
 import type { PageLoad } from './$types';
 
-export const load = (async () => {
+export const load = (async ({ fetch }) => {
+    const lightStatRes = await fetch('/rest/lightState');
+    const lightStatItem = await lightStatRes.json();
+
     return {
-        title: 'Demo App'
+        lightState: lightStatItem,
+        title: "Project Demo"
     };
 }) satisfies PageLoad;

interface/src/routes/demo/Demo.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	type LightState = {
+		led_on: boolean;
+	};
+
+	export let lightState: LightState;
+</script>

interface/src/routes/login.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import logo from '$lib/assets/svelte-logo.png';
-	import InputPassword from '$lib/InputPassword.svelte';
+	import InputPassword from '$lib/components/InputPassword.svelte';
 </script>
 
 <div class="hero from-primary/30 to-secondary/30 min-h-screen bg-gradient-to-br">

interface/src/routes/system/OTASettings.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { openModal, closeModal } from 'svelte-modals';
-	import ConfirmDialog from '$lib/ConfirmDialog.svelte';
-	import InputPassword from '$lib/InputPassword.svelte';
-	import SettingsCard from '$lib/SettingsCard.svelte';
+	import ConfirmDialog from '$lib/components/ConfirmDialog.svelte';
+	import InputPassword from '$lib/components/InputPassword.svelte';
+	import SettingsCard from '$lib/components/SettingsCard.svelte';
 
 	import OTA from '~icons/tabler/refresh-alert';
 	import Warning from '~icons/tabler/alert-triangle';
@@ -80,9 +80,9 @@
 </script>
 
 <SettingsCard open={false}>
-	<OTA slot="icon" class="lex-shrink-0 self-end w-6 h-6 rounded-full mr-2" />
+	<OTA slot="icon" class="lex-shrink-0 mr-2 h-6 w-6 self-end rounded-full" />
 	<span slot="title">OTA Firmware Update</span>
-	<label class="label justify-start gap-4 cursor-pointer">
+	<label class="label cursor-pointer justify-start gap-4">
 		<input type="checkbox" bind:checked={otaSettings.enabled} class="checkbox checkbox-primary" />
 		<span class="">Enable Remote OTA Updates?</span>
 	</label>
@@ -95,7 +95,7 @@
 			type="number"
 			min="1025"
 			max="65536"
-			class="input input-bordered w-full invalid:border-error invalid:border-2"
+			class="input input-bordered invalid:border-error w-full invalid:border-2"
 			bind:value={otaSettings.port}
 			id="port"
 			required
@@ -109,7 +109,7 @@
 			<span class="label-text text-md">Password</span>
 		</label>
 		<InputPassword bind:value={otaSettings.password} id="pwd" />
-		<div class="flex justify-end mt-6">
+		<div class="mt-6 flex justify-end">
 			<button class="btn btn-primary" type="submit">Apply Settings</button>
 		</div>
 	</form>
@@ -119,15 +119,15 @@
 	<span class="text-lg font-semibold">Upload Firmware</span>
 	<div class="alert alert-warning shadow-lg">
 		<div>
-			<Warning class="flex-shrink-0 h-6 w-6" />
+			<Warning class="h-6 w-6 flex-shrink-0" />
 			<span>Uploading a new firmware (.bin) file will replace the existing firmware.</span>
 		</div>
 	</div>
 
 	<input
 		type="file"
 		id="binFile"
-		class="file-input file-input-bordered file-input-secondary w-full mt-4"
+		class="file-input file-input-bordered file-input-secondary mt-4 w-full"
 		bind:files
 		accept=".bin"
 		on:change={confirmBinUpload}

interface/src/routes/system/SystemStatus.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { onDestroy } from 'svelte';
 	import { openModal, closeModal } from 'svelte-modals';
-	import ConfirmDialog from '$lib/ConfirmDialog.svelte';
-	import SettingsCard from '$lib/SettingsCard.svelte';
+	import ConfirmDialog from '$lib/components/ConfirmDialog.svelte';
+	import SettingsCard from '$lib/components/SettingsCard.svelte';
 
 	import CPU from '~icons/tabler/cpu';
 	import Power from '~icons/tabler/power';

interface/src/routes/user/+page.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import type { PageData } from './$types';
-	import Spinner from '$lib/spinner.svelte';
 
 	export let data: PageData;
 </script>

interface/src/routes/wifi/Accesspoint.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { onMount, onDestroy } from 'svelte';
-	import InputPassword from '$lib/InputPassword.svelte';
-	import SettingsCard from '$lib/SettingsCard.svelte';
+	import InputPassword from '$lib/components/InputPassword.svelte';
+	import SettingsCard from '$lib/components/SettingsCard.svelte';
 
 	import AP from '~icons/tabler/access-point';
 	import MAC from '~icons/tabler/dna-2';