addable & removable recipelist | savable topping & material WIP
This commit is contained in:
pakintada@gmail.com
parent
c0e9c62d85
commit
18ea640282
8 changed files with 668 additions and 301 deletions
|
|
@ -1,9 +1,20 @@
|
|||
<div class="overflow-auto h-[90vh] w-[85vw]">
|
||||
<div class="flex sticky top-10 p-2 space-x-2 items-center">
|
||||
<p class="m-4 font-bold text-lg">Material Settings</p>
|
||||
<button class="btn m-4">New Category</button>
|
||||
</div>
|
||||
|
||||
<div class="overflow-auto h-[80vh] 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>
|
||||
<summary class="font-bold text-lg collapse-title">
|
||||
{{ cat }}
|
||||
</summary>
|
||||
|
||||
<div class="collapse-content">
|
||||
<button class="btn">New {{ cat }} material</button>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<div class="grid grid-flow-row grid-cols-7 gap-4">
|
||||
<div
|
||||
class="m-1"
|
||||
|
|
@ -11,10 +22,151 @@
|
|||
>
|
||||
<button
|
||||
class="bg-slate-100 p-2 rounded-md w-44"
|
||||
(click)="getMaterialSettingsById(material.id)"
|
||||
(click)="openMaterialSettingModal(material.id)"
|
||||
>
|
||||
<p>{{ material.name }} ({{ material.id }})</p>
|
||||
</button>
|
||||
<dialog
|
||||
id="material_settings_modal_{{ material.id }}"
|
||||
class="modal"
|
||||
>
|
||||
<div class="modal-box max-w-5xl">
|
||||
|
||||
<div *ngIf="currentMaterialSettings != null" [formGroup]="materialSettingForm">
|
||||
<p>Material Settings</p>
|
||||
|
||||
<!-- TODO: add form -->
|
||||
|
||||
<div class="divider"></div>
|
||||
<div formArrayName="materialSetting" *ngFor="let material of materialSetting.controls; let i = index">
|
||||
<!-- only show the current form matched by index -->
|
||||
<div formGroupName="{{i}}">
|
||||
<div class="" *ngIf="i == currentFormIndex">
|
||||
|
||||
<!-- <p>Form at {{i}}</p> -->
|
||||
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Is Use</th>
|
||||
<th>ID</th>
|
||||
<th>ID Alternate</th>
|
||||
<th>Name</th>
|
||||
<th>Other Name</th>
|
||||
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
|
||||
<td>
|
||||
<input class="toggle" type="checkbox" formControlName="isUse" />
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<input class="input input-sm input-bordered" formControlName="id" />
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<input class="input input-sm input-bordered" formControlName="idAlternate" />
|
||||
</td>
|
||||
|
||||
|
||||
<td>
|
||||
<input class="input input-sm input-bordered" formControlName="materialName" />
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<input class="input input-sm input-bordered" formControlName="materialOtherName" />
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
<!-- <input class="input input-sm input-bordered" formControlName="RawMaterialUnit" />
|
||||
<input class="input input-sm input-bordered" formControlName="MaterialParameter" />
|
||||
<input class="input input-sm input-bordered" formControlName="id" />
|
||||
<input class="input input-sm input-bordered" formControlName="idAlternate" />
|
||||
<input class="input input-sm input-bordered" formControlName="pay_rettry_max_count" />
|
||||
<input class="input input-sm input-bordered" formControlName="feed_mode" />
|
||||
<input class="input input-sm input-bordered" formControlName="MaterialStatus" /> -->
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<!-- channels -->
|
||||
|
||||
<div class="bg-stone-500 p-2 rounded-md text-white">
|
||||
|
||||
<div class="flex space-x-2 justify-evenly">
|
||||
<div class="justify-center">
|
||||
<p class="font-bold">Powder</p>
|
||||
<input class="checkbox checkbox-info" type="checkbox" formControlName="PowderChannel" />
|
||||
</div>
|
||||
|
||||
<div class="justify-center">
|
||||
<p class="font-bold">Syrup</p>
|
||||
<input class="checkbox checkbox-info" type="checkbox" formControlName="SyrupChannel" />
|
||||
</div>
|
||||
|
||||
<div class="justify-center">
|
||||
<p class="font-bold">Bean</p>
|
||||
<input class="checkbox checkbox-info" type="checkbox" formControlName="BeanChannel" />
|
||||
</div>
|
||||
|
||||
<div class="justify-center">
|
||||
<p class="font-bold">Soda</p>
|
||||
<input class="checkbox checkbox-info" type="checkbox" formControlName="SodaChannel" />
|
||||
</div>
|
||||
|
||||
<div class="justify-center">
|
||||
<p class="font-bold">Equipment</p>
|
||||
<input class="checkbox checkbox-info" type="checkbox" formControlName="IsEquipment" />
|
||||
</div>
|
||||
|
||||
<div class="justify-center">
|
||||
<p class="font-bold">Leaves</p>
|
||||
<input class="checkbox checkbox-info" type="checkbox" formControlName="LeavesChannel" />
|
||||
</div>
|
||||
|
||||
<div class="justify-center">
|
||||
<p class="font-bold">Ice Cream</p>
|
||||
<input class="checkbox checkbox-info" type="checkbox" formControlName="IceScreamBingsuChannel" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- <input class="input input-sm input-bordered" formControlName="StringParam" /> -->
|
||||
<!-- <input class="input input-sm input-bordered" formControlName="AlarmIDWhenOffline" /> -->
|
||||
<!-- <input class="input input-sm input-bordered" formControlName="CanisterType" /> -->
|
||||
<!-- <input class="input input-sm input-bordered" formControlName="DrainTimer" /> -->
|
||||
<!-- <input class="input input-sm input-bordered" formControlName="LowToOffline" /> -->
|
||||
<!-- <input class="input input-sm input-bordered" formControlName="MaterialStatus" /> -->
|
||||
<!-- <input class="input input-sm input-bordered" formControlName="RefillUnitGram" /> -->
|
||||
<!-- <input class="input input-sm input-bordered" formControlName="RefillUnitMilliliters" /> -->
|
||||
<!-- <input class="input input-sm input-bordered" formControlName="RefillUnitPCS" /> -->
|
||||
<!-- <input class="input input-sm input-bordered" formControlName="ScheduleDrainType" /> -->
|
||||
<!-- <input class="input input-sm input-bordered" formControlName="StockAdjust" /> -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="modal-action sticky bottom-0 right-0">
|
||||
<form method="dialog">
|
||||
<button class="btn btn-warning">Close</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</dialog>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -22,66 +174,4 @@
|
|||
</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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue