✨ Makes socket messages event typed
This commit is contained in:
Rune Harlyk
@@ -1,3 +1,20 @@
|
||||
export enum Topics {
|
||||
imu = 'imu',
|
||||
mode = 'mode',
|
||||
input = 'input',
|
||||
analytics = 'analytics',
|
||||
position = 'position',
|
||||
angles = 'angles',
|
||||
i2cScan = 'i2cScan',
|
||||
peripheralSettings = 'peripheralSettings',
|
||||
otastatus = 'otastatus',
|
||||
servoState = 'servoState',
|
||||
servoPWM = 'servoPWM',
|
||||
WiFiSettings = 'WiFiSettings',
|
||||
sonar = 'sonar',
|
||||
rssi = 'rssi'
|
||||
}
|
||||
|
||||
export type vector = { x: number; y: number }
|
||||
|
||||
export interface ControllerInput {
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
<script lang="ts">
|
||||
import { onDestroy, onMount } from 'svelte';
|
||||
import { page } from '$app/state';
|
||||
import { Modals, modals } from 'svelte-modals';
|
||||
import Toast from '$lib/components/toasts/Toast.svelte';
|
||||
import { notifications } from '$lib/components/toasts/notifications';
|
||||
import { fade } from 'svelte/transition';
|
||||
import '../app.css';
|
||||
import Menu from '../lib/components/menu/Menu.svelte';
|
||||
import Statusbar from '../lib/components/statusbar/statusbar.svelte';
|
||||
import { onDestroy, onMount } from 'svelte'
|
||||
import { page } from '$app/state'
|
||||
import { Modals, modals } from 'svelte-modals'
|
||||
import Toast from '$lib/components/toasts/Toast.svelte'
|
||||
import { notifications } from '$lib/components/toasts/notifications'
|
||||
import { fade } from 'svelte/transition'
|
||||
import '../app.css'
|
||||
import Menu from '../lib/components/menu/Menu.svelte'
|
||||
import Statusbar from '../lib/components/statusbar/statusbar.svelte'
|
||||
import {
|
||||
telemetry,
|
||||
analytics,
|
||||
@@ -19,75 +19,75 @@
|
||||
servoAnglesOut,
|
||||
socket,
|
||||
location,
|
||||
useFeatureFlags,
|
||||
} from '$lib/stores';
|
||||
import type { Analytics, DownloadOTA } from '$lib/types/models';
|
||||
useFeatureFlags
|
||||
} from '$lib/stores'
|
||||
import { Topics, type Analytics, type DownloadOTA } from '$lib/types/models'
|
||||
interface Props {
|
||||
children?: import('svelte').Snippet;
|
||||
children?: import('svelte').Snippet
|
||||
}
|
||||
|
||||
let { children }: Props = $props();
|
||||
let { children }: Props = $props()
|
||||
|
||||
const features = useFeatureFlags();
|
||||
const features = useFeatureFlags()
|
||||
|
||||
onMount(async () => {
|
||||
const ws = $location ? $location : window.location.host;
|
||||
socket.init(`ws://${ws}/api/ws/events`);
|
||||
const ws = $location ? $location : window.location.host
|
||||
socket.init(`ws://${ws}/api/ws/events`)
|
||||
|
||||
addEventListeners();
|
||||
addEventListeners()
|
||||
|
||||
outControllerData.subscribe(data => socket.sendEvent('input', data));
|
||||
mode.subscribe(data => socket.sendEvent('mode', data));
|
||||
servoAnglesOut.subscribe(data => socket.sendEvent('angles', data));
|
||||
kinematicData.subscribe(data => socket.sendEvent('position', data));
|
||||
});
|
||||
outControllerData.subscribe(data => socket.sendEvent(Topics.input, data))
|
||||
mode.subscribe(data => socket.sendEvent(Topics.mode, data))
|
||||
servoAnglesOut.subscribe(data => socket.sendEvent(Topics.angles, data))
|
||||
kinematicData.subscribe(data => socket.sendEvent(Topics.position, data))
|
||||
})
|
||||
|
||||
onDestroy(() => {
|
||||
removeEventListeners();
|
||||
});
|
||||
removeEventListeners()
|
||||
})
|
||||
|
||||
const addEventListeners = () => {
|
||||
socket.on('open', handleOpen);
|
||||
socket.on('close', handleClose);
|
||||
socket.on('error', handleError);
|
||||
socket.on('rssi', handleNetworkStatus);
|
||||
socket.on('mode', (data: ModesEnum) => mode.set(data));
|
||||
socket.on('analytics', handleAnalytics);
|
||||
socket.on('angles', (angles: number[]) => {
|
||||
if (angles.length) servoAngles.set(angles);
|
||||
});
|
||||
socket.on('open', handleOpen)
|
||||
socket.on('close', handleClose)
|
||||
socket.on('error', handleError)
|
||||
socket.on(Topics.rssi, handleNetworkStatus)
|
||||
socket.on(Topics.mode, (data: ModesEnum) => mode.set(data))
|
||||
socket.on(Topics.analytics, handleAnalytics)
|
||||
socket.on(Topics.angles, (angles: number[]) => {
|
||||
if (angles.length) servoAngles.set(angles)
|
||||
})
|
||||
features.subscribe(data => {
|
||||
if (data?.download_firmware) socket.on('otastatus', handleOAT);
|
||||
if (data?.sonar) socket.on('sonar', data => console.log(data));
|
||||
});
|
||||
};
|
||||
if (data?.download_firmware) socket.on(Topics.otastatus, handleOAT)
|
||||
if (data?.sonar) socket.on(Topics.sonar, data => console.log(data))
|
||||
})
|
||||
}
|
||||
|
||||
const removeEventListeners = () => {
|
||||
socket.off('analytics', handleAnalytics);
|
||||
socket.off('open', handleOpen);
|
||||
socket.off('close', handleClose);
|
||||
socket.off('rssi', handleNetworkStatus);
|
||||
socket.off('otastatus', handleOAT);
|
||||
};
|
||||
socket.off(Topics.analytics, handleAnalytics)
|
||||
socket.off('open', handleOpen)
|
||||
socket.off('close', handleClose)
|
||||
socket.off(Topics.rssi, handleNetworkStatus)
|
||||
socket.off(Topics.otastatus, handleOAT)
|
||||
}
|
||||
|
||||
const handleOpen = () => {
|
||||
notifications.success('Connection to device established', 5000);
|
||||
};
|
||||
notifications.success('Connection to device established', 5000)
|
||||
}
|
||||
|
||||
const handleClose = () => {
|
||||
notifications.error('Connection to device lost', 5000);
|
||||
telemetry.setRSSI(0);
|
||||
};
|
||||
notifications.error('Connection to device lost', 5000)
|
||||
telemetry.setRSSI(0)
|
||||
}
|
||||
|
||||
const handleError = (data: any) => console.error(data);
|
||||
const handleError = (data: any) => console.error(data)
|
||||
|
||||
const handleAnalytics = (data: Analytics) => analytics.addData(data);
|
||||
const handleAnalytics = (data: Analytics) => analytics.addData(data)
|
||||
|
||||
const handleNetworkStatus = (data: number) => telemetry.setRSSI(data);
|
||||
const handleNetworkStatus = (data: number) => telemetry.setRSSI(data)
|
||||
|
||||
const handleOAT = (data: DownloadOTA) => telemetry.setDownloadOTA(data);
|
||||
const handleOAT = (data: DownloadOTA) => telemetry.setDownloadOTA(data)
|
||||
|
||||
let menuOpen = $state(false);
|
||||
let menuOpen = $state(false)
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
|
||||
@@ -1,31 +1,31 @@
|
||||
<script lang="ts">
|
||||
import Controls from './Controls.svelte';
|
||||
import WidgetContainer from '$lib/components/layout/WidgetContainer.svelte';
|
||||
import { selectedView, views } from '$lib/stores/application';
|
||||
import { onMount } from 'svelte';
|
||||
import { mpu, socket } from '$lib/stores';
|
||||
import { imu } from '$lib/stores/imu';
|
||||
import type { IMU } from '$lib/types/models';
|
||||
import Controls from './Controls.svelte'
|
||||
import WidgetContainer from '$lib/components/layout/WidgetContainer.svelte'
|
||||
import { selectedView, views } from '$lib/stores/application'
|
||||
import { onMount } from 'svelte'
|
||||
import { mpu, socket } from '$lib/stores'
|
||||
import { imu } from '$lib/stores/imu'
|
||||
import { Topics, type IMU } from '$lib/types/models'
|
||||
|
||||
let layout = $derived($views.find(v => v.name === $selectedView)!);
|
||||
let layout = $derived($views.find(v => v.name === $selectedView)!)
|
||||
|
||||
onMount(() => {
|
||||
socket.on('imu', (data: IMU) => {
|
||||
imu.addData(data);
|
||||
if (data.heading)
|
||||
mpu.update(mpuData => {
|
||||
mpuData.heading = data.heading;
|
||||
console.log(data.heading);
|
||||
onMount(() => {
|
||||
socket.on(Topics.imu, (data: IMU) => {
|
||||
imu.addData(data)
|
||||
if (data.heading)
|
||||
mpu.update(mpuData => {
|
||||
mpuData.heading = data.heading
|
||||
console.log(data.heading)
|
||||
|
||||
return mpuData;
|
||||
});
|
||||
});
|
||||
});
|
||||
return mpuData
|
||||
})
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<div class="absolute top-0 select-none w-screen h-screen">
|
||||
<Controls />
|
||||
<div class="absolute w-full h-screen top-0 overflow-hidden lg:pt-16 pt-12">
|
||||
<WidgetContainer container={layout.content} />
|
||||
</div>
|
||||
<Controls />
|
||||
<div class="absolute w-full h-screen top-0 overflow-hidden lg:pt-16 pt-12">
|
||||
<WidgetContainer container={layout.content} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
import SettingsCard from '$lib/components/SettingsCard.svelte'
|
||||
import { onMount } from 'svelte'
|
||||
import { socket } from '$lib/stores'
|
||||
import type { I2CDevice } from '$lib/types/models'
|
||||
import { Topics, type I2CDevice } from '$lib/types/models'
|
||||
import { Connection } from '$lib/components/icons'
|
||||
import I2CSetting from './i2cSetting.svelte'
|
||||
|
||||
@@ -24,9 +24,9 @@
|
||||
let isLoading = $state(false)
|
||||
|
||||
onMount(() => {
|
||||
socket.on('i2cScan', handleScan)
|
||||
socket.on(Topics.i2cScan, handleScan)
|
||||
triggerScan()
|
||||
return () => socket.off('i2cScan', handleScan)
|
||||
return () => socket.off(Topics.i2cScan, handleScan)
|
||||
})
|
||||
|
||||
const handleScan = (data: any) => {
|
||||
@@ -43,7 +43,7 @@
|
||||
|
||||
const triggerScan = () => {
|
||||
isLoading = true
|
||||
socket.sendEvent('i2cScan', '')
|
||||
socket.sendEvent(Topics.i2cScan, '')
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<script lang="ts">
|
||||
import { Cancel, Edit, EditOff, Power } from '$lib/components/icons'
|
||||
import { socket } from '$lib/stores'
|
||||
import type { PeripheralsConfiguration } from '$lib/types/models'
|
||||
import { Topics, type PeripheralsConfiguration } from '$lib/types/models'
|
||||
import { onMount } from 'svelte'
|
||||
import { modals } from 'svelte-modals'
|
||||
import ConfirmDialog from '$lib/components/ConfirmDialog.svelte'
|
||||
@@ -10,9 +10,9 @@
|
||||
let isEditing = $state(false)
|
||||
|
||||
onMount(() => {
|
||||
socket.on('peripheralSettings', handleSettings)
|
||||
socket.sendEvent('peripheralSettings', '')
|
||||
return () => socket.off('peripheralSettings', handleSettings)
|
||||
socket.on(Topics.peripheralSettings, handleSettings)
|
||||
socket.sendEvent(Topics.peripheralSettings, '')
|
||||
return () => socket.off(Topics.peripheralSettings, handleSettings)
|
||||
})
|
||||
|
||||
const handleSettings = (data: any) => {
|
||||
@@ -30,7 +30,7 @@
|
||||
},
|
||||
onConfirm: () => {
|
||||
modals.close()
|
||||
socket.sendEvent('peripheralSettings', settings)
|
||||
socket.sendEvent(Topics.peripheralSettings, settings)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
@@ -1,51 +1,51 @@
|
||||
<script lang="ts">
|
||||
import SettingsCard from '$lib/components/SettingsCard.svelte';
|
||||
import { imu } from '$lib/stores/imu';
|
||||
import { Chart, registerables } from 'chart.js';
|
||||
import { cubicOut } from 'svelte/easing';
|
||||
import { slide } from 'svelte/transition';
|
||||
import { onDestroy, onMount } from 'svelte';
|
||||
import { socket } from '$lib/stores';
|
||||
import type { IMU } from '$lib/types/models';
|
||||
import { useFeatureFlags } from '$lib/stores/featureFlags';
|
||||
import { Rotate3d } from '$lib/components/icons';
|
||||
import SettingsCard from '$lib/components/SettingsCard.svelte'
|
||||
import { imu } from '$lib/stores/imu'
|
||||
import { Chart, registerables } from 'chart.js'
|
||||
import { cubicOut } from 'svelte/easing'
|
||||
import { slide } from 'svelte/transition'
|
||||
import { onDestroy, onMount } from 'svelte'
|
||||
import { socket } from '$lib/stores'
|
||||
import { Topics, type IMU } from '$lib/types/models'
|
||||
import { useFeatureFlags } from '$lib/stores/featureFlags'
|
||||
import { Rotate3d } from '$lib/components/icons'
|
||||
|
||||
Chart.register(...registerables);
|
||||
Chart.register(...registerables)
|
||||
|
||||
const features = useFeatureFlags();
|
||||
let intervalId: ReturnType<typeof setInterval> | number;
|
||||
const features = useFeatureFlags()
|
||||
let intervalId: ReturnType<typeof setInterval> | number
|
||||
|
||||
let angleChartElement: HTMLCanvasElement;
|
||||
let tempChartElement: HTMLCanvasElement;
|
||||
let altitudeChartElement: HTMLCanvasElement;
|
||||
let angleChartElement: HTMLCanvasElement
|
||||
let tempChartElement: HTMLCanvasElement
|
||||
let altitudeChartElement: HTMLCanvasElement
|
||||
|
||||
let angleChart: Chart;
|
||||
let tempChart: Chart;
|
||||
let altitudeChart: Chart;
|
||||
let angleChart: Chart
|
||||
let tempChart: Chart
|
||||
let altitudeChart: Chart
|
||||
|
||||
const getChartColors = () => {
|
||||
const style = getComputedStyle(document.body);
|
||||
const style = getComputedStyle(document.body)
|
||||
return {
|
||||
primary: style.getPropertyValue('--color-primary'),
|
||||
secondary: style.getPropertyValue('--color-secondary'),
|
||||
accent: style.getPropertyValue('--color-accent'),
|
||||
background: style.getPropertyValue('--color-background'),
|
||||
};
|
||||
};
|
||||
background: style.getPropertyValue('--color-background')
|
||||
}
|
||||
}
|
||||
|
||||
const createBaseChartConfig = (bgColor: string) => ({
|
||||
maintainAspectRatio: false,
|
||||
responsive: true,
|
||||
plugins: {
|
||||
legend: { display: true },
|
||||
tooltip: { mode: 'index' as const, intersect: false },
|
||||
tooltip: { mode: 'index' as const, intersect: false }
|
||||
},
|
||||
elements: { point: { radius: 1 } },
|
||||
scales: {
|
||||
x: {
|
||||
grid: { color: bgColor },
|
||||
ticks: { color: bgColor },
|
||||
display: false,
|
||||
display: false
|
||||
},
|
||||
y: {
|
||||
type: 'linear' as const,
|
||||
@@ -54,14 +54,14 @@
|
||||
max: 10,
|
||||
grid: { color: bgColor },
|
||||
ticks: { color: bgColor },
|
||||
border: { color: bgColor },
|
||||
},
|
||||
},
|
||||
});
|
||||
border: { color: bgColor }
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const initializeCharts = () => {
|
||||
const colors = getChartColors();
|
||||
const baseConfig = createBaseChartConfig(colors.background);
|
||||
const colors = getChartColors()
|
||||
const baseConfig = createBaseChartConfig(colors.background)
|
||||
|
||||
angleChart = new Chart(angleChartElement, {
|
||||
type: 'line',
|
||||
@@ -73,7 +73,7 @@
|
||||
backgroundColor: colors.primary,
|
||||
borderWidth: 2,
|
||||
data: $imu.x,
|
||||
yAxisID: 'y',
|
||||
yAxisID: 'y'
|
||||
},
|
||||
{
|
||||
label: 'y',
|
||||
@@ -81,7 +81,7 @@
|
||||
backgroundColor: colors.secondary,
|
||||
borderWidth: 2,
|
||||
data: $imu.y,
|
||||
yAxisID: 'y',
|
||||
yAxisID: 'y'
|
||||
},
|
||||
{
|
||||
label: 'z',
|
||||
@@ -89,9 +89,9 @@
|
||||
backgroundColor: colors.accent,
|
||||
borderWidth: 2,
|
||||
data: $imu.z,
|
||||
yAxisID: 'y',
|
||||
},
|
||||
],
|
||||
yAxisID: 'y'
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
...baseConfig,
|
||||
@@ -103,12 +103,12 @@
|
||||
display: true,
|
||||
text: 'Angle [°]',
|
||||
color: colors.background,
|
||||
font: { size: 16, weight: 'bold' },
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
font: { size: 16, weight: 'bold' }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
tempChart = new Chart(tempChartElement, {
|
||||
type: 'line',
|
||||
@@ -120,9 +120,9 @@
|
||||
backgroundColor: colors.secondary,
|
||||
borderWidth: 2,
|
||||
data: $imu.bmp_temp,
|
||||
yAxisID: 'y',
|
||||
},
|
||||
],
|
||||
yAxisID: 'y'
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
...baseConfig,
|
||||
@@ -134,12 +134,12 @@
|
||||
display: true,
|
||||
text: 'Temperature [C°]',
|
||||
color: colors.background,
|
||||
font: { size: 16, weight: 'bold' },
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
font: { size: 16, weight: 'bold' }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
altitudeChart = new Chart(altitudeChartElement, {
|
||||
type: 'line',
|
||||
@@ -151,9 +151,9 @@
|
||||
backgroundColor: colors.primary,
|
||||
borderWidth: 2,
|
||||
data: $imu.altitude,
|
||||
yAxisID: 'y',
|
||||
},
|
||||
],
|
||||
yAxisID: 'y'
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
...baseConfig,
|
||||
@@ -165,55 +165,55 @@
|
||||
display: true,
|
||||
text: 'Altitude [M]',
|
||||
color: colors.background,
|
||||
font: { size: 16, weight: 'bold' },
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
};
|
||||
font: { size: 16, weight: 'bold' }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const updateChartData = (chart: Chart, data: number[], label: string) => {
|
||||
chart.data.labels = data;
|
||||
chart.data.datasets[0].data = data;
|
||||
chart.options.scales!.y!.min = Math.min(...data) - 1;
|
||||
chart.options.scales!.y!.max = Math.max(...data) + 1;
|
||||
chart.update('none');
|
||||
};
|
||||
chart.data.labels = data
|
||||
chart.data.datasets[0].data = data
|
||||
chart.options.scales!.y!.min = Math.min(...data) - 1
|
||||
chart.options.scales!.y!.max = Math.max(...data) + 1
|
||||
chart.update('none')
|
||||
}
|
||||
|
||||
const updateData = () => {
|
||||
if ($features.imu) {
|
||||
angleChart.data.labels = $imu.x;
|
||||
angleChart.data.datasets[0].data = $imu.x;
|
||||
angleChart.data.datasets[1].data = $imu.y;
|
||||
angleChart.data.datasets[2].data = $imu.z;
|
||||
angleChart.data.labels = $imu.x
|
||||
angleChart.data.datasets[0].data = $imu.x
|
||||
angleChart.data.datasets[1].data = $imu.y
|
||||
angleChart.data.datasets[2].data = $imu.z
|
||||
|
||||
const allValues = [...$imu.x, ...$imu.y, ...$imu.z];
|
||||
angleChart.options.scales!.y!.min = Math.min(...allValues) - 1;
|
||||
angleChart.options.scales!.y!.max = Math.max(...allValues) + 1;
|
||||
angleChart.update('none');
|
||||
const allValues = [...$imu.x, ...$imu.y, ...$imu.z]
|
||||
angleChart.options.scales!.y!.min = Math.min(...allValues) - 1
|
||||
angleChart.options.scales!.y!.max = Math.max(...allValues) + 1
|
||||
angleChart.update('none')
|
||||
}
|
||||
|
||||
if ($features.bmp) {
|
||||
updateChartData(tempChart, $imu.bmp_temp, 'Temperature');
|
||||
updateChartData(altitudeChart, $imu.altitude, 'Altitude');
|
||||
updateChartData(tempChart, $imu.bmp_temp, 'Temperature')
|
||||
updateChartData(altitudeChart, $imu.altitude, 'Altitude')
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
socket.on('imu', (data: IMU) => {
|
||||
console.log(data);
|
||||
imu.addData(data);
|
||||
});
|
||||
socket.on(Topics.imu, (data: IMU) => {
|
||||
console.log(data)
|
||||
imu.addData(data)
|
||||
})
|
||||
|
||||
initializeCharts();
|
||||
intervalId = setInterval(updateData, 200);
|
||||
});
|
||||
initializeCharts()
|
||||
intervalId = setInterval(updateData, 200)
|
||||
})
|
||||
|
||||
onDestroy(() => {
|
||||
socket.off('imu');
|
||||
clearInterval(intervalId);
|
||||
});
|
||||
socket.off(Topics.imu)
|
||||
clearInterval(intervalId)
|
||||
})
|
||||
</script>
|
||||
|
||||
<SettingsCard collapsible={false}>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { socket } from '$lib/stores'
|
||||
import { Topics } from '$lib/types/models'
|
||||
import { throttler as Throttler } from '$lib/utilities'
|
||||
|
||||
let { servoId = $bindable(0), pwm = $bindable(306) } = $props()
|
||||
@@ -11,16 +12,16 @@
|
||||
const throttler = new Throttler()
|
||||
|
||||
const activateServo = () => {
|
||||
socket.sendEvent('servoState', { active: 1 })
|
||||
socket.sendEvent(Topics.servoState, { active: 1 })
|
||||
}
|
||||
|
||||
const deactivateServo = () => {
|
||||
socket.sendEvent('servoState', { active: 0 })
|
||||
socket.sendEvent(Topics.servoState, { active: 0 })
|
||||
}
|
||||
|
||||
const updatePWM = () => {
|
||||
throttler.throttle(() => {
|
||||
socket.sendEvent('servoPWM', { servo_id: servoId, pwm })
|
||||
socket.sendEvent(Topics.servoPWM, { servo_id: servoId, pwm })
|
||||
}, 10)
|
||||
}
|
||||
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
<script lang="ts">
|
||||
import { onDestroy, onMount } from 'svelte';
|
||||
import { modals } from 'svelte-modals';
|
||||
import ConfirmDialog from '$lib/components/ConfirmDialog.svelte';
|
||||
import SettingsCard from '$lib/components/SettingsCard.svelte';
|
||||
import Spinner from '$lib/components/Spinner.svelte';
|
||||
import { slide } from 'svelte/transition';
|
||||
import { cubicOut } from 'svelte/easing';
|
||||
import type { SystemInformation, Analytics } from '$lib/types/models';
|
||||
import { socket } from '$lib/stores/socket';
|
||||
import { api } from '$lib/api';
|
||||
import { convertSeconds } from '$lib/utilities';
|
||||
import { useFeatureFlags } from '$lib/stores/featureFlags';
|
||||
import { onDestroy, onMount } from 'svelte'
|
||||
import { modals } from 'svelte-modals'
|
||||
import ConfirmDialog from '$lib/components/ConfirmDialog.svelte'
|
||||
import SettingsCard from '$lib/components/SettingsCard.svelte'
|
||||
import Spinner from '$lib/components/Spinner.svelte'
|
||||
import { slide } from 'svelte/transition'
|
||||
import { cubicOut } from 'svelte/easing'
|
||||
import { type SystemInformation, type Analytics, Topics } from '$lib/types/models'
|
||||
import { socket } from '$lib/stores/socket'
|
||||
import { api } from '$lib/api'
|
||||
import { convertSeconds } from '$lib/utilities'
|
||||
import { useFeatureFlags } from '$lib/stores/featureFlags'
|
||||
import {
|
||||
Cancel,
|
||||
Power,
|
||||
@@ -27,42 +27,42 @@
|
||||
Flash,
|
||||
Folder,
|
||||
Temperature,
|
||||
Stopwatch,
|
||||
} from '$lib/components/icons';
|
||||
import StatusItem from '$lib/components/StatusItem.svelte';
|
||||
import ActionButton from './ActionButton.svelte';
|
||||
Stopwatch
|
||||
} from '$lib/components/icons'
|
||||
import StatusItem from '$lib/components/StatusItem.svelte'
|
||||
import ActionButton from './ActionButton.svelte'
|
||||
|
||||
const features = useFeatureFlags();
|
||||
const features = useFeatureFlags()
|
||||
|
||||
let systemInformation: SystemInformation | null = $state(null);
|
||||
let systemInformation: SystemInformation | null = $state(null)
|
||||
|
||||
async function getSystemStatus() {
|
||||
const result = await api.get<SystemInformation>('/api/system/status');
|
||||
const result = await api.get<SystemInformation>('/api/system/status')
|
||||
if (result.isErr()) {
|
||||
console.error('Error:', result.inner);
|
||||
return;
|
||||
console.error('Error:', result.inner)
|
||||
return
|
||||
}
|
||||
systemInformation = result.inner;
|
||||
return systemInformation;
|
||||
systemInformation = result.inner
|
||||
return systemInformation
|
||||
}
|
||||
|
||||
const postFactoryReset = async () => await api.post('/api/system/reset');
|
||||
const postFactoryReset = async () => await api.post('/api/system/reset')
|
||||
|
||||
const postSleep = async () => await api.post('api/sleep');
|
||||
const postSleep = async () => await api.post('api/sleep')
|
||||
|
||||
onMount(() => socket.on('analytics', handleSystemData));
|
||||
onMount(() => socket.on(Topics.analytics, handleSystemData))
|
||||
|
||||
onDestroy(() => socket.off('analytics', handleSystemData));
|
||||
onDestroy(() => socket.off(Topics.analytics, handleSystemData))
|
||||
const handleSystemData = (data: Analytics) => {
|
||||
if (systemInformation) {
|
||||
systemInformation = {
|
||||
...systemInformation,
|
||||
...(data as unknown as SystemInformation),
|
||||
};
|
||||
...(data as unknown as SystemInformation)
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const postRestart = async () => await api.post('/api/system/restart');
|
||||
const postRestart = async () => await api.post('/api/system/restart')
|
||||
|
||||
function confirmRestart() {
|
||||
modals.open(ConfirmDialog, {
|
||||
@@ -70,13 +70,13 @@
|
||||
message: 'Are you sure you want to restart the device?',
|
||||
labels: {
|
||||
cancel: { label: 'Abort', icon: Cancel },
|
||||
confirm: { label: 'Restart', icon: Power },
|
||||
confirm: { label: 'Restart', icon: Power }
|
||||
},
|
||||
onConfirm: () => {
|
||||
modals.close();
|
||||
postRestart();
|
||||
},
|
||||
});
|
||||
modals.close()
|
||||
postRestart()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function confirmReset() {
|
||||
@@ -85,13 +85,13 @@
|
||||
message: 'Are you sure you want to reset the device to its factory defaults?',
|
||||
labels: {
|
||||
cancel: { label: 'Abort', icon: Cancel },
|
||||
confirm: { label: 'Factory Reset', icon: FactoryReset },
|
||||
confirm: { label: 'Factory Reset', icon: FactoryReset }
|
||||
},
|
||||
onConfirm: () => {
|
||||
modals.close();
|
||||
postFactoryReset();
|
||||
},
|
||||
});
|
||||
modals.close()
|
||||
postFactoryReset()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function confirmSleep() {
|
||||
@@ -100,21 +100,21 @@
|
||||
message: 'Are you sure you want to put the device into sleep?',
|
||||
labels: {
|
||||
cancel: { label: 'Abort', icon: Cancel },
|
||||
confirm: { label: 'Sleep', icon: Sleep },
|
||||
confirm: { label: 'Sleep', icon: Sleep }
|
||||
},
|
||||
onConfirm: () => {
|
||||
modals.close();
|
||||
postSleep();
|
||||
},
|
||||
});
|
||||
modals.close()
|
||||
postSleep()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
interface ActionButtonDef {
|
||||
icon: any;
|
||||
label: string;
|
||||
onClick: () => void;
|
||||
type?: string;
|
||||
condition?: () => boolean;
|
||||
icon: any
|
||||
label: string
|
||||
onClick: () => void
|
||||
type?: string
|
||||
condition?: () => boolean
|
||||
}
|
||||
|
||||
const actionButtons: ActionButtonDef[] = [
|
||||
@@ -122,20 +122,20 @@
|
||||
icon: Sleep,
|
||||
label: 'Sleep',
|
||||
onClick: confirmSleep,
|
||||
condition: () => Boolean($features.sleep),
|
||||
condition: () => Boolean($features.sleep)
|
||||
},
|
||||
{
|
||||
icon: Power,
|
||||
label: 'Restart',
|
||||
onClick: confirmRestart,
|
||||
onClick: confirmRestart
|
||||
},
|
||||
{
|
||||
icon: FactoryReset,
|
||||
label: 'Factory Reset',
|
||||
onClick: confirmReset,
|
||||
type: 'secondary',
|
||||
},
|
||||
];
|
||||
type: 'secondary'
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
<SettingsCard collapsible={false}>
|
||||
|
||||
+131
-126
@@ -1,19 +1,24 @@
|
||||
<script lang="ts">
|
||||
import { onMount, onDestroy } from 'svelte';
|
||||
import { modals } from 'svelte-modals';
|
||||
import { slide } from 'svelte/transition';
|
||||
import { cubicOut } from 'svelte/easing';
|
||||
import { notifications } from '$lib/components/toasts/notifications';
|
||||
import DragDropList, { VerticalDropZone, reorder, type DropEvent } from 'svelte-dnd-list';
|
||||
import SettingsCard from '$lib/components/SettingsCard.svelte';
|
||||
import { PasswordInput } from '$lib/components/input';
|
||||
import ConfirmDialog from '$lib/components/ConfirmDialog.svelte';
|
||||
import ScanNetworks from './Scan.svelte';
|
||||
import Spinner from '$lib/components/Spinner.svelte';
|
||||
import InfoDialog from '$lib/components/InfoDialog.svelte';
|
||||
import type { KnownNetworkItem, WifiSettings, WifiStatus } from '$lib/types/models';
|
||||
import { socket } from '$lib/stores';
|
||||
import { api } from '$lib/api';
|
||||
import { onMount, onDestroy } from 'svelte'
|
||||
import { modals } from 'svelte-modals'
|
||||
import { slide } from 'svelte/transition'
|
||||
import { cubicOut } from 'svelte/easing'
|
||||
import { notifications } from '$lib/components/toasts/notifications'
|
||||
import DragDropList, { VerticalDropZone, reorder, type DropEvent } from 'svelte-dnd-list'
|
||||
import SettingsCard from '$lib/components/SettingsCard.svelte'
|
||||
import { PasswordInput } from '$lib/components/input'
|
||||
import ConfirmDialog from '$lib/components/ConfirmDialog.svelte'
|
||||
import ScanNetworks from './Scan.svelte'
|
||||
import Spinner from '$lib/components/Spinner.svelte'
|
||||
import InfoDialog from '$lib/components/InfoDialog.svelte'
|
||||
import {
|
||||
Topics,
|
||||
type KnownNetworkItem,
|
||||
type WifiSettings,
|
||||
type WifiStatus
|
||||
} from '$lib/types/models'
|
||||
import { socket } from '$lib/stores'
|
||||
import { api } from '$lib/api'
|
||||
import {
|
||||
Cancel,
|
||||
Delete,
|
||||
@@ -31,9 +36,9 @@
|
||||
DNS,
|
||||
Add,
|
||||
Scan,
|
||||
Edit,
|
||||
} from '$lib/components/icons';
|
||||
import StatusItem from '$lib/components/StatusItem.svelte';
|
||||
Edit
|
||||
} from '$lib/components/icons'
|
||||
import StatusItem from '$lib/components/StatusItem.svelte'
|
||||
|
||||
let networkEditable: KnownNetworkItem = $state({
|
||||
ssid: '',
|
||||
@@ -43,22 +48,22 @@
|
||||
subnet_mask: undefined,
|
||||
gateway_ip: undefined,
|
||||
dns_ip_1: undefined,
|
||||
dns_ip_2: undefined,
|
||||
});
|
||||
dns_ip_2: undefined
|
||||
})
|
||||
|
||||
let static_ip_config = $state(false);
|
||||
let static_ip_config = $state(false)
|
||||
|
||||
let newNetwork: boolean = $state(true);
|
||||
let showNetworkEditor: boolean = $state(false);
|
||||
let newNetwork: boolean = $state(true)
|
||||
let showNetworkEditor: boolean = $state(false)
|
||||
|
||||
let wifiStatus: WifiStatus | null = $state(null);
|
||||
let wifiSettings: WifiSettings | null = $state(null);
|
||||
let wifiStatus: WifiStatus | null = $state(null)
|
||||
let wifiSettings: WifiSettings | null = $state(null)
|
||||
|
||||
let dndNetworkList: KnownNetworkItem[] = $state([]);
|
||||
let dndNetworkList: KnownNetworkItem[] = $state([])
|
||||
|
||||
let showWifiDetails = $state(false);
|
||||
let showWifiDetails = $state(false)
|
||||
|
||||
let formField: any = $state();
|
||||
let formField: any = $state()
|
||||
|
||||
let formErrors = $state({
|
||||
ssid: false,
|
||||
@@ -66,157 +71,157 @@
|
||||
gateway_ip: false,
|
||||
subnet_mask: false,
|
||||
dns_1: false,
|
||||
dns_2: false,
|
||||
});
|
||||
dns_2: false
|
||||
})
|
||||
|
||||
let formErrorhostname = $state(false);
|
||||
let formErrorhostname = $state(false)
|
||||
|
||||
async function getWifiStatus() {
|
||||
const result = await api.get<WifiStatus>('/api/wifi/sta/status');
|
||||
const result = await api.get<WifiStatus>('/api/wifi/sta/status')
|
||||
if (result.isErr()) {
|
||||
console.error(`Error occurred while fetching: `, result.inner);
|
||||
return;
|
||||
console.error(`Error occurred while fetching: `, result.inner)
|
||||
return
|
||||
}
|
||||
wifiStatus = result.inner;
|
||||
return wifiStatus;
|
||||
wifiStatus = result.inner
|
||||
return wifiStatus
|
||||
}
|
||||
|
||||
async function getWifiSettings() {
|
||||
const result = await api.get<WifiSettings>('/api/wifi/sta/settings');
|
||||
const result = await api.get<WifiSettings>('/api/wifi/sta/settings')
|
||||
if (result.isErr()) {
|
||||
console.error(`Error occurred while fetching: `, result.inner);
|
||||
return;
|
||||
console.error(`Error occurred while fetching: `, result.inner)
|
||||
return
|
||||
}
|
||||
wifiSettings = result.inner;
|
||||
dndNetworkList = wifiSettings.wifi_networks;
|
||||
return wifiSettings;
|
||||
wifiSettings = result.inner
|
||||
dndNetworkList = wifiSettings.wifi_networks
|
||||
return wifiSettings
|
||||
}
|
||||
|
||||
onDestroy(() => socket.off('WiFiSettings'));
|
||||
onDestroy(() => socket.off(Topics.WiFiSettings))
|
||||
|
||||
onMount(() => {
|
||||
socket.on<WifiSettings>('WiFiSettings', data => {
|
||||
wifiSettings = data;
|
||||
dndNetworkList = wifiSettings.wifi_networks;
|
||||
});
|
||||
});
|
||||
socket.on<WifiSettings>(Topics.WiFiSettings, data => {
|
||||
wifiSettings = data
|
||||
dndNetworkList = wifiSettings.wifi_networks
|
||||
})
|
||||
})
|
||||
|
||||
async function postWiFiSettings(data: WifiSettings) {
|
||||
const result = await api.post<WifiSettings>('/api/wifi/sta/settings', data);
|
||||
const result = await api.post<WifiSettings>('/api/wifi/sta/settings', data)
|
||||
if (result.isErr()) {
|
||||
console.error(`Error occurred while fetching: `, result.inner);
|
||||
notifications.error('User not authorized.', 3000);
|
||||
return;
|
||||
console.error(`Error occurred while fetching: `, result.inner)
|
||||
notifications.error('User not authorized.', 3000)
|
||||
return
|
||||
}
|
||||
wifiSettings = result.inner;
|
||||
notifications.success('Wi-Fi settings updated.', 3000);
|
||||
wifiSettings = result.inner
|
||||
notifications.success('Wi-Fi settings updated.', 3000)
|
||||
}
|
||||
|
||||
function validateHostName() {
|
||||
if (!wifiSettings) return false;
|
||||
if (!wifiSettings) return false
|
||||
if (wifiSettings.hostname.length < 3 || wifiSettings.hostname.length > 32) {
|
||||
formErrorhostname = true;
|
||||
formErrorhostname = true
|
||||
} else {
|
||||
formErrorhostname = false;
|
||||
formErrorhostname = false
|
||||
// Update global wifiSettings object
|
||||
wifiSettings.wifi_networks = dndNetworkList;
|
||||
wifiSettings.wifi_networks = dndNetworkList
|
||||
// Post to REST API
|
||||
postWiFiSettings(wifiSettings);
|
||||
console.log(wifiSettings);
|
||||
postWiFiSettings(wifiSettings)
|
||||
console.log(wifiSettings)
|
||||
}
|
||||
}
|
||||
|
||||
function validateWiFiForm(event: SubmitEvent) {
|
||||
event.preventDefault();
|
||||
let valid = true;
|
||||
event.preventDefault()
|
||||
let valid = true
|
||||
|
||||
// Validate SSID
|
||||
if (networkEditable.ssid.length < 3 || networkEditable.ssid.length > 32) {
|
||||
valid = false;
|
||||
formErrors.ssid = true;
|
||||
valid = false
|
||||
formErrors.ssid = true
|
||||
} else {
|
||||
formErrors.ssid = false;
|
||||
formErrors.ssid = false
|
||||
}
|
||||
|
||||
networkEditable.static_ip_config = static_ip_config;
|
||||
networkEditable.static_ip_config = static_ip_config
|
||||
|
||||
if (networkEditable.static_ip_config) {
|
||||
// RegEx for IPv4
|
||||
const regexExp =
|
||||
/\b(?:(?:2(?:[0-4][0-9]|5[0-5])|[0-1]?[0-9]?[0-9])\.){3}(?:(?:2([0-4][0-9]|5[0-5])|[0-1]?[0-9]?[0-9]))\b/;
|
||||
/\b(?:(?:2(?:[0-4][0-9]|5[0-5])|[0-1]?[0-9]?[0-9])\.){3}(?:(?:2([0-4][0-9]|5[0-5])|[0-1]?[0-9]?[0-9]))\b/
|
||||
|
||||
// Validate gateway IP
|
||||
if (!regexExp.test(networkEditable.gateway_ip!)) {
|
||||
valid = false;
|
||||
formErrors.gateway_ip = true;
|
||||
valid = false
|
||||
formErrors.gateway_ip = true
|
||||
} else {
|
||||
formErrors.gateway_ip = false;
|
||||
formErrors.gateway_ip = false
|
||||
}
|
||||
|
||||
// Validate Subnet Mask
|
||||
if (!regexExp.test(networkEditable.subnet_mask!)) {
|
||||
valid = false;
|
||||
formErrors.subnet_mask = true;
|
||||
valid = false
|
||||
formErrors.subnet_mask = true
|
||||
} else {
|
||||
formErrors.subnet_mask = false;
|
||||
formErrors.subnet_mask = false
|
||||
}
|
||||
|
||||
// Validate local IP
|
||||
if (!regexExp.test(networkEditable.local_ip!)) {
|
||||
valid = false;
|
||||
formErrors.local_ip = true;
|
||||
valid = false
|
||||
formErrors.local_ip = true
|
||||
} else {
|
||||
formErrors.local_ip = false;
|
||||
formErrors.local_ip = false
|
||||
}
|
||||
|
||||
// Validate DNS 1
|
||||
if (!regexExp.test(networkEditable.dns_ip_1!)) {
|
||||
valid = false;
|
||||
formErrors.dns_1 = true;
|
||||
valid = false
|
||||
formErrors.dns_1 = true
|
||||
} else {
|
||||
formErrors.dns_1 = false;
|
||||
formErrors.dns_1 = false
|
||||
}
|
||||
|
||||
// Validate DNS 2
|
||||
if (!regexExp.test(networkEditable.dns_ip_2!)) {
|
||||
valid = false;
|
||||
formErrors.dns_2 = true;
|
||||
valid = false
|
||||
formErrors.dns_2 = true
|
||||
} else {
|
||||
formErrors.dns_2 = false;
|
||||
formErrors.dns_2 = false
|
||||
}
|
||||
} else {
|
||||
formErrors.local_ip = false;
|
||||
formErrors.subnet_mask = false;
|
||||
formErrors.gateway_ip = false;
|
||||
formErrors.dns_1 = false;
|
||||
formErrors.dns_2 = false;
|
||||
formErrors.local_ip = false
|
||||
formErrors.subnet_mask = false
|
||||
formErrors.gateway_ip = false
|
||||
formErrors.dns_1 = false
|
||||
formErrors.dns_2 = false
|
||||
}
|
||||
// Submit JSON to REST API
|
||||
if (valid) {
|
||||
if (newNetwork) {
|
||||
dndNetworkList.push(networkEditable);
|
||||
dndNetworkList.push(networkEditable)
|
||||
} else {
|
||||
dndNetworkList.splice(dndNetworkList.indexOf(networkEditable), 1, networkEditable);
|
||||
dndNetworkList.splice(dndNetworkList.indexOf(networkEditable), 1, networkEditable)
|
||||
}
|
||||
addNetwork();
|
||||
dndNetworkList = [...dndNetworkList]; //Trigger reactivity
|
||||
showNetworkEditor = false;
|
||||
addNetwork()
|
||||
dndNetworkList = [...dndNetworkList] //Trigger reactivity
|
||||
showNetworkEditor = false
|
||||
}
|
||||
}
|
||||
|
||||
function scanForNetworks() {
|
||||
modals.open(ScanNetworks, {
|
||||
storeNetwork: (network: string) => {
|
||||
addNetwork();
|
||||
networkEditable.ssid = network;
|
||||
showNetworkEditor = true;
|
||||
modals.close();
|
||||
},
|
||||
});
|
||||
addNetwork()
|
||||
networkEditable.ssid = network
|
||||
showNetworkEditor = true
|
||||
modals.close()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function addNetwork() {
|
||||
newNetwork = true;
|
||||
newNetwork = true
|
||||
networkEditable = {
|
||||
ssid: '',
|
||||
password: '',
|
||||
@@ -225,14 +230,14 @@
|
||||
subnet_mask: undefined,
|
||||
gateway_ip: undefined,
|
||||
dns_ip_1: undefined,
|
||||
dns_ip_2: undefined,
|
||||
};
|
||||
dns_ip_2: undefined
|
||||
}
|
||||
}
|
||||
|
||||
function handleEdit(index: number) {
|
||||
newNetwork = false;
|
||||
showNetworkEditor = true;
|
||||
networkEditable = dndNetworkList[index];
|
||||
newNetwork = false
|
||||
showNetworkEditor = true
|
||||
networkEditable = dndNetworkList[index]
|
||||
}
|
||||
|
||||
function confirmDelete(index: number) {
|
||||
@@ -241,20 +246,20 @@
|
||||
message: 'Are you sure you want to delete this network?',
|
||||
labels: {
|
||||
cancel: { label: 'Cancel', icon: Cancel },
|
||||
confirm: { label: 'Delete', icon: Delete },
|
||||
confirm: { label: 'Delete', icon: Delete }
|
||||
},
|
||||
onConfirm: () => {
|
||||
// Check if network is currently been edited and delete as well
|
||||
if (dndNetworkList[index].ssid === networkEditable.ssid) {
|
||||
addNetwork();
|
||||
addNetwork()
|
||||
}
|
||||
// Remove network from array
|
||||
dndNetworkList.splice(index, 1);
|
||||
dndNetworkList = [...dndNetworkList]; //Trigger reactivity
|
||||
showNetworkEditor = false;
|
||||
modals.close();
|
||||
},
|
||||
});
|
||||
dndNetworkList.splice(index, 1)
|
||||
dndNetworkList = [...dndNetworkList] //Trigger reactivity
|
||||
showNetworkEditor = false
|
||||
modals.close()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function checkNetworkList() {
|
||||
@@ -264,21 +269,21 @@
|
||||
message:
|
||||
'You have reached the maximum number of networks. Please delete one to add another.',
|
||||
dismiss: { label: 'OK', icon: Check },
|
||||
onDismiss: () => modals.close(),
|
||||
});
|
||||
return false;
|
||||
onDismiss: () => modals.close()
|
||||
})
|
||||
return false
|
||||
} else {
|
||||
return true;
|
||||
return true
|
||||
}
|
||||
}
|
||||
|
||||
function onDrop({ detail: { from, to } }: CustomEvent<DropEvent>) {
|
||||
if (!to || from === to) {
|
||||
return;
|
||||
return
|
||||
}
|
||||
|
||||
dndNetworkList = reorder(dndNetworkList, from.index, to.index);
|
||||
console.log(dndNetworkList);
|
||||
dndNetworkList = reorder(dndNetworkList, from.index, to.index)
|
||||
console.log(dndNetworkList)
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -312,7 +317,7 @@
|
||||
<button
|
||||
class="btn btn-circle btn-ghost btn-sm modal-button"
|
||||
onclick={() => {
|
||||
showWifiDetails = !showWifiDetails;
|
||||
showWifiDetails = !showWifiDetails
|
||||
}}>
|
||||
<Down
|
||||
class="text-base-content h-auto w-6 transition-transform duration-300 ease-in-out {(
|
||||
@@ -359,8 +364,8 @@
|
||||
class="btn btn-primary text-primary-content btn-md absolute -top-14 right-16"
|
||||
onclick={() => {
|
||||
if (checkNetworkList()) {
|
||||
addNetwork();
|
||||
showNetworkEditor = true;
|
||||
addNetwork()
|
||||
showNetworkEditor = true
|
||||
}
|
||||
}}>
|
||||
<Add class="h-6 w-6" /></button>
|
||||
@@ -368,8 +373,8 @@
|
||||
class="btn btn-primary text-primary-content btn-md absolute -top-14 right-0"
|
||||
onclick={() => {
|
||||
if (checkNetworkList()) {
|
||||
scanForNetworks();
|
||||
showNetworkEditor = true;
|
||||
scanForNetworks()
|
||||
showNetworkEditor = true
|
||||
}
|
||||
}}>
|
||||
<Scan class="h-6 w-6" /></button>
|
||||
@@ -389,13 +394,13 @@
|
||||
<button
|
||||
class="btn btn-ghost btn-sm"
|
||||
onclick={() => {
|
||||
handleEdit(index);
|
||||
handleEdit(index)
|
||||
}}>
|
||||
<Edit class="h-6 w-6" /></button>
|
||||
<button
|
||||
class="btn btn-ghost btn-sm"
|
||||
onclick={() => {
|
||||
confirmDelete(index);
|
||||
confirmDelete(index)
|
||||
}}>
|
||||
<Delete class="text-error h-6 w-6" />
|
||||
</button>
|
||||
|
||||
Reference in New Issue
Block a user