From 953734ff54bdc67101e11fba7fb68054c35319b9 Mon Sep 17 00:00:00 2001 From: kevin Date: Sat, 30 Nov 2024 12:15:44 -0500 Subject: [PATCH] html/uiTest : Updates to support latest cwUi JS and replace references to type 'list' with 'vlist'. --- html/uiTest/css/ui.css | 32 +++- html/uiTest/js/ui.js | 394 +++++++++++++++++++++-------------------- html/uiTest/ui.cfg | 2 +- 3 files changed, 232 insertions(+), 196 deletions(-) diff --git a/html/uiTest/css/ui.css b/html/uiTest/css/ui.css index 7c98619..abd66f4 100644 --- a/html/uiTest/css/ui.css +++ b/html/uiTest/css/ui.css @@ -132,13 +132,42 @@ label { flex-direction: column; height: 100px; + width: 100%; overflow-x: hidden; /* 'hidden' to remove scroll bar */ overflow-y: auto; - width: 100%; background-color: PowderBlue; } + +/* outer list div - contains the list label and the list scroller */ +.uiHListDiv { + display: flex; + flex-direction: row; + + align-items: flex-start; /* left justify */ + align-content: flex-stretch; /* fill horizontal space */ + +} + +.uiHListDiv label { + width: 100%; + background-color: LightSteelBlue; + +} + +.uiHList { + display:flex; + flex-direction: row; + + height: 100%; + overflow-x: auto; + overflow-y: hidden; /* 'hidden' to remove scroll bar */ + + background-color: PowderBlue; +} + + .uiStringDisp { width: 100%; } @@ -146,3 +175,4 @@ label { .uiSelected { border: 1px solid blue; } + diff --git a/html/uiTest/js/ui.js b/html/uiTest/js/ui.js index 01d26f1..c23793d 100644 --- a/html/uiTest/js/ui.js +++ b/html/uiTest/js/ui.js @@ -3,170 +3,23 @@ var _rootId = "0"; var _nextEleId = 0; var _focusId = null; var _focusVal = null; +var _rootDivEle = null; +var _rootEle = null; function set_app_title( suffix, className ) { var ele = document.getElementById('connectTitleId'); - ele.innerHTML = suffix - ele.className = className -} - - -function uiOnError( msg, r) -{ - console.log("Error:" + msg); -} - -function uiGetParent( r ) -{ - parent_ele = document.getElementById(r.parent_id); - - if( parent_ele == null ) + if(ele != null) { - uiOnError("Parent not found. parent_id:" + r.parent_id,r); + ele.innerHTML = suffix + ele.className = className } - - return parent_ele; -} - -function uiCreateEle( r ) -{ - var parent_ele; - - if((parent_ele = uiGetParent(r)) != null ) - { - ele = document.createElement(r.ele_type) - ele.id = r.ele_id; - ele.className = r.value; - - parent_ele.appendChild(ele) + else + { + console.log("Ele. not found. Set title failed.") } } -function uiRemoveChildren( r ) -{ - ele = document.getElementById(r.ele_id) - - while (ele.firstChild) - { - ele.removeChild(ele.firstChild); - } -} - -function uiDivCreate( r ) -{ uiCreateEle(r) } - -function uiLabelCreate( r ) -{ - var parent_ele; - - if((parent_ele = uiGetParent(r)) != null ) - { - ele = document.createElement("label") - ele.htmlFor = r.ele_id - ele.innerHTML = r.value; - parent_ele.appendChild(ele) - } - -} - -function uiSelectCreate( r ) -{ - uiCreateEle(r) -} - -function uiSelectClear( r ) -{ uiRemoveChildren(r) } - -function uiSelectInsert( r ) -{ - var select_ele; - - if((select_ele = uiGetParent(r)) != null ) - { - var option = document.createElement('option'); - - option.id = r.ele_id; - option.innerHTML = r.value; - option.value = r.ele_id; - option.onclick = function() { uiOnSelectClick(this) } - - select_ele.appendChild(option) - } -} - -function uiSelectChoose( r ) -{ - var select_ele; - - if((select_ele = uiGetParent(r)) != null ) - { - if( select_ele.hasChildNodes()) - { - var children = select_ele.childNodes - for(var i=0; i= ele.minValue) + var max_ok_fl = (!ele.hasOwnProperty('maxValue')) || (value <= ele.maxValue) + + if( min_ok_fl && max_ok_fl ) { ele.value = value; if( ele.decpl == 0 ) @@ -689,6 +577,26 @@ function ui_set_number_value( ele, value ) } +function ui_set_title( ele, d ) +{ + if( ele.tagName.toLowerCase() == "button" ) + ele.innerHTML = d.value; + else + { + // most controls will have a sibling element of type 'label' + var label_eles = ele.parentNode.getElementsByTagName("label"); + + if( label_eles != null && label_eles.length > 0 ) + { + label_eles[0].innerHTML = d.value + } + else + { + ui_error("set_title() target element not found."); + } + } +} + function ui_set_number_range( ele, d ) { _ui_set_number_range(ele,d) @@ -722,6 +630,8 @@ function ui_create_number( parent_ele, d ) function ui_set_number_display( ele_id, value ) { + //console.log("Numb disp: " + ele_id + " " + value) + var ele = dom_id_to_ele(ele_id); if( typeof(value)=="number") @@ -831,9 +741,14 @@ function ui_set_log_text( ele, value ) function ui_create_log( parent_ele, d ) { // create a containing div with the label - d.className = "uiLog" + + if( !d.hasOwnProperty('className') ) + d.className = "uiLog" + var log_ele = ui_create_ctl( parent_ele, "div", d.title, d, "uiLog" ) + + // add a 
 to the containing div
     var ele = dom_create_ele("pre")
     
@@ -846,19 +761,15 @@ function ui_create_log( parent_ele, d )
     return log_ele
 }
 
-function ui_create_list( parent_ele, d )
+function ui_create_list( parent_ele, d, class_label )
 {
-    d.className = "uiList"
-    console.log(d)
-    var list_ele  = ui_create_ctl( parent_ele, "div", d.title, d, "uiList" )
+    var list_ele  = ui_create_ctl( parent_ele, "div", d.title, d, class_label )
     
     return list_ele
 }
 
 function ui_set_value( d )
 {
-    //console.log(d)
-    
     var eleId = d.uuId.toString()
     var ele = dom_id_to_ele(eleId)
 
@@ -933,8 +844,15 @@ function ui_set_value( d )
 function _ui_modify_class( ele, classLabelArg, enableFl )
 {
     let classLabel  = " " + classLabelArg; // prefix the class label with a space
+
+    //console.log(ele.id + " " + classLabelArg + " " + enableFl )
+
+    let isEnabledFl = false;
     
-    let isEnabledFl = ele.className.includes(classLabel)
+    if( ele.hasOwnProperty("className") )
+	isEnabledFl = ele.className.includes(classLabel)
+    else
+	ele.className = ""
 
     // if the class is not already enabled/disabled
     if( enableFl != isEnabledFl )
@@ -944,6 +862,8 @@ function _ui_modify_class( ele, classLabelArg, enableFl )
 	else
 	    ele.className = ele.className.replace(classLabel, "");
     }
+
+    //console.log(ele.id + " " + ele.className + " " + enableFl )
 }
 
 function ui_set_select( ele, enableFl )
@@ -1013,7 +933,7 @@ function ui_set_order_key(ele, orderKey)
 
 function ui_set( d )
 {
-    console.log(d)
+    //console.log(d)
     var ele = dom_id_to_ele(d.uuId.toString())
 
     if( ele == null )
@@ -1023,6 +943,10 @@ function ui_set( d )
     {
 	switch( d.type )
 	{
+	    case "title":
+	    ui_set_title(ele,d);
+	    break;
+	    
 	    case "number_range":
 	    ui_set_number_range(ele, d)
 	    break;
@@ -1055,6 +979,14 @@ function ui_set( d )
     }
 }
 
+function ui_cache( d )
+{
+    for(i=0; i