[TASK] add input group element with interaction

frontend/main.ts

@@ -24,6 +24,7 @@ document.addEventListener("DOMContentLoaded", function () {
   reloadPage();
   setCurrentdate(<HTMLInputElement>document.querySelector("#departure"));
   initDropdown();
+  editReadOnlyField();
 });
 
 function changeTheme() {
@@ -40,6 +41,25 @@ function changeTheme() {
   }
 }
 
+
+function editReadOnlyField() {
+    const editBtns = document.querySelectorAll(
+      '.edit-js'
+    );
+    if (editBtns) {
+      Array.prototype.forEach.call(editBtns, (btn: HTMLButtonElement) => {
+        btn.addEventListener("click", function () {
+          let wrapper = btn.parentElement;
+          let input = wrapper?.querySelector('input');
+
+          wrapper?.classList.toggle('editable')
+          input?.toggleAttribute('readonly');
+          if(!input?.hasAttribute('readonly')) input?.focus();
+        });
+      });
+    }
+}
+
 /***
  * init javascript
  * 1) detect native color scheme or use set theme in local storage