Adds breadcrumbs and navigation, moves QR code to its own page.

This commit is contained in:
Ana Custura 2026-02-18 13:17:22 +00:00
parent d9f4c6d597
commit 947b4ac59a
7 changed files with 93 additions and 27 deletions

View file

@ -79,16 +79,6 @@ def dump_settings(filename: str) -> None:
@app.route('/')
@app.route('/index')
def index():
display_wifi_password = False
wifi_password = get_setting("wifi_password")
if wifi_password:
wifi_ssid = get_setting("ssid")
wifi_encryption_type = "WPA2"
img = qrcode.make(f"WIFI:T:{wifi_encryption_type};S:{wifi_ssid};P:{wifi_password};;")
img.save("app/static/images/wifi_qr_code.png")
display_wifi_password = True
else:
os.remove("app/static/images/wifi_qr_code.png")
enable_chat = get_setting("enable_chat")
enable_app_store = get_setting("enable_app_store")
enable_map_viewer = get_setting("enable_map_viewer")
@ -116,7 +106,7 @@ def index():
"name": name,
"image": url_for("static", filename="images/explore-icon.svg"),
"url": url_for("files", path=""),})
return render_template('index.html', title='Home', get_setting=get_setting, services=service_array, display_wifi_password=display_wifi_password)
return render_template('index.html', title='Home', get_setting=get_setting, services=service_array)
@app.route('/files/', defaults={'path': ''})
@app.route('/files/<path:path>')
@ -237,3 +227,22 @@ def generate_random_deltachat_credentials():
flash(f"Password: {password}")
flash(f"IP: {ip}")
return redirect(url_for("messaging"))
@app.route('/share')
def share():
display_wifi_password = False
wifi_password = get_setting("wifi_password")
if wifi_password:
wifi_ssid = get_setting("ssid")
wifi_encryption_type = "WPA2"
img = qrcode.make(f"WIFI:T:{wifi_encryption_type};S:{wifi_ssid};P:{wifi_password};;")
img.save("app/static/images/wifi_qr_code.png")
display_wifi_password = True
else:
if os.path.exists("app/static/images/wifi_qr_code.png"):
os.remove("app/static/images/wifi_qr_code.png")
return render_template('share.html', get_setting=get_setting, display_wifi_password=display_wifi_password)
@app.route('/about')
def about():
return render_template('about.html', get_setting=get_setting)

9
app/templates/about.html Normal file
View file

@ -0,0 +1,9 @@
{% extends "base.html" %}
{% block content %}
<h1 class="title is-large butter-title">About this {{get_setting('butterbox_name')}}.</h1>
<div class="block" style="align-content: center; text-align: center;">
<p> Some info here about butter and how to create your own.</p>
</div>
{% endblock %}

View file

@ -14,11 +14,34 @@
</head>
<body>
<div class="container">
<div class="header" style="display: inline">
<a href="{{ url_for('index') }}"><img class="image is-32x32" style="display: inline;" src="{{ get_setting('butterbox_logo') }}"></a>
<p style="display: inline; padding-inline-start: 10px;">{{ get_setting('butterbox_name') }}</p>
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a href="/"><img class="image is-32x32" src="{{ get_setting('butterbox_logo') }}"></a>
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-start">
<a href="{{ url_for('share') }}" class="navbar-item">
Share
</a>
<a href="{{ url_for('about') }}" class="navbar-item">
About
</a>
<a href="{{ url_for('admin') }}" class="navbar-item">
Admin
</a>
</div>
</div>
</nav>
<div class="content"> </div>
{% with messages = get_flashed_messages() %}
{% if messages %}

View file

@ -0,0 +1,15 @@
<div class="breadcrumbs">
<nav class="breadcrumb" aria-label="breadcrumbs">
{% set ns = namespace(crumb_path=request.url_root[:-1])%}
{# We use a namespace since jinja 2 variables cannot persist outside loops
The crumb_path var dynamically constructs urls for each breadcrumb based on request.path (removing the trailing slash),
We need to do this for the file viewer, as it can have many nested directories, but works for all other pages. #}
<ul>
{% set breadcrumbs = request.path[1:].split('/') %} {# request.path starts with / #}
{% for crumb in breadcrumbs %}
{% set ns.crumb_path = ns.crumb_path + "/" +crumb %}
<li><a href="{{ ns.crumb_path }}">{{crumb}}</a></li>
{% endfor %}
</ul>
</nav>
</div>

View file

@ -13,13 +13,5 @@
</a>
{% endfor %}
</div>
</hr>
{% if display_wifi_password %}
<div class="block" style="align-content: center; text-align: center;">
<p>Connect to this box with wifi:
<img class="image is-128x128" style="margin: 0 auto" src="{{ url_for('static', filename='images/wifi_qr_code.png') }}">
</p>
</div>
{% endif %}
{% endblock %}

18
app/templates/share.html Normal file
View file

@ -0,0 +1,18 @@
{% extends "base.html" %}
{% block content %}
<h1 class="title is-large butter-title">Share access to {{get_setting('butterbox_name')}}.</h1>
{% if display_wifi_password %}
<div class="block" style="align-content: center; text-align: center;">
<p>Connect to WiFi name: "{{ get_setting('ssid') }}" with password: "{{ get_setting('wifi_password') }}". You can also use the following QR code to join:</p>
<img class="image is-256x256" style="margin: 0 auto" src="{{ url_for('static', filename='images/wifi_qr_code.png') }}">
</div>
{% else %}
<div class="block" style="align-content: center; text-align: center;">
<p>Your WiFi name is "{{ get_setting('ssid') }}". You will be able to join without a password.</p>
</div>
{% endif %}
{% endblock %}

View file

@ -1,8 +1,8 @@
{% extends "base.html" %}
{% block content %}
<h1 class="title is-large butter-title">{{ _('File Viewer') }}</h1>
{% include 'breadcrumbs.html' %}
<h1 class="title is-large butter-title">{{ _('File Viewer') }}</h1>
<div>
<table class="table" style="margin: 0 auto">
<thead>
@ -18,7 +18,7 @@
<tr>
<td><img src="{{ f.icon_url}}"></td>
{% if f.is_dir %}
<td><a href=".{{ f.relative_path}}">{{ f.name}}</a></td>
<td><a href="/{{ request.endpoint}}/{{ f.relative_path}}">{{ f.name}}</a></td>
{% endif %}
{% if f.is_file %}