bla

package/gluon-web-network/web2/main.ts

@@ -0,0 +1,12 @@
+import Uplink from './uplink.tsx'
+import Interfaces from './interfaces.tsx'
+
+window.RegisterModule({
+  path: '/network/uplink',
+  component: Uplink,
+})
+
+window.RegisterModule({
+  path: '/network/interfaces',
+  component: Interfaces,
+})

package/gluon-web-network/web2/sample/sample-dsa.json

@@ -0,0 +1,11 @@
+{
+  "path": "/network/interfaces",
+  "display": "Network Interfaces with dsa",
+  "info": {
+    "switch_type": "dsa",
+    "interfaces": ["wan", "lan1", "lan2", "lan3", "lan4"]
+  },
+  "get": {
+
+  }
+}

package/gluon-web-network/web2/sample/sample-swconfig.json

@@ -0,0 +1,11 @@
+{
+  "path": "/network/interfaces",
+  "display": "Network Interfaces with swconfig",
+  "info": {
+    "switch_type": "swconfig",
+    "interfaces": ["eth0", "eth1"]
+  },
+  "get": {
+
+  }
+}

package/gluon-web2/src/GluonWeb2.tsx

@@ -4,17 +4,16 @@ import { useState } from 'preact/hooks';
 import Components from "./components"
 
 const GluonWeb2 = ({ id, component, data: initialData }: { id: string, component: string, data: any }) => {
-  const { data, setData } = useState<any>(initialData)
+  let { data, setData } = useState<any>({ "phy_interfaces": ["wan", "lan4", "lan2", "lan3", "lan1"], "uci": [{ ".name": "iface_wan", ".type": "interface", "name": "\\/wan", "role": ["nothing"], ".anonymous": false, ".index": 1 }, { ".name": "iface_lan", ".type": "interface", "name": "\\/lan", "role": ["uplink"], ".anonymous": false, ".index": 2 }, { ".name": "iface_wan_vlan11", ".type": "interface", "name": "wan.11", "role": ["mesh"], ".anonymous": false, ".index": 5 }, { ".name": "iface_lan1_vlan255", ".type": "interface", "name": "lan1.255", "role": ["mesh"], ".anonymous": false, ".index": 6 }, { ".name": "iface_lan2_vlan255", ".type": "interface", "name": "lan2.255", "role": ["mesh"], ".anonymous": false, ".index": 7 }, { ".name": "iface_lan3_vlan255", ".type": "interface", "name": "lan3.255", "role": ["mesh"], ".anonymous": false, ".index": 8 }, { ".name": "iface_lan4_vlan255", ".type": "interface", "name": "lan4.255", "role": ["mesh"], ".anonymous": false, ".index": 9 }, { ".name": "iface_lan1_vlan3", ".type": "interface", "name": "lan1.3", "role": ["client"], ".anonymous": false, ".index": 10 }, { ".name": "iface_lan2_vlan3", ".type": "interface", "name": "lan2.3", "role": ["client"], ".anonymous": false, ".index": 11 }, { ".name": "iface_lan3_vlan3", ".type": "interface", "name": "lan3.3", "role": ["client"], ".anonymous": false, ".index": 12 }, { ".name": "iface_lan4_vlan3", ".type": "interface", "name": "lan4.3", "role": ["client"], ".anonymous": false, ".index": 13 }] })
+
+  data = { "phy_interfaces": ["wan", "lan4", "lan2", "lan3", "lan1"], "uci": [{ ".name": "iface_wan", ".type": "interface", "name": "\\/wan", "role": ["nothing"], ".anonymous": false, ".index": 1 }, { ".name": "iface_lan", ".type": "interface", "name": "\\/lan", "role": ["uplink"], ".anonymous": false, ".index": 2 }, { ".name": "iface_wan_vlan11", ".type": "interface", "name": "wan.11", "role": ["mesh"], ".anonymous": false, ".index": 5 }, { ".name": "iface_lan1_vlan255", ".type": "interface", "name": "lan1.255", "role": ["mesh"], ".anonymous": false, ".index": 6 }, { ".name": "iface_lan2_vlan255", ".type": "interface", "name": "lan2.255", "role": ["mesh"], ".anonymous": false, ".index": 7 }, { ".name": "iface_lan3_vlan255", ".type": "interface", "name": "lan3.255", "role": ["mesh"], ".anonymous": false, ".index": 8 }, { ".name": "iface_lan4_vlan255", ".type": "interface", "name": "lan4.255", "role": ["mesh"], ".anonymous": false, ".index": 9 }, { ".name": "iface_lan1_vlan3", ".type": "interface", "name": "lan1.3", "role": ["client"], ".anonymous": false, ".index": 10 }, { ".name": "iface_lan2_vlan3", ".type": "interface", "name": "lan2.3", "role": ["client"], ".anonymous": false, ".index": 11 }, { ".name": "iface_lan3_vlan3", ".type": "interface", "name": "lan3.3", "role": ["client"], ".anonymous": false, ".index": 12 }, { ".name": "iface_lan4_vlan3", ".type": "interface", "name": "lan4.3", "role": ["client"], ".anonymous": false, ".index": 13 }] }
+
+  const Comp = Components[component]
 
   return (
     <Fragment>
       <input type="text" style="display: none" name={id} value={JSON.stringify(data)} />,
-      {
-        h(Components[component], {
-          data,
-          setData
-        })
-      }
+      <Comp data={data} setData={setData} />
     </Fragment>
   )
 }

package/gluon-web2/src/components/vlan-ui.tsx

@@ -6,6 +6,38 @@ const ROLES = {
   'client': 'Client'
 }
 
+const MultiListCheckbox = ({ name, checked, disabled }: { value: string, desc: string, checked: boolean }) => {
+  const id = String(Math.random())
+
+  return (
+    <label>
+      <input data-update="click change" id={id} type="checkbox" checked={checked} disabled={disabled} />
+      <label for={id}></label>
+      <span class="gluon-multi-list-option-descr">{name}</span>
+    </label>
+  )
+}
+
+interface MultiListOptions {
+  [key: string]: string
+}
+
+interface MultiListExclusive {
+  [key: string]: string[]
+}
+
+const MultiList = ({ name, options, exclusive }: { name: string, options: MultiListOptions, exclusive: MultiListExclusive }) => {
+  return (
+    <div>
+      <label class="gluon-value-title">{name}</label>
+      <div class="gluon-value-field">
+        <div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
 const VlanUI = ({ data, setData }: { data: any, setData: (data: any) => void }) => {
   /* return data.uci.map(intf => {
     (
@@ -19,29 +51,29 @@ const VlanUI = ({ data, setData }: { data: any, setData: (data: any) => void })
             <input data-update="click change" type="checkbox" id="id.1.4.iface_wan_vlan11.uplink" name="id.1.4.iface_wan_vlan11" value="uplink" data-exclusive-with="[&#34;client&#34;]" data-update="change">
               <label for="id.1.4.iface_wan_vlan11.uplink"></label>
               <span class="gluon-multi-list-option-descr">Uplink</span>
-  		      </label>
+            </label>
             &#160;&#160;&#160;
 
-  		<label data-index="2">
+      <label data-index="2">
               <input data-update="click change" type="checkbox" id="id.1.4.iface_wan_vlan11.mesh" name="id.1.4.iface_wan_vlan11" value="mesh" checked="checked" data-exclusive-with="[&#34;client&#34;]" data-update="change">
                 <label for="id.1.4.iface_wan_vlan11.mesh"></label>
                 <span class="gluon-multi-list-option-descr">Mesh</span>
-  		</label>
+      </label>
               &#160;&#160;&#160;
 
-  		<label data-index="3">
+      <label data-index="3">
                 <input data-update="click change" type="checkbox" id="id.1.4.iface_wan_vlan11.client" name="id.1.4.iface_wan_vlan11" value="client" data-exclusive-with="[&#34;uplink&#34;,&#34;mesh&#34;]" data-update="change">
                   <label for="id.1.4.iface_wan_vlan11.client"></label>
                   <span class="gluon-multi-list-option-descr">Client</span>
-  		</label>
+      </label>
 
 
   </div>
 
               )
   }) */
 
-  return <h1>VLANUI {JSON.stringify(data)}</h1>
+  return <h1>VLANUI {data} {JSON.stringify(data)}</h1>
 };
 
 export default VlanUI;

package/gluon-web2/src/index.tsx

@@ -16,11 +16,11 @@ class GluonWeb2Instance {
     const dataset = this.el.dataset
 
     try {
-      let parsedData = JSON.parse(atob(dataset.componentData))
+      let parsedData = JSON.parse(atob(dataset.componentData!))
 
       this.rendered = render(<GluonWeb2
-        id={dataset.gluonWeb2}
-        component={dataset.component}
+        id={dataset.gluonWeb2!}
+        component={dataset.component!}
         data={parsedData}
       />, this.el)
     } catch (error) {