616 lines
29 KiB
PHP
616 lines
29 KiB
PHP
<?php
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
|
|
<title>Inventur Scanner</title>
|
|
<link rel="shortcut icon" href="/assets/images/favicon.ico">
|
|
|
|
<meta name="theme-color" content="#005384">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
|
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/vue@3.4.27/dist/vue.global.prod.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/axios@1.7.2/dist/axios.min.js"></script>
|
|
<script src="https://unpkg.com/html5-qrcode@2.3.8/html5-qrcode.min.js"></script>
|
|
|
|
<script>
|
|
window.TT_CONFIG = <?= json_encode($JSGlobals ?? []) ?>;
|
|
tailwind.config = {
|
|
darkMode: 'class',
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
'primary': '#005384',
|
|
'secondary': '#fac41b',
|
|
},
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
html, body {
|
|
overscroll-behavior: none;
|
|
touch-action: manipulation;
|
|
}
|
|
body {
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
.fade-enter-active, .fade-leave-active { transition: opacity 0.2s ease-in-out; }
|
|
.fade-enter-from, .fade-leave-to { opacity: 0; }
|
|
|
|
.slide-up-enter-active, .slide-up-leave-active { transition: transform 0.3s ease-out, opacity 0.3s ease-out; }
|
|
.slide-up-enter-from, .slide-up-leave-to { transform: translateY(100%); opacity: 0; }
|
|
|
|
#qr-reader {
|
|
width: 100%;
|
|
border: none !important;
|
|
}
|
|
#qr-reader video {
|
|
border-radius: 12px;
|
|
}
|
|
#qr-reader__scan_region {
|
|
background: transparent !important;
|
|
}
|
|
#qr-reader__dashboard {
|
|
display: none !important;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.5; }
|
|
}
|
|
.animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
|
|
|
|
.success-flash {
|
|
animation: successFlash 0.5s ease-out;
|
|
}
|
|
@keyframes successFlash {
|
|
0% { background-color: rgb(34, 197, 94); }
|
|
100% { background-color: transparent; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-slate-100 dark:bg-slate-900 transition-colors duration-300">
|
|
|
|
<div id="app" class="min-h-screen"></div>
|
|
|
|
<script>
|
|
const { createApp, ref, reactive, computed, onMounted, onUnmounted, watch, nextTick } = Vue;
|
|
|
|
const app = createApp({
|
|
setup() {
|
|
// === STATE ===
|
|
const currentScreen = ref('stocktake-select'); // stocktake-select, scanner, manual-entry
|
|
const stocktakes = ref([]);
|
|
const selectedStocktake = ref(null);
|
|
const isLoading = ref(true);
|
|
const scannerActive = ref(false);
|
|
const lastScan = ref(null);
|
|
const recentScans = ref([]);
|
|
const progress = reactive({ totalScanned: 0, myScanned: 0 });
|
|
const theme = ref(localStorage.getItem('theme') || 'system');
|
|
|
|
// Form state
|
|
const manualForm = reactive({
|
|
show: false,
|
|
article: null,
|
|
quantity: 1,
|
|
rack: '',
|
|
shelf: '',
|
|
note: '',
|
|
searchQuery: '',
|
|
searchResults: [],
|
|
searching: false,
|
|
});
|
|
|
|
// Scanner instance
|
|
let html5QrCode = null;
|
|
|
|
const API_BASE = window.TT_CONFIG.BASE_PATH || '/WarehouseStocktakePWA';
|
|
const api = axios.create({ baseURL: API_BASE });
|
|
|
|
// === COMPUTED ===
|
|
const isDark = computed(() => {
|
|
if (theme.value === 'dark') return true;
|
|
if (theme.value === 'light') return false;
|
|
return window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
});
|
|
|
|
// === METHODS ===
|
|
const applyTheme = () => {
|
|
document.documentElement.classList.toggle('dark', isDark.value);
|
|
};
|
|
|
|
const setTheme = (newTheme) => {
|
|
theme.value = newTheme;
|
|
localStorage.setItem('theme', newTheme);
|
|
applyTheme();
|
|
};
|
|
|
|
const fetchStocktakes = async () => {
|
|
isLoading.value = true;
|
|
try {
|
|
const res = await api.get('/getActiveStocktakes');
|
|
if (res.data.success) {
|
|
stocktakes.value = res.data.stocktakes;
|
|
}
|
|
} catch (e) {
|
|
console.error('Failed to fetch stocktakes:', e);
|
|
} finally {
|
|
isLoading.value = false;
|
|
}
|
|
};
|
|
|
|
const selectStocktake = async (stocktake) => {
|
|
selectedStocktake.value = stocktake;
|
|
currentScreen.value = 'scanner';
|
|
await fetchMyScans();
|
|
await fetchProgress();
|
|
await nextTick();
|
|
startScanner();
|
|
};
|
|
|
|
const backToList = () => {
|
|
stopScanner();
|
|
selectedStocktake.value = null;
|
|
currentScreen.value = 'stocktake-select';
|
|
fetchStocktakes();
|
|
};
|
|
|
|
const startScanner = async () => {
|
|
if (html5QrCode) {
|
|
await stopScanner();
|
|
}
|
|
|
|
try {
|
|
html5QrCode = new Html5Qrcode("qr-reader");
|
|
await html5QrCode.start(
|
|
{ facingMode: "environment" },
|
|
{
|
|
fps: 10,
|
|
qrbox: { width: 250, height: 250 },
|
|
aspectRatio: 1.0,
|
|
},
|
|
onScanSuccess,
|
|
onScanFailure
|
|
);
|
|
scannerActive.value = true;
|
|
} catch (err) {
|
|
console.error('Scanner start error:', err);
|
|
alert('Kamera konnte nicht gestartet werden. Bitte Berechtigung erteilen.');
|
|
}
|
|
};
|
|
|
|
const stopScanner = async () => {
|
|
if (html5QrCode && scannerActive.value) {
|
|
try {
|
|
await html5QrCode.stop();
|
|
} catch (e) {
|
|
console.error('Scanner stop error:', e);
|
|
}
|
|
}
|
|
scannerActive.value = false;
|
|
};
|
|
|
|
const onScanSuccess = async (decodedText) => {
|
|
// Prevent rapid duplicate scans
|
|
if (lastScan.value && lastScan.value.code === decodedText && Date.now() - lastScan.value.time < 2000) {
|
|
return;
|
|
}
|
|
|
|
lastScan.value = { code: decodedText, time: Date.now() };
|
|
|
|
// Vibrate feedback
|
|
if (navigator.vibrate) {
|
|
navigator.vibrate(100);
|
|
}
|
|
|
|
// Lookup article
|
|
try {
|
|
const res = await api.get('/getArticle', { params: { code: decodedText } });
|
|
if (res.data.success) {
|
|
manualForm.article = res.data.article;
|
|
manualForm.quantity = 1;
|
|
manualForm.rack = '';
|
|
manualForm.shelf = '';
|
|
manualForm.note = '';
|
|
manualForm.show = true;
|
|
await stopScanner();
|
|
} else {
|
|
showToast(res.data.message || 'Artikel nicht gefunden', 'error');
|
|
}
|
|
} catch (e) {
|
|
showToast('Fehler beim Laden des Artikels', 'error');
|
|
}
|
|
};
|
|
|
|
const onScanFailure = (error) => {
|
|
// Ignore - continuous scanning
|
|
};
|
|
|
|
const submitScan = async () => {
|
|
if (!manualForm.article || manualForm.quantity <= 0) {
|
|
showToast('Bitte Menge angeben', 'error');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const res = await api.post('/submitScan', {
|
|
stocktakeId: selectedStocktake.value.id,
|
|
articleId: manualForm.article.id,
|
|
quantity: manualForm.quantity,
|
|
rack: manualForm.rack || null,
|
|
shelf: manualForm.shelf || null,
|
|
note: manualForm.note || null,
|
|
});
|
|
|
|
if (res.data.success) {
|
|
showToast(res.data.message, 'success');
|
|
|
|
// Add to recent scans
|
|
recentScans.value.unshift({
|
|
...res.data.item,
|
|
scannedAt: new Date().toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' }),
|
|
flash: true,
|
|
});
|
|
if (recentScans.value.length > 20) {
|
|
recentScans.value.pop();
|
|
}
|
|
|
|
// Update progress
|
|
progress.totalScanned++;
|
|
progress.myScanned++;
|
|
|
|
// Close form and restart scanner
|
|
manualForm.show = false;
|
|
manualForm.article = null;
|
|
await nextTick();
|
|
startScanner();
|
|
} else {
|
|
showToast(res.data.message || 'Fehler beim Speichern', 'error');
|
|
}
|
|
} catch (e) {
|
|
showToast('Netzwerkfehler', 'error');
|
|
}
|
|
};
|
|
|
|
const cancelScan = async () => {
|
|
manualForm.show = false;
|
|
manualForm.article = null;
|
|
await nextTick();
|
|
startScanner();
|
|
};
|
|
|
|
const openManualEntry = async () => {
|
|
await stopScanner();
|
|
manualForm.show = true;
|
|
manualForm.article = null;
|
|
manualForm.searchQuery = '';
|
|
manualForm.searchResults = [];
|
|
};
|
|
|
|
const searchArticles = async () => {
|
|
if (manualForm.searchQuery.length < 2) {
|
|
manualForm.searchResults = [];
|
|
return;
|
|
}
|
|
|
|
manualForm.searching = true;
|
|
try {
|
|
const res = await api.get('/searchArticles', { params: { query: manualForm.searchQuery } });
|
|
if (res.data.success) {
|
|
manualForm.searchResults = res.data.articles;
|
|
}
|
|
} catch (e) {
|
|
console.error('Search error:', e);
|
|
} finally {
|
|
manualForm.searching = false;
|
|
}
|
|
};
|
|
|
|
const selectSearchResult = (article) => {
|
|
manualForm.article = article;
|
|
manualForm.quantity = 1;
|
|
manualForm.searchQuery = '';
|
|
manualForm.searchResults = [];
|
|
};
|
|
|
|
const fetchMyScans = async () => {
|
|
if (!selectedStocktake.value) return;
|
|
try {
|
|
const res = await api.get('/getMyScans', { params: { stocktakeId: selectedStocktake.value.id } });
|
|
if (res.data.success) {
|
|
recentScans.value = res.data.items;
|
|
}
|
|
} catch (e) {
|
|
console.error('Failed to fetch scans:', e);
|
|
}
|
|
};
|
|
|
|
const fetchProgress = async () => {
|
|
if (!selectedStocktake.value) return;
|
|
try {
|
|
const res = await api.get('/getProgress', { params: { stocktakeId: selectedStocktake.value.id } });
|
|
if (res.data.success) {
|
|
progress.totalScanned = res.data.progress.totalScanned;
|
|
progress.myScanned = res.data.progress.myScanned;
|
|
}
|
|
} catch (e) {
|
|
console.error('Failed to fetch progress:', e);
|
|
}
|
|
};
|
|
|
|
// Toast notification
|
|
const toast = reactive({ show: false, message: '', type: 'success' });
|
|
let toastTimeout = null;
|
|
|
|
const showToast = (message, type = 'success') => {
|
|
toast.message = message;
|
|
toast.type = type;
|
|
toast.show = true;
|
|
if (toastTimeout) clearTimeout(toastTimeout);
|
|
toastTimeout = setTimeout(() => { toast.show = false; }, 3000);
|
|
};
|
|
|
|
const logout = () => {
|
|
window.location.href = API_BASE + '/logout';
|
|
};
|
|
|
|
// === LIFECYCLE ===
|
|
onMounted(() => {
|
|
applyTheme();
|
|
fetchStocktakes();
|
|
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', applyTheme);
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
stopScanner();
|
|
});
|
|
|
|
// Debounced search
|
|
let searchTimeout = null;
|
|
watch(() => manualForm.searchQuery, (val) => {
|
|
if (searchTimeout) clearTimeout(searchTimeout);
|
|
searchTimeout = setTimeout(searchArticles, 300);
|
|
});
|
|
|
|
return {
|
|
currentScreen, stocktakes, selectedStocktake, isLoading, scannerActive,
|
|
recentScans, progress, theme, manualForm, toast,
|
|
selectStocktake, backToList, submitScan, cancelScan,
|
|
openManualEntry, selectSearchResult, setTheme, logout,
|
|
};
|
|
},
|
|
template: `
|
|
<div class="min-h-screen flex flex-col">
|
|
<!-- Header -->
|
|
<header class="bg-primary text-white px-4 py-3 flex items-center justify-between sticky top-0 z-30 shadow-lg">
|
|
<div class="flex items-center">
|
|
<button v-if="currentScreen === 'scanner'" @click="backToList" class="mr-3 p-1">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
|
|
</svg>
|
|
</button>
|
|
<div>
|
|
<h1 class="font-bold text-lg">Inventur Scanner</h1>
|
|
<p v-if="selectedStocktake" class="text-xs text-white/80">{{ selectedStocktake.title }}</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center space-x-2">
|
|
<button @click="setTheme(theme === 'dark' ? 'light' : 'dark')" class="p-2 rounded-full hover:bg-white/10">
|
|
<svg v-if="theme === 'dark'" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
|
|
</svg>
|
|
<svg v-else xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
|
|
</svg>
|
|
</button>
|
|
<button @click="logout" class="p-2 rounded-full hover:bg-white/10">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main Content -->
|
|
<main class="flex-1 overflow-auto">
|
|
<!-- Stocktake Selection Screen -->
|
|
<div v-if="currentScreen === 'stocktake-select'" class="p-4">
|
|
<div v-if="isLoading" class="space-y-4">
|
|
<div v-for="i in 3" :key="i" class="bg-white dark:bg-slate-800 rounded-xl p-4 shadow animate-pulse">
|
|
<div class="h-5 bg-slate-200 dark:bg-slate-700 rounded w-3/4 mb-2"></div>
|
|
<div class="h-4 bg-slate-200 dark:bg-slate-700 rounded w-1/2"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-else-if="stocktakes.length === 0" class="text-center py-20">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 mx-auto text-slate-300 dark:text-slate-600 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
|
|
</svg>
|
|
<p class="text-slate-500 dark:text-slate-400">Keine aktiven Inventuren</p>
|
|
<button @click="fetchStocktakes" class="mt-4 px-4 py-2 bg-primary text-white rounded-lg">
|
|
Aktualisieren
|
|
</button>
|
|
</div>
|
|
|
|
<div v-else class="space-y-4">
|
|
<p class="text-sm text-slate-500 dark:text-slate-400 mb-2">Aktive Inventuren auswählen:</p>
|
|
<div v-for="st in stocktakes" :key="st.id"
|
|
@click="selectStocktake(st)"
|
|
class="bg-white dark:bg-slate-800 rounded-xl p-4 shadow cursor-pointer active:scale-[0.98] transition">
|
|
<div class="flex justify-between items-start">
|
|
<div>
|
|
<h3 class="font-bold text-slate-800 dark:text-white">{{ st.title }}</h3>
|
|
<p class="text-sm text-slate-500 dark:text-slate-400">{{ st.locationName }}</p>
|
|
<p class="text-xs text-slate-400 dark:text-slate-500 mt-1">{{ st.stocktakeNumber }}</p>
|
|
</div>
|
|
<div class="text-right">
|
|
<span class="inline-block bg-secondary text-primary text-xs font-bold px-2 py-1 rounded-full">
|
|
{{ st.totalScannedItems }} Artikel
|
|
</span>
|
|
<p v-if="st.startedAt" class="text-xs text-slate-400 mt-1">{{ st.startedAt }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Scanner Screen -->
|
|
<div v-if="currentScreen === 'scanner'" class="flex flex-col h-full">
|
|
<!-- Progress Bar -->
|
|
<div class="bg-white dark:bg-slate-800 px-4 py-2 flex justify-between items-center text-sm border-b dark:border-slate-700">
|
|
<span class="text-slate-600 dark:text-slate-300">
|
|
<strong class="text-primary dark:text-secondary">{{ progress.totalScanned }}</strong> gesamt
|
|
</span>
|
|
<span class="text-slate-600 dark:text-slate-300">
|
|
<strong class="text-green-600 dark:text-green-400">{{ progress.myScanned }}</strong> von mir
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Scanner View -->
|
|
<div v-if="!manualForm.show" class="p-4">
|
|
<div class="relative bg-black rounded-xl overflow-hidden mb-4">
|
|
<div id="qr-reader" class="w-full"></div>
|
|
<div v-if="!scannerActive" class="absolute inset-0 flex items-center justify-center bg-slate-900/80">
|
|
<div class="text-center text-white">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mx-auto mb-2 animate-pulse" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
</svg>
|
|
<p>Kamera wird gestartet...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button @click="openManualEntry"
|
|
class="w-full py-3 bg-slate-200 dark:bg-slate-700 text-slate-700 dark:text-slate-200 rounded-xl font-medium">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
|
</svg>
|
|
Manuelle Suche
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Entry Form -->
|
|
<transition name="slide-up">
|
|
<div v-if="manualForm.show" class="flex-1 bg-white dark:bg-slate-800 p-4 overflow-auto">
|
|
<!-- Search (if no article selected) -->
|
|
<div v-if="!manualForm.article" class="space-y-4">
|
|
<div class="relative">
|
|
<input v-model="manualForm.searchQuery" type="text" inputmode="search"
|
|
placeholder="Artikelnummer oder Name..."
|
|
class="w-full px-4 py-3 rounded-xl border dark:border-slate-600 dark:bg-slate-700 dark:text-white focus:ring-2 focus:ring-primary">
|
|
<div v-if="manualForm.searching" class="absolute right-3 top-3">
|
|
<svg class="animate-spin h-5 w-5 text-slate-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="manualForm.searchResults.length" class="space-y-2 max-h-64 overflow-auto">
|
|
<div v-for="article in manualForm.searchResults" :key="article.id"
|
|
@click="selectSearchResult(article)"
|
|
class="p-3 bg-slate-50 dark:bg-slate-700 rounded-lg cursor-pointer active:bg-slate-100 dark:active:bg-slate-600">
|
|
<p class="font-medium text-slate-800 dark:text-white">{{ article.title }}</p>
|
|
<p class="text-sm text-slate-500 dark:text-slate-400">{{ article.articleNumber }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<button @click="cancelScan" class="w-full py-3 bg-slate-200 dark:bg-slate-600 text-slate-700 dark:text-slate-200 rounded-xl">
|
|
Abbrechen
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Article Form (if article selected) -->
|
|
<div v-else class="space-y-4">
|
|
<div class="bg-slate-50 dark:bg-slate-700 rounded-xl p-4">
|
|
<p class="font-bold text-lg text-slate-800 dark:text-white">{{ manualForm.article.title }}</p>
|
|
<p class="text-sm text-slate-500 dark:text-slate-400">{{ manualForm.article.articleNumber }}</p>
|
|
<p v-if="manualForm.article.categoryName" class="text-xs text-slate-400 mt-1">{{ manualForm.article.categoryName }}</p>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
|
|
Menge ({{ manualForm.article.unit }}) *
|
|
</label>
|
|
<input v-model.number="manualForm.quantity" type="number" inputmode="decimal" min="0.01" step="0.01"
|
|
class="w-full px-4 py-3 text-xl font-bold text-center rounded-xl border dark:border-slate-600 dark:bg-slate-700 dark:text-white focus:ring-2 focus:ring-primary">
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Regal</label>
|
|
<input v-model="manualForm.rack" type="text"
|
|
class="w-full px-4 py-2 rounded-xl border dark:border-slate-600 dark:bg-slate-700 dark:text-white">
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Fach</label>
|
|
<input v-model="manualForm.shelf" type="text"
|
|
class="w-full px-4 py-2 rounded-xl border dark:border-slate-600 dark:bg-slate-700 dark:text-white">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex space-x-3 pt-4">
|
|
<button @click="cancelScan" class="flex-1 py-3 bg-slate-200 dark:bg-slate-600 text-slate-700 dark:text-slate-200 rounded-xl font-medium">
|
|
Abbrechen
|
|
</button>
|
|
<button @click="submitScan" class="flex-1 py-3 bg-green-600 text-white rounded-xl font-bold">
|
|
Speichern
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</transition>
|
|
|
|
<!-- Recent Scans List -->
|
|
<div v-if="!manualForm.show && recentScans.length" class="flex-1 bg-white dark:bg-slate-800 overflow-auto">
|
|
<div class="px-4 py-2 bg-slate-50 dark:bg-slate-700/50 sticky top-0">
|
|
<p class="text-xs font-medium text-slate-500 dark:text-slate-400 uppercase">Letzte Scans</p>
|
|
</div>
|
|
<div class="divide-y dark:divide-slate-700">
|
|
<div v-for="(item, index) in recentScans" :key="item.id"
|
|
:class="{ 'success-flash': item.flash }"
|
|
class="px-4 py-3 flex justify-between items-center">
|
|
<div class="min-w-0 flex-1">
|
|
<p class="font-medium text-slate-800 dark:text-white truncate">{{ item.articleTitle }}</p>
|
|
<p class="text-xs text-slate-500 dark:text-slate-400">
|
|
{{ item.articleNumber }}
|
|
<span v-if="item.rack || item.shelf" class="ml-2">
|
|
| {{ item.rack || '-' }} / {{ item.shelf || '-' }}
|
|
</span>
|
|
</p>
|
|
</div>
|
|
<div class="text-right ml-4">
|
|
<p class="font-bold text-primary dark:text-secondary">{{ item.countedQuantity }} {{ item.unit }}</p>
|
|
<p class="text-xs text-slate-400">{{ item.scannedAt }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Toast Notification -->
|
|
<transition name="fade">
|
|
<div v-if="toast.show"
|
|
:class="toast.type === 'success' ? 'bg-green-600' : 'bg-red-600'"
|
|
class="fixed bottom-20 left-4 right-4 p-4 rounded-xl text-white text-center font-medium shadow-lg z-50">
|
|
{{ toast.message }}
|
|
</div>
|
|
</transition>
|
|
</div>
|
|
`
|
|
});
|
|
app.mount('#app');
|
|
</script>
|
|
</body>
|
|
</html>
|