Fixing clipboard on mobile

The document.executeCommand('copy') support is flaky on mobile to say the least. Therefore I will be adding a fallback feature to manually copy the pixel whenever it is not possible to do that using JS.

Then I will be trying clipboard.js if time allows seeing if that fixes the compatibility issues on mobile.

I'm very satisfied with the result:

In order to make selection more easily prompted on phone, I had to add a few   (non-breaking spaces) around the pixel:

                    |    
                    img(class="invisible-pixel" src=`/${receipt.id}.png`)
                    |    

It worked nicely on my phone, more tests are needed to make sure it works on other devices too.

Live update

I'm going to add a simple live update to the page, a very basic pull-based approach (unfortunately no time for fancy WebSocket). Every two seconds trying to get the latest records from the database and update the page.

The solution was pretty simple for each get endpoint, I added a post endpoint that takes a date as an argument and returns the list of records after that.