1 files changed, 85 insertions, 0 deletions
diff --git a/static/src/albums.js b/static/src/albums.js
new file mode 100644
index 0000000..b7523d9
--- /dev/null
+++ b/static/src/albums.js
@@ -0,0 +1,85 @@
+import apiConnector from "./connector.js"
+
+class Album {
+	static albums = []
+	static albumTemplate = null
+	static albumContainer = null
+
+	constructor(data) {
+		this.data = data
+		// create clone element
+		const e = Album.albumTemplate.content.cloneNode(true)
+		e.firstElementChild.dataset.key = data.id
+		e.querySelector("a").href = apiConnector.albumSrc(data.id)
+		e.querySelector("img").src = apiConnector.assetThumbnailSrc(data.albumThumbnailAssetId)
+		e.querySelector(".album-name").textContent = data.albumName
+		e.querySelector(".album-assets-count").textContent = data.assetCount.toLocaleString()
+		if (!data.shared)
+			e.querySelector(".album-shared").remove()
+
+		Album.albums.push(this)
+		Album.albumsContainer.appendChild(e)
+		this.element = Album.albumsContainer.lastElementChild
+		if (data.selected)
+			this.element.dataset.selected = "1"
+	}
+
+	toggleVisibility(visible) { this.element.classList.toggle("hidden!", !visible) }
+
+	static albumSelect(e) {
+		// find album element
+		let album = e.target
+		while (album && !album.classList.contains("album"))
+			album = album.parentElement
+
+		if (album === null)
+			return
+
+		if (album.dataset.selected)
+			delete album.dataset.selected
+		else
+			album.dataset.selected = "1"
+	}
+
+	static albumsFilter(e) {
+		const q = e.target.value.toLowerCase()
+		for (const album of Album.albums) {
+			const match = album.data.albumName.toLowerCase().includes(q)
+			album.toggleVisibility(match)
+		}
+	}
+
+	static getSelected() {
+		const s = []
+		for (const album of Album.albums)
+			if (album.element.dataset.selected)
+				s.push(album.data.id)
+		return s
+	}
+
+	static submitSelected() {
+		apiConnector.updateAlbums(Album.getSelected())
+	}
+
+	static async initAlbums(albumsPageContainer) {
+		Album.albumsContainer = albumsPageContainer.querySelector("#albums-container")
+		Album.albumTemplate   = albumsPageContainer.querySelector("#album-template")
+		const albumSearch     = albumsPageContainer.querySelector("#album-search")
+		const albumsSubmit    = albumsPageContainer.querySelector("#albums-submit")
+
+		// create albums
+		const albumsResponse = await apiConnector.fetchAlbums()
+
+		for (const res of albumsResponse)
+			new Album(res)
+
+		// album selection
+		Album.albumsContainer.addEventListener("click", Album.albumSelect)
+		albumSearch.addEventListener("input", Album.albumsFilter)
+		albumsSubmit.addEventListener("click", Album.submitSelected)
+
+		return true
+	}
+}
+
+export default Album.initAlbums