From cebc4950e61fc92365bcb8d74d886aad3823f7b9 Mon Sep 17 00:00:00 2001
From: Eugene Burmakin <iamfrey@gmail.com>
Date: Mon, 13 Jan 2025 21:57:19 +0100
Subject: [PATCH] Add info modal for speed colored polylines

---
 app/javascript/maps/polylines.js        |  4 ++--
 app/views/map/_settings_modals.html.erb | 29 +++++++++++++++++++++++++
 2 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/app/javascript/maps/polylines.js b/app/javascript/maps/polylines.js
index 3ce93c33..b2f1e94a 100644
--- a/app/javascript/maps/polylines.js
+++ b/app/javascript/maps/polylines.js
@@ -69,8 +69,8 @@ const colorStops = [
   { speed: 0, color: '#00ff00' },    // Stationary/very slow (green)
   { speed: 15, color: '#00ffff' },   // Walking/jogging (cyan)
   { speed: 30, color: '#ff00ff' },   // Cycling/slow driving (magenta)
-  { speed: 50, color: '#ff3300' },   // Urban driving (orange-red)
-  { speed: 100, color: '#ffff00' }   // Highway driving (yellow)
+  { speed: 50, color: '#ffff00' },   // Urban driving (yellow)
+  { speed: 100, color: '#ff3300' }   // Highway driving (red)
 ].map(stop => ({
   ...stop,
   rgb: hexToRGB(stop.color)
diff --git a/app/views/map/_settings_modals.html.erb b/app/views/map/_settings_modals.html.erb
index 09ddd165..5376a585 100644
--- a/app/views/map/_settings_modals.html.erb
+++ b/app/views/map/_settings_modals.html.erb
@@ -112,3 +112,32 @@
   </div>
   <label class="modal-backdrop" for="points_rendering_mode_info">Close</label>
 </div>
+
+<input type="checkbox" id="speed_colored_polylines_info" class="modal-toggle" />
+<div class="modal focus:z-99" role="dialog">
+  <div class="modal-box">
+    <h3 class="text-lg font-bold">Speed-colored routes</h3>
+    <p class="py-4">
+      This checkbox will color the routes based on the speed of each segment.
+    </p>
+    <p class="py-4">
+      Uncheck this checkbox if you want to disable the speed-colored routes.
+    </p>
+    <p class="py-4">
+      Speed coloring is based on the following color stops:
+
+      <code>
+        0 km/h — green, stationary or walking
+        <br>
+        15 km/h — cyan, jogging
+        <br>
+        30 km/h — magenta, cycling
+        <br>
+        50 km/h — yellow, urban driving
+        <br>
+        100 km/h — orange-red, highway driving
+      </code>
+    </p>
+  </div>
+  <label class="modal-backdrop" for="speed_colored_polylines_info">Close</label>
+</div>