From a22ff2f36b50beff89975d85521ebf63cf7dfada Mon Sep 17 00:00:00 2001
From: pietervdvn <pietervdvn@posteo.net>
Date: Tue, 26 Apr 2022 10:30:19 +0200
Subject: [PATCH] More climbing styling

---
 .../layers/climbing_area/climbing_area.json   |   2 +-
 .../layers/climbing_route/climbing_route.json |  11 +-
 assets/themes/climbing/climbing.css           |  44 ++++++++
 assets/themes/climbing/climbing.json          | 100 +++---------------
 assets/themes/climbing/css-test.html          |  23 ++++
 5 files changed, 91 insertions(+), 89 deletions(-)
 create mode 100644 assets/themes/climbing/climbing.css
 create mode 100644 assets/themes/climbing/css-test.html

diff --git a/assets/layers/climbing_area/climbing_area.json b/assets/layers/climbing_area/climbing_area.json
index 22c0d2884..22b694ba5 100644
--- a/assets/layers/climbing_area/climbing_area.json
+++ b/assets/layers/climbing_area/climbing_area.json
@@ -93,7 +93,7 @@
   },
   "calculatedTags": [
     "_contained_climbing_routes_properties=feat.overlapWith('climbing_route').map(f => f.feat.properties).map(p => {return {id: p.id, name: p.name, 'climbing:grade:french': p['climbing:grade:french'], 'climbing:length': p['climbing:length']} })",
-    "_contained_climbing_routes=feat.get('_contained_climbing_routes_properties')?.map(p => `<li><a href='#${p.id}'>${p.name ?? 'climbing route'}</a> (<b>${p['climbing:grade:french'] ?? 'unknown difficulty'}</b>, ${p['climbing:length'] ?? 'unkown length'} meter)</li>`).join('')",
+    "_contained_climbing_routes=feat.get('_contained_climbing_routes_properties')?.map(p => `<li><a href='#${p.id}'>${p.name ?? 'climbing route'}</a> (<b class='climbing-${p['__difficulty:char']} rounded-full p-l-1 p-r-1'>${p['climbing:grade:french'] ?? 'unknown difficulty'}</b>, ${p['climbing:length'] ?? 'unkown length'} meter)</li>`).join('')",
     "_contained_climbing_route_ids=feat.get('_contained_climbing_routes_properties')?.map(p => p.id)",
     "_difficulty_hist=feat.get('_contained_climbing_routes_properties')?.map(p => p['climbing:grade:french'])?.filter(p => (p ?? null) !== null)?.sort()",
     "_difficulty_max=feat.get('_difficulty_hist')?.at(-1)",
diff --git a/assets/layers/climbing_route/climbing_route.json b/assets/layers/climbing_route/climbing_route.json
index a562c753c..d95d5748b 100644
--- a/assets/layers/climbing_route/climbing_route.json
+++ b/assets/layers/climbing_route/climbing_route.json
@@ -217,9 +217,18 @@
       ],
       "label": {
         "mappings": [
+          {
+            "if": {
+              "and": [
+              "climbing:grade:french~*",
+                "name~*"
+              ]
+            },
+            "then": "<div class='w-max p-1 rounded-xl' style='background: white;'>{name} <span class='climbing-{__difficulty:char}'>{climbing:grade:french}</span></div>"
+          },
           {
             "if": "name~*",
-            "then": "<div style='background: white; padding: 0.25em; border-radius:0.5em'>{name}</div>"
+            "then": "<div  class='w-max p-1 rounded-xl' style='background: white;'>{name}</div>"
           }
         ]
       }
diff --git a/assets/themes/climbing/climbing.css b/assets/themes/climbing/climbing.css
new file mode 100644
index 000000000..b27086c6f
--- /dev/null
+++ b/assets/themes/climbing/climbing.css
@@ -0,0 +1,44 @@
+/* a few extra colours, mostly colours difficulties. Debuggable in css-test.html */
+
+.climbing- {
+    /*Fallback in case of unrecognized difficulty*/
+    background: white;
+    border: 1px solid black;
+}
+
+.climbing-2 {
+    background: #a2ff00;
+}
+
+.climbing-3 {
+    background: #a2ff00;
+}
+
+.climbing-4 {
+    background: yellow;
+}
+
+.climbing-5 {
+    background: blue;
+    color: white;
+}
+
+.climbing-6 {
+    background: red;
+    color: white;
+}
+
+.climbing-7 {
+    background: fuchsia;
+}
+
+.climbing-8 {
+    background: black;
+    color: white;
+}
+
+.climbing-9 {
+    background: black;
+    color: white;
+}
+
diff --git a/assets/themes/climbing/climbing.json b/assets/themes/climbing/climbing.json
index 043485b54..66a53b182 100644
--- a/assets/themes/climbing/climbing.json
+++ b/assets/themes/climbing/climbing.json
@@ -42,16 +42,17 @@
   "startLon": 0,
   "startZoom": 1,
   "widenFactor": 1.5,
+  "customCss": "./assets/themes/climbing/climbing.css",
   "layers": [
     {
       "builtin": [
-    "climbing_club",
-    "climbing_gym",
-    "climbing_route",
-    "climbing_area",
-    "climbing_opportunity"
+        "climbing_club",
+        "climbing_gym",
+        "climbing_route",
+        "climbing_area",
+        "climbing_opportunity"
       ],
-      "override":  {
+      "override": {
         "allowMove": {
           "enableRelocation": false,
           "enableImproveAccuracy": true
@@ -76,93 +77,15 @@
           {
             "id": "Min difficulty",
             "condition": "__difficulty_min~*",
-            "then": "<div class='w-8 flex justify-center rounded-left-full border border-black' style='margin-right: -5px; background-color:#ebf224'> {__difficulty_min}</div>",
-
-            "mappings": [
-              {
-                "if": "__difficulty_min~(2|3).*",
-                "then": "<div class='w-8 flex justify-center rounded-left-full' style='margin-right: -5px; background-color:#ebf224'> {__difficulty_min}</div>"
-              },
-              {
-                "if": "__difficulty_min~4.*",
-                "then": "<div class='w-8 flex justify-center rounded-left-full' style='margin-right: -5px; background-color:#7af224'> {__difficulty_min}</div>"
-              },
-              {
-                "if": "__difficulty_min~5.*",
-                "then": "<div class='w-8 flex justify-center rounded-left-full' style='margin-right: -5px; background-color:#f24a24'> {__difficulty_min}</div>"
-              },
-              {
-                "if": "__difficulty_min~6.*",
-                "then": "<div class='w-8 flex justify-center rounded-left-full' style='margin-right: -5px; background-color:#244af2'> {__difficulty_min}</div>"
-              },
-              {
-                "if": "__difficulty_min~(7|8).*",
-                "then": "<div class='w-8 flex justify-center rounded-left-full' style='margin-right: -5px; background-color:#e904ed'> {__difficulty_min}</div>"
-              },
-              {
-                "if": "__difficulty_min~*",
-                "then": "<div class='w-8 flex justify-center rounded-left-full' style='margin-right: -5px; background-colour:black'> {__difficulty_min}</div>"
-              }
-            ]
+            "render": "<div class='w-8 flex justify-center rounded-left-full climbing-{__difficulty_min:char}' style='margin-right: -5px;'> {__difficulty_min}</div>"
           },
           {
             "id": "max difficulty",
             "condition": "__difficulty_max~*",
-            "then": "<div class='w-8 flex justify-center rounded-right-full border border-black' style='background-color:#ebf224'> {__difficulty_max}</div>",
-            "mappings": [
-              {
-                "if": "__difficulty_max~(2|3).*",
-                "then": "<div class='w-8 flex justify-center rounded-right-full' style='background-color:#ebf224'> {__difficulty_max}</div>"
-              },
-              {
-                "if": "__difficulty_max~4.*",
-                "then": "<div class='w-8 flex justify-center rounded-right-full' style='background-color:#7af224'> {__difficulty_max}</div>"
-              },
-              {
-                "if": "__difficulty_max~5.*",
-                "then": "<div class='w-8 flex justify-center rounded-right-full' style='background-color:#f24a24'> {__difficulty_max}</div>"
-              },
-              {
-                "if": "__difficulty_max~6.*",
-                "then": "<div class='w-8 flex justify-center rounded-right-full' style='background-color:#244af2'> {__difficulty_max}</div>"
-              },
-              {
-                "if": "__difficulty_max~(7|8).*",
-                "then": "<div class='w-8 flex justify-center rounded-right-full' style='background-color:#e904ed'> {__difficulty_max}</div>"
-              },
-              {
-                "if": "__difficulty_max~*",
-                "then": "<div class='w-8 flex justify-center rounded-right-full' style='background-colour:black'> {__difficulty_max}</div>"
-              }
-            ]
+            "render": "<div class='w-8 flex justify-center rounded-right-full climbing-{__difficulty_max:char}'> {__difficulty_max}</div>"
           },
           {
-            "mappings": [
-              {
-                "if": "climbing:grade:french~3.*",
-                "then": "<div class='rounded-full px-1' style='background-color:#ebf224'> {climbing:grade:french}</div>"
-              },
-              {
-                "if": "climbing:grade:french~4.*",
-                "then": "<div class='rounded-full pl-2 pr-2' style='background-color:#7af224'> {climbing:grade:french}</div>"
-              },
-              {
-                "if": "climbing:grade:french~5.*",
-                "then": "<div class='rounded-full pl-2 pr-2' style='background-color:#f24a24'> {climbing:grade:french}</div>"
-              },
-              {
-                "if": "climbing:grade:french~6.*",
-                "then": "<div class='text-white rounded-full pl-2 pr-2' style='background-color:#244af2'> {climbing:grade:french}</div>"
-              },
-              {
-                "if": "climbing:grade:french~7.*",
-                "then": "<div class='text-white rounded-full pl-2 pr-2' style='background-color:#e904ed'> {climbing:grade:french}</div>"
-              },
-              {
-                "if": "climbing:grade:french~*",
-                "then": "<div class='text-white rounded-full px-2' style='background-colour:black'> {climbing:grade:french}</div>"
-              }
-            ]
+            "render": "<div class='flex justify-center rounded-full pl-1 pr-1 climbing-{__difficulty:char}'> {climbing:grade:french}</div>"
           }
         ],
         "+calculatedTags": [
@@ -176,6 +99,9 @@
           "_embedding_feature:id=feat.get('_embedding_features_with_access')?.id",
           "__difficulty_max= feat.properties['climbing:grade:french:max'] ?? feat.properties['_difficulty_max']",
           "__difficulty_min= feat.properties['climbing:grade:french:min'] ?? feat.properties['_difficulty_min']",
+          "__difficulty_max:char= feat.properties['__difficulty_max']?.at(0)",
+          "__difficulty_min:char= feat.properties['__difficulty_min']?.at(0)",
+          "__difficulty:char= feat.properties['climbing:grade:french']?.at(0)",
           "__bolts_max= feat.get('climbing:bolts:max') ?? feat.get('climbing:bolts') ?? feat.get('_bolts_max')"
         ],
         "units+": [
diff --git a/assets/themes/climbing/css-test.html b/assets/themes/climbing/css-test.html
new file mode 100644
index 000000000..f96887813
--- /dev/null
+++ b/assets/themes/climbing/css-test.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>CSS-debugging for climbing theme</title>
+    <link href="/css/index-tailwind-output.css" rel="stylesheet"/>
+    <link href="/assets/themes/climbing/climbing.css" rel="stylesheet"/>
+</head>
+<body>
+
+        <div class="rounded-full climbing-2">2</div>
+        
+        <div class="rounded-full climbing-3">3</div>
+        <div class="rounded-full climbing-4">4</div>
+        <div class="rounded-full climbing-5">5</div>
+        <div class="rounded-full climbing-6">6</div>
+        <div class="rounded-full climbing-7">7</div>
+        <div class="rounded-full climbing-8">8</div>
+        <div class="rounded-full climbing-9">9</div>
+        <div class="rounded-full climbing-">X</div>
+
+</body>
+</html>
\ No newline at end of file