mirror of
https://codeberg.org/PLG-Development/PLG-MuDiCS
synced 2026-07-05 16:37:09 +00:00
refactor(control): create new constantly updated list of selected_online_display_ids
This commit is contained in:
@@ -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);
|
||||||
|
|||||||
@@ -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);
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user