diff --git a/static/babystats.css b/static/babystats.css index 19bf3ae..c42ad62 100644 --- a/static/babystats.css +++ b/static/babystats.css @@ -130,6 +130,18 @@ babyStatsWeight, babyStatsTemp { outline: 2px solid rgb(233,127,2); } +babyStatsSpinner { + position: absolute; + top: 80px; + left: 0; + bottom: 0; + right: 0; + background-size: contain; + background-position: center; + background-repeat: no-repeat; + background-image: url('/static/spinner.svg'); +} + babyStatsGridOverlay { display: flex; position: absolute; diff --git a/static/babystats.js b/static/babystats.js index 0b25b8e..585b1ad 100644 --- a/static/babystats.js +++ b/static/babystats.js @@ -168,6 +168,8 @@ BabyStats.prototype.checkInit_ = function() { this.chat_.addEventListener('request', this.checkOverlay_.bind(this)); this.chat_.addEventListener('request_denied', this.checkOverlay_.bind(this)); this.chat_.addEventListener('acl_change', this.checkOverlay_.bind(this)); + this.cosmo_.addEventListener('connect', this.checkOverlay_.bind(this)); + this.cosmo_.addEventListener('disconnect', this.checkOverlay_.bind(this)); this.updateTileStatus_(); this.updateDisplayPage_(); @@ -343,6 +345,7 @@ BabyStats.prototype.rebuildIfNeeded_ = function(e) { */ BabyStats.prototype.setTransitions_ = function() { this.gridOverlayRule_.style.transition = '0.4s'; + this.spinner_.style.transition = '0.4s'; this.measurementPrompt_.style.transition = '0.4s'; this.cellOverlayRule_.style.transition = '0.4s'; this.flipperRule_.style.transition = '1.0s'; @@ -658,6 +661,9 @@ BabyStats.prototype.buildLayout_ = function() { this.gridOverlay_ = document.createElement('babyStatsGridOverlay'); front.appendChild(this.gridOverlay_); + this.spinner_ = document.createElement('babyStatsSpinner'); + front.appendChild(this.spinner_); + // Back (read-only) side this.displayChildName_ = document.createElement('babyStatsDisplayChildName'); back.appendChild(this.displayChildName_); @@ -762,8 +768,15 @@ BabyStats.prototype.checkOverlay_ = function() { }.bind(this)); } + this.spinner_.style.visibility = 'hidden'; + this.spinner_.style.opacity = 0.0; + var message = '', actions = []; - if (!this.childName_.value) { + if (!this.cosmo_.isConnected()) { + this.spinner_.style.visibility = 'visible'; + this.spinner_.style.opacity = 1.0; + message = ' '; + } else if (!this.childName_.value) { message = 'Please enter child name above'; } else if (!this.yourName_.value) { message = 'Please enter your name above'; diff --git a/attic/balls.svg b/static/spinner.svg similarity index 100% rename from attic/balls.svg rename to static/spinner.svg