innohub/tatort
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'temp_f03-Frontend' into b024_edit-der-Namen

Browse Source
This commit is contained in:
mina
2025-06-24 14:28:22 +02:00
parent 5be47343c4 6a1dcf47b9
commit 800b2d6cc6
9 changed files with 345 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/lib/components/Alert.svelte
View File

@@ -1,3 +1,21 @@
<script lang="ts">
export let type = 'info';
let classNames = '';
export { classNames as class };
</script>
<div class="alert {type} {classNames}">
<slot />
</div>
<!-- <script>
let { children, type = `info`, class: classNames = `` } = $props();
</script>
<div class="alert {type} {classNames}">
{@render children()}
</div> -->
<style>
/* Common */
.alert {
@@ -45,13 +63,3 @@
@apply bg-red-50;
}
</style>
<script lang="ts">
export let type = 'info';
let classNames = '';
export { classNames as class };
</script>
<div class="alert {type} {classNames}">
<slot />
</div>

72
src/lib/components/Button.svelte
View File

@@ -1,3 +1,47 @@
<script lang="ts">
export let href = null;
export let type = 'button';
export let size = 'md';
export let variant = 'primary';
export let fullWidth = false;
export let align = 'center';
export let disabled = false;
let classNames = '';
export { classNames as class };
</script>
{#if href}
<a on:click {href} class:w-full={fullWidth} class="button {variant} {size} {classNames} {align}">
{@render children()}
</a>
{:else}
<button
on:click
{type}
{disabled}
class:w-full={fullWidth}
class="button {variant} {size} {classNames} {align}"
>
{@render children()}
</button>
{/if}
{#if href}
<a on:click {href} class:w-full={fullWidth} class="button {variant} {size} {classNames} {align}"
><slot />
</a>
{:else}
<button
on:click
{type}
{disabled}
class:w-full={fullWidth}
class="button {variant} {size} {classNames} {align}"
>
<slot />
</button>
{/if}
<style>
.button {
@apply inline-flex;
@@ -172,31 +216,3 @@
@apply justify-end;
}
</style>
<script lang="ts">
export let href = null;
export let type = 'button';
export let size = 'md';
export let variant = 'primary';
export let fullWidth = false;
export let align = 'center';
export let disabled = false;
let classNames = '';
export { classNames as class };
</script>
{#if href}
<a on:click {href} class:w-full={fullWidth} class="button {variant} {size} {classNames} {align}"
><slot />
</a>
{:else}
<button
on:click
{type}
{disabled}
class:w-full={fullWidth}
class="button {variant} {size} {classNames} {align}"
>
<slot />
</button>
{/if}

240
src/lib/components/ListItem.svelte Normal file
View File

@@ -0,0 +1,240 @@
<script lang="ts">
import { page } from '$app/stores';
import Cube from '$lib/icons/Cube.svelte';
import shortenFileSize from '$lib/helper/shortenFileSize';
import timeElapsed from '$lib/helper/timeElapsed';
import Trash from '$lib/icons/Trash.svelte';
import Edit from '$lib/icons/Edit.svelte';
import { createEventDispatcher } from 'svelte';
import Modal from './ui/Modal/Modal.svelte';
import ModalTitle from './ui/Modal/ModalTitle.svelte';
import ModalContent from './ui/Modal/ModalContent.svelte';
import Alert from './ui/Alert.svelte';
import ModalFooter from './ui/Modal/ModalFooter.svelte';
import Button from './ui/Button.svelte';
import { redirect } from '@sveltejs/kit';
let { data, list, i } = $props(); // Holt `data` aus den Props
const dispatch = createEventDispatcher();
let item = list[i];
let error = $state('');
let open = $state(false);
let inProgress = $state(false);
let err = $state(false);
$inspect(item.show_button);
let oldName = $state(item.name);
let test = true;
function handleClick(ev: MouseEvent & { currentTarget: EventTarget & HTMLInputElement }) {
ev.stopPropagation(); // Verhindert, dass der Klick weiter nach oben propagiert
ev.preventDefault(); // Stoppt die Standardaktion
oldName = item.name;
}
async function handle_input(
ev: KeyboardEvent & { currentTarget: EventTarget & HTMLInputElement }
) {
if (item.name == '') {
error = 'Bitte einen gültigen Namen eingeben.';
if (ev.key == 'Enter') {
item.name = oldName;
}
}
if (ev.key == 'Escape') {
ev.preventDefault(); // Stoppt die Standardaktion
item.name = oldName;
ev.target?.blur(); //Entfernt den Fokus vom Input-Feld
}
if (ev.key == 'Enter') {
ev.preventDefault(); // Stoppt die Standardaktion
open = true;
inProgress = true;
const url = $page.url;
let data_obj: { new_name: string; old_name: string } = { new_name: '', old_name: '' };
data_obj['new_name'] = item.name;
data_obj['old_name'] = oldName;
const response = await fetch(
url,
{ method: 'PUT', body: JSON.stringify(data_obj) }
);
inProgress = false;
if (!response.ok) {
err = true;
if (response.status == 400) {
let json_res = await response.json();
alert(json_res['msg']);
item.name = oldName;
}
}
ev.target?.blur(); //Entfernt den Fokus vom Input-Feld
let wert = {
index: i,
oldName: oldName,
newName: item.name,
open: true,
inProgress: inProgress,
err: err
};
dispatch('update', wert);
}
}
function uploadSuccessful() {
open = false;
}
async function delete_item(ev: Event) {
let delete_item = window.confirm('Bist du dir sicher?');
if (delete_item) {
const target = ev.currentTarget as HTMLElement | null;
if (!target) return;
let filename = target.id.split('del__')[1];
// delete request
// --------------
let url = `/list/${filename}`;
console.log(`--- ${filename} + ${url}`);
try {
const response = await fetch(url, { method: 'DELETE' });
if (response.status == 204) {
setTimeout(() => {
window.location.reload();
}, 500);
}
} catch (error) {
if (error instanceof Error) {
console.log(error.message);
} else {
console.log(error);
}
}
}
}
async function deleteItem(ev: Event) {
console.log('debug', ev, item);
let delete_item = window.confirm('Bist du dir sicher?');
if (delete_item) {
const target = ev.currentTarget as HTMLElement | null;
if (!target) return;
let filename = target.id.split('del__')[1];
// delete request
// --------------
let url = `/api/list/${filename}`;
console.log(`--- ${filename} + ${url}`);
try {
const response = await fetch(url, { method: 'DELETE' });
if (response.status == 204) {
// setTimeout(() => {
// window.location.reload();
// }, 500);
console.log('Debug Delete erfolgreich', response.status);
//Weiterleitung fehlerhaft
}
} catch (error) {
if (error instanceof Error) {
console.log(error.message);
} else {
console.log(error);
}
}
}
}
</script>
<a href="/view/{$page.params.vorgang}/{item.name}" class=" flex justify-between gap-x-6 py-5">
<div class=" flex gap-x-4 items-start">
<Cube class="h-auto " />
<div class="flex flex-col">
<div class=" min-w-0 flex items-start">
{#if data.user.admin}
<div class=" flex flex-col items-start">
<input
type="text"
class="text-sm font-semibold leading-6 text-gray-900 border rounded p-1"
class:bg-red-500={!item.show_button}
bind:value={item.name}
onfocusout={() => (item.show_button = true)}
onfocusin={() => (item.show_button = false)}
onkeydown={(ev) => {
ev.stopPropagation();
handle_input(ev);
}}
onclick={(ev) => {
handleClick(ev);
}}
/>
</div>
{#if item.show_button}
<button>
<Edit />
</button>
{/if}
<button
style="padding: 2px "
id="del__{item.name}"
onclick={async (ev) => {
ev.preventDefault();
await deleteItem(ev);
}}
aria-label="Datei löschen"
>
<Trash />
</button>
{:else}
<span class="inline-block min-w-[5px] text-sm font-semibold leading-6 text-gray-900"
>{item.name}</span
>
{/if}
</div>
<p class="mt-1 truncate text-xs leading-5 text-gray-500">
{shortenFileSize(item.size)}
</p>
{#if !item.name && data.user.admin}
<p class="block text-sm leading-6 text-red-900 mt-1">{error}</p>
{/if}
</div>
</div>
<div class="hidden sm:flex sm:flex-col sm:items-end">
<p class="text-sm leading-6 text-gray-900">3D Tatort</p>
<p class="mt-1 text-xs leading-5 text-gray-500">
Zuletzt geändert <time datetime="2023-01-23T13:23Z"
>{timeElapsed(new Date(item.lastModified))}</time
>
</p>
</div>
</a>
<Modal {open}
><ModalTitle>Umbenennen</ModalTitle><ModalContent>
{#if inProgress}
<p class="py-2 mb-1">Vorgang läuft...</p>
{/if}
{#if err}
<Alert class="w-full" type="error">Fehler beim Umbenennen</Alert>
{/if}
</ModalContent>
<ModalFooter><Button disabled={inProgress} on:click={uploadSuccessful}>Ok</Button></ModalFooter>
</Modal>

7
src/lib/icons/Cube.svelte
View File

@@ -1,10 +1,15 @@
<script>
let classNames = '';
export { classNames as class };
</script>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class=" w-6 h-6"
class=" w-6 h-6 {classNames}"
>
<path
stroke-linecap="round"
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 483 B

After

Width:  |  Height:  |  Size: 571 B

4
src/lib/icons/File-rect.svelte
View File

@@ -1,7 +1,5 @@
<script>
export let outline = false;
let classNames = '';
export { classNames as class };
let { outline = false, class: classNames = '' } = $props(); // Standardwert setzen
</script>
{#if outline}

4
src/lib/store.js Normal file
View File

@@ -0,0 +1,4 @@
// store.js
import { writable } from 'svelte/store';
export const wert = writable("Hallo Welt");

10
src/routes/(angemeldet)/+page.svelte
View File

@@ -3,9 +3,12 @@
import FileRect from '$lib/icons/File-rect.svelte';
import ListIcon from '$lib/icons/List-icon.svelte';
<<<<<<< HEAD
export let data;
export let outline = true;
=======
>>>>>>> temp_f03-Frontend
</script>
<div
@@ -27,8 +30,9 @@
Verschaffe Dir einen Überblick über alle gespeicherten Tatorte.
</p>
</div>
{/if}
{#if data.user.admin}
<<<<<<< HEAD
=======
>>>>>>> temp_f03-Frontend
<div class="group relative rounded-lg p-6 text-sm leading-6 hover:bg-gray-50 w-1/4">
<div
class="flex h-11 w-11 items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white"
@@ -46,7 +50,7 @@
<div
class="flex h-11 w-11 items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white"
>
<FileRect class=" group-hover:text-indigo-600" {outline} />
<FileRect class=" group-hover:text-indigo-600" outline={true} />
</div>
<a href="/view" class="mt-6 block font-semibold text-gray-900">
Ansicht

2
src/routes/(angemeldet)/list/+page.svelte
View File

@@ -25,7 +25,7 @@
if (response.status == 204) {
setTimeout(() => {
window.location.reload();
}, 500);
}, 5000);
}
} catch (error) {
if (error instanceof Error) {

41
src/routes/(angemeldet)/upload/+page.svelte
View File

@@ -19,13 +19,13 @@
function generate_token() {
return Math.random()
.toString(36)
.slice(2, 2 + code_len);
.toString(36)
.slice(2, 2 + code_len);
}
let zugangscode = ''
let zugangscode_old = ''
let zugangscode = '';
let zugangscode_old = '';
$: zugangscode_old = generate_token();
$: zugangscode = zugangscode_old
$: zugangscode = zugangscode_old;
let case_existing = undefined;
$: case_existing = false;
@@ -36,7 +36,7 @@
$: inProgress = form === null;
let formErrors: Record<string,any> | null;
let formErrors: Record<string, any> | null;
async function validateForm() {
let data = new FormData();
@@ -153,7 +153,6 @@
// `/(angemeldet)/view` return true or false
async function case_exists(case_no) {
if (case_no == '') {
zugangscode = zugangscode_old;
}
@@ -169,7 +168,7 @@
if (code != -1) {
zugangscode = code;
case_existing = true;
return true
return true;
}
const response = await fetch(url, { method: 'POST', body: data });
@@ -186,7 +185,6 @@
}
async function get_code(case_no) {
if (case_no == '') return;
let url = `/api/list/${case_no}/code`;
@@ -198,7 +196,6 @@
return -1;
}
}
</script>
<div class="mx-auto max-w-2xl">
@@ -249,8 +246,8 @@
<div>
<label for="name" class="block text-sm font-medium leading-6 text-gray-900"
><span class="flex"
>{#if formErrors?.name}
><span class="flex"
>{#if formErrors?.name}
<span class="inline-block mr-1"><Exclamation /></span>
{/if} Name</span
></label
@@ -291,16 +288,19 @@
type="text"
name="zugangscode"
id="zugangscode"
on:input="{ (ev) => { zugangscode_old = ev.target.value }}"
on:input={(ev) => {
zugangscode_old = ev.target.value;
}}
class="block flex-1 border-0 bg-transparent py-1.5 pl-1 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6"
/>
</div>
<button
class="rounded-md bg-blue-500 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
on:click="{() => {
zugangscode = zugangscode_old = generate_token(); }}"
type="button">
class="rounded-md bg-blue-500 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
on:click={() => {
zugangscode = zugangscode_old = generate_token();
}}
type="button"
>
Generiere Zugangscode
</button>
</div>
@@ -351,7 +351,10 @@
</div>
<div class="mt-6 flex items-center justify-end gap-x-6">
<button type="button" class="text-sm font-semibold leading-6 text-gray-900">Cancel</button>
<!-- <button type="button" class="text-sm font-semibold leading-6 text-gray-900">Cancel</button> -->
<Button variant="second" href="/" class="text-sm font-semibold leading-6 text-gray-900"
>Cancel</Button
>
<Button
on:click={buttonClick}
class="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"