Implement fetching photos from photoprism #19
19
web/choose.html
Normal file
19
web/choose.html
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<link rel="icon" href="data:;base64,iVBORw0KGgo=" />
|
||||||
|
<!-- DEVONLY --> <script src="http://localhost:35729/livereload.js"></script>
|
||||||
|
<script src="choose.js" defer></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<label>
|
||||||
|
<span>Select Album</span>
|
||||||
|
<select id="album_selector" size="8">
|
||||||
|
</select>
|
||||||
|
</label>
|
||||||
|
<button id="load_albums_button">Load Albums</button>
|
||||||
|
<button id="load_photos_button">Load Photos</button>
|
||||||
|
<div id="selected_photos"></div>
|
||||||
|
<div id="album_photos"></div>
|
||||||
|
</body>
|
||||||
|
</html>
|
45
web/choose.js
Normal file
45
web/choose.js
Normal file
@ -0,0 +1,45 @@
|
|||||||
|
"use strict";
|
||||||
|
|
||||||
|
// elements
|
||||||
|
|
||||||
|
/** @type {HTMLButtonElement} */
|
||||||
|
let loadAlbumsBtn
|
||||||
|
|
||||||
|
/** @type {HTMLButtonElement} */
|
||||||
|
let loadPhotosBtn
|
||||||
|
|
||||||
|
/** @type {HTMLSelectElement} */
|
||||||
|
let albumSelect
|
||||||
|
|
||||||
|
function main() {
|
||||||
|
albumSelect = document.getElementById("album_selector")
|
||||||
|
loadAlbumsBtn = document.getElementById("load_albums_button")
|
||||||
|
loadPhotosBtn = document.getElementById("load_photos_button")
|
||||||
|
loadAlbumsBtn.onclick = () => loadAlbums()
|
||||||
|
loadPhotosBtn.onclick = () => loadPhotos()
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadAlbums() {
|
||||||
|
(async () => {
|
||||||
|
const resp = await fetch("get-albums")
|
||||||
|
const albums = await resp.json()
|
||||||
|
albumSelect.replaceChildren() // This empties existing options
|
||||||
|
for(const album of albums) {
|
||||||
|
albumSelect.add(new Option(album.Title, album.UID))
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadPhotos() {
|
||||||
|
const selected = albumSelect.selectedOptions
|
||||||
|
if(selected.length != 1) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const [elem] = selected
|
||||||
|
console.log(elem)
|
||||||
|
console.log(elem.text)
|
||||||
|
console.log(elem.value)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
main()
|
Loading…
Reference in New Issue
Block a user