settings page save/load config

4 files changed, 35 insertions, 15 deletions

diff --git a/src/albums.js b/src/albums.js
index f8b5ed1..c1d85e3 100644
--- a/src/albums.js
+++ b/src/albums.js
@@ -1,12 +1,11 @@
 import apiConnector from "./connector.js"
 
 export default async function initAlbums(albumsPageContainer) {
-	// TODO empty cells animation
-
 	const albumsContainer = albumsPageContainer.querySelector("#albums-container")
 	const albumTemplate = albumsPageContainer.querySelector("#album-template")
+
+	// create albums
 	async function createAlbum(res) {
-		console.log(res.albumName, res.id, res.startDate, res.endDate, res.assetCount, res.shared)
 		const albumClone = albumTemplate.content.cloneNode(true)
 		albumClone.firstElementChild.dataset.key = res.id
 		albumClone.querySelector("a").href = apiConnector.albumSrc(res.id)
@@ -24,6 +23,7 @@ export default async function initAlbums(albumsPageContainer) {
 	for (const res of albumsResponse)
 		createAlbum(res)
 
+	// album selection
 	albumsContainer.addEventListener("click", e => {
 		// find album element
 		let album = e.target
diff --git a/src/connector.js b/src/connector.js
index 97071c6..29f0cff 100644
--- a/src/connector.js
+++ b/src/connector.js
@@ -19,12 +19,8 @@ class APIConnector {
 		})
 	}
 
-	#fetch(endpoint) {
-		return fetch(this.url + "/api" + endpoint)
-	}
-
-	fetch(endpoint) {
-		return this.#fetch(endpoint)
+	fetch(endpoint, c) {
+		return fetch(this.url + "/api" + endpoint, c ?? {})
 			.then(response => {
 				if (!response.ok)
 					throw new Error(`HTTP error! Status: ${response.status}`)
@@ -38,14 +34,21 @@ class APIConnector {
 			})
 	}
 
+	post(endpoint, body) {
+		return this.fetch(endpoint, {
+			method: "POST",
+			headers: { "Content-Type": "application/json" },
+			body: JSON.stringify(body),
+		})
+	}
+
 	seek(increment) {
-		//return this.fetch(`/seek?increment=${increment}`)
 		this.socket.emit("seek", increment)
 	}
 
-	fetchAlbums() {
-		return this.fetch("/albums")
-	}
+	fetchAlbums() { return this.fetch("/albums") }
+	fetchConfig() { return this.fetch("/config") }
+	updateConfig(config) { return this.post("/config/update", config) }
 
 	albumSrc(key)          { return `${this.url}/api/redirect/albums/${key}` }
 	assetSrc(key)          { return `${this.url}/api/asset/${key}` }
diff --git a/src/index.js b/src/index.js
index b0862c3..7d7c9db 100644
--- a/src/index.js
+++ b/src/index.js
@@ -6,10 +6,11 @@ import Page from "./pages.js"
 import "./icons.js"
 import initSlides from "./slides.js"
 import initAlbums from "./albums.js"
+import initSettings from "./settings.js"
 
 const slideshow = new Page(document.querySelector("#slideshow"), ["", "/slideshow"], initSlides)
-const albums    = new Page(document.querySelector("#albums"),    ["/albums"], initAlbums)
-const settings  = new Page(document.querySelector("#settings"),  ["/settings"])
+const albums    = new Page(document.querySelector("#albums"),    ["/albums"],        initAlbums)
+const settings  = new Page(document.querySelector("#settings"),  ["/settings"],      initSettings)
 
 window.addEventListener("popstate", Page.pathnameCallback)
 Page.pathnameCallback() /* run after all pages are registered */
diff --git a/src/settings.js b/src/settings.js
new file mode 100644
index 0000000..fd8bdad
--- /dev/null
+++ b/src/settings.js
@@ -0,0 +1,16 @@
+import apiConnector from "./connector.js"
+
+export default async function initSettings(settingsPageContainer) {
+	const inputList = Array.from(settingsPageContainer.querySelectorAll("[name]"))
+	const inputs = Object.fromEntries(inputList.map(e => [e.name, e]))
+	const currentConfig = await apiConnector.fetchConfig()
+
+	for (const [name, value] of Object.entries(currentConfig))
+		if (inputs[name])
+			inputs[name].value = value
+
+	settingsPageContainer.querySelector("#settings-submit").addEventListener("click", e => {
+		e.preventDefault()
+		apiConnector.updateConfig(Object.fromEntries(inputList.map(el => [el.name, el.type === "number" ? parseFloat(el.value) : el.value])))
+	})
+}