1 files changed, 64 insertions, 25 deletions
diff --git a/src/albums.js b/src/albums.js
index c1d85e3..ff7cd1d 100644
--- a/src/albums.js
+++ b/src/albums.js
@@ -1,30 +1,30 @@
 import apiConnector from "./connector.js"
 
-export default async function initAlbums(albumsPageContainer) {
-	const albumsContainer = albumsPageContainer.querySelector("#albums-container")
-	const albumTemplate = albumsPageContainer.querySelector("#album-template")
-
-	// create albums
-	async function createAlbum(res) {
-		const albumClone = albumTemplate.content.cloneNode(true)
-		albumClone.firstElementChild.dataset.key = res.id
-		albumClone.querySelector("a").href = apiConnector.albumSrc(res.id)
-		albumClone.querySelector("img").src = apiConnector.assetThumbnailSrc(res.albumThumbnailAssetId)
-		albumClone.querySelector(".album-name").textContent = res.albumName
-		albumClone.querySelector(".album-assets-count").textContent = res.assetCount.toLocaleString()
-		if (!res.shared)
-			albumClone.querySelector(".album-shared").remove()
-
-		albumsContainer.appendChild(albumClone)
-	}
+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()
 
-	const albumsResponse = await apiConnector.fetchAlbums()
+		Album.albums.push(this)
+		Album.albumsContainer.appendChild(e)
+		this.element = Album.albumsContainer.lastElementChild
+	}
 
-	for (const res of albumsResponse)
-		createAlbum(res)
+	toggleVisibility(visible) { this.element.classList.toggle("hidden!", !visible) }
 
-	// album selection
-	albumsContainer.addEventListener("click", e => {
+	static albumSelect(e) {
 		// find album element
 		let album = e.target
 		while (album && !album.classList.contains("album"))
@@ -33,12 +33,51 @@ export default async function initAlbums(albumsPageContainer) {
 		if (album === null)
 			return
 
-		console.log(album)
 		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
+	}
 
-	return true
+	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