[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

frontend/scss/components/_btns.scss

@@ -28,4 +28,8 @@
   &[aria-pressed='true'] {
     @apply outline outline-2 outline-offset-2 outline-primary-600 bg-primary-100 text-primary-950;
   }
+
+  &-hidden {
+    @apply hidden;
+  }
 }

frontend/scss/components/_important.scss

@@ -2,3 +2,12 @@
     border-top-left-radius: 0px !important;
     border-top-right-radius: 0px !important;
 }
+
+.rounded-l-none-important {
+  border-bottom-left-radius: 0px !important;
+  border-top-left-radius: 0px !important;
+}
+
+.rounded-none-important {
+  border-radius: 0px !important;
+}

frontend/scss/components/_input.scss

@@ -2,6 +2,25 @@
   @apply relative block w-full bg-white dark:bg-black border-0 py-1.5 px-2 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-black placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6;
 }
 
+.input-group {
+  @apply flex;
+
+  input[readonly] {
+    opacity: .7;
+  }
+
+  &.editable {
+      input[type="reset"],
+      input[type="submit"] {
+          @apply block;
+      }
+
+      button[type="button"] {
+          @apply hidden;
+      }
+  }
+}
+
 select {
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
   background-repeat: no-repeat;