diff --git a/control/frontend/src/components/FileView.svelte b/control/frontend/src/components/FileView.svelte
index 48bb950..6a354df 100644
--- a/control/frontend/src/components/FileView.svelte
+++ b/control/frontend/src/components/FileView.svelte
@@ -52,6 +52,21 @@
popup_content.open = false;
}
+ async function create_new_folder() {
+ for (const display_id of $selected_display_ids) {
+ const display = get_display_by_id(display_id, $displays);
+ if (!display) continue;
+ const path_data = get_longest_existing_path_and_needed_parts(
+ $current_file_path,
+ display_id,
+ $all_files
+ );
+ await create_folders(display.ip, path_data.existing, [...path_data.needed, current_name]);
+ }
+ await update_current_folder_on_selected_displays();
+ popup_close_function();
+ }
+
const show_new_folder_popup = () => {
current_name = '';
current_valid = false;
@@ -115,25 +130,12 @@
return [false, 'Name bereits verwendet'];
return [true, 'Gültiger Name'];
}}
+ enter_mode="submit"
+ enter_function={create_new_folder}
/>
- Neuen Ordner erstellen
{/snippet}
diff --git a/control/frontend/src/components/TextInput.svelte b/control/frontend/src/components/TextInput.svelte
index 3c3b02e..a4f11a4 100644
--- a/control/frontend/src/components/TextInput.svelte
+++ b/control/frontend/src/components/TextInput.svelte
@@ -12,7 +12,9 @@
title,
placeholder = '',
is_valid_function = null,
- focused_on_start = false
+ focused_on_start = false,
+ enter_mode = 'none',
+ enter_function = null
} = $props<{
current_value: string;
current_valid: boolean;
@@ -22,6 +24,8 @@
placeholder?: string;
is_valid_function?: ((input: string) => [boolean, string]) | null;
focused_on_start?: boolean;
+ enter_mode?: 'none' | 'focus_next' | 'submit';
+ enter_function?: (() => void) | null;
}>();
let focus_bg = get_shifted_color(bg, 100);
@@ -42,6 +46,30 @@
return 'inset-ring-2 inset-ring-red-400';
}
}
+
+ function focus_next_element() {
+ const focusable = Array.from(document.querySelectorAll('input')).filter(
+ (el) => !el.hasAttribute('disabled')
+ );
+
+ const index = focusable.indexOf(input_element);
+ if (index !== -1 && index < focusable.length - 1) {
+ focusable[index + 1].focus();
+ }
+ }
+
+ function handle_keydown(event: KeyboardEvent) {
+ if (event.key !== 'Enter') return;
+
+ if (enter_mode === 'focus_next') {
+ event.preventDefault();
+ focus_next_element();
+ } else if (enter_mode === 'submit' && enter_function) {
+ event.preventDefault();
+ enter_function();
+ }
+ }
+
onMount(() => {
validate_input();
if (focused_on_start && input_element) input_element.focus();
@@ -70,6 +98,7 @@
bind:this={input_element}
bind:value={current_value}
bind:focused
+ onkeydown={handle_keydown}
type="text"
oninput={validate_input}
class="{bg} focus:{focus_bg} outline-none py-2 px-3 rounded-xl transition-all duration-100 {get_highlighting_string()}"
diff --git a/control/frontend/src/routes/+page.svelte b/control/frontend/src/routes/+page.svelte
index 6691466..127a821 100644
--- a/control/frontend/src/routes/+page.svelte
+++ b/control/frontend/src/routes/+page.svelte
@@ -73,7 +73,7 @@
text_inputs_valid = text_inputs_valid_null_values;
popup_content = {
open: true,
- snippet: add_new_display_popup,
+ snippet: display_popup,
title: 'Neuen Bildschirm hinzufügen',
title_icon: Monitor,
title_class: '!text-xl',
@@ -103,7 +103,7 @@
}
popup_content = {
open: true,
- snippet: add_new_display_popup,
+ snippet: display_popup,
snippet_arg: display_id,
title: 'Bildschirm bearbeiten',
title_icon: Monitor,
@@ -138,7 +138,7 @@
{/snippet}
-{#snippet add_new_display_popup(existing_display_id: string | null = null)}
+{#snippet display_popup(existing_display_id: string | null = null)}