Eli Ribble
31947c848a
It's not strictly HTML, so that's just correct. This is just worth doing while building the new TypeScript bundle
110 lines
3.7 KiB
HTML
110 lines
3.7 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>{{ template "title" . }} - Nidus Sync</title>
|
|
<link href="{{ bundlePathCSS }}" rel="stylesheet" />
|
|
<!-- Fontawesome Icons -->
|
|
<link rel="stylesheet" href="/static/vendor/css/bootstrap-icons.min.css" />
|
|
<link rel="icon" href="/static/ico/favicon-sync.ico" type="image/x-icon" />
|
|
<script src="/static/js/events.js"></script>
|
|
<script src="{{ bundlePathJS }}" defer></script>
|
|
{{ block "extraheader" . }}{{ end }}
|
|
<script>
|
|
const USER = {{ .User.AsJSON|json }};
|
|
SSEManager.subscribe("*", function (e) {
|
|
if (e.type != "heartbeat") {
|
|
updateUserState();
|
|
}
|
|
});
|
|
document.addEventListener("alpine:init", () => {
|
|
Alpine.store("user", USER);
|
|
})
|
|
function restoreLocalStorage() {
|
|
const expanded = localStorage.getItem("sidebar.expanded");
|
|
if (expanded == "false") {
|
|
document.getElementById("sidebar").classList.add("collapsed");
|
|
document.getElementById("content").classList.add("expanded");
|
|
} else {
|
|
document.getElementById("sidebar").classList.remove("collapsed");
|
|
document.getElementById("content").classList.remove("expanded");
|
|
localStorage.setItem("sidebar.expanded", "true");
|
|
}
|
|
}
|
|
function setTooltipsForSidebar() {
|
|
const sidebarTooltips = document.querySelectorAll(
|
|
'#sidebar [data-bs-toggle="tooltip"]',
|
|
);
|
|
const isExpanded = document
|
|
.getElementById("content")
|
|
.classList.contains("expanded");
|
|
sidebarTooltips.forEach((t) => {
|
|
const tooltip = bootstrap.Tooltip.getOrCreateInstance(t);
|
|
if (isExpanded) {
|
|
tooltip.enable();
|
|
} else {
|
|
tooltip.disable();
|
|
}
|
|
});
|
|
}
|
|
async function updateUserState() {
|
|
const response = await fetch("/api/user/self");
|
|
const data = await response.json();
|
|
// Update properties instead of replacing the whole store which leverages Alpine's reactivity
|
|
const store_user = Alpine.store("user");
|
|
Object.keys(data).forEach(key => {
|
|
store_user[key] = data[key];
|
|
});
|
|
}
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
var popoverTriggerList = [].slice.call(
|
|
document.querySelectorAll('[data-bs-toggle="popover"]'),
|
|
);
|
|
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
|
|
return new bootstrap.Popover(popoverTriggerEl);
|
|
});
|
|
console.log("Initialized ", popoverTriggerList.length, " popovers");
|
|
|
|
var tooltipTriggerList = [].slice.call(
|
|
document.querySelectorAll('[data-bs-toggle="tooltip"]'),
|
|
);
|
|
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
|
|
let t = new bootstrap.Tooltip(tooltipTriggerEl);
|
|
return t;
|
|
});
|
|
console.log("Initialized ", tooltipTriggerList.length, " tooltips");
|
|
restoreLocalStorage();
|
|
setTooltipsForSidebar();
|
|
});
|
|
</script> {{ if not .Config.IsProductionEnvironment }}
|
|
<script src="/.flogo/injector.js"></script>
|
|
{{ end }}
|
|
</head>
|
|
<body>
|
|
{{ template "sync/component/icons.html" }}
|
|
<div class="d-flex">
|
|
{{ if .User }}
|
|
{{ template "sync/component/sidebar.html" . }}
|
|
{{ end }}
|
|
</div>
|
|
|
|
<div id="content">
|
|
{{ template "content" . }}
|
|
</div>
|
|
<div id="flogo"></div>
|
|
<script src="/static/vendor/js/bootstrap.bundle.min.js"></script>
|
|
<script>
|
|
document.getElementById("sidebarToggle").addEventListener("click", () => {
|
|
const sidebar = document.getElementById("sidebar");
|
|
sidebar.classList.toggle("collapsed");
|
|
document.getElementById("content").classList.toggle("expanded");
|
|
setTooltipsForSidebar();
|
|
localStorage.setItem(
|
|
"sidebar.expanded",
|
|
(!sidebar.classList.contains("collapsed")).toString(),
|
|
);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|