balki/collage-maker
1
0
Fork 0
Code Issues 10 Pull Requests Packages Projects Releases Wiki Activity

Add a dialog for showing notices

Browse Source
This commit is contained in:
Balakrishnan Balasubramanian 2024-08-03 01:47:22 -04:00
parent bf6bdf9b72
commit 5fee186dcb
2 changed files with 40 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/choose.html
View File

@ -6,6 +6,10 @@
<script src="choose.js" defer></script> <script src="choose.js" defer></script>
</head> </head>
<body> <body>
<dialog id="notice_dialog">
<p id="notice_p"></p>
<form><button type="submit" formmethod="dialog">X</button></form>
</dialog>
<label> <label>
<span>Select Album</span> <span>Select Album</span>
<select id="album_selector" size="8"> <select id="album_selector" size="8">

31
web/choose.js
View File

@ -11,28 +11,59 @@ let loadPhotosBtn
/** @type {HTMLSelectElement} */ /** @type {HTMLSelectElement} */
let albumSelect let albumSelect
/** @type {HTMLParagraphElement} */
let noticeP
/** @type {HTMLDialogElement} */
let noticeDialog
function main() { function main() {
albumSelect = document.getElementById("album_selector") albumSelect = document.getElementById("album_selector")
loadAlbumsBtn = document.getElementById("load_albums_button") loadAlbumsBtn = document.getElementById("load_albums_button")
loadPhotosBtn = document.getElementById("load_photos_button") loadPhotosBtn = document.getElementById("load_photos_button")
noticeDialog = document.getElementById("notice_dialog")
noticeP = document.getElementById("notice_p")
loadAlbumsBtn.onclick = () => loadAlbums() loadAlbumsBtn.onclick = () => loadAlbums()
loadPhotosBtn.onclick = () => loadPhotos() loadPhotosBtn.onclick = () => loadPhotos()
} }
function loadAlbums() { function loadAlbums() {
(async () => { (async () => {
try {
closeNotice()
const resp = await fetch("get-albums") const resp = await fetch("get-albums")
const albums = await resp.json() const albums = await resp.json()
if(albums.length == 0) {
showNotice("No Albums found")
return
}
albumSelect.replaceChildren() // This empties existing options albumSelect.replaceChildren() // This empties existing options
for(const album of albums) { for(const album of albums) {
albumSelect.add(new Option(album.Title, album.UID)) albumSelect.add(new Option(album.Title, album.UID))
} }
} catch(e) {
console.log(e)
}
})(); })();
} }
function closeNotice() {
noticeDialog.close()
}
/**
* @param {string} notice
*/
function showNotice(notice) {
noticeP.textContent = notice
noticeDialog.show()
}
function loadPhotos() { function loadPhotos() {
closeNotice()
const selected = albumSelect.selectedOptions const selected = albumSelect.selectedOptions
if(selected.length != 1) { if(selected.length != 1) {
showNotice("Select an album to load photos")
return return
} }
const [elem] = selected const [elem] = selected