🛸 Sync 2026-09-22 19:25:09

luci-mod-dashboard/htdocs/luci-static/resources/view/dashboard/lib/layout.js

@@ -0,0 +1,65 @@
+'use strict';
+'require baseclass';
+'require form';
+'require uci';
+'require ui';
+'require view.dashboard.lib.widgets as widgets';
+
+return baseclass.extend({
+	render(includes) {
+		const slots = {
+			cards: _('Status cards'),
+			charts: _('Live charts'),
+			tabs: _('Detail tabs')
+		};
+
+		const m = new form.Map('dashboard');
+		const s = m.section(form.NamedSection, 'layout', 'dashboard', null,
+			_('The lists follow the page from top to bottom. What is in a list is shown, in that order: drag an entry to move it. An empty list shows the defaults.'));
+
+		widgets.slots.forEach(slot => {
+			const choices = widgets.list(includes, slot);
+
+			if (!choices.length)
+				return;
+
+			const o = s.option(form.DynamicList, slot, slots[slot]);
+
+			choices.forEach(widget => o.value(widget.id, widget.title));
+
+			// Show the defaults while the slot is not configured, without
+			// writing them.
+			o.cfgvalue = () => {
+				const known = choices.map(widget => widget.id);
+				const ids = L.toArray(uci.get('dashboard', 'layout', slot)).filter(id => known.includes(id));
+
+				return ids.length ? ids : widgets.defaults(includes, slot);
+			};
+
+			// The list hides a choice once it is picked, but not the ones it
+			// starts out with, and always offers a custom value.
+			o.renderWidget = function(section_id, option_index, cfgvalue) {
+				const node = form.DynamicList.prototype.renderWidget.apply(this, arguments);
+				const shown = L.toArray(cfgvalue);
+
+				node.querySelectorAll('.cbi-dropdown ul > li[data-value]').forEach(li => {
+					if (shown.includes(li.getAttribute('data-value')))
+						li.setAttribute('unselectable', '');
+				});
+				node.querySelector('.create-item-input').parentNode.remove();
+
+				return node;
+			};
+		});
+
+		return m.render().then(node => E('div', {}, [
+			node,
+			E('div', { 'class': 'cbi-page-actions' }, [
+				E('button', {
+					'class': 'cbi-button cbi-button-apply',
+					'click': ui.createHandlerFn(this, () => m.save().then(() => ui.changes.apply(true)))
+				}, [ _('Save & Apply') ])
+			])
+		]));
+	}
+});