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

Frontend passt wieder

Browse Source
This commit is contained in:
mina
2025-06-25 18:10:31 +02:00
parent b273b8046a
commit f8234c0488
3 changed files with 109 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -0,0 +1,85 @@
<script lang="ts">
import Cube from '$lib/icons/Cube.svelte';
import Edit from '$lib/icons/Edit.svelte';
import Trash from '$lib/icons/Trash.svelte';
import shortenFileSize from '$lib/helper/shortenFileSize';
import timeElapsed from '$lib/helper/timeElapsed';
export let data;
export let i;
let crimesList = data.crimesList;
let item = crimesList[i];
let admin = data.user?.admin;
let link = `/view/${item.prefix}/${item.name}?token=${data.caseToken}`;
console.log('Debug Mina', crimesList, data);
function editName() {
console.log('Edit Name');
}
function deleteCase() {
console.log('Delete Case');
}
function checkIsEmpty() {
if (!item.name) console.log('Das Feld ist leer');
}
function cancelEdit() {
console.log('Bearbeitung abgebrochen');
}
</script>
<a href={link} class="flex justify-between items-center gap-x-6 py-5">
<div class=" flex gap-x-4">
<Cube class="h-auto" />
<div class="min-w-0 flex-auto">
{#if admin}
<input
class="text-sm font-semibold leading-6 text-gray-900 inline-block min-w-1"
type="text"
value={item.name}
on:click|preventDefault={(ev) => {
editName();
}}
/>
<button
class="p-2"
on:click|preventDefault={(ev) => {
editName();
}}
>
<Edit />
</button>
<button
class="p-2"
on:click|preventDefault={async (ev) => {
deleteCase();
}}
>
<Trash />
</button>
{:else}
<span class="text-sm font-semibold leading-6 text-gray-900 inline-block min-w-1">
{item.name}
</span>
{/if}
<p class="mt-1 truncate text-xs leading-5 text-gray-500">{shortenFileSize(item.size)}</p>
</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>

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

43
src/routes/(token-based)/list/[vorgang]/+page.svelte
View File

@@ -1,21 +1,13 @@
<script lang="ts">
import shortenFileSize from '$lib/helper/shortenFileSize';
import { page } from '$app/stores';
import timeElapsed from '$lib/helper/timeElapsed';
import Alert from '$lib/components/Alert.svelte';
import Button from '$lib/components/Button.svelte';
import Modal from '$lib/components/Modal/Modal.svelte';
import ModalTitle from '$lib/components/Modal/ModalTitle.svelte';
import ModalContent from '$lib/components/Modal/ModalContent.svelte';
import ModalFooter from '$lib/components/Modal/ModalFooter.svelte';
import Cube from '$lib/icons/Cube.svelte';
import Edit from '$lib/icons/Edit.svelte';
import Trash from '$lib/icons/Trash.svelte';
import ListItem from '$lib/components/ListItem.svelte';
/** export let data; */
/** @type {import('./$types').PageData} */
export let data;
interface ListItem {
@@ -28,6 +20,7 @@
const crimesList: ListItem[] = data.crimesList;
const token: string = data.caseToken;
export let vorgang = $page.params.vorgang;
let open = false;
$: open;
@@ -43,20 +36,20 @@
open = false;
}
function defocus_element(i: number) {
let item = crimesList[i];
let text_field_id = `label__${item.name}`;
// function defocus_element(i: number) {
// let item = crimesList[i];
// let text_field_id = `label__${item.name}`;
let text_field = document.getElementById(text_field_id);
if (text_field) {
text_field.setAttribute('contenteditable', 'false');
text_field.textContent = item.name;
}
// let text_field = document.getElementById(text_field_id);
// if (text_field) {
// text_field.setAttribute('contenteditable', 'false');
// text_field.textContent = item.name;
// }
// reshow button
crimesList[i].show_button = true;
return;
}
// // reshow button
// crimesList[i].show_button = true;
// return;
// }
async function handle_input(ev: KeyboardEvent, i: number) {
let item = crimesList[i];
@@ -132,13 +125,13 @@
<div class="-z-10 bg-white">
<div class="flex flex-col items-center justify-center w-full">
<h1 class="text-xl">Vorgang {$page.params.vorgang}</h1>
<h1 class="text-xl">Vorgang {vorgang}</h1>
</div>
<div class="mx-auto flex justify-center max-w-7xl h-full">
<ul class="divide-y divide-gray-100">
{#each crimesList as item, i}
<li>
<a
<!-- <a
href="/view/{$page.params.vorgang}/{item.name}?token={token}"
class=" flex justify-between gap-x-6 py-5"
aria-label="zum 3D-modell"
@@ -164,7 +157,6 @@
}}>{item.name}</span
>
{#if item.show_button}
<button
style="padding: 2px"
@@ -245,7 +237,8 @@
>
</p>
</div>
</a>
</a> -->
<ListItem {data} {i}></ListItem>
</li>
{/each}
</ul>