# HG changeset patch
# User Drew Perttula <drewp@bigasterisk.com>
# Date 1528451648 0
# Node ID 56e435ac7a4137b4a0b1b184368077c161b1d971
# Parent  5668ad92a98e5eb37aef9feb999d8f61745a2e6c
start the ui work for multiselect on /live
Ignore-this: 9cfd22eac4d49b093643027e387f4f5e

diff -r 5668ad92a98e -r 56e435ac7a41 light9/web/live/elements.html
--- a/light9/web/live/elements.html	Fri Jun 08 09:14:36 2018 +0000
+++ b/light9/web/live/elements.html	Fri Jun 08 09:54:08 2018 +0000
@@ -179,14 +179,20 @@
          color: #9ab8fd;
          text-decoration: initial;
      }
+     .device.selected h2 {
+         outline: 3px solid #ffff0047;
+     }
+     .deviceAttr.selected {
+         background: #cada1829;
+     }
     </style>
-    <div class="device">
-      <h2 style$="[[bgStyle]]">
+    <div class$="device {{devClasses}}">
+      <h2 style$="[[bgStyle]]" on-click="onClick">
         <resource-display id="mainLabel" graph="{{graph}}" uri="{{uri}}"></resource-display>
         a <resource-display minor graph="{{graph}}" uri="{{deviceClass}}"></resource-display>
       </h2>
       <template is="dom-repeat" items="{{deviceAttrs}}" as="dattr">
-        <div class="deviceAttr">
+        <div on-click="onAttrClick" class$="deviceAttr {{dattr.attrClasses}}">
           <span>attr <resource-display minor graph="{{graph}}" uri="{{dattr.uri}}"></resource-display></span>
           <light9-live-control
             graph="{{graph}}"
diff -r 5668ad92a98e -r 56e435ac7a41 light9/web/live/live.coffee
--- a/light9/web/live/live.coffee	Fri Jun 08 09:14:36 2018 +0000
+++ b/light9/web/live/live.coffee	Fri Jun 08 09:54:08 2018 +0000
@@ -99,13 +99,17 @@
     graph: { type: Object, notify: true }
     uri: { type: String, notify: true }
     effect: { type: String }
-    deviceClass: { type: String, notify: true }
+    deviceClass: { type: String, notify: true } # the uri str
     deviceAttrs: { type: Array, notify: true }
     graphToControls: { type: Object }
     bgStyle: { type: String, computed: '_bgStyle(deviceClass)' }
+    devClasses: { type: String, value: '' } # the css kind
   @getter_observers: [
     'onGraph(graph)'
     ]
+  constructor: ->
+    super()
+    @selectedAttrs = new Set() # uri strings
   _bgStyle: (deviceClass) ->
     hash = 0
     deviceClass = deviceClass.value
@@ -117,6 +121,16 @@
     
   onGraph: ->
     @graph.runHandler(@update.bind(@), "#{@uri.value} update")
+
+  setDeviceSelected: (isSel) ->
+    @devClasses = if isSel then 'selected' else ''
+
+  setAttrSelected: (devAttr, isSel) ->
+    if isSel
+      @selectedAttrs.add(devAttr.value)
+    else
+      @selectedAttrs.delete(devAttr.value)
+    @update()
     
   update: (patch) ->
     U = (x) => @graph.Uri(x)
@@ -134,6 +148,7 @@
       uri: devAttr
       dataType: dataType
       showColorPicker: dataType.equals(U(':color'))
+      attrClasses: if @selectedAttrs.has(devAttr.value) then 'selected' else ''
       }
     if dataType.equals(U(':color'))
       daRow.useColor = true
@@ -153,14 +168,19 @@
   clear: ->
     for lc in @shadowRoot.querySelectorAll("light9-live-control")
       lc.clear()
-    
+
+  onClick: (ev) ->
+    log('click', @uri)
+    # select, etc
+
+  onAttrClick: (ev) ->
+    log('attr click', @uri, ev.model.dattr.uri)
+    # select
 )
 
 
 class ActiveSettings
-  # Maintains the settings on this effect
   constructor: (@graph) ->
-
     # The settings we're showing (or would like to but the widget
     # isn't registered yet):
     # dev+attr : {setting: Uri, onChangeFunc: f, jsValue: str_or_float}