added boolean parameters to toogle display of detailed information

dotch · May 2, 2014 · 5565e98 · 5565e98
1 parent 8a850c6
commit 5565e98
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 38 deletions.
diff --git a/README.md b/README.md
@@ -42,9 +42,14 @@ Or [download as ZIP](https://github.com/dotch/current-weather/archive/master.zip
 
 Attribute     | Options     | Default      | Description
 ---           | ---         | ---          | ---
-`lat`         | *double*    | ``           | The latitude of the desired location 
-`long`        | *double*    | ``           | The longitude of the desired location 
-`units`       | *string*    | `metric'     | 'metric' or 'imperial' units
+`lat`         | *double*    | ``           | The latitude of the desired location
+`long`        | *double*    | ``           | The longitude of the desired location
+`imperial`    | *boolean*   | `false'      | use imperial instead of metric units
+`wind`        | *boolean*   | `false'      | show wind information
+`suntimes`    | *boolean*   | `false'      | show sunrise und sunset times
+`hump`        | *boolean*   | `false'      | show humidity and pressure
+
+
 
 ## Events
 

diff --git a/index.html b/index.html
@@ -22,7 +22,7 @@
         max-width: 320px;
         margin: auto;
         color: white;
-        font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
+        font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
         font-weight: 300;
       }
       .weather {
@@ -51,9 +51,9 @@
     </style>
 </head>
 <body>
-    
+
     <!-- Using Custom Elements -->
-    <current-weather lat="37.3860500" lon="-122.0838500" units="imperial"></current-weather>
+    <current-weather lat="37.3860500" lon="-122.0838500" imperial wind hump suntimes></current-weather>
 
 </body>
 </html>
diff --git a/src/current-weather.html b/src/current-weather.html
@@ -2,7 +2,7 @@
 <link rel="import" href="../bower_components/core-ajax/core-ajax.html">
 <link rel="stylesheet" href="../bower_components/weather-icons/css/weather-icons.css">
 
-<polymer-element name="current-weather"  attributes="lat lon units">
+<polymer-element name="current-weather"  attributes="lat lon imperial wind suntimes hump">
   <template>
     <style>
 
@@ -12,16 +12,16 @@
       params='{
         "lat": {{lat}},
         "lon": {{lon}},
-        "units": "{{units}}" 
+        "units": "{{units}}"
       }'
       handleAs="json"
-    > 
+    >
     </core-ajax>
     <template if="{{data}}">
       <div class="weather">
         <div class="info">
           {{data.name}}
-        </div>   
+        </div>
         <div class="weather-icon">
           <i class="{{data.icon}}"></i>
         </div>
@@ -31,42 +31,52 @@
           </div>
           <div class="minmax">
             <div class="min">
-              <i class="wi-down"></i> {{data.minTemp}}° 
+              <i class="wi-down"></i> {{data.minTemp}}°
             </div>
             <div class="max">
               <i class="wi-up"></i> {{data.maxTemp}}°
-            </div> 
-          </div>
-        </div>
-        <div class="wind">
-          <div class="speed">
-            <i class="wi-strong-wind"></i> {{data.windSpeed}} {{speedUnit}}
-          </div>
-          <div class="direction">
-            <i class="wi-wind-north-east"></i> {{data.windDirection}}
+            </div>
           </div>
         </div>
-        <div class="sun">
-          <div class="sunrise">
-            <i class="wi-sunrise"></i> {{data.sunrise}}
-          </div>
-          <div class="sunset">
-            <i class="wi-sunset"></i> {{data.sunset}} 
+        <template if="{{wind}}">
+          <div class="wind">
+            <div class="speed">
+              <i class="wi-strong-wind"></i> {{data.windSpeed}} {{speedUnit}}
+            </div>
+            <div class="direction">
+              <i class="wi-wind-north-east"></i> {{data.windDirection}}
+            </div>
           </div>
-        </div>
-        <div class="preshum">
-          <div class="humidity">
-            <i class="wi-sprinkles"></i> {{data.humidity}}%
+        </template>
+        <template if="{{suntimes}}">
+          <div class="sun">
+            <div class="sunrise">
+              <i class="wi-sunrise"></i> {{data.sunrise}}
+            </div>
+            <div class="sunset">
+              <i class="wi-sunset"></i> {{data.sunset}}
+            </div>
           </div>
-          <div class="pressure">
-            <i class="wi-thermometer-internal"></i> {{data.pressure}} hPa
+        </template>
+        <template if="{{hump}}">
+          <div class="hump">
+            <div class="humidity">
+              <i class="wi-sprinkles"></i> {{data.humidity}}%
+            </div>
+            <div class="pressure">
+              <i class="wi-thermometer-internal"></i> {{data.pressure}} hPa
+            </div>
           </div>
-        </div>
-      </div>      
+        </template>
+      </div>
     </template>
   </template>
   <script>
     Polymer('current-weather', {
+      imperial: false,
+      wind: false,
+      suntimes: false,
+      hump: false,
       units: "metric",
       temperatureUnit:  "C",
       speedUnit: "km/h",
@@ -93,8 +103,9 @@
       windDirections: ["N","NE","E","SE","S","SW","W","NW"],
       data: null,
       ready: function() {
-        console.log(this.data);
-        if (this.units === "imperial") {
+
+        if (this.imperial) {
+          this.units = "imperial"
           this.temperatureUnit = "F";
           this.speedUnit = "mp/h";
         };
@@ -115,9 +126,9 @@
             humidity: res.main.humidity,
             pressure: res.main.pressure
           }
-          this.fire('current-weather-load', {weather: data});
+          this.fire('current-weather-load', {weather: this.data});
         }.bind(this));
       }
     });
   </script>
-</polymer-element>
+</polymer-element>