-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path! image deleter.html
86 lines (72 loc) · 2.05 KB
/
! image deleter.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
<html>
<head>
<style>
#content {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
height: 100vh;
margin: 0;
}
#left-side {
display: flex;
justify-content: center;
align-items: center;
}
#imageContainer {
display: grid;
grid-template-columns: auto auto;
gap: 10px;
padding: 10px;
}
img {
max-height: 45vh;
max-width: 45vw;
}
img:hover {
transform: scale(1.01);
cursor: pointer;
}
button {
font-size: 36px;
}
</style>
</head>
<body>
<div id="content">
<div id="left-side">
<button onclick="getImages(BACKEND_URL, IMAGE_CONTAINER)">Skip</button>
</div>
<div id="imageContainer"></div>
</div>
<script>
const BACKEND_URL = "http://localhost:3030/images";
const DELETE_URL = (path) => BACKEND_URL + "?path=" + encodeURIComponent(path);
const IMAGE_CONTAINER = document.getElementById('imageContainer');
getImages(BACKEND_URL, IMAGE_CONTAINER);
function getImages(url, imageContainer) {
clearImages(imageContainer);
fetch(url)
.then(response => response.json())
.then(paths => {
paths.forEach(path => {
const img = document.createElement('img');
img.src = path;
img.title = path;
img.onclick = () => deleteImage(path);
imageContainer.appendChild(img);
});
});
}
function deleteImage(path) {
console.log("Deleting: " + path);
fetch(DELETE_URL(path), { method: 'DELETE' }).then(() => getImages(BACKEND_URL, IMAGE_CONTAINER));
}
function clearImages(imageContainer) {
while (imageContainer.firstChild) {
imageContainer.removeChild(imageContainer.firstChild);
}
}
</script>
</body>
</html>