Add binoculars theme, auto reformat everything

.devcontainer/devcontainer.json

@@ -1,27 +1,25 @@
 // For format details, see https://aka.ms/devcontainer.json. For config options, see the README at:
 // https://github.com/microsoft/vscode-dev-containers/tree/v0.187.0/containers/typescript-node
 {
-    "name": "MapComplete",
-    "build": {
-        "dockerfile": "Dockerfile",
-        // Update 'VARIANT' to pick a Node version: 12, 14, 16
-        "args": {
-            "VARIANT": "14"
-        }
-    },
+  "name": "MapComplete",
+  "build": {
+    "dockerfile": "Dockerfile",
+    // Update 'VARIANT' to pick a Node version: 12, 14, 16
+    "args": {
+      "VARIANT": "14"
+    }
+  },
+  // Set *default* container specific settings.json values on container create.
+  "settings": {},
+  // Add the IDs of extensions you want installed when the container is created.
+  "extensions": [],
+  // Use 'forwardPorts' to make a list of ports inside the container available locally.
+  "forwardPorts": [
+    1234
+  ],
+  // Use 'postCreateCommand' to run commands after the container is created.
+  //"postCreateCommand": "npm run init",
 
-    // Set *default* container specific settings.json values on container create.
-    "settings": {},
-
-    // Add the IDs of extensions you want installed when the container is created.
-    "extensions": [],
-
-    // Use 'forwardPorts' to make a list of ports inside the container available locally.
-    "forwardPorts": [1234],
-
-    // Use 'postCreateCommand' to run commands after the container is created.
-    //"postCreateCommand": "npm run init",
-
-    // Comment out connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
-    "remoteUser": "node"
+  // Comment out connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
+  "remoteUser": "node"
 }

.github/pull_request_template.md

@@ -1,9 +1,8 @@
-
 Opening a pull request on MapComplete
 =====================================
 
-Hey! Thanks for opening a pull request on Mapcomplete! This probably means you want to add a new theme - if so, please follow the checklist below.
-If this pull request is for some other issue, please ignore the template.
+Hey! Thanks for opening a pull request on Mapcomplete! This probably means you want to add a new theme - if so, please
+follow the checklist below. If this pull request is for some other issue, please ignore the template.
 
 Adding your new theme
 ---------------------
@@ -14,4 +13,6 @@ To making merging smooth, please make sure that each of the following conditions
 
 - [ ] The codebase is GPL-licensed. By opening a pull request, the new theme will be GPL too
 - [ ] All images are included in the pull request and no images are loaded from an external service (e.g. Wikipedia)
-- [ ] The [guidelines on how to make your own theme](https://github.com/pietervdvn/MapComplete/blob/master/Docs/Making_Your_Own_Theme.md) are read and followed
+- [ ] 
+  The [guidelines on how to make your own theme](https://github.com/pietervdvn/MapComplete/blob/master/Docs/Making_Your_Own_Theme.md)
+  are read and followed

.github/workflows/deploy_pietervdvn.yml

@@ -1,42 +1,42 @@
 name: Deployment on pietervdvn
 on:
   push
-      
+
 jobs:
   build:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
-      
+
       - name: Set up Node.js
         uses: actions/[email protected]
         with:
-            node-version: '15'
+          node-version: '15'
         env:
-            ACTIONS_ALLOW_UNSECURE_COMMANDS: 'true'
-          
+          ACTIONS_ALLOW_UNSECURE_COMMANDS: 'true'
+
       - name: install deps
         run: npm ci
-          
+
       - name: create generated dir
         run: mkdir ./assets/generated
 
       - name: create stub themes
         run: "echo '{\"layers\": [], \"themes\": []}' > ./assets/generated/known_layers_and_themes.json"
-  
+
       - name: Prepare deploy
         run: npm run prepare-deploy
-        
+
       - name: Clone deployment repo
         env:
           DEPLOY_KEY_PIETERVDVN: ${{ secrets.DEPLOY_KEY_PIETERVDVN }}
-        run: | 
+        run: |
           echo "Cloning destination repo"
           git config --global user.email "[email protected]"
           git config --global user.name "pietervdvn"
           git clone --depth 1 --single-branch --branch master "https://x-access-token:[email protected]/pietervdvn/pietervdvn.github.io.git"
           echo "Destination repo is cloned"
-          
+
       - name: "Copying files"
         run: |
           echo "Deploying"

.github/workflows/pull_request_check.yml

@@ -1,38 +1,38 @@
 name: Pull request check
 on:
   pull_request_target:
-    types: [opened, edited, synchronize, ready_for_review, review_requested]
+    types: [ opened, edited, synchronize, ready_for_review, review_requested ]
 
 jobs:
   build:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
-      
+
       - uses: actions/checkout@v2
       - name: Set up Node.js
         uses: actions/[email protected]
         env:
-            ACTIONS_ALLOW_UNSECURE_COMMANDS: 'true'
-          
+          ACTIONS_ALLOW_UNSECURE_COMMANDS: 'true'
+
       - name: install deps
         run: npm ci
-          
+
       - name: create generated dir
         run: mkdir ./assets/generated
 
       - name: create stub themes
         run: "echo '{\"layers\": [], \"themes\": []}' > ./assets/generated/known_layers_and_themes.json"
-  
+
       - name: generate translations
         run: npm run generate:translations
-        
+
       - name: Compile license info
         run: npm run generate:licenses
-     
+
       - name: Compile and validate themes and layers
-        run: npm run validate:layeroverview 
-        
+        run: npm run validate:layeroverview
+
       - name: Validate license info
         run: npm run validate:licenses
 
@@ -45,10 +45,10 @@ jobs:
           else
             echo "VALIDATION_FAILED=false" >> $GITHUB_ENV
           fi
-          
+
       - name: Test variable
         run: echo "${{ env.VALIDATION_FAILED }}"
-        
+
       - name: Archive reports
         uses: actions/upload-artifact@v2
         if: >-
@@ -58,7 +58,7 @@ jobs:
           path: |
             layer_report.txt
             missing_licenses.txt
-        
+
       - name: Comment PR
         uses: allthatjazzleo/actions-pull-request-add-comment@master
         if: >-

.github/workflows/theme_validation_and_deploy.yml

@@ -3,42 +3,42 @@ on:
   push:
     branches:
       - master
-      
+
 jobs:
   build:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
-      
+
       - name: Set up Node.js
         uses: actions/[email protected]
         with:
-            node-version: '15'
+          node-version: '15'
         env:
-            ACTIONS_ALLOW_UNSECURE_COMMANDS: 'true'
-          
+          ACTIONS_ALLOW_UNSECURE_COMMANDS: 'true'
+
       - name: install deps
         run: npm ci
-          
+
       - name: create generated dir
         run: mkdir ./assets/generated
 
       - name: create stub themes
         run: "echo '{\"layers\": [], \"themes\": []}' > ./assets/generated/known_layers_and_themes.json"
-  
+
       - name: Prepare deploy
         run: npm run prepare-deploy
-        
+
       - name: Clone deployment repo
         env:
           DEPLOY_KEY: ${{ secrets.DEPLOY_KEY }}
-        run: | 
+        run: |
           echo "Cloning destination repo"
           git config --global user.email "[email protected]"
           git config --global user.name "MapComplete"
           git clone --depth 1 --single-branch --branch main "https://x-access-token:[email protected]/MapComplete/mapcomplete.github.io.git"
           echo "Destination repo is cloned"
-          
+
       - name: "Copying files"
         run: |
           echo "Deploying"

.vscode/settings.json

@@ -1,3 +1,3 @@
 {
-    "files.eol": "\n"
+  "files.eol": "\n"
 }

Customizations/SharedTagRenderings.ts

@@ -5,17 +5,17 @@ import TagRenderingConfig from "../Models/ThemeConfig/TagRenderingConfig";
 
 export default class SharedTagRenderings {
 
-    public static SharedTagRendering : Map<string, TagRenderingConfig> = SharedTagRenderings.generatedSharedFields();
-    public static SharedIcons : Map<string, TagRenderingConfig> = SharedTagRenderings.generatedSharedFields(true);
+    public static SharedTagRendering: Map<string, TagRenderingConfig> = SharedTagRenderings.generatedSharedFields();
+    public static SharedIcons: Map<string, TagRenderingConfig> = SharedTagRenderings.generatedSharedFields(true);
 
-    private static generatedSharedFields(iconsOnly = false) : Map<string, TagRenderingConfig>{
+    private static generatedSharedFields(iconsOnly = false): Map<string, TagRenderingConfig> {
         const dict = new Map<string, TagRenderingConfig>();
 
         function add(key, store) {
             try {
                 dict.set(key, new TagRenderingConfig(store[key], undefined, `SharedTagRenderings.${key}`))
             } catch (e) {
-                if(!Utils.runningFromConsole){
+                if (!Utils.runningFromConsole) {
                     console.error("BUG: could not parse", key, " from questions.json or icons.json - this error happened during the build step of the SharedTagRenderings", e)
 
                 }

Docs/Architecture.md

@@ -1,7 +1,8 @@
 Architecture
 ============
 
-This document aims to give an architectural overview of how MapCompelte is built. It should give some feeling on how everything fits together.
+This document aims to give an architectural overview of how MapCompelte is built. It should give some feeling on how
+everything fits together.
 
 Servers?
 --------
@@ -11,24 +12,30 @@ There are no servers for MapComplete, all services are configured by third parti
 Minimal HTML - Minimal CSS
 --------------------------
 
-There is quasi no HTML. Most of the components are generated by TypeScript and attached dynamically. The html is a barebones skeleton which serves every theme.
+There is quasi no HTML. Most of the components are generated by TypeScript and attached dynamically. The html is a
+barebones skeleton which serves every theme.
 
 
 The UIEventSource
 -----------------
 
-Most (but not all) objects in MapComplete get all the state they need as a parameter in the constructor. However, as is the case with most graphical applications, there are quite some dynamical values.
+Most (but not all) objects in MapComplete get all the state they need as a parameter in the constructor. However, as is
+the case with most graphical applications, there are quite some dynamical values.
 
-All values which change regularly are wrapped into a [UIEventSource](https://github.com/pietervdvn/MapComplete/blob/master/Logic/UIEventSource.ts).
-An UiEventSource is a wrapper containing a value and offers the possibility to add a callback function which is called every time the value is changed (with setData)
+All values which change regularly are wrapped into
+a [UIEventSource](https://github.com/pietervdvn/MapComplete/blob/master/Logic/UIEventSource.ts). An UiEventSource is a
+wrapper containing a value and offers the possibility to add a callback function which is called every time the value is
+changed (with setData)
 
-Furthermore, there are various helper functions, the most widely used one being `map` - generating a new event source with the new value applied.
-Note that 'map' will also absorb some changes, e.g. `const someEventSource : UIEventSource<string[]> = ... ; someEventSource.map(list = list.length)` will only trigger when the length of the list has changed.	
+Furthermore, there are various helper functions, the most widely used one being `map` - generating a new event source
+with the new value applied. Note that 'map' will also absorb some changes,
+e.g. `const someEventSource : UIEventSource<string[]> = ... ; someEventSource.map(list = list.length)` will only trigger
+when the length of the list has changed.
 
-An object which receives an UIEventSource is responsible of responding onto changes of this object. This is especially true for UI-components
+An object which receives an UIEventSource is responsible of responding onto changes of this object. This is especially
+true for UI-components
 
-UI
---```
+UI --```
 
 export default class MyComponent {
 
@@ -37,6 +44,7 @@ export default class MyComponent {
     }
 
 }
+
 ```
 
 The Graphical User Interface is composed of various UI-elements. For every UI-element, there is a BaseUIElement which creates the actual HTMLElement when needed.
@@ -55,9 +63,9 @@ For example:
 
 ```
 
-const src : UIEventSource<string> = ... // E.g. user input, data that will be updated...
-new VariableUIElement(src)
-    .AttachTo('some-id') // attach it to the html
+const src : UIEventSource<string> = ... // E.g. user input, data that will be updated... new VariableUIElement(src)
+.AttachTo('some-id') // attach it to the html
+
 ```
 
 Note that every component offers support for `onClick( someCallBack)`
@@ -109,6 +117,7 @@ This can be constructed as following:
 
 
 ```
+
     // We construct the dropdown element with values and labelshttps://tailwindcss.com/
     const isOpened = new Dropdown<string>(Translations.t.is_this_shop_opened_during_holidays,
         [
@@ -127,6 +136,7 @@ This can be constructed as following:
          )
 
     return new Combine([isOpened, extraQuestion])
+
 ```
 
 ### Constructing a special class
@@ -144,6 +154,7 @@ export default class MyComponent {
     }
 
 }
+
 ```
 
 2. Construct the needed UI in the constructor
@@ -166,6 +177,7 @@ export default class MyComponent {
     }
 
 }
+
 ```
 
 3. You'll notice that you'll end up with one certain component (in this example the combine) to wrap it all together. Change the class to extend this type of component and use super to wrap it all up: