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

fix(control): uploading file(s) to multiple displays

Browse Source 
closes #41
This commit is contained in:
E44
2026-06-10 21:57:36 +02:00
parent b6c637649f
commit b6150fdab0
2 changed files with 97 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
control/frontend/src/lib/components/InodeElement.svelte
+19 -10
View File
@@ -60,7 +60,7 @@
file_size = liveQuery(() => get_size_recursively(f));
});
let file_transfer_task: FileTransferTask | null = $derived(
let file_transfer_task_list: FileTransferTask[] | null = $derived(
Object.hasOwn($file_transfer_tasks, file_primary_key)
? $file_transfer_tasks[file_primary_key]
: null
@@ -69,7 +69,7 @@
let loading_finished = $state(false);
let previous_loading_state = $state(false);
$effect(() => {
const ftt = file_transfer_task;
const ftt = file_transfer_task_list;
if (previous_loading_state && !ftt) {
loading_finished = true;
setTimeout(() => (loading_finished = false), 200);
@@ -141,7 +141,7 @@
function get_grayed_out_text_color_strings(is_selected: boolean): string {
if (not_interactable) return 'text-stone-400';
if (file_transfer_task) return 'text-white/20';
if (file_transfer_task_list) return 'text-white/20';
const color = is_selected ? 'text-stone-600' : 'text-stone-400';
const factor = is_selected ? -1 : 1;
return `${color} group-hover:${get_shifted_color(color, factor * 100)} group-active:${get_shifted_color(color, factor * 150)}`;
@@ -149,14 +149,14 @@
function get_grayed_out_border_color_strings(is_selected: boolean): string {
if (not_interactable) return 'border-stone-550';
if (file_transfer_task) return 'border-white/10';
if (file_transfer_task_list) return 'border-white/10';
const color = is_selected ? 'border-stone-450' : 'border-stone-550';
const factor = is_selected ? 1 : 1;
return `${color} group-hover:${get_shifted_color(color, factor * 100)} group-active:${get_shifted_color(color, factor * 150)}`;
}
function onclick(e: Event) {
if (not_interactable || file_transfer_task) return;
if (not_interactable || file_transfer_task_list) return;
select(selected_file_ids, file_primary_key, 'toggle');
e.stopPropagation();
}
@@ -180,7 +180,7 @@
if (loading_finished) {
out += 'bg-stone-500 text-white/30';
} else if (file_transfer_task) {
} else if (file_transfer_task_list) {
out += 'bg-stone-700 text-white/30';
} else {
out += get_selectable_color_classes(
@@ -196,7 +196,7 @@
if (not_interactable) {
out += ' rounded-lg';
} else if (file_transfer_task) {
} else if (file_transfer_task_list) {
out += ' rounded-r-lg';
} else {
out += ' rounded-r-lg cursor-pointer';
@@ -205,7 +205,16 @@
return out;
}
function get_total_percentage(ftt: FileTransferTask): number {
function get_total_percentage(ftt_list: FileTransferTask[]): number {
let percentage_sum = 0;
for (const ftt of ftt_list) {
percentage_sum += get_percentage(ftt);
}
return Math.round(percentage_sum / ftt_list.length);
}
function get_percentage(ftt: FileTransferTask): number {
let total_percentage: number;
if (ftt.data.type === 'upload') {
total_percentage = ftt.loading_data.percentage;
@@ -312,10 +321,10 @@
{onclick}
class="{get_main_classes()} relative transition-colors duration-200 gap-4 flex flex-row justify-between group w-full min-w-0"
>
{#if !!file_transfer_task}
{#if !!file_transfer_task_list}
<div
class="absolute pointer-events-none inset-y-0 left-0 transition-[width] duration-400 bg-stone-600 rounded-r-lg"
style={`width: ${get_total_percentage(file_transfer_task)}%;`}
style={`width: ${get_total_percentage(file_transfer_task_list)}%;`}
></div>
{/if}
<div class="flex flex-row gap-2 min-w-0 w-full z-10">