7 var CBIZoneSelect
= form
.ListValue
.extend({
8 __name__
: 'CBI.ZoneSelect',
10 load: function(section_id
) {
11 return Promise
.all([ firewall
.getZones(), network
.getNetworks() ]).then(L
.bind(function(zn
) {
13 this.networks
= zn
[1];
15 return this.super('load', section_id
);
19 filter: function(section_id
, value
) {
23 lookupZone: function(name
) {
24 return this.zones
.filter(function(zone
) { return zone
.getName() == name
})[0];
27 lookupNetwork: function(name
) {
28 return this.networks
.filter(function(network
) { return network
.getName() == name
})[0];
31 renderWidget: function(section_id
, option_index
, cfgvalue
) {
32 var values
= L
.toArray((cfgvalue
!= null) ? cfgvalue
: this.default),
36 if (this.option
== 'dest') {
37 for (var i
= 0; i
< this.section
.children
.length
; i
++) {
38 var opt
= this.section
.children
[i
];
39 if (opt
.option
== 'src') {
40 var val
= opt
.cfgvalue(section_id
) || opt
.default;
41 isOutputOnly
= (val
== null || val
== '');
46 this.title
= isOutputOnly
? _('Output zone') : _('Destination zone');
49 if (this.allowlocal
) {
50 choices
[''] = E('span', {
52 'style': 'background-color:' + firewall
.getColorForName(null)
54 E('strong', _('Device')),
55 (this.allowany
|| this.allowlocal
)
56 ? ' (%s)'.format(this.option
!= 'dest' ? _('output') : _('input')) : ''
59 else if (!this.multiple
&& (this.rmempty
|| this.optional
)) {
60 choices
[''] = E('span', {
62 'style': 'background-color:' + firewall
.getColorForName(null)
63 }, E('em', _('unspecified')));
67 choices
['*'] = E('span', {
69 'style': 'background-color:' + firewall
.getColorForName(null)
71 E('strong', _('Any zone')),
72 (this.allowany
&& this.allowlocal
&& !isOutputOnly
) ? ' (%s)'.format(_('forward')) : ''
76 for (var i
= 0; i
< this.zones
.length
; i
++) {
77 var zone
= this.zones
[i
],
78 name
= zone
.getName(),
79 networks
= zone
.getNetworks(),
82 if (!this.filter(section_id
, name
))
85 for (var j
= 0; j
< networks
.length
; j
++) {
86 var network
= this.lookupNetwork(networks
[j
]);
91 var span
= E('span', {
92 'class': 'ifacebadge' + (network
.getName() == this.network
? ' ifacebadge-active' : '')
93 }, network
.getName() + ': ');
95 var devices
= network
.isBridge() ? network
.getDevices() : L
.toArray(network
.getDevice());
97 for (var k
= 0; k
< devices
.length
; k
++) {
98 span
.appendChild(E('img', {
99 'title': devices
[k
].getI18n(),
100 'src': L
.resource('icons/%s%s.png'.format(devices
[k
].getType(), devices
[k
].isUp() ? '' : '_disabled'))
105 span
.appendChild(E('em', _('(empty)')));
111 ifaces
.push(E('em', _('(empty)')));
113 choices
[name
] = E('span', {
114 'class': 'zonebadge',
115 'style': 'background-color:' + zone
.getColor()
116 }, [ E('strong', name
) ].concat(ifaces
));
119 var widget
= new ui
.Dropdown(values
, choices
, {
120 id
: this.cbid(section_id
),
122 multiple
: this.multiple
,
123 optional
: this.optional
|| this.rmempty
,
124 select_placeholder
: E('em', _('unspecified')),
125 display_items
: this.display_size
|| this.size
|| 3,
126 dropdown_items
: this.dropdown_size
|| this.size
|| 5,
127 validate
: L
.bind(this.validate
, this, section_id
),
128 create
: !this.nocreate
,
130 '<li data-value="{{value}}">' +
131 '<span class="zonebadge" style="background:repeating-linear-gradient(45deg,rgba(204,204,204,0.5),rgba(204,204,204,0.5) 5px,rgba(255,255,255,0.5) 5px,rgba(255,255,255,0.5) 10px)">' +
132 '<strong>{{value}}:</strong> <em>('+_('create')+')</em>' +
137 var elem
= widget
.render();
139 if (this.option
== 'src') {
140 elem
.addEventListener('cbi-dropdown-change', L
.bind(function(ev
) {
141 var opt
= this.map
.lookupOption('dest', section_id
),
142 val
= ev
.detail
.instance
.getValue();
147 var cbid
= opt
[0].cbid(section_id
),
148 label
= document
.querySelector('label[for="widget.%s"]'.format(cbid
)),
149 node
= document
.getElementById(cbid
);
151 L
.dom
.content(label
, val
== '' ? _('Output zone') : _('Destination zone'));
154 if (L
.dom
.callClassMethod(node
, 'getValue') == '')
155 L
.dom
.callClassMethod(node
, 'setValue', '*');
157 var emptyval
= node
.querySelector('[data-value=""]'),
158 anyval
= node
.querySelector('[data-value="*"]');
160 L
.dom
.content(anyval
.querySelector('span'), E('strong', _('Any zone')));
162 if (emptyval
!= null)
163 emptyval
.parentNode
.removeChild(emptyval
);
166 var anyval
= node
.querySelector('[data-value="*"]'),
167 emptyval
= node
.querySelector('[data-value=""]');
169 if (emptyval
== null) {
170 emptyval
= anyval
.cloneNode(true);
171 emptyval
.removeAttribute('display');
172 emptyval
.removeAttribute('selected');
173 emptyval
.setAttribute('data-value', '');
176 L
.dom
.content(emptyval
.querySelector('span'), [
177 E('strong', _('Device')), ' (%s)'.format(_('input'))
180 L
.dom
.content(anyval
.querySelector('span'), [
181 E('strong', _('Any zone')), ' (%s)'.format(_('forward'))
184 anyval
.parentNode
.insertBefore(emptyval
, anyval
);
189 else if (isOutputOnly
) {
190 var emptyval
= elem
.querySelector('[data-value=""]');
191 emptyval
.parentNode
.removeChild(emptyval
);
198 var CBIZoneForwards
= form
.DummyValue
.extend({
199 __name__
: 'CBI.ZoneForwards',
201 load: function(section_id
) {
202 return Promise
.all([ firewall
.getDefaults(), firewall
.getZones(), network
.getNetworks() ]).then(L
.bind(function(dzn
) {
203 this.defaults
= dzn
[0];
205 this.networks
= dzn
[2];
207 return this.super('load', section_id
);
211 renderZone: function(zone
) {
212 var name
= zone
.getName(),
213 networks
= zone
.getNetworks(),
216 for (var j
= 0; j
< networks
.length
; j
++) {
217 var network
= this.networks
.filter(function(net
) { return net
.getName() == networks
[j
] })[0];
222 var span
= E('span', {
223 'class': 'ifacebadge' + (network
.getName() == this.network
? ' ifacebadge-active' : '')
224 }, network
.getName() + ': ');
226 var devices
= network
.isBridge() ? network
.getDevices() : L
.toArray(network
.getDevice());
228 for (var k
= 0; k
< devices
.length
&& devices
[k
]; k
++) {
229 span
.appendChild(E('img', {
230 'title': devices
[k
].getI18n(),
231 'src': L
.resource('icons/%s%s.png'.format(devices
[k
].getType(), devices
[k
].isUp() ? '' : '_disabled'))
236 span
.appendChild(E('em', _('(empty)')));
242 ifaces
.push(E('span', { 'class': 'ifacebadge' }, E('em', _('(empty)'))));
245 'class': 'zonebadge cbi-tooltip-container',
246 'style': 'background-color:' + zone
.getColor()
249 E('div', { 'class': 'cbi-tooltip' }, ifaces
)
253 renderWidget: function(section_id
, option_index
, cfgvalue
) {
254 var value
= (cfgvalue
!= null) ? cfgvalue
: this.default,
255 zone
= this.zones
.filter(function(z
) { return z
.getName() == value
})[0];
260 var forwards
= zone
.getForwardingsBy('src'),
263 for (var i
= 0; i
< forwards
.length
; i
++) {
264 var dzone
= forwards
[i
].getDestinationZone();
269 dzones
.push(this.renderZone(dzone
));
273 dzones
.push(E('label', { 'class': 'zonebadge zonebadge-empty' },
274 E('strong', this.defaults
.getForward())));
276 return E('div', { 'class': 'zone-forwards' }, [
277 E('div', { 'class': 'zone-src' }, this.renderZone(zone
)),
279 E('div', { 'class': 'zone-dest' }, dzones
)
284 var CBINetworkSelect
= form
.ListValue
.extend({
285 __name__
: 'CBI.NetworkSelect',
287 load: function(section_id
) {
288 return network
.getNetworks().then(L
.bind(function(networks
) {
289 this.networks
= networks
;
291 return this.super('load', section_id
);
295 filter: function(section_id
, value
) {
299 renderIfaceBadge: function(network
) {
300 var span
= E('span', { 'class': 'ifacebadge' }, network
.getName() + ': '),
301 devices
= network
.isBridge() ? network
.getDevices() : L
.toArray(network
.getDevice());
303 for (var j
= 0; j
< devices
.length
&& devices
[j
]; j
++) {
304 span
.appendChild(E('img', {
305 'title': devices
[j
].getI18n(),
306 'src': L
.resource('icons/%s%s.png'.format(devices
[j
].getType(), devices
[j
].isUp() ? '' : '_disabled'))
310 if (!devices
.length
) {
311 span
.appendChild(E('em', { 'class': 'hide-close' }, _('(no interfaces attached)')));
312 span
.appendChild(E('em', { 'class': 'hide-open' }, '-'));
318 renderWidget: function(section_id
, option_index
, cfgvalue
) {
319 var values
= L
.toArray((cfgvalue
!= null) ? cfgvalue
: this.default),
323 for (var i
= 0; i
< values
.length
; i
++)
324 checked
[values
[i
]] = true;
328 if (!this.multiple
&& (this.rmempty
|| this.optional
))
329 choices
[''] = E('em', _('unspecified'));
331 for (var i
= 0; i
< this.networks
.length
; i
++) {
332 var network
= this.networks
[i
],
333 name
= network
.getName();
335 if (name
== 'loopback' || !this.filter(section_id
, name
))
338 if (this.novirtual
&& network
.isVirtual())
344 choices
[name
] = this.renderIfaceBadge(network
);
347 var widget
= new ui
.Dropdown(this.multiple
? values
: values
[0], choices
, {
348 id
: this.cbid(section_id
),
350 multiple
: this.multiple
,
351 optional
: this.optional
|| this.rmempty
,
352 select_placeholder
: E('em', _('unspecified')),
353 display_items
: this.display_size
|| this.size
|| 3,
354 dropdown_items
: this.dropdown_size
|| this.size
|| 5,
355 validate
: L
.bind(this.validate
, this, section_id
),
356 create
: !this.nocreate
,
358 '<li data-value="{{value}}">' +
359 '<span class="ifacebadge" style="background:repeating-linear-gradient(45deg,rgba(204,204,204,0.5),rgba(204,204,204,0.5) 5px,rgba(255,255,255,0.5) 5px,rgba(255,255,255,0.5) 10px)">' +
360 '{{value}}: <em>('+_('create')+')</em>' +
365 return widget
.render();
368 textvalue: function(section_id
) {
369 var cfgvalue
= this.cfgvalue(section_id
),
370 values
= L
.toArray((cfgvalue
!= null) ? cfgvalue
: this.default),
373 for (var i
= 0; i
< (this.networks
|| []).length
; i
++) {
374 var network
= this.networks
[i
],
375 name
= network
.getName();
377 if (values
.indexOf(name
) == -1)
381 L
.dom
.append(rv
, ' ');
383 L
.dom
.append(rv
, this.renderIfaceBadge(network
));
387 rv
.appendChild(E('em', _('unspecified')));
394 return L
.Class
.extend({
395 ZoneSelect
: CBIZoneSelect
,
396 ZoneForwards
: CBIZoneForwards
,
397 NetworkSelect
: CBINetworkSelect