adds dropzone to add zips
This commit is contained in:
Generated
+22
-2
@@ -1,12 +1,19 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="ChangeListManager">
|
||||
<list default="true" id="89f9fc3a-63ad-41cb-8d25-f07df352eb98" name="Changes" comment="" />
|
||||
<list default="true" id="89f9fc3a-63ad-41cb-8d25-f07df352eb98" name="Changes" comment="">
|
||||
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/src/routes/+page.svelte" beforeDir="false" afterPath="$PROJECT_DIR$/src/routes/+page.svelte" afterDir="false" />
|
||||
</list>
|
||||
<option name="SHOW_DIALOG" value="false" />
|
||||
<option name="HIGHLIGHT_CONFLICTS" value="true" />
|
||||
<option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
|
||||
<option name="LAST_RESOLUTION" value="IGNORE" />
|
||||
</component>
|
||||
<component name="Git.Settings">
|
||||
<option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
|
||||
</component>
|
||||
<component name="MetaFilesCheckinStateConfiguration" checkMetaFiles="true" />
|
||||
<component name="ProjectColorInfo">{
|
||||
"associatedIndex": 0,
|
||||
"fromUser": false
|
||||
@@ -26,6 +33,7 @@
|
||||
"RunOnceActivity.typescript.service.memoryLimit.init": "true",
|
||||
"cidr.known.project.marker": "true",
|
||||
"codeWithMe.voiceChat.enabledByDefault": "false",
|
||||
"git-widget-placeholder": "main",
|
||||
"last_opened_file_path": "/home/rehlert/repos/juri-merger",
|
||||
"nodejs_package_manager_path": "pnpm",
|
||||
"settings.editor.selected.configurable": "preferences.pluginManager",
|
||||
@@ -41,16 +49,28 @@
|
||||
<option name="presentableId" value="Default" />
|
||||
<updated>1781169139290</updated>
|
||||
<workItem from="1781169141138" duration="309000" />
|
||||
<workItem from="1781251694220" duration="3847000" />
|
||||
<workItem from="1781251694220" duration="5262000" />
|
||||
</task>
|
||||
<task id="LOCAL-00001" summary="adapts styling of rvg.legal">
|
||||
<option name="closed" value="true" />
|
||||
<created>1781256112217</created>
|
||||
<option name="number" value="00001" />
|
||||
<option name="presentableId" value="LOCAL-00001" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1781256112218</updated>
|
||||
</task>
|
||||
<option name="localTasksCounter" value="2" />
|
||||
<servers />
|
||||
</component>
|
||||
<component name="TypeScriptGeneratedFilesManager">
|
||||
<option name="version" value="3" />
|
||||
</component>
|
||||
<component name="UnityCheckinConfiguration" checkUnsavedScenes="true" />
|
||||
<component name="UnityProjectConfiguration" hasMinimizedUI="false" />
|
||||
<component name="VcsManagerConfiguration">
|
||||
<option name="CLEAR_INITIAL_COMMIT_MESSAGE" value="true" />
|
||||
<MESSAGE value="adapts styling of rvg.legal" />
|
||||
<option name="LAST_COMMIT_MESSAGE" value="adapts styling of rvg.legal" />
|
||||
</component>
|
||||
<component name="XDebuggerManager">
|
||||
<breakpoint-manager>
|
||||
|
||||
@@ -0,0 +1,77 @@
|
||||
<script lang="ts">
|
||||
type Props = {
|
||||
onFilesSelected: (files: File[]) => void;
|
||||
class?: string;
|
||||
};
|
||||
|
||||
let { onFilesSelected, class: className = "" }: Props = $props();
|
||||
|
||||
let fileInput: HTMLInputElement | null = null;
|
||||
let isDragging = $state(false);
|
||||
|
||||
const processFiles = (files: FileList | null | undefined) => {
|
||||
if (!files) return;
|
||||
|
||||
const filtered = Array.from(files).filter((file) => {
|
||||
const name = file.name.toLowerCase();
|
||||
return (
|
||||
name.endsWith('.zip') ||
|
||||
file.type === 'application/zip' ||
|
||||
file.type === 'application/x-zip-compressed'
|
||||
);
|
||||
});
|
||||
|
||||
if (filtered.length > 0) {
|
||||
onFilesSelected(filtered);
|
||||
}
|
||||
};
|
||||
|
||||
const openFileDialog = () => fileInput?.click();
|
||||
|
||||
const handleFileSelection = (event: Event) => {
|
||||
const input = event.currentTarget as HTMLInputElement;
|
||||
processFiles(input.files);
|
||||
input.value = ''; // Reset so same file can be uploaded twice
|
||||
};
|
||||
|
||||
const handleDragOver = (event: DragEvent) => {
|
||||
event.preventDefault();
|
||||
isDragging = true;
|
||||
};
|
||||
|
||||
const handleDragLeave = (event: DragEvent) => {
|
||||
event.preventDefault();
|
||||
isDragging = false;
|
||||
};
|
||||
|
||||
const handleDrop = (event: DragEvent) => {
|
||||
event.preventDefault();
|
||||
isDragging = false;
|
||||
processFiles(event.dataTransfer?.files);
|
||||
};
|
||||
</script>
|
||||
|
||||
<input
|
||||
bind:this={fileInput}
|
||||
class="hidden"
|
||||
type="file"
|
||||
accept=".zip,application/zip,application/x-zip-compressed"
|
||||
multiple
|
||||
onchange={handleFileSelection}
|
||||
/>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="flex min-h-[calc(-180px+100vh)] w-full grow cursor-pointer flex-col justify-center border-0 bg-transparent p-0 text-center text-inherit appearance-none focus:outline-none transition-colors rounded-2xl {isDragging ? 'bg-gray-100 border-2 border-dashed border-primary-500' : ''} {className}"
|
||||
aria-label="ZIP-Dateien hinzufügen"
|
||||
onclick={openFileDialog}
|
||||
ondragover={handleDragOver}
|
||||
ondragleave={handleDragLeave}
|
||||
ondrop={handleDrop}
|
||||
>
|
||||
<div class="flex flex-row items-baseline justify-center gap-2">
|
||||
<!-- Changed h1 to span for better semantic HTML inside a button -->
|
||||
<span class="text-[20px] font-bold text-primary-900">Dateien hinzufügen</span>
|
||||
<span class="text-[20px] font-extrabold text-primary-900">+</span>
|
||||
</div>
|
||||
</button>
|
||||
+25
-12
@@ -1,22 +1,35 @@
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import Card from "$lib/components/Card.svelte";
|
||||
import ZipDropzone from "$lib/components/ZipDropzone.svelte";
|
||||
|
||||
let selectedZipFiles: File[] = $state([]);
|
||||
|
||||
const handleFilesSelected = (files: File[]) => {
|
||||
selectedZipFiles = [...selectedZipFiles, ...files];
|
||||
};
|
||||
</script>
|
||||
|
||||
{#snippet content()}
|
||||
<div class="text-center justify-center flex grow flex-col min-h-[calc(-180px+100vh)]">
|
||||
<div class="flex flex-row justify-center items-baseline gap-2">
|
||||
<h1 class="h1 text-[20px] font-bold text-primary-900">Dateien hinzufügen</h1>
|
||||
<span class="font-extrabold text-primary-900 text-[20px]">
|
||||
+
|
||||
</span>
|
||||
{#if selectedZipFiles.length === 0}
|
||||
<ZipDropzone onFilesSelected={handleFilesSelected} />
|
||||
{:else}
|
||||
<div class="flex min-h-[calc(-180px+100vh)] w-full grow flex-col justify-center gap-4 px-4 py-6">
|
||||
<div class="flex flex-row items-baseline justify-center gap-2">
|
||||
<h2 class="h1 text-[20px] font-bold text-primary-900">ZIP-Dateien geladen</h2>
|
||||
</div>
|
||||
|
||||
<ul class="mx-auto w-full max-w-3xl space-y-2">
|
||||
{#each selectedZipFiles as file}
|
||||
<li class="rounded-container bg-primary-50 px-4 py-3 text-[14px] font-medium text-primary-900">
|
||||
{file.name}
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{/snippet}
|
||||
|
||||
<section class="px-4">
|
||||
<h1 class="h1 text-[20px] font-bold py-6 text-primary-900">beA-Edit</h1>
|
||||
<Card {content} class="h-full cursor-pointer"/>
|
||||
<!-- <Button variant="primary">-->
|
||||
<!-- Neu berechnen-->
|
||||
<!-- </Button>-->
|
||||
<Card {content} class="h-full"/>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user