121 lines
2.9 KiB
Svelte
121 lines
2.9 KiB
Svelte
<script lang="ts">
|
|
import { enhance } from '$app/forms';
|
|
import type { PageData, ActionData } from './$types';
|
|
|
|
let { data, form }: { data: PageData; form: ActionData } = $props();
|
|
|
|
let uploading = $state(false);
|
|
let fileInput: HTMLInputElement | undefined = $state();
|
|
</script>
|
|
|
|
<section class="admin-section">
|
|
<a class="back" href="/admin/services">← Nazaj na storitve</a>
|
|
<h1>Uredi storitev</h1>
|
|
|
|
<form class="admin-card" method="POST" action="?/update" use:enhance>
|
|
<label>
|
|
Naziv
|
|
<input class="admin-input" type="text" name="title" value={data.service.title} required />
|
|
</label>
|
|
<label>
|
|
Opis (neobvezno)
|
|
<textarea class="admin-input" name="description" rows="2">{data.service.description ?? ''}</textarea>
|
|
</label>
|
|
<label>
|
|
Postavke seznama (ena na vrstico)
|
|
<textarea class="admin-input" name="bullets" rows="4">{data.service.bullets ?? ''}</textarea>
|
|
</label>
|
|
{#if form?.error}<p class="admin-error">{form.error}</p>{/if}
|
|
{#if form?.success}<p class="admin-msg">{form.success}</p>{/if}
|
|
<button class="admin-btn" type="submit">Shrani</button>
|
|
</form>
|
|
|
|
<form
|
|
class="admin-card"
|
|
method="POST"
|
|
action="?/addImage"
|
|
enctype="multipart/form-data"
|
|
use:enhance={() => {
|
|
uploading = true;
|
|
return async ({ update }) => {
|
|
await update();
|
|
uploading = false;
|
|
if (fileInput) fileInput.value = '';
|
|
};
|
|
}}
|
|
>
|
|
<h2>Slike storitve</h2>
|
|
<p class="admin-notice">Če je slik več, se izmenjujejo kot diaprojekcija.</p>
|
|
<input bind:this={fileInput} type="file" name="images" accept="image/*" multiple required />
|
|
<button class="admin-btn" type="submit" disabled={uploading}>
|
|
{uploading ? 'Nalaganje…' : 'Naloži'}
|
|
</button>
|
|
</form>
|
|
|
|
{#if data.service.images.length > 0}
|
|
<div class="grid">
|
|
{#each data.service.images as image (image.id)}
|
|
<div class="tile">
|
|
<img src={image.url} alt="" loading="lazy" />
|
|
<form method="POST" action="?/deleteImage" use:enhance>
|
|
<input type="hidden" name="imageId" value={image.id} />
|
|
<button class="del" type="submit" aria-label="Izbriši">Izbriši</button>
|
|
</form>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
</section>
|
|
|
|
<style>
|
|
.back {
|
|
color: #9aa0a6;
|
|
text-decoration: none;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.back:hover {
|
|
color: #e5e4ea;
|
|
}
|
|
|
|
textarea.admin-input {
|
|
resize: vertical;
|
|
font-family: inherit;
|
|
}
|
|
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
|
|
gap: 1em;
|
|
}
|
|
|
|
.tile {
|
|
position: relative;
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
background: #11161a;
|
|
aspect-ratio: 4 / 3;
|
|
}
|
|
|
|
.tile img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
display: block;
|
|
}
|
|
|
|
.tile .del {
|
|
position: absolute;
|
|
top: 0.5em;
|
|
right: 0.5em;
|
|
background: rgba(220, 40, 40, 0.9);
|
|
color: #fff;
|
|
border: none;
|
|
padding: 0.3em 0.6em;
|
|
font-size: 0.8em;
|
|
font-family: inherit;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
}
|
|
</style>
|