Skip to content

Commit 5f32ede

Browse files
h2Entwicklungh2Entwicklung
committed
* add upload button
* add upload progressbar * make more stable
1 parent 9fee6ba commit 5f32ede

File tree

7 files changed

+98
-45
lines changed

7 files changed

+98
-45
lines changed

‎.gitignore‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
/node_modules/
22
/dist/
3-
/output/
3+
/output/*
44
!/output/README.md
5+

‎public/index.html‎

Lines changed: 11 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -73,18 +73,25 @@ <h2 class="text-center mb-4">LookyLooky</h2>
7373
<div id="slideShowContainer" class="d-none">
7474
<div id="slideshow">
7575
<div id="navigator"></div>
76-
<img id="mainImage" src="" alt="Start your slideshow by Uploading your first PDF" class="img-fluid card">
76+
<img id="mainImage" src="" alt="Start your slideshow by Uploading your first PDF" class="img-fluid card">
7777

7878

7979

8080
<hr>
81+
8182
<div id="thumbnails" class="d-flex flex-nowrap"></div>
8283
</div>
8384
</div>
8485

8586
<!-- Drop Zone -->
86-
<div id="dropZone" class="mb-4">PDF hier ablegen oder <a href="#" data-bs-toggle="modal" data-bs-target="#uploadModal">hier klicken</a> zum Hochladen</div>
87-
87+
<div id="dropZone" class="mb-4">
88+
PDF hier ablegen oder
89+
<a href="#" id="uploadLink">hier klicken</a> zum Hochladen
90+
</div>
91+
<input type="file" id="fileInput" style="display: none;" accept="application/pdf">
92+
<button id="uploadButton" class="d-none">Datei hochladen</button>
93+
<div id="progressContainer">
94+
</div>
8895
<!-- Preview Container -->
8996
<div id="previewContainer" class="preview"></div>
9097

@@ -93,23 +100,7 @@ <h2 class="text-center mb-4">LookyLooky</h2>
93100
<p>Made with Love by <a href="https://h2-invent.com" target="_blank">h2 invent</a> in Lörrach</p>
94101

95102
<!-- Upload Modal -->
96-
<div class="modal fade" id="uploadModal" tabindex="-1" aria-labelledby="uploadModalLabel" aria-hidden="true">
97-
<div class="modal-dialog">
98-
<div class="modal-content">
99-
<div class="modal-header">
100-
<h5 class="modal-title" id="uploadModalLabel">PDF hochladen</h5>
101-
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
102-
</div>
103-
<div class="modal-body">
104-
<input type="file" id="fileInput" class="form-control" accept="application/pdf">
105-
</div>
106-
<div class="modal-footer">
107-
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
108-
<button type="button" class="btn btn-primary" id="uploadButton">Hochladen</button>
109-
</div>
110-
</div>
111-
</div>
112-
</div>
103+
113104
</div>
114105
</div>
115106
</body>

‎src/createDokumentList.mjs‎

Lines changed: 21 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -11,20 +11,24 @@ export async function loadDocumentPreviews() {
1111
const documents = getDocumentsFromLocalStorage();
1212

1313
for (const docId in documents) {
14+
let img = null;
1415
const { filename, exportedKey, uploadIds } = documents[docId];
15-
16-
const decryptedBlob = await downloadImage(uploadIds[0], exportedKey);
17-
18-
// Bild im UI anzeigen
19-
const img = document.createElement("img");
20-
img.src = URL.createObjectURL(decryptedBlob);
21-
img.classList.add("pointer", "me-3"); // Abstand zum Text
22-
img.alt = filename;
23-
img.style.width = "100px";
24-
img.addEventListener("click", () => {
25-
loadSlideshow(docId);
26-
});
27-
16+
try {
17+
const decryptedBlob = await downloadImage(uploadIds[0], exportedKey);
18+
19+
// Bild im UI anzeigen
20+
img = document.createElement("img");
21+
img.src = URL.createObjectURL(decryptedBlob);
22+
img.classList.add("pointer", "me-3"); // Abstand zum Text
23+
img.alt = filename;
24+
img.style.width = "100px";
25+
img.addEventListener("click", () => {
26+
loadSlideshow(docId);
27+
});
28+
}catch (e) {
29+
deleteDocumentFromLocalStorage(docId);
30+
continue;
31+
}
2832
// Präsentation starten Button
2933
const startBtn = document.createElement("button");
3034
startBtn.textContent = "Präsentation starten";
@@ -86,7 +90,10 @@ export async function loadDocumentPreviews() {
8690
// Container für Bild und Dateiname
8791
const leftContainer = document.createElement("div");
8892
leftContainer.classList.add("d-flex", "align-items-center");
89-
leftContainer.appendChild(img);
93+
94+
leftContainer.appendChild(img);
95+
96+
9097

9198
const fileNameText = document.createElement("span");
9299
fileNameText.classList.add("fw-bold");

‎src/index.mjs‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -26,18 +26,21 @@ document.getElementById("dropZone").addEventListener("drop", e => {
2626
processPDF(file, encryptionKey, socket);
2727
}
2828
});
29-
document.getElementById('dropZone').addEventListener('click', function() {
30-
document.getElementById('fileInput').click();
31-
});
29+
dropZone.addEventListener("click", () => fileInput.click());
3230

31+
fileInput.addEventListener("change", () => {
32+
const file = fileInput.files[0];
33+
if (file) {
34+
processPDF(file, encryptionKey, socket);
35+
}
36+
});
3337

34-
document.getElementById('uploadButton').addEventListener('click', function() {
35-
const file = document.getElementById('fileInput').files[0];
38+
uploadButton.addEventListener("click", () => {
39+
const file = fileInput.files[0];
3640
if (file) {
3741
processPDF(file, encryptionKey, socket);
3842
} else {
39-
alert('Bitte wählen Sie eine Datei aus.');
43+
alert("Bitte wählen Sie eine Datei aus.");
4044
}
4145
});
42-
4346
init();

‎src/pdfProcessor.mjs‎

Lines changed: 43 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export async function processPDF(file, encryptionKey, socket) {
1414
if (init == false){
1515
socket.on("saved", async (data) => {
1616
uploadIds[data.page] = data.id;
17-
17+
updateProgressBar();
1818
if (!uploadIds.includes(null)) {
1919
await saveDocumentToLocalStorage(file.name, encryptionKey, uploadIds);
2020
loadDocumentPreviews();
@@ -41,7 +41,7 @@ export async function processPDF(file, encryptionKey, socket) {
4141
const previewContainer = document.getElementById("previewContainer");
4242
previewContainer.innerHTML='';
4343
uploadIds = new Array(pdf.numPages).fill(null);
44-
44+
createProgressBar(pdf.numPages);
4545

4646
for (let i = 1; i <= pdf.numPages; i++) {
4747
const page = await pdf.getPage(i);
@@ -84,3 +84,44 @@ export async function processPDF(file, encryptionKey, socket) {
8484

8585
reader.readAsArrayBuffer(file);
8686
}
87+
88+
89+
function createProgressBar(totalPages) {
90+
let progressContainer = document.getElementById("progressContainer");
91+
if (!progressContainer) {
92+
progressContainer = document.createElement("div");
93+
progressContainer.id = "progressContainer";
94+
progressContainer.style.width = "100%";
95+
progressContainer.style.backgroundColor = "#ddd";
96+
progressContainer.style.marginTop = "10px";
97+
document.body.appendChild(progressContainer);
98+
}
99+
100+
let progressBar = document.getElementById("progressBar");
101+
if (!progressBar) {
102+
progressBar = document.createElement("div");
103+
progressBar.id = "progressBar";
104+
progressBar.classList.add('progressbar')
105+
progressBar.style.backgroundColor = "#baae41";
106+
progressContainer.appendChild(progressBar);
107+
}
108+
progressBar.textContent='Upload läuft. Bitte warten';
109+
progressBar.dataset.totalPages = totalPages;
110+
updateProgressBar();
111+
}
112+
113+
function updateProgressBar() {
114+
const progressBar = document.getElementById("progressBar");
115+
if (progressBar) {
116+
const totalPages = parseInt(progressBar.dataset.totalPages);
117+
const uploadedPages = uploadIds.filter(id => id !== null).length;
118+
const progress = (uploadedPages / totalPages) * 100;
119+
progressBar.style.width = `${progress}%`;
120+
if (progress === 100){
121+
progressBar.style.backgroundColor='#369f36';
122+
progressBar.textContent='Upload abgeschlossen. Klicke deine Präsentation unten an.'
123+
document.getElementById('previewContainer').innerHTML= '';
124+
}
125+
}
126+
}
127+

‎src/startSlideshow.mjs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ export async function loadSlideshow(id) {
2525
async function updateMainImage(index) {
2626
if (index < 0 || index >= totalImages) return; // Begrenzung
2727
currentIndex = index;
28+
2829
const decryptedBlob = await downloadImage(uploadIds[currentIndex], exportedKey);
2930
mainImage.src = URL.createObjectURL(decryptedBlob);
3031
socket.emit("changeImage", {docId: id, imageId: uploadIds[currentIndex]});
@@ -99,4 +100,3 @@ function trackMousePosition(event) {
99100
}
100101

101102
mainImage.addEventListener("mousemove", trackMousePosition);
102-
document.addEventListener("DOMContentLoaded", loadSlideshow);

‎src/styles.scss‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,4 +62,14 @@ body {
6262
}
6363
.thumbnail:hover {
6464
border-color: #007bff;
65+
}
66+
.progressbar{
67+
width: 0;
68+
display: flex;
69+
justify-content: center;
70+
padding: 2px;
71+
white-space: nowrap;
72+
overflow: hidden;
73+
text-overflow: ellipsis;
74+
font-weight: bold;
6575
}

0 commit comments

Comments
 (0)