diff options
| -rw-r--r-- | public/index.html | 16 | ||||
| -rw-r--r-- | src/albums.js | 6 | ||||
| -rw-r--r-- | src/connector.js | 23 | ||||
| -rw-r--r-- | src/index.js | 5 | ||||
| -rw-r--r-- | src/settings.js | 16 |
5 files changed, 43 insertions, 23 deletions
diff --git a/public/index.html b/public/index.html index afbb504..932d043 100644 --- a/public/index.html +++ b/public/index.html @@ -80,17 +80,17 @@ <label class="settings-label">Image Duration</label> <p>Number of seconds each image will be displayed.</p> </div> - <input class="my-auto rounded-input" name="image_duration" type="number" /> + <input class="my-auto rounded-input" name="image_duration" type="number" step="0.01" /> <div> <label class="settings-label">Transition Duration</label> - <p>Number of seconds each transition between images will take.<br>Set as 0 to disable.</p> + <p>Number of seconds each image transition will take.<br>Set as 0 to disable.</p> </div> - <input class="my-auto rounded-input" name="transition_duration" type="number" /> + <input class="my-auto rounded-input" name="transition_duration" type="number" step="0.01" /> <div> <label class="settings-label">Max Framerate</label> - <p>Target display framerate.<br>Simple transitions look good as low as 12-15 fps.</p> + <p>Target display framerate.<br>Simple transitions look good at 12-15 fps.</p> </div> - <input class="my-auto rounded-input" name="max_framerate" type="number" /> + <input class="my-auto rounded-input" name="max_framerate" type="number" step="0.01" /> <div> <label class="settings-label">Display Size</label> <p>Image size to load on the display.<br>Large thumbnail size is suitable for FHD.</p> @@ -102,12 +102,12 @@ </select> <div> <label class="settings-label">Max Cached Assets</label> - <p>Number of assets that can exist at once in RAM.<br>Each additional asset will take ~2x the display size in memory.</p> + <p>Number of assets that can exist at once in RAM.<br>Each asset will take ~5x the display size in memory.</p> </div> - <input class="my-auto rounded-input" name="max_cache_assets" type="number" /> + <input class="my-auto rounded-input" name="max_cache_assets" type="number" step="0.01" /> </div> </fieldset> - <input class="rounded-btn ml-auto" type="submit" value="Save Settings" /> + <input id="settings-submit" class="rounded-btn ml-auto" type="submit" value="Save Settings" /> </form> </div> </main> 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]))) + }) +} |