pakin/Taobin-Recipe-Manager
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add string param support

Browse source
This commit is contained in:
pakintada@gmail.com 2024-01-11 08:12:19 +07:00
parent 98341d2d80
commit 636a700a79
8 changed files with 294 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

2
client/src/app/core/models/recipe.model.ts
View file

@ -129,7 +129,7 @@ export interface ToppingList {
id: string;
isUse: string;
isShow: string;
stringParam: string;
StringParam: string;
name: string;
nonCashPrice: string;
otherName: string;

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

@ -31,7 +31,11 @@
<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" />
<input
type="text"
class="input w-16"
formControlName="powderGram"
/>
<p>&nbsp;gram</p>
</div>
</td>
@ -56,36 +60,64 @@
<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">
<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)"
<p>StringParam=</p>
<input type="text" class="input w-16" formControlName="StringParam" />
>
<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>
<p>&nbsp;</p>
<p>Volume=&nbsp;</p>
<input type="text" class="input w-16" formControlName="powderGram" />
<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">
<div
class="flex items-center"
*ngIf="getTypeForRecipeListAtIndex(i)['id'] == 1002"
>
<p>Hot=&nbsp;</p>
<input type="text" class="input w-16" formControlName="waterYield" />
<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>
<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']))">
<div
*ngIf="
isNotExistbyCatagories(getTypeForRecipeListAtIndex(i)['id']) ||
isEquipment(getTypeForRecipeListAtIndex(i)['id'])
"
>
<td class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
<input type="text" class="input" formControlName="name" />
</td>
</div>
</tr>
</tbody>
</table>
@ -124,3 +156,33 @@
</div>
</div>
</label>
<!-- show string param modal -->
<input
type="checkbox"
id="string_param_selector"
class="modal-toggle"
#checkBox="ngModel"
[(ngModel)]="showStringParamSelector"
/>
<label for="string_param_selector" class="modal">
<div 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>
<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">
<!-- <input type="text" class="input input-disabled" formControlName="pkey" [disabled]="true"/> -->
<p>{{alterStringParamDisplayName(param.value.pkey)}}</p>
<input type="text" class="input bg-slate-400" formControlName="pvalue" />
</div>
</div>
</div>
</div>
</div>
</label>

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

@ -22,7 +22,7 @@ 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 } from 'src/app/shared/helpers/mat_type';
import { getMaterialType, getCategories, isNonMaterial, StringParam, stringParamsDefinition } from 'src/app/shared/helpers/recipe';
@Component({
selector: 'app-recipe-list',
@ -47,6 +47,24 @@ export class RecipeListComponent implements OnInit {
categoriedMaterial: { [key: string]: { id: number; name: string }[] } = {};
// ------------------------------------------------------------------------
// string params
stringParams: {
[key: number]: {
pkey: string;
pvalue: any;
}[];
} = {};
showStringParamSelector: boolean = false;
currentSelectStringParam: number | null = null;
stringParamForm = this._formBuilder.group({
stringParamData: this._formBuilder.array<{
pkey: string;
pvalue: any;
}[]>([]),
}, { updateOn: 'blur' });
constructor(
private _recipeService: RecipeService,
private _materialService: MaterialService,
@ -70,6 +88,31 @@ export class RecipeListComponent implements OnInit {
.subscribe(({ result }) => {
this._recipeListOriginalArray = result;
result.forEach((recipeDetailMat: RecipeDetailMat) => {
// StringParam
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) {
stringParamListTransform.push(this._formBuilder.group({
pkey: [
{ value: param.pkey, disabled: !this.isEditable() },
],
pvalue: [
{ value: param.pvalue, disabled: !this.isEditable() },
]
}))
}
this.stringParamData.push(this._formBuilder.array(stringParamListTransform));
// console.log("string param", this.stringParamData.at(6));
}
this.recipeListData.push(
this._formBuilder.group({
StringParam: [
@ -142,6 +185,8 @@ export class RecipeListComponent implements OnInit {
this.isMatLoaded = true;
});
console.log("string param form",this.stringParamForm);
this.recipeListForm.valueChanges.subscribe((value) => {
// console.log(value.recipeListData);
// console.log("original recipe detail",this._recipeListOriginalArray);
@ -167,7 +212,7 @@ export class RecipeListComponent implements OnInit {
}
});
// TODO: make this
// TODO: embed this to recipelist
this._materialService.getMaterialCodes().subscribe((materials) => {
this.materialList = materials;
});
@ -183,6 +228,14 @@ export class RecipeListComponent implements OnInit {
return this.recipeListForm.get('recipeListData') as FormArray;
}
get stringParamData(): FormArray {
return this.stringParamForm.get('stringParamData') as FormArray;
}
get stringParamControlAtIdx() {
return (this.stringParamData.at(this.currentSelectStringParam!) as FormArray);
}
isEditable() {
return this._userService
.getCurrentUser()!
@ -265,4 +318,68 @@ export class RecipeListComponent implements OnInit {
// exposed from mat_type.ts
isEquipment = (materialId: number) => isNonMaterial(materialId);
isNotExistbyCatagories = (materialId : number) => getMaterialType(materialId) == 'others';
isStringParamExist = (i: number) => {
let rawStringParam = this.recipeListData.at(i).get('StringParam')?.value;
if(rawStringParam){
return true;
} else {
return false;
}
};
getStringParamOfIndex = (i: number | null) => {
let idx = i || -1;
if(idx == -1){
return [];
}
let rawStringParam = new StringParam(this.recipeListData.at(idx).get('StringParam')?.value);
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 => {
if(param.pkey == key){
return param;
} else {
return undefined;
}
});
return param;
}
setStringParam = (i: number, key: string,event: any) => {
console.log("check on string param", this.stringParams);
let value = event.target.value;
if(value != ""){
// get param at index
this.stringParams[i].find(param => {
if(param.pkey == key){
param.pvalue = value;
}
})
}
}
openStringParamEditor(i: any) {
console.log('open param list for ', i);
this.showStringParamSelector = true;
this.currentSelectStringParam = i;
}
alterStringParamDisplayName = (name: string) => stringParamsDefinition[name];
}

48
client/src/app/shared/helpers/mat_type.ts → client/src/app/shared/helpers/recipe.ts
View file

@ -40,6 +40,52 @@ export function isNonMaterial(materialId: number) {
return (
rangeMaterialMapping['cup'](materialId) ||
rangeMaterialMapping['lid'](materialId) ||
rangeMaterialMapping['straw'](materialId) || rangeMaterialMapping['whipper'](materialId)
rangeMaterialMapping['straw'](materialId) ||
rangeMaterialMapping['whipper'](materialId) ||
rangeMaterialMapping['ice'](materialId)
);
}
// StringParam
export class StringParam {
StringParam: string;
extractedParams: { [key: string]: any } = {};
constructor(StringParam: string) {
this.StringParam = StringParam;
}
extract(){
// split by ,
const params = this.StringParam.split(',');
for (const param of params) {
const [key, value] = param.split('=');
if(key != ''){
this.extractedParams[key] = value;
}
}
return this;
}
as_list(){
let res: {pkey: string; pvalue:any}[] = [];
// iter through param
for(let p of Object.keys(this.extractedParams)){
res.push({
"pkey": p,
"pvalue": this.extractedParams[p]
})
}
return res
}
}
export var stringParamsDefinition: { [key: string]: string } = {
'esp-v2-press-value': 'Current 100 x mA ( 10 - 24 )'
}