editable string param

client/src/app/features/recipes/recipe-details/recipe-list/recipe-list.component.html

@@ -23,101 +23,101 @@
           (click)="openMaterialList(i)"
         />
       </td>
+      <td class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
+        <input type="text" class="input" formControlName="name" />
+      </td>
       <!-- powder -->
-      <div *ngIf="getTypeForRecipeListAtIndex(i)['category'] == 'powder'">
+      <!-- <div *ngIf="getTypeForRecipeListAtIndex(i)['category'] == 'powder'">
-        <td class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
-          <input type="text" class="input" formControlName="name" />
-        </td>
-        <td class="m-2 px-4 py-4 font-medium text-gray-900 whitespace-nowrap">
-          <div class="flex items-center">
-            <p>Volume=&nbsp;</p>
-            <input
-              type="text"
-              class="input w-16"
-              formControlName="powderGram"
-            />
-            <p>&nbsp;gram</p>
-          </div>
-        </td>
-      </div>
 
-      <!-- syrup -->
+      </div> -->
-      <div *ngIf="getTypeForRecipeListAtIndex(i)['category'] == 'syrup'">
-        <td class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
-          <input type="text" class="input" formControlName="name" />
-        </td>
-        <td class="m-2 px-4 py-4 font-medium text-gray-900 whitespace-nowrap">
-          <div class="flex items-center">
-            <p>Volume=&nbsp;</p>
-            <input type="text" class="input w-16" formControlName="syrupGram" />
-            <p>&nbsp;gram</p>
-          </div>
-        </td>
-      </div>
 
-      <!-- bean -->
+      <td
-      <div *ngIf="getTypeForRecipeListAtIndex(i)['category'] == 'bean'">
+        class="m-2 px-4 py-4 font-medium text-gray-900 whitespace-nowrap"
-        <td class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
+        *ngIf="displayByCond(i, 'powderGram', 'not-zero')"
-          <input type="text" class="input" formControlName="name" />
-        </td>
-        <td class="m-2 px-4 py-4 space-y-2 font-medium text-gray-900 whitespace-nowrap">
-          <div class="flex items-center space-x-4">
-            <div
-              class="flex items-center rounded-md p-2"
-              *ngIf="isStringParamExist(i)"
-
-            >
-              <div class="flex items-center bg-orange-400 rounded-md p-2" *ngFor="let param of getStringParamOfIndex(i)">
-                <p>&nbsp;</p>
-                <input
-                  type="text"
-                  class="input w-16"
-                  placeholder="{{param.pvalue}}"
-                  (click)="openStringParamEditor(i)"
-                />
-                <p *ngIf="param.pkey == 'esp-v2-press-value'">&nbsp;mA</p>
-              </div>
-            </div>
-
-            <div class="flex items-center bg-violet-400 rounded-md p-2">
-              <p>Volume=&nbsp;</p>
-            <input
-              type="text"
-              class="input w-16"
-              formControlName="powderGram"
-            />
-            <p>&nbsp;gram</p>
-            </div>
-          </div>
-          <div
-            class="flex items-center"
-            *ngIf="getTypeForRecipeListAtIndex(i)['id'] == 1002"
-          >
-            <p>Hot=&nbsp;</p>
-            <input
-              type="text"
-              class="input w-16"
-              formControlName="waterYield"
-            />
-            <p>&nbsp;ml&nbsp;</p>
-            <p>Grinder=&nbsp;</p>
-            <input type="text" class="input w-16" formControlName="stirTime" />
-            <p>&nbsp;sec</p>
-          </div>
-        </td>
-      </div>
-
-      <!-- others -->
-      <div
-        *ngIf="
-          isNotExistbyCatagories(getTypeForRecipeListAtIndex(i)['id']) ||
-          isEquipment(getTypeForRecipeListAtIndex(i)['id'])
-        "
       >
-        <td class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
+        <div class="flex items-center">
-          <input type="text" class="input" formControlName="name" />
+          <p>Volume=&nbsp;</p>
-        </td>
+          <input type="text" class="input w-16" formControlName="powderGram" />
-      </div>
+          <p>&nbsp;gram</p>
+        </div>
+      </td>
+
+      <td
+        class="m-2 px-4 py-4 font-medium text-gray-900 whitespace-nowrap"
+        *ngIf="displayByCond(i, 'syrupGram', 'not-zero')"
+      >
+        <div class="flex items-center">
+          <p>Volume=&nbsp;</p>
+          <input type="text" class="input w-16" formControlName="syrupGram" />
+          <p>&nbsp;gram</p>
+        </div>
+      </td>
+      <td
+        class="m-2 px-4 py-4 space-y-2 font-medium text-gray-900 whitespace-nowrap"
+      >
+        <div class="flex items-center space-x-4">
+          <div
+            class="flex items-center rounded-md p-2"
+            *ngIf="isStringParamExist(i)"
+          >
+            <div
+              class="flex items-center bg-orange-400 rounded-md p-2"
+              *ngFor="let param of getStringParamOfIndex(i)"
+            >
+              <p>&nbsp;</p>
+              <p *ngIf="param.pkey == 'notail'">tail=&nbsp;</p>
+              <input
+                type="text"
+                class="input w-16"
+                placeholder="{{ param.pvalue }}"
+                (click)="openStringParamEditor(i)"
+              />
+              <p *ngIf="param.pkey == 'esp-v2-press-value'">&nbsp;mA</p>
+            </div>
+          </div>
+        </div>
+        <div
+          class="flex items-center"
+          *ngIf="displayByCond(i, 'waterYield', 'not-zero')"
+        >
+          <p>Hot=&nbsp;</p>
+          <input type="text" class="input w-16" formControlName="waterYield" />
+          <p>&nbsp;ml&nbsp;</p>
+        </div>
+        <div
+          class="flex items-center"
+          *ngIf="displayByCond(i, 'waterCold', 'not-zero')"
+        >
+          <p>Cold=&nbsp;</p>
+          <input type="text" class="input w-16" formControlName="waterCold" />
+          <p>&nbsp;ml&nbsp;</p>
+        </div>
+        <div
+          class="flex items-center"
+          *ngIf="
+            displayByCond(i, 'stirTime', 'not-zero') &&
+            getTypeForRecipeListAtIndex(i)['category'] != 'cup'
+          "
+        >
+          <p *ngIf="getTypeForRecipeListAtIndex(i)['category'] == 'bean'">
+            Grinder=&nbsp;
+          </p>
+          <p *ngIf="getTypeForRecipeListAtIndex(i)['category'] == 'whipper'">
+            Mix=&nbsp;
+          </p>
+          <p
+            *ngIf="
+              getTypeForRecipeListAtIndex(i)['category'] == 'others' &&
+              (getTypeForRecipeListAtIndex(i)['id'] == 8001 ||
+                getTypeForRecipeListAtIndex(i)['id'] == 8002)
+            "
+          >
+            Clean=&nbsp;
+          </p>
+          <input type="text" class="input w-16" formControlName="stirTime" />
+          <p>&nbsp;sec&nbsp;</p>
+        </div>
+      </td>
     </tr>
   </tbody>
 </table>
@@ -167,22 +167,49 @@
   [(ngModel)]="showStringParamSelector"
 />
 <label for="string_param_selector" class="modal">
-  <div class="modal-box max-h-[400px] overflow-scroll" [formGroup]="stringParamForm">
+  <div
-    <div formArrayName="stringParamData" *ngFor="let paramAtIdx of stringParamData.controls; let isdx = index">
+    class="modal-box max-h-[400px] overflow-scroll"
+    [formGroup]="stringParamForm"
+  >
+    <div
+      formArrayName="stringParamData"
+      *ngFor="let paramAtIdx of stringParamData.controls; let isdx = index"
+    >
       <div *ngIf="isdx == currentSelectStringParam" formGroupName="{{ isdx }}">
         <!-- show input -->
-        <p class="flex top-0 right-0 justify-end font-bold text-xs m-2">isdx={{isdx}}</p>
+        <!-- <p class="flex top-0 right-0 justify-end font-bold text-xs m-2">isdx={{isdx}}</p> -->
-        <div *ngFor="let param of stringParamControlAtIdx.controls; let idx = index">
+        <div
+          *ngFor="
+            let param of stringParamControlAtIdx.controls;
+            let idx = index
+          "
+        >
           <!-- <p>idx={{idx}}</p> -->
-          <div formGroupName="{{ idx }}" class="flex items-center p-2 space-x-4">
+          <div
+            formGroupName="{{ idx }}"
+            class="flex items-center p-2 space-x-4"
+          >
             <!-- <input type="text" class="input input-disabled" formControlName="pkey" [disabled]="true"/> -->
-            <p>{{alterStringParamDisplayName(param.value.pkey)}}</p>
+            <p>{{ alterStringParamDisplayName(param.value.pkey) }}</p>
-            <input type="text" class="input bg-slate-400" formControlName="pvalue" />
+            <input
+              type="checkbox"
+              formControlName="pvalue"
+              *ngIf="param.value.pkey == 'notail'"
+              (click)="setStringParam(isdx, 'notail', param.value.pvalue)"
+            />
+            <input
+              type="text"
+              class="input bg-slate-400"
+              formControlName="pvalue"
+              *ngIf="
+                param.value.pkey != 'notail' &&
+                param.value.pkey != 'encoder_cnt'
+              "
+              (change)="setStringParam(isdx, param.value.pkey, $event)"
+            />
           </div>
         </div>
       </div>
-
     </div>
   </div>
-
 </label>

client/src/app/features/recipes/recipe-details/recipe-list/recipe-list.component.ts

@@ -22,7 +22,14 @@ import { UserService } from 'src/app/core/services/user.service';
 import { Action, ActionRecord } from 'src/app/shared/actionRecord/actionRecord';
 import { FormsModule } from '@angular/forms';
 import { NgSelectModule } from '@ng-select/ng-select';
-import { getMaterialType, getCategories, isNonMaterial, StringParam, stringParamsDefinition } from 'src/app/shared/helpers/recipe';
+import {
+  getMaterialType,
+  getCategories,
+  isNonMaterial,
+  StringParam,
+  stringParamsDefinition,
+  conditionTests,
+} from 'src/app/shared/helpers/recipe';
 
 @Component({
   selector: 'app-recipe-list',
@@ -58,12 +65,12 @@ export class RecipeListComponent implements OnInit {
   showStringParamSelector: boolean = false;
   currentSelectStringParam: number | null = null;
 
-  stringParamForm = this._formBuilder.group({
+  stringParamForm = this._formBuilder.group(
-    stringParamData: this._formBuilder.array<{
+    {
-      pkey: string;
+      stringParamData: this._formBuilder.array([]),
-      pvalue: any;
+    },
-    }[]>([]),
+    { updateOn: 'blur' }
-  }, { updateOn: 'blur' });
+  );
 
   constructor(
     private _recipeService: RecipeService,
@@ -87,39 +94,43 @@ export class RecipeListComponent implements OnInit {
       .pipe(first())
       .subscribe(({ result }) => {
         this._recipeListOriginalArray = result;
-        result.forEach((recipeDetailMat: RecipeDetailMat) => {
+        result.forEach((recipeDetailMat: RecipeDetailMat, index: number) => {
-
           // StringParam
-          if(recipeDetailMat.StringParam != "" || recipeDetailMat.StringParam != null) {
+          if (
+            recipeDetailMat.StringParam != '' ||
+            recipeDetailMat.StringParam != null
+          ) {
             let currStringParam = new StringParam(recipeDetailMat.StringParam);
             let stringParamList = currStringParam.extract().as_list();
 
             let stringParamListTransform = [];
-            for(let param of stringParamList) {
+            for (let param of stringParamList) {
-              stringParamListTransform.push(this._formBuilder.group({
+              stringParamListTransform.push(
-                pkey: [
+                this._formBuilder.group({
-                  { value: param.pkey, disabled: !this.isEditable() },
+                  pkey: [{ value: param.pkey, disabled: !this.isEditable() }],
-                ],
+                  pvalue: [
-                pvalue: [
+                    { value: param.pvalue, disabled: !this.isEditable() },
-                  { value: param.pvalue, disabled: !this.isEditable() },
+                  ],
-                ]
+                })
-              }))
+              );
-
             }
 
-            this.stringParamData.push(this._formBuilder.array(stringParamListTransform));
+            this.stringParamData.push(
+              this._formBuilder.array(stringParamListTransform)
+            );
+
+            this.stringParams[index] = stringParamList;
 
             // console.log("string param", this.stringParamData.at(6));
           }
 
-
           this.recipeListData.push(
             this._formBuilder.group({
               StringParam: [
                 {
                   value: recipeDetailMat.StringParam,
                   disabled: !this.isEditable(),
-                }
+                },
               ],
               isUse: [
                 { value: recipeDetailMat.isUse, disabled: !this.isEditable() },
@@ -139,7 +150,7 @@ export class RecipeListComponent implements OnInit {
               ],
               stirTime: [
                 {
-                  value: recipeDetailMat.stirTime,
+                  value: recipeDetailMat.stirTime / 10,
                   disabled: !this.isEditable(),
                 },
               ],
@@ -185,7 +196,7 @@ export class RecipeListComponent implements OnInit {
         this.isMatLoaded = true;
       });
 
-      console.log("string param form",this.stringParamForm);
+    console.log('string param form', this.stringParamForm);
 
     this.recipeListForm.valueChanges.subscribe((value) => {
       // console.log(value.recipeListData);
@@ -233,7 +244,7 @@ export class RecipeListComponent implements OnInit {
   }
 
   get stringParamControlAtIdx() {
-    return (this.stringParamData.at(this.currentSelectStringParam!) as FormArray);
+    return this.stringParamData.at(this.currentSelectStringParam!) as FormArray;
   }
 
   isEditable() {
@@ -257,20 +268,21 @@ export class RecipeListComponent implements OnInit {
     console.log('set mat ', material, 'to slot', i);
   }
 
-  getTypeForRecipeListAtIndex(i: any){
+  getTypeForRecipeListAtIndex(i: any) {
     let target = this.recipeListData.at(i);
 
-
     // search from full detail
-    for(const category of Object.keys(this.categoriedMaterial)){
+    for (const category of Object.keys(this.categoriedMaterial)) {
-      let finder = this.categoriedMaterial[category].find(mat => mat.id == target.value.materialPathId);
+      let finder = this.categoriedMaterial[category].find(
+        (mat) => mat.id == target.value.materialPathId
+      );
 
       if (finder != undefined) {
         // console.log('found ',  finder.name, ' in ', category);
         return {
-          "category": category,
+          category: category,
-          "name": finder.name,
+          name: finder.name,
-          "id": finder.id
+          id: finder.id,
         };
       }
     }
@@ -278,16 +290,16 @@ export class RecipeListComponent implements OnInit {
     // console.log("did not find in full detail");
 
     return {
-      "category": "others",
+      category: 'others',
-      "name": target.value.name,
+      name: target.value.name,
-      "id": target.value.materialPathId
+      id: target.value.materialPathId,
     };
   }
 
   // TODO: Filter from full detail by type
   ListCategory = () => {
     let catMap: { [key: string]: any[] } = {
-      'others': []
+      others: [],
     };
 
     // create category map
@@ -295,21 +307,19 @@ export class RecipeListComponent implements OnInit {
       catMap[category] = [];
     });
 
-    console.log("generated category", catMap);
+    console.log('generated category', catMap);
 
     this.fullMaterialList!.forEach((mat) => {
       let category = getMaterialType(mat.materialId);
 
-      if(Array.isArray(catMap[category])){
+      if (Array.isArray(catMap[category])) {
         catMap[category].push({
           id: mat.materialId,
           name: mat.name,
         });
       }
-
     });
 
-
     return catMap;
   };
 
@@ -317,11 +327,12 @@ export class RecipeListComponent implements OnInit {
 
   // exposed from mat_type.ts
   isEquipment = (materialId: number) => isNonMaterial(materialId);
-  isNotExistbyCatagories = (materialId : number) => getMaterialType(materialId) == 'others';
+  isNotExistbyCatagories = (materialId: number) =>
+    getMaterialType(materialId) == 'others';
 
   isStringParamExist = (i: number) => {
     let rawStringParam = this.recipeListData.at(i).get('StringParam')?.value;
-    if(rawStringParam){
+    if (rawStringParam) {
       return true;
     } else {
       return false;
@@ -331,25 +342,19 @@ export class RecipeListComponent implements OnInit {
   getStringParamOfIndex = (i: number | null) => {
     let idx = i || -1;
 
-    if(idx == -1){
+    if (idx == -1) {
       return [];
     }
 
-    let rawStringParam = new StringParam(this.recipeListData.at(idx).get('StringParam')?.value);
+    let params = this.stringParams[idx];
-    let params = rawStringParam.extract().as_list();
-
-    this.stringParams[idx] = params;
-    // console.log("string param", this.stringParams)
 
     return params;
-
   };
 
   getStringParam = (i: number, key: string) => {
-
     // get param at index
-    let param = this.stringParams[i].find(param => {
+    let param = this.stringParams[i].find((param) => {
-      if(param.pkey == key){
+      if (param.pkey == key) {
         return param;
       } else {
         return undefined;
@@ -357,23 +362,50 @@ export class RecipeListComponent implements OnInit {
     });
 
     return param;
-  }
+  };
 
-  setStringParam = (i: number, key: string,event: any) => {
+  setStringParam = (i: number, key: string, event: any) => {
-    console.log("check on string param", this.stringParams);
+    console.log('check on string param', this.stringParams, i, key, event);
 
-    let value = event.target.value;
+    // let value = event.target.value;
 
-    if(value != ""){
+    let stringVal = event.target.value;
+
+    if (event != undefined) {
       // get param at index
-      this.stringParams[i].find(param => {
+      // this.stringParams[i].find((param) => {
-        if(param.pkey == key){
+      //   if (param.pkey == key) {
-          param.pvalue = value;
+      //     param.pvalue = event;
-        }
+      //   }
-      })
+      // });
-    }
 
-  }
+      event = stringVal == undefined ? event: stringVal;
+
+      this.stringParams[i].find((param) => param.pkey == key)!.pvalue = event.toString();
+
+      console.log("finder", this.stringParams[i].find((param) => param.pkey == key));
+
+      // update string param form
+      // console.log(this.stringParamData.controls[i].get(key));
+
+
+      let targetControl = ((this.stringParamData.controls[i]) as FormArray).controls;
+      let pindex = 0;
+
+      targetControl.forEach((control: any, index: number) => {
+        if (control.get('pkey')!.value == key) {
+          pindex = index;
+        }
+      });
+
+      // set value
+      targetControl[pindex].get('pvalue')!.setValue(event);
+
+      console.log("set value", targetControl[pindex].get('pvalue')!.value);
+
+      // console.log('set string param', this.stringParams, i, key, event);
+    }
+  };
 
   openStringParamEditor(i: any) {
     console.log('open param list for ', i);
@@ -381,5 +413,12 @@ export class RecipeListComponent implements OnInit {
     this.currentSelectStringParam = i;
   }
 
-  alterStringParamDisplayName = (name: string) => stringParamsDefinition[name];
+  alterStringParamDisplayName = (name: string) =>{
+    // console.log("alterStringParamDisplayName", name, stringParamsDefinition[name]);
+
+    return stringParamsDefinition[name] || name;
+  };
+
+  displayByCond = (index: number, key: string, condition: string) =>
+    conditionTests[condition](this.recipeListData.value[index][key]);
 }

client/src/app/shared/helpers/recipe.ts

@@ -89,3 +89,7 @@ export class StringParam {
 export var stringParamsDefinition: { [key: string]: string } = {
   'esp-v2-press-value': 'Current 100 x mA ( 10 - 24 )'
 }
+
+export var conditionTests: { [key: string]: (arg: any) => boolean } = {
+  'not-zero': (arg: any) => arg != 0
+}