SimpleChatTCRV:UI:Cleanup: Have common div+label+el logic

Avoid seperate duplicated logic for creating the div+label+el based
element
This commit is contained in:
hanishkvc 2025-11-25 14:44:42 +05:30
parent 073c570cad
commit 3cd2e3fd90
2 changed files with 17 additions and 63 deletions

View File

@ -2178,16 +2178,16 @@ export class Config {
}
}, [":chatProps:apiEP", ":chatProps:iRecentUserMsgCnt"], (propWithPath, prop, elParent)=>{
if (propWithPath == ":chatProps:apiEP") {
let sel = ui.el_creatediv_select("SetApiEP", "ApiEndPoint", ApiEP.Type, this.chatProps.apiEP, (val)=>{
let sel = ui.el_create_divlabelel("ApiEndPoint", ui.el_create_select("SetApiEP", ApiEP.Type, this.chatProps.apiEP, (val)=>{
// @ts-ignore
this.chatProps.apiEP = ApiEP.Type[val];
});
}));
elParent.appendChild(sel.div);
}
if (propWithPath == ":chatProps:iRecentUserMsgCnt") {
let sel = ui.el_creatediv_select("SetChatHistoryInCtxt", "ChatHistoryInCtxt", this.sRecentUserMsgCntDict, this.chatProps.iRecentUserMsgCnt, (val)=>{
let sel = ui.el_create_divlabelel("ChatHistoryInCtxt", ui.el_create_select("SetChatHistoryInCtxt", this.sRecentUserMsgCntDict, this.chatProps.iRecentUserMsgCnt, (val)=>{
this.chatProps.iRecentUserMsgCnt = this.sRecentUserMsgCntDict[val];
});
}));
elParent.appendChild(sel.div);
}
})

View File

@ -113,28 +113,6 @@ export function el_create_boolbutton(id, texts, defaultValue, cb) {
return el;
}
/**
* Create a div wrapped button which represents bool value using specified text wrt true and false.
* @param {string} id
* @param {string} label
* @param {{ true: string; false: string; }} texts
* @param {boolean} defaultValue
* @param {(arg0: boolean) => void} cb
* @param {string} className
*/
export function el_creatediv_boolbutton(id, label, texts, defaultValue, cb, className="gridx2") {
let div = document.createElement("div");
div.className = className;
let lbl = document.createElement("label");
lbl.setAttribute("for", id);
lbl.innerText = label;
div.appendChild(lbl);
let btn = el_create_boolbutton(id, texts, defaultValue, cb);
div.appendChild(btn);
return { div: div, el: btn };
}
/**
* Create a select ui element, with a set of options to select from.
* * options: an object which contains name-value pairs
@ -171,29 +149,6 @@ export function el_create_select(id, options, defaultOption, cb) {
return el;
}
/**
* Create a div wrapped select ui element, with a set of options to select from.
*
* @param {string} id
* @param {any} label
* @param {{ [x: string]: any; }} options
* @param {any} defaultOption
* @param {(arg0: string) => void} cb
* @param {string} className
*/
export function el_creatediv_select(id, label, options, defaultOption, cb, className="gridx2") {
let div = document.createElement("div");
div.className = className;
let lbl = document.createElement("label");
lbl.setAttribute("for", id);
lbl.innerText = label;
div.appendChild(lbl);
let sel = el_create_select(id, options,defaultOption, cb);
div.appendChild(sel);
return { div: div, el: sel };
}
/**
* Create a input ui element.
*
@ -215,28 +170,27 @@ export function el_create_input(id, type, defaultValue, cb) {
return el;
}
/**
* Create a div wrapped input.
* Create a div wrapped labeled instance of the passed el.
*
* @param {string} id
* @template {HTMLElement | HTMLInputElement} T
* @param {string} label
* @param {string} type
* @param {any} defaultValue
* @param {function(any):void} cb
* @param {T} el
* @param {string} className
*/
export function el_creatediv_input(id, label, type, defaultValue, cb, className="gridx2") {
export function el_create_divlabelel(label, el, className="gridx2") {
let div = document.createElement("div");
div.className = className;
let lbl = document.createElement("label");
lbl.setAttribute("for", id);
lbl.setAttribute("for", el.id);
lbl.innerText = label;
div.appendChild(lbl);
let el = el_create_input(id, type, defaultValue, cb);
div.appendChild(el);
return { div: div, el: el };
}
/**
* Create a div wrapped input of type file,
* which hides input and shows a button which chains to underlying file type input.
@ -249,8 +203,8 @@ export function el_creatediv_input(id, label, type, defaultValue, cb, className=
* @param {string} className
*/
export function el_creatediv_inputfilebtn(id, label, labelBtnHtml, defaultValue, acceptable, cb, className) {
let elX = el_creatediv_input(id, label, "file", defaultValue, cb, className)
elX.el.hidden = true
let elX = el_create_divlabelel(label, el_create_input(id, "file", defaultValue, cb), className)
elX.el.hidden = true;
elX.el.accept = acceptable
let idB = `${id}-button`
let elB = el_create_button(idB, (mev) => {
@ -334,20 +288,20 @@ export function ui_show_obj_props_edit(elParent, propsTreeRoot, oObj, lProps, sL
let type = typeof(val);
let id = `Set${propsTreeRootNew.replaceAll(':','-')}`
if (((type == "string") || (type == "number"))) {
let inp = el_creatediv_input(`${id}`, k, typeDict[type], oObj[k], (val)=>{
let inp = el_create_divlabelel(k, el_create_input(`${id}`, typeDict[type], oObj[k], (val)=>{
if (type == "number") {
val = Number(val);
}
oObj[k] = val;
});
}));
if (fRefiner) {
fRefiner(k, inp.el)
}
elFS.appendChild(inp.div);
} else if (type == "boolean") {
let bbtn = el_creatediv_boolbutton(`${id}`, k, {true: "true", false: "false"}, val, (userVal)=>{
let bbtn = el_create_divlabelel(k, el_create_boolbutton(`${id}`, {true: "true", false: "false"}, val, (userVal)=>{
oObj[k] = userVal;
});
}));
if (fRefiner) {
fRefiner(k, bbtn.el)
}