Added delete video and view selected

index.js

@@ -187,3 +187,27 @@ app.post('/upload', function (req, res) {
 
 	res.redirect('/');
 });
+
+app.post("/delete", async (req, res) => {
+	let video = req.query.video;
+	await fs.rm(video);
+	res.json({ status: 'ok' });
+});
+
+app.get("/selectedvideo", (req, res) => {
+	if (fs.existsSync('/selectedvideo')) {
+		res.text(fs.readFileSync('/selectedvideo').toString());
+	}
+	else {
+		res.json("");
+	}
+});
+
+app.get("/overlayvideo", (req, res) => {
+	if (fs.existsSync('/overlayvideo')) {
+		res.text(fs.readFileSync('/overlayvideo').toString());
+	}
+	else {
+		res.json("");
+	}
+});

public/index.html

@@ -27,34 +27,50 @@
       encType="multipart/form-data">
         <input type="file" name="file" />
         <input type='submit' value='Upload!' />
-    </form>    
+    </form>
+
     <h2>Background video</h2>
     <div id="videos"></div>
+    <div>Currently selected video:</div>
+    <div id="selectedvideo"></div>
+
     <h2>Overlay video</h2>
     <div id="overlayvideos"></div>
     <button id="play" onclick="fetch(`/playoverlay`, { method: 'POST' });">Play Overlay now</button>
+    <div>Currently selected video:</div>
+    <div id="overlayvideo"></div>
+
+    <h2>Delete videos</h2>
+    <div id="deletevideos"></div>
+
     <h2>Projector status 1</h2>
     <div id="projectorstatus1"></div>
+
     <h2>Projector status 2</h2>
     <div id="projectorstatus2"></div>
     <button onclick="fetch(`/startprojector`, { method: 'POST' });">Start projectors</button>
     <button onclick="fetch(`/stopprojector`, { method: 'POST' });">Stop projectors</button>
+
     <h2>Relay 1</h2>
     <div id="relay1"></div>
     <button onclick="fetch(`https://steady.bpfilip.dk/relay/on/19`);">On relay 1</button>
     <button onclick="fetch(`https://steady.bpfilip.dk/relay/off/19`);">Off relay 1</button>
+
     <h2>Relay 2</h2>
     <div id="relay2"></div>
     <button onclick="fetch(`https://steady.bpfilip.dk/relay/on/13`);">On relay 2</button>
     <button onclick="fetch(`https://steady.bpfilip.dk/relay/off/13`);">Off relay 2</button>
+
     <h2>Relay 3</h2>
     <div id="relay3"></div>
     <button onclick="fetch(`https://steady.bpfilip.dk/relay/on/6`);">On relay 3</button>
     <button onclick="fetch(`https://steady.bpfilip.dk/relay/off/6`);">Off relay 3</button>
+
     <h2>Relay 4</h2>
     <div id="relay4"></div>
     <button onclick="fetch(`https://steady.bpfilip.dk/relay/on/5`);">On relay 4</button>
     <button onclick="fetch(`https://steady.bpfilip.dk/relay/off/5`);">Off relay 4</button>
+    
 	<script src="/main.js"></script>
 </body>
 </html>

public/main.js

@@ -3,9 +3,11 @@ async function main() {
 	const videos = await response.json();
 	const videoDiv = document.getElementById('videos');
 	const overlayVideoDiv = document.getElementById('overlayvideos');
+	const deleteVideoDiv = document.getElementById('deletevideos');
 	
 	videoDiv.innerHTML = '';
 	overlayVideoDiv.innerHTML = '';
+	deleteVideoDiv.innerHTML = '';
 
 	console.log(videoDiv);
 
@@ -24,6 +26,13 @@ async function main() {
 			fetch(`/select?video=${video.path}`, { method: 'POST' });
 		});
 		overlayVideoDiv.appendChild(overlayButton);
+
+		const deleteButton = document.createElement('button');
+		deleteButton.textContent = video.name;
+		deleteButton.addEventListener('click', () => {
+			fetch(`/delete?video=${video.path}`, { method: 'POST' });
+		});
+		deleteVideoDiv.appendChild(deleteButton);
 	}
 
 	const res = await fetch('/projectorstatus');
@@ -44,6 +53,12 @@ async function main() {
 	relay2Div.innerText = await (await fetch("https://steady.bpfilip.dk/relay/status/13")).text();
 	relay3Div.innerText = await (await fetch("https://steady.bpfilip.dk/relay/status/6")).text();
 	relay4Div.innerText = await (await fetch("https://steady.bpfilip.dk/relay/status/5")).text();
+
+	const selectedvideoDiv = document.getElementById('selectedvideo');
+	const overlayvideoDiv = document.getElementById('overlayvideo');
+
+	selectedvideoDiv.innerText = await (await fetch("/selectedvideo")).text();
+	overlayvideoDiv.innerText = await (await fetch("/overlayvideo")).text();
 }
 
 main();