Dialogue.js

function main(drivers){
  let DOM      = drivers.DOM
  
  //our basic data is using seamless-immutable
  let baseData = Immutable({model:
    {
      data:[
        {name:"fooobar", power:43}
        ,{name:"sdfds",  power:2.34}
      ]
    }
  })
    
  let fakeModel$ = Rx.Observable.just(baseData)
    
    let props$ = vModel$

    let _wrapper = wrapper({DOM, props$})
    let vtree$  = _wrapper.DOM
    
    
     return {
      DOM: vtree$
     }
    
}



//this one is the "root/main" dialogue
//(just for experimenting)
export function wrapper({DOM, props$}){

  let midDialogueModel = props$.map(e=>e.model).distinctUntilChanged()
  let _midDialogue = midDialogue({DOM,props$:midDialogueModel})

  let state$ = props$
  let vtree$ = Rx.Observable.combineLatest( state$, _midDialogue.DOM,function(state, midDialogue){
    return <div>
      <div> Some Text </div>
      {midDialogue}
    </div>
  })

  return {
    DOM:vtree$
    ,coolersValues$:_coolers.values$
  }



function testDialogue({DOM,props$}){

  
  function makeSliders0(prop){
    console.log("prop",prop)

    let p = prop.data[0].power
    let slider1Props$ = Rx.Observable.just({label: "slider1", unit: '', 
        min: 0, value:p*30, initial: p*30 , max: 100, 
        id:"cooler", className:"labeled-input-slider"
      })
    let slider1 = labeledInputSlider({DOM,props$:slider1Props$})

    p = prop.data[1].power
    let slider2Props$ = Rx.Observable.just({label: "slider1", unit: '', 
        min: 0, value:p*30, initial: p*30 , max: 100, 
        id:"cooler", className:"labeled-input-slider"
      })
    let slider2 = labeledInputSlider({DOM,props$:slider2Props$})

    let sliders = [slider1,slider2]

    console.log("sliders",sliders)

    return sliders
  }

  function makeSliders1(prop){
    console.log("makeSliders1",prop)

    let sliders = prop.data.map(function(entry){
      let p = entry.power
      let sliderProps$ = Rx.Observable.just({label: "slider1", unit: '', 
          min: 0, value:p*30, initial: p*30 , max: 100, 
          id:"cooler", className:"labeled-input-slider"
        })
      let slider = labeledInputSlider({DOM,props$:sliderProps$})
      return slider
    })

    console.log("sliders",sliders)
    return sliders
  }

  let sliders$ = props$.map(makeSliders0)
  
  let values$ = sliders$.map(s=>s.map(se=>se.values$))
  let vtree$  = sliders$.map(s=>s.map(se=>se.DOM))

  return {
    DOM:vtree$
    ,values$
  }
}