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)}