Online and offline state

sebs · sebs · commit 22c9c22e9ceb · 2019-09-18T19:37:15.000+02:00
diff --git a/packages/test-app/Todo.md b/packages/test-app/Todo.md
@@ -0,0 +1,8 @@
+# Todos
+
+* offline, online indicator
+* info page with 
+  * info
+	* todo
+	* Changelog
+	* Privacy policy
diff --git a/packages/test-app/package.json b/packages/test-app/package.json
@@ -19,7 +19,8 @@
     "etherscan-api": "^8.1.2",
     "express": "^4.16.3",
     "polymer-cli": "^1.7.3",
-    "prpl-server": "^1.2.0"
+    "prpl-server": "^1.2.0",
+    "pwa-helpers": "^0.8.2"
   },
   "scripts": {
     "test": "npm run build",
diff --git a/packages/test-app/src/test-app-app/svg-sample-icons.js b/packages/test-app/src/test-app-app/svg-sample-icons.js
@@ -29,6 +29,11 @@ $_documentContainer.innerHTML = `<iron-iconset-svg name="svg-sample-icons" size=
 			<g id="cart">
 			<svg style="width:24px;height:24px" viewBox="0 0 24 24">
 			<path fill="#000000" d="M11,9H13V6H16V4H13V1H11V4H8V6H11M7,18A2,2 0 0,0 5,20A2,2 0 0,0 7,22A2,2 0 0,0 9,20A2,2 0 0,0 7,18M17,18A2,2 0 0,0 15,20A2,2 0 0,0 17,22A2,2 0 0,0 19,20A2,2 0 0,0 17,18M7.17,14.75L7.2,14.63L8.1,13H15.55C16.3,13 16.96,12.59 17.3,11.97L21.16,4.96L19.42,4H19.41L18.31,6L15.55,11H8.53L8.4,10.73L6.16,6L5.21,4L4.27,2H1V4H3L6.6,11.59L5.25,14.04C5.09,14.32 5,14.65 5,15A2,2 0 0,0 7,17H19V15H7.42C7.29,15 7.17,14.89 7.17,14.75Z" />
+	</svg>
+			</g>
+			<g id="online-status">
+			<svg style="width:24px;height:24px" viewBox="0 0 24 24">
+			<path fill="#000000" d="M4.93,4.93C3.12,6.74 2,9.24 2,12C2,14.76 3.12,17.26 4.93,19.07L6.34,17.66C4.89,16.22 4,14.22 4,12C4,9.79 4.89,7.78 6.34,6.34L4.93,4.93M19.07,4.93L17.66,6.34C19.11,7.78 20,9.79 20,12C20,14.22 19.11,16.22 17.66,17.66L19.07,19.07C20.88,17.26 22,14.76 22,12C22,9.24 20.88,6.74 19.07,4.93M7.76,7.76C6.67,8.85 6,10.35 6,12C6,13.65 6.67,15.15 7.76,16.24L9.17,14.83C8.45,14.11 8,13.11 8,12C8,10.89 8.45,9.89 9.17,9.17L7.76,7.76M16.24,7.76L14.83,9.17C15.55,9.89 16,10.89 16,12C16,13.11 15.55,14.11 14.83,14.83L16.24,16.24C17.33,15.15 18,13.65 18,12C18,10.35 17.33,8.85 16.24,7.76M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10Z" />
 	</svg>
 			</g>
     </defs>
diff --git a/packages/test-app/src/test-app-app/test-app-app.js b/packages/test-app/src/test-app-app/test-app-app.js
@@ -17,6 +17,7 @@ import '@polymer/paper-icon-button/paper-icon-button.js'
 import '@polymer/paper-button/paper-button.js';
 import '@polymer/paper-checkbox/paper-checkbox.js';
 import './svg-sample-icons.js'
+import { installOfflineWatcher } from 'pwa-helpers/network.js';
 /**
  * @customElement
  * @polymer
@@ -35,6 +36,9 @@ class TestAppApp extends PolymerElement {
           color: green;
         }
 
+        #statusicon[disabled], statusicon[disabled="disabled"] {
+          border: 1px solid red;
+        }
         body {
           margin: 0px;
         }
@@ -54,7 +58,9 @@ class TestAppApp extends PolymerElement {
             <app-header fixed condenses effects="waterfall" slot="header">
             <app-toolbar>
             <paper-icon-button icon="svg-sample-icons:info" on-tap="_openInfo"></paper-icon-button>
-              <div main-title>Token Explorer</div>
+            <paper-icon-button id="statusicon" icon="svg-sample-icons:online-status"></paper-icon-button>
+            
+            <div main-title>Token Explorer</div>
               <paper-icon-button icon="svg-sample-icons:cart" on-tap="_openBuy"></paper-icon-button>
               <iron-dropdown id="buy" horizontal-align="right" vertical-align="top">
                 <div slot="dropdown-content">
@@ -107,6 +113,14 @@ class TestAppApp extends PolymerElement {
   ready() {
     super.ready();
     this._triggerTokenSupply(this.tokens[0]); 
+    installOfflineWatcher((offline) => {
+
+      if (offline) {
+        this.$.statusicon.setAttribute('disabled', true);
+      } else {
+        this.$.statusicon.removeAttribute('disabled');
+      }
+    })
   }
 
   _openSettings() {
@@ -151,9 +165,7 @@ class TestAppApp extends PolymerElement {
       ga('send', 'event', 'history', token.name, this.durations[this.duration], {
         nonInteraction: false
       });
-      console.log('send', 'event', 'history', token.name, this.durations[this.duration])
     }
-
     
     fetch(url)
       .then(function(response) {
