Staging

frontend/main.ts

@@ -202,9 +202,22 @@ function initTripSidebar(triggerElement: HTMLElement) {
       }
     });
 
+    const prefixedContent =  <NodeListOf<HTMLElement>>bodyElement.querySelectorAll('.change-id-js');
+    Array.prototype.forEach.call(prefixedContent, (content: HTMLElement) => {
+      if(content) {
+        content.id += 'js';
+
+        if(content.dataset.relation){
+          content.dataset.relation += 'js';
+        }
+      }
+    });
+
     if(bodyContainerElement) {
       bodyContainerElement.innerHTML = '';
       bodyContainerElement.append(bodyElement);
+
+      addRelationMagic(bodyElement);
     }
     if(triggerElement.dataset.day) {
       let hiddenElement = <HTMLInputElement>bodyElement.querySelector('.day-js');
@@ -220,6 +233,33 @@ function initTripSidebar(triggerElement: HTMLElement) {
   }
 }
 
+function addRelationMagic(bodyElement: HTMLElement) {
+  const fields = bodyElement.querySelectorAll('.set-distance-js');
+  if(fields) {
+    Array.prototype.forEach.call(fields, (field: HTMLInputElement) => {
+      if(field.dataset.relation){
+        const relatedField = <HTMLInputElement>bodyElement.querySelector('#' + field.dataset.relation);
+
+        if(relatedField) {
+          field.addEventListener('input', (e) => {
+            e.preventDefault();              
+            const dataList = <HTMLDataListElement>document.getElementById('destinations');
+              if(dataList) {
+                var option = Array.prototype.find.call(dataList.options, function(option) {
+                  return option.value === field.value;
+                });
+    
+                // Get distance
+                const distance = option.getAttribute('distance');
+                if(distance) relatedField.value = distance;
+              }
+          });
+        }
+      }
+    });
+  }
+}
+
 function replaceStrings() {
   const weekdays = document.querySelectorAll('.weekday-js');
   Array.prototype.forEach.call(weekdays, (weekday: HTMLElement) => {