From 3cd2e3fd902cc3bb775c688173c876ad11d6e57f Mon Sep 17 00:00:00 2001 From: hanishkvc Date: Tue, 25 Nov 2025 14:44:42 +0530 Subject: [PATCH] SimpleChatTCRV:UI:Cleanup: Have common div+label+el logic Avoid seperate duplicated logic for creating the div+label+el based element --- tools/server/public_simplechat/simplechat.js | 8 +-- tools/server/public_simplechat/ui.mjs | 72 ++++---------------- 2 files changed, 17 insertions(+), 63 deletions(-) diff --git a/tools/server/public_simplechat/simplechat.js b/tools/server/public_simplechat/simplechat.js index 0f3df0e742..29924ad639 100644 --- a/tools/server/public_simplechat/simplechat.js +++ b/tools/server/public_simplechat/simplechat.js @@ -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); } }) diff --git a/tools/server/public_simplechat/ui.mjs b/tools/server/public_simplechat/ui.mjs index fac63e489e..2f542cb03f 100644 --- a/tools/server/public_simplechat/ui.mjs +++ b/tools/server/public_simplechat/ui.mjs @@ -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) }