Unifying codebase of the damn web clients

Posted by qeef on 4/4/2023

Let’s recap some work done on the damn project.

Divide and map. Now. – the damn project – helps mappers by dividing a big area into smaller squares that people can map together.

As outlined in Work for 2023, I have been working on the improvements to the web clients. The consequences are better clients and easier deployment (which is not yet documented). Also, I have restructured and slightly rewrote the https://damn-project.org/ web page.

Changes to the web clients

New client for beginner mappers is out, see mapper. I was thinking of how to better describe map-review-done workflow. The original client has “Show mapping square workflow diagram” showing ASCII art square’s state flow when clicked. I had and idea to show SVG figure (generated by dot) instead of ASCII art, because it is easier to generate, maintain, and translate. SVG is text, too, so I can bare that. But wait! SVG is HTML element, isn’t it? So it’s clickable, isn’t it? So it can be done interactive, can’t be?

Mapper web client of the damn-project.org

I improved listing of areas, particularly filtering and sorting. Short help for filter is filter >minpriority <maxpriority created (since )until /sort author and tags. There are multiple ways of how areas can be sorted. The sorting can be included in “filter” input, so it is possible to use links like https://mapper.damn-project.org/#filter=(2023%20%3E1%20/id to share areas created since the beginning of the 2023 with priority two and more ordered by completion status in decrementing order.

Since the beginning, the damn project has grayscale color schema. It is me being terrible at inventing color schemas. I recognize when I do not like it, but I am not able to come up with something I like. It’s that simple. Anyway, it is possible to change the colors in settings now. If you find some nice color schema, please, let me know!

List of areas of the damn-project.org with weird color scheme

There is new Quality Assurance page. It contains panel web client, daily updated RSS feeds, intersecting areas, and finished areas.

The panel is pretty the same as the old one. I consider the biggest improvement the possibility to review a square of a particular mapper. That mapping workflow is possible in the JOSM damn plugin, too.

RSS feeds are daily updated. I have added new channels tracking the abandoned areas.

Intersecting areas web page shows which areas of the damn project intersect. It is also possible to test if the GeoJSON you want to upload as the boundary of new area boundary intersects with any area of the damn project. The intersection is based on the bounding box.

The last are finished areas accessible read-only.

Deploying web clients

Every web page of the damn project is static web page. You can download it (see the bottom of relevant page), open downloaded copy, and use it.

Of course you need Internet connection, because you communicate with the damn server, but you may save a few hundreds kilobytes next time, yay!

But! The real consequence is for administrators. Because every client is static web page, deploying new version literally equals copying one file.

Future work

Mappy is the next web client to be rewritten to the current damn (JavaScript) client codebase. I have also some feedback and ideas for the improvements.

I plan to include at least some kind of map into the mapper web client. When mappy client is ready, I will probably use some parts for that purpose.

Refactor deploy is still ongoing and slowly improving. Unfortunately, I will update the documentation as the last thing, sorry.

I had an idea. Within new codebase it is pretty simple to built fixed filter into the web page client. I mean… mapper or panel web page, but there is no sorting or filtering option and only predefined list of areas is shown. This approach can be used for mapping campaigns. The following three commands needs to be run on generated index.html file to achieve that:

1 2 3 sed -i 's|var li = H.loa(r, fv);|var li = H.loa(r, "(2023 >1 /id");|' index.html sed -i 's|H.h_loa_menu(fv)|H.h_my_menu()|' index.html sed -i '/R.bind_loa();/d' index.html

Uhm, I should probably keep the sorting option, though.