[PATCH widget-toolkit 2/2] location edit: add OpenStreetMap link also in the edit window

[Dominik Csapak <d.csapak@proxmox.com>]

makes it easier to edit directly from there

Suggested-by: Thomas Lamprecht <t.lamprecht@proxmox.com>
Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 src/Utils.js               |  9 +++++++--
 src/window/LocationEdit.js | 22 +++++++++++++++++++++-
 2 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/src/Utils.js b/src/Utils.js
index 7643316..ed88210 100644
--- a/src/Utils.js
+++ b/src/Utils.js
@@ -1573,13 +1573,18 @@ Ext.define('Proxmox.Utils', {
             hiddenElement.click();
         },
 
+        renderOpenStreetMapLink: function (lat, long) {
+            let link = `https://openstreetmap.org?mlat=${lat}&mlon=${long}#map=20/${lat}/${long}`;
+            return `<a href='${link}' target="_blank" rel="noreferrer">open on OpenStreetMap</a>`;
+        },
+
         renderLocation: function (value) {
             if (!value) {
                 return Proxmox.Utils.NoneText;
             }
             let location = Proxmox.Utils.parsePropertyString(value);
-            let link = `https://openstreetmap.org?mlat=${location.latitude}&mlon=${location.longitude}#map=20/${location.latitude}/${location.longitude}`;
-            let degrees = `${location.latitude} &deg;, ${location.longitude} &deg;, <a href='${link}' target="_blank" rel="noreferrer">open on OpenStreetMap</a>`;
+            let link = Proxmox.Utils.renderOpenStreetMapLink(location.latitude, location.longitude);
+            let degrees = `${location.latitude} &deg;, ${location.longitude} &deg;, ${link}`;
             if (location.name) {
                 return `${location.name} (${degrees})`;
             }
diff --git a/src/window/LocationEdit.js b/src/window/LocationEdit.js
index bb92ff2..4ee4eed 100644
--- a/src/window/LocationEdit.js
+++ b/src/window/LocationEdit.js
@@ -6,7 +6,7 @@ Ext.define('Proxmox.window.LocationEdit', {
 
     autoLoad: true,
 
-    // make a bit wider for the hint field
+    // make a bit wider for the hint/link fields
     width: 400,
 
     controller: {
@@ -32,9 +32,23 @@ Ext.define('Proxmox.window.LocationEdit', {
             }
         },
 
+        onChange: function () {
+            let me = this;
+            let lat = me.lookup('latitude').getValue();
+            let long = me.lookup('longitude').getValue();
+            let openStreetMapLink = me.lookup('openStreetMapLink');
+            if (me.isValidCoordinate(lat, long)) {
+                openStreetMapLink.setValue(Proxmox.Utils.renderOpenStreetMapLink(lat, long));
+                openStreetMapLink.setVisible(true);
+            } else {
+                openStreetMapLink.setVisible(false);
+            }
+        },
+
         control: {
             numberfield: {
                 paste: 'onPaste',
+                change: 'onChange',
             },
         },
     },
@@ -97,6 +111,12 @@ Ext.define('Proxmox.window.LocationEdit', {
                     ),
                     userCls: 'pmx-hint',
                 },
+                {
+                    xtype: 'displayfield',
+                    reference: 'openStreetMapLink',
+                    hidden: true,
+                    text: '',
+                },
             ],
         },
     ],
-- 
2.47.3