PLG_Development/PLG-MuDiCS
3
0
Fork 0
mirror of https://codeberg.org/PLG-Development/PLG-MuDiCS synced 2026-07-05 16:37:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(control): implement ESLint -> remove unnecessary imports, improve general code quality

Browse Source
This commit is contained in:
E44
2026-06-09 22:00:36 +02:00
parent 64b8fcffe2
commit 919bba7c2e
14 changed files with 41 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
control/frontend/src/lib/components/Button.svelte
+4 -3
View File
@@ -1,6 +1,7 @@
<script lang="ts"> <script lang="ts">
import { get_shifted_color } from '$lib/ts/stores/ui_behavior'; import { get_shifted_color } from '$lib/ts/stores/ui_behavior';
import type { MenuOption } from '$lib/ts/types'; import type { MenuOption } from '$lib/ts/types';
import type { Snippet } from 'svelte';
import { fade } from 'svelte/transition'; import { fade } from 'svelte/transition';
let { let {
@@ -26,7 +27,7 @@
menu_options?: MenuOption[]; menu_options?: MenuOption[];
menu_class?: string; menu_class?: string;
div_class?: string; div_class?: string;
children?: any; children: Snippet;
} = $props(); } = $props();
let menu_shown = $state(false); let menu_shown = $state(false);
@@ -158,14 +159,14 @@
e.stopPropagation(); e.stopPropagation();
}} }}
> >
{#each menu_options as option} {#each menu_options as option, i (i)}
<button <button
disabled={option.disabled ?? false} disabled={option.disabled ?? false}
class="bg-white/15 {option.disabled class="bg-white/15 {option.disabled
? 'text-stone-500 cursor-not-allowed' ? 'text-stone-500 cursor-not-allowed'
: 'hover:bg-white/35 active:bg-white/60 cursor-pointer ' + : 'hover:bg-white/35 active:bg-white/60 cursor-pointer ' +
option.class} rounded-lg p-2 transition-colors duration-200 select-none flex flex-row gap-2 items-center" option.class} rounded-lg p-2 transition-colors duration-200 select-none flex flex-row gap-2 items-center"
onclick={async (e) => { onclick={async () => {
if (option.on_select) await option.on_select(); if (option.on_select) await option.on_select();
close_menu(); close_menu();
}} }}
control/frontend/src/lib/components/DisplayGroupObject.svelte
+2 -6
View File
@@ -3,11 +3,8 @@
import { import {
dnd_flip_duration_ms, dnd_flip_duration_ms,
get_selectable_color_classes, get_selectable_color_classes,
is_display_drag, is_display_drag
is_group_drag
} from '$lib/ts/stores/ui_behavior'; } from '$lib/ts/stores/ui_behavior';
import { cubicOut } from 'svelte/easing';
import { flip } from 'svelte/animate';
import DisplayObject from './DisplayObject.svelte'; import DisplayObject from './DisplayObject.svelte';
import { import {
all_displays_of_group_selected, all_displays_of_group_selected,
@@ -18,10 +15,9 @@
} from '$lib/ts/stores/displays'; } from '$lib/ts/stores/displays';
import DNDGrip from '$lib/components/DNDGrip.svelte'; import DNDGrip from '$lib/components/DNDGrip.svelte';
import { fade } from 'svelte/transition'; import { fade } from 'svelte/transition';
import type { Display, DisplayIdGroup, MenuOption } from '$lib/ts/types'; import type { DisplayIdGroup, MenuOption } from '$lib/ts/types';
import { selected_display_ids } from '$lib/ts/stores/select'; import { selected_display_ids } from '$lib/ts/stores/select';
import { liveQuery, type Observable } from 'dexie'; import { liveQuery, type Observable } from 'dexie';
import { onMount } from 'svelte';
import { get_uuid } from '$lib/ts/utils'; import { get_uuid } from '$lib/ts/utils';
let { let {
control/frontend/src/lib/components/DisplayObject.svelte
+1 -1
View File
@@ -8,7 +8,7 @@
import DNDGrip from '$lib/components/DNDGrip.svelte'; import DNDGrip from '$lib/components/DNDGrip.svelte';
import { Menu, Pin, PinOff, VideoOff } from 'lucide-svelte'; import { Menu, Pin, PinOff, VideoOff } from 'lucide-svelte';
import OnlineState from './OnlineState.svelte'; import OnlineState from './OnlineState.svelte';
import type { Display, DisplayIdObject, MenuOption } from '$lib/ts/types'; import type { DisplayIdObject, MenuOption } from '$lib/ts/types';
import { is_selected, select, selected_display_ids } from '$lib/ts/stores/select'; import { is_selected, select, selected_display_ids } from '$lib/ts/stores/select';
import { get_display_by_id, screenshot_loop } from '$lib/ts/stores/displays'; import { get_display_by_id, screenshot_loop } from '$lib/ts/stores/displays';
import { change_file_path, current_file_path } from '$lib/ts/stores/files'; import { change_file_path, current_file_path } from '$lib/ts/stores/files';
control/frontend/src/lib/components/HighlightedText.svelte
+3 -1
View File
@@ -1,11 +1,13 @@
<script lang="ts"> <script lang="ts">
import type { Snippet } from "svelte";
let { let {
children, children,
bg = 'bg-stone-750', bg = 'bg-stone-750',
fg = 'text-stone-200', fg = 'text-stone-200',
className = '' className = ''
}: { }: {
children: any; children: Snippet;
bg?: string; bg?: string;
fg?: string; fg?: string;
className?: string; className?: string;
control/frontend/src/lib/components/InodeElement.svelte
+7 -11
View File
@@ -1,5 +1,5 @@
<script lang="ts"> <script lang="ts">
import { ArrowRight, Ban, FileIcon, Folder, Play, Triangle, TriangleAlert } from 'lucide-svelte'; import { ArrowRight, Ban, FileIcon, Folder, Play, TriangleAlert } from 'lucide-svelte';
import { import {
current_height, current_height,
get_selectable_color_classes, get_selectable_color_classes,
@@ -10,7 +10,6 @@
supported_file_type_icon, supported_file_type_icon,
type Inode, type Inode,
get_file_primary_key, get_file_primary_key,
type FileOnDisplay,
type FileTransferTask, type FileTransferTask,
is_folder is_folder
} from '$lib/ts/types'; } from '$lib/ts/types';
@@ -18,7 +17,6 @@
import { import {
is_selected, is_selected,
select, select,
selected_display_ids,
selected_file_ids selected_file_ids
} from '$lib/ts/stores/select'; } from '$lib/ts/stores/select';
import { import {
@@ -32,13 +30,11 @@
import { get_file_size_display_string, get_file_type } from '$lib/ts/utils'; import { get_file_size_display_string, get_file_type } from '$lib/ts/utils';
import { open_file } from '$lib/ts/api_handler'; import { open_file } from '$lib/ts/api_handler';
import { import {
get_display_by_id,
run_on_all_selected_displays, run_on_all_selected_displays,
selected_online_display_ids selected_online_display_ids
} from '$lib/ts/stores/displays'; } from '$lib/ts/stores/displays';
import { get_thumbnail_url } from '$lib/ts/stores/thumbnails'; import { get_thumbnail_url } from '$lib/ts/stores/thumbnails';
import { liveQuery, type Observable } from 'dexie'; import { liveQuery, type Observable } from 'dexie';
import { db } from '$lib/ts/database';
import { add_sync_recursively, file_transfer_tasks } from '$lib/ts/file_transfer_handler'; import { add_sync_recursively, file_transfer_tasks } from '$lib/ts/file_transfer_handler';
let { file, not_interactable = false }: { file: Inode; not_interactable?: boolean } = $props(); let { file, not_interactable = false }: { file: Inode; not_interactable?: boolean } = $props();
@@ -65,7 +61,7 @@
}); });
let file_transfer_task: FileTransferTask | null = $derived( let file_transfer_task: FileTransferTask | null = $derived(
$file_transfer_tasks.hasOwnProperty(file_primary_key) Object.hasOwn($file_transfer_tasks, file_primary_key)
? $file_transfer_tasks[file_primary_key] ? $file_transfer_tasks[file_primary_key]
: null : null
); );
@@ -145,7 +141,7 @@
function get_grayed_out_text_color_strings(is_selected: boolean): string { function get_grayed_out_text_color_strings(is_selected: boolean): string {
if (not_interactable) return 'text-stone-400'; if (not_interactable) return 'text-stone-400';
if (!!file_transfer_task) return 'text-white/20'; if (file_transfer_task) return 'text-white/20';
const color = is_selected ? 'text-stone-600' : 'text-stone-400'; const color = is_selected ? 'text-stone-600' : 'text-stone-400';
const factor = is_selected ? -1 : 1; const factor = is_selected ? -1 : 1;
return `${color} group-hover:${get_shifted_color(color, factor * 100)} group-active:${get_shifted_color(color, factor * 150)}`; return `${color} group-hover:${get_shifted_color(color, factor * 100)} group-active:${get_shifted_color(color, factor * 150)}`;
@@ -153,14 +149,14 @@
function get_grayed_out_border_color_strings(is_selected: boolean): string { function get_grayed_out_border_color_strings(is_selected: boolean): string {
if (not_interactable) return 'border-stone-550'; if (not_interactable) return 'border-stone-550';
if (!!file_transfer_task) return 'border-white/10'; if (file_transfer_task) return 'border-white/10';
const color = is_selected ? 'border-stone-450' : 'border-stone-550'; const color = is_selected ? 'border-stone-450' : 'border-stone-550';
const factor = is_selected ? 1 : 1; const factor = is_selected ? 1 : 1;
return `${color} group-hover:${get_shifted_color(color, factor * 100)} group-active:${get_shifted_color(color, factor * 150)}`; return `${color} group-hover:${get_shifted_color(color, factor * 100)} group-active:${get_shifted_color(color, factor * 150)}`;
} }
function onclick(e: Event) { function onclick(e: Event) {
if (not_interactable || !!file_transfer_task) return; if (not_interactable || file_transfer_task) return;
select(selected_file_ids, file_primary_key, 'toggle'); select(selected_file_ids, file_primary_key, 'toggle');
e.stopPropagation(); e.stopPropagation();
} }
@@ -184,7 +180,7 @@
if (loading_finished) { if (loading_finished) {
out += 'bg-stone-500 text-white/30'; out += 'bg-stone-500 text-white/30';
} else if (!!file_transfer_task) { } else if (file_transfer_task) {
out += 'bg-stone-700 text-white/30'; out += 'bg-stone-700 text-white/30';
} else { } else {
out += get_selectable_color_classes( out += get_selectable_color_classes(
@@ -200,7 +196,7 @@
if (not_interactable) { if (not_interactable) {
out += ' rounded-lg'; out += ' rounded-lg';
} else if (!!file_transfer_task) { } else if (file_transfer_task) {
out += ' rounded-r-lg'; out += ' rounded-r-lg';
} else { } else {
out += ' rounded-r-lg cursor-pointer'; out += ' rounded-r-lg cursor-pointer';
control/frontend/src/lib/components/NumberSettingInput.svelte
+1 -1
View File
@@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import type { NumberSetting } from '$lib/ts/types'; import type { NumberSetting } from '$lib/ts/types';
import { ChevronDown, ChevronUp, Minus, Plus } from 'lucide-svelte'; import { ChevronDown, ChevronUp } from 'lucide-svelte';
import Button from './Button.svelte'; import Button from './Button.svelte';
let { let {
control/frontend/src/lib/ts/types.ts
+2 -2
View File
@@ -127,8 +127,8 @@ export type MenuOption = {
export type PopupContent = { export type PopupContent = {
open: boolean; open: boolean;
snippet: Snippet<[any]> | Snippet<[]> | Snippet | null | any; snippet: Snippet<[string]> | Snippet<[]> | null;
snippet_arg?: any; snippet_arg?: string;
title?: string; title?: string;
title_class?: string; title_class?: string;
title_icon?: typeof X | null; title_icon?: typeof X | null;
control/frontend/src/routes/+layout.svelte
+1
View File
@@ -15,6 +15,7 @@
</svelte:head> </svelte:head>
{#if !dev} {#if !dev}
<!-- eslint-disable-next-line svelte/no-at-html-tags -->
{@html versionSplashScreen} {@html versionSplashScreen}
{/if} {/if}
control/frontend/src/routes/+page.svelte
+5 -6
View File
@@ -7,10 +7,8 @@
Trash2, Trash2,
Menu, Menu,
ChevronDown, ChevronDown,
icons,
SquareCheckBig, SquareCheckBig,
Square, Square,
X,
Info Info
} from 'lucide-svelte'; } from 'lucide-svelte';
import Button from '$lib/components/Button.svelte'; import Button from '$lib/components/Button.svelte';
@@ -73,13 +71,13 @@
const mac = text_inputs_valid.mac.value === '' ? null : text_inputs_valid.mac.value; const mac = text_inputs_valid.mac.value === '' ? null : text_inputs_valid.mac.value;
const name = text_inputs_valid.name.value; const name = text_inputs_valid.name.value;
let display: Display | null = null; let display: Display | null = null;
if (!!existing_display_id) { if (existing_display_id) {
display = await edit_display_data(existing_display_id, ip, mac, name); display = await edit_display_data(existing_display_id, ip, mac, name);
} else { } else {
const status = await ping_ip(text_inputs_valid.ip.value); const status = await ping_ip(text_inputs_valid.ip.value);
display = await add_display(ip, mac, name, status); display = await add_display(ip, mac, name, status);
} }
if (!!display) { if (display) {
await update_display_status(display); await update_display_status(display);
} }
} }
@@ -179,6 +177,7 @@
}; };
</script> </script>
<!-- eslint-disable-next-line @typescript-eslint/no-unused-vars -->
{#snippet about_popup(_: string)} {#snippet about_popup(_: string)}
<div class="px-2"> <div class="px-2">
<p> <p>
@@ -253,7 +252,7 @@
title="Anzeigename" title="Anzeigename"
placeholder="z.B. Beamer vorne links" placeholder="z.B. Beamer vorne links"
is_valid_function={async (input: string) => { is_valid_function={async (input: string) => {
if (!!existing_display_id) { if (existing_display_id) {
if (input === (await get_display_by_id(existing_display_id))?.name) if (input === (await get_display_by_id(existing_display_id))?.name)
return [true, 'Gültiger Name']; return [true, 'Gültiger Name'];
} }
@@ -317,7 +316,7 @@
{/if} {/if}
<Button <Button
disabled={!all_text_inputs_valid()} disabled={!all_text_inputs_valid()}
className="{!!existing_display_id ? 'px-4' : 'pl-3 pr-4 gap-2'} font-bold" className="{existing_display_id ? 'px-4' : 'pl-3 pr-4 gap-2'} font-bold"
bg="bg-stone-650" bg="bg-stone-650"
click_function={async () => { click_function={async () => {
await finalize_add_edit_display(existing_display_id); await finalize_add_edit_display(existing_display_id);
control/frontend/src/routes/ControlView.svelte
+1 -2
View File
@@ -21,7 +21,6 @@
show_blackscreen, show_blackscreen,
shutdown, shutdown,
startup, startup,
show_html,
open_website open_website
} from '$lib/ts/api_handler'; } from '$lib/ts/api_handler';
import { import {
@@ -135,7 +134,7 @@
function validate_website_url(url: string): [boolean, string] { function validate_website_url(url: string): [boolean, string] {
if (url === '') return [true, '']; if (url === '') return [true, ''];
const regex = /^https?:\/\/[\w\-]+(\.[\w\-]+)+([\w\-\._~:/?#\[\]@!$&'\(\)\*\+,;=.])*/; const regex = /^https?:\/\/[\w-]+(\.[\w-]+)+([\w\-._~:/?#[\]@!$&'()*+,;=.])*/;
if (regex.test(url)) { if (regex.test(url)) {
return [true, '']; return [true, ''];
} }
control/frontend/src/routes/DisplayView.svelte
+5 -8
View File
@@ -1,5 +1,5 @@
<script lang="ts"> <script lang="ts">
import { fade, scale } from 'svelte/transition'; import { fade } from 'svelte/transition';
import { import {
all_displays_of_group_selected, all_displays_of_group_selected,
get_display_by_id, get_display_by_id,
@@ -25,12 +25,9 @@
import { selected_display_ids } from '$lib/ts/stores/select'; import { selected_display_ids } from '$lib/ts/stores/select';
import { dragHandleZone } from 'svelte-dnd-action'; import { dragHandleZone } from 'svelte-dnd-action';
import DisplayGroupObject from '../lib/components/DisplayGroupObject.svelte'; import DisplayGroupObject from '../lib/components/DisplayGroupObject.svelte';
import { Pane, Splitpanes } from 'svelte-splitpanes'; import { Pane, Splitpanes, type IPaneSizingEvent } from 'svelte-splitpanes';
import HighlightedText from '$lib/components/HighlightedText.svelte'; import HighlightedText from '$lib/components/HighlightedText.svelte';
import { liveQuery, type Observable } from 'dexie'; import { liveQuery, type Observable } from 'dexie';
import { onMount } from 'svelte';
import { flip } from 'svelte/animate';
import { cubicOut } from 'svelte/easing';
let { let {
handle_display_deletion, handle_display_deletion,
@@ -110,7 +107,7 @@
return true; return true;
} }
function handle_splitpane_resize(e: any) { function handle_splitpane_resize(e: CustomEvent<IPaneSizingEvent[]>) {
if (e.detail[0].size === 0) { if (e.detail[0].size === 0) {
$pinned_display_id = null; $pinned_display_id = null;
pinned_pane_size = last_pinned_pane_size; pinned_pane_size = last_pinned_pane_size;
@@ -225,7 +222,7 @@
title="Bildschirme größer darstellen" title="Bildschirme größer darstellen"
className="aspect-square p-1.5! pr-1! rounded-r-none" className="aspect-square p-1.5! pr-1! rounded-r-none"
bg="bg-stone-600" bg="bg-stone-600"
disabled={!Boolean(next_height_step_size('display', $current_height, 1))} disabled={!next_height_step_size('display', $current_height, 1)}
click_function={() => { click_function={() => {
change_height('display', 1); change_height('display', 1);
}} }}
@@ -236,7 +233,7 @@
title="Bildschirme kleiner darstellen" title="Bildschirme kleiner darstellen"
className="aspect-square p-1.5! pl-1! rounded-l-none" className="aspect-square p-1.5! pl-1! rounded-l-none"
bg="bg-stone-600" bg="bg-stone-600"
disabled={!Boolean(next_height_step_size('display', $current_height, -1))} disabled={!next_height_step_size('display', $current_height, -1)}
click_function={() => { click_function={() => {
change_height('display', -1); change_height('display', -1);
}} }}
control/frontend/src/routes/FileView.svelte
+5 -5
View File
@@ -78,7 +78,7 @@
const results = await Promise.all(selected_file_ids.map((id) => get_file_by_id(id))); const results = await Promise.all(selected_file_ids.map((id) => get_file_by_id(id)));
return results.filter((element) => element !== null); return results.filter((element) => element !== null);
} catch (e: unknown) { } catch (e: unknown) {
console.error('Error on generating selected_files'); console.error('Error on generating selected_files', e);
return []; return [];
} }
} }
@@ -172,7 +172,7 @@
> existiert nicht auf {display_names_where_path_does_not_exist.length === 1 > existiert nicht auf {display_names_where_path_does_not_exist.length === 1
? 'dem Bildschirm' ? 'dem Bildschirm'
: 'den Bildschirmen'} : 'den Bildschirmen'}
{#each display_names_where_path_does_not_exist as display_name, i} {#each display_names_where_path_does_not_exist as display_name, i (i)}
{#if i !== 0} {#if i !== 0}
, ,
{/if} {/if}
@@ -247,7 +247,7 @@
>{`${$selected_file_ids.length === 1 ? 'Folgendes Objekt' : `Folgende ${$selected_file_ids.length} Objekte`} löschen? (Wiederherstellung nicht möglich)`}</span >{`${$selected_file_ids.length === 1 ? 'Folgendes Objekt' : `Folgende ${$selected_file_ids.length} Objekte`} löschen? (Wiederherstellung nicht möglich)`}</span
> >
<div class="flex flex-col gap-2 overflow-y-auto h-full min-h-0 grow-0"> <div class="flex flex-col gap-2 overflow-y-auto h-full min-h-0 grow-0">
{#each $selected_files || [] as file} {#each $selected_files || [] as file, i (i)}
<InodeElement {file} not_interactable /> <InodeElement {file} not_interactable />
{/each} {/each}
</div> </div>
@@ -294,7 +294,7 @@
title="Dateien größer darstellen" title="Dateien größer darstellen"
className="aspect-square p-1.5! pr-1! rounded-r-none" className="aspect-square p-1.5! pr-1! rounded-r-none"
bg="bg-stone-600" bg="bg-stone-600"
disabled={!Boolean(next_height_step_size('file', $current_height, 1))} disabled={!next_height_step_size('file', $current_height, 1)}
click_function={() => { click_function={() => {
change_height('file', 1); change_height('file', 1);
}} }}
@@ -305,7 +305,7 @@
title="Dateien kleiner darstellen" title="Dateien kleiner darstellen"
className="aspect-square p-1.5! pl-1! rounded-l-none" className="aspect-square p-1.5! pl-1! rounded-l-none"
bg="bg-stone-600" bg="bg-stone-600"
disabled={!Boolean(next_height_step_size('file', $current_height, -1))} disabled={!next_height_step_size('file', $current_height, -1)}
click_function={() => { click_function={() => {
change_height('file', -1); change_height('file', -1);
}} }}
control/frontend/src/routes/KeyInput.svelte
+1 -1
View File
@@ -4,7 +4,7 @@
import { fade } from 'svelte/transition'; import { fade } from 'svelte/transition';
import { run_on_all_selected_displays } from '$lib/ts/stores/displays'; import { run_on_all_selected_displays } from '$lib/ts/stores/displays';
import { send_keyboard_input } from '$lib/ts/api_handler'; import { send_keyboard_input } from '$lib/ts/api_handler';
import { ArrowDownToLine, ArrowUpFromLine, Grid2x2, Grid2X2, Option } from 'lucide-svelte'; import { ArrowDownToLine, ArrowUpFromLine, Grid2x2, Option } from 'lucide-svelte';
import Button from '$lib/components/Button.svelte'; import Button from '$lib/components/Button.svelte';
import { onDestroy } from 'svelte'; import { onDestroy } from 'svelte';
import { add_to_keyboard_queue } from '$lib/ts/utils'; import { add_to_keyboard_queue } from '$lib/ts/utils';
control/frontend/src/routes/TipTapInput.svelte
+3 -4
View File
@@ -9,7 +9,6 @@
Highlighter, Highlighter,
Italic, Italic,
PaintBucket, PaintBucket,
QrCode,
Strikethrough Strikethrough
} from 'lucide-svelte'; } from 'lucide-svelte';
import Button from '$lib/components/Button.svelte'; import Button from '$lib/components/Button.svelte';
@@ -149,7 +148,7 @@
editor_state.editor?.destroy(); editor_state.editor?.destroy();
}); });
</script> </script>
{#each Object.values(color_states) as color_state, i (i)} {#each Object.values(color_states) as color_state, i (i)}
<input type="color" bind:this={color_state.el} bind:value={color_state.value} class="hidden" /> <input type="color" bind:this={color_state.el} bind:value={color_state.value} class="hidden" />
{/each} {/each}
@@ -163,9 +162,9 @@
</div> </div>
<div class="flex flex-col gap-2 justify-between"> <div class="flex flex-col gap-2 justify-between">
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-2">
{#each text_edit_options as edit_row, i (i)} {#each text_edit_options as edit_row, i (i)}
<div class="flex flex-row gap-1"> <div class="flex flex-row gap-1">
{#each edit_row as option, j (j)} {#each edit_row as option, j (j)}
<div class="flex flex-row"> <div class="flex flex-row">
<button <button