160 lines
5.3 KiB
HTML
160 lines
5.3 KiB
HTML
<!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>
|