add immich api class and page class

3 files changed, 75 insertions, 26 deletions

diff --git a/src/immich.js b/src/immich.js
new file mode 100644
index 0000000..d911007
--- /dev/null
+++ b/src/immich.js
@@ -0,0 +1,28 @@
+export default class ImmichConnector {
+	constructor(url, apiKey) {
+		this.url = url
+		this.apiKey = apiKey
+	}
+
+	fetchAlbums() {
+		return this.fetch("/albums")
+	}
+
+	fetch(endpoint) {
+		return fetch(this.url + "/api" + endpoint, {
+			headers: { "x-api-key": this.apiKey }
+		})
+			.then(response => {
+				if (!response.ok) {
+					throw new Error(`HTTP error! Status: ${response.status}`)
+				}
+				return response.json()
+			})
+			.then(data => {
+				console.log('Fetched data:', data)
+			})
+			.catch(error => {
+				console.error('Fetch error:', error)
+			})
+	}
+}
diff --git a/src/index.js b/src/index.js
index 6e35fa3..e6a4dc3 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,43 +1,29 @@
 import "./style.css"
+import ImmichConnector from "./immich.js"
+import Page from "./pages.js"
 import "./icons.js"
 import initSlides from "./slides.js"
 
-initSlides()
+const immichConnector = new ImmichConnector("http://192.168.1.13", "m5nqOoBc4uhAba21gZdCP3z8D3JT4GPxDXL2psd52EA")
+document.immichConnector = immichConnector // FIXME TEMP
 
-const apiKey = "m5nqOoBc4uhAba21gZdCP3z8D3JT4GPxDXL2psd52EA"
-console.log(apiKey)
-const testDiv = document.querySelector("main div")
+const slideshow = new Page(document.querySelector("#slideshow"), "/slideshow", initSlides)
+const albums    = new Page(document.querySelector("#albums"),    "/albums")
+const settings  = new Page(document.querySelector("#settings"),  "/settings")
 
-function showAlbums() {
-	testDiv.innerHTML
-}
-
-function pathnameCallback(e) {
-	console.log(e)
-	//testDiv.innerHTML = ""
-	//switch (window.location.pathname) {
-	//	case "/":
-	//		testDiv.innerHTML = "<p>Hello first page</p>"
-	//	break ;;
-	//	case "/albums":
-	//		testDiv.innerHTML = "<p>Hello albums page</p>"
-	//	break ;;
-	//	case "/settings":
-	//		testDiv.innerHTML = "<p>Hello settings page</p>"
-	//	break ;;
-	//}
-}
-window.addEventListener("popstate", pathnameCallback)
-pathnameCallback()
+window.addEventListener("popstate", Page.pathnameCallback)
+Page.pathnameCallback()
 
 /* add event listeners for anchor elements in footer */
 function softRedirect(e) {
 	e.preventDefault()
 	let a = e.target
+	if (a === null) return
 	while (a.tagName !== "A" && a !== null)
 		a = a.parentElement
+	if (a === null) return
 	window.history.pushState({}, "", a.href);
-	pathnameCallback()
+	Page.pathnameCallback()
 }
 
 document.querySelector("#menu").addEventListener("click", softRedirect)
diff --git a/src/pages.js b/src/pages.js
new file mode 100644
index 0000000..7e0bdbc
--- /dev/null
+++ b/src/pages.js
@@ -0,0 +1,35 @@
+export default class Page {
+	static pages = {}
+	static currentPage = null
+
+	static pathnameCallback() {
+		const path = window.location.pathname.replace(/\/$/, "")
+		const page = Page.pages[path]
+
+		if (!page)
+			throw new Error(`Path '${path}' does not exist`)
+
+		if (Page.currentPage)
+			Page.currentPage.setVisible(false)
+
+		page.setVisible(true)
+		Page.currentPage = page
+	}
+
+	constructor(pageContainer, endpoint, f_initialize) {
+		Page.pages[endpoint] = this
+
+		this.pageContainer = pageContainer
+		this.endpoint = endpoint
+		this.initialize = f_initialize
+		this.visible = false
+		this.initialized = false
+	}
+
+	setVisible(visible) {
+		this.pageContainer.style.display = visible ? null : "none"
+		this.visible = visible
+		if (visible && !this.initialized && this.initialize)
+			this.initialized = this.initialize()
+	}
+}