summary refs log tree commit diff
path: root/www/photo.causal.agency/trips.html
diff options
context:
space:
mode:
Diffstat (limited to '')
-rw-r--r--www/photo.causal.agency/trips.html347
1 files changed, 347 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..547f7ba2
--- /dev/null
+++ b/www/photo.causal.agency/trips.html
@@ -0,0 +1,347 @@
+<!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 lastTrip = trips.findLast(trip => trip.body == bodyName);
+	if (lastTrip) {
+		select.value = lastTrip.lens;
+	}
+	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>