Merge remote-tracking branch 'origin/main' into ftr/rotate-map

Author: dkastl

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

@@ -0,0 +1,4 @@
+<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>

config/locales/en.yml

@@ -88,3 +88,21 @@ 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."
+
+  # Localize for use in Javascript
+  gtt_js:
+    control:
+      geocoding: "Location search"
+      geolocation: "My location"
+      maximize: "Zoom to all features"
+      upload: "Upload GeoJSON"
+      fullscreen: "Toggle full-screen"
+      rotate: "Reset rotation"
+      zoom-in: "Zoom in"
+      zoom-out: "Zoom out"
+    modal:
+      load: "Load"
+      cancel: "Cancel"

lib/redmine_gtt/hooks/view_layouts_base_html_head_hook.rb

@@ -29,7 +29,8 @@ def view_layouts_base_body_bottom(context={})
           :maxzoom => Setting.plugin_redmine_gtt['default_map_maxzoom_level'],
           :fit_maxzoom => Setting.plugin_redmine_gtt['default_map_fit_maxzoom_level'],
           :geocoder => geocoder,
-          :plugin_settings => Setting.plugin_redmine_gtt.select{ |key, value| key.to_s.match(/^(?!default).+/) }
+          :plugin_settings => Setting.plugin_redmine_gtt.select{ |key, value| key.to_s.match(/^(?!default).+/) },
+          :i18n => l(:gtt_js).to_json.html_safe
         }, :id => 'gtt-defaults', :style => 'display:none')
         return tags.join("\n")
       end

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

@@ -78,6 +78,7 @@ export class GttClient {
   layerArray: Layer[]
   defaults: DOMStringMap
   contents: DOMStringMap
+  i18n: any
   toolbar: Bar
   filters: FilterOption
   vector: VectorLayer<VectorSource<Geometry>>
@@ -124,6 +125,7 @@ export class GttClient {
     }
 
     this.contents = options.target.dataset
+    this.i18n = JSON.parse(this.defaults.i18n)
 
     // create map at first
     this.map = new Map({
@@ -311,13 +313,17 @@ export class GttClient {
     this.setGeolocation(this.map)
     this.parseHistory()
 
-    this.map.addControl (new FullScreen())
-    this.map.addControl (new Rotate())
+    this.map.addControl (new FullScreen({
+      tipLabel: this.i18n.control.fullscreen
+    }))
+    this.map.addControl (new Rotate({
+      tipLabel: this.i18n.control.rotate
+    }))
 
     // Control button
     const maximizeCtrl = new Button({
       html: '<i class="material-icons" >zoom_out_map</i>',
-      title: "Maximize",
+      title: this.i18n.control.maximize,
       handleClick: () => {
         this.zoomToExtent(true);
       }
@@ -499,24 +505,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: {
+        [mapObj.i18n.modal.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')
+        },
+        [mapObj.i18n.modal.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: this.i18n.control.geojson,
+        handleClick: () => {
+          dialog.dialog('open')
         }
       }))
     }
@@ -988,7 +1031,7 @@ export class GttClient {
     // Control button
     const geolocationCtrl = new Toggle({
       html: '<i class="material-icons">my_location</i>',
-      title: "Geolocation",
+      title: this.i18n.control.geolocation,
       active: false,
       onToggle: (active: boolean) => {
         geolocation.setTracking(active)
@@ -1177,7 +1220,7 @@ export class GttClient {
     // Control button
     const geocodingCtrl = new Toggle({
       html: '<i class="material-icons">manage_search</i>',
-      title: "Geocoding",
+      title: this.i18n.control.geocoding,
       className: "ctl-geocoding",
       onToggle: (active: boolean) => {
         const text = (document.querySelector("div#" + mapId + " .ctl-geocoding div input") as HTMLInputElement)

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;
+}