fixed a data load bug and added an override slot

uvalib · Feb 11, 2021 · 1c0187a · 1c0187a
1 parent 1b1fca7
commit 1c0187a
Show file tree

Hide file tree

Showing 5 changed files with 141 additions and 98 deletions.
diff --git a/packages/uvalib-models/demo/override.html b/packages/uvalib-models/demo/override.html
@@ -27,10 +27,26 @@ <h3>Basic uvalib-model-realtime-override demo</h3>
           <uvalib-model-realtime-override hidden path="v1/foobarz" default-value="<h2>Make me famous</h2>"><h1>Foobar</h1></uvalib-model-realtime-override>
           <uvalib-model-realtime-override hidden path="v1/foobartime" timestamp default-value="<h3>about that time</h3>"><h1>Foobar</h1></uvalib-model-realtime-override>
 -->
-<uvalib-model-realtime-override database="uvalib-occupancy" path="locations-schemaorg/location/clemons/foo" timestamp default-value="<h3>about that time</h3>">
+
+<uvalib-model-realtime-override database="uvalib-occupancy" path="locations-schemaorg/location/clemons/foo" default-value="<h3>Overridden!</h3>">
   Something here
 </uvalib-model-realtime-override>
 
+<uvalib-model-realtime-override database="uvalib-occupancy" path="locations-schemaorg/location/clemons/foo">
+  <div>Something here</div>
+  <div slot="override">This is the override message</div>
+</uvalib-model-realtime-override>
+
+
+<uvalib-model-realtime-override database="uvalib-occupancy" path="locations-schemaorg/location/clemons/foo" timestamp default-value="<h3>Overridden!</h3>">
+  Something here
+</uvalib-model-realtime-override>
+
+<uvalib-model-realtime-override database="uvalib-occupancy" path="locations-schemaorg/location/clemons/foo" timestamp>
+  <div>Something here</div>
+  <div slot="override">This is the override message</div>
+</uvalib-model-realtime-override>
+
         </div>
   </body>
 </html>
diff --git a/packages/uvalib-models/demo/uvalib-model-realtime-override.js b/packages/uvalib-models/demo/uvalib-model-realtime-override.js
@@ -6954,6 +6954,7 @@ class UvalibModelRealtimeOverride extends UvalibModelFBDB {
     constructor() {
       super();
       this.database = 'uvalib-api';
+      this._gotdata = false;
     }
 
     connectedCallback() {
@@ -6962,63 +6963,71 @@ class UvalibModelRealtimeOverride extends UvalibModelFBDB {
     }
 
     _dataChanged(value) {
+      this._gotdata = true;
       if (this._timeout) {
         window.clearTimeout(this._timeout);
       }
 
-      if (value && this.timestamp && this.defaultValue) {
+      if (this.timestamp) {
         this._checkTime(value);   
       } else {
         this._adjustDom(value);
       }
     }
 
     _checkTime(value) {
-      // see if we can parse the db value as a datetime     
-      var d = DateTime.fromMillis( parseInt(value) );      
-
-      if (DateTime.local().toMillis() < d.toMillis()) {              
-        // poll every few minutes to see if need to continue showing the override
-        this._adjustDom(this.defaultValue);
-        this._timeout = window.setTimeout(function(){this._checkTime(value);}.bind(this), 60000);
+      // see if we can parse the db value as a datetime           
+      if (value && parseInt(value)>0) {
+        var d = DateTime.fromMillis( parseInt(value) );
+        if (d && DateTime.local().toMillis() < d.toMillis()) {                       
+          // poll every few minutes to see if need to continue showing the override
+          this._adjustDom(true,this.defaultValue);
+          this._timeout = window.setTimeout(function(){this._checkTime(value);}.bind(this), 60000);
+        } else {
+          this._adjustDom(false);
+        }
       } else {       
-        this._adjustDom();  // show the default
+        this._adjustDom(false);  // show the default
       }
     }
 
-    _adjustDom(value){
-      if (value && this._overrideContainer && this._defaultContainer) {
+    _adjustDom(isoverride, value){     
+      if (isoverride && this._overrideContainer && this._defaultContainer) {
         // we have data to override with
-        this._overrideContainer.innerHTML = value;
-        this._defaultContainer.style.display = "none";
-        this._overrideContainer.style.display = "block";
-        this.style.display = "block";
+        if (this.defaultValue) {
+          this._overrideContent.innerHTML = this.defaultValue;
+        }
+        this._defaultContainer.setAttribute('hidden','');
+        this._overrideContainer.removeAttribute('hidden');
+        this.style.display = "block";       
       } else if (this._overrideContainer && this._defaultContainer) {
         // just show the default content
-        this._overrideContainer.style.display = "none";
-        this._defaultContainer.style.display = "block";
+        this._overrideContainer.setAttribute('hidden','');
+        this._defaultContainer.removeAttribute('hidden');
         this.style.display = "block";
       }
     }
 
     _setupDom(){
       // setup a shadowDOM
       this.shadow = this.attachShadow({mode: 'open'});
-      // and a place to stash the alerts
-      this._container = document.createElement('div');
-      this._overrideContainer = document.createElement('div');
-      this._overrideContainer.id = "override";
-      this._overrideContainer.style.display="none";
-      this._overrideContainer.setAttribute('part','override');
-      this._container.appendChild(this._overrideContainer);
-      this._defaultContainer = document.createElement('div');
-      this._defaultContainer.id = "default";
-      this._defaultContainer.style.display="none";
-      this._defaultContainer.appendChild( document.createElement('slot') );
-      this._defaultContainer.setAttribute('part','default');
-      this._container.appendChild(this._defaultContainer);
-      this.shadow.appendChild(this._container);
-      this._adjustDom();
+
+      this.shadow.innerHTML = `
+      <style>
+       [hidden] {
+         display: none;
+       }
+      </style>
+      <div id="container">
+        <div id="override" hidden part="override"><slot name="override"><div id="overrideContent"></div></slot></div>
+        <div id="default" hidden part="default"><slot></slot></div>
+      </div>
+      `;
+      this._container = this.shadow.querySelector('#container');
+      this._overrideContainer = this.shadow.querySelector('#override');
+      this._overrideContent = this.shadow.querySelector('#overrideContent');
+      this._defaultContainer = this.shadow.querySelector('#default');
+      this._adjustDom(false);
     }
 
 }

diff --git a/packages/uvalib-models/dist/uvalib-model-realtime-override.js b/packages/uvalib-models/dist/uvalib-model-realtime-override.js
@@ -6954,6 +6954,7 @@ class UvalibModelRealtimeOverride extends UvalibModelFBDB {
     constructor() {
       super();
       this.database = 'uvalib-api';
+      this._gotdata = false;
     }
 
     connectedCallback() {
@@ -6962,63 +6963,71 @@ class UvalibModelRealtimeOverride extends UvalibModelFBDB {
     }
 
     _dataChanged(value) {
+      this._gotdata = true;
       if (this._timeout) {
         window.clearTimeout(this._timeout);
       }
 
-      if (value && this.timestamp && this.defaultValue) {
+      if (this.timestamp) {
         this._checkTime(value);   
       } else {
         this._adjustDom(value);
       }
     }
 
     _checkTime(value) {
-      // see if we can parse the db value as a datetime     
-      var d = DateTime.fromMillis( parseInt(value) );      
-
-      if (DateTime.local().toMillis() < d.toMillis()) {              
-        // poll every few minutes to see if need to continue showing the override
-        this._adjustDom(this.defaultValue);
-        this._timeout = window.setTimeout(function(){this._checkTime(value);}.bind(this), 60000);
+      // see if we can parse the db value as a datetime           
+      if (value && parseInt(value)>0) {
+        var d = DateTime.fromMillis( parseInt(value) );
+        if (d && DateTime.local().toMillis() < d.toMillis()) {                       
+          // poll every few minutes to see if need to continue showing the override
+          this._adjustDom(true,this.defaultValue);
+          this._timeout = window.setTimeout(function(){this._checkTime(value);}.bind(this), 60000);
+        } else {
+          this._adjustDom(false);
+        }
       } else {       
-        this._adjustDom();  // show the default
+        this._adjustDom(false);  // show the default
       }
     }
 
-    _adjustDom(value){
-      if (value && this._overrideContainer && this._defaultContainer) {
+    _adjustDom(isoverride, value){     
+      if (isoverride && this._overrideContainer && this._defaultContainer) {
         // we have data to override with
-        this._overrideContainer.innerHTML = value;
-        this._defaultContainer.style.display = "none";
-        this._overrideContainer.style.display = "block";
-        this.style.display = "block";
+        if (this.defaultValue) {
+          this._overrideContent.innerHTML = this.defaultValue;
+        }
+        this._defaultContainer.setAttribute('hidden','');
+        this._overrideContainer.removeAttribute('hidden');
+        this.style.display = "block";       
       } else if (this._overrideContainer && this._defaultContainer) {
         // just show the default content
-        this._overrideContainer.style.display = "none";
-        this._defaultContainer.style.display = "block";
+        this._overrideContainer.setAttribute('hidden','');
+        this._defaultContainer.removeAttribute('hidden');
         this.style.display = "block";
       }
     }
 
     _setupDom(){
       // setup a shadowDOM
       this.shadow = this.attachShadow({mode: 'open'});
-      // and a place to stash the alerts
-      this._container = document.createElement('div');
-      this._overrideContainer = document.createElement('div');
-      this._overrideContainer.id = "override";
-      this._overrideContainer.style.display="none";
-      this._overrideContainer.setAttribute('part','override');
-      this._container.appendChild(this._overrideContainer);
-      this._defaultContainer = document.createElement('div');
-      this._defaultContainer.id = "default";
-      this._defaultContainer.style.display="none";
-      this._defaultContainer.appendChild( document.createElement('slot') );
-      this._defaultContainer.setAttribute('part','default');
-      this._container.appendChild(this._defaultContainer);
-      this.shadow.appendChild(this._container);
-      this._adjustDom();
+
+      this.shadow.innerHTML = `
+      <style>
+       [hidden] {
+         display: none;
+       }
+      </style>
+      <div id="container">
+        <div id="override" hidden part="override"><slot name="override"><div id="overrideContent"></div></slot></div>
+        <div id="default" hidden part="default"><slot></slot></div>
+      </div>
+      `;
+      this._container = this.shadow.querySelector('#container');
+      this._overrideContainer = this.shadow.querySelector('#override');
+      this._overrideContent = this.shadow.querySelector('#overrideContent');
+      this._defaultContainer = this.shadow.querySelector('#default');
+      this._adjustDom(false);
     }
 
 }

diff --git a/packages/uvalib-models/package.json b/packages/uvalib-models/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@uvalib/uvalib-models",
   "main": "uvalib-models.js",
-  "version": "0.3.45",
+  "version": "0.3.46",
   "dependencies": {
     "@uvalib/uvalib-account": "^0.1.19",
     "luxon": "^1.25.0",

diff --git a/packages/uvalib-models/uvalib-model-realtime-override.js b/packages/uvalib-models/uvalib-model-realtime-override.js
@@ -26,6 +26,7 @@ export default class UvalibModelRealtimeOverride extends UvalibModelFBDB {
     constructor() {
       super();
       this.database = 'uvalib-api';
+      this._gotdata = false;
     }
 
     connectedCallback() {
@@ -34,63 +35,71 @@ export default class UvalibModelRealtimeOverride extends UvalibModelFBDB {
     }
 
     _dataChanged(value) {
+      this._gotdata = true;
       if (this._timeout) {
         window.clearTimeout(this._timeout);
       }
 
-      if (value && this.timestamp && this.defaultValue) {
+      if (this.timestamp) {
         this._checkTime(value);   
       } else {
         this._adjustDom(value);
       }
     }
 
     _checkTime(value) {
-      // see if we can parse the db value as a datetime     
-      var d = DateTime.fromMillis( parseInt(value) );      
-
-      if (DateTime.local().toMillis() < d.toMillis()) {              
-        // poll every few minutes to see if need to continue showing the override
-        this._adjustDom(this.defaultValue);
-        this._timeout = window.setTimeout(function(){this._checkTime(value)}.bind(this), 60000);
+      // see if we can parse the db value as a datetime           
+      if (value && parseInt(value)>0) {
+        var d = DateTime.fromMillis( parseInt(value) );
+        if (d && DateTime.local().toMillis() < d.toMillis()) {                       
+          // poll every few minutes to see if need to continue showing the override
+          this._adjustDom(true,this.defaultValue);
+          this._timeout = window.setTimeout(function(){this._checkTime(value)}.bind(this), 60000);
+        } else {
+          this._adjustDom(false);
+        }
       } else {       
-        this._adjustDom();  // show the default
+        this._adjustDom(false);  // show the default
       }
     }
 
-    _adjustDom(value){
-      if (value && this._overrideContainer && this._defaultContainer) {
+    _adjustDom(isoverride, value){     
+      if (isoverride && this._overrideContainer && this._defaultContainer) {
         // we have data to override with
-        this._overrideContainer.innerHTML = value;
-        this._defaultContainer.style.display = "none";
-        this._overrideContainer.style.display = "block";
-        this.style.display = "block";
+        if (this.defaultValue) {
+          this._overrideContent.innerHTML = this.defaultValue;
+        }
+        this._defaultContainer.setAttribute('hidden','');
+        this._overrideContainer.removeAttribute('hidden');
+        this.style.display = "block";       
       } else if (this._overrideContainer && this._defaultContainer) {
         // just show the default content
-        this._overrideContainer.style.display = "none";
-        this._defaultContainer.style.display = "block";
+        this._overrideContainer.setAttribute('hidden','');
+        this._defaultContainer.removeAttribute('hidden');
         this.style.display = "block";
       }
     }
 
     _setupDom(){
       // setup a shadowDOM
       this.shadow = this.attachShadow({mode: 'open'});
-      // and a place to stash the alerts
-      this._container = document.createElement('div');
-      this._overrideContainer = document.createElement('div');
-      this._overrideContainer.id = "override";
-      this._overrideContainer.style.display="none";
-      this._overrideContainer.setAttribute('part','override');
-      this._container.appendChild(this._overrideContainer);
-      this._defaultContainer = document.createElement('div');
-      this._defaultContainer.id = "default";
-      this._defaultContainer.style.display="none";
-      this._defaultContainer.appendChild( document.createElement('slot') );
-      this._defaultContainer.setAttribute('part','default');
-      this._container.appendChild(this._defaultContainer);
-      this.shadow.appendChild(this._container);
-      this._adjustDom();
+
+      this.shadow.innerHTML = `
+      <style>
+       [hidden] {
+         display: none;
+       }
+      </style>
+      <div id="container">
+        <div id="override" hidden part="override"><slot name="override"><div id="overrideContent"></div></slot></div>
+        <div id="default" hidden part="default"><slot></slot></div>
+      </div>
+      `;
+      this._container = this.shadow.querySelector('#container');
+      this._overrideContainer = this.shadow.querySelector('#override');
+      this._overrideContent = this.shadow.querySelector('#overrideContent');
+      this._defaultContainer = this.shadow.querySelector('#default');
+      this._adjustDom(false);
     }
 
 }