Sets value trough input field

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

Author: dkastl

app/views/projects/settings/_gtt.html.erb

@@ -14,7 +14,7 @@
     </p>
     <p>
       <%= content_tag(:label, l(:gtt_map_rotate_label)) %>
-      <%= number_field_tag('gtt_configuration[map_rotation]', @project.map_rotation, min: 0, max: 359, size: 10, readonly: true ) %>
+      <%= number_field_tag('gtt_configuration[map_rotation]', @project.map_rotation, min: 0, max: 359, size: 10 ) %>
       <br /><em><%= t :gtt_map_rotate_info_html  %></em>
     </p>
   </div>

src/components/gtt-client.ts

@@ -335,19 +335,20 @@ export class GttClient {
     this.toolbar.addControl(maximizeCtrl)
 
     // Map rotation
-    const rotation_field = document.querySelector('#gtt_configuration_map_rotation') as HTMLElement
+    const rotation_field = document.querySelector('#gtt_configuration_map_rotation') as HTMLInputElement
     if (rotation_field !== null) {
       this.map.getView().on('change:rotation', (evt) => {
-        rotation_field.setAttribute(
-          'value',
-          String(Math.round(radiansToDegrees(evt.target.getRotation())))
-        )
+        rotation_field.value = String(Math.round(radiansToDegrees(evt.target.getRotation())))
       })
 
-      // TODO: remove readonly flag from field and update map on input
-      // rotation_field.addEventListener("oninput", (evt) => {
-      //   console.log(evt)
-      // })
+      rotation_field.addEventListener("input", (evt) => {
+        const { target } = evt;
+        if (!(target instanceof HTMLInputElement)) {
+          return;
+        }
+        const value = target.value;
+        this.map.getView().setRotation(degreesToRadians(parseInt(value)))
+      })
     }
 
     if (this.contents.edit) {