From ccc66200a0c88eba016dbfc8f2d664fb29a4a08d Mon Sep 17 00:00:00 2001
From: Marie Birner <mb@studiomitte.com>
Date: Thu, 28 Sep 2023 16:18:47 +0200
Subject: [PATCH] [TASK] improve ux in mobile form

---
 frontend/main.ts | 43 +++++++++++++++++++++++++++++--------------
 1 file changed, 29 insertions(+), 14 deletions(-)

diff --git a/frontend/main.ts b/frontend/main.ts
index 810d61d..05d67a6 100644
--- a/frontend/main.ts
+++ b/frontend/main.ts
@@ -93,31 +93,46 @@ function reloadPage() {
 
 function setMaxAmountRowers(rowers: number, isShipmasterSteering='false') {
 	  let curSelection = choiceObjects['newrower'].getValue(true);
-	  	let amount_to_delete = (<any>curSelection).length - rowers;
-	  	if (amount_to_delete > 0){
-	  	      let to_delete = (<any>curSelection).slice(-amount_to_delete);
-	  	      for (let del of to_delete) {
-	  	      	choiceObjects['newrower'].removeActiveItemsByValue(del);
-	  	      }
-	  	}
+    let amount_to_delete = (<any>curSelection).length - rowers;
 
-	  choiceObjects['newrower'].config.maxItemCount = rowers;
-	  if (rowers === 0) {
-		  choiceObjects['newrower'].disable()
-	  }else{
-      choiceObjects['newrower'].enable()
-	  }
+    if (amount_to_delete > 0){
+          let to_delete = (<any>curSelection).slice(-amount_to_delete);
+          for (let del of to_delete) {
+            choiceObjects['newrower'].removeActiveItemsByValue(del);
+          }
+    }
+
+    let input = <HTMLElement>document.querySelector('#newrower');
+
+    if(input) {
+      choiceObjects['newrower'].config.maxItemCount = rowers;
+      if (rowers === 0) {
+        choiceObjects['newrower'].disable()
+        input.parentElement?.parentElement?.parentElement?.classList.add('hidden');
+        input.parentElement?.parentElement?.parentElement?.classList.add('md:block');
+        input.parentElement?.parentElement?.parentElement?.classList.add('opacity-50');
+      } else{
+        choiceObjects['newrower'].enable();
+        input.parentElement?.parentElement?.parentElement?.classList.remove('hidden');
+        input.parentElement?.parentElement?.parentElement?.classList.remove('md:block');
+        input.parentElement?.parentElement?.parentElement?.classList.remove('opacity-50');
+      }
+    }
 
     let only_steering =  <HTMLSelectElement>document.querySelector('#shipmaster_only_steering');
     if(only_steering) {
       if(isShipmasterSteering == 'true') {
         only_steering.removeAttribute('disabled');
         only_steering.setAttribute('checked', 'true');
+        only_steering.parentElement?.parentElement?.parentElement?.classList.remove('hidden');
+        only_steering.parentElement?.parentElement?.parentElement?.classList.remove('md:block');
         only_steering.parentElement?.parentElement?.parentElement?.classList.remove('opacity-50');
       } else {
         only_steering.setAttribute('disabled', 'disabled');
         only_steering.removeAttribute('checked');
-        only_steering.parentElement?.parentElement?.parentElement?.classList.add('opacity-50');
+        only_steering.parentElement?.parentElement?.parentElement?.classList.add('hidden');
+        only_steering.parentElement?.parentElement?.parentElement?.classList.add('md:block');
+        only_steering.parentElement?.parentElement?.parentElement?.classList.add('opacity-50');     
       }
     }
 }