From 22de0d15f0fe1c87190293f3bdf0f0edf62b7ca2 Mon Sep 17 00:00:00 2001
From: Foxino <pauljoncrossley@gmail.com>
Date: Wed, 22 Nov 2023 15:30:02 +0000
Subject: [PATCH] visual prompting for zoom level on edit/new proj

---
 app/views/layouts/application.html.erb | 149 +++++++++++++++++++++++++
 app/views/projects/_form.html.erb      | 105 +----------------
 app/views/projects/edit.html.erb       | 108 +-----------------
 3 files changed, 156 insertions(+), 206 deletions(-)

diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 4e5d31da..10cc58f1 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -73,4 +73,153 @@
     </div>
     <%= yield %>
   </body>
+
+  <script>
+
+    function zoomLevel(area){
+            
+        if(area < 5000000) return 23
+        if(area < 10000000) return 22
+        if(area < 100000000) return 21
+        if(area < 100000000000) return 20
+        
+        return 18
+    }
+
+    function showZoom(){
+        const extent = document.getElementById('project_extent').value.split(',').map(Number)
+        const area = ol.extent.getArea(extent) / 100
+
+        if(isNaN(area)){
+            document.getElementById('zoom').innerHTML = 'No valid extent selected'
+            document.getElementById('zoom').style.backgroundColor = 'red'
+        }else{
+            const zoom = zoomLevel(area)
+            const zoomCategory = zoom > 20 ? ['green', 'high'] : zoom < 20 ? ['orange', 'low'] : ['yellow', 'medium']
+            
+
+            document.getElementById('zoom').innerHTML = `${zoomCategory[1]} resolution, zoom level: ${zoom}`
+            document.getElementById('zoom').style.backgroundColor = zoomCategory[0]
+        }
+
+
+    }
+
+    function mapUpdate(formGroupID){
+
+        const exinput = document.getElementById(formGroupID)
+        if(!exinput) return
+
+        showZoom()
+
+        if(document.getElementById('map')) document.getElementById('map').innerHTML = ''
+        const isMac = navigator.platform.toUpperCase().indexOf('MAC')>=0;
+        
+        if(isMac){
+            document.getElementById('guide').innerHTML = 'Select a new extent by holding down the command key and dragging a box on the map.'
+        }else{
+            document.getElementById('guide').innerHTML = 'Select a new extent by holding down the control key and dragging a box on the map.'
+        }
+
+        const extentInput = document.getElementById('project_extent');
+        const extent = extentInput.value.split(',').map(Number);
+
+        const map = new ol.Map({
+            target: 'map',
+            layers: [
+            new ol.layer.Tile({
+                source: new ol.source.OSM(),
+            }),
+            ],
+            view: new ol.View({
+            center: [(extent[0]+extent[2])/2, (extent[1]+extent[3])/2],
+            zoom: 9,
+            }),
+        });
+
+        const extentFeature = new ol.Feature(
+            new ol.geom.Polygon([
+            [
+                [extent[0], extent[1]],
+                [extent[0], extent[3]],
+                [extent[2], extent[3]],
+                [extent[2], extent[1]],
+                [extent[0], extent[1]],
+            ],
+            ])
+        );
+    
+        const extentLayer = new ol.layer.Vector({
+            source: new ol.source.Vector({
+            features: [extentFeature],
+            }),
+            style: new ol.style.Style({
+            stroke: new ol.style.Stroke({
+                color: 'limegreen',
+                width: 2,
+            }),
+            fill: new ol.style.Fill({
+                color: 'rgba(0, 155, 0, 0.1)',
+            }),
+            }),
+        });
+    
+        map.addLayer(extentLayer);
+
+        const dragBox = new ol.interaction.DragBox({
+            condition: ol.events.condition.platformModifierKeyOnly
+        })
+
+        map.addInteraction(dragBox)
+
+        dragBox.on('boxend', () => {
+            const extent = dragBox.getGeometry().getExtent()     
+            const extentString = extent.join(',')
+            extentInput.value = extentString
+
+            showZoom()
+
+            extentFeature.setGeometry(
+            new ol.geom.Polygon([
+                [
+                [extent[0], extent[1]],
+                [extent[0], extent[3]],
+                [extent[2], extent[3]],
+                [extent[2], extent[1]],
+                [extent[0], extent[1]],
+                ],
+            ])
+            );
+        })
+
+        function updateMap() {
+            console.log('update map')
+
+            showZoom()
+
+            const extent = extentInput.value.split(',').map(Number);
+    
+            map.getView().setCenter([(extent[0]+extent[2])/2, (extent[1]+extent[3])/2]);
+    
+            extentFeature.setGeometry(
+            new ol.geom.Polygon([
+                [
+                [extent[0], extent[1]],
+                [extent[0], extent[3]],
+                [extent[2], extent[3]],
+                [extent[2], extent[1]],
+                [extent[0], extent[1]],
+                ],
+            ])
+            );
+        }
+    
+        extentInput.addEventListener('input', updateMap);
+
+    }
+
+  </script>
 </html>
+
+
+
diff --git a/app/views/projects/_form.html.erb b/app/views/projects/_form.html.erb
index ee4fe5e4..797dba38 100644
--- a/app/views/projects/_form.html.erb
+++ b/app/views/projects/_form.html.erb
@@ -19,6 +19,7 @@
     <%= form.label :extent %>
     <span data-form-target="error" data-field="extent"></span>
     <%= form.text_field :extent, class: 'form-control', data: { "form-target": "field", field: "extent" }, value: "-49469.089243, 6570068.329224, 55641.379277, 6669018.450996" %>
+    <span id="zoom" class="badge"></span>
   </div>
 
   <div id="map" style="width: 100%; height: 400px; margin-bottom: 10px;"></div>
@@ -35,109 +36,9 @@
 
 <script>
 
-    document.addEventListener("turbolinks:load", function() {
 
-      
-        const exinput = document.getElementById('PROJEDIT3303')
-        if(!exinput) return
-
-        if(document.getElementById('map')) document.getElementById('map').innerHTML = ''
-        const isMac = navigator.platform.toUpperCase().indexOf('MAC')>=0;
-        
-        if(isMac){
-          document.getElementById('guide').innerHTML = 'Select a new extent by holding down the command key and dragging a box on the map.'
-        }else{
-          document.getElementById('guide').innerHTML = 'Select a new extent by holding down the control key and dragging a box on the map.'
-        }
-
-        const extentInput = document.getElementById('project_extent');
-        const extent = extentInput.value.split(',').map(Number);
-
-        const map = new ol.Map({
-          target: 'map',
-          layers: [
-            new ol.layer.Tile({
-              source: new ol.source.OSM(),
-            }),
-          ],
-          view: new ol.View({
-            center: [(extent[0]+extent[2])/2, (extent[1]+extent[3])/2],
-            zoom: 9,
-          }),
-        });
-
-        const extentFeature = new ol.Feature(
-          new ol.geom.Polygon([
-            [
-              [extent[0], extent[1]],
-              [extent[0], extent[3]],
-              [extent[2], extent[3]],
-              [extent[2], extent[1]],
-              [extent[0], extent[1]],
-            ],
-          ])
-        );
-    
-        const extentLayer = new ol.layer.Vector({
-          source: new ol.source.Vector({
-            features: [extentFeature],
-          }),
-          style: new ol.style.Style({
-            stroke: new ol.style.Stroke({
-              color: 'limegreen',
-              width: 2,
-            }),
-            fill: new ol.style.Fill({
-              color: 'rgba(0, 155, 0, 0.1)',
-            }),
-          }),
-        });
-    
-        map.addLayer(extentLayer);
-
-        const dragBox = new ol.interaction.DragBox({
-          condition: ol.events.condition.platformModifierKeyOnly
-        })
-
-        map.addInteraction(dragBox)
-
-        dragBox.on('boxend', () => {
-          const extent = dragBox.getGeometry().getExtent()     
-          const extentString = extent.join(',')
-          extentInput.value = extentString
-
-          extentFeature.setGeometry(
-            new ol.geom.Polygon([
-              [
-                [extent[0], extent[1]],
-                [extent[0], extent[3]],
-                [extent[2], extent[3]],
-                [extent[2], extent[1]],
-                [extent[0], extent[1]],
-              ],
-            ])
-          );
-        })
-        function updateMap() {
-          console.log('update map')
-          const extent = extentInput.value.split(',').map(Number);
-    
-          map.getView().setCenter([(extent[0]+extent[2])/2, (extent[1]+extent[3])/2]);
-    
-          extentFeature.setGeometry(
-            new ol.geom.Polygon([
-              [
-                [extent[0], extent[1]],
-                [extent[0], extent[3]],
-                [extent[2], extent[3]],
-                [extent[2], extent[1]],
-                [extent[0], extent[1]],
-              ],
-            ])
-          );
-        }
-    
-        extentInput.addEventListener('input', updateMap);
+   document.addEventListener("turbolinks:load", function() {
+        mapUpdate('PROJEDIT3303')
     });
 </script>
 
diff --git a/app/views/projects/edit.html.erb b/app/views/projects/edit.html.erb
index 3cfc4c9a..86ab6b9e 100644
--- a/app/views/projects/edit.html.erb
+++ b/app/views/projects/edit.html.erb
@@ -9,7 +9,8 @@
     <div class="form-group" id="PROJEDIT303">
         <%= f.label :extent %>
         <span data-form-target="error" data-field="extent"></span>
-        <%= f.text_field :extent, value: (@project.extent.present? ? @project.extent.join(', ') : "-49469.089243, 6570068.329224, 55641.379277, 6669018.450996"), class: 'form-control', data: { "form-target": "field", field: "extent" } %>
+        <%= f.text_field :extent, value: (@project.extent.present? ? @project.extent.join(', ') : "-49469.089243, 6570068.329224, 55641.379277, 6669018.450996"), class: 'form-control', data: { "form-target": "field", field: "extent" }  %>
+        <span id="zoom" class="badge"></span>
     </div>
     <div id="map" style="width: 100%; height: 400px; margin-bottom: 10px;"></div>
     <div id="guide" style="margin-bottom: 10px"></div>
@@ -20,109 +21,8 @@
 <script>
 
     document.addEventListener("turbolinks:load", function() {
+        mapUpdate('PROJEDIT303')
+    });
 
-        const exinput = document.getElementById('PROJEDIT303')
-        if(!exinput) return
-
-
-        if(document.getElementById('map')) document.getElementById('map').innerHTML = ''
-        const isMac = navigator.platform.toUpperCase().indexOf('MAC')>=0;
-        
-        if(isMac){
-            document.getElementById('guide').innerHTML = 'Select a new extent by holding down the command key and dragging a box on the map.'
-        }else{
-            document.getElementById('guide').innerHTML = 'Select a new extent by holding down the control key and dragging a box on the map.'
-        }
-
-        const extentInput = document.getElementById('project_extent');
-        const extent = extentInput.value.split(',').map(Number);
-
-        const map = new ol.Map({
-            target: 'map',
-            layers: [
-            new ol.layer.Tile({
-                source: new ol.source.OSM(),
-            }),
-            ],
-            view: new ol.View({
-            center: [(extent[0]+extent[2])/2, (extent[1]+extent[3])/2],
-            zoom: 9,
-            }),
-        });
-
-        const extentFeature = new ol.Feature(
-            new ol.geom.Polygon([
-            [
-                [extent[0], extent[1]],
-                [extent[0], extent[3]],
-                [extent[2], extent[3]],
-                [extent[2], extent[1]],
-                [extent[0], extent[1]],
-            ],
-            ])
-        );
-    
-        const extentLayer = new ol.layer.Vector({
-            source: new ol.source.Vector({
-            features: [extentFeature],
-            }),
-            style: new ol.style.Style({
-            stroke: new ol.style.Stroke({
-                color: 'limegreen',
-                width: 2,
-            }),
-            fill: new ol.style.Fill({
-                color: 'rgba(0, 155, 0, 0.1)',
-            }),
-            }),
-        });
-    
-        map.addLayer(extentLayer);
-
-        const dragBox = new ol.interaction.DragBox({
-            condition: ol.events.condition.platformModifierKeyOnly
-        })
-
-        map.addInteraction(dragBox)
-
-        dragBox.on('boxend', () => {
-            const extent = dragBox.getGeometry().getExtent()     
-            const extentString = extent.join(',')
-            extentInput.value = extentString
-
-            extentFeature.setGeometry(
-            new ol.geom.Polygon([
-                [
-                [extent[0], extent[1]],
-                [extent[0], extent[3]],
-                [extent[2], extent[3]],
-                [extent[2], extent[1]],
-                [extent[0], extent[1]],
-                ],
-            ])
-            );
-        })
-
-        function updateMap() {
-            console.log('update map')
-            const extent = extentInput.value.split(',').map(Number);
-    
-            map.getView().setCenter([(extent[0]+extent[2])/2, (extent[1]+extent[3])/2]);
-    
-            extentFeature.setGeometry(
-            new ol.geom.Polygon([
-                [
-                [extent[0], extent[1]],
-                [extent[0], extent[3]],
-                [extent[2], extent[3]],
-                [extent[2], extent[1]],
-                [extent[0], extent[1]],
-                ],
-            ])
-            );
-        }
-    
-        extentInput.addEventListener('input', updateMap);
 
-    });
 </script>