Darkages/SpotMicroESP32-Leika
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🪇 Implements major structure and service refactors

Browse Source
This commit is contained in:
Rune Harlyk
2024-08-19 20:13:57 +02:00
committed by Rune Harlyk
parent 9978918bf9
commit 3da1717341
23 changed files with 139 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/src/routes/+layout.svelte
+15 -12
View File
@@ -6,14 +6,14 @@
import { notifications } from '$lib/components/toasts/notifications';
import { fade } from 'svelte/transition';
import '../app.css';
import Menu from './menu.svelte';
import Statusbar from './statusbar.svelte';
import Login from './login.svelte';
import Menu from '../lib/components/menu.svelte';
import Statusbar from '../lib/components/statusbar/statusbar.svelte';
import Login from '../lib/components/login.svelte';
import {
telemetry,
analytics,
user,
type userProfile,
type UserProfile,
ModesEnum,
kinematicData,
mode,
@@ -24,12 +24,15 @@
} from '$lib/stores';
import type { Analytics, Battery, DownloadOTA } from '$lib/types/models';
import { api } from '$lib/api';
import { useFeatureFlags } from '$lib/stores/featureFlags';
const features = useFeatureFlags();
onMount(async () => {
if ($user.bearer_token !== '') {
await validateUser($user);
}
const ws_token = $page.data.features.security ? '?access_token=' + $user.bearer_token : '';
const ws_token = $features.security ? '?access_token=' + $user.bearer_token : '';
socket.init(`ws://${window.location.host}/ws/events${ws_token}`);
addEventListeners();
@@ -53,10 +56,10 @@
socket.on('angles', (angles: number[]) => {
if (angles.length) servoAngles.set(angles);
});
if ($page.data.features.analytics) socket.on('analytics', handleAnalytics);
if ($page.data.features.battery) socket.on('battery', handleBattery);
if ($page.data.features.download_firmware) socket.on('otastatus', handleOAT);
if ($page.data.features.sonar) socket.on('sonar', (data) => console.log(data));
if ($features.analytics) socket.on('analytics', handleAnalytics);
if ($features.battery) socket.on('battery', handleBattery);
if ($features.download_firmware) socket.on('otastatus', handleOAT);
if ($features.sonar) socket.on('sonar', (data) => console.log(data));
};
const removeEventListeners = () => {
@@ -68,7 +71,7 @@
socket.off('otastatus', handleOAT);
};
async function validateUser(userdata: userProfile) {
async function validateUser(userdata: UserProfile) {
const result = await api.get('/api/verifyAuthorization');
if (result.isErr()) {
user.invalidate();
@@ -81,7 +84,7 @@
};
const handleClose = () => {
// notifications.error('Connection to device lost', 5000);
notifications.error('Connection to device lost', 5000);
telemetry.setRSSI(0);
};
@@ -102,7 +105,7 @@
<title>{$page.data.title}</title>
</svelte:head>
{#if $page.data.features.security && $user.bearer_token === ''}
{#if $features.security && $user.bearer_token === ''}
<Login />
{:else}
<div class="drawer">
app/src/routes/+layout.ts
-3
View File
@@ -13,10 +13,7 @@ const registerFetchIntercept = async () => {
export const load = async () => {
await registerFetchIntercept();
const result = await fetch('/api/features');
const features = await result.json();
return {
features,
title: 'Spot micro controller',
github: 'runeharlyk/SpotMicroESP32-Leika',
app_name: 'Spot Micro Controller',
app/src/routes/connections/ntp/NTP.svelte
+5 -2
View File
@@ -16,6 +16,9 @@
import Stopwatch from '~icons/tabler/24-hours';
import type { NTPSettings, NTPStatus } from '$lib/types/models';
import { api } from '$lib/api';
import { useFeatureFlags } from '$lib/stores/featureFlags';
const features = useFeatureFlags();
let ntpSettings: NTPSettings;
let ntpStatus: NTPStatus;
@@ -45,7 +48,7 @@
onDestroy(() => clearInterval(interval));
onMount(() => {
if (!$page.data.features.security || $user.admin) {
if (!$features.security || $user.admin) {
getNTPSettings();
}
});
@@ -209,7 +212,7 @@
{/await}
</div>
{#if !$page.data.features.security || $user.admin}
{#if !$features.security || $user.admin}
<Collapsible open={false} on:closed={getNTPSettings}>
<span slot="title">Change NTP Settings</span>
<form
app/src/routes/login.svelte
-111
View File
@@ -1,111 +0,0 @@
<script lang="ts">
import logo from '$lib/assets/logo512.png';
import InputPassword from '$lib/components/InputPassword.svelte';
import { user } from '$lib/stores/user';
import { notifications } from '$lib/components/toasts/notifications';
import { fade, fly } from 'svelte/transition';
import Login from '~icons/tabler/login';
import { api } from '$lib/api';
import type { JWT } from '$lib/models';
type SignInData = {
password: string;
username: string;
};
let username = '';
let password = '';
let loginFailed = false;
let token = { access_token: '' };
async function signInUser(data: SignInData) {
const result = await api.post<JWT>('/api/signIn', data)
if (result.isErr()){
username = '';
password = '';
notifications.error('Wrong Username or Password!', 5000);
loginFailed = true;
setTimeout(() => {
loginFailed = false;
}, 1500);
return
}
token = result.inner;
user.init(token.access_token);
username = $user.username;
notifications.success('User ' + username + ' signed in', 5000);
}
</script>
<div class="hero from-primary/30 to-secondary/30 min-h-screen bg-gradient-to-br">
<div
class="card lg:card-side bg-base-100 face shadow-2xl {loginFailed
? 'failure border-error border-2'
: ''}"
in:fly={{ delay: 200, y: 100, duration: 500 }}
out:fade={{ duration: 200 }}
>
<figure class="bg-base-200"><img src={logo} alt="Logo" class="h-auto w-48 lg:w-64" /></figure>
<div class="card-body w-80">
<h2 class="card-title text-2xl">Login</h2>
<form class="form-control w-full max-w-xs">
<label class="label" for="user">
<span class="label-text text-md">Username</span>
</label>
<input
type="text"
class="input input-bordered w-full max-w-xs"
id="user"
bind:value={username}
/>
<label class="label" for="pwd">
<span class="label-text text-md">Password</span>
</label>
<InputPassword id="pwd" bind:value={password} />
<div class="card-actions mt-4 justify-end">
<button
class="btn btn-primary inline-flex items-center"
on:click={() => {
signInUser({ username, password });
}}><Login class="mr-2 h-5 w-5" /><span>Login</span></button
>
</div>
</form>
</div>
</div>
</div>
<style>
.failure {
animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
}
@keyframes shake {
10%,
90% {
transform: translatex(-1px);
}
20%,
80% {
transform: translatex(2px);
}
30%,
50%,
70% {
transform: translatex(-4px);
}
40%,
60% {
transform: translatex(4px);
}
}
</style>
app/src/routes/menu.svelte
-276
View File
@@ -1,276 +0,0 @@
<script lang="ts">
import logo from '$lib/assets/logo512.png';
import MdiGithub from '~icons/mdi/github';
import MdiConnection from '~icons/mdi/connection';
import Users from '~icons/mdi/users';
import Settings from '~icons/mdi/settings';
import MdiController from '~icons/mdi/controller';
import Devices from '~icons/mdi/devices'
import Camera from '~icons/mdi/camera-outline';
import Rotate3d from '~icons/mdi/rotate-3d';
import MotorOutline from '~icons/mdi/motor-outline';
import Health from '~icons/mdi/stethoscope';
import Folder from '~icons/mdi/folder-outline';
import Update from '~icons/mdi/reload';
import WiFi from '~icons/mdi/wifi';
import Router from '~icons/mdi/router';
import AP from '~icons/mdi/access-point';
import Remote from '~icons/mdi/network';
import Avatar from '~icons/mdi/user-circle';
import Logout from '~icons/mdi/logout';
import Copyright from '~icons/mdi/copyright';
import NTP from '~icons/mdi/clock-check';
import Metrics from '~icons/mdi/report-bar';
import { page } from '$app/stores';
import { user } from '$lib/stores/user';
import { createEventDispatcher } from 'svelte';
const appName = $page.data.app_name;
const copyright = $page.data.copyright;
const github = { href: 'https://github.com/' + $page.data.github, active: true };
type menuItem = {
title: string;
icon: ConstructorOfATypedSvelteComponent;
href?: string;
feature: boolean;
active?: boolean;
submenu?: subMenuItem[];
};
type subMenuItem = {
title: string;
icon: ConstructorOfATypedSvelteComponent;
href: string;
feature: boolean;
active: boolean;
};
let menuItems = [
{
title: 'Controller',
icon: MdiController,
href: '/controller',
feature: true,
},
{
title: 'Peripherals',
icon: Devices,
feature: true,
submenu: [
{
title: 'I2C',
icon: MdiConnection,
href: '/peripherals/i2c',
feature: true,
},
{
title: 'Camera',
icon: Camera,
href: '/peripherals/camera',
feature: $page.data.features.camera,
},
{
title: 'Servo',
icon: MotorOutline,
href: '/peripherals/servo',
feature: true,
},
{
title: 'IMU',
icon: Rotate3d,
href: '/peripherals/imu',
feature: $page.data.features.imu || $page.data.features.mag || $page.data.features.bmp,
}
]
},
{
title: 'Connections',
icon: Remote,
feature: $page.data.features.ntp,
submenu: [
{
title: 'NTP',
icon: NTP,
href: '/connections/ntp',
feature: $page.data.features.ntp,
}
]
},
{
title: 'WiFi',
icon: WiFi,
feature: true,
submenu: [
{
title: 'WiFi Station',
icon: Router,
href: '/wifi/sta',
feature: true,
},
{
title: 'Access Point',
icon: AP,
href: '/wifi/ap',
feature: true,
}
]
},
{
title: 'Users',
icon: Users,
href: '/user',
feature: $page.data.features.security && $user.admin,
},
{
title: 'System',
icon: Settings,
feature: true,
submenu: [
{
title: 'System Status',
icon: Health,
href: '/system/status',
feature: true,
},
{
title: 'File System',
icon: Folder,
href: '/system/filesystem',
feature: true,
},
{
title: 'System Metrics',
icon: Metrics,
href: '/system/metrics',
feature: $page.data.features.analytics,
},
{
title: 'Firmware Update',
icon: Update,
href: '/system/update',
feature:
($page.data.features.ota ||
$page.data.features.upload_firmware ||
$page.data.features.download_firmware) &&
(!$page.data.features.security || $user.admin),
}
]
}
] as menuItem[];
const dispatch = createEventDispatcher();
function setActiveMenuItem(targetTitle: string) {
menuItems.forEach(item => {
item.active = item.title === targetTitle;
item.submenu?.forEach(subItem => {
subItem.active = subItem.title === targetTitle;
});
});
menuItems = menuItems
dispatch('menuClicked');
}
$: setActiveMenuItem($page.data.title);
</script>
<div class="bg-base-200 text-base-content flex h-full w-80 flex-col p-4">
<!-- Sidebar content here -->
<a
href="/"
class="rounded-box mb-4 flex items-center hover:scale-[1.02] active:scale-[0.98]"
on:click={() => setActiveMenuItem('')}
>
<img src={logo} alt="Logo" class="h-12 w-12" />
<h1 class="px-4 text-2xl font-bold">{appName}</h1>
</a>
<ul class="menu rounded-box menu-vertical flex-nowrap overflow-y-auto">
{#each menuItems as menuItem, i (menuItem.title)}
{#if menuItem.feature}
<li>
{#if menuItem.submenu}
<details>
<summary class="text-lg font-bold">
<svelte:component this={menuItem.icon} class="h-6 w-6" />
{menuItem.title}
</summary>
<ul>
{#each menuItem.submenu as subMenuItem}
{#if subMenuItem.feature}
<li class="hover-bordered">
<a
href={subMenuItem.href}
class:bg-base-100={subMenuItem.active}
class="text-ml font-bold"
on:click={() => {
setActiveMenuItem(subMenuItem.title);
menuItems = menuItems;
}}
><svelte:component
this={subMenuItem.icon}
class="h-5 w-5"
/>{subMenuItem.title}</a
>
</li>
{/if}
{/each}
</ul>
</details>
{:else}
<a
href={menuItem.href}
class:bg-base-100={menuItem.active}
class="text-lg font-bold"
on:click={() => {
setActiveMenuItem(menuItem.title);
menuItems = menuItems;
}}><svelte:component this={menuItem.icon} class="h-6 w-6" />{menuItem.title}</a
>
{/if}
</li>
{/if}
{/each}
</ul>
<div class="flex-col" />
<div class="flex-grow" />
{#if $page.data.features.security}
<div class="flex items-center">
<Avatar class="h-8 w-8" />
<span class="flex-grow px-4 text-xl font-bold">{$user.username}</span>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div
class="btn btn-ghost"
on:click={() => {
user.invalidate();
}}
>
<Logout class="h-8 w-8 rotate-180" />
</div>
</div>
{/if}
<div class="divider my-0" />
<div class="flex items-center">
{#if github.active}
<a href={github.href} class="btn btn-ghost" target="_blank" rel="noopener noreferrer"
><MdiGithub class="h-5 w-5" /></a
>
{/if}
<div class="inline-flex flex-grow items-center justify-end text-sm">
<Copyright class="h-4 w-4" /><span class="px-2">{copyright}</span>
</div>
</div>
</div>
app/src/routes/peripherals/i2c/i2c.svelte
+2 -5
View File
@@ -1,7 +1,7 @@
<script lang="ts">
import SettingsCard from "$lib/components/SettingsCard.svelte";
import MdiConnection from '~icons/mdi/connection';
import { onDestroy, onMount } from "svelte";
import { onMount } from "svelte";
import { socket } from "$lib/stores";
import type { I2CDevice } from "$lib/types/models";
@@ -18,10 +18,7 @@
onMount(() => {
socket.on('i2cScan', handleScan);
socket.sendEvent('i2cScan', "");
})
onDestroy(() => {
socket.off('i2cScan', handleScan);
return () => socket.off('i2cScan', handleScan);
})
const handleScan = (data: any) => {
app/src/routes/peripherals/imu/imu.svelte
+8 -6
View File
@@ -6,10 +6,12 @@
import { cubicOut } from "svelte/easing";
import { slide } from "svelte/transition";
import { onDestroy, onMount } from "svelte";
import { daisyColor } from "$lib/DaisyUiHelper";
import { daisyColor } from "$lib/utilities";
import { socket } from "$lib/stores";
import type { IMU } from "$lib/types/models";
import { page } from "$app/stores";
import { useFeatureFlags } from "$lib/stores/featureFlags";
const features = useFeatureFlags();
Chart.register(...registerables);
@@ -242,7 +244,7 @@
})
const updateData = () => {
if ($page.data.features.imu) {
if ($features.imu) {
angleChart.data.labels = $imu.x;
angleChart.data.datasets[0].data = $imu.x;
angleChart.data.datasets[1].data = $imu.y;
@@ -252,7 +254,7 @@
angleChart.update('none');
}
if ($page.data.features.bmp) {
if ($features.bmp) {
tempChart.data.labels = $imu.bmp_temp;
tempChart.data.datasets[0].data = $imu.bmp_temp;
tempChart.options.scales!.y!.min = Math.min(...$imu.bmp_temp) - 1;
@@ -272,7 +274,7 @@
<SettingsCard collapsible={false}>
<Rotate3d slot="icon" class="lex-shrink-0 mr-2 h-6 w-6 self-end" />
<span slot="title">IMU</span>
{#if $page.data.features.imu}
{#if $features.imu}
<div class="w-full overflow-x-auto">
<div
class="flex w-full flex-col space-y-1 h-60"
@@ -282,7 +284,7 @@
</div>
</div>
{/if}
{#if $page.data.features.bmp}
{#if $features.bmp}
<div class="w-full overflow-x-auto">
<div
class="flex w-full flex-col space-y-1 h-60"
app/src/routes/system/metrics/+page.svelte
+4 -2
View File
@@ -1,9 +1,11 @@
<script lang="ts">
import SystemMetrics from './SystemMetrics.svelte';
import { page } from '$app/stores';
import { goto } from '$app/navigation';
import { useFeatureFlags } from '$lib/stores/featureFlags';
if (!$page.data.features.analytics) {
const features = useFeatureFlags();
if (!$features.analytics) {
goto('/');
}
</script>
app/src/routes/system/metrics/SystemMetrics.svelte
+1 -1
View File
@@ -6,7 +6,7 @@
import { cubicOut } from 'svelte/easing';
import { Chart, registerables } from 'chart.js';
import Metrics from '~icons/tabler/report-analytics';
import { daisyColor } from '$lib/DaisyUiHelper';
import { daisyColor } from '$lib/utilities';
import { analytics } from '$lib/stores/analytics';
Chart.register(...registerables);
app/src/routes/system/status/SystemStatus.svelte
+6 -2
View File
@@ -29,6 +29,10 @@
import { api } from '$lib/api';
import { convertSeconds } from '$lib/utilities';
import { useFeatureFlags } from '$lib/stores/featureFlags';
const features = useFeatureFlags()
let systemInformation: SystemInformation;
async function getSystemStatus() {
@@ -295,12 +299,12 @@
</div>
<div class="mt-4 flex flex-wrap justify-end gap-2">
{#if $page.data.features.sleep}
{#if $features.sleep}
<button class="btn btn-primary inline-flex items-center" on:click={confirmSleep}
><Sleep class="mr-2 h-5 w-5" /><span>Sleep</span></button
>
{/if}
{#if !$page.data.features.security || $user.admin}
{#if !$features.security || $user.admin}
<button class="btn btn-primary inline-flex items-center" on:click={confirmRestart}
><Power class="mr-2 h-5 w-5" /><span>Restart</span></button
>
app/src/routes/system/update/+page.svelte
+5 -3
View File
@@ -2,15 +2,17 @@
import UploadFirmware from './UploadFirmware.svelte';
import GithubFirmwareManager from './GithubFirmwareManager.svelte';
import { user } from '$lib/stores/user';
import { page } from '$app/stores';
import { useFeatureFlags } from '$lib/stores';
const features = useFeatureFlags();
</script>
<div class="mx-0 my-1 flex flex-col space-y-4 sm:mx-8 sm:my-8">
{#if $page.data.features.download_firmware && (!$page.data.features.security || $user.admin)}
{#if $features.download_firmware && (!$features.security || $user.admin)}
<GithubFirmwareManager />
{/if}
{#if $page.data.features.upload_firmware && (!$page.data.features.security || $user.admin)}
{#if $features.upload_firmware && (!$features.security || $user.admin)}
<UploadFirmware />
{/if}
</div>
app/src/routes/system/update/GithubFirmwareManager.svelte
+6 -3
View File
@@ -16,6 +16,9 @@
import InfoDialog from '$lib/components/InfoDialog.svelte';
import Check from '~icons/tabler/check';
import { api } from '$lib/api';
import { useFeatureFlags } from '$lib/stores';
const features = useFeatureFlags();
async function getGithubAPI() {
const headers = {
@@ -45,7 +48,7 @@
// check if the asset is of type *.bin
if (
assets[i].name.includes('.bin') &&
assets[i].name.includes($page.data.features.firmware_built_target)
assets[i].name.includes($features.firmware_built_target)
) {
url = assets[i].browser_download_url;
}
@@ -99,7 +102,7 @@
<tbody>
{#each githubReleases as release}
<tr
class={compareVersions($page.data.features.firmware_version, release.tag_name) === 0
class={compareVersions($features.firmware_version, release.tag_name) === 0
? 'bg-primary text-primary-content'
: 'bg-base-100 h-14'}
>
@@ -124,7 +127,7 @@
{/if}
</td>
<td align="center">
{#if compareVersions($page.data.features.firmware_version, release.tag_name) != 0}
{#if compareVersions($features.firmware_version, release.tag_name) != 0}
<button
class="btn btn-ghost btn-circle btn-sm"
on:click={() => {
app/src/routes/wifi/ap/Accesspoint.svelte
+5 -2
View File
@@ -14,6 +14,9 @@
import Devices from '~icons/tabler/devices';
import type { ApSettings, ApStatus } from '$lib/types/models';
import { api } from '$lib/api';
import { useFeatureFlags } from '$lib/stores';
const features = useFeatureFlags();
let apSettings: ApSettings;
let apStatus: ApStatus;
@@ -47,7 +50,7 @@
onDestroy(() => clearInterval(interval));
onMount(() => {
if (!$page.data.features.security || $user.admin) {
if (!$features.security || $user.admin) {
getAPSettings();
}
});
@@ -221,7 +224,7 @@
{/await}
</div>
{#if !$page.data.features.security || $user.admin}
{#if !$features.security || $user.admin}
<div class="bg-base-200 relative grid w-full max-w-2xl self-center overflow-hidden">
<div
class="min-h-16 flex w-full items-center justify-between space-x-3 p-0 text-xl font-medium"
app/src/routes/wifi/sta/Scan.svelte
+1 -1
View File
@@ -7,7 +7,7 @@
import Cancel from '~icons/tabler/x';
import Reload from '~icons/tabler/reload';
import { onMount, onDestroy } from 'svelte';
import RssiIndicator from '$lib/components/RSSIIndicator.svelte';
import RssiIndicator from '$lib/components/statusbar/RSSIIndicator.svelte';
import type { NetworkItem } from '$lib/types/models';
import { api } from '$lib/api';
import type { NetworkList } from '$lib/models';
app/src/routes/wifi/sta/Wifi.svelte
+5 -3
View File
@@ -33,9 +33,11 @@
import Check from '~icons/tabler/check';
import InfoDialog from '$lib/components/InfoDialog.svelte';
import type { KnownNetworkItem, WifiSettings, WifiStatus } from '$lib/types/models';
import { socket } from '$lib/stores';
import { socket, useFeatureFlags } from '$lib/stores';
import { api } from '$lib/api';
const features = useFeatureFlags();
let networkEditable: KnownNetworkItem = {
ssid: '',
password: '',
@@ -435,7 +437,7 @@
{/await}
</div>
{#if !$page.data.features.security || $user.admin}
{#if !$features.security || $user.admin}
<div class="bg-base-200 relative grid w-full max-w-2xl self-center overflow-hidden">
<div
class="min-h-16 flex w-full items-center justify-between space-x-3 p-0 text-xl font-medium"
@@ -489,7 +491,7 @@
<div>
<div class="font-bold">{dndNetworkList[index].ssid}</div>
</div>
{#if !$page.data.features.security || $user.admin}
{#if !$features.security || $user.admin}
<div class="flex-grow" />
<div class="space-x-0 px-0 mx-0">
<button