listeners を addEvenetListener に変更、GoogleMapのテンプレートをhtml付きにして、スタイルを追加した

app.yml

@@ -7,7 +7,6 @@ module: default
 
 skip_files:
 - ^(.*/)?composer\.(phar|lock|json)$
-- ^(node_modules/.*)
 - logs
 - ^\.(bowerrc|editorconfig|gitignore)
 - bower.json

public/elements/te-admin.js

@@ -37,14 +37,11 @@ Polymer({
     }
   },
 
-  listeners: {
-    'te-device-created': 'reload'
-  },
-
   reload: function() {
     this.$$('te-devices').reload();
   },
 
   ready: function() {
+    this.addEventListener('te-device-created', this.reload);
   }
 });

public/elements/te-app.js

@@ -115,12 +115,6 @@ Polymer({
     }
   },
 
-  listeners: {
-    'te-device-created': 'reload',
-    'te-device-deleted': 'reload',
-    'excess-route-will-activate': 'routeChange'
-  },
-
   reload: function() {
     this.$$('te-devices').reload();
   },
@@ -139,5 +133,12 @@ Polymer({
   logined: function() {
     this.unlisten(this.$.ajax_current_user, 'response', 'logined');
     location.href = '/#/admin/devices';
+  },
+
+  ready: function() {
+    this.addEventListener('te-device-created', this.reload);
+    this.addEventListener('te-device-deleted', this.reload);
+    this.addEventListener('excess-route-will-activate', this.routeChange);
   }
+
 });

public/elements/te-device-item.js

@@ -17,7 +17,7 @@ Polymer({
 
     </style>
     <paper-item>
-      <paper-item-body two-line="" id="body">
+      <paper-item-body two-line="" id="body" on-tap="redirectDetail">
         <div class="layout inline">{{item.name}}</div>
         <div secondary="">{{count(item.thresholds)}}個の個室があります</div>
       </paper-item-body>
@@ -39,10 +39,6 @@ Polymer({
     }
   },
 
-  listeners: {
-    'body.tap': 'redirectDetail'
-  },
-
   count: function(array) {
     return array.length;
   },

public/elements/te-device-list.js

@@ -56,10 +56,6 @@ Polymer({
     }
   },
 
-  listeners: {
-    'te-device-deleted': 'reload'
-  },
-
   doRequestIfSelected: function(selected) {
     if(selected) {
       this.reload();
@@ -73,5 +69,6 @@ Polymer({
 
   ready: function() {
     this.url = this.admin? '/admin/devices' : '/api/devices';
+    this.addEventListener('te-device-deleted', this.reload);
   }
 });

public/elements/te-device-value-graph.js

@@ -60,7 +60,7 @@ Polymer({
 
   chartData: function(values, roomIndex, threshold) {
     var data = [[{type: 'datetime', label: '日時'}, {type: 'number', label: '計測値'}, {type: 'number', label:'しきい値'}]];
-    values.forEach(function(value){
+    (values || []).forEach(function(value){
       data.push([moment(value.created).toDate(), value.payload[roomIndex], parseFloat(threshold.value)]);
     });
     return data;

public/elements/te-device-value-status.js

@@ -6,8 +6,6 @@ import '@polymer/iron-icon/iron-icon.js';
 import '@polymer/paper-item/paper-icon-item.js';
 import '@polymer/paper-item/paper-item-body.js';
 import '@polymer/paper-styles/paper-styles.js';
-import moment from 'moment';
-//import 'moment/locale/ja';
 import './te-icon.js';
 import './mdi.js';
 

public/elements/te-form.js

@@ -160,12 +160,6 @@ Polymer({
 
   },
 
-  listeners: {
-    'password-changed': 'validatePassword',
-    'repass-changed': 'validatePassword',
-    'num_of_rooms-changed': 'changeRoomsArray'
-  },
-
   // private
   validatePassword: function() {
     this.repassInValid = (this.password !== this.repass);
@@ -234,5 +228,8 @@ Polymer({
       Strong: '強い',
       VeryStrong: '安全'
     };
+    this.addEventListener('password-changed', this.validatePassword);
+    this.addEventListener('repass-changed', this.validatePassword);
+    this.addEventListener('num_of_rooms-changed', this.changeRoomsArray);
   }
 });

public/index.html

@@ -35,6 +35,8 @@
   <!-- Load webcomponents-loader.js to check and load any polyfills your browser needs -->
   <script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
   <script type="module" src="elements/te-app.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/locale/ja.js"></script>
 
   <style>
 

public/scripts/google-map/google-map-marker.js

@@ -34,20 +34,9 @@ child of `google-map`.
 */
 import '@polymer/polymer/polymer-legacy.js';
 import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js';
+import {html} from '@polymer/polymer/lib/utils/html-tag.js';
 
 import '@google-web-components/google-apis/google-maps-api.js';
-const $_documentContainer = document.createElement('template');
-
-$_documentContainer.innerHTML = `<dom-module id="google-map-marker">
-  <style>
-    :host {
-      display: none;
-    }
-  </style>
-  <template><slot></slot></template>
-</dom-module>`;
-
-document.head.appendChild($_documentContainer.content);
 
 function setupDragHandler_() {
   if (this.draggable) {
@@ -65,7 +54,15 @@ function onDragEnd_(e, details, sender) {
 }
 
 Polymer({
-
+  _template: html`
+  <style>
+    :host {
+      display: none;
+    }
+  </style>
+  <slot></slot>
+`,
+
   is: 'google-map-marker',
 
   /**

public/scripts/google-map/google-map.js

@@ -60,32 +60,50 @@ If you're seeing the message "You have included the Google Maps API multiple tim
 import '@polymer/polymer/polymer-legacy.js';
 import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js';
 import {dom} from '@polymer/polymer/lib/legacy/polymer.dom.js'
+import {html} from '@polymer/polymer/lib/utils/html-tag.js';
 
 import '@google-web-components/google-apis/google-maps-api.js';
 import {IronResizableBehavior} from '@polymer/iron-resizable-behavior/iron-resizable-behavior.js';
 import '@polymer/iron-selector/iron-selector.js';
 import './google-map-marker.js';
-const $_documentContainer = document.createElement('template');
 
-$_documentContainer.innerHTML = `<dom-module id="google-map">
+Polymer({
+  _template: html`
+    <style>
+      :host {
+        position: relative;
+        display: block;
+        height: 100%;
+      }
 
-  <style>
-    :host {
-      position: relative;
-      display: block;
-      height: 100%;
-    }
+      #map {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+      }
 
-    #map {
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-    }
+      .gm-control-active>img{
+        box-sizing:content-box;
+        display:none;
+        left:50%;
+        pointer-events:none;
+        position:absolute;
+        top:50%;
+        transform:translate(-50%,-50%)
+      }
+      .gm-control-active>img:nth-child(1){
+        display:block
+      }
+      .gm-control-active:hover>img:nth-child(1),.gm-control-active:active>img:nth-child(1){
+        display:none
+      }
+      .gm-control-active:hover>img:nth-child(2),.gm-control-active:active>img:nth-child(3){
+        display:block
+      }
 
-  </style>
-  <template>
+    </style>
 
     <google-maps-api id="api" api-key="[[apiKey]]" client-id="[[clientId]]" version="[[version]]" signed-in="[[signedIn]]" language="[[language]]" on-api-load="_mapApiLoaded" maps-url="[[mapsUrl]]"></google-maps-api>
 
@@ -95,16 +113,10 @@ $_documentContainer.innerHTML = `<dom-module id="google-map">
       <slot id="markers" name="google-map-marker"></slot>
     </iron-selector>
     <slot id="objects"></slot>
-  </template>
-</dom-module>`;
-
-document.head.appendChild($_documentContainer.content);
-
-Polymer({
+`,
 
   is: 'google-map',
-
-
+
   /**
    * Fired when the Maps API has fully loaded.
    * @event google-map-ready
@@ -421,10 +433,10 @@ Polymer({
     IronResizableBehavior
   ],
 
-  listeners: {
-    'iron-resize': 'resize'
-  },
-
+//  listeners: {
+//    'iron-resize': 'resize'
+//  },
+//
   observers: [
     '_debounceUpdateCenter(latitude, longitude)'
   ],
@@ -831,6 +843,10 @@ Polymer({
    } else if (this.$.selector.selectedValues) {
     this.$.selector.selectedValues = this.$.selector.selectedValues.filter(function(i) {return i !== markerIndex});
    }
- }
+ },
+
+  ready: function() {
+    this.addEventListener('iron-resize', this.resize);
+  }
 
 });

public/scripts/paper-menu/paper-submenu.js

@@ -104,9 +104,9 @@ Polymer({
     IronControlState
   ],
 
-  listeners: {
-    'focus': '_onFocus'
-  },
+//  listeners: {
+//    'focus': '_onFocus'
+//  },
 
   get __parent() {
     return dom(this).parentNode;
@@ -215,5 +215,10 @@ Polymer({
    */
   _onFocus: function(event) {
     this.__trigger && this.__trigger.focus();
+  },
+
+  ready: function() {
+    this.addEventListener('focus', this._onFocus);
   }
+
 });