fix(fixture): The properties are loaded from the store

In order to use the fixture-detail-view to edit it's properties it was necesarray to also save the
properties into the store. This makes it possible to also rerender to the last values when editing
another fixture. Also it's now possible to edit all properties and meta data of the fixture.

Fixes #80, #8, #74

src/actions/index.js

@@ -272,6 +272,15 @@ export const setFixtureAddress = (fixtureId, fixtureAddress) => ({
   type: constants.SET_FIXTURE_ADDRESS
 })
 
+/*
+ * Set the values of the fixture
+ */
+export const setFixture = (fixtureId, fixture) => ({
+  fixtureId,
+  fixture,
+  type: constants.SET_FIXTURE
+})
+
 /*
  * Set the properties of a fixture
  */

src/components/dmx-fixture-property/index.js

@@ -1,5 +1,8 @@
 import { LitElement, html } from '/node_modules/@polymer/lit-element/lit-element.js'
 import { repeat } from '/node_modules/lit-html/directives/repeat.js'
+import { rgbToHex } from '../../directives/rgb-to-hex.js'
+import { defaultValue } from '../../directives/default-value.js'
+import { selected } from '../../directives/selected.js'
 
 
 /*
@@ -12,7 +15,8 @@ class DmxFixtureProperty extends LitElement {
       name: { type: String },
       type: { type: String },
       channels: { type: Number },
-      property: { type: Object }
+      property: { type: Object },
+      value: { type: String }
     }
   }
 
@@ -58,21 +62,22 @@ class DmxFixtureProperty extends LitElement {
   }
 
   render() {
-    const { channels, property, name } = this
+    const { channels, property, name, value } = this
 
     return html`
     <div>
+
       <label title="${channels}">${name}</label>:
 
       ${
         property.isRgb
-        ? html`<input type="color" @change="${e => this.handleColorChange(e)}">`
+        ? html`<input type="color" .value="${rgbToHex(value)}" @change="${e => this.handleColorChange(e)}">`
         : ''
       }
 
       ${
         property.isRange
-        ? html`<input type="number" value="0" min="0" max="255" @change="${e => this.handleInputChange(e)}">`
+        ? html`<input type="number" .value="${defaultValue(value, 0)}" min="0" max="255" @change="${e => this.handleInputChange(e)}">`
         : ''
       }
 
@@ -81,7 +86,7 @@ class DmxFixtureProperty extends LitElement {
         ? html`
           <select @change="${e => this.handleSelectChange(e)}">
             ${repeat(property.mapping, mapping => html`
-              <option value="${mapping}">${mapping}</option>
+              <option value="${mapping}" ?selected="${selected(value, mapping)}">${mapping}</option>
             `)}
           </select>
         `
@@ -90,13 +95,23 @@ class DmxFixtureProperty extends LitElement {
 
       ${
         property.isMultiRange
-        ? html`<input type="text" @change="${e => this.handleInputChange(e)}" title="${JSON.stringify(property.mapping)}">`
+        ? html`
+          <input type="text" .value="${defaultValue(value, '')}" @change="${e => this.handleInputChange(e)}">
+          <ul>
+            ${repeat(property.mapping, mapping => html`
+              <li>${mapping}</li>
+            `)}
+          </ul>
+        `
         : ''
       }
 
       ${
         property.isHiRes
-        ? html`<input type="number" @change="${e => this.handleInputChange(e)}" title="${property.min} to ${property.max}" min="${property.min}" max="${property.max}">`
+        ? html`
+          <input type="number" .value="${defaultValue(value, 0)}" @change="${e => this.handleInputChange(e)}" min="${property.min}" max="${property.max}">
+          <span>From ${property.min} to ${property.max}</span>
+        `
         : ''
       }
 

src/components/dmx-fixture/index.js

@@ -1,7 +1,7 @@
 import { LitElement, html } from '/node_modules/@polymer/lit-element/lit-element.js'
 import { repeat } from '/node_modules/lit-html/directives/repeat.js'
 import { store } from '../../reduxStore.js'
-import { setChannels, setFixtureAddress } from '../../actions/index.js'
+import { setChannels, setFixture, setFixtureProperties } from '../../actions/index.js'
 import '/node_modules/@polymer/polymer/lib/elements/dom-repeat.js'
 import '../dmx-fixture-property/index.js'
 import * as Fixtures from '../../utils/dmx-fixtures.js'
@@ -22,6 +22,7 @@ class DmxFixture extends LitElement {
       type: { type: String },
       address: { type: Number },
       universe: { type: Number },
+      properties: { type: Object },
       _fixture: { type: Object },
       _properties: { type: Object }
     }
@@ -33,8 +34,12 @@ class DmxFixture extends LitElement {
     // Get data out of the form
     const data = new FormData(e.target)
     const address = parseInt(data.get('address'), 10)
+    const name = data.get('name')
 
-    store.dispatch(setFixtureAddress(this.id, address))
+    store.dispatch(setFixture(this.id, { 
+      name, 
+      address 
+    }))
   }
 
   /*
@@ -48,6 +53,9 @@ class DmxFixture extends LitElement {
     // Send all values of all channels to universe 0
     store.dispatch(setChannels(0, [...batch]))
 
+    // Save the changed property into state
+    store.dispatch(setFixtureProperties(this.id, { [name]: value }))
+
     const now = new Date()
 
     // Send the universe to the UsbDmxManager
@@ -67,7 +75,7 @@ class DmxFixture extends LitElement {
     // Get the properties of the fixture
     this._properties = this._fixture.getParamsList()
 
-    const { type, address, _fixture, _properties } = this
+    const { properties, type, address, name, _fixture, _properties } = this
 
     return html`
         <style>
@@ -82,22 +90,29 @@ class DmxFixture extends LitElement {
           }
         </style>
 
-        <div>
           <div class="grid">
             <div>
-              <iron-icon icon="info-outline" id="info"></iron-icon>
-              Type: ${type}
-              <br />
-              Weight: ${_fixture.weight} kg
-              <br />
-              Channels: ${_fixture.channels}
 
               <form id="fixtureMetaProperties" @submit="${e => this.handleSubmit(e)}">
+                <div>
+                  <label for="name">Name</label>
+                  <input id="name" name="name" type="text" .value="${name}"/>
+                </div>
+              
                 <div>
                   <label for="address">Address</label>
-                  <input id="address" name="address" type="number" min="0" max="512" value="${address}"/>
+                  <input id="address" name="address" type="number" min="0" max="512" .value="${address}"/>
                 </div>
+
+                <button type="submit">Update</button>
               </form>
+
+              <iron-icon icon="info-outline" id="info"></iron-icon>
+              Type: ${type}
+              <br />
+              Weight: ${_fixture.weight} kg
+              <br />
+              Channels: ${_fixture.channels}
             </div>
           </div>
 
@@ -108,6 +123,7 @@ class DmxFixture extends LitElement {
                 @change="${e => this.handleChange(e)}"
 
                 .property="${property}"
+                .value="${properties[property.name]}"
                 name="${property.name}"
                 type="${property.type}"
                 channels="${property.channels}"
@@ -118,7 +134,6 @@ class DmxFixture extends LitElement {
 
           </div>
 
-        </div>
     `
   }
 }

src/directives/default-value.js

@@ -0,0 +1,12 @@
+import { directive } from '/node_modules/lit-html/lit-html.js'
+
+/*
+ * Set a default value if the provided value is undefined
+ */
+export const defaultValue = (value, defaultVal) => directive(part => {
+    if (value === undefined) {
+        value = defaultVal
+    }
+
+    part.setValue(value)
+})

src/directives/rgb-to-hex.js

@@ -0,0 +1,15 @@
+import { directive } from '/node_modules/lit-html/lit-html.js'
+
+/*
+ * Convert an RGB-Array into a Hex color
+ */
+export const rgbToHex = (value, defaultValue = '#000000') => directive(part => {
+    // Is an RGB array
+    if (Array.isArray(value) && value.length === 3) {
+        const hex = `#${value.map(x => x.toString(16).padStart(2, '0')).join('')}`
+        part.setValue(hex)
+    // Is not an RGB array, so use the defaultValue
+    } else {
+        part.setValue(defaultValue)
+    }
+})

src/directives/selected.js

@@ -0,0 +1,15 @@
+import { directive } from '/node_modules/lit-html/lit-html.js'
+
+/*
+ * Find out if the provided value is defined or equals the value of the <option></option>
+ * to set the "selected" attribute
+ */
+export const selected = (value, optionValue) => directive(part => {
+    if (value === undefined) {
+      part.setValue(false)
+    } else if (optionValue === value) {
+      part.setValue(true)
+    } else {
+      part.setValue(false)
+    }
+})

src/reducers/index.js

@@ -258,6 +258,10 @@ export const fixtureManager = (state = [], { type, fixture, fixtureIndex, fixtur
     case constants.ADD_FIXTURE:
       return update(state, { $push: [fixture] })
 
+    case constants.SET_FIXTURE: {
+      return update(state, { [fixtureIndex]: { $merge: fixture } })
+    }
+
     case constants.SET_FIXTURE_ADDRESS:
       return update(state, { [fixtureIndex]: { address: { $set: fixtureAddress } } })
 

src/views/fixture-detail-view.js

@@ -2,18 +2,31 @@ import { html } from '@polymer/lit-element'
 import { PageViewElement } from './page-view-element.js'
 import { getFixture } from '../selectors/index.js'
 import { store } from '../reduxStore.js'
+import { connect } from 'pwa-helpers/connect-mixin.js'
 import '../components/dmx-fixture/index.js'
 
-class FixtureDetailView extends PageViewElement {
+class FixtureDetailView extends connect(store)(PageViewElement) {
 
   static get properties() {
-    return { fixtureId: { type: String } }
+    return { 
+      fixtureId: { type: String },
+      fixture: {
+        type: Object,
+        hasChanged: (newValue, oldValue) => !Object.is(newValue, oldValue)
+      }
+    }
+  }
+
+  _stateChanged(state) {
+    const { fixtureId } = this
+    this.fixture = getFixture(state, { fixtureId })
   }
 
   render() {
     const { fixtureId } = this
+    this.fixture = getFixture(store.getState(), { fixtureId })
 
-    const fixture = getFixture(store.getState(), { fixtureId })
+    const { fixture } = this
 
     return html`
       <style>
@@ -24,23 +37,13 @@ class FixtureDetailView extends PageViewElement {
           border: 3px solid var(--dark-primary-color);
           background: var(--dark-primary-color);
         }
-
-        .item::before {
-          content: attr(data-name);
-          position: absolute;
-          top: calc(var(--padding-basic) * -3);
-          overflow: visible;
-          background: var(--dark-primary-color);
-          color: var(--text-primary-color);
-          padding: var(--padding-basic);
-        }
       </style>
 
 
-      <div class="item" data-name="${fixture.name}">
+      <div class="item">
 
         <dmx-fixture
-          name="${fixture.name}"
+          .name="${fixture.name}"
           .properties="${fixture.properties}"
           id="${fixture.id}"
           type="${fixture.type}"