UI updates

.gitignore

@@ -6,6 +6,7 @@ rabbitmq/*
 staticfiles/
 sample_data/downloads/*
 jupyter/.ipynb_checkpoints
+dev/.env.web.docker-compose
 
 # osmnx data cache folder
 cache

docker-compose.override.yml

@@ -1,10 +1,9 @@
-version: '3'
 services:
   django:
     build:
       context: .
       dockerfile: ./dev/Dockerfile
-    command: [ "./manage.py", "runserver", "0.0.0.0:8000" ]
+    command: ["./manage.py", "runserver", "0.0.0.0:8000"]
     # Log printing via Rich is enhanced by a TTY
     tty: true
     env_file: ./dev/.env.docker-compose
@@ -34,7 +33,7 @@ services:
         "worker",
         "--loglevel",
         "INFO",
-        "--without-heartbeat"
+        "--without-heartbeat",
       ]
     # Docker Compose does not set the TTY width, which causes Celery errors
     tty: false
@@ -59,11 +58,15 @@ services:
 
   web:
     image: node:latest
-    command: [ "npm", "run", "serve" ]
+    command: ["npm", "run", "serve"]
     working_dir: /web
+    env_file:
+      # git ignored file for VUE_APP_MAPTILER_API_KEY
+      - path: ./dev/.env.web.docker-compose
+        required: false
     volumes:
       - ./web:/web
-      - ./.git:/web/.git  # allow fetching version tag
+      - ./.git:/web/.git # allow fetching version tag
     ports:
       - 8080:8080
     environment:

uvdat/core/rest/simulations.py

@@ -54,10 +54,13 @@ def get_available_simulations(project_id: int):
                             queryset=queryset, projects=Project.objects.filter(id=project_id)
                         )
                     ]
+            elif len(options):
+                options_type = options[0].__class__
             args.append(
                 {
                     'name': a['name'],
                     'options': options,
+                    'type': options_type.__name__,
                 }
             )
         details['args'] = args

web/.env.example

@@ -1,3 +1,4 @@
 VUE_APP_OAUTH_CLIENT_ID=cBmD6D6F2YAmMWHNQZFPUr4OpaXVpW5w4Thod6Kj
 VUE_APP_API_ROOT=http://localhost:8000/api/v1
 VUE_APP_OAUTH_API_ROOT=http://localhost:8000/oauth/
+VUE_APP_MAPTILER_API_KEY=myMapTilerKey

web/.eslintrc.js

@@ -0,0 +1,19 @@
+// .eslintrc.js
+module.exports = {
+    "extends": [
+        "plugin:vue/base",
+    ],
+    "parser": "vue-eslint-parser",
+    "parserOptions": {
+        "parser": "@typescript-eslint/parser",
+        "extraFileExtensions": [".vue"],
+        "ecmaVersion": 2021
+    },
+    "plugins": [
+        "vue",
+        "@typescript-eslint"
+    ],
+    rules: {
+      'vue/script-setup-uses-vars': 'error',
+    }
+}

web/package.json

@@ -16,6 +16,7 @@
     "buffer": "^6.0.3",
     "core-js": "^3.8.3",
     "git-describe": "^4.1.1",
+    "html2canvas": "^1.4.1",
     "lodash": "^4.17.21",
     "maplibre-gl": "^4.6.0",
     "shpjs": "^4.0.4",

web/public/index.html

@@ -5,7 +5,10 @@
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
-  <title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&icon_names=format_line_spacing" />  <title>
     UVDAT
   </title>
 </head>