Xinon mobile/improve

This commit is contained in:
Luca Haid
2026-01-17 12:48:08 +00:00
parent 51c9c5ae7e
commit 1426d769d2
37 changed files with 7502 additions and 1042 deletions

View File

@@ -1,77 +1,9 @@
<?php
/**
* MobileApp PWA View Template
*
* Main shell for the unified Mobile App.
* Vue handles internal navigation between modules.
*/
?>
<!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>Xinon Mobile</title>
<link rel="shortcut icon" href="/assets/images/favicon.ico">
<!-- PWA Configuration -->
<link rel="manifest" href="/mobile/manifest.json">
<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">
<meta name="apple-mobile-web-app-title" content="Xinon">
<!-- External Libraries (CDN) -->
<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://cdn.jsdelivr.net/npm/html5-qrcode@2.3.8/html5-qrcode.min.js"></script>
<!-- Shared Styles -->
<link rel="stylesheet" href="/mobile/shared/base.css">
<!-- App Configuration -->
<script>
window.TT_CONFIG = <?= json_encode($JSGlobals ?? []) ?>;
// Tailwind configuration
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
'primary': '#005384',
'secondary': '#fac41b',
},
}
}
};
</script>
</head>
<body class="transition-colors duration-300 overflow-hidden">
<div id="app" class="h-screen w-screen overflow-hidden antialiased">
<!-- Loading state while Vue initializes -->
<div class="flex items-center justify-center h-full bg-slate-100 dark:bg-slate-900">
<div class="text-center">
<img src="/assets/images/xinon-full-transparent.png" class="h-12 mx-auto mb-4 dark:hidden">
<img src="/assets/images/xinon-full-transparent-white.png" class="h-12 mx-auto mb-4 hidden dark:block">
<div class="animate-pulse text-slate-500 dark:text-slate-400">Lädt...</div>
</div>
</div>
</div>
<!-- Load Vue app as ES module -->
<script type="module" src="/mobile/app.js"></script>
<!-- Register Service Worker -->
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/mobile/sw.js')
.then(reg => console.log('SW registered:', reg.scope))
.catch(err => console.log('SW registration failed:', err));
});
}
</script>
</body>
</html>
$appConfig = [
'title' => 'Xinon Mobile',
'appName' => 'Xinon',
'manifestPath' => '/mobile/manifest.json',
'appJsPath' => '/mobile/app.js',
'swPath' => '/mobile/sw.js',
];
require __DIR__ . '/Base.php';

View File

@@ -0,0 +1,67 @@
<?php
$config = array_merge([
'title' => 'Xinon Mobile',
'appName' => 'Xinon',
'manifestPath' => '/mobile/manifest.json',
'appJsPath' => '/mobile/app.js',
'swPath' => '/mobile/sw.js',
'additionalStylesheets' => [],
], $appConfig ?? []);
?>
<!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><?= htmlspecialchars($config['title']) ?></title>
<link rel="shortcut icon" href="/assets/images/favicon.ico">
<link rel="manifest" href="<?= htmlspecialchars($config['manifestPath']) ?>">
<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">
<meta name="apple-mobile-web-app-title" content="<?= htmlspecialchars($config['appName']) ?>">
<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://cdn.jsdelivr.net/npm/html5-qrcode@2.3.8/html5-qrcode.min.js"></script>
<link rel="stylesheet" href="/mobile/shared/base.css">
<?php foreach ($config['additionalStylesheets'] as $sheet): ?>
<link rel="stylesheet" href="<?= htmlspecialchars($sheet) ?>">
<?php endforeach; ?>
<script>
window.TT_CONFIG = <?= json_encode($JSGlobals ?? []) ?>;
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
'primary': '#005384',
'secondary': '#fac41b',
},
}
}
};
</script>
</head>
<body class="transition-colors duration-300 overflow-hidden">
<div id="app" class="h-screen w-screen overflow-hidden antialiased">
<div class="flex items-center justify-center h-full bg-slate-100 dark:bg-slate-900">
<div class="text-center">
<img src="/assets/images/xinon-full-transparent.png" class="h-12 mx-auto mb-4 dark:hidden">
<img src="/assets/images/xinon-full-transparent-white.png" class="h-12 mx-auto mb-4 hidden dark:block">
<div class="animate-pulse text-slate-500 dark:text-slate-400">Lädt...</div>
</div>
</div>
</div>
<script type="module" src="<?= htmlspecialchars($config['appJsPath']) ?>"></script>
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('<?= htmlspecialchars($config['swPath']) ?>')
.then(reg => console.log('SW registered:', reg.scope))
.catch(err => console.log('SW registration failed:', err));
});
}
</script>
</body>
</html>

View File

@@ -1,78 +1,10 @@
<?php
/**
* Warehouse Stocktake PWA View Template
*
* This is the HTML shell for the Warehouse Stocktake PWA.
* The Vue application is loaded via ES modules.
*/
?>
<!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>Lager Inventur</title>
<link rel="shortcut icon" href="/assets/images/favicon.ico">
<!-- PWA Configuration -->
<link rel="manifest" href="/mobile/warehouse-stocktake/manifest.json">
<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">
<meta name="apple-mobile-web-app-title" content="Inventur">
<!-- External Libraries (CDN) -->
<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://cdn.jsdelivr.net/npm/html5-qrcode@2.3.8/html5-qrcode.min.js"></script>
<!-- Shared Styles -->
<link rel="stylesheet" href="/mobile/shared/base.css">
<link rel="stylesheet" href="/mobile/warehouse-stocktake/app.css">
<!-- App Configuration -->
<script>
window.TT_CONFIG = <?= json_encode($JSGlobals ?? []) ?>;
// Tailwind configuration
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
'primary': '#005384',
'secondary': '#fac41b',
},
}
}
};
</script>
</head>
<body class="transition-colors duration-300 overflow-hidden">
<div id="app" class="h-screen w-screen overflow-hidden antialiased">
<!-- Loading state while Vue initializes -->
<div class="flex items-center justify-center h-full bg-slate-100 dark:bg-slate-900">
<div class="text-center">
<img src="/assets/images/xinon-full-transparent.png" class="h-12 mx-auto mb-4 dark:hidden">
<img src="/assets/images/xinon-full-transparent-white.png" class="h-12 mx-auto mb-4 hidden dark:block">
<div class="animate-pulse text-slate-500 dark:text-slate-400">Lädt...</div>
</div>
</div>
</div>
<!-- Load Vue app as ES module -->
<script type="module" src="/mobile/warehouse-stocktake/app.js"></script>
<!-- Register Service Worker -->
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/mobile/warehouse-stocktake/sw.js')
.then(reg => console.log('SW registered:', reg.scope))
.catch(err => console.log('SW registration failed:', err));
});
}
</script>
</body>
</html>
$appConfig = [
'title' => 'Lager Inventur',
'appName' => 'Inventur',
'manifestPath' => '/mobile/warehouse-stocktake/manifest.json',
'appJsPath' => '/mobile/warehouse-stocktake/app.js',
'swPath' => '/mobile/warehouse-stocktake/sw.js',
'additionalStylesheets' => ['/mobile/warehouse-stocktake/app.css'],
];
require __DIR__ . '/Base.php';

View File

@@ -30,6 +30,7 @@
.invoice-details td {
text-align: left;
white-space: nowrap;
}
.invoice-details td:first-child {