Replace GeoJSON upload prompt with modal widget

Signed-off-by: Daniel Kastl <[email protected]>

Author: dkastl

app/views/redmine_gtt/hooks/_view_layouts_base_body_bottom.html.erb

@@ -0,0 +1,6 @@
+<% if Setting.plugin_redmine_gtt['enable_geojson_upload_on_issue_map'] == "true" %>
+  <div id="dialog-geojson-upload" title="<%= l(:title_geojson_upload) %>">
+    <textarea placeholder="<%= l(:placeholder_geojson_upload) %>" class="ui-widget ui-state-default ui-corner-all"></textarea>
+    <input type="file" id="file-selector" accept=".json,.geojson">
+  </div>
+<% end %>

config/locales/en.yml

@@ -86,3 +86,6 @@ en:
 
   project_module_gtt: "GTT"
   permission_manage_gtt_settings: "Manage GTT settings"
+
+  title_geojson_upload: "Import GeoJSON"
+  placeholder_geojson_upload: "Please paste a GeoJSON geometry here, or import the GeoJSON data from a file."

lib/redmine_gtt/view_hooks.rb

@@ -13,5 +13,9 @@ class ViewHooks < Redmine::Hook::ViewListener
 
     render_on :view_issues_form_details_top,
       partial: 'redmine_gtt/hooks/view_issues_form_details_top'
+
+    render_on :view_layouts_base_body_bottom,
+      partial: 'redmine_gtt/hooks/view_layouts_base_body_bottom'
+
   end
 end

src/components/gtt-client.ts

@@ -486,24 +486,61 @@ export class GttClient {
       editbar.addControl(control)
     })
 
-    // Upload button
-    if (this.contents.upload === "true") {
-      editbar.addControl(new Button({
-        html: '<i class="material-icons">file_upload</i>',
-        title: 'Upload GeoJSON',
-        handleClick: () => {
-          const data = prompt("Please paste a GeoJSON geometry here")
+    // Uses jQuery UI for GeoJSON Upload modal window
+    const mapObj = this
+    const dialog = $("#dialog-geojson-upload").dialog({
+      autoOpen: false,
+      resizable: true,
+      height: 'auto',
+      width: 380,
+      modal: true,
+      buttons: {
+        'Load': function() {
+          const geojson_input = document.querySelector('#dialog-geojson-upload textarea') as HTMLInputElement
+          const data = geojson_input.value
           if (data !== null) {
             const features = new GeoJSON().readFeatures(
               JSON.parse(data), {
                 featureProjection: 'EPSG:3857'
               }
             )
-            this.vector.getSource().clear()
-            this.vector.getSource().addFeatures(features)
-            this.updateForm(features)
-            this.zoomToExtent()
+            mapObj.vector.getSource().clear()
+            mapObj.vector.getSource().addFeatures(features)
+            mapObj.updateForm(features)
+            mapObj.zoomToExtent()
           }
+          $(this).dialog('close')
+        },
+        'Cancel': function() {
+          $(this).dialog('close')
+        }
+      }
+    });
+
+    // Upload button
+    if (this.contents.upload === "true") {
+
+      const fileSelector = document.getElementById('file-selector')
+      fileSelector.addEventListener('change', (event: any) => {
+        const file = event.target.files[0]
+          // Check if the file is GeoJSON.
+        if (file.type && !file.type.startsWith('application/geo')) {
+          console.log('File is not a GeoJSON document.', file.type, file);
+          return;
+        }
+        const fileReader = new FileReader();
+        fileReader.addEventListener('load', (event: any) => {
+          const geojson_input = document.querySelector('#dialog-geojson-upload textarea') as HTMLInputElement
+          geojson_input.value = JSON.stringify(event.target.result, null, 2)
+        });
+        fileReader.readAsText(file);
+      });
+
+      editbar.addControl(new Button({
+        html: '<i class="material-icons">file_upload</i>',
+        title: 'Upload GeoJSON',
+        handleClick: () => {
+          dialog.dialog('open')
         }
       }))
     }

src/stylesheets/app.scss

@@ -106,3 +106,16 @@ i[id^='icon_settings_tracker_'] {
   max-width: 510px;
   padding: 0.5em;
 }
+
+.ui-dialog .ui-dialog-buttonpane button {
+  height: inherit;
+}
+
+.ui-dialog .ui-dialog-content {
+  padding: 0.5em 0 0 0;
+}
+
+.ui-dialog .ui-dialog-content textarea {
+  width: 100%;
+  height: 300px;
+}