htmx single page application + work
This commit is contained in:
parent
7a70163e76
commit
73e019de9a
GPG key ID:
901B2ADDF27C2263
10 changed files with 150 additions and 58 deletions
|
|
@ -1,4 +1,7 @@
|
|||
<a href="/report/{{ report.id }}" class="{{ style.card }}">
|
||||
<button class="{{ style.card }}"
|
||||
|
||||
hx-get="/report/{{ report.id }}" hx-target="#main_content" hx-push-url="true" hx-swap="innerHTML"
|
||||
>
|
||||
{% if report.is_approved %}
|
||||
<div
|
||||
class="absolute top-0 right-0 translate-y-3 -translate-x-3 bg-green-500 text-white rounded-full w-6 h-6 flex items-center justify-center scale-[1.5]"
|
||||
|
|
@ -6,4 +9,4 @@
|
|||
✓
|
||||
</div>
|
||||
{% endif %} {{ report }}
|
||||
</a>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -1,5 +0,0 @@
|
|||
<header class="w-full bg-red-600 text-white py-4 shadow-md max-h-20 h-full max-h-20">
|
||||
<div class="max-w-4xl {% if center is None or center %}mx-auto{% endif %} px-4">
|
||||
<h1 class="text-2xl font-bold {% if center is None or center %}{% else %}ml-5{% endif %}">{{ title }}</h1>
|
||||
</div>
|
||||
</header>
|
||||
|
|
@ -1,13 +1,4 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>Azube</title>
|
||||
{% include 'head.html' %}
|
||||
</head>
|
||||
<body class="bg-gray-100 min-h-screen">
|
||||
|
||||
{% include 'header.html' with title="Deine Berichtshefte" center=False %}
|
||||
|
||||
<div class="bg-gray-100 min-h-screen">
|
||||
{{ title|safe }}
|
||||
|
||||
{% if late_reports > 1 %}
|
||||
|
||||
|
|
@ -33,9 +24,11 @@
|
|||
{% for report in reports %}
|
||||
|
||||
{% if forloop.first %} {% if report.week != week_now %}
|
||||
<a href="/write" class="{{ style.card }} flex items-center justify-center" title="Neues Berichtsheft">
|
||||
<button class="{{ style.card }} flex items-center justify-center" title="Neues Berichtsheft"
|
||||
hx-get="/write" hx-target="#main_content" hx-push-url="true" hx-swap="innerHTML"
|
||||
>
|
||||
<span class="text-9xl font-bold"> + </span>
|
||||
</a>
|
||||
</button>
|
||||
{% endif %} {% endif %}
|
||||
|
||||
{% include 'component/report.html' with report=report %}
|
||||
|
|
@ -50,5 +43,3 @@
|
|||
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,5 @@
|
|||
<html>
|
||||
<head>
|
||||
<title> Berichtsheft {{ report.num }} </title>
|
||||
{% include 'head.html' %}
|
||||
</head>
|
||||
<body class="bg-gray-50 text-gray-800 font-sans min-h-screen flex flex-col items-center">
|
||||
|
||||
{% with title="Berichtsheft "|add:report.num %}
|
||||
{% include 'header.html' with title="Berichtsheft" %}
|
||||
{% endwith %}
|
||||
|
||||
{{ title|safe }}
|
||||
|
||||
<main class="flex-grow w-full max-w-4xl mx-auto p-6 bg-white shadow-lg rounded-lg mt-6">
|
||||
<div class="mb-4">
|
||||
<p class="text-lg font-medium text-gray-700">
|
||||
|
|
@ -25,14 +16,13 @@
|
|||
<div class="border-t border-gray-200 mt-4 pt-4">
|
||||
<h2 class="text-lg font-medium text-gray-800 mb-2">Content:</h2>
|
||||
<dl class="space-y-2">
|
||||
{% load markdown %}
|
||||
{% for key, value in report.content.items %}
|
||||
<div class="flex justify-between items-start">
|
||||
<dt class="text-sm font-medium text-gray-600">{{ key }}</dt>
|
||||
<dd class="text-sm text-gray-800">{{ value }}</dd>
|
||||
<div class="justify-between items-start">
|
||||
<h4 class="text-sm font-medium text-gray-600">{{ key }}</h4>
|
||||
<span class="text-sm text-gray-800 mb-4">{{ value|markdown|safe }}</span>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</dl>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
67
core/templates/shell.html
Normal file
67
core/templates/shell.html
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
<html>
|
||||
<head>
|
||||
<title id="page_title">{{ title }}</title>
|
||||
{% include 'head.html' %}
|
||||
</head>
|
||||
<body class="bg-gray-50 text-gray-800 min-h-screen">
|
||||
|
||||
<!-- Main wrapper that will hold the header, sidebar, and content -->
|
||||
<div class="flex flex-col min-h-screen">
|
||||
<header class="w-full bg-red-600 text-white flex py-4 shadow-md max-h-20 h-full max-h-20">
|
||||
<button id="menu-toggle" class="text-2xl focus:outline-none ml-5">
|
||||
☰
|
||||
</button>
|
||||
|
||||
<h1 class="text-2xl font-bold {% if center is not None and center %} text-center {% else %}ml-5{% endif %} flex-1" id="page_banner_title">{{ title }}</h1>
|
||||
</header>
|
||||
|
||||
<!-- Main content container with sidebar and main content -->
|
||||
<div class="flex flex-1">
|
||||
<!-- Sidebar -->
|
||||
<div id="sidepanel" class="w-0 transition-all duration-250 ease-in-out bg-red-600 shadow-md text-white">
|
||||
<ul class="space-y-2 font-medium">
|
||||
<li>
|
||||
<button href="#" onclick="toggleSidepanel()" class="rounded-lg lg:bg-transparent flex w-full items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-red-100 dark:hover:bg-red-700 group"
|
||||
hx-get="/" hx-target="#main_content" hx-push-url="true" hx-swap="innerHTML"
|
||||
>
|
||||
<span class="ms-3">Home</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Main content -->
|
||||
<div class="flex-1 p-4" id="main_content">
|
||||
{{ main_content|safe }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Script to toggle the sidebar -->
|
||||
<script>
|
||||
const menuToggle = document.getElementById('menu-toggle');
|
||||
const sidepanel = document.getElementById('sidepanel');
|
||||
|
||||
function toggleSidepanel() {
|
||||
if (sidepanel.classList.contains('w-0')) {
|
||||
sidepanel.classList.remove('w-0');
|
||||
sidepanel.classList.add('w-60');
|
||||
sidepanel.classList.add('p-4');
|
||||
sidepanel.querySelectorAll('button').forEach(button => {
|
||||
button.classList.add('bg-red-700');
|
||||
});
|
||||
} else {
|
||||
sidepanel.classList.add('w-0');
|
||||
sidepanel.classList.remove('w-60');
|
||||
sidepanel.classList.remove('p-4');
|
||||
sidepanel.querySelectorAll('button').forEach(button => {
|
||||
button.classList.remove('bg-red-700');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
menuToggle.addEventListener('click', () => toggleSidepanel());
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,13 +1,7 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>Neues Berichtsheft</title>
|
||||
{% include 'head.html' %}
|
||||
</head>
|
||||
<body class="bg-gray-50 text-gray-800 font-sans min-h-screen flex flex-col items-center">
|
||||
|
||||
{% include 'header.html' with title="Neues Berichtsheft" %}
|
||||
|
||||
<main class="flex-grow w-full max-w-4xl mx-auto p-6 bg-white shadow-lg rounded-lg mt-6">
|
||||
|
||||
{{ title|safe }}
|
||||
|
||||
<div class="mb-6">
|
||||
<p class="text-lg font-medium">{{ user.display_name }}</p>
|
||||
<p class="text-gray-600">
|
||||
|
|
@ -20,8 +14,7 @@
|
|||
|
||||
<form method="post" class="space-y-4">
|
||||
|
||||
{% load set_content %}
|
||||
{% load access %}
|
||||
{% load access set_content %}
|
||||
|
||||
{% for field in form %}
|
||||
<div class="mb-4">
|
||||
|
|
@ -31,13 +24,13 @@
|
|||
|
||||
{% if field.id_for_label == "id_department" %}
|
||||
|
||||
{{ field|set_content:draft.department}}
|
||||
{{ field|set_content:draft.department }}
|
||||
|
||||
{%else%}
|
||||
{% else %}
|
||||
{% with content=draft.content|access:field.id_for_label %}
|
||||
{{ field|set_content:content }}
|
||||
{% endwith %}
|
||||
{%endif%}
|
||||
{% endif %}
|
||||
{% if field.errors %}
|
||||
<p class="text-red-500 text-sm">{{ field.errors|join:", " }}</p>
|
||||
{% endif %}
|
||||
|
|
@ -45,6 +38,7 @@
|
|||
{% endfor %}
|
||||
|
||||
{% csrf_token %}
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
class="w-full bg-red-600 text-white py-2 px-4 rounded-lg shadow hover:bg-red-700 focus:ring focus:ring-red-400">
|
||||
|
|
@ -61,7 +55,7 @@ function updateDraft() {
|
|||
var field = document.getElementById("{{ field.id_for_label }}");
|
||||
formData["{{ field.id_for_label }}"] = field.value;
|
||||
|
||||
{% endfor%}
|
||||
{% endfor %}
|
||||
|
||||
fetch("/draft", {
|
||||
method: 'POST',
|
||||
|
|
@ -127,5 +121,3 @@ setupListeners();
|
|||
</script>
|
||||
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue