Initial

.gitignore

@@ -0,0 +1,10 @@
+.DS_Store
+__pycache__/
+*.egg-info/
+
+backend/.env
+backend/data/
+backend/db/
+backend/static/
+
+frontend/imprint.html

Makefile

@@ -0,0 +1,37 @@
+
+.PHONY: help
+help:
+	@echo "available commands:"
+	@echo "  -  start-frontend : start frontend server"
+	@echo "  -  start-backend  : start backend server"
+	@echo "  -  push-frontend  : push changes to server"
+	@echo "  -  push-backend   : push changes to server"
+
+.PHONY: start-backend
+start-backend:
+	@echo Starting server ... http://127.0.0.1:8000/admin/
+	@./backend/manage.py runserver
+
+.PHONY: start-frontend
+start-frontend:
+	@echo Server started on:  http://127.0.0.1/
+	@python -m http.server -b 0.0.0.0 80 -d ./frontend
+
+.PHONY: push-backend
+push-backend:
+	rsync -av --delete backend/ piko:~/leerstand/ \
+		--exclude=/data \
+		--exclude=/static \
+		--exclude=/db \
+		--exclude=__pycache__ \
+		--exclude=.DS_Store
+
+.PHONY: push-frontend
+push-frontend:
+	rsync -av --delete frontend/ piko:/srv/http/leerstand/ \
+		--exclude=/data \
+		--exclude=/static \
+		--exclude=.DS_Store
+
+.PHONY: push
+push: push-frontend push-backend

README.md

@@ -0,0 +1,20 @@
+# Leerstand
+
+Django app for managing places with json export and a fully-static frontend map.
+
+![Screenshot map overview](screenshot.jpg)
+
+
+## Deploy
+
+Start container with `docker-compose up -d` and create admin user (first-run):
+
+```sh
+docker-compose exec app python manage.py createsuperuser --email ''
+```
+
+Optionally, create an initial set of cities:
+
+```sh
+docker-compose exec app python manage.py loaddata initial_cities.json
+```

backend/Dockerfile

@@ -0,0 +1,22 @@
+FROM python:3.11-alpine
+
+EXPOSE 8000
+
+# install base system
+RUN apk add --no-cache gcc libc-dev linux-headers
+RUN pip install --upgrade pip
+RUN pip install uvicorn gunicorn
+
+# install requirements
+WORKDIR /django_project
+COPY ./requirements.txt .
+RUN pip install -r requirements.txt
+
+# then scripts (likely wont change often)
+ENV PATH="/scripts:/py/bin:$PATH"
+COPY --chmod=700 ./scripts /scripts
+
+# finally copy app (likely will invalidate cache)
+COPY . .
+
+CMD ["run.sh"]

backend/app/admin.py

@@ -0,0 +1,41 @@
+from django.contrib import admin
+from django.contrib.auth.models import Group  # , User
+
+from app.models import City, Place
+
+# admin.site.register(Place, )
+
+#############################
+# Django defaults
+#############################
+
+admin.site.site_header = 'Leerstand-Verwaltung'  # top-most title
+admin.site.index_title = 'Leerstand'  # title at root
+admin.site.site_title = 'Leerstand-Verwaltung'  # suffix to <title>
+
+admin.site.unregister(Group)
+# admin.site.unregister(User)
+
+
+#############################
+# App adjustments
+#############################
+
+@admin.register(City)
+class CityAdmin(admin.ModelAdmin):
+    list_display = ['name', 'place_count', 'center', 'zoom']
+
+    def get_readonly_fields(self, request, obj=None):
+        return ['name'] if obj else []
+
+    @admin.display(description='Orte')
+    def place_count(self, instance: 'City'):
+        return instance.places.count()
+
+
+@admin.register(Place)
+class PlaceAdmin(admin.ModelAdmin):
+    list_display = ['address', 'city', 'since', 'until', 'created', 'updated']
+    list_filter = ['city']
+    search_fields = ['address', 'description']
+    ordering = ['-updated']

backend/app/apps.py

@@ -0,0 +1,6 @@
+from django.apps import AppConfig
+
+
+class AppConfig(AppConfig):
+    default_auto_field = 'django.db.models.BigAutoField'
+    name = 'app'

backend/app/fields.py

@@ -0,0 +1,29 @@
+from django import forms
+from django.core.validators import RegexValidator
+from django.db import models
+
+
+VALID_MONTH_ERR = 'Bitte gültiges Datum im Format YYYY oder YYYY-MM angeben.'
+MONTH_FORMAT = r'^(19|20)[0-9]{2}(-(0[1-9]|1[0-2]))?$'
+
+
+class MonthPicker(forms.widgets.Input):
+    input_type = 'text'
+
+    def get_context(self, name, value, attrs):
+        if attrs:
+            attrs.setdefault('placeholder', 'YYYY-MM')
+        context = super().get_context(name, value, attrs)
+        # context['widget']['type'] = 'month'
+        return context
+
+
+class MonthField(models.CharField):
+    def __init__(self, *args, **kwargs):
+        kwargs['max_length'] = 7
+        super().__init__(*args, **kwargs)
+        self.validators.append(RegexValidator(MONTH_FORMAT, VALID_MONTH_ERR))
+
+    def formfield(self, **kwargs):
+        kwargs['widget'] = MonthPicker
+        return super().formfield(**kwargs)

backend/app/fixtures/initial_cities.json

@@ -0,0 +1,10 @@
+[
+    {
+        "model": "app.city",
+        "fields": {
+            "name": "Berlin",
+            "center": "52.52, 13.40",
+            "zoom": 12
+        }
+    }
+]

backend/app/migrations/0001_initial.py

@@ -0,0 +1,54 @@
+# Generated by Django 4.2.13 on 2024-07-24 22:47
+
+import app.fields
+import app.models.place
+import common.form.img_with_preview
+import django.core.validators
+from django.db import migrations, models
+import django.db.models.deletion
+import map_location.fields
+
+
+class Migration(migrations.Migration):
+
+    initial = True
+
+    dependencies = [
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='City',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('name', models.CharField(max_length=100, verbose_name='Name')),
+                ('center', map_location.fields.LocationField(verbose_name='Zentrum')),
+                ('zoom', models.IntegerField(validators=[django.core.validators.MinValueValidator(4), django.core.validators.MaxValueValidator(18)], verbose_name='Zoom')),
+            ],
+            options={
+                'verbose_name': 'Stadt',
+                'verbose_name_plural': 'Städte',
+                'ordering': ['name'],
+            },
+        ),
+        migrations.CreateModel(
+            name='Place',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('created', models.DateTimeField(auto_now_add=True, verbose_name='Erstellt')),
+                ('updated', models.DateTimeField(auto_now=True, verbose_name='Geändert')),
+                ('address', models.CharField(max_length=100, verbose_name='Adresse')),
+                ('img', common.form.img_with_preview.ThumbnailImageField(blank=True, null=True, upload_to=app.models.place.overwrite_img_upload, verbose_name='Bild')),
+                ('since', app.fields.MonthField(blank=True, max_length=7, null=True, verbose_name='Seit')),
+                ('until', app.fields.MonthField(blank=True, max_length=7, null=True, verbose_name='Bis')),
+                ('description', models.TextField(blank=True, null=True, verbose_name='Beschreibung')),
+                ('location', map_location.fields.LocationField(blank=True, null=True, verbose_name='Position')),
+                ('city', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='places', to='app.city', verbose_name='Stadt')),
+            ],
+            options={
+                'verbose_name': 'Gebäude',
+                'verbose_name_plural': 'Gebäude',
+                'ordering': ['address'],
+            },
+        ),
+    ]

backend/app/models/__init__.py

@@ -0,0 +1,2 @@
+from .city import City  # noqa: F401
+from .place import Place  # noqa: F401

backend/app/models/city.py

@@ -0,0 +1,85 @@
+from django.conf import settings
+from django.core.validators import MaxValueValidator, MinValueValidator
+from django.db import models
+from django.db.models.signals import post_delete
+from django.dispatch import receiver
+from django.template.defaultfilters import slugify
+
+import json
+import shutil
+from pathlib import Path
+
+from map_location.fields import LocationField
+
+import typing
+if typing.TYPE_CHECKING:
+    from app.models.place import Place
+
+
+class City(models.Model):
+    name = models.CharField('Name', max_length=100)
+    center = LocationField('Zentrum', options={
+        'markerZoom': 12,
+    })
+    zoom = models.IntegerField('Zoom', validators=[
+        MinValueValidator(4), MaxValueValidator(18)])
+
+    places: 'models.QuerySet[Place]'
+
+    class Meta:
+        verbose_name = 'Stadt'
+        verbose_name_plural = 'Städte'
+        ordering = ['name']
+
+    def __str__(self) -> str:
+        return self.name
+
+    @property
+    def slug(self):
+        return slugify(self.name)
+
+    @property
+    def data_path(self) -> Path:
+        return settings.MEDIA_ROOT / str(self.pk)
+
+    @property
+    def data_url(self) -> str:
+        return f'{self.pk}'
+
+    def save(self, *args, **kwargs):
+        rv = super().save(*args, **kwargs)
+        City.update_cities_json()
+        return rv
+
+    def asJson(self) -> 'dict[str, str|list[float]|int|None]':
+        return {
+            'id': self.pk,
+            'slug': self.slug,
+            'name': self.name,
+            'zoom': self.zoom,
+            'loc': [round(self.center.lat, 6),
+                    round(self.center.long, 6)] if self.center else None,
+        }
+
+    def update_json(self):
+        rv = []
+        for place in self.places.all():
+            if not place.location or not place.isVacant:
+                continue
+            rv.append(place.asJson())
+        self.data_path.mkdir(parents=True, exist_ok=True)
+        with open(self.data_path / 'data.json', 'w') as fp:
+            json.dump(rv, fp)
+
+    @staticmethod
+    def update_cities_json():
+        cities_json = settings.MEDIA_ROOT / 'cities.json'
+        with open(cities_json, 'w') as fp:
+            json.dump([city.asJson() for city in City.objects.all()], fp)
+
+
+@receiver(post_delete, sender=City)
+def on_delete_City(sender, instance: 'City', using, **kwargs):
+    if instance.data_path.exists():
+        shutil.rmtree(instance.data_path, ignore_errors=True)
+    City.update_cities_json()

backend/app/models/place.py

@@ -0,0 +1,86 @@
+from django.db import models
+from django.db.models.signals import post_delete
+from django.dispatch import receiver
+
+import os
+from datetime import date
+
+from map_location.fields import LocationField
+
+from app.fields import MonthField
+from common.form.img_with_preview import ThumbnailImageField
+
+import typing
+if typing.TYPE_CHECKING:
+    from app.models.city import City
+
+
+def overwrite_img_upload(instance: 'Place', filename: str):
+    id = instance.pk or (Place.objects.count() + 1)
+    path = instance.city.data_path / f'{id}.jpg'
+
+    if path.is_file():
+        os.remove(path)
+    return f'{instance.city.data_url}/{id}.jpg'
+
+
+class Place(models.Model):
+    created = models.DateTimeField('Erstellt', auto_now_add=True)
+    updated = models.DateTimeField('Geändert', auto_now=True)
+
+    city: 'models.ForeignKey[City]' = models.ForeignKey(
+        'City', on_delete=models.CASCADE, related_name='places',
+        verbose_name='Stadt')
+
+    address = models.CharField('Adresse', max_length=100)
+    img = ThumbnailImageField('Bild', blank=True, null=True,
+                              upload_to=overwrite_img_upload)  # type: ignore
+    since = MonthField('Seit', blank=True, null=True)
+    until = MonthField('Bis', blank=True, null=True)
+    description = models.TextField('Beschreibung', blank=True, null=True)
+    location = LocationField('Position', blank=True, null=True, options={
+        'map': {
+            'center': [52.52, 13.40],
+            'zoom': 12,
+        },
+    })
+
+    class Meta:
+        verbose_name = 'Gebäude'
+        verbose_name_plural = 'Gebäude'
+        ordering = ['address']
+
+    def __str__(self) -> str:
+        return self.address
+
+    @property
+    def isVacant(self):
+        if not self.until:
+            return True
+        now = date.today()
+        year = int(self.until[:4])
+        if year > now.year:
+            return True
+        return year == now.year and int((self.until + '-12')[5:7]) >= now.month
+
+    def save(self, *args, **kwargs):
+        rv = super().save(*args, **kwargs)
+        self.city.update_json()
+        return rv
+
+    def asJson(self) -> 'dict[str, str|list[float]|None]':
+        return {
+            'id': self.pk,
+            'since': self.since,
+            'until': self.until,
+            'addr': self.address,
+            'desc': self.description,
+            'img': self.img.url if self.img else None,
+            'loc': [round(self.location.lat, 6),
+                    round(self.location.long, 6)] if self.location else None,
+        }
+
+
+@receiver(post_delete, sender=Place)
+def on_delete_Place(sender, instance: 'Place', using, **kwargs):
+    instance.city.update_json()

backend/common/form/img_with_preview.py

@@ -0,0 +1,55 @@
+from django.conf import settings
+from django.core.files.uploadedfile import UploadedFile
+from django.db import models
+from django.forms import widgets
+
+from PIL import Image, ImageOps
+
+
+def makeThumnail(data: UploadedFile, size: 'tuple[int, int]'):
+    with Image.open(data) as img:
+        ImageOps.exif_transpose(img, in_place=True)
+        img.thumbnail(size)
+        if img.mode != 'RGB':
+            img = img.convert('RGB')
+        data.seek(0)
+        data.truncate()
+        img.save(data, 'jpeg')
+
+
+class ImageFileWidget(widgets.ClearableFileInput):
+    template_name = 'forms/img-with-preview.html'
+
+    def get_context(self, name, value, attrs):
+        context = super().get_context(name, value, attrs)
+        context['MEDIA_URL'] = settings.MEDIA_URL
+        return context
+
+
+class ThumbnailImageField(models.ImageField):
+    __del_image_on_save = False
+
+    def formfield(self, **kwargs):
+        kwargs['widget'] = ImageFileWidget
+        return super().formfield(**kwargs)
+
+    def save_form_data(self, instance, data):
+        if data is False:
+            self.__del_image_on_save = True
+        if isinstance(data, UploadedFile):
+            makeThumnail(data, (800, 600))  # only on create
+            # on update: django.db.models.fields.files.ImageFieldFile
+        super().save_form_data(instance, data)
+
+    def pre_save(self, model_instance, add):
+        if self.__del_image_on_save:
+            self.__del_image_on_save = False
+            self.deletePreviousImage(model_instance)
+        return super().pre_save(model_instance, add)
+
+    def deletePreviousImage(self, instance: models.Model):
+        if not instance.pk:
+            return
+        prev = instance.__class__.objects.get(pk=instance.pk)
+        imgField = getattr(prev, self.attname)
+        imgField.delete(save=False)

backend/common/templates/forms/img-with-preview.html

@@ -0,0 +1,14 @@
+<div>
+  {% if widget.is_initial %}
+    <img src="{{MEDIA_URL}}{{widget.value}}" style="max-width: 150px; max-height: 150px; margin: 8px;" />
+    {% if not widget.required %}
+      <span class="clearable-file-input">
+        <input type="checkbox" name="{{ widget.checkbox_name }}" id="{{ widget.checkbox_id }}"{% if widget.attrs.disabled %} disabled{% endif %}>
+        <label for="{{ widget.checkbox_id }}">{{ widget.clear_checkbox_label }}</label>
+      </span>
+    {% endif %}
+    <br>
+    <span>{{ widget.input_text }}:</span>
+  {% endif %}
+  <input type="{{ widget.type }}" name="{{ widget.name }}"{% include "django/forms/widgets/attrs.html" %}>
+</div>

backend/config/asgi.py

@@ -0,0 +1,16 @@
+"""
+ASGI config for project.
+
+It exposes the ASGI callable as a module-level variable named ``application``.
+
+For more information on this file, see
+https://docs.djangoproject.com/en/4.2/howto/deployment/asgi/
+"""
+
+import os
+
+from django.core.asgi import get_asgi_application
+
+os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'config.settings')
+
+application = get_asgi_application()

backend/config/settings.py

@@ -0,0 +1,148 @@
+"""
+Django settings for project.
+
+Generated by 'django-admin startproject' using Django 4.2.13.
+
+For more information on this file, see
+https://docs.djangoproject.com/en/4.2/topics/settings/
+
+For the full list of settings and their values, see
+https://docs.djangoproject.com/en/4.2/ref/settings/
+"""
+import os
+from pathlib import Path
+
+# Build paths inside the project like this: BASE_DIR / 'subdir'.
+BASE_DIR = Path(__file__).resolve().parent.parent
+
+
+# Quick-start development settings - unsuitable for production
+# See https://docs.djangoproject.com/en/4.2/howto/deployment/checklist/
+
+# SECURITY WARNING: keep the secret key used in production secret!
+SECRET_KEY = os.environ.get('DJANGO_SECRET_KEY', 'insecure-$a^nh$d!tgut43^91@')
+
+# SECURITY WARNING: don't run with debug turned on in production!
+DEBUG = SECRET_KEY.startswith('insecure') or \
+    os.environ.get('DEBUG', '0').lower() not in ['false', 'no', '0']
+
+ALLOWED_HOSTS = []
+ALLOWED_HOSTS.extend(
+    filter(
+        None,
+        os.environ.get('ALLOWED_HOSTS', '*').split(','),
+    )
+)
+CSRF_TRUSTED_ORIGINS = ['https://' + x for x in ALLOWED_HOSTS]
+
+
+# Application definition
+
+INSTALLED_APPS = [
+    'django.contrib.admin',
+    'django.contrib.auth',
+    'django.contrib.contenttypes',
+    'django.contrib.sessions',
+    'django.contrib.messages',
+    'django.contrib.staticfiles',
+    'common',
+    'map_location',
+    'app',
+]
+
+MIDDLEWARE = [
+    'django.middleware.security.SecurityMiddleware',
+    'django.contrib.sessions.middleware.SessionMiddleware',
+    'django.middleware.common.CommonMiddleware',
+    'django.middleware.csrf.CsrfViewMiddleware',
+    'django.contrib.auth.middleware.AuthenticationMiddleware',
+    'django.contrib.messages.middleware.MessageMiddleware',
+    'django.middleware.clickjacking.XFrameOptionsMiddleware',
+]
+
+ROOT_URLCONF = 'config.urls'
+
+TEMPLATES = [
+    {
+        'BACKEND': 'django.template.backends.django.DjangoTemplates',
+        'DIRS': [],  # BASE_DIR / 'templates'
+        'APP_DIRS': True,
+        'OPTIONS': {
+            'context_processors': [
+                'django.template.context_processors.debug',
+                'django.template.context_processors.request',
+                'django.contrib.auth.context_processors.auth',
+                'django.contrib.messages.context_processors.messages',
+            ],
+        },
+    },
+]
+
+WSGI_APPLICATION = 'config.wsgi.application'
+
+
+# Database
+# https://docs.djangoproject.com/en/4.2/ref/settings/#databases
+
+DATABASES = {
+    'default': {
+        'ENGINE': 'django.db.backends.sqlite3',
+        'NAME': BASE_DIR / 'db' / 'db.sqlite3',
+    }
+}
+
+
+# Password validation
+# https://docs.djangoproject.com/en/4.2/ref/settings/#auth-password-validators
+
+AUTH_PASSWORD_VALIDATORS = [
+    {
+        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
+    },
+    {
+        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
+    },
+    {
+        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
+    },
+    {
+        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
+    },
+]
+
+
+# Internationalization
+# https://docs.djangoproject.com/en/4.2/topics/i18n/
+
+LANGUAGE_CODE = 'de'
+
+TIME_ZONE = 'Europe/Berlin'
+
+USE_I18N = True
+
+USE_TZ = False
+
+
+# Static files (CSS, JavaScript, Images)
+# https://docs.djangoproject.com/en/4.2/howto/static-files/
+
+STATIC_URL = 'static/'
+
+# Default primary key field type
+# https://docs.djangoproject.com/en/4.2/ref/settings/#default-auto-field
+
+DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
+
+
+# Custom
+
+ADMIN_URL = os.environ.get('ADMIN_URL', 'admin/').rstrip('/') + '/'
+
+STATIC_ROOT = BASE_DIR / 'static'
+
+MEDIA_URL = 'data/'
+MEDIA_ROOT = BASE_DIR / 'data'
+
+# STATIC_ROOT.mkdir(exist_ok=True)
+MEDIA_ROOT.mkdir(exist_ok=True)
+(BASE_DIR / 'db').mkdir(exist_ok=True)

backend/config/urls.py

@@ -0,0 +1,25 @@
+"""
+URL configuration for project.
+
+The `urlpatterns` list routes URLs to views. For more information please see:
+    https://docs.djangoproject.com/en/4.2/topics/http/urls/
+Examples:
+Function views
+    1. Add an import:  from my_app import views
+    2. Add a URL to urlpatterns:  path('', views.home, name='home')
+Class-based views
+    1. Add an import:  from other_app.views import Home
+    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
+Including another URLconf
+    1. Import the include() function: from django.urls import include, path
+    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
+"""
+from django.conf import settings
+from django.conf.urls.static import static
+from django.contrib import admin
+from django.urls import path
+
+
+urlpatterns = [
+    path(settings.ADMIN_URL, admin.site.urls),
+] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

backend/config/wsgi.py

@@ -0,0 +1,16 @@
+"""
+WSGI config for project.
+
+It exposes the WSGI callable as a module-level variable named ``application``.
+
+For more information on this file, see
+https://docs.djangoproject.com/en/4.2/howto/deployment/wsgi/
+"""
+
+import os
+
+from django.core.wsgi import get_wsgi_application
+
+os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'config.settings')
+
+application = get_wsgi_application()

backend/docker-compose.yml

@@ -0,0 +1,31 @@
+services:
+  app:
+    container_name: leerstand
+    build:
+      context: .
+      # dockerfile: .
+    pull_policy: build
+    ports:
+      - 127.0.0.1:8098:8000
+    image: leerstand:latest
+    working_dir: /django_project
+    environment:
+      DJANGO_SECRET_KEY: ${DJANGO_SECRET_KEY}
+      ALLOWED_HOSTS: ${ALLOWED_HOSTS}
+      ADMIN_URL: ${ADMIN_URL}
+      DEBUG: ${DEBUG:-0}
+    volumes:
+      - volume-leerstand:/django_project/db
+      - /srv/http/leerstand-data:/django_project/data
+      - /srv/http/leerstand-static:/django_project/static
+    restart: unless-stopped
+    networks:
+      - network-leerstand
+
+volumes:
+  volume-leerstand:
+    name: leerstand
+
+networks:
+  network-leerstand:
+    name: leerstand

backend/manage.py

@@ -0,0 +1,22 @@
+#!/usr/bin/env python
+"""Django's command-line utility for administrative tasks."""
+import os
+import sys
+
+
+def main():
+    """Run administrative tasks."""
+    os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'config.settings')
+    try:
+        from django.core.management import execute_from_command_line
+    except ImportError as exc:
+        raise ImportError(
+            "Couldn't import Django. Are you sure it's installed and "
+            "available on your PYTHONPATH environment variable? Did you "
+            "forget to activate a virtual environment?"
+        ) from exc
+    execute_from_command_line(sys.argv)
+
+
+if __name__ == '__main__':
+    main()

backend/requirements.txt

@@ -0,0 +1,3 @@
+Django==4.2.14
+pillow==10.4.0
+django-map-location==0.9.2

backend/scripts/run.sh

@@ -0,0 +1,6 @@
+#!/bin/sh
+python manage.py collectstatic --noinput
+python manage.py migrate
+
+# python -m uvicorn --port 8000 config.asgi:application
+python -m gunicorn -b 0.0.0.0:8000 -k uvicorn.workers.UvicornWorker config.asgi:application

frontend/3p/leaflet/leaflet.css

@@ -0,0 +1,661 @@
+/* required styles */
+
+.leaflet-pane,
+.leaflet-tile,
+.leaflet-marker-icon,
+.leaflet-marker-shadow,
+.leaflet-tile-container,
+.leaflet-pane > svg,
+.leaflet-pane > canvas,
+.leaflet-zoom-box,
+.leaflet-image-layer,
+.leaflet-layer {
+	position: absolute;
+	left: 0;
+	top: 0;
+	}
+.leaflet-container {
+	overflow: hidden;
+	}
+.leaflet-tile,
+.leaflet-marker-icon,
+.leaflet-marker-shadow {
+	-webkit-user-select: none;
+	   -moz-user-select: none;
+	        user-select: none;
+	  -webkit-user-drag: none;
+	}
+/* Prevents IE11 from highlighting tiles in blue */
+.leaflet-tile::selection {
+	background: transparent;
+}
+/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
+.leaflet-safari .leaflet-tile {
+	image-rendering: -webkit-optimize-contrast;
+	}
+/* hack that prevents hw layers "stretching" when loading new tiles */
+.leaflet-safari .leaflet-tile-container {
+	width: 1600px;
+	height: 1600px;
+	-webkit-transform-origin: 0 0;
+	}
+.leaflet-marker-icon,
+.leaflet-marker-shadow {
+	display: block;
+	}
+/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
+/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
+.leaflet-container .leaflet-overlay-pane svg {
+	max-width: none !important;
+	max-height: none !important;
+	}
+.leaflet-container .leaflet-marker-pane img,
+.leaflet-container .leaflet-shadow-pane img,
+.leaflet-container .leaflet-tile-pane img,
+.leaflet-container img.leaflet-image-layer,
+.leaflet-container .leaflet-tile {
+	max-width: none !important;
+	max-height: none !important;
+	width: auto;
+	padding: 0;
+	}
+
+.leaflet-container img.leaflet-tile {
+	/* See: https://bugs.chromium.org/p/chromium/issues/detail?id=600120 */
+	mix-blend-mode: plus-lighter;
+}
+
+.leaflet-container.leaflet-touch-zoom {
+	-ms-touch-action: pan-x pan-y;
+	touch-action: pan-x pan-y;
+	}
+.leaflet-container.leaflet-touch-drag {
+	-ms-touch-action: pinch-zoom;
+	/* Fallback for FF which doesn't support pinch-zoom */
+	touch-action: none;
+	touch-action: pinch-zoom;
+}
+.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
+	-ms-touch-action: none;
+	touch-action: none;
+}
+.leaflet-container {
+	-webkit-tap-highlight-color: transparent;
+}
+.leaflet-container a {
+	-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
+}
+.leaflet-tile {
+	filter: inherit;
+	visibility: hidden;
+	}
+.leaflet-tile-loaded {
+	visibility: inherit;
+	}
+.leaflet-zoom-box {
+	width: 0;
+	height: 0;
+	-moz-box-sizing: border-box;
+	     box-sizing: border-box;
+	z-index: 800;
+	}
+/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
+.leaflet-overlay-pane svg {
+	-moz-user-select: none;
+	}
+
+.leaflet-pane         { z-index: 400; }
+
+.leaflet-tile-pane    { z-index: 200; }
+.leaflet-overlay-pane { z-index: 400; }
+.leaflet-shadow-pane  { z-index: 500; }
+.leaflet-marker-pane  { z-index: 600; }
+.leaflet-tooltip-pane   { z-index: 650; }
+.leaflet-popup-pane   { z-index: 700; }
+
+.leaflet-map-pane canvas { z-index: 100; }
+.leaflet-map-pane svg    { z-index: 200; }
+
+.leaflet-vml-shape {
+	width: 1px;
+	height: 1px;
+	}
+.lvml {
+	behavior: url(#default#VML);
+	display: inline-block;
+	position: absolute;
+	}
+
+
+/* control positioning */
+
+.leaflet-control {
+	position: relative;
+	z-index: 800;
+	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
+	pointer-events: auto;
+	}
+.leaflet-top,
+.leaflet-bottom {
+	position: absolute;
+	z-index: 1000;
+	pointer-events: none;
+	}
+.leaflet-top {
+	top: 0;
+	}
+.leaflet-right {
+	right: 0;
+	}
+.leaflet-bottom {
+	bottom: 0;
+	}
+.leaflet-left {
+	left: 0;
+	}
+.leaflet-control {
+	float: left;
+	clear: both;
+	}
+.leaflet-right .leaflet-control {
+	float: right;
+	}
+.leaflet-top .leaflet-control {
+	margin-top: 10px;
+	}
+.leaflet-bottom .leaflet-control {
+	margin-bottom: 10px;
+	}
+.leaflet-left .leaflet-control {
+	margin-left: 10px;
+	}
+.leaflet-right .leaflet-control {
+	margin-right: 10px;
+	}
+
+
+/* zoom and fade animations */
+
+.leaflet-fade-anim .leaflet-popup {
+	opacity: 0;
+	-webkit-transition: opacity 0.2s linear;
+	   -moz-transition: opacity 0.2s linear;
+	        transition: opacity 0.2s linear;
+	}
+.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
+	opacity: 1;
+	}
+.leaflet-zoom-animated {
+	-webkit-transform-origin: 0 0;
+	    -ms-transform-origin: 0 0;
+	        transform-origin: 0 0;
+	}
+svg.leaflet-zoom-animated {
+	will-change: transform;
+}
+
+.leaflet-zoom-anim .leaflet-zoom-animated {
+	-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
+	   -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
+	        transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
+	}
+.leaflet-zoom-anim .leaflet-tile,
+.leaflet-pan-anim .leaflet-tile {
+	-webkit-transition: none;
+	   -moz-transition: none;
+	        transition: none;
+	}
+
+.leaflet-zoom-anim .leaflet-zoom-hide {
+	visibility: hidden;
+	}
+
+
+/* cursors */
+
+.leaflet-interactive {
+	cursor: pointer;
+	}
+.leaflet-grab {
+	cursor: -webkit-grab;
+	cursor:    -moz-grab;
+	cursor:         grab;
+	}
+.leaflet-crosshair,
+.leaflet-crosshair .leaflet-interactive {
+	cursor: crosshair;
+	}
+.leaflet-popup-pane,
+.leaflet-control {
+	cursor: auto;
+	}
+.leaflet-dragging .leaflet-grab,
+.leaflet-dragging .leaflet-grab .leaflet-interactive,
+.leaflet-dragging .leaflet-marker-draggable {
+	cursor: move;
+	cursor: -webkit-grabbing;
+	cursor:    -moz-grabbing;
+	cursor:         grabbing;
+	}
+
+/* marker & overlays interactivity */
+.leaflet-marker-icon,
+.leaflet-marker-shadow,
+.leaflet-image-layer,
+.leaflet-pane > svg path,
+.leaflet-tile-container {
+	pointer-events: none;
+	}
+
+.leaflet-marker-icon.leaflet-interactive,
+.leaflet-image-layer.leaflet-interactive,
+.leaflet-pane > svg path.leaflet-interactive,
+svg.leaflet-image-layer.leaflet-interactive path {
+	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
+	pointer-events: auto;
+	}
+
+/* visual tweaks */
+
+.leaflet-container {
+	background: #ddd;
+	outline-offset: 1px;
+	}
+.leaflet-container a {
+	color: #0078A8;
+	}
+.leaflet-zoom-box {
+	border: 2px dotted #38f;
+	background: rgba(255,255,255,0.5);
+	}
+
+
+/* general typography */
+.leaflet-container {
+	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
+	font-size: 12px;
+	font-size: 0.75rem;
+	line-height: 1.5;
+	}
+
+
+/* general toolbar styles */
+
+.leaflet-bar {
+	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
+	border-radius: 4px;
+	}
+.leaflet-bar a {
+	background-color: #fff;
+	border-bottom: 1px solid #ccc;
+	width: 26px;
+	height: 26px;
+	line-height: 26px;
+	display: block;
+	text-align: center;
+	text-decoration: none;
+	color: black;
+	}
+.leaflet-bar a,
+.leaflet-control-layers-toggle {
+	background-position: 50% 50%;
+	background-repeat: no-repeat;
+	display: block;
+	}
+.leaflet-bar a:hover,
+.leaflet-bar a:focus {
+	background-color: #f4f4f4;
+	}
+.leaflet-bar a:first-child {
+	border-top-left-radius: 4px;
+	border-top-right-radius: 4px;
+	}
+.leaflet-bar a:last-child {
+	border-bottom-left-radius: 4px;
+	border-bottom-right-radius: 4px;
+	border-bottom: none;
+	}
+.leaflet-bar a.leaflet-disabled {
+	cursor: default;
+	background-color: #f4f4f4;
+	color: #bbb;
+	}
+
+.leaflet-touch .leaflet-bar a {
+	width: 30px;
+	height: 30px;
+	line-height: 30px;
+	}
+.leaflet-touch .leaflet-bar a:first-child {
+	border-top-left-radius: 2px;
+	border-top-right-radius: 2px;
+	}
+.leaflet-touch .leaflet-bar a:last-child {
+	border-bottom-left-radius: 2px;
+	border-bottom-right-radius: 2px;
+	}
+
+/* zoom control */
+
+.leaflet-control-zoom-in,
+.leaflet-control-zoom-out {
+	font: bold 18px 'Lucida Console', Monaco, monospace;
+	text-indent: 1px;
+	}
+
+.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out  {
+	font-size: 22px;
+	}
+
+
+/* layers control */
+
+.leaflet-control-layers {
+	box-shadow: 0 1px 5px rgba(0,0,0,0.4);
+	background: #fff;
+	border-radius: 5px;
+	}
+.leaflet-control-layers-toggle {
+	background-image: url(images/layers.png);
+	width: 36px;
+	height: 36px;
+	}
+.leaflet-retina .leaflet-control-layers-toggle {
+	background-image: url(images/layers-2x.png);
+	background-size: 26px 26px;
+	}
+.leaflet-touch .leaflet-control-layers-toggle {
+	width: 44px;
+	height: 44px;
+	}
+.leaflet-control-layers .leaflet-control-layers-list,
+.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
+	display: none;
+	}
+.leaflet-control-layers-expanded .leaflet-control-layers-list {
+	display: block;
+	position: relative;
+	}
+.leaflet-control-layers-expanded {
+	padding: 6px 10px 6px 6px;
+	color: #333;
+	background: #fff;
+	}
+.leaflet-control-layers-scrollbar {
+	overflow-y: scroll;
+	overflow-x: hidden;
+	padding-right: 5px;
+	}
+.leaflet-control-layers-selector {
+	margin-top: 2px;
+	position: relative;
+	top: 1px;
+	}
+.leaflet-control-layers label {
+	display: block;
+	font-size: 13px;
+	font-size: 1.08333em;
+	}
+.leaflet-control-layers-separator {
+	height: 0;
+	border-top: 1px solid #ddd;
+	margin: 5px -10px 5px -6px;
+	}
+
+/* Default icon URLs */
+.leaflet-default-icon-path { /* used only in path-guessing heuristic, see L.Icon.Default */
+	background-image: url(images/marker-icon.png);
+	}
+
+
+/* attribution and scale controls */
+
+.leaflet-container .leaflet-control-attribution {
+	background: #fff;
+	background: rgba(255, 255, 255, 0.8);
+	margin: 0;
+	}
+.leaflet-control-attribution,
+.leaflet-control-scale-line {
+	padding: 0 5px;
+	color: #333;
+	line-height: 1.4;
+	}
+.leaflet-control-attribution a {
+	text-decoration: none;
+	}
+.leaflet-control-attribution a:hover,
+.leaflet-control-attribution a:focus {
+	text-decoration: underline;
+	}
+.leaflet-attribution-flag {
+	display: inline !important;
+	vertical-align: baseline !important;
+	width: 1em;
+	height: 0.6669em;
+	}
+.leaflet-left .leaflet-control-scale {
+	margin-left: 5px;
+	}
+.leaflet-bottom .leaflet-control-scale {
+	margin-bottom: 5px;
+	}
+.leaflet-control-scale-line {
+	border: 2px solid #777;
+	border-top: none;
+	line-height: 1.1;
+	padding: 2px 5px 1px;
+	white-space: nowrap;
+	-moz-box-sizing: border-box;
+	     box-sizing: border-box;
+	background: rgba(255, 255, 255, 0.8);
+	text-shadow: 1px 1px #fff;
+	}
+.leaflet-control-scale-line:not(:first-child) {
+	border-top: 2px solid #777;
+	border-bottom: none;
+	margin-top: -2px;
+	}
+.leaflet-control-scale-line:not(:first-child):not(:last-child) {
+	border-bottom: 2px solid #777;
+	}
+
+.leaflet-touch .leaflet-control-attribution,
+.leaflet-touch .leaflet-control-layers,
+.leaflet-touch .leaflet-bar {
+	box-shadow: none;
+	}
+.leaflet-touch .leaflet-control-layers,
+.leaflet-touch .leaflet-bar {
+	border: 2px solid rgba(0,0,0,0.2);
+	background-clip: padding-box;
+	}
+
+
+/* popup */
+
+.leaflet-popup {
+	position: absolute;
+	text-align: center;
+	margin-bottom: 20px;
+	}
+.leaflet-popup-content-wrapper {
+	padding: 1px;
+	text-align: left;
+	border-radius: 12px;
+	}
+.leaflet-popup-content {
+	margin: 13px 24px 13px 20px;
+	line-height: 1.3;
+	font-size: 13px;
+	font-size: 1.08333em;
+	min-height: 1px;
+	}
+.leaflet-popup-content p {
+	margin: 17px 0;
+	margin: 1.3em 0;
+	}
+.leaflet-popup-tip-container {
+	width: 40px;
+	height: 20px;
+	position: absolute;
+	left: 50%;
+	margin-top: -1px;
+	margin-left: -20px;
+	overflow: hidden;
+	pointer-events: none;
+	}
+.leaflet-popup-tip {
+	width: 17px;
+	height: 17px;
+	padding: 1px;
+
+	margin: -10px auto 0;
+	pointer-events: auto;
+
+	-webkit-transform: rotate(45deg);
+	   -moz-transform: rotate(45deg);
+	    -ms-transform: rotate(45deg);
+	        transform: rotate(45deg);
+	}
+.leaflet-popup-content-wrapper,
+.leaflet-popup-tip {
+	background: white;
+	color: #333;
+	box-shadow: 0 3px 14px rgba(0,0,0,0.4);
+	}
+.leaflet-container a.leaflet-popup-close-button {
+	position: absolute;
+	top: 0;
+	right: 0;
+	border: none;
+	text-align: center;
+	width: 24px;
+	height: 24px;
+	font: 16px/24px Tahoma, Verdana, sans-serif;
+	color: #757575;
+	text-decoration: none;
+	background: transparent;
+	}
+.leaflet-container a.leaflet-popup-close-button:hover,
+.leaflet-container a.leaflet-popup-close-button:focus {
+	color: #585858;
+	}
+.leaflet-popup-scrolled {
+	overflow: auto;
+	}
+
+.leaflet-oldie .leaflet-popup-content-wrapper {
+	-ms-zoom: 1;
+	}
+.leaflet-oldie .leaflet-popup-tip {
+	width: 24px;
+	margin: 0 auto;
+
+	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
+	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
+	}
+
+.leaflet-oldie .leaflet-control-zoom,
+.leaflet-oldie .leaflet-control-layers,
+.leaflet-oldie .leaflet-popup-content-wrapper,
+.leaflet-oldie .leaflet-popup-tip {
+	border: 1px solid #999;
+	}
+
+
+/* div icon */
+
+.leaflet-div-icon {
+	background: #fff;
+	border: 1px solid #666;
+	}
+
+
+/* Tooltip */
+/* Base styles for the element that has a tooltip */
+.leaflet-tooltip {
+	position: absolute;
+	padding: 6px;
+	background-color: #fff;
+	border: 1px solid #fff;
+	border-radius: 3px;
+	color: #222;
+	white-space: nowrap;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+	pointer-events: none;
+	box-shadow: 0 1px 3px rgba(0,0,0,0.4);
+	}
+.leaflet-tooltip.leaflet-interactive {
+	cursor: pointer;
+	pointer-events: auto;
+	}
+.leaflet-tooltip-top:before,
+.leaflet-tooltip-bottom:before,
+.leaflet-tooltip-left:before,
+.leaflet-tooltip-right:before {
+	position: absolute;
+	pointer-events: none;
+	border: 6px solid transparent;
+	background: transparent;
+	content: "";
+	}
+
+/* Directions */
+
+.leaflet-tooltip-bottom {
+	margin-top: 6px;
+}
+.leaflet-tooltip-top {
+	margin-top: -6px;
+}
+.leaflet-tooltip-bottom:before,
+.leaflet-tooltip-top:before {
+	left: 50%;
+	margin-left: -6px;
+	}
+.leaflet-tooltip-top:before {
+	bottom: 0;
+	margin-bottom: -12px;
+	border-top-color: #fff;
+	}
+.leaflet-tooltip-bottom:before {
+	top: 0;
+	margin-top: -12px;
+	margin-left: -6px;
+	border-bottom-color: #fff;
+	}
+.leaflet-tooltip-left {
+	margin-left: -6px;
+}
+.leaflet-tooltip-right {
+	margin-left: 6px;
+}
+.leaflet-tooltip-left:before,
+.leaflet-tooltip-right:before {
+	top: 50%;
+	margin-top: -6px;
+	}
+.leaflet-tooltip-left:before {
+	right: 0;
+	margin-right: -12px;
+	border-left-color: #fff;
+	}
+.leaflet-tooltip-right:before {
+	left: 0;
+	margin-left: -12px;
+	border-right-color: #fff;
+	}
+
+/* Printing */
+
+@media print {
+	/* Prevent printers from removing background-images of controls. */
+	.leaflet-control {
+		-webkit-print-color-adjust: exact;
+		print-color-adjust: exact;
+		}
+	}

frontend/3p/leaflet/locate/L.Control.Locate.css

@@ -0,0 +1,63 @@
+.leaflet-control-locate a {
+  cursor: pointer;
+}
+.leaflet-control-locate a .leaflet-control-locate-location-arrow {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  margin: 7px;
+  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="black" d="M445 4 29 195c-48 23-32 93 19 93h176v176c0 51 70 67 93 19L508 67c16-38-25-79-63-63z"/></svg>');
+}
+.leaflet-control-locate a .leaflet-control-locate-spinner {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  margin: 7px;
+  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="black" d="M304 48a48 48 0 1 1-96 0 48 48 0 0 1 96 0zm-48 368a48 48 0 1 0 0 96 48 48 0 0 0 0-96zm208-208a48 48 0 1 0 0 96 48 48 0 0 0 0-96zM96 256a48 48 0 1 0-96 0 48 48 0 0 0 96 0zm13 99a48 48 0 1 0 0 96 48 48 0 0 0 0-96zm294 0a48 48 0 1 0 0 96 48 48 0 0 0 0-96zM109 61a48 48 0 1 0 0 96 48 48 0 0 0 0-96z"/></svg>');
+  animation: leaflet-control-locate-spin 2s linear infinite;
+}
+.leaflet-control-locate.active a .leaflet-control-locate-location-arrow {
+  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="rgb(32, 116, 182)" d="M445 4 29 195c-48 23-32 93 19 93h176v176c0 51 70 67 93 19L508 67c16-38-25-79-63-63z"/></svg>');
+}
+.leaflet-control-locate.following a .leaflet-control-locate-location-arrow {
+  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="rgb(252, 132, 40)" d="M445 4 29 195c-48 23-32 93 19 93h176v176c0 51 70 67 93 19L508 67c16-38-25-79-63-63z"/></svg>');
+}
+
+.leaflet-touch .leaflet-bar .leaflet-locate-text-active {
+  width: 100%;
+  max-width: 200px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  padding: 0 10px;
+}
+.leaflet-touch .leaflet-bar .leaflet-locate-text-active .leaflet-locate-icon {
+  padding: 0 5px 0 0;
+}
+
+.leaflet-control-locate-location circle {
+  animation: leaflet-control-locate-throb 4s ease infinite;
+}
+
+@keyframes leaflet-control-locate-throb {
+  0% {
+    stroke-width: 1;
+  }
+  50% {
+    stroke-width: 3;
+    transform: scale(0.8, 0.8);
+  }
+  100% {
+    stroke-width: 1;
+  }
+}
+@keyframes leaflet-control-locate-spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+/*# sourceMappingURL=L.Control.Locate.css.map */

frontend/data

@@ -0,0 +1 @@
+../backend/data

frontend/ico/browserconfig.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+  <msapplication>
+    <tile>
+      <square70x70logo src="/ico/70.png"/>
+      <square150x150logo src="/ico/150.png"/>
+      <square310x310logo src="/ico/310.png"/>
+      <TileImage src="/ico/150.png"/>
+      <TileColor>#d1e7dd</TileColor>
+    </tile>
+  </msapplication>
+</browserconfig>

frontend/ico/favicon.svg

@@ -0,0 +1,14 @@
+<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+<g fill="#fff" stroke="#000" stroke-width="2">
+<polygon id="tt" points="90,31 27,31 24,27 30,24 32,15 44,16 41,10 50,2"/>
+<rect id="t3" x="67" y="31" width="16" height="6"/>
+<rect id="t2" x="42" y="31" width="16" height="6"/>
+<rect id="m3" x="70" y="37" width="10" height="36"/>
+<rect id="m2" x="45" y="37" width="10" height="36"/>
+<path id="m1" d="M29,73h-8v-12l8-7z"/>
+<rect id="b3" x="67" y="73" width="16" height="6"/>
+<rect id="b2" x="42" y="73" width="16" height="6"/>
+<rect id="b1" x="17" y="73" width="16" height="6"/>
+<rect id="g0" x="8" y="79" width="84" height="10"/>
+<rect id="gg" x="1" y="89" width="98" height="10"/>
+</g></svg>

frontend/ico/manifest.json

@@ -0,0 +1,18 @@
+{
+  "name": "Leerstand",
+  "short_name": "Leerstand",
+  "background_color": "#d1e7dd",
+  "display": "fullscreen",
+  "icons": [
+    {
+      "src": "/ico/192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/ico/512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}

frontend/icons.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
+<symbol id="mark" viewBox="0 0 69 110">
+<path stroke="#000" stroke-width="3" d="m34.5 1.5c-18.2 0-33 14.8-33 33 0 5.3 1.3 10.4 3.5 14.8 5.4 10.8 29.5 57.7 29.5 57.7s24.1-47 29.5-57.7c2.2-4.5 3.5-9.5 3.5-14.8 0-18.2-14.8-33-33-33zm0 49.5c-9.1 0-16.5-7.4-16.5-16.5s7.4-16.5 16.5-16.5 16.5 7.4 16.5 16.5-7.4 16.5-16.5 16.5z"/>
+</symbol>
+<symbol id="pin" viewBox="0 0 60 100">
+<path fill="#000" d="m25 58v42h10v-42z"/>
+<circle stroke="#000" stroke-width="2" cx="30" cy="30" r="27.5"/>
+<path fill="#fff" d="m30 14.5c.5 0 1.8-.5 1.8-1.8s-1.3-1.8-1.8-1.8c-5.4 0-10.1 1.9-13.9 5.7s-5.7 8.5-5.7 13.9c0 .5.6 1.8 1.8 1.8s1.8-1.3 1.8-1.8c0-4.4 1.6-8.2 4.7-11.4s6.9-4.6 11.3-4.6z"/>
+</symbol>
+</svg>

frontend/index.html

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="de">
+
+<head>
+  <meta charset="utf-8">
+  <title>Leerstand</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="shortcut icon" href="/favicon.ico">
+  <link rel="icon" type="image/png" sizes="32x32" href="/ico/32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/ico/16.png">
+  <link rel="apple-touch-icon" sizes="180x180" href="/ico/apple-touch-icon.png">
+  <link rel="manifest" href="/ico/manifest.json">
+  <meta name="msapplication-config" content="/ico/browserconfig.xml">
+
+  <script src="/3p/leaflet/leaflet.js"></script>
+  <script src="/3p/leaflet/locate/L.Control.Locate.min.js"></script>
+  <script src="/script.js"></script>
+  <link rel="stylesheet" href="/3p/leaflet/leaflet.css" />
+  <link rel="stylesheet" href="/3p/leaflet/locate/L.Control.Locate.css" />
+  <link rel="stylesheet" href="/style.css" />
+</head>
+
+<body>
+  <div id="loading">Loading ...</div>
+  <div id="popup" onclick="event.target === this && closePopup()" hidden>
+    <div class="container">
+      <a class="close" onclick="closePopup()">⨉</a>
+      <h3></h3>
+      <p id="_desc"></p>
+      <p><em>Leerstand:</em> <b id="_since"></b></p>
+      <img src="" alt="Kein Bild" />
+    </div>
+  </div>
+  <div id="overlay">
+    <span id="city-counter" hidden></span>
+    <select id="city-select" hidden onchange="this.value ? showCity(this.value): showCityOverview()">
+      <option value="">-----</option>
+    </select>
+  </div>
+  <div id="map"></div>
+  <script defer>start()</script>
+</body>
+
+</html>

frontend/script.js

@@ -0,0 +1,225 @@
+const DATA_ROOT = '/data/';
+let MAP = null;
+let LAYER = null;
+let CITIES = {};
+let PLACES = {};
+const DEFAULT_CENTER = [51.2, 9];
+const DEFAULT_ZOOM = 6;
+
+// ---------------------
+//  Load data
+// ---------------------
+
+async function loadJson(url) {
+    const res = await fetch(url);
+    return await res.json();
+}
+
+async function loadCities() {
+    CITIES = {};
+    for (const city of await loadJson(DATA_ROOT + 'cities.json')) {
+        CITIES[city.id] = city;
+    }
+}
+
+async function loadCity(cityId) {
+    PLACES = {};
+    for (const place of await loadJson(DATA_ROOT + cityId + '/data.json')) {
+        if (since(place.until) > 0) {
+            continue; // not vacant anymore
+        }
+        PLACES[place.id] = place;
+    }
+    updateCounter();
+}
+
+// ---------------------
+//  Helper
+// ---------------------
+
+function getCityId(slug) {
+    for (const city of Object.values(CITIES)) {
+        if (city.slug === slug) {
+            return city.id;
+        }
+    }
+    return null;
+}
+
+function since(date) {
+    if (!date) {
+        return 0;
+    }
+    const [y, m] = (date + '-01').split('-');
+    const diff = Date.now() - new Date(y, m - 1);
+    return Math.floor(diff / (1000 * 60 * 60 * 24));
+}
+
+function makeIcon(className) {
+    return L.divIcon({
+        className: className,
+        html: '<svg><use href="/icons.svg#mark"></use></svg>',
+        iconSize: [34, 55],
+        iconAnchor: [17, 55],
+        popupAnchor: [0, -20],
+        tooltipAnchor: [0, -20],
+        offset: [10, 20],
+    });
+}
+
+function makeMarker(place) {
+    const vacantYears = Math.floor(since(place.since) / 365);
+    return L.marker(L.latLng(place.loc), {
+        pid: place.id,
+        title: place.addr,
+        icon: makeIcon('pin fc' + Math.min(vacantYears, 7)),
+    }).on('click', clickPin);
+}
+
+function clickPin(pin) {
+    setPlace(pin.target.options.pid);
+}
+
+function closePopup(e) {
+    setPlace(null)
+}
+
+function makeCityMarker(city) {
+    return L.marker(L.latLng(city.loc), {
+        pid: city.id,
+        title: city.name,
+        icon: makeIcon('pin pin-city'),
+    }).on('click', cityPinClick);
+}
+
+async function cityPinClick(pin) {
+    await showCity(pin.target.options.pid);
+}
+
+// ---------------------
+//  UI updates
+// ---------------------
+
+function setPlace(placeId) {
+    const hide = !placeId;
+    const place = hide ? {} : PLACES[placeId];
+    const div = document.getElementById('popup');
+    div.hidden = hide;
+    div.querySelector('img').src = place.img || '';
+    div.querySelector('h3').innerText = place.addr || '';
+    div.querySelector('#_since').innerText = place.until
+        ? 'von ' + place.since + ' bis ' + place.until
+        : place.since ? 'seit ' + place.since : '???';
+    div.querySelector('#_desc').innerText = place.desc || '';
+
+    location.hash = location.hash.split('|')[0] + (hide ? '' : '|' + placeId);
+    document.title = document.title.split(' "', 1)[0] + (hide ? '' : ' "' + place.addr + '"');
+}
+
+function setCity(city) {
+    document.getElementById('city-select').value = city ? city.id : '';
+    location.hash = city ? city.slug : '';
+    document.title = document.title.split(' in ', 1)[0] + (city ? ' in ' + city.name : '');
+}
+
+function updateCounter() {
+    const total = Object.keys(PLACES).length;
+    const counter = document.getElementById('city-counter');
+    counter.innerText = total;
+    counter.hidden = total === 0;
+}
+
+// ---------------------
+//  Initialize
+// ---------------------
+
+function initMap() {
+    const osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        attribution: [
+            '<svg class="fc0"><rect/></svg> &lt; 1 Jahr',
+            '<svg class="fc1"><rect/></svg> 1–3 J.',
+            '<svg class="fc3"><rect/></svg> 3–5 J.',
+            '<svg class="fc5"><rect/></svg> 5–7 J.',
+            '<svg class="fc7"><rect/></svg> 7+ Jahre',
+            '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+            '<a href="/imprint.html">Impressum</a>',
+        ].join(' | '),
+    });
+    MAP = L.map('map', {
+        layers: [osm], center: DEFAULT_CENTER, zoom: DEFAULT_ZOOM,
+        zoomSnap: 0.5,
+    });
+    LAYER = L.layerGroup([]).addTo(MAP);
+    L.control.locate({ showPopup: false }).addTo(MAP);
+}
+
+function initCities() {
+    const select = document.getElementById('city-select');
+    while (select.options.length > 1) {
+        select.options.remove(1);
+    }
+    for (const city of Object.values(CITIES)) {
+        const opt = document.createElement('option');
+        opt.value = city.id;
+        opt.innerText = city.name;
+        select.add(opt);
+    }
+    select.hidden = false;
+}
+
+// ---------------------
+//  Interactive
+// ---------------------
+
+function showCityOverview() {
+    LAYER.clearLayers();
+    MAP.setView(DEFAULT_CENTER, DEFAULT_ZOOM);
+    setCity(null);
+    PLACES = {};
+    updateCounter();
+
+    for (const city of Object.values(CITIES)) {
+        makeCityMarker(city).addTo(LAYER);
+    }
+}
+
+async function showCity(cityId) {
+    const city = CITIES[cityId];
+    LAYER.clearLayers();
+    MAP.setView(city.loc, city.zoom);
+    setCity(city);
+    await loadCity(cityId);
+
+    var bounds = L.latLngBounds();
+    for (const place of Object.values(PLACES)) {
+        const marker = makeMarker(place).addTo(LAYER);
+        bounds.extend(marker.getLatLng());
+    }
+    // adjust bounds & zoom
+    if (bounds.isValid()) {
+        MAP.fitBounds(bounds, { padding: [50, 50] });
+    }
+}
+
+async function start() {
+    initMap();
+    await loadCities();
+    initCities();
+
+    const [city_slug, place_id] = location.hash.substring(1).split('|');
+    const city_id = city_slug ? getCityId(city_slug) : null;
+    if (city_id) {
+        await showCity(city_id);
+        if (place_id) {
+            setPlace(place_id);
+        }
+    } else {
+        const available_cities = Object.keys(CITIES);
+        if (available_cities.length === 1) {
+            await showCity(available_cities[0]);
+        } else {
+            showCityOverview();
+        }
+    }
+    document.getElementById('loading').hidden = true;
+}

frontend/style.css

@@ -0,0 +1,121 @@
+html, body {
+  height: 100%;
+  margin: 0;
+  font-family: sans-serif;
+}
+
+#loading {
+  z-index: 9001;
+  position: absolute;
+  background: #0009;
+  width: 100%;
+  height: 100%;
+  color: white;
+  font-size: 2em;
+  text-align: center;
+  line-height: 100vh;
+}
+
+#map {
+  width: 100%;
+  height: 100%;
+}
+
+#overlay {
+  z-index: 2000;
+  position: absolute;
+  right: .5em;
+  top: .5em;
+}
+#city-counter {
+  background: #FFFA;
+  color: #666;
+  padding: 4px 6px 2px;
+  border-radius: 8px;
+  font-size: smaller;
+}
+
+.pin svg {
+  filter: drop-shadow(0 0 5px #888);
+  width: 100%;
+  height: 100%;
+}
+
+#popup {
+  z-index: 3000;
+  position: absolute;
+  background: #0009;
+  width: 100%;
+  height: 100%;
+  overflow-x: auto;
+}
+#popup .container {
+  background: white;
+  padding: 8px 12px;
+  margin: 20px auto;
+  max-width: 600px;
+  border-radius: 8px;
+}
+#popup h3 {
+  margin-top: 4px;
+  border-bottom: 1px solid gray;
+  line-height: 1.5;
+}
+#popup .close {
+  float: right;
+  cursor: pointer;
+  padding: 4px 8px;
+}
+#popup .close:hover {
+  font-weight: 900;
+}
+#popup img {
+  display: inline-block;
+  width: 100%;
+  /* no-img fallback */
+  line-height: 120px;
+  background: #666;
+  color: white;
+  text-align: center;
+  font-weight: 100;
+  font-size: 24px;
+}
+
+@media(max-width: 750px) {
+  #popup .container {
+    margin: unset;
+    max-width: 100%;
+    min-height: calc(100% - 2*8px);
+    border-radius: unset;
+  }
+  #popup .close {
+    font-size: 1.5em;
+  }
+  #popup h3 {
+    font-size: 1.5em;
+  }
+}
+
+.pin-city {
+  fill-opacity: 0;
+}
+.fc0 {
+  fill: #FFF;
+}
+.fc1, .fc2 {
+  fill: #EBB;
+}
+.fc3, .fc4 {
+  fill: #D66;
+}
+.fc5, .fc6 {
+  fill: #B22;
+}
+.fc7 {
+  fill: #800;
+}
+
+.leaflet-control-attribution svg, .leaflet-control-attribution rect {
+  width: .9em;
+  height: .9em;
+}