refactor(control): create new constantly updated list of selected_online_display_ids

This commit is contained in:
E44
2026-01-19 22:47:36 +01:00
parent 3a30aca1dc
commit 168576db81
6 changed files with 45 additions and 42 deletions
@@ -31,7 +31,7 @@
import RefreshPlay from '../svgs/RefreshPlay.svelte'; import RefreshPlay from '../svgs/RefreshPlay.svelte';
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 { get_display_by_id, run_on_all_selected_displays } from '$lib/ts/stores/displays'; import { get_display_by_id, run_on_all_selected_displays, selected_online_display_ids } 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 { db } from '$lib/ts/database';
@@ -45,8 +45,9 @@
| Observable<{ missing: string[]; colliding: string[] }> | Observable<{ missing: string[]; colliding: string[] }>
| undefined = $state(); | undefined = $state();
$effect(() => { $effect(() => {
const s = $selected_file_ids; const f = file;
missing_colliding_displays_ids = liveQuery(() => get_missing_colliding_display_ids(file, s)); const s = $selected_online_display_ids;
missing_colliding_displays_ids = liveQuery(() => get_missing_colliding_display_ids(f, s));
}); });
let file_size: Observable<number> | undefined = $state(); let file_size: Observable<number> | undefined = $state();
@@ -215,7 +216,7 @@
if (is_folder(file)) { if (is_folder(file)) {
const folder_elements = await get_folder_elements( const folder_elements = await get_folder_elements(
file.path + file.name + '/', file.path + file.name + '/',
$selected_display_ids $selected_online_display_ids
); );
let out: number = 0; let out: number = 0;
for (const el of folder_elements) { for (const el of folder_elements) {
@@ -22,8 +22,13 @@ export const online_displays_sub = liveQuery(() =>
db.displays.where('status').equals('app_online').toArray() db.displays.where('status').equals('app_online').toArray()
).subscribe((value) => { ).subscribe((value) => {
online_displays.set(value); online_displays.set(value);
const current_online_display_ids = value.map((d) => d.id);
selected_online_display_ids.set(get(selected_display_ids).filter((id) => current_online_display_ids.includes(id)));
console.log(get(selected_online_display_ids))
}); });
export const selected_online_display_ids: Writable<string[]> = writable<string[]>([]);
export const local_displays: Writable<DisplayIdGroup[]> = writable<DisplayIdGroup[]>([]); export const local_displays: Writable<DisplayIdGroup[]> = writable<DisplayIdGroup[]>([]);
export async function is_display_name_taken(name: string): Promise<boolean> { export async function is_display_name_taken(name: string): Promise<boolean> {
@@ -269,15 +274,6 @@ export function set_new_display_order(display_id_group_id: string, new_data: Dis
}); });
} }
export function no_active_display_selected(
selected_display_ids: string[],
online_displays: Display[]
) {
const online_and_selected_displays = online_displays.filter((d) =>
selected_display_ids.includes(d.id)
);
return online_and_selected_displays.length === 0;
}
if (dev) { if (dev) {
setTimeout(add_testing_displays, 0); setTimeout(add_testing_displays, 0);
+3 -3
View File
@@ -7,7 +7,7 @@ import {
type Inode, type Inode,
type TreeElement type TreeElement
} from '../types'; } from '../types';
import { get_display_by_id } from './displays'; import { get_display_by_id, selected_online_display_ids } from './displays';
import { is_selected, select, selected_display_ids, selected_file_ids } from './select'; import { is_selected, select, selected_display_ids, selected_file_ids } from './select';
import { create_path, get_file_data, get_file_tree_data } from '../api_handler'; import { create_path, get_file_data, get_file_tree_data } from '../api_handler';
import { deactivate_old_thumbnail_urls, generate_thumbnail } from './thumbnails'; import { deactivate_old_thumbnail_urls, generate_thumbnail } from './thumbnails';
@@ -94,7 +94,7 @@ export async function update_current_folder_on_selected_displays() {
}); });
const current_path = get(current_file_path); const current_path = get(current_file_path);
for (const display of await db.displays.where('id').anyOf(get(selected_display_ids)).toArray()) { for (const display of await db.displays.where('id').anyOf(get(selected_online_display_ids)).toArray()) {
await update_folder_elements_recursively(display, current_path); await update_folder_elements_recursively(display, current_path);
} }
} }
@@ -371,7 +371,7 @@ export async function get_file_by_id(
export async function run_for_selected_files_on_selected_displays( export async function run_for_selected_files_on_selected_displays(
action: (ip: string, file_names: string[]) => Promise<void> action: (ip: string, file_names: string[]) => Promise<void>
): Promise<void> { ): Promise<void> {
for (const display_id of get(selected_display_ids)) { for (const display_id of get(selected_online_display_ids)) {
const file_key_strings_on_display: string[] = ( const file_key_strings_on_display: string[] = (
await db.files_on_display.where('display_id').equals(display_id).toArray() await db.files_on_display.where('display_id').equals(display_id).toArray()
).map((e) => e.file_primary_key); ).map((e) => e.file_primary_key);
+8 -1
View File
@@ -1,4 +1,5 @@
import { writable, type Writable } from 'svelte/store'; import { get, writable, type Writable } from 'svelte/store';
import { online_displays, selected_online_display_ids } from './displays';
export const selected_file_ids: Writable<string[]> = writable<string[]>([]); // JSON.stringify([string, string, number, string]) export const selected_file_ids: Writable<string[]> = writable<string[]>([]); // JSON.stringify([string, string, number, string])
export const selected_display_ids: Writable<string[]> = writable<string[]>([]); export const selected_display_ids: Writable<string[]> = writable<string[]>([]);
@@ -19,6 +20,12 @@ export function select(
} }
return all_ids; return all_ids;
}); });
if (selected_ids === selected_display_ids) {
const current_online_display_ids = get(online_displays).map((d) => d.id);
selected_online_display_ids.set(get(selected_display_ids).filter((id) => current_online_display_ids.includes(id)));
console.log(get(selected_online_display_ids))
}
} }
export function is_selected(id: string, selected_ids: string[]): boolean { export function is_selected(id: string, selected_ids: string[]): boolean {
+12 -13
View File
@@ -25,9 +25,8 @@
} from '$lib/ts/api_handler'; } from '$lib/ts/api_handler';
import { import {
get_display_by_id, get_display_by_id,
no_active_display_selected, run_on_all_selected_displays,
online_displays, selected_online_display_ids
run_on_all_selected_displays
} from '$lib/ts/stores/displays'; } from '$lib/ts/stores/displays';
import { selected_display_ids } from '$lib/ts/stores/select'; import { selected_display_ids } from '$lib/ts/stores/select';
import TipTapInput from './TipTapInput.svelte'; import TipTapInput from './TipTapInput.svelte';
@@ -203,10 +202,10 @@
<div class="flex flex-row gap-2 w-75 justify-normal"> <div class="flex flex-row gap-2 w-75 justify-normal">
<button <button
title="Vorherige Folie (Pfeil nach Links) [gedrückt halten möglich]" title="Vorherige Folie (Pfeil nach Links) [gedrückt halten möglich]"
class="px-9 bg-stone-700 {$selected_display_ids.length === 0 class="px-9 bg-stone-700 {$selected_online_display_ids.length === 0
? 'text-stone-500 cursor-not-allowed' ? 'text-stone-500 cursor-not-allowed'
: 'hover:bg-stone-600 active:bg-stone-500 cursor-pointer'} py-2 rounded-xl flex justify-center items-center transition-colors duration-200" : 'hover:bg-stone-600 active:bg-stone-500 cursor-pointer'} py-2 rounded-xl flex justify-center items-center transition-colors duration-200"
disabled={$selected_display_ids.length === 0} disabled={$selected_online_display_ids.length === 0}
onmousedown={() => { onmousedown={() => {
add_to_keyboard_queue(async () => await send_single_key_press('ArrowLeft', 'press')); add_to_keyboard_queue(async () => await send_single_key_press('ArrowLeft', 'press'));
}} }}
@@ -219,10 +218,10 @@
<button <button
title="Vorherige Folie (Pfeil nach Links) [gedrückt halten möglich]" title="Vorherige Folie (Pfeil nach Links) [gedrückt halten möglich]"
class="px-9 bg-stone-700 {$selected_display_ids.length === 0 class="px-9 bg-stone-700 {$selected_online_display_ids.length === 0
? 'text-stone-500 cursor-not-allowed' ? 'text-stone-500 cursor-not-allowed'
: 'hover:bg-stone-600 active:bg-stone-500 cursor-pointer'} py-2 rounded-xl flex justify-center items-center transition-colors duration-200" : 'hover:bg-stone-600 active:bg-stone-500 cursor-pointer'} py-2 rounded-xl flex justify-center items-center transition-colors duration-200"
disabled={$selected_display_ids.length === 0} disabled={$selected_online_display_ids.length === 0}
onmousedown={() => { onmousedown={() => {
add_to_keyboard_queue(async () => await send_single_key_press('ArrowRight', 'press')); add_to_keyboard_queue(async () => await send_single_key_press('ArrowRight', 'press'));
}} }}
@@ -237,19 +236,19 @@
<Button <Button
className="px-3 flex gap-3 w-75 justify-normal" className="px-3 flex gap-3 w-75 justify-normal"
click_function={show_text_popup} click_function={show_text_popup}
disabled={no_active_display_selected($selected_display_ids, $online_displays)} disabled={$selected_online_display_ids.length === 0}
><TextAlignStart /> Text Anzeigen</Button ><TextAlignStart /> Text Anzeigen</Button
> >
<Button <Button
className="px-3 flex gap-3 w-75 justify-normal" className="px-3 flex gap-3 w-75 justify-normal"
disabled={no_active_display_selected($selected_display_ids, $online_displays)} disabled={$selected_online_display_ids.length === 0}
click_function={show_website_popup}><Globe /> Webseite Anzeigen</Button click_function={show_website_popup}><Globe /> Webseite Anzeigen</Button
> >
<Button <Button
className="px-3 flex gap-3 w-75 justify-normal" className="px-3 flex gap-3 w-75 justify-normal"
disabled={no_active_display_selected($selected_display_ids, $online_displays)} disabled={$selected_online_display_ids.length === 0}
click_function={async () => { click_function={async () => {
await run_on_all_selected_displays((d) => show_blackscreen(d.ip)); await run_on_all_selected_displays((d) => show_blackscreen(d.ip));
}}><Presentation />Blackout</Button }}><Presentation />Blackout</Button
@@ -264,7 +263,7 @@
<Button <Button
className="px-3 flex gap-3 w-75 justify-normal" className="px-3 flex gap-3 w-75 justify-normal"
disabled={no_active_display_selected($selected_display_ids, $online_displays)} disabled={$selected_online_display_ids.length === 0}
click_function={show_send_keys_popup}><Keyboard /> Tastatur-Eingaben Senden</Button click_function={show_send_keys_popup}><Keyboard /> Tastatur-Eingaben Senden</Button
> >
</div> </div>
@@ -273,7 +272,7 @@
<Button <Button
className="px-3 flex gap-3 w-full xl:w-75 justify-normal" className="px-3 flex gap-3 w-full xl:w-75 justify-normal"
disabled={$all_display_states === 'on' || disabled={$all_display_states === 'on' ||
no_active_display_selected($selected_display_ids, $online_displays)} $selected_online_display_ids.length === 0}
click_function={startup_action} click_function={startup_action}
> >
<Power /> Bildschirm Hochfahren <Power /> Bildschirm Hochfahren
@@ -282,7 +281,7 @@
<Button <Button
className="px-3 flex gap-3 w-full xl:w-75 justify-normal" className="px-3 flex gap-3 w-full xl:w-75 justify-normal"
disabled={$all_display_states === 'off' || disabled={$all_display_states === 'off' ||
no_active_display_selected($selected_display_ids, $online_displays)} $selected_online_display_ids.length === 0}
click_function={ask_shutdown} click_function={ask_shutdown}
> >
<PowerOff /> Bildschirm Herunterfahren</Button <PowerOff /> Bildschirm Herunterfahren</Button
+12 -12
View File
@@ -39,7 +39,7 @@
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 { download_file, add_upload, add_sync_recursively } from '$lib/ts/file_transfer_handler'; import { download_file, add_upload, add_sync_recursively } from '$lib/ts/file_transfer_handler';
import { no_active_display_selected, online_displays } from '$lib/ts/stores/displays'; import { selected_online_display_ids } from '$lib/ts/stores/displays';
let current_name: string = $state(''); let current_name: string = $state('');
let current_valid: boolean = $state(false); let current_valid: boolean = $state(false);
@@ -53,7 +53,7 @@
let current_folder_elements: Observable<Inode[]> | undefined = $state(); let current_folder_elements: Observable<Inode[]> | undefined = $state();
$effect(() => { $effect(() => {
const path = $current_file_path, const path = $current_file_path,
display_ids = $selected_display_ids; display_ids = $selected_online_display_ids;
current_folder_elements = liveQuery(() => get_folder_elements(path, display_ids)); current_folder_elements = liveQuery(() => get_folder_elements(path, display_ids));
}); });
let one_file_selected: Observable<boolean> | undefined = $state(); let one_file_selected: Observable<boolean> | undefined = $state();
@@ -91,7 +91,7 @@
async function create_new_folder() { async function create_new_folder() {
popup_close_function(); popup_close_function();
const path_with_folder_name = ($current_file_path += current_name.trim() + '/'); const path_with_folder_name = ($current_file_path += current_name.trim() + '/');
await create_path_on_all_selected_displays(path_with_folder_name, $selected_display_ids); await create_path_on_all_selected_displays(path_with_folder_name, $selected_online_display_ids);
await update_current_folder_on_selected_displays(); await update_current_folder_on_selected_displays();
} }
@@ -127,7 +127,7 @@
current_name = ''; current_name = '';
current_valid = false; current_valid = false;
display_names_where_path_does_not_exist = ( display_names_where_path_does_not_exist = (
await get_displays_where_path_not_exists($current_file_path, $selected_display_ids) await get_displays_where_path_not_exists($current_file_path, $selected_online_display_ids)
).map((display) => display.name); ).map((display) => display.name);
popup_content = { popup_content = {
open: true, open: true,
@@ -277,7 +277,7 @@
multiple multiple
accept={get_accepted_file_type_string()} accept={get_accepted_file_type_string()}
onchange={(e) => onchange={(e) =>
add_upload((e.target as HTMLInputElement).files!, $selected_display_ids, $current_file_path)} add_upload((e.target as HTMLInputElement).files!, $selected_online_display_ids, $current_file_path)}
/> />
<div class="bg-stone-800 h-full rounded-2xl grid grid-rows-[2.5rem_1fr] min-h-0"> <div class="bg-stone-800 h-full rounded-2xl grid grid-rows-[2.5rem_1fr] min-h-0">
@@ -319,7 +319,7 @@
title="Neuen Ordner erstellen (Neuen Ordner mit ausgewählten Objekten erstellen)" title="Neuen Ordner erstellen (Neuen Ordner mit ausgewählten Objekten erstellen)"
className="px-3 flex" className="px-3 flex"
click_function={show_new_folder_popup} click_function={show_new_folder_popup}
disabled={no_active_display_selected($selected_display_ids, $online_displays)}><FolderPlus /></Button disabled={$selected_online_display_ids.length === 0}><FolderPlus /></Button
> >
<div class="border border-stone-700 my-1"></div> <div class="border border-stone-700 my-1"></div>
<Button <Button
@@ -328,13 +328,13 @@
click_function={() => { click_function={() => {
if (file_input) file_input.click(); if (file_input) file_input.click();
}} }}
disabled={no_active_display_selected($selected_display_ids, $online_displays)}><Upload /></Button disabled={$selected_online_display_ids.length === 0}><Upload /></Button
> >
<Button <Button
title="Ausgewählte Datei herunterladen" title="Ausgewählte Datei herunterladen"
className="px-3 flex" className="px-3 flex"
click_function={async () => click_function={async () =>
await download_file($selected_file_ids[0], $selected_display_ids)} await download_file($selected_file_ids[0], $selected_online_display_ids)}
disabled={!$one_file_selected}><Download /></Button disabled={!$one_file_selected}><Download /></Button
> >
<div class="border border-stone-700 my-1"></div> <div class="border border-stone-700 my-1"></div>
@@ -344,10 +344,10 @@
click_function={async () => click_function={async () =>
await sync_selected_files( await sync_selected_files(
$selected_file_ids, $selected_file_ids,
$selected_display_ids, $selected_online_display_ids,
$current_folder_elements ?? [] $current_folder_elements ?? []
)} )}
disabled={no_active_display_selected($selected_display_ids, $online_displays)} disabled={$selected_online_display_ids.length === 0}
><RefreshCcw /> ><RefreshCcw />
<span class="hidden 2xl:flex">Synchronisieren</span> <span class="hidden 2xl:flex">Synchronisieren</span>
</Button> </Button>
@@ -361,7 +361,7 @@
<Button <Button
title="Ausgewählte Datei(en) einfügen" title="Ausgewählte Datei(en) einfügen"
className="px-3 flex" className="px-3 flex"
disabled={no_active_display_selected($selected_display_ids, $online_displays)} disabled={$selected_online_display_ids.length === 0}
> >
<ClipboardPaste /> <ClipboardPaste />
</Button> </Button>
@@ -385,7 +385,7 @@
</div> </div>
<div class="min-h-0 h-full overflow-y-auto overflow-x-hidden bg-stone-750 rounded-xl"> <div class="min-h-0 h-full overflow-y-auto overflow-x-hidden bg-stone-750 rounded-xl">
<div class="flex flex-col gap-2 p-2 min-h-0 max-w-full"> <div class="flex flex-col gap-2 p-2 min-h-0 max-w-full">
{#if no_active_display_selected($selected_display_ids, $online_displays)} {#if $selected_online_display_ids.length === 0}
<span class="text-stone-450 px-10 py-6 leading-relaxed text-center"> <span class="text-stone-450 px-10 py-6 leading-relaxed text-center">
Es sind keine Bildschirme ausgewählt. Es sind keine Bildschirme ausgewählt.
</span> </span>