diff options
Diffstat (limited to 'www/photo.causal.agency/trips.html')
| -rw-r--r-- | www/photo.causal.agency/trips.html | 343 |
1 files changed, 343 insertions, 0 deletions
diff --git a/www/photo.causal.agency/trips.html b/www/photo.causal.agency/trips.html new file mode 100644 index 00000000..ddad2adb --- /dev/null +++ b/www/photo.causal.agency/trips.html @@ -0,0 +1,343 @@ +<!DOCTYPE html> +<title>Photo Trips</title> +<meta charset="utf-8"> +<meta name="viewport" content="width=device-width, initial-scale=1.0"> + +<style> +body { + font-family: sans-serif; + line-height: 1.5em; + max-width: 52ch; +} +input, button, select { font-size: 100%; } +form { + display: grid; + grid-template-columns: auto 1fr; + gap: 0.5em 1ch; +} +input[type="number"] { width: 5ch; } +#trip-lens { width: 100%; } +#lens-length { width: 7ch; } +#lens-aperture { width: 8ch; } +</style> + +<section id="rolls"> +<h1>Rolls</h1> +<ul> +</ul> + +<form> +<label for="roll-body">Camera:</label> +<select id="roll-body" class="body" required> +</select> +<label for="roll-film">Film:</label> +<input id="roll-film" list="films" required> +<button type="button" onclick="loadRoll()">Load</button> +</form> + +<datalist id="films"> + <option>Harman Phoenix 200</option> + <option>Shanghai Color 400</option> + <option>CineStill 800T</option> + <option>Ilford HP5 Plus 400</option> + <option>Ilford FP4 Plus 125</option> + <option>Ilford Delta 100</option> + <option>Fomapan Creative 200</option> + <option>Fomapan Action 400</option> +</datalist> +</section> + +<section id="trips"> +<h1>Trips</h1> + +<form> +<label for="trip-date">Date:</label> +<input id="trip-date" type="date" required> +<label for="trip-body">Camera:</label> +<select id="trip-body" class="body" onchange="setTripBody()" required> +</select> +<label for="trip-lens">Lens:</label> +<select id="trip-lens" required> +</select> +<label for="trip-film">Film:</label> +<input id="trip-film" readonly required> +<label for="trip-first">Exposures:</label> +<span> +<input id="trip-first" type="number" required min="0" max="36"> +– +<input id="trip-last" type="number" required min="0" max="36"> +</span> +<label for="trip-note">Note:</label> +<input id="trip-note"> +<button type="button" onclick="addTrip()">Record</button> +</form> + +<ul> +</ul> +</section> + +<section id="bodies"> +<h1>Cameras</h1> +<ul> +</ul> + +<form> + <label for="body-name">Name:</label> + <input id="body-name" required> + <label for="body-mount">Mount:</label> + <input id="body-mount" list="mounts" required> + <button type="button" onclick="addBody()">Add</button> +</form> + +<datalist id="mounts"> + <option>Contax/Yashica</option> + <option>M42</option> +</datalist> +</section> + +<section id="lenses"> +<h1>Lenses</h1> +<ul> +</ul> + +<form> + <label for="lens-name">Name:</label> + <input id="lens-name" required> + <label for="lens-length">Focal length:</label> + <span><input id="lens-length" required pattern="[0-9-]+">mm</span> + <label for="lens-aperture">Aperture:</label> + <span>ƒ/<input id="lens-aperture" required pattern="[0-9.-]+"></span> + <label for="lens-mount">Mount:</label> + <input id="lens-mount" list="mounts" required> + <button type="button" onclick="addLens()">Add</button> +</form> +</section> + +<script> +let bodies = JSON.parse(localStorage.getItem("bodies")) || []; +let lenses = JSON.parse(localStorage.getItem("lenses")) || []; +let rolls = JSON.parse(localStorage.getItem("rolls")) || {}; +let trips = JSON.parse(localStorage.getItem("trips")) || []; +let nextId = +localStorage.getItem("nextId") || 1; + +document.getElementById("trip-date").valueAsDate = new Date(); + +function removeButton(onclick) { + let remove = document.createElement("a"); + remove.appendChild(document.createTextNode("⛔")); + remove.onclick = onclick; + return remove; +} + +function setBodies() { + localStorage.setItem("bodies", JSON.stringify(bodies)); + let ul = document.querySelector("#bodies > ul"); + let selects = document.querySelectorAll("select.body"); + ul.innerHTML = ""; + selects.forEach(select => select.innerHTML = ""); + for (let [index, body] of bodies.entries()) { + let li = document.createElement("li"); + li.appendChild(document.createTextNode(` + ${body.name} (${body.mount}) + `)); + li.appendChild(removeButton(removeBody.bind(null, index))); + ul.appendChild(li); + for (let select of selects) { + let option = document.createElement("option"); + option.appendChild(document.createTextNode(body.name)); + select.appendChild(option); + } + } +} +setBodies(); + +function endashify(str) { + return str.replaceAll("-", "–"); +} +function lensString(lens) { + return ` + ${lens.name} + ${endashify(lens.focalLength)}mm + ƒ/${endashify(lens.aperture)} + `.replace(/\s+/g, " ").trim(); +} + +function setLenses() { + localStorage.setItem("lenses", JSON.stringify(lenses)); + let ul = document.querySelector("#lenses > ul"); + ul.innerHTML = ""; + for (let [index, lens] of lenses.entries()) { + let li = document.createElement("li"); + li.appendChild(document.createTextNode(` + ${lensString(lens)} (${lens.mount}) + `)); + li.appendChild(removeButton(removeLens.bind(null, index))); + ul.appendChild(li); + } +} +setLenses(); + +function setRolls() { + localStorage.setItem("rolls", JSON.stringify(rolls)); + let ul = document.querySelector("#rolls > ul"); + ul.innerHTML = ""; + for (body in rolls) { + let roll = rolls[body]; + let li = document.createElement("li"); + li.appendChild(document.createTextNode(` + ${body}: ${roll.film} (${roll.used}/${roll.exposures}) + `)); + if (roll.used == roll.exposures) { + li.style.textDecoration = "line-through"; + } + ul.appendChild(li); + } +} +setRolls(); + +function setTrips() { + localStorage.setItem("trips", JSON.stringify(trips)); + let ul = document.querySelector("#trips > ul"); + ul.innerHTML = ""; + let tripsByRoll = Object.groupBy(trips, trip => trip.rollId); + for (let rollId = nextId - 1; rollId > 0; --rollId) { + let rollTrips = tripsByRoll[rollId]; + if (!rollTrips) continue; + let rollLi = document.createElement("li"); + let rollB = document.createElement("b"); + rollB.appendChild(document.createTextNode(rollTrips[0].film)); + rollLi.appendChild(rollB); + rollLi.appendChild(document.createTextNode(` (${rollTrips[0].body})`)); + let rollUl = document.createElement("ul"); + for (let trip of rollTrips) { + let li = document.createElement("li"); + let b = document.createElement("b"); + b.appendChild(document.createTextNode(trip.date)); + li.appendChild(b); + li.appendChild(document.createTextNode( + `: ${trip.firstExposure}–${trip.lastExposure}` + )); + li.appendChild(document.createElement("br")); + li.appendChild(document.createTextNode(trip.lens)); + if (trip.note) { + li.appendChild(document.createElement("br")); + li.appendChild(document.createTextNode(`“${trip.note}”`)); + } + rollUl.appendChild(li); + } + rollLi.appendChild(rollUl); + ul.appendChild(rollLi); + } +} +setTrips(); + +function setTripBody() { + let bodyName = document.getElementById("trip-body").value; + let body = bodies.find(body => body.name == bodyName); + let select = document.getElementById("trip-lens"); + select.innerHTML = ""; + for (lens of lenses.filter(lens => lens.mount == body.mount)) { + let option = document.createElement("option"); + option.appendChild(document.createTextNode(lensString(lens))); + select.appendChild(option); + } + let roll = rolls[body.name]; + if (roll) { + document.getElementById("trip-film").value = roll.film; + let next = (roll.used > 0 ? roll.used + 1 : roll.used); + document.getElementById("trip-first").value = next; + document.getElementById("trip-last").value = next; + } else { + document.getElementById("trip-film").value = ""; + document.getElementById("trip-first").value = ""; + document.getElementById("trip-last").value = ""; + } +} +setTripBody(); + +function clearForm(form) { + let inputs = form.querySelectorAll("input"); + for (input of inputs) { + input.value = null; + } +} + +function addBody() { + let form = document.querySelector("#bodies > form"); + if (!form.checkValidity()) return; + let name = document.getElementById("body-name").value; + let mount = document.getElementById("body-mount").value; + bodies.push({ name, mount }); + setBodies(); + clearForm(form); +} + +function removeBody(index) { + let body = bodies[index]; + if (!confirm(`Are you sure you want to remove ${body.name}?`)) { + return; + } + bodies.splice(index, 1); + delete rolls[body.name]; + setBodies(); + setRolls(); +} + +function addLens() { + let form = document.querySelector("#lenses > form"); + if (!form.checkValidity()) return; + let name = document.getElementById("lens-name").value; + let focalLength = document.getElementById("lens-length").value; + let aperture = document.getElementById("lens-aperture").value; + let mount = document.getElementById("lens-mount").value; + lenses.push({ name, focalLength, aperture, mount }); + setLenses(); + clearForm(form); +} + +function removeLens(index) { + let lens = lenses[index]; + if (!confirm(`Are you sure you want to remove ${lensString(lens)}?`)) { + return; + } + lenses.splice(index, 1); + setLenses(); + setTripBody(); +} + +function loadRoll() { + let form = document.querySelector("#rolls > form"); + if (!form.checkValidity()) return; + let body = document.getElementById("roll-body").value; + let film = document.getElementById("roll-film").value; + rolls[body] = { id: nextId++, film, used: 0, exposures: 36 }; + localStorage.setItem("nextId", nextId); + setRolls(); + clearForm(form); + setTripBody(); +} + +function addTrip() { + let form = document.querySelector("#trips > form"); + if (!form.checkValidity()) return; + let date = document.getElementById("trip-date").value; + let body = document.getElementById("trip-body").value; + let lens = document.getElementById("trip-lens").value; + let film = document.getElementById("trip-film").value; + let firstExposure = +document.getElementById("trip-first").value; + let lastExposure = +document.getElementById("trip-last").value; + let note = document.getElementById("trip-note").value; + let trip = { + date, body, lens, film, rollId: rolls[body].id, + firstExposure, lastExposure, note + }; + trips.push(trip); + rolls[body].used = lastExposure; + setTrips(); + setRolls(); + document.getElementById("trip-date").valueAsDate = new Date(); + document.getElementById("trip-note").value = ""; + setTripBody(); +} + +</script> |