marsien/hs3-baza-zasobow-dashboard
1
0
Fork 0
Code Issues 4 Pull requests Projects Releases Packages Wiki Activity Actions

feat: Add basic frontend
Some checks failed
MegaLinter / MegaLinter (pull_request) Has been cancelled
Details
Update website / update (pull_request) Has been cancelled
Details

Browse source
This commit is contained in:
Piotr Gaczkowski 2026-03-24 15:39:18 +01:00
parent 2a2b5973df
commit 170d38ea08
25 changed files with 248 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

160
fegen/template/_base_template.html Normal file
View file

@ -0,0 +1,160 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="description" content="Dashboard" />
<title>Baza Zasobów Hackerspace Trójmiasto</title>
<link rel="shortcut icon" href="static/favicon.ico" />
<!-- Font Awesome CSS -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
/>
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=""
/>
<link rel="stylesheet" href="static/css/style.css" />
<!-- DataTables CSS -->
<link
rel="stylesheet"
href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css"
/>
</head>
<body>
{% block body %}{% endblock body %}
<dialog>
<div>
<input type="radio" id="12mm" name="type" value="12mm" />
<label for="12mm">12mm</label><br />
<input type="radio" id="18mm" name="type" value="18mm" checked />
<label for="18mm">18mm</label><br />
<input
type="radio"
id="12mm_flag"
name="type"
value="12mm_flag"
disabled
/>
<label for="12mm_flag">12mm flag</label><br />
<input type="radio" id="18mm_flag" name="type" value="18mm_flag" />
<label for="18mm_flag">18mm flag</label><br />
<input type="radio" id="18mm_ribbon" name="type" value="18mm_ribbon" />
<label for="18mm_ribbon">18mm ribbon</label><br />
<input
type="radio"
id="24mm_ribbon"
name="type"
value="24mm_ribbon"
disabled
/>
<label for="24mm_ribbon">24mm ribbon</label><br />
<input type="text" id="item_id" name="item_id" value="" />
</div>
<button id="download" autofocus>Download</button>
</dialog>
<footer>
<a href="https://github.com/MartaSien/hs3-baza-zasobow-dashboard"
>Baza zasobów Hackerspace Trójmiasto</a
>
</footer>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<!-- DataTables JS -->
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function () {
$("#dashboardTable").DataTable({ paging: false });
});
</script>
<script type="module">
import { downloadZip } from "https://cdn.jsdelivr.net/npm/client-zip/index.js";
let db_12mm_label_template;
let db_18mm_label_template;
let db_18mm_flag_template;
let db_18mm_ribbon_template;
let prop_input;
async function loadXml(path) {
const response = await fetch(path);
return await response.text();
}
async function initTemplates() {
db_12mm_label_template = await loadXml('static/xml/label_12.xml');
db_18mm_label_template = await loadXml('static/xml/label_18.xml');
db_18mm_flag_template = await loadXml('static/xml/label_18_flag.xml');
db_18mm_ribbon_template = await loadXml('static/xml/label_18_ribbon.xml');
prop_input = await loadXml('static/xml/prop.xml');
}
async function make_label(item_id, template) {
const prop = {
name: "prop.xml",
lastModified: new Date(),
input: prop_input,
};
let label_template;
switch (template) {
case "12mm":
label_template = db_12mm_label_template;
break;
case "18mm":
label_template = db_18mm_label_template;
break;
case "18mm_flag":
label_template = db_18mm_flag_template;
break;
case "18mm_ribbon":
label_template = db_18mm_ribbon_template;
break;
}
const label = label_template.replaceAll("{ITEM_ID}", item_id);
const db_label = {
name: "label.xml",
lastModified: new Date(),
input: label,
};
const blob = await downloadZip([prop, db_label]).blob();
const link = document.createElement("a");
link.href = URL.createObjectURL(blob);
link.download = "hs3_db_label_" + template + "_" + item_id + ".lbx";
link.click();
}
document.addEventListener("DOMContentLoaded", async () => {
await initTemplates();
const dialog = document.querySelector("dialog");
Array.prototype.slice
.call(document.getElementsByTagName("button"))
.forEach((element) => {
if (element.id.startsWith("btn_")) {
element.addEventListener("click", (e) => {
const item_id = e.target.id.replace("btn_", "");
document.getElementById("item_id").value = item_id;
dialog.showModal();
document.getElementById("download").onclick = function () {
const item_id = document.getElementById("item_id").value;
const dialog = document.querySelector("dialog");
const template = document.querySelector("input:checked").id;
make_label(item_id, template);
dialog.close();
};
});
}
});
});
</script>
</body>
</html>