You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
192 lines
7.1 KiB
192 lines
7.1 KiB
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<meta name="color-scheme" content="light dark" />
|
|
<link rel="stylesheet" href="/css/main.css" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
|
|
<script src="/js/htmx.min.js"></script>
|
|
<!--TODO Vendor this script -->
|
|
<script
|
|
defer
|
|
src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"
|
|
></script>
|
|
<title>{% block title %}Title{% endblock %}</title>
|
|
</head>
|
|
<body
|
|
class="min-h-screen bg-slate-100 text-neutral-900 dark:bg-neutral-900 dark:text-slate-100"
|
|
>
|
|
<header class="top-0 w-full bg-slate-100 border-b border-neutral-600 border-opacity-90 font-sans dark:bg-neutral-900 dark:text-slate-100">
|
|
<nav
|
|
class="mx-auto flex max-w-7xl justify-between gap-2 px-2 py-4 sm:px-6 lg:px-8"
|
|
>
|
|
<div>
|
|
<a
|
|
href="/home"
|
|
class="rounded-md bg-english-violet px-3 py-2 text-sm font-medium text-white"
|
|
>
|
|
Inventory App
|
|
</a>
|
|
</div>
|
|
<div>
|
|
<a
|
|
href="/overview"
|
|
class="rounded-md px-3 py-2 text-sm font-medium text-neutral-900 dark:text-slate-100 hover:bg-gray-700 hover:text-white"
|
|
>
|
|
Overview
|
|
</a>
|
|
<a
|
|
href="/catalog"
|
|
class="rounded-md px-3 py-2 text-sm font-medium text-neutral-900 dark:text-slate-100 hover:bg-gray-700 hover:text-white"
|
|
>
|
|
Catalog
|
|
</a>
|
|
<a
|
|
href="/upload"
|
|
class="rounded-md px-3 py-2 text-sm font-medium text-neutral-900 dark:text-slate-100 hover:bg-gray-700 hover:text-white"
|
|
>
|
|
Upload
|
|
</a>
|
|
<a
|
|
href="/reports"
|
|
class="rounded-md px-3 py-2 text-sm font-medium text-neutral-900 dark:text-slate-100 hover:bg-gray-700 hover:text-white"
|
|
>
|
|
Reports
|
|
</a>
|
|
<a
|
|
href="/history"
|
|
class="rounded-md px-3 py-2 text-sm font-medium text-neutral-900 dark:text-slate-100 hover:bg-gray-700 hover:text-white"
|
|
>
|
|
History
|
|
</a>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
<main class="bg-slate-100 text-neutral-900 dark:bg-neutral-900 dark:text-slate-100">
|
|
|
|
<!-- Toasts -->
|
|
<div
|
|
x-data="toastsHandler()"
|
|
class="absolute flex flex-col justify-start h-full w-screen z-40 py-4"
|
|
@notice.window="add($event.detail)"
|
|
style="pointer-events:none">
|
|
<template x-for="notice of notices" :key="notice.id">
|
|
<div
|
|
x-show="visible.includes(notice)"
|
|
x-transition:enter="transition ease-in duration-200"
|
|
x-transition:enter-start="transform opacity-0 -translate-y-2"
|
|
x-transition:enter-end="transform opacity-100"
|
|
x-transition:leave="transition ease-out duration-500"
|
|
x-transition:leave-start="transform translate-y-0 opacity-100"
|
|
x-transition:leave-end="transform -translate-y-full opacity-0"
|
|
@click="remove(notice.id)"
|
|
class="rounded mb-4 mx-auto w-56 p-1 flex items-center justify-center text-white shadow-lg font-bold text-sm cursor-pointer"
|
|
:class="{
|
|
'bg-green-500': notice.type === 'info',
|
|
'bg-cerise': notice.type === 'error'
|
|
}"
|
|
style="pointer-events:all"
|
|
x-text="notice.text">
|
|
</div>
|
|
</template>
|
|
</div>
|
|
|
|
<!-- Main -->
|
|
<div x-data="sidebarHandler()">
|
|
<!-- Sidebar -->
|
|
<div class="relative h-auto">
|
|
|
|
<div class="absolute inset-x-0 h-lvh bg-neutral-300 opacity-90 z-10"
|
|
x-show="sidebar.show"
|
|
x-transition:enter="transition ease-in duration-200"
|
|
x-transition:enter-start="transform opacity-0"
|
|
x-transition:enter-end="transform opacity-90"
|
|
x-transition:leave="transition ease-out duration-500"
|
|
x-transition:leave-start="transform opacity-90"
|
|
x-transition:leave-end="transform opacity-0"
|
|
></div>
|
|
|
|
<div class="py-2 px-4 absolute rounded-tl-xl inset-y-0 right-0 bg-slate-100 opacity-100 w-11/12 h-lvh max-w-[40rem] z-20"
|
|
x-show="sidebar.show"
|
|
x-transition:enter="transition ease-in duration-200"
|
|
x-transition:enter-start="transform translate-x-full opacity-0"
|
|
x-transition:enter-end="transform translate-x-0 opacity-100"
|
|
x-transition:leave="transition ease-out duration-500"
|
|
x-transition:leave-start="transform translate-x-0 opacity-100"
|
|
x-transition:leave-end="transform translate-x-full opacity-0"
|
|
>
|
|
<div class="flex">
|
|
<div class="flex-1 inline-flex items-center">
|
|
{% block sidebar_title %}
|
|
<h2 class="text-lg font-semibold uppercase">None</h2>
|
|
{% endblock %}
|
|
</div>
|
|
<button
|
|
class="inline-flex items-center whitespace-nowrap p-2 text-sm font-medium tracking-wide text-neutral-900 transition focus:outline-none focus:ring-4 focus:ring-dark-cyan dark:border-neutral-900 dark:text-slate-100"
|
|
@click="hideSidebar()"
|
|
>
|
|
<span class="sr-only">Close Sidebar</span>
|
|
X
|
|
</button>
|
|
</div>
|
|
{% block sidebar_content %}
|
|
<p>None</p>
|
|
{% endblock %}
|
|
</div>
|
|
|
|
<!-- Content -->
|
|
{% block content %}
|
|
<p>Content Missing</p>
|
|
{% endblock %}
|
|
</div>
|
|
|
|
<script>
|
|
function sidebarHandler() {
|
|
return {
|
|
sidebar: {
|
|
show: false,
|
|
content: 'none',
|
|
},
|
|
showSidebar(content) {
|
|
this.sidebar.show = true;
|
|
this.sidebar.content = content;
|
|
},
|
|
hideSidebar() {
|
|
this.sidebar.show = false;
|
|
}
|
|
}
|
|
}
|
|
function toastsHandler() {
|
|
return {
|
|
notices: [],
|
|
visible: [],
|
|
add(notice) {
|
|
notice.id = Date.now()
|
|
this.notices.push(notice)
|
|
this.fire(notice.id)
|
|
},
|
|
fire(id) {
|
|
this.visible.push(this.notices.find(notice => notice.id == id))
|
|
const timeShown = 2000 * this.visible.length
|
|
setTimeout(() => {
|
|
this.remove(id)
|
|
}, timeShown)
|
|
},
|
|
remove(id) {
|
|
const notice = this.visible.find(notice => notice.id == id)
|
|
const index = this.visible.indexOf(notice)
|
|
this.visible.splice(index, 1)
|
|
const index2 = this.notices.indexOf(notice)
|
|
this.notices.splice(index2, 1)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</main>
|
|
<footer>
|
|
</footer>
|
|
</body>
|
|
</html>
|