upd inventory cam layout
This commit is contained in:
parent
3674ba396e
commit
aa07fe016e
|
|
@ -1 +1 @@
|
|||
1.2.26
|
||||
1.2.28
|
||||
|
|
@ -11,6 +11,8 @@
|
|||
import { refreshLockStatus } from "$lib/stores/aiLock";
|
||||
import { onMount, onDestroy } from "svelte";
|
||||
import { afterNavigate } from "$app/navigation";
|
||||
import { page } from "$app/state";
|
||||
const isCaptureMode = $derived(page.url.pathname.startsWith('/inventory/capture'));
|
||||
import type { Snippet } from "svelte";
|
||||
import {
|
||||
handleRedirect,
|
||||
|
|
@ -199,7 +201,7 @@
|
|||
</aside>
|
||||
|
||||
<!-- Main content -->
|
||||
<main class="flex-1 overflow-y-auto p-5 pt-safe md:pt-5 pb-20 md:pb-5">
|
||||
<main class="flex-1 overflow-y-auto {isCaptureMode ? 'p-0' : 'p-5 pt-safe md:pt-5 pb-20 md:pb-5'}">
|
||||
<div class="mx-auto max-w-[900px]">
|
||||
<!-- Desktop sidebar toggle button -->
|
||||
<div class="hidden md:flex mb-3 -mt-1">
|
||||
|
|
@ -217,8 +219,8 @@
|
|||
</div>
|
||||
</main>
|
||||
|
||||
<!-- Bottom tab bar (mobile only, hidden when sidebar open) -->
|
||||
{#if !sidebarOpen}
|
||||
<!-- Bottom tab bar (mobile only, hidden when sidebar open or in capture mode) -->
|
||||
{#if !sidebarOpen && !isCaptureMode}
|
||||
<BottomTabBar onsidebaropen={toggleSidebar} />
|
||||
{/if}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -29,6 +29,14 @@
|
|||
let pendingImageId = $state<string | null>(null);
|
||||
let capturedPreview = $state<string | null>(null);
|
||||
let error = $state('');
|
||||
let snackbar = $state('');
|
||||
let snackbarTimer: ReturnType<typeof setTimeout> | null = null;
|
||||
|
||||
function showSnackbar(msg: string) {
|
||||
snackbar = msg;
|
||||
if (snackbarTimer) clearTimeout(snackbarTimer);
|
||||
snackbarTimer = setTimeout(() => { snackbar = ''; }, 2500);
|
||||
}
|
||||
|
||||
// Camera stream
|
||||
let videoEl = $state<HTMLVideoElement | null>(null);
|
||||
|
|
@ -121,6 +129,11 @@
|
|||
captureState = 'shooting'; // ready for more photos of same item
|
||||
}
|
||||
|
||||
async function saveAndNextWithFeedback() {
|
||||
await saveAndNext();
|
||||
showSnackbar('✓ Gespeichert — bereit für nächsten Gegenstand');
|
||||
}
|
||||
|
||||
async function saveAndNext() {
|
||||
if (!pendingItem && !(captureState === 'confirm' && recognized)) return;
|
||||
const label = pendingItem?.label ?? recognized!.label;
|
||||
|
|
@ -214,7 +227,7 @@
|
|||
{:else}
|
||||
<div class="flex flex-col h-dvh bg-black">
|
||||
<!-- Top bar -->
|
||||
<div class="flex items-center gap-2 px-3 py-2 bg-black/60 z-10">
|
||||
<div class="flex items-center gap-2 px-3 py-2 bg-black/60 z-10" style="padding-top: max(0.5rem, env(safe-area-inset-top));">
|
||||
<button class="p-2 rounded-full bg-white/10 text-white hover:bg-white/20" onclick={() => { stopCamera(); goto('/inventory'); }}>
|
||||
<X size={18} />
|
||||
</button>
|
||||
|
|
@ -306,12 +319,19 @@
|
|||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Snackbar -->
|
||||
{#if snackbar}
|
||||
<div class="absolute bottom-36 left-1/2 -translate-x-1/2 z-50 rounded-full bg-white/20 backdrop-blur-sm px-5 py-2.5 text-sm text-white whitespace-nowrap shadow-xl">
|
||||
{snackbar}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Bottom action bar -->
|
||||
<div class="flex items-end justify-around px-6 py-4 bg-black/60">
|
||||
<div class="flex items-end justify-around px-6 py-4 bg-black/60" style="padding-bottom: max(1rem, env(safe-area-inset-bottom));">
|
||||
<!-- Nächster Gegenstand -->
|
||||
<button
|
||||
class="flex flex-col items-center gap-1 transition-opacity {pendingItem || captureState === 'confirm' ? 'opacity-100' : 'opacity-40'}"
|
||||
onclick={saveAndNext}
|
||||
onclick={saveAndNextWithFeedback}
|
||||
disabled={captureState === 'analyzing' || captureState === 'confirm' || (!pendingItem && captureState !== 'confirm')}
|
||||
>
|
||||
<div class="flex h-12 w-12 items-center justify-center rounded-full border-2 border-white/40 text-white">
|
||||
|
|
|
|||
Loading…
Reference in New Issue