add material setting show sample

client/src/app/features/material-settings/material-settings.component.html

@@ -1,25 +1,87 @@
-<div class="overflow-auto h-[100vh] w-[85vw]">
+<div class="overflow-auto h-[90vh] w-[85vw]">
+  <div class="m-4 w-[90%]" *ngFor="let cat of getCategories()">
+    <details class="bg-stone-300 p-4 collapse collapse-arrow">
+      <summary class="font-bold text-lg collapse-title">{{ cat }}</summary>
 
-<div class="m-4 w-[90%]" *ngFor="let cat of getCategories()">
-  <details class="bg-stone-300 p-4 collapse collapse-arrow">
-    <summary class="font-bold text-lg collapse-title">{{ cat }}</summary>
-
-    <div class="collapse-content">
-      <div class="grid grid-flow-row grid-cols-7 gap-4">
-        <div class="m-1" *ngFor="let material of allMaterialsGroupedByTypes[cat]">
-          <button class="bg-slate-100 p-2 rounded-md w-44">
-            <p>{{ material.name }} ({{ material.id }})</p>
-          </button>
+      <div class="collapse-content">
+        <div class="grid grid-flow-row grid-cols-7 gap-4">
+          <div
+            class="m-1"
+            *ngFor="let material of allMaterialsGroupedByTypes[cat]"
+          >
+            <button
+              class="bg-slate-100 p-2 rounded-md w-44"
+              (click)="getMaterialSettingsById(material.id)"
+            >
+              <p>{{ material.name }} ({{ material.id }})</p>
+            </button>
+          </div>
         </div>
       </div>
-    </div>
-
-
-
-
-  </details>
+    </details>
+  </div>
 </div>
 
-</div>
+
+<!-- 0: "StringParam"1: "AlarmIDWhenOffline"2: "BeanChannel"3: "CanisterType"4: "DrainTimer"5: "IceScreamBingsuChannel"6: "IsEquipment"7: "LeavesChannel"8: "LowToOffline"9: "MaterialStatus"10: "PowderChannel"11: "RefillUnitGram"12: "RefillUnitMilliliters"13: "RefillUnitPCS"14: "ScheduleDrainType"15: "SodaChannel"16: "StockAdjust"17: "SyrupChannel"18: "id"19: "idAlternate"20: "isUse"21: "pay_rettry_max_count"22: "feed_mode"23: "MaterialParameter"24: "materialName"25: "materialOtherName"26: "RawMaterialUnit" -->
 
 <!-- open material settings modal -->
+<div *ngIf="currentMaterialSettings != null">
+  <input
+    type="checkbox"
+    id="material_settings_modal"
+    class="modal-toggle"
+    #checkBox="ngModel"
+    [(ngModel)]="showMaterialSettingModal"
+    (close)="currentMaterialSettings = null"
+  />
+  <label for="material_settings_modal" class="modal">
+    <div class="modal-box max-w-5xl">
+      <p>Material Settings</p>
+
+      <input type="checkbox" [value]="currentMaterialSettings.isUse == 'true' ? true : false">
+
+
+      <p>{{ currentMaterialSettings.materialName }}</p>
+      <p>{{ currentMaterialSettings.materialId }}</p>
+      <p>{{ currentMaterialSettings.materialOtherName }}</p>
+
+      <p>Status {{ currentMaterialSettings.MaterialStatus }}</p>
+      <p>CanisterType {{ currentMaterialSettings.CanisterType }}</p>
+      <p>AlarmIDWhenOffline {{ currentMaterialSettings.AlarmIDWhenOffline }}</p>
+      <p>ScheduleDrainType {{ currentMaterialSettings.ScheduleDrainType }}</p>
+      <p>LowToOffline {{ currentMaterialSettings.LowToOffline }}</p>
+
+      <p>StockAdjust {{ currentMaterialSettings.StockAdjust }}</p>
+
+      <p>pay_rettry_max_count {{ currentMaterialSettings.pay_rettry_max_count }}</p>
+      <!-- Material Param -->
+      <div
+        class="bg-green-200 rounded-md p-4"
+      >
+        <p>StringParam {{ currentMaterialSettings.StringParam }}</p>
+        <p>Parameter {{ currentMaterialSettings.MaterialParameter }}</p>
+        <p>RawMaterialUnit {{ currentMaterialSettings.RawMaterialUnit }}</p>
+
+      </div>
+
+      <!-- Types -->
+      <div class="bg-amber-300 rounded-md p-4">
+        <p>IsEquipment? {{ currentMaterialSettings.IsEquipment }}</p>
+        <p>Bean? {{ currentMaterialSettings.BeanChannel }}</p>
+        <p>Powder? {{ currentMaterialSettings.PowderChannel }}</p>
+        <p>Syrup? {{ currentMaterialSettings.SyrupChannel }}</p>
+        <p>Soda? {{ currentMaterialSettings.SodaChannel }}</p>
+        <p>Leaves? {{ currentMaterialSettings.LeavesChannel }}</p>
+        <p>IceScreamBingsu? {{ currentMaterialSettings.IceScreamBingsuChannel }}</p>
+      </div>
+
+      <!-- Refill -->
+      <div class="bg-blue-200 rounded-md p-4">
+        <p>RefillUnitGram? {{ currentMaterialSettings.RefillUnitGram }}</p>
+        <p>RefillUnitMilliliters? {{ currentMaterialSettings.RefillUnitMilliliters }}</p>
+        <p>RefillUnitPCS? {{ currentMaterialSettings.RefillUnitPCS }}</p>
+      </div>
+    </div>
+  </label>
+</div>

client/src/app/features/material-settings/material-settings.component.ts

@@ -1,5 +1,6 @@
 import { CommonModule, NgIf } from '@angular/common';
 import { Component, OnInit } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MaterialService } from 'src/app/core/services/material.service';
 import { getCategories, getMaterialType } from 'src/app/shared/helpers/recipe';
 
@@ -7,10 +8,7 @@ import { getCategories, getMaterialType } from 'src/app/shared/helpers/recipe';
   selector: 'app-material-settings',
   templateUrl: './material-settings.component.html',
   standalone: true,
-  imports: [
-    NgIf,
-    CommonModule
-  ]
+  imports: [NgIf, CommonModule, ReactiveFormsModule, FormsModule],
 })
 export class MaterialSettingsComponent implements OnInit {
   // material settings
@@ -22,8 +20,9 @@ export class MaterialSettingsComponent implements OnInit {
         type: string;
       }[]
     | null = [];
-
   allMaterialsGroupedByTypes: { [key: string]: any[] } = {};
+  currentMaterialSettings: any = null;
+  showMaterialSettingModal: boolean = false;
 
   constructor(private _materialService: MaterialService) {}
 
@@ -35,8 +34,7 @@ export class MaterialSettingsComponent implements OnInit {
     });
   }
 
-
-// ------------------ Functions ---------------------
+  // ------------------ Functions ---------------------
 
   // filter material by type
   ListCategory = () => {
@@ -54,11 +52,11 @@ export class MaterialSettingsComponent implements OnInit {
     this.allMaterials!.forEach((mat) => {
       let category = getMaterialType(mat.materialId);
       // try again
-      if(category == 'others'){
+      if (category == 'others') {
         // find min
         // console.log(Math.floor(mat.materialId / 1000) );
         let interCode = Math.floor(mat.materialId / 10000) * 10000;
-        let originalCode = mat.materialId - (interCode);
+        let originalCode = mat.materialId - interCode;
 
         // console.log("from",mat.materialId,"interCode", interCode, "originalCode", originalCode);
         category = getMaterialType(originalCode);
@@ -79,6 +77,22 @@ export class MaterialSettingsComponent implements OnInit {
 
   // list all categories
   getCategories = () => {
-    return getCategories();
+    let catList = getCategories();
+    catList.push('others');
+    return catList;
+  };
+
+  // get material settings by id
+  async getMaterialSettingsById(id: number) {
+    // Implementation goes here
+    (await this._materialService.getMaterialSettingById(id)).subscribe(
+      (data) => {
+        this.currentMaterialSettings = data;
+        this.showMaterialSettingModal = true;
+        console.log('material setting', data);
+        // console.log("keys of material settings", Object.keys(data));
+        console.log('material setting', data.isUse, typeof data.isUse);
+      }
+    );
   }
 }