bz-toggler

app/views/editors/KeyframeView.js

@@ -21,23 +21,74 @@ class KeyframeView extends WindozDomContent {
         this.setupTriggers(components)        
         this.setupRefs(components)
 
-        this.agentDefs = await this.models.agents.getSprites('Basic 3D')
-        this.outputs.agentsSelector.fillOptions( Object.keys(this.agentDefs).map(aname => {
-            console.log(this.agentDefs[aname])
-            return({ markup: `${aname}`, value: aname})
+        const [sprites, types] = await Promise.all([
+            this.models.agents.getSprites('Basic 3D'),
+            this.models.agents.getTypes('Test agents')
+        ])
+
+        this.agentSprites = sprites
+        this.agentTypes = types
+
+
+        this.outputs.agentsSelector.fillOptions( this.agentTypes.map(item => {
+            return({ markup: `${item.atp_name}`, value: item.atp_id})
         }))
         this.outputs.agentsSelector.addEventListener('change',this.onChangeAgent.bind(this))
         
-        this.agentPreview = new app.LoadedModules.AgentPreview(this.outputs.agentSampleCanvas, this.agentDefs)
+        this.agentPreview = new app.LoadedModules.AgentPreview(this.outputs.agentSampleCanvas, this.agentSprites)
         this.onChangeAgent()
         this.agentPreview.startRendering()
         this.agentPreview.animation = true
+
+
+        this.outputs.testToggler.addEventListener('change',(e)=> {
+            console.log(e.target.value, e)
+
+        })
     }
 
 
 
-    onChangeAgent(event){
+    async onChangeAgent(event){
         if(this.outputs.agentsSelector.value) this.agentPreview.setAgent(this.outputs.agentsSelector.value)
+        if(!this.outputs.agentsSelector.value) return
+        const agent = await this.models.agents.getProperties(this.outputs.agentsSelector.value)
+        this.fillAgentProperties(agent.atp_props)
+    }
+
+    fillAgentProperties(agentProps){
+        for(const propName in agentProps){
+            const fieldRow = ui.create(`<div class="cols-2"><label>${propName}</label></div>`)
+            let component
+            switch(agentProps[propName].type){
+                case 'number':
+                    component = document.createElement('input')
+                    component.setAttribute('type','number')
+                    if(agentProps[propName].min) component.setAttribute('min', agentProps[propName].min)
+                    if(agentProps[propName].max) component.setAttribute('max', agentProps[propName].max)
+                    component.value = agentProps[propName].default
+                    break
+                case 'string': 
+                    component = document.createElement('input')
+                    component.setAttribute('type','text')
+                    break
+                case 'boolean':                        
+                    component = new InputToggler({
+                        value: agentProps[propName].default, 
+                    })
+                    fieldRow.append(component.el)                    
+                    break                    
+                case 'list':
+                    component = document.createElement('bz-select')
+                    component.fillOptions( agentProps[propName].choices.map(item => {
+                        return({ markup: `${item}`, value: item})
+                    })) 
+                    break
+                default:
+                    console.warn(`Unknown field type ${agentProps[propName].type}`)
+            }
+            fieldRow.append(component)
+        }
     }
 
 }