Apparently, Firefox/Android defaults to using the front camera, and
does not provide any native UI for selecting a different one. We can
request the back camera by indiciting that the "environment" camera is
"ideal."
In production deployments, the static assets are stored in
`/usr/local/share/receipts/static`. The working directory is
`/usr/local/share/receipts`, so using a relative path of `static` is
sufficient. We can use the same path in development with a symlink
pointing to the `esbuild` output directory.
And now we come to the meat of the thing: the ability to update
transactions and attach receipts. Most of this is straightforward,
except for changing the amount of split transactions. Hopefully, this
won't come up too often, since I can't really split transactions without
a receipt. Just to be on the safe side, attempting to change the amount
of a split transaction will return an error.
This is all pretty straightforward. The only real problem is that
the search results only contain matching transactions *splits*. Since
transactions themselves do not have an amount, the value shown in the
_Amount_ column on the transaction list may be incorrect if a
transaction contains multiple splits and some of them do not match the
search query.
I've implemented the UI using TypeScript and Shoelace. I originally
started with Pico CSS, but I didn't really like its visuals. Since
capturing photos using the camera requires JavaScript, and that's
basically the entire point of this application, Shoelace's JavaScript
dependency (for WebComponents), is acceptable.
The photo capture uses the Media Capture Web API, which exposes the
camera directly as a video stream. We capture a frame from this stream
and save it in a canvas, which we then pass to Cropper.js to let the
user select only the relevant portion of the picture containing the
receipt itself.
Dustin