From 9a5ea2853a09eb3a799b9d82a22bbed0a468515e Mon Sep 17 00:00:00 2001
From: RoyN <nevoroy@gmail.com>
Date: Sun, 22 Apr 2018 15:27:42 +0300
Subject: [PATCH] m1.lesson9.weather-app-with-leaflet.Roy

---
 .../index.html                                | 91 ++++++++++++++++++-
 .../styles.css                                | 38 ++++++++
 2 files changed, 128 insertions(+), 1 deletion(-)
 create mode 100644 m1.lesson9.weather-app-with-leaflet/styles.css
diff --git a/m1.lesson9.weather-app-with-leaflet/index.html b/m1.lesson9.weather-app-with-leaflet/index.html
index 566549b..fd69569 100644
--- a/m1.lesson9.weather-app-with-leaflet/index.html
+++ b/m1.lesson9.weather-app-with-leaflet/index.html
@@ -2,9 +2,98 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>Title</title>
+    <title>Weather api sample</title>
+    <link rel="stylesheet" type="text/css" href="styles.css">    
+    <script src='https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.min.js'></script>
+    <script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.js'></script>
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"
+          integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
+          crossorigin=""/>
+    <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"
+            integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
+            crossorigin=""></script>
 </head>
 <body>
 
+    <section>  
+        <h>Select city: </h>      
+        <select id="actualSelect">
+            <option></option>
+            <option>London</option>
+            <option>Boston</option>
+            <option>Palo alto</option>
+            <option>New york</option>
+        </select>
+    </section>
+    <section>
+        <table id="weather-table">            
+            <thead>
+            <tr>
+                <th>City</th>
+                <th>Temp</th>
+                <th>Wind</th>
+                <th>Humidity</th>
+            </tr>
+            </thead>
+            <tbody>
+            <tr>
+                <td>                    
+                </td>
+            </tr>
+            </tbody>
+        </table>
+    </section>
+    <section>
+        <div id="mapid"></div>        
+    </section>
+    
 </body>
+<script id='table-row-template' type='text/x-handlebars-template'>
+    <tr>
+        <td>{{name}}</td>
+        <td>{{temp}}</td>
+        <td>{{speed}}</td>
+        <td>{{humidity}}</td>
+    </tr>
+</script>
+<script>
+    const weatherKey = '&appid=32d4cbca031cf3240f3c22d40d6b88e5';
+    const mapAccessToken = 'pk.eyJ1IjoidGhlYmlnciIsImEiOiJjamc3bzBnZGoyeDFjMnltb2c2ZzF6cDAzIn0.yRd_Rurd8tsHa8Za9mYVbg';
+    const tBodyTmpl = Handlebars.compile(document.getElementById('table-row-template').innerHTML);
+    let mymap = L.map('mapid').setView([51.505, -0.09], 13);
+    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
+        attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
+        maxZoom: 18,
+        id: 'mapbox.streets',
+        accessToken: mapAccessToken
+    }).addTo(mymap);        
+    let weatherUrl = 'http://api.openweathermap.org/data/2.5/weather?q=';
+    let unitSnippet = '&units=metric';
+    let weatherData = [];
+    
+    function renderTable(data) {      
+        const tmpData = {
+            name: data.name,
+            temp: data.main.temp ,
+            speed:data.wind.speed,
+            humidity: data.main.humidity
+        }
+        let currentCityLat = data.coord.lat;
+        let currentCityLon = data.coord.lon;
+        mymap.setView([currentCityLat,currentCityLon],14);
+        document.querySelector('#weather-table tbody').innerHTML = tBodyTmpl(tmpData);
+        setinfo(data);
+    }
+    
+    document.getElementById('actualSelect').onchange = function() {
+        fetch(weatherUrl + document.getElementById('actualSelect').value+ unitSnippet + weatherKey)
+            .then(res=>res.json())
+            .then(json => renderTable(json))
+    };
+    
+    //for debugging purposes.
+    function setinfo(data) {
+        console.log(data)
+    }
+</script>
 </html>
\ No newline at end of file
diff --git a/m1.lesson9.weather-app-with-leaflet/styles.css b/m1.lesson9.weather-app-with-leaflet/styles.css
new file mode 100644
index 0000000..e121ccf
--- /dev/null
+++ b/m1.lesson9.weather-app-with-leaflet/styles.css
@@ -0,0 +1,38 @@
+body {
+    padding: 20px;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
+}
+
+section {
+    margin: 20px 0;
+}
+
+#mapid {
+     height: 400px;
+     width: 400px;
+    }
+
+h1 {
+    color: rgb(8, 70, 88);
+    text-shadow: 0 2px 3px #555;
+}
+
+table {
+    border: 1px royalblue solid;
+    border-collapse: collapse;
+}
+
+table caption {
+    color: #222;
+    text-shadow: 0 2px 3px #555;
+    padding: 10px;
+    font-size: 20px; 
+}
+
+table thead tr {
+    border-bottom: 1px royalblue solid;
+}
+
+table td {
+    padding: 5px;
+}
\ No newline at end of file
