Merge remote-tracking branch 'origin/main' into ftr/prepare-release

Author: dkastl

app/views/settings/gtt/_settings.html.erb

@@ -1,6 +1,6 @@
 <h3><%= l(:select_default_tracker_icon) %></h3>
 
-<% Tracker.all.each do |t| %>
+<% Tracker.sorted.each do |t| %>
   <p>
     <%= content_tag :label, t.name %>
     <%= select_tag "settings[tracker_#{t.id}]", "<option>#{@settings["tracker_#{t.id}"]}</option>".html_safe %>
@@ -11,7 +11,7 @@
 <div class="box tabular settings">
 <h3><%= l(:select_default_status_color) %></h3>
 
-<% IssueStatus.all.sort.each do |t| %>
+<% IssueStatus.sorted.each do |t| %>
   <p>
     <%= content_tag :label, t.name %>
     <%= color_field_tag "settings[status_#{t.id}]", @settings["status_#{t.id}"] %>

config/locales/de.yml

@@ -1,7 +1,7 @@
 # German strings go here for Rails i18n
 de:
-  error_unable_to_update_project_gtt_settings: Die GTT-Einstellungen des Projekts können
-    nicht aktualisiert werden (%{value})
+  error_unable_to_update_project_gtt_settings: Die GTT-Einstellungen des Projekts
+    können nicht aktualisiert werden (%{value})
   field_gtt_tile_source_ids: Tile-Resourcen
   label_nearby: in der Nähe (lat,lng)
   label_type: Typ
@@ -17,9 +17,10 @@ de:
   label_parameters: Parameter
   label_tab_geocoder: Geocoder
   geocoder_options: Geocoder Optionen
-  gtt_tile_sources_info: Wählen Sie die Tile Resourcen aus, die in diesem Projekt verfügbar
-    sein sollen.
-  gtt_settings_general_maxzoom_level: Standardwert für die maximale Zoomstufe der Karte
+  gtt_tile_sources_info: Wählen Sie die Tile Resourcen aus, die in diesem Projekt
+    verfügbar sein sollen.
+  gtt_settings_general_maxzoom_level: Standardwert für die maximale Zoomstufe der
+    Karte
   label_default_collapsed_issues_page_map: Standardmäßig ausgeblendete Karte für Tickets
   field_default: Standard für neue Projekte
   field_geometry: Geomtrie
@@ -42,10 +43,11 @@ de:
   label_gtt_point: Punkt
   label_gtt_linestring: Linie
   label_gtt_polygon: Polygon
-  error_invalid_json: muss gültiges JSON sein
+  error_invalid_json: Muss gültiges JSON sein
   label_editable_geometry_types_on_issue_map: Editierbare Geometrietypen auf der Ausgabekarte
   select_default_tracker_icon: 'Auswahl des Standard-Tracker-Symbols:'
-  label_enable_geojson_upload_on_issue_map: Aktivieren von GeoJSON-Upload auf der Themenkarte
+  label_enable_geojson_upload_on_issue_map: Aktivieren von GeoJSON-Upload auf der
+    Themenkarte
   label_enable_geocoding_on_map: Geokodierung auf der Karte aktivieren
   select_default_status_color: 'Auswahl der Standard-Statusfarbe:'
   select_default_map_settings: 'Standardmäßige Kartenvoreinstellungen festlegen:'
@@ -57,7 +59,7 @@ de:
   gtt_tile_sources_select: -- Typ auswählen --
   gtt_tile_sources_select_osm: OpenStreetMap
   gtt_tile_sources_select_tilewms: Tiled WMS
-  gtt_tile_sources_load_example: Beispielkonfiguration laden
+  gtt_tile_sources_load_example: Beispielkonfiguration laden.
   label_baselayer: Basislayer
   gtt_tile_sources_select_imagewms: Image WMS
   gtt_tile_sources_select_xyz: XYZ Tiles

config/locales/en.yml

@@ -1,7 +1,8 @@
 # English strings go here for Rails i18n
 en:
-  error_invalid_json: must be valid JSON
-  error_unable_to_update_project_gtt_settings: "Unable to update project GTT settings (%{value})"
+  error_invalid_json: Must be valid JSON
+  error_unable_to_update_project_gtt_settings: "Unable to update project GTT settings\
+    \ (%{value})"
 
   field_default: Default for new projects
   field_geometry: "Geometry"
@@ -42,7 +43,8 @@ en:
 
   geocoder_options: "Geocoder Options"
 
-  gtt_tile_sources_info: "Select the tile sources that should be available in this project."
+  gtt_tile_sources_info: "Select the tile sources that should be available in this\
+    \ project."
   gtt_tile_sources_select: "-- Select type --"
   gtt_tile_sources_select_imagewms: "Image WMS"
   gtt_tile_sources_select_osm: "OpenStreetMap"

config/locales/ja.yml

@@ -48,7 +48,7 @@ ja:
   gtt_tile_sources_select_osm: "OpenStreetMap"
   gtt_tile_sources_select_tilewms: "Tiled WMS"
   gtt_tile_sources_select_xyz: "XYZ Tiles"
-  gtt_tile_sources_load_example: "サンプル設定をロード"
+  gtt_tile_sources_load_example: "サンプル設定をロード。"
 
   gtt_settings_general_center_lon: "既定の地図中心経度"
   gtt_settings_general_center_lat: "既定の地図中心緯度"

src/components/gtt-client.ts

@@ -1,8 +1,8 @@
 import 'ol/ol.css'
 import 'ol-ext/dist/ol-ext.min.css'
-import { Map, Feature, View, Geolocation } from 'ol'
+import { Map, Feature, View, Geolocation, Collection } from 'ol'
 import 'ol-ext/filter/Base'
-import { Geometry, Point } from 'ol/geom'
+import { Geometry, GeometryCollection, Point } from 'ol/geom'
 import { GeoJSON, WKT } from 'ol/format'
 import { Layer, Tile, Image } from 'ol/layer'
 import VectorLayer from 'ol/layer/Vector'
@@ -41,6 +41,9 @@ import { FeatureLike } from 'ol/Feature'
 import TileSource from 'ol/source/Tile'
 import ImageSource from 'ol/source/Image'
 import { Options as ImageWMSOptions } from 'ol/source/ImageWMS'
+import JSONFeature from 'ol/format/JSONFeature'
+import BaseEvent from 'ol/events/Event'
+import { CollectionEvent } from 'ol/Collection'
 
 interface GttClientOption {
   target: HTMLDivElement | null
@@ -308,10 +311,11 @@ export class GttClient {
     this.setView()
     this.setGeocoding(this.map)
     this.setGeolocation(this.map)
-    this.toolbar.addControl (new FullScreen())
-    this.toolbar.addControl (new Rotate())
     this.parseHistory()
 
+    this.map.addControl (new FullScreen())
+    this.map.addControl (new Rotate())
+
     // Control button
     const maximizeCtrl = new Button({
       html: '<i class="material-icons" >zoom_out_map</i>',
@@ -521,13 +525,14 @@ export class GttClient {
     // Control Select
     const select = new Select({
       layers: [this.vector],
+      style: null,
       multi: false
     })
     this.map.addInteraction(select)
 
     // On selected => show/hide popup
-    select.getFeatures().on(['add'], evt => {
-      const feature = evt.target
+    select.getFeatures().on(['add'], (evt: any) => {
+      const feature = evt.element
 
       const content: Array<string> = []
       content.push(`<b>${feature.get('subject')}</b><br/>`)

src/components/gtt-setting.ts

@@ -11,11 +11,24 @@ export const gtt_setting = ():void => {
       const wrapper = $('<div>', {
         text: ''
       })
-      $('<i>', {
-        class: "ui-icons material-icons",
-        title: item.label,
-        text: item.value
-      }).prependTo(wrapper)
+      const style = item.optgroup.toLowerCase().split(' ').join('-')
+      switch (style) {
+        case 'material-icons':
+          $('<i>', {
+            class: 'ui-icons ' + style,
+            title: item.label,
+            text: item.value
+          }).prependTo(wrapper)
+          break;
+
+        default:
+          $('<i>', {
+            class: 'ui-icons ' + style + ' icon-' + item.value,
+            title: item.label,
+            text: ''
+          }).prependTo(wrapper)
+          break;
+      }
       return li.append(wrapper).appendTo(ul)
     }
   });
@@ -25,44 +38,58 @@ export const gtt_setting = ():void => {
     const selectedValue = element.value
     if (element.length === 1 && selectedValue !== "") {
       element.remove(0)
-      element.append(new Option("", "", false, false))
+      // element.append(new Option("", "", false, false))
     }
     for (let font in FontSymbol.prototype.defs.fonts) {
+      const optgroup = document.createElement('optgroup')
+      optgroup.label = FontSymbol.prototype.defs.fonts[font].name
       for (let i in glyph) {
         if (glyph[i].font == font) {
           const selected = selectedValue === i
           const words = i.split('_')
           const text = words.map((word) => {
             return word[0].toUpperCase() + word.substring(1)
-          }).join(" ")
-          element.append(new Option(text, i, selected, selected))
+          }).join(' ')
+          optgroup.appendChild(new Option(text, i, selected, selected))
           if (selected) {
-            element.nextElementSibling.className = "material-icons"
-            element.nextElementSibling.textContent = i
+            const style = font.toLowerCase().split(' ').join('-')
+            switch (style) {
+              case 'material-icons':
+                element.nextElementSibling.className = style
+                element.nextElementSibling.textContent = i
+                break;
+
+              default:
+                element.nextElementSibling.className = style + ' icon-' + i
+                element.nextElementSibling.textContent = ''
+                break;
+            }
           }
         }
       }
+      element.append(optgroup)
     }
 
     // Apply better Selector styling with jQuery UI (available in Redmine)
     $(element)
       .selectmenu({
         change: function(event: any, data: any) {
-          console.log(data.item.value)
-          document.querySelector(`#icon_${element.id}`).textContent = data.item.value
+          const style = data.item.optgroup.toLowerCase().split(' ').join('-')
+          switch (style) {
+            case 'material-icons':
+              document.querySelector(`#icon_${element.id}`).className = style
+              document.querySelector(`#icon_${element.id}`).textContent = data.item.value
+              break;
+
+            default:
+              document.querySelector(`#icon_${element.id}`).className = style + ' icon-' + data.item.value
+              document.querySelector(`#icon_${element.id}`).textContent = ''
+              break;
+          }
         }
       })
       .selectmenu('menuWidget')
       .addClass('select-overflow')
       .addClass('ui-menu-icons customicons')
   })
-
-  // document.querySelectorAll("[id^='settings_tracker_']").forEach((element: HTMLSelectElement) => {
-  //   element.addEventListener('change', (ev) => {
-  //     const currentTarget = ev.currentTarget as HTMLSelectElement
-  //     const trackerId = currentTarget.id
-  //     document.querySelector(`#icon_${trackerId}`).className = "material-icons"
-  //     document.querySelector(`#icon_${trackerId}`).textContent = currentTarget.value
-  //   })
-  // })
 }

src/index.ts

@@ -2,10 +2,14 @@ import 'ol/ol.css'
 import 'ol-ext/dist/ol-ext.min.css'
 import './stylesheets/app.scss'
 
+// Custom Icons
+import './stylesheets/custom-icons.css'
+import './stylesheets/CustomIconsDef.js'
+
 // Material Design Icons
 // https://github.com/marella/material-design-icons/tree/main/font#readme
 import '@material-design-icons/font/filled.css'
-import './fonts/MaterialDesignDef.js'
+import './stylesheets/MaterialDesignDef.js'
 
 import { GttClient } from './components/gtt-client'
 import { gtt_setting } from './components/gtt-setting'

src/stylesheets/CustomIconsDef.js

@@ -0,0 +1,15 @@
+import ol_style_FontSymbol from 'ol-ext/style/FontSymbol'
+
+ol_style_FontSymbol.addDefs(
+{	"font":"custom-icons",
+	"name":"Custom Icons",
+	"copyright":"Apache-2.0",
+	"prefix": "gtt"
+},
+{ "lobsta": "\uf101",
+  "park_bench": "\uf102",
+  "road": "\uf103",
+  "waste": "\uf104"
+});
+
+export default ol_style_FontSymbol

src/fonts/MaterialDesignDef.js renamed to src/stylesheets/MaterialDesignDef.js

@@ -3,16 +3,25 @@
  */
 .ol-map {
   width: 100%;
-  height: 420px;
+  height: 400px;
   border: 1px solid #E4E4E4;
 }
 #issue-form .ol-map {
   width: 100%;
   margin-bottom: 1em;
 }
 
+$breakpoint-tablet: 899px;
+@media (max-width: $breakpoint-tablet) {
+  .ol-map {
+    height: 340px;
+  }
+}
+
 .ol-control button {
   background-color: rgba(52, 73, 94, 0.8);
+  height: 32px;
+  width: 32px;
 }
 .ol-control button:hover {
   background-color: rgba(52, 73, 94, 1);
@@ -24,11 +33,21 @@
 .ol-full-screen button.ol-full-screen-false,
 .ol-rotate button.ol-rotate-reset,
 .ol-bar .ol-button button {
-  height: 32px;
-  width: 32px;
   font-size: 1.6em;
 }
 
+div.ol-full-screen {
+  right: 3.0em;
+}
+
+div.ol-rotate {
+  right: 5.5em;
+}
+
+div.ol-full-screen {
+  right: 3.0em;
+}
+
 .ol-control.ol-bar.ol-top.ol-left, .ol-control.ol-bar.ol-top.ol-right {
   top: 5.2em;
 }