diff --git a/bricks/build.sh b/bricks/build.sh index 27c986c..996c3aa 100755 --- a/bricks/build.sh +++ b/bricks/build.sh @@ -1,4 +1,4 @@ -SOURCES=" page_data_loader.js factory.js uitypesdef.js utils.js \ +SOURCES=" page_data_loader.js factory.js uitypesdef.js utils.js uitype.js \ i18n.js widget.js layout.js bricks.js image.js \ jsoncall.js myoperator.js scroll.js menu.js modal.js running.js \ markdown_viewer.js video.js audio.js toolbar.js tab.js \ @@ -6,7 +6,7 @@ SOURCES=" page_data_loader.js factory.js uitypesdef.js utils.js \ tree.js multiple_state_image.js dynamiccolumn.js form.js message.js conform.js \ paging.js datagrid.js dataviewer.js iframe.js \ floaticonbar.js miniform.js wterm.js dynamicaccordion.js \ - llm_dialog.js websocket.js " + llm_dialog.js websocket.js datarow.js tabular.js " echo ${SOURCES} cat ${SOURCES} > ../dist/bricks.js # uglifyjs --compress --mangle -- ../dist/bricks.js > ../dist/bricks.min.js diff --git a/bricks/datarow.js b/bricks/datarow.js index 16dc078..709a7b6 100644 --- a/bricks/datarow.js +++ b/bricks/datarow.js @@ -34,7 +34,7 @@ bricks.DataRow = class extends bricks.HBox { } build_toolbar(editable, header){ var tools = []; - const reserved = ['add', 'update', 'delete']; + var rsvd = ['add', 'update', 'delete']; if (editable){ if (header){ @@ -55,16 +55,22 @@ bricks.DataRow = class extends bricks.HBox { } if (header){ if (this.toolbar){ - this.toolbar.tools.forEach(t => if (not reserved.includes(t.name)) tools.push({name:'blankicon'})); + this.toolbar.tools.forEach(t => { + if (! rsvd.includes(t.name)) + tools.push({name:'blankicon'}); + }); } } else { if (this.toolbar){ - this.toolbar.tools.forEach(t => if (not reserved.includes(t.name)) tools.push(t)); + this.toolbar.tools.forEach(t => { + if (! rsvd.includes(t.name)) + tools.push(t) + }); } } var toolbar = bricks.extend({cwidth:2.5}, this.toolbar || {}); toolbar.tools = tools; - var w = new bricks.IconBar(desc); + var w = new bricks.IconBar(toolbar); this.add_widget(w); this.event_names = [] for(var i=0;i { - dr.bind(e, this.record_event_handle.bind(this, record, dr, item)); + dr.bind(e, this.record_event_handle.bind(this, e, record, dr, item)); }); - return dr; } else { - var view = bricks.apply_data(this.record_View, record); - var dr = bricks.DataRow(view); + var dr = await bricks.widgetBuild(this.record_view, this); dr.render(this.editable, this.checkable, true); dr.bind('add', this.add_record.bind(this, dr, record)); - return dr; + console.log('datarow=', dr); } + item.add_widget(dr); + return dr; } - record_event_handle(record, row, item){ - + record_event_handle(event_name, record, row, item){ + this.dispatch(event_name, record); } } diff --git a/bricks/uitype.js b/bricks/uitype.js new file mode 100644 index 0000000..117d4a0 --- /dev/null +++ b/bricks/uitype.js @@ -0,0 +1,21 @@ +var bricks = window.bricks || {}; +bricks.uiViewers = {}; +bricks.add_ViewBuilder = function(uitype, handler){ + bricks.uiViewers[uitype] = handler; +} +bricks.get_ViewBuilder = function(uitype){ + return bricks.uiViewers[uitype]; +} +bricks.add_ViewBuilder('str', function(opts){ + var options = bricks.extend({}, opts); + options.otext = opts.value; + options.i18n = true; + return new bricks.Text(options); +}); + +bricks.add_ViewBuilder('icon', function(opts){ + var options = bricks.extend({}, opts); + options.url = opts.value; + return new bricks.Icon(options); +}); + diff --git a/examples/tabular.ui b/examples/tabular.ui new file mode 100644 index 0000000..12d7145 --- /dev/null +++ b/examples/tabular.ui @@ -0,0 +1,39 @@ +{ + "widgettype":"Tabular", + "options":{ + "data_url":"{{entire_url('./channels.dspy')}}", + "content_url":"{{entire_url('play_channel.dspy')}}", + "content_view":{ + "id":"videoplayer", + "widgettype":"Iframe", + "options":{ + "width":"100%", + "url":"${url}" + } + }, + + "record_view":{ + "widgettype":"DataRow", + "options":{ + "fields":[ + { + "name":"logo_url", + "uitype":"icon", + "label":"Icon", + "value":"${logo_url}" + }, + { + "name":"title", + "uitype":"str", + "lable":"Channel", + "value":"${tv_name}" + } + ], + "height":"100%", + "width":"100%" + }, + }, + "page_rows":800, + "cache_limit":5 + } +}