From ddc7703bba0686ee52550cd9c725a88e71c77c10 Mon Sep 17 00:00:00 2001
From: Ian Gulliver <ian@flamingcow.tv>
Date: Sun, 3 Jan 2016 23:55:46 -0800
Subject: [PATCH] Add weight/temp reporting.

---
 static/babystats.css | 26 ++++++++++++--
 static/babystats.js  | 84 +++++++++++++++++++++++++++++++++++++++++---
 2 files changed, 103 insertions(+), 7 deletions(-)

diff --git a/static/babystats.css b/static/babystats.css
index e7b38ce..c010746 100644
--- a/static/babystats.css
+++ b/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;
diff --git a/static/babystats.js b/static/babystats.js
index 838d333..494ce29 100644
--- a/static/babystats.js
+++ b/static/babystats.js
@@ -546,11 +546,63 @@ BabyStats.prototype.buildLayout_ = function() {
       document.createElement('babyStatsMeasurementPrompt');
   front.appendChild(this.measurementPrompt_);
 
-  var measurementCancel = document.createElement('babyStatsActionButton');
-  measurementCancel.textContent = 'Cancel';
-  measurementCancel.addEventListener(
-      'click', this.cancelMeasurementPrompt_.bind(this));
-  this.measurementPrompt_.appendChild(measurementCancel);
+  var weight = document.createElement('babyStatsWeight');
+  this.measurementPrompt_.appendChild(weight);
+
+  this.weightKg_ = document.createElement('input');
+  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;
 };