andreas/ablage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

moved whole UI to JavaScript

Browse Source
This commit is contained in:
Andreas Schulte
2025-08-27 22:30:00 +02:00
parent da0dfeab46
commit 9fc8b370d0
2 changed files with 96 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
app/assets/index.html
View File

@@ -12,29 +12,11 @@
<script src="/script.js"></script>
</head>
<body>
<a href="/" class="logo"><h1>Ablage</h1></a>
<div id="dropzone" style="display: none">
Drag & drop files here or click to select
</div>
<input
type="file"
id="fileInput"
name="uploadfile"
multiple
style="display: none"
/>
<div id="overallProgressContainer" style="display: none">
<div id="currentFileName"></div>
<progress id="overallProgress" value="0" max="100"></progress>
<div id="overallStatus" class="status"></div>
</div>
<ul id="file-list"></ul>
<div id="sinkholeModeInfo" class="sinkholeModeInfo" style="display: none">
- Sinkhole mode enabled, no files will get listed -
</div>
<a href="/" class="logo">
<h1>Ablage</h1>
</a>
<h3 style="color: red; text-align: center; margin-top: 100px">
We will need JavaScript from here on, sorry...
</h3>
</body>
</html>

117
app/assets/script.js
View File

@@ -30,33 +30,9 @@
}
async function initApp() {
UI.currentFileName = document.getElementById("currentFileName");
UI.dropzone = document.getElementById("dropzone");
UI.fileInput = document.getElementById("fileInput");
UI.fileList = document.getElementById("file-list");
UI.overallProgress = document.getElementById("overallProgress");
UI.overallStatus = document.getElementById("overallStatus");
UI.overallProgressContainer = document.getElementById(
"overallProgressContainer"
);
UI.sinkholeModeInfo = document.getElementById("sinkholeModeInfo");
UI.dropzone.addEventListener("click", () => UI.fileInput.click());
UI.fileInput.addEventListener("change", () => {
if (UI.fileInput.files.length > 0) uploadFiles(UI.fileInput.files);
});
UI.dropzone.addEventListener("dragover", (e) => {
e.preventDefault();
UI.dropzone.style.borderColor = "#0fff50";
});
UI.dropzone.addEventListener("dragleave", () => {
UI.dropzone.style.borderColor = "#888";
});
UI.dropzone.addEventListener("drop", (e) => {
e.preventDefault();
UI.dropzone.style.borderColor = "#888";
if (e.dataTransfer.files.length > 0) uploadFiles(e.dataTransfer.files);
});
addUIElementsToBody();
getUIElements();
addEventListeners();
await loadAppConfig();
appLoop();
@@ -141,6 +117,93 @@
}
}
function addEventListeners() {
UI.dropzone.addEventListener("click", () => UI.fileInput.click());
UI.fileInput.addEventListener("change", () => {
if (UI.fileInput.files.length > 0) uploadFiles(UI.fileInput.files);
});
UI.dropzone.addEventListener("dragover", (e) => {
e.preventDefault();
UI.dropzone.style.borderColor = "#0fff50";
});
UI.dropzone.addEventListener("dragleave", () => {
UI.dropzone.style.borderColor = "#888";
});
UI.dropzone.addEventListener("drop", (e) => {
e.preventDefault();
UI.dropzone.style.borderColor = "#888";
if (e.dataTransfer.files.length > 0) uploadFiles(e.dataTransfer.files);
});
}
function addUIElementsToBody() {
document.body.innerHTML = "";
const aLogo = document.createElement("a");
aLogo.href = "/";
aLogo.className = "logo";
const h1Logo = document.createElement("h1");
h1Logo.textContent = "Ablage";
aLogo.appendChild(h1Logo);
document.body.appendChild(aLogo);
const divDropzone = document.createElement("div");
divDropzone.id = "dropzone";
divDropzone.innerHTML = "Drag & drop files here or click to select";
divDropzone.style.display = "none";
document.body.appendChild(divDropzone);
const fileInput = document.createElement("input");
fileInput.type = "file";
fileInput.id = "fileInput";
fileInput.name = "uploadfile";
fileInput.multiple = true;
fileInput.style.display = "none";
document.body.appendChild(fileInput);
const divOverallProgressContainer = document.createElement("div");
divOverallProgressContainer.id = "overallProgressContainer";
divOverallProgressContainer.style.display = "none";
const divCurrentFileName = document.createElement("div");
divCurrentFileName.id = "currentFileName";
const progressOverall = document.createElement("progress");
progressOverall.id = "overallProgress";
progressOverall.value = 0;
progressOverall.max = 100;
const divOverallStatus = document.createElement("div");
divOverallStatus.id = "overallStatus";
divOverallStatus.className = "status";
divOverallProgressContainer.appendChild(divCurrentFileName);
divOverallProgressContainer.appendChild(progressOverall);
divOverallProgressContainer.appendChild(divOverallStatus);
document.body.appendChild(divOverallProgressContainer);
const ulFileList = document.createElement("ul");
ulFileList.id = "file-list";
document.body.appendChild(ulFileList);
const divSinkholeModeInfo = document.createElement("div");
divSinkholeModeInfo.id = "sinkholeModeInfo";
divSinkholeModeInfo.className = "sinkholeModeInfo";
divSinkholeModeInfo.style.display = "none";
divSinkholeModeInfo.textContent =
"- Sinkhole mode enabled, no files will get listed -";
document.body.appendChild(divSinkholeModeInfo);
}
function getUIElements() {
UI.currentFileName = document.getElementById("currentFileName");
UI.dropzone = document.getElementById("dropzone");
UI.fileInput = document.getElementById("fileInput");
UI.fileList = document.getElementById("file-list");
UI.overallProgress = document.getElementById("overallProgress");
UI.overallStatus = document.getElementById("overallStatus");
UI.overallProgressContainer = document.getElementById(
"overallProgressContainer"
);
UI.sinkholeModeInfo = document.getElementById("sinkholeModeInfo");
}
function humanReadableSize(bytes) {
const units = ["B", "KB", "MB", "GB", "TB"];
let i = 0;