jmarya/azube
jmarya/azube
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

htmx single page application + work

Browse source
This commit is contained in:
JMARyA 2024-12-05 17:03:42 +01:00
parent 7a70163e76
commit 73e019de9a
Signed by: jmarya
GPG key ID: 901B2ADDF27C2263
10 changed files with 150 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
core/templates/component/report.html
View file

@ -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>

5
core/templates/header.html
View file

@ -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>

19
core/templates/index.html
View file

@ -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>

20
core/templates/report.html
View file

@ -1,13 +1,4 @@
<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">
@ -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
View 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">
&#9776;
</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>

26
core/templates/write.html
View file

@ -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>

10
core/templatetags/markdown.py Normal file
View file

@ -0,0 +1,10 @@
from django import template
import markdown
import bleach
register = template.Library()
@register.filter(name="markdown")
def markdown_tag(value):
return markdown.markdown(bleach.clean(value, tags=[], attributes=[]))

36
core/util.py
View file

@ -1,5 +1,9 @@
import datetime
from django.template.loader import render_to_string
from django.shortcuts import render
from django.http import HttpResponse
def next_date(year: int, week: int) -> (int, int):
if week >= 52:
@ -30,3 +34,35 @@ def get_week_range(p_year, p_week):
).date()
lastdayofweek = firstdayofweek + datetime.timedelta(days=6.9)
return firstdayofweek, lastdayofweek
def is_htmx_request(request) -> bool:
return request.headers.get("HX-Request") is not None
def title(t):
return f"""
<script>
document.getElementById('page_title').innerHTML = '{t}';
document.getElementById('page_banner_title').innerHTML = '{t}';
</script>
"""
def htmx_request(request, content_template, vars, page_title):
vars["title"] = title(page_title)
vars["htmx"] = is_htmx_request(request)
main_content = render_to_string(content_template, vars, request=request)
if is_htmx_request(request):
return HttpResponse(main_content, content_type="text/html")
else:
return render(
request,
"shell.html",
{
"title": page_title,
"main_content": main_content,
},
)

12
core/views.py
View file

@ -5,7 +5,9 @@ from core.util import get_week_range, next_date
from .azure_auth import AzureUser
from .models import Berichtsheft
from django.core.paginator import Paginator
from django.template.loader import render_to_string
from core.styles import STYLE
from .util import is_htmx_request, title, htmx_request
import datetime
import json
@ -91,7 +93,7 @@ def write_new_report_get(request):
form = user.get_report_kind_form()
return render(
return htmx_request(
request,
"write.html",
{
@ -105,6 +107,7 @@ def write_new_report_get(request):
"form": form,
"draft": draft,
},
"Neues Berichtsheft",
)
@ -116,7 +119,7 @@ def index(request):
year_now, week_now, _ = datetime.datetime.today().isocalendar()
return render(
return htmx_request(
request,
"index.html",
{
@ -126,6 +129,7 @@ def index(request):
"late_reports": user.late_reports(),
"style": STYLE,
},
"Berichtshefte",
)
@ -159,7 +163,9 @@ def report_detail_page(request, report_id):
if report.user != user.id:
return HttpResponse("Nah", status=401)
return render(request, "report.html", {"report": report})
return htmx_request(
request, "report.html", {"report": report}, f"Berichtsheft {report.num}"
)
from django.shortcuts import get_object_or_404

2
requirements.txt
View file

@ -1,2 +1,4 @@
Django~=4.2.11
psycopg2
markdown
bleach