feat(fixture-detail): Edit a fixture in it's own view

Added a new view which is a subview of fixture-view to edit a fixture. Also added @Material components and a @Material theme. Updated the app-router to take into account that someone can edit an entity. Implements #74 for fixtures
NERDDISCO · Sep 27, 2018 · 325b68b · 325b68b
1 parent 6147df0
commit 325b68b
Show file tree

Hide file tree

Showing 12 changed files with 508 additions and 213 deletions.
diff --git a/index.html b/index.html
@@ -70,7 +70,7 @@
 
     <!-- Add any global styles for body, document, etc. -->
     <style>
-       @import url('https://fonts.googleapis.com/css?family=Open+Sans');
+      @import url('https://fonts.googleapis.com/css?family=Open+Sans');
 
       body {
         margin: 0;
@@ -80,7 +80,7 @@
         line-height: 1.5;
         min-height: 100vh;
         -webkit-font-smoothing: antialiased;
-        background-color: #212121;
+        background-color: var(--paper-grey-900);
       }
     </style>
   </head>

diff --git a/package.json b/package.json
@@ -27,13 +27,18 @@
     "url": "git+https://github.com/NERDDISCO/luminave.git"
   },
   "dependencies": {
-    "@polymer/app-layout": "3.0.0-pre.25",
-    "@polymer/iron-icons": "3.0.0-pre.25",
-    "@polymer/iron-pages": "3.0.0-pre.25",
+    "@material/layout-grid": "^0.39.0",
+    "@material/mwc-button": "^0.2.1",
+    "@material/mwc-icon": "^0.2.1",
+    "@polymer/app-layout": "3.0.1",
+    "@polymer/iron-icons": "3.0.1",
+    "@polymer/iron-pages": "3.0.1",
     "@polymer/lit-element": "0.6.0",
-    "@polymer/paper-button": "3.0.0-pre.25",
-    "@polymer/paper-tabs": "3.0.0-pre.25",
-    "@polymer/paper-tooltip": "3.0.0-pre.25",
+    "@polymer/paper-button": "3.0.1",
+    "@polymer/paper-card": "^3.0.1",
+    "@polymer/paper-dialog": "^3.0.1",
+    "@polymer/paper-tabs": "3.0.1",
+    "@polymer/paper-tooltip": "3.0.1",
     "@webcomponents/webcomponentsjs": "2.1.1",
     "concurrently": "^3.5.1",
     "fivetwelve": "^1.0.0-alpha.1",

diff --git a/src/actions/app.js b/src/actions/app.js
@@ -4,27 +4,34 @@ export const UPDATE_DRAWER_STATE = 'UPDATE_DRAWER_STATE'
 export const OPEN_SNACKBAR = 'OPEN_SNACKBAR'
 export const CLOSE_SNACKBAR = 'CLOSE_SNACKBAR'
 
-export const navigate = (path) => (dispatch) => {
-  // Extract the page name from path.
-  const page = path === '/' ? 'universe' : path.slice(1)
+export const navigate = (location) => (dispatch) => {
+  const pathname = location.pathname
+  const parts = pathname.slice(1).split('/')
+  const page = parts[0] || 'universe'
+  const entityId = parts[1] || undefined
 
   // Any other info you might want to extract from the path (like page type),
   // you can do here
-  dispatch(loadPage(page))
+  dispatch(loadPage(page, entityId))
 
   // Close the drawer - in case the *path* change came from a link in the drawer.
   dispatch(updateDrawerState(false))
 }
 
-const loadPage = (page) => (dispatch) => {
+const loadPage = (page, entityId) => (dispatch) => {
   switch(page) {
     case 'animation':
       import('../views/animation-view.js')
       break
 
-    case 'fixture':
-      import('../views/fixture-view.js')
+    case 'fixture': {
+      if (entityId !== undefined) {
+        import('../views/fixture-detail-view.js')
+      } else {
+        import('../views/fixture-view.js')
+      }
       break
+    }
 
     case 'universe':
       import('../views/universe-view.js').then((module) => {
@@ -53,14 +60,15 @@ const loadPage = (page) => (dispatch) => {
       page = 'view404'
       import('../views/my-view404.js')
   }
-
-  dispatch(updatePage(page))
+  
+  dispatch(updatePage(page, entityId))
 }
 
-const updatePage = (page) => {
+const updatePage = (page, entityId) => {
   return {
     type: UPDATE_PAGE,
-    page
+    page,
+    entityId
   }
 }
 

diff --git a/src/components/dmx-fixture/index.js b/src/components/dmx-fixture/index.js
@@ -9,7 +9,6 @@ import { batch } from '../../utils/index.js'
 
 import '/node_modules/@polymer/iron-icons/iron-icons.js'
 import '/node_modules/@polymer/iron-icons/maps-icons.js'
-import '/node_modules/@polymer/paper-tooltip/paper-tooltip.js'
 
 /*
  * A single DMX fixture with all properties
@@ -87,17 +86,19 @@ class DmxFixture extends LitElement {
           <div class="grid">
             <div>
               <iron-icon icon="info-outline" id="info"></iron-icon>
-              <paper-tooltip for="info">
-                ${type} | ${_fixture.weight} kg | ${_fixture.channels} Channels
-              </paper-tooltip>
+              Type: ${type}
+              <br />
+              Weight: ${_fixture.weight} kg
+              <br />
+              Channels: ${_fixture.channels}
+
+              <form id="fixtureMetaProperties" @submit="${e => this.handleSubmit(e)}">
+                <div>
+                  <label for="address">Address</label>
+                  <input id="address" name="address" type="number" min="0" max="512" value="${address}"/>
+                </div>
+              </form>
             </div>
-
-            <form id="fixtureMetaProperties" @submit="${e => this.handleSubmit(e)}">
-              <div>
-                <paper-tooltip for="address">Address</paper-tooltip>
-                <input id="address" name="address" type="number" min="0" max="512" value="${address}"/>
-              </div>
-            </form>
           </div>
 
           <div class="grid">

diff --git a/src/components/fixture-manager/index.js b/src/components/fixture-manager/index.js
@@ -4,10 +4,15 @@ import { connect } from 'pwa-helpers/connect-mixin.js'
 import { store } from '../../reduxStore.js'
 import { uuidV1 } from '../../../libs/uuid/uuid.js'
 import { addFixture, removeFixtureFromEverywhere } from '../../actions/index.js'
-import '../dmx-fixture/index.js'
 import * as Fixtures from '../../utils/dmx-fixtures.js'
 import { FIXTURE_TYPES } from '../../constants/index.js'
-import { getFixtures } from '../../selectors/index.js';
+import { getFixturesSorted } from '../../selectors/index.js'
+import { buttons } from '../../styles/buttons.js'
+
+import '@polymer/paper-card/paper-card.js'
+import '@polymer/paper-dialog/paper-dialog.js'
+import '@material/mwc-button/mwc-button.js'
+import '@material/mwc-icon/mwc-icon.js'
 
 /*
  * Handle DMX fixtures
@@ -26,12 +31,7 @@ class FixtureManager extends connect(store)(LitElement) {
   }
 
   _stateChanged(state) {
-    this.fixtures = getFixtures(state)
-  }
-
-  removeFixture(e) {
-    const { fixtureId } = e.target
-    store.dispatch(removeFixtureFromEverywhere(fixtureId))
+    this.fixtures = getFixturesSorted(state)
   }
 
   handleSubmit(e) {
@@ -86,47 +86,75 @@ class FixtureManager extends connect(store)(LitElement) {
     }
   }
 
+  removeFixture(e) {
+    // Dialog was closed
+    if (e.type === 'iron-overlay-closed') {
+
+      // Dialog was confirmed
+      if (e.detail.confirmed) {
+        store.dispatch(removeFixtureFromEverywhere(this._removeFixtureId))
+        this._removeFixtureId = undefined
+      }
+
+    // Dialog should be opened
+    } else {
+      const dialog = this.shadowRoot.getElementById('dialog')
+
+      // Save the ID of the current fixture to be deleted
+      this._removeFixtureId = e.target.fixtureId
+
+      dialog.positionTarget = e.target
+      dialog.open()
+    }
+  }
+
   render() {
     const { types, fixtures } = this
 
     return html`
-    <style>
-      :host {
-        --width: 4;
-      }
+      ${buttons}
+
+      <style>
+        @import url('node_modules/@material/layout-grid/dist/mdc.layout-grid.css');
 
-      @media (min-width: 1024px) {
         :host {
-          --width: 5;
+          --width: 4;
         }
-      }
 
-      .container {
-        display: grid;
-        grid-template-columns: repeat(var(--width), auto);
-        row-gap: calc(var(--padding-basic) * 2);
-        column-gap: var(--padding-basic);
-      }
+        @media (min-width: 1024px) {
+          :host {
+            --width: 5;
+          }
+        }
 
-      .item {
-        position: relative;
-        margin-top: calc(var(--padding-basic) * 2);
-        padding: calc(var(--padding-basic) * 3) var(--padding-basic) var(--padding-basic) var(--padding-basic);
-        border: 3px solid var(--dark-primary-color);
-        background: var(--dark-primary-color);
-      }
+        .container {
+          display: grid;
+          grid-template-columns: repeat(var(--width), auto);
+          row-gap: calc(var(--padding-basic) * 2);
+          column-gap: var(--padding-basic);
+        }
+      </style>
 
-      .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);
-      }
+      <custom-style>
+        <style>
+          paper-card {
+            width: 100%;
+            color: var(--mdc-theme-on-surface);
+
+            --paper-card-header-color: var(--mdc-theme-on-surface);
 
-    </style>
+            --paper-card-header-text: {
+              font-size: 1.25em;
+              overflow: hidden;
+              white-space: nowrap;
+            };
+          }
+
+          mwc-button.card {
+            color: var(--mdc-theme-on-primary)
+          }
+        </style>
+      </custom-style>
 
         <form @submit="${e => this.handleSubmit(e)}">
           <label for="type">Type</label>
@@ -151,25 +179,39 @@ class FixtureManager extends connect(store)(LitElement) {
 
         <br>
 
-        <div class="container">
+        <div class="mdc-layout-grid mdc-layout-grid--align-left">
+          <div class="mdc-layout-grid__inner">
+
+            ${repeat(fixtures, fixture => html`
 
-          ${repeat(fixtures, fixture => html`
-          
-            <div class="item" data-name="${fixture.name}">
-              <dmx-fixture
-                name="${fixture.name}"
-                .properties="${fixture.properties}"
-                id="${fixture.id}"
-                type="${fixture.type}"
-                address="${fixture.address}"
-                universe="${fixture.universe}"></dmx-fixture>
+              <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-2">
 
-              <button @click="${e => this.removeFixture(e)}" .fixtureId="${fixture.id}">Remove</button>
-            </div>
+                <paper-card heading="${fixture.name}" alt="${fixture.name}">
+                  <div class="card-content">
+                    ${fixture.address}
+                  </div>
 
-          `)}
+                  <div class="card-actions">
+                    <a href="/fixture/${fixture.id}" tabindex="-1"><mwc-button class="card" icon="edit"></mwc-button></a>
+                    <mwc-button class="card" icon="delete" @click="${e => this.removeFixture(e)}" .fixtureId="${fixture.id}"></mwc-button>
+                  </div>
+                </paper-card>
 
+              </div>
+
+            `)}
+
+          </div>
         </div>
+
+
+        <paper-dialog id="dialog" no-overlap horizontal-align="left" vertical-align="top" dynamic-align="true" @iron-overlay-closed="${e => this.removeFixture(e)}">
+          <h2>Delete Fixture?</h2>
+          <div class="buttons">
+            <paper-button dialog-dismiss>No</paper-button>
+            <paper-button raised dialog-confirm autofocus>Yes</paper-button>
+          </div>
+        </paper-dialog>
     `
   }
 }

diff --git a/src/components/luminave-dashboard/index.js b/src/components/luminave-dashboard/index.js
@@ -16,20 +16,24 @@ class LuminaveDashboard extends connect(store)(LitElement) {
   static get properties() {
     return {
       live: { type: Boolean },
-      _page: { type: String }
+      _page: { type: String },
+      _entityId: { type: String }
     }
   }
 
   firstUpdated() {
     // Use a helper router to dispatch the location
-    installRouter(location => store.dispatch(navigate(window.decodeURIComponent(location.pathname))))
+    installRouter(location => store.dispatch(navigate(location)))
   }
 
   _stateChanged(state) {
     this._page = state.app.page
+    this._entityId = state.app.entityId
   }
 
   render() {
+    const { _page, _entityId } = this
+
     return html`
       ${tabs}
 
@@ -47,7 +51,7 @@ class LuminaveDashboard extends connect(store)(LitElement) {
 
       <ui-spacer></ui-spacer>
 
-      <paper-tabs selected="${this._page}" attr-for-selected="name">
+      <paper-tabs selected="${_page}" attr-for-selected="name">
         <paper-tab name="universe" link>
           <a href="/universe" tabindex="-1">Universes</a>
         </paper-tab>
@@ -72,13 +76,17 @@ class LuminaveDashboard extends connect(store)(LitElement) {
 
       <!-- Main content -->
       <main role="main" class="main-content">
-        <universe-view ?active="${this._page === 'universe'}" class="page"></universe-view>
-        <midi-view ?active="${this._page === 'midi'}" class="page"></midi-view>
-        <scene-view ?active="${this._page === 'scene'}" class="page"></scene-view>
-        <animation-view ?active="${this._page === 'animation'}" class="page"></animation-view>
-        <fixture-view ?active="${this._page === 'fixture'}" class="page"></fixture-view>
-        <modv-view ?active="${this._page === 'modv'}" class="page"></modv-view>
-        <my-view404 ?active="${this._page === 'view404'}" class="page"></my-view404>
+        <universe-view ?active="${_page === 'universe'}" class="page"></universe-view>
+        <midi-view ?active="${_page === 'midi'}" class="page"></midi-view>
+        <scene-view ?active="${_page === 'scene'}" class="page"></scene-view>
+        <animation-view ?active="${_page === 'animation'}" class="page"></animation-view>
+
+        <fixture-view ?active="${_page === 'fixture' && _entityId === undefined}" class="page"></fixture-view>
+        <fixture-detail-view ?active="${_page === 'fixture' && _entityId !== undefined}" class="page" .fixtureId="${_entityId}"></fixture-detail-view>
+
+        <modv-view ?active="${_page === 'modv'}" class="page"></modv-view>
+        <my-view404 ?active="${_page === 'view404'}" class="page"></my-view404>
+
       </main>
     `
   }