Luci App form button in one row

bublikOff · August 11, 2024, 12:21pm

How can I put two buttons in one raw? Start and Stop buttons
How can auto refresh status can be displayed as text? for eg if uci config value is 0 show "Service is down" and if 1 show "Service is active"?

frollic · August 11, 2024, 12:36pm

raw = row ?

like this ?

bublikOff · August 11, 2024, 12:58pm

Yes. I need to show running state (with refreshing its state) and buttons to stop and start service
like in PBR

Hostle · August 11, 2024, 7:49pm

why not give them an id and target them with CSS ??

ie

< button id="myButton ...

and in css

#myButton
{
    <my styles> ...
}

or give them a class ... or both if individual styling is needed

the answer/s to the second part of your question can be found here ...

https://github.com/openwrt/luci/blob/master/applications/luci-app-pbr/htdocs/luci-static/resources/view/pbr/overview.js

and the status

github.com

openwrt/luci/blob/master/applications/luci-app-pbr/htdocs/luci-static/resources/view/status/include/72_pbr.js

"require ui";
"require rpc";
"require form";
"require baseclass";

var pkg = {
	get Name() {
		return "pbr";
	},
	get URL() {
		return "https://docs.openwrt.melmac.net/" + pkg.Name + "/";
	},
};

var getInitStatus = rpc.declare({
	object: "luci." + pkg.Name,
	method: "getInitStatus",
	params: ["name"],
});

This file has been truncated. show original

bublikOff · August 12, 2024, 8:02am

Ended up with this

 var service_control = form.DummyValue.extend({
            renderWidget: function(section_id, option_id, cfgvalue) {
                return E([], [ E('div', { 'style': 'padding-top: 14px', 'class': 'control-group' }, [
                    E('button', {
                        'class': 'cbi-button cbi-button-apply',
                        'click': ui.createHandlerFn(this, function() {
                            ui.addNotification(null, [ E('p', [ 'Service started' ]) ]);
                        }),
                    }, _('Start')), 
                    E('button', {
                        'style': 'margin-left: 8px',
                        'class': 'cbi-button cbi-button-reset',
                        'click': ui.createHandlerFn(this, function() {
                            ui.addNotification(null, [ E('p', [ 'Service stoped' ]) ]);
                        }),
                    }, _('Stop')) 
                ])]);
            },
        });

o = s.option(service_control, 'settings', _(''));