Add weight/temp reporting.

static/babystats.css

@@ -98,11 +98,33 @@ babyStatsMeasurementPrompt {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  background-color: rgba(255,255,255,0.7);
+  background-color: rgba(255,255,255,0.9);
+  color: rgb(73,10,61);
+  font-size: 3vmin;
+  font-weight: bold;
   visibility: hidden;
   opacity: 0.0;
 }
 
+babyStatsWeight, babyStatsTemp {
+  margin: 20px;
+}
+
+.babyStatsWeightKg, .babyStatsWeightLb, .babyStatsWeightOz,
+.babyStatsTempC, .babyStatsTempF {
+  border: 2px dotted rgb(233,127,2);
+  font-size: 3vmin;
+  height: 4vmin;
+  width: 8vmin;
+  margin: 5px;
+  color: rgb(189,21,80);
+  text-align: center;
+}
+
+.babyStatsWeightKg:focus, .babyStatsWeightLb:focus, .babyStatsWeightOz:focus,
+.babyStatsTempC:focus, .babyStatsTempF:focus {
+  outline: 2px solid rgb(233,127,2);
+}
 
 babyStatsGridOverlay {
   display: flex;
@@ -115,7 +137,7 @@ babyStatsGridOverlay {
   flex-direction: column;
   justify-content: center;
   text-align: center;
-  background-color: rgba(255,255,255,0.7);
+  background-color: rgba(255,255,255,0.9);
   color: rgb(189,21,80);
   text-shadow: 0 0 2px rgb(248,202,0);
   font-size: 6vmin;

static/babystats.js

@@ -546,11 +546,63 @@ BabyStats.prototype.buildLayout_ = function() {
       document.createElement('babyStatsMeasurementPrompt');
   front.appendChild(this.measurementPrompt_);
 
-  var measurementCancel = document.createElement('babyStatsActionButton');
+  var weight = document.createElement('babyStatsWeight');
-  measurementCancel.textContent = 'Cancel';
+  this.measurementPrompt_.appendChild(weight);
-  measurementCancel.addEventListener(
+
-      'click', this.cancelMeasurementPrompt_.bind(this));
+  this.weightKg_ = document.createElement('input');
-  this.measurementPrompt_.appendChild(measurementCancel);
+  this.addCSSClass_(this.weightKg_, 'babyStatsWeightKg');
+  weight.appendChild(this.weightKg_);
+  this.weightKg_.addEventListener('input', function() {
+    var lb = (parseFloat(this.weightKg_.value) || 0) * 2.2046;
+    this.weightLb_.value = Math.floor(lb);
+    this.weightOz_.value = Math.round(((lb - Math.floor(lb)) * 16) * 10) / 10;
+  }.bind(this));
+
+  weight.appendChild(document.createTextNode('kg = '));
+
+  var LbOzToKg = function() {
+    var lb = (
+        (parseFloat(this.weightLb_.value) || 0)+
+        ((parseFloat(this.weightOz_.value) || 0) / 16));
+    this.weightKg_.value = Math.round((lb / 2.2046) * 10) / 10;
+  }.bind(this);
+
+  this.weightLb_ = document.createElement('input');
+  this.addCSSClass_(this.weightLb_, 'babyStatsWeightLb');
+  weight.appendChild(this.weightLb_);
+  this.weightLb_.addEventListener('input', LbOzToKg);
+
+  weight.appendChild(document.createTextNode('lb '));
+
+  this.weightOz_ = document.createElement('input');
+  this.addCSSClass_(this.weightOz_, 'babyStatsWeightOz');
+  weight.appendChild(this.weightOz_);
+  this.weightOz_.addEventListener('input', LbOzToKg);
+
+  weight.appendChild(document.createTextNode('oz'));
+
+  var temp = document.createElement('babyStatsTemp');
+  this.measurementPrompt_.appendChild(temp);
+
+  this.tempC_ = document.createElement('input');
+  this.addCSSClass_(this.tempC_, 'babyStatsTempC');
+  temp.appendChild(this.tempC_);
+  this.tempC_.addEventListener('input', function() {
+    this.tempF_.value =
+        Math.round(((parseFloat(this.tempC_.value) || 0) * 1.8 + 32) * 10) / 10;
+  }.bind(this));
+
+  temp.appendChild(document.createTextNode('°C = '));
+
+  this.tempF_ = document.createElement('input');
+  this.addCSSClass_(this.tempF_, 'babyStatsTempF');
+  temp.appendChild(this.tempF_);
+  this.tempF_.addEventListener('input', function() {
+    this.tempC_.value =
+        Math.round((((parseFloat(this.tempF_.value) || 0) - 32) / 1.8) * 10) / 10;
+  }.bind(this));
+
+  temp.appendChild(document.createTextNode('°F'));
 
   var measurementSubmit = document.createElement('babyStatsActionButton');
   measurementSubmit.textContent = 'Submit';
@@ -558,6 +610,12 @@ BabyStats.prototype.buildLayout_ = function() {
       'click', this.submitMeasurements_.bind(this));
   this.measurementPrompt_.appendChild(measurementSubmit);
 
+  var measurementCancel = document.createElement('babyStatsActionButton');
+  measurementCancel.textContent = 'Cancel';
+  measurementCancel.addEventListener(
+      'click', this.cancelMeasurementPrompt_.bind(this));
+  this.measurementPrompt_.appendChild(measurementCancel);
+
   this.gridOverlay_ = document.createElement('babyStatsGridOverlay');
   front.appendChild(this.gridOverlay_);
 
@@ -914,6 +972,11 @@ BabyStats.prototype.updateDisplayDate_ = function(message) {
  * @private
  */
 BabyStats.prototype.promptForMeasurements_ = function() {
+  this.weightKg_.value = null;
+  this.weightLb_.value = null;
+  this.weightOz_.value = null;
+  this.tempC_.value = null;
+  this.tempF_.value = null;
   this.measurementPrompt_.style.visibility = 'visible';
   this.measurementPrompt_.style.opacity = 1.0;
 };
@@ -932,6 +995,17 @@ BabyStats.prototype.cancelMeasurementPrompt_ = function() {
  * @private
  */
 BabyStats.prototype.submitMeasurements_ = function() {
+  var msg = {
+    type: 'measurements',
+    sender_name: this.yourName_.value,
+  };
+  if (parseFloat(this.weightKg_.value) > 0) {
+    msg.weight_kg = parseFloat(this.weightKg_.value);
+  }
+  if (parseFloat(this.tempC_.value) > 0) {
+    msg.temp_c = parseFloat(this.tempC_.value);
+  }
+  this.chat_.sendMessage(msg);
   this.measurementPrompt_.style.visibility = 'hidden';
   this.measurementPrompt_.style.opacity = 0.0;
 };