Make the CSP changes on config

This commit is contained in:
CenTdemeern1 2025-02-03 01:11:29 +01:00
parent 3f9624fe91
commit 5534bc3942
2 changed files with 10 additions and 8 deletions

View file

@ -6,13 +6,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FeDirect</title> <title>FeDirect</title>
<link rel="stylesheet" href="/static/main.css"> <link rel="stylesheet" href="/static/main.css">
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src *;">
</head> </head>
<body> <body>
<script type="module"> <script type="module" src="/static/config.mjs"></script>
Object.assign(globalThis, await import("/static/config.mjs"));
getMainDialog().show(); // Don't show until the page is ready
</script>
<div class="flex-vcenter"> <div class="flex-vcenter">
<dialog id="mainDialog" class="half-width half-height"> <dialog id="mainDialog" class="half-width half-height">
<header class="separator-bottom margin-large-bottom"> <header class="separator-bottom margin-large-bottom">
@ -27,7 +25,7 @@
<center class="half-width"> <center class="half-width">
<ol id="instanceList" class="align-start wfit-content"></ol> <ol id="instanceList" class="align-start wfit-content"></ol>
<br> <br>
<button onclick="showAddInstanceDialog()">Add an instance</button> <button id="showAddInstanceDialog">Add an instance</button>
</center> </center>
</div> </div>
<div class="half-width align-self-start"> <div class="half-width align-self-start">

View file

@ -8,12 +8,16 @@ let reordering = false;
// Dragging code is a heavily modified version of https://stackoverflow.com/a/28962290 // Dragging code is a heavily modified version of https://stackoverflow.com/a/28962290
let elementBeingDragged: HTMLLIElement | undefined; let elementBeingDragged: HTMLLIElement | undefined;
const mainDialog = findDialogOrFail(document.body, "#mainDialog");
const showAddInstanceDialogButton = findButtonOrFail(document.body, "#showAddInstanceDialog");
const detailsDialog = findDialogOrFail(document.body, "#instanceDetails"); const detailsDialog = findDialogOrFail(document.body, "#instanceDetails");
const addDialog = findDialogOrFail(document.body, "#addInstance"); const addDialog = findDialogOrFail(document.body, "#addInstance");
const instanceList = findOlOrFail(document.body, "#instanceList"); const instanceList = findOlOrFail(document.body, "#instanceList");
const saveButton = findButtonOrFail(document.body, "#save"); const saveButton = findButtonOrFail(document.body, "#save");
const reorderButton = findButtonOrFail(document.body, "#reorder"); const reorderButton = findButtonOrFail(document.body, "#reorder");
showAddInstanceDialogButton.addEventListener("click", e => showAddInstanceDialog());
saveButton.addEventListener("click", e => { saveButton.addEventListener("click", e => {
storageManager.save(); storageManager.save();
}); });
@ -25,15 +29,13 @@ reorderButton.addEventListener("click", () => {
reorderButton.innerText = reordering ? "Finish reordering" : "Reorder"; reorderButton.innerText = reordering ? "Finish reordering" : "Reorder";
}); });
export const getMainDialog = () => findDialogOrFail(document.body, "#mainDialog");
const { const {
showInstanceDetailsDialog, showInstanceDetailsDialog,
hideInstanceDetailsDialog, hideInstanceDetailsDialog,
populateInstanceDetailsDialog, populateInstanceDetailsDialog,
} = initializeInstanceDetailsDialog(detailsDialog, () => { }); } = initializeInstanceDetailsDialog(detailsDialog, () => { });
export const { const {
showAddInstanceDialog, showAddInstanceDialog,
hideAddInstanceDialog hideAddInstanceDialog
} = initializeAddInstanceFlow(detailsDialog, addDialog); } = initializeAddInstanceFlow(detailsDialog, addDialog);
@ -41,6 +43,8 @@ export const {
updateInstanceList(); updateInstanceList();
storageManager.addSaveCallback(updateInstanceList); storageManager.addSaveCallback(updateInstanceList);
mainDialog.show();
function updateInstanceList() { function updateInstanceList() {
instanceList.replaceChildren(); // Erase all child nodes instanceList.replaceChildren(); // Erase all child nodes
instanceList.style.listStyleType = reordering ? "\"≡ \"" : "disc"; instanceList.style.listStyleType = reordering ? "\"≡ \"" : "disc";