Settings change support, unit support

www/css/app.css

@@ -74,3 +74,12 @@ h1,h2,h3,h4,h5 {
 #settings-modal {
   background-color: rgba(0,0,0,0.8);
 }
+
+#settings-modal .item {
+  background-color: rgba(0,0,0,0.9);
+  border: none;
+  color: #fff;
+}
+#settings-modal .input-label {
+  color: #fff;
+}

www/css/ionic.css

@@ -5079,6 +5079,20 @@ a.button {
   -ms-flex: 1;
   flex: 1;
   width: 100%; }
+  .button-bar.button-bar-inline {
+    display: block;
+    width: auto;
+    *zoom: 1; }
+    .button-bar.button-bar-inline:before, .button-bar.button-bar-inline:after {
+      display: table;
+      content: "";
+      line-height: 0; }
+    .button-bar.button-bar-inline:after {
+      clear: both; }
+    .button-bar.button-bar-inline > .button {
+      width: auto;
+      display: inline-block;
+      float: left; }
 
 .button-bar > .button {
   -webkit-box-flex: 1;

www/index.html

@@ -36,7 +36,6 @@ <h1 class="title">
       </header>
       <content padding="true">
         <current-weather></current-weather>
-        </small-weather>
         <weather-box title="Forecast" style="height: 400px">
         </weather-box>
         <weather-box title="Details" style="height: 400px">
@@ -46,7 +45,7 @@ <h1 class="title">
 
 
     <script id="settings.html" type="text/ng-template">
-      <div id="settings-modal" class="modal">
+      <div id="settings-modal" class="modal" ng-controller="SettingsCtrl">
         <header class="bar bar-header bar-dark">
           <h1 class="title">Settings</h1>
           <button class="button button-clear button-positive" ng-click="closeSettings()">Close</button>
@@ -56,18 +55,12 @@ <h1 class="title">Settings</h1>
             <div class="list">
               <label class="item item-input">
                 <span class="input-label">Units</span>
-                <div class="button-bar">
-                </div>
-              </label>
-              <label class="item item-input">
-                <span class="input-label">Last Name</span>
-                <input type="text" placeholder="">
-              </label>
-              <label class="item item-input">
-                <span class="input-label">Email</span>
-                <input type="text" placeholder="">
+
+                <radio-buttons ng-model="settings.tempUnits">
+                  <button class="button button-dark button-radio" ng-value="'f'">&deg;F</button>
+                  <button class="button button-dark button-radio" ng-value="'c'">&deg;C</button>
+                </radio-buttons>
               </label>
-              <button class="button button-full button-positive" ng-click="closeModal()">Create</button>
             </div>
           </div>
         </content>

www/js/app.js

@@ -21,15 +21,10 @@ angular.module('ionic.weather', ['ionic', 'ionic.weather.services', 'ionic.weath
       $scope.settingsModal = modal;
       $scope.settingsModal.show();
     }, {
-      scope: $scope,
       // The animation we want to use for the modal entrance
       animation: 'slide-in-up'
     });
   };
-  $scope.closeSettings = function() {
-    $scope.settingsModal && $scope.settingsModal.hide();
-  };
-
 
   $scope.getActiveBackgroundImage = function() {
     if($scope.activeBgImage) {
@@ -83,7 +78,6 @@ angular.module('ionic.weather', ['ionic', 'ionic.weather.services', 'ionic.weath
   };
 
   Geo.getLocation().then(function(position) {
-    console.log('GOT LAT', position);
     var lat = position.coords.latitude;
     var lng = position.coords.longitude;
 
@@ -93,4 +87,19 @@ angular.module('ionic.weather', ['ionic', 'ionic.weather.services', 'ionic.weath
     alert('Unable to get current location: ' + error);
   });
 
+})
+
+.controller('SettingsCtrl', function($scope, Settings) {
+  $scope.settings = Settings.getSettings();
+
+  // Watch deeply for settings changes, and save them
+  // if necessary
+  $scope.$watch('settings', function(v) {
+    Settings.save();
+  }, true);
+
+  $scope.closeSettings = function() {
+    $scope.modal.hide();
+  };
+
 });

www/js/directives.js

@@ -52,15 +52,60 @@ angular.module('ionic.weather.directives', [])
   }
  })
 
-.directive('currentWeather', function($timeout) {
+.directive('currentWeather', function($timeout, $rootScope, Settings) {
   return {
     restrict: 'E',
     replace: true,
     templateUrl: 'templates/current-weather.html',
+    scope: true,
     compile: function(element, attr) {
-      console.log('SMALL COMPILED');
       return function($scope, $element, $attr) {
-      console.log('SMALL LINKED');
+
+        $rootScope.$on('settings.changed', function(settings) {
+          var units = Settings.get('tempUnits');
+
+          if($scope.forecast) {
+
+            var forecast = $scope.forecast;
+            var current = $scope.current;
+
+            if(units == 'f') {
+              $scope.highTemp = forecast.forecastday[0].high.fahrenheit;
+              $scope.lowTemp = forecast.forecastday[0].low.fahrenheit;
+              $scope.currentTemp = Math.floor(current.temp_f);
+            } else {
+              $scope.highTemp = forecast.forecastday[0].high.celsius;
+              $scope.lowTemp = forecast.forecastday[0].low.celsius;
+              $scope.currentTemp = Math.floor(current.temp_c);
+            }
+          }
+        });
+
+        $scope.$watch('current', function(current) {
+          var units = Settings.get('tempUnits');
+
+          if(current) {
+            if(units == 'f') {
+              $scope.currentTemp = Math.floor(current.temp_f);
+            } else {
+              $scope.currentTemp = Math.floor(current.temp_c);
+            }
+          }
+        });
+
+        $scope.$watch('forecast', function(forecast) {
+          var units = Settings.get('tempUnits');
+
+          if(forecast) {
+            if(units == 'f') {
+              $scope.highTemp = forecast.forecastday[0].high.fahrenheit;
+              $scope.lowTemp = forecast.forecastday[0].low.fahrenheit;
+            } else {
+              $scope.highTemp = forecast.forecastday[0].high.celsius;
+              $scope.lowTemp = forecast.forecastday[0].low.celsius;
+            }
+          }
+        });
 
       // Delay so we are in the DOM and can calculate sizes
       $timeout(function() {

www/js/ionic-angular.js

@@ -1475,6 +1475,87 @@ angular.module('ionic.ui.radio', [])
       }
     }
   };
+})
+
+// The radio button is a radio powered element with only
+// one possible selection in a set of options.
+.directive('radioButtons', function() {
+  return {
+    restrict: 'E',
+    replace: true,
+    require: '?ngModel',
+    scope: {
+      value: '@'
+    },
+    transclude: true,
+    template: '<div class="button-bar button-bar-inline" ng-transclude></div>',
+
+    controller: ['$scope', '$element', function($scope, $element) {
+
+      this.select = function(element) {
+        var c, children = $element.children();
+        for(var i = 0; i < children.length; i++) {
+          c = children[i];
+          if(c != element[0]) {
+            c.classList.remove('active');
+          }
+        }
+      };
+
+    }],
+
+    link: function($scope, $element, $attr, ngModel) {
+      var radio;
+
+      if(ngModel) {
+        //$element.bind('tap', tapHandler);
+
+        ngModel.$render = function() {
+          var children = $element.children();
+          for(var i = 0; i < children.length; i++) {
+            children[i].classList.remove('active');
+          }
+          $scope.$parent.$broadcast('radioButton.select', ngModel.$viewValue);
+        };
+      }
+    }
+  };
+})
+
+.directive('buttonRadio', function() {
+  return {
+    restrict: 'CA',
+    require: ['?^ngModel', '?^radioButtons'],
+    link: function($scope, $element, $attr, ctrls) {
+      var ngModel = ctrls[0];
+      var radioButtons = ctrls[1];
+      if(!ngModel || !radioButtons) { return; }
+
+      var setIt = function() {
+        $element.addClass('active');
+        ngModel.$setViewValue($scope.$eval($attr.ngValue));
+
+        radioButtons.select($element);
+      };
+
+      $scope.tapHandler = function(e) {
+        setIt();
+        e.alreadyHandled = true;
+      };
+
+      var clickHandler = function(e) {
+        setIt();
+      };
+
+      $scope.$on('radioButton.select', function(e, val) {
+        if(val == $scope.$eval($attr.ngValue)) {
+          $element.addClass('active');
+        };
+      });
+
+      $element.bind('click', clickHandler);
+    }
+  }
 });
 
 })(window.ionic);

www/js/services.js

@@ -1,11 +1,50 @@
 angular.module('ionic.weather.services', ['ngResource'])
 
-.factory('Settings', function() {
-  return {
+.constant('DEFAULT_SETTINGS', {
+  'tempUnits': 'f'
+})
+
+.factory('Settings', function($rootScope, DEFAULT_SETTINGS) {
+  var _settings = {};
+  try {
+    _settings = JSON.parse(window.localStorage['settings']);
+  } catch(e) {
+  }
+
+  // Just in case we have new settings that need to be saved
+  _settings = angular.extend({}, DEFAULT_SETTINGS, _settings);
+
+  if(!_settings) {
+    window.localStorage['settings'] = JSON.stringify(_settings);
+  }
+
+  var obj = {
+    getSettings: function() {
+      return _settings;
+    },
+    // Save the settings to localStorage
+    save: function() {
+      window.localStorage['settings'] = JSON.stringify(_settings);
+      $rootScope.$broadcast('settings.changed', _settings);
+    },
+    // Get a settings val
+    get: function(k) {
+      return _settings[k];
+    },
+    // Set a settings val
+    set: function(k, v) {
+      _settings[k] = v;
+      this.save();
+    },
+
     getTempUnits: function() {
-      return 'f';
+      return _settings['tempUnits'];
     }
   }
+
+  // Save the settings to be safe
+  obj.save();
+  return obj;
 })
 
 .factory('Geo', function($q) {

www/templates/current-weather.html

@@ -1,8 +1,8 @@
 <div id="current-weather">
   <h5><current-weather-icon id="current-icon"></current-weather-icon> {{current.weather}}</h5>
   <h5>
-    <span id="temp-hi"><i class="icon ion-arrow-up-c"></i> {{forecast.forecastday[0].high.fahrenheit}}&deg;</span>
-    <span id="temp-lo"><i class="icon ion-arrow-down-c"></i> {{forecast.forecastday[0].low.fahrenheit}}&deg;</span>
+    <span id="temp-hi"><i class="icon ion-arrow-up-c"></i> <span ng-bind="highTemp"></span>&deg;</span>
+    <span id="temp-lo"><i class="icon ion-arrow-down-c"></i> <span ng-bind="lowTemp"></span>&deg;</span>
   </h5>
-  <h1 class="current-temp">{{current.temp_f | int}}&deg;</h1>
+  <h1 class="current-temp"><span ng-bind="currentTemp"></span>&deg;</h1>
 </div>