g4borg/miniweb
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: using word depot in rear instead of admin

Browse Source
This commit is contained in:
Gabor Körber
2024-07-20 09:34:51 +02:00
parent a26e17a064
commit 966291dbd9
38 changed files with 1112 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

164
templates/depot/base.jinja Normal file
View File

@@ -0,0 +1,164 @@
<!DOCTYPE html>
<html lang="{{ language_code|none('en-us') }}" dir="{{ LANGUAGE_BIDI|yesno('rtl,ltr,auto') }}">
<head>
<title>{% block title %}{{ title|none('Admiral') }}{% endblock %}</title>
{% include "fomantic.html" %}
<link rel="stylesheet" type="text/css" href="/static/rear/depot.css">
{% block extrastyle %}{% endblock %}
{% block extrahead %}{% endblock %}
{% block responsive %}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{% endblock %}
{% block blockbots %}
<meta name="robots" content="NONE,NOARCHIVE">
{% endblock %}
</head>
<body>
{% block body %}
{% block header %}
<header id="header" class="ui small inverted top fixed main menu">
<a class="launch icon item">
<i class="content icon"></i>
</a>
<div class="item" id="branding">
{% block branding %}Miniweb{% endblock %}
</div>
<div class="right menu">
{% block usertools %}
<div class="item">Documentation</div>
<div class="icon item"><i class="tools link icon"></i></div>
{% endblock usertools %}
<div class="item">
<a class="ui blue image label">
<img src="/static/rear/teddy_bear.png">
Person
<div class="detail">Admiral</div>
</a>
</div>
<div class="icon item">
<form id="logout-form" method="post" action="{{ url('depot:logout') }}">
<i class="power link icon" style="float: none;"></i>
</form>
</div>
</div>
</header>
{% endblock %}
{% block sidebar %}
<div class="ui vertical sidebar left visible overlay" id="main_sidemenu">
<div class="ui vertical inverted fluid menu">
<div class="item"><a href="{{depot_url}}">
<i class="big d20 dice icon" style="float: none;"></i>
<b>Administration</b>
</a>
</div>
<div class="item">
<div class="ui hidden right aligned search input" id="search">
<div class="ui inverted transparent icon input">
<input class="prompt" type="text" placeholder="Filter...">
<i class="search link icon" data-content="Search UI"></i>
</div>
<div class="results"></div>
</div>
</div>
<div class="item">
<div class="header">General</div>
<div class="menu">
<a class="item" href="#">
Introduction
</a>
<a class="item" href="#">
Status
</a>
<a class="item" href="#">
Settings
</a>
</div>
</div>
{% if sections %}
{% for section in sections %}
<div class="item">
<i class="cog link icon" href="{{ section.section_url }}"></i>
<div class="header">{{ section.name }} </div>
<div class="menu">
{% for model in section.models %}
<div
class="item model-{{ model.key }}{% if model.admin_url in request.path|urlencode %} current-model{% endif %}">
{% if model.model_url %}
<a href="{{ model.model_url }}" hx-get="{{ model.model_url }}" hx-target="#main" hx-push-url="true" {% if
model.admin_url in request.path|urlencode %} aria-current="page" {% endif %}>{{ model.name }}</a>
{% else %}
<span>{{ model.name }}</span>
{% endif %}
{% if model.add_url %}<i class="plus link icon" hx-get="{{ model.add_url }}" hx-target="#main"
hx-push-url="true">
{% if captions %}<a href="{{ model.add_url }}" class="addlink">{{ translate( 'Add') }}</a>{% endif %}</i>
{% endif %}
{% endfor %}
</table>
</div>
</div>
</div>
{% endfor %}
{% endif %}
</div>
</div>
{% endblock sidebar %}
<div class="pusher pushover" id="main_content">
<main id="main">
{% block content %}
{% endblock content %}
</main>
</div>
{% endblock body %}
{% block bodyjs %}
<script src="/static/htmx/htmx.min.js"></script>
<script src="/static/hyperscript/hyperscript.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#main_sidemenu').sidebar({
transition: 'overlay',
dimPage: false,
closable: false,
onHide: function () {
$('#main_content').removeClass('pushover');
},
onShow: function () {
// This function is called when the sidebar is visible
$('#main_content').addClass('pushover');
}
}).sidebar('attach events', '.launch.icon.item').sidebar("show");
});
</script>
{% endblock bodyjs %}
</body>
</html>

2
templates/depot/base_hx.jinja Normal file
View File

@@ -0,0 +1,2 @@
{% block content %}
{% endblock content %}

47
templates/depot/dashboard.jinja Normal file
View File

@@ -0,0 +1,47 @@
<div class="ui grid">
<div class="row">
<div class="column padding-reset">
<div id="jumbotron" class="ui huge message page grid">
<h1 class="ui huge header">Hello World!</h1>
<p>This is the example placeholder that should become the welcoming dashboard for the admin.
It should show various statistics and also a detailed overview of all your models.
This Dashboard however has a low priority to be completed, so I started filling it with whatever
came into my mind.
</p>
</div>
</div>
</div>
</div>
<div class="ui page grid">
<div class="three column row">
<div class="column">
<h2 class="ui header">Axum</h2>
<p>Selecting from all the backend frameworks in rust, axum seemed like the most logical choice. While there
are plenty of good frameworks available, axum being close to tokio allows to rely on the most famous
async framework, which also powers great other crates like tower and hyper.</p>
<a class="ui small icon button" href="https://github.com/tokio-rs/axum" target="_blank">More Details <i
class="angle double right icon"></i></a>
</div>
<div class="column">
<h2 class="ui header">Jumbotron</h2>
<p>A jumbotron is a big box which is used for calling extra attention to some special content. The above
element was achieved by making use of Fomantic's messaging component. Click the button below for
information on Fomantic's message syntax.</p>
<a class="ui small icon button" href="https://fomantic-ui.com/collections/message.html" target="_blank">More
Details <i class="angle double right icon"></i></a>
</div>
<div class="column">
<h2 class="ui header">Django Admin</h2>
<p>Django was the inspiration to make this, but it has since changed into it's own project, where I have to
learn more frontend work. I like Django in python, even though there are more modern frameworks
available, because usually web projects end up using most of the framework anyway, so it is only one
dependency to maintain. Also, the most important thing in Django is the Admin, which I here try to
reproduce.</p>
<a class="ui small icon button" href="https://www.djangoproject.com/" target="_blank">More
Details <i class="angle double right icon"></i></a>
</div>
</div>
</div>

41
templates/depot/depot.jinja Normal file
View File

@@ -0,0 +1,41 @@
{% if sections %}
{% for section in sections %}
<div
class="section-{{ section.key }} module{% if section.section_url in request.path|urlencode %} current-section{% endif %} ui short scrolling container">
<table class="ui very compact celled table head stuck unstackable">
<caption>
<a href="{{ section.section_url }}" class="section"
title="Models in the {{ name }} Section">{{ section.name }}</a>
</caption>
{% for model in section.models %}
<tr class="model-{{ model.key }}{% if model.model_url in request.path|urlencode %} current-model{% endif %}">
{% if model.model_url %}
<th scope="row"><a href="{{ model.model_url }}" {% if model.model_url in request.path|urlencode %}
aria-current="page" {% endif %}>{{ model.name }}</a></th>
{% else %}
<th scope="row">{{ model.name }}</th>
{% endif %}
{% if model.add_url %}
<td><a href="{{ model.add_url }}" class="addlink">{{ translate( 'Add') }}</a></td>
{% else %}
<td></td>
{% endif %}
{% if model.model_url and show_changelinks %}
{% if model.view_only %}
<td><a href="{{ model.model_url }}" class="viewlink">{{ translate( 'View') }}</a></td>
{% else %}
<td><a href="{{ model.model_url }}" class="changelink">{{ translate( 'Change') }}</a></td>
{% endif %}
{% elif show_changelinks %}
<td></td>
{% endif %}
</tr>
{% endfor %}
</table>
</div>
{% endfor %}
{% else %}
<p>{{ translate( 'You don’t have permission to view or edit anything.') }}</p>
{% endif %}

139
templates/depot/django_base.html Normal file
View File

@@ -0,0 +1,139 @@
<!DOCTYPE html>
{% set is_nav_sidebar_enabled = true %}
<html lang="{{ language_code|default(" en-us") }}" dir="{{ LANGUAGE_BIDI|yesno('rtl,ltr,auto') }}">
<head>
<title>{% block title %}{% endblock %}</title>
<link rel="stylesheet" href="/static/django_admin/css/combined.css">
{% block dark_mode_vars %}<!-- would contain css for dark mode in django. -->{% endblock %}
{% block extrastyle %}{% endblock %}
{% block extrahead %}{% endblock %}
{% block responsive %}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{% endblock %}
{% block blockbots %}
<meta name="robots" content="NONE,NOARCHIVE">
{% endblock %}
</head>
<body class="{% if is_popup %}popup {% endif %}{% block bodyclass %}{% endblock %}" data-admin-utc-offset="{# now(" Z")
#}">
<a href="#content-start" class="skip-to-content-link">{{ translate('Skip to main content') }}</a>
<!-- Container -->
<div id="container">
{% if not is_popup %}
<!-- Header -->
{% block header %}
<header id="header">
<div id="branding">
{% block branding %}{% endblock %}
</div>
{% block usertools %}
{% if has_permission %}
<div id="user-tools">
{% block welcome_msg %}
{{ translate('Welcome,') }}
<strong>{{ user.get_short_name or user.get_username }}</strong>.
{% endblock %}
{% block userlinks %}
{% if site_url %}
<a href="{{ site_url }}">{{ translate('View site') }}</a> /
{% endif %}
{% if user.is_active and user.is_staff %}
{% set docsroot = url('django-admindocs-docroot') %}
{% if docsroot %}
<a href="{{ docsroot }}">{{ translate('Documentation') }}</a> /
{% endif %}
{% endif %}
{% if user.has_usable_password %}
<a href="{{ url('admin:password_change') }}">{{ translate('Change password') }}</a> /
{% endif %}
<form id="logout-form" method="post" action="{{ url('admin:logout') }}">
{{ csrf_token() }}
<button type="submit">{{ translate('Log out') }}</button>
</form>
{% include "admin/color_theme_toggle.html" %}
{% endblock %}
</div>
{% endif %}
{% endblock %}
{% block nav_global %}{% endblock %}
</header>
{% endblock %}
<!-- END Header -->
{% block nav_breadcrumbs %}
<nav aria-label="{{ translate('Breadcrumbs') }}">
{% block breadcrumbs %}
<div class="breadcrumbs">
<a href="{{ url( 'admin:index') }}">{{ translate('Home') }}</a>
{% if title %} &rsaquo; {{ title }}{% endif %}
<div>
{% for x in y %}
{% for a in b %}
{% endfor %}
{% endfor %}
</div>
</div>
{% endblock %}
</nav>
{% endblock %}
{% endif %}
<div class="main" id="main">
{% if not is_popup and is_nav_sidebar_enabled %}
{% block nav_sidebar %}
{% include "admin/nav_sidebar.html" %}
{% endblock %}
{% endif %}
<main id="content-start" class="content" tabindex="-1">
{% block messages %}
{% if messages %}
<ul class="messagelist">{% for message in messages %}
<li{% if message.tags %} class="{{ message.tags }}" {% endif %}>{{ message|capfirst }}</li>
{% endfor %}
</ul>
{% endif %}
{% endblock messages %}
<!-- Content -->
<div id="content" class="{% block coltype %}colM{% endblock %}">
{% block pretitle %}{% endblock %}
{% block content_title %}{% if title %}<h1>{{ title }}</h1>{% endif %}{% endblock %}
{% block content_subtitle %}{% if subtitle %}<h2>{{ subtitle }}</h2>{% endif %}{% endblock %}
{% block content %}
{% block object_tools %}{% endblock %}
{{ content }}
{% endblock %}
{% block sidebar %}{% endblock %}
<br class="clear">
</div>
<!-- END Content -->
{% block footer %}<div id="footer"></div>{% endblock %}
</main>
</div>
</div>
<!-- END Container -->
<!-- SVGs -->
<svg xmlns="http://www.w3.org/2000/svg" class="base-svgs">
<symbol viewBox="0 0 24 24" width="1rem" height="1rem" id="icon-auto">
<path d="M0 0h24v24H0z" fill="currentColor" />
<path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2V4a8 8 0 1 0 0 16z" />
</symbol>
<symbol viewBox="0 0 24 24" width="1rem" height="1rem" id="icon-moon">
<path d="M0 0h24v24H0z" fill="currentColor" />
<path
d="M10 7a7 7 0 0 0 12 4.9v.1c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2h.1A6.979 6.979 0 0 0 10 7zm-6 5a8 8 0 0 0 15.062 3.762A9 9 0 0 1 8.238 4.938 7.999 7.999 0 0 0 4 12z" />
</symbol>
<symbol viewBox="0 0 24 24" width="1rem" height="1rem" id="icon-sun">
<path d="M0 0h24v24H0z" fill="currentColor" />
<path
d="M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05 3.515 4.93zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121zm2.121-14.85l1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z" />
</symbol>
</svg>
<!-- END SVGs -->
</body>
</html>

10
templates/depot/index.html Normal file
View File

@@ -0,0 +1,10 @@
{% extends "depot/base.jinja" %}
{% block content %}
{% include "depot/dashboard.jinja" %}
<div>
Some text
another text
Third text
</div>
{% endblock %}

13
templates/depot/items/item_change.jinja Normal file
View File

@@ -0,0 +1,13 @@
{% extends base|none("admin/base.jinja") %}
{% block content %}
<div id="message-box-area" class="ui message" _="init wait 3s then transition opacity to 0 then remove me">
Hi there.
</div>
<div class="ui container">
<h1>Update {{item_model.name}} in {{item_info.name}}</h1>
{% set fields = item_info.fields %}
{% set form = { 'action': item.change_url, 'method': 'PATCH' } %}
{% include "/admin/items/item_change_form.jinja" %}
</div>
{% endblock content %}

29
templates/depot/items/item_change_form.jinja Normal file
View File

@@ -0,0 +1,29 @@
<!--noformat-->
<form class="ui form"
hx-target="main"
{% if form.method|upper == 'POST' or not form.method %}
hx-post="{{form.action}}"
{% elif form.method|upper == 'GET' %}
hx-get="{{form.action}}"
{% elif form.method|upper == 'PATCH' %}
hx-patch="{{form.action}}"
{% elif form.method|upper == 'PUT' %}
hx-put="{{form.action}}"
{% else %}
unknown-form-method={{form.method}}
{% endif %}>
{% from "/admin/items/items.jinja" import field_widget %}
{% for field_name, field_defs in fields %}
{% if item %}
{% set field_value = item.fields[field_name]|none("") %}
{% else %}
{% set field_value = "" %}
{% endif %}
<div class="field">
{{ field_widget(field_name, field_defs, field_value) }}
</div>
{% endfor %}
<button class="ui button" type="submit">Create</button>
</form>
<!--noformat-->

17
templates/depot/items/item_create.jinja Normal file
View File

@@ -0,0 +1,17 @@
{% extends base|none("admin/base.jinja") %}
{% block content %}
<div class="ui container">
<h1>Create {{item_model.name}} in {{item_info.name}}</h1>
{% block navigation_bar %}
<div class="ui container">
<button hx-get="{{ item_model.admin_url }}" hx-target="#main" hx-push-url="true">List Items</button>
</div>
{% endblock %}
{% set fields = item_info.fields %}
{% set form = { 'action': item_model.add_url } %}
{% include "/admin/items/item_change_form.jinja" %}
</div>
{% endblock content %}

11
templates/depot/items/item_detail.jinja Normal file
View File

@@ -0,0 +1,11 @@
{% extends base|none("admin/base.jinja") %}
{% block content %}
{% if item %}
{{item.fields}}
{% else %}
No Item found.
{% endif %}
{% endblock content %}

86
templates/depot/items/item_list.jinja Normal file
View File

@@ -0,0 +1,86 @@
{% extends base|none("admin/base.jinja") %}
{% block content %}
<div class="ui container">
<h1>List of {{ item_info.name }}</h1>
{% block navigation_bar %}
<div class="ui container">
<button hx-get="{{ item_model.add_url }}" hx-target="#main" hx-push-url="true">Create New</button>
</div>
{% endblock %}
{% block search_bar %}
<div class="ui icon input">
<input type="text" placeholder="Search...">
<i class="circular search link icon"></i>
</div>
{% endblock %}
{% if item_list %}
{% set item_keys = item_info.display_list or item_list|table_keys %}
{% if item_info.lookup_key in item_keys %}
{% set primary_key = item_info.lookup_key %}
{% endif %}
<div class="ui basic container">
<table class="ui very compact celled table head stuck unstackable">
<caption>{{ item_info.name }}</caption>
<thead>
<tr>
<th class="collapsing grey"></th>
{% for key in item_keys %}
{% if key==primary_key %}
<th class="blue"><i class="key icon"></i>
{{ key|capitalize }}
</th>
{% else %}
<th>{{ key|capitalize }}</th>
{% endif %}
{% endfor %}
</tr>
</thead>
<tbody>
{% for item in item_list %}
<tr>
<td class="collapsing">
<div class="ui buttons">
<button class="ui compact icon button left attached" {% if item.detail_url %} hx-get="{{item.detail_url}}"
hx-target="#main" hx-push-url="true" {% endif %}>
<i class="eye icon"></i>
</button>
<button class="ui compact icon button right attached" {% if item.change_url %}
hx-get="{{item.change_url}}" hx-target="#main" hx-push-url="true" {% endif %}>
<i class="edit icon"></i>
</button>
</div>
</td>
{% for key in item_keys %}
{% if key==primary_key %}
<td class="selectable warning">{% if item.change_url %}<a href="{{item.change_url}}"
hx-get="{{item.change_url}}" hx-target="#main" hx-push-url="true">{{
item.fields[key] }}</a>{%
else %}{{item.fields[key] }}{% endif %}</td>
{% else %}
<td>{{ item.fields[key] }}</td>{% endif %}
{% endfor %}
</tr>
{% endfor %}
</tbody>
<tfoot>
</tfoot>
</table>
</div>
</div>
{% else %}
No Items found.
{% endif %}
{% endblock content %}

15
templates/depot/items/items.jinja Normal file
View File

@@ -0,0 +1,15 @@
<!--noformat-->
{% macro field_widget(name, definitions, value) -%}
{% set field = {
'type': definitions.type,
'name': name,
'value': value,
'placeholder': definitions.placeholder,
'label': definitions.label,
'readonly': definitions.readonly,
'required': definitions.required,
'options': definitions.options,
}
%}
{% include definitions.widget %}
{%- endmacro %}

43
templates/depot/login.html Normal file
View File

@@ -0,0 +1,43 @@
<html>
<head>
<title>Login</title>
<style>
label {
display: block;
margin-bottom: 5px;
}
</style>
</head>
<body>
<ul>
{% for message in messages %}
<li>
<span><strong>{{ message }}</strong></span>
</li>
{% endfor %}
</ul>
<form method="post">
<fieldset>
<legend>User login</legend>
<p>
<label for="username">Username</label>
<input name="username" id="username" value="admin" />
</p>
<p>
<label for="password">Password</label>
<input name="password" id="password" type="password" value="admin" />
</p>
</fieldset>
<input type="submit" value="login" />
{% if next %}
<input type="hidden" name="next" value="{{next}}" />
{% endif %}
</form>
</body>
</html>

8
templates/depot/widgets/checkbox_toggle.jinja Normal file
View File

@@ -0,0 +1,8 @@
<div class="ui toggle checkbox">
<!--noformat-->
<input type="checkbox"
name="{{ field.name }}"
{% if field.value %}checked="checked" {% endif %}>
<label>{{field.label or field.name|capitalize}}</label>
<!--noformat-->
</div>

5
templates/depot/widgets/input_text.jinja Normal file
View File

@@ -0,0 +1,5 @@
<div class="ui input {% if 'disabled' in field.options and field.options.disabled %}disabled{% endif %} inline field">
<label>{{field.label or field.name|capitalize}}</label>
<input type="{{ field.type|none('text') }}" name="{{ field.name }}" value="{{ field.value }}"
placeholder="{{field.placeholder}}">
</div>

12
templates/depot/widgets/input_textarea.jinja Normal file
View File

@@ -0,0 +1,12 @@
<div class="ui input {% if 'disabled' in field.options and field.options.disabled %}disabled{% endif %} inline field">
<label>{{ field.label or field.name|capitalize }}</label>
<!--noformat-->
<textarea name="{{ field.name }}" {% if field.placeholder %}placeholder="{{ field.placeholder }}"{% endif %}
{% for field_name in ['rows', 'cols', 'maxlength', 'minlength', 'wrap', 'autofocus'] %}
{% if field_name in field.options %}{{field_name}}="{{ field.options[field_name] }}" {% endif %}
{% endfor %}
{% if field.required %}required{% endif %}
{% if field.readonly %}readonly{% endif %}
{% if "disabled" in field.options and field.options.disabled %}disabled{% endif %}
>{{ field.value }}</textarea>
</div>

8
templates/depot/widgets/password_change.jinja Normal file
View File

@@ -0,0 +1,8 @@
<div class="ui action input inline field">
<label>{{field.label or field.name|capitalize}}</label>
<input type="text" value="{{field.value}}" readonly="readonly">
<button class="ui teal right labeled icon button" hx-disable>
<i class="key icon"></i>
Set Password...
</button>
</div>

8
templates/depot/widgets/select_labeled.jinja Normal file
View File

@@ -0,0 +1,8 @@
<div class="ui labeled input">
<div class="ui label">{{field.label or field.name|capitalize}}</div>
<select class="ui selection dropdown">
{% for value, label in field.value %}
<option value="{{value}}">{{label}}</option>
{% endfor %}
</select>
</div>