From ff8622f1853e20a1ca2fa9f6d2a90deb056f76d8 Mon Sep 17 00:00:00 2001
From: deepjyoti30 <deep.barman30@gmail.com>
Date: Fri, 15 May 2020 22:52:13 +0530
Subject: [PATCH] Added weather

---
 config.json    |  7 +++++-
 css/main.css   |  5 ++++-
 index.html     | 35 ++---------------------------
 js/main.js     | 61 ++++++++++++++++++++++++++++++++++++++++++++++----
 scss/main.scss | 11 +++++++--
 5 files changed, 78 insertions(+), 41 deletions(-)
diff --git a/config.json b/config.json
index fbc1019..cb9ddbc 100644
--- a/config.json
+++ b/config.json
@@ -34,5 +34,10 @@
   "disableMessage": false,
   "disableDate": false,
   "disableSearchBar": false,
-  "disable24Hour": false
+  "disable24Hour": false,
+  "disableWeather": true,
+  "weatherConf": {
+    "location": "Pune India",
+    "unit": "fah"
+  }
 }
diff --git a/css/main.css b/css/main.css
index d0466b5..d7146ea 100644
--- a/css/main.css
+++ b/css/main.css
@@ -20,8 +20,11 @@ body {
 .main {
   width: 100%;
   text-align: center; }
-  .main #date-text {
+  .main #date h2 {
     padding-top: 15px;
+    display: inline-block;
+    vertical-align: top; }
+  .main #date-text, .main #weather-text {
     color: #d9d9d9; }
   .main #message-text {
     font-size: 23px; }
diff --git a/index.html b/index.html
index 8990e9a..55ef41b 100644
--- a/index.html
+++ b/index.html
@@ -8,45 +8,14 @@
     <link rel="stylesheet" href="css/main.css">
 </head>
 <body>
-    <div id="settings" class="settings-modal">
-        <div class="modal-content">
-            <span class="close">&times;</span>
-            <h2>Settings</h2>
-            <div class="settings-container">
-                <div class="row">
-                    <div class="col">
-                        Username <input type="text" id="username">
-                    </div>
-                    <div class="col">
-                        Search Engine
-                        <select id="search-engine">
-                            <option value="DuckDuckGo">DuckDuckGo</option>
-                            <option value="Google">Google</option>
-                            <option value="Bing">Bing</option>
-                            <option value="Yahoo">Yahoo</option>
-                        </select>
-                    </div>
-                </div>
-                <div class="row">
-                    <div class="col">
-                        <b>Hide</b> Welcome Message <input type="checkbox" id="disabel-message">
-                    </div>
-                    <div class="col">
-                        <b>Hide</b> date and time <input type="checkbox" id="disabel-date">
-                    </div>
-                    <div class="col">
-                        <b>Hide</b> Search Bar <input type="checkbox" id="disabel-bar">
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
     <div id="main" class="main">
         <div id="message">
             <h1 id="message-text">Good Morning!</h1>
         </div>
         <div id="date">
             <h2 id="date-text"></h2>
+            <h2 id="line">|</h2>
+            <h2 id="weather-text">Fetching Weather...</h2>
         </div>
         <div id="search-bar">
             <input id="search-bar-input"></input>
diff --git a/js/main.js b/js/main.js
index d64f870..aa3aedf 100644
--- a/js/main.js
+++ b/js/main.js
@@ -7,10 +7,14 @@ searchBarId = "search-bar-input"
 messageDivId = "message"
 dateDivId = "date"
 dateId = "date-text"
+weatherId = "weather-text"
+lineId = "line"
 messageId = "message-text"
 otherContentId = "other-content"
-userName = "Deepjyoti"
+userName = ""
 disable24Hour = false;
+appId = "fd2c04ed7f9802656bd2cc23bddc7ad9"
+apiUrl = "http://api.openweathermap.org/data/2.5/weather"
 bgClassContainer = [
     "media",
     "work",
@@ -28,6 +32,9 @@ searchEngines = {
     "Bing": "https://www.bing.com/search?q=",
     "Yahoo": "https://search.yahoo.com/search?p="
 }
+validWeatherUnit = [
+    "fah", "cel"
+]
 
 function initBody() {
     /**
@@ -115,6 +122,43 @@ function updateTimeHook() {
     }, 30 * 1000)
 }
 
+function getFahrenheit(inCelcius) {
+    return (inCelcius * 9 / 5) + 32
+}
+
+function indexUppercase(unformatted) {
+    return unformatted.split(" ").map(w => {
+        return w[0].toUpperCase() + w.substring(1)
+    }).join(" ")
+}
+
+function updateWeather(weatherConfig) {
+    /**
+     * Get the weather using the location passed by the user using
+     * the config and update it in a formatted way according to
+     * the unit.
+     */
+    userLocation = weatherConfig["location"].replace(/\ /g, ",")
+    passedUnit = weatherConfig["unit"]
+    unit = validWeatherUnit.includes(passedUnit.substring(0, 3)) ?
+            passedUnit : "cel"
+
+    fetchUrl = apiUrl + `?q=${userLocation}&appid=${appId}&units=metric`
+
+    fetch(fetchUrl)
+        .then(response => {return response.json()})
+        .then(jsonData => {
+            temp = jsonData["main"]["temp"]
+            weatherType = jsonData["weather"][0]["main"]
+            console.log(temp, weatherType)
+
+            temp = !unit.includes("cel") ?
+                        getFahrenheit(temp) + "&deg;F" : temp + "&deg;C"
+            weatherText = temp + ", " + indexUppercase(weatherType)
+            document.getElementById(weatherId).innerHTML = weatherText
+        })
+}
+
 function inRange(number, min, max) {
     return (number >= min && number <= max)
 }
@@ -144,16 +188,25 @@ function parseAndCreate(jsonData) {
     // Check if welcome message is supposed to be disabled
     if (jsonData["disableMessage"])
         document.getElementById(messageDivId).style.display = "none"
-    if (jsonData["disableDate"])
-        document.getElementById(dateDivId).style.display = "none"
+    if (jsonData["disableDate"]) {
+        // Hide the date and the line
+        document.getElementById(dateId).style.display = "none"
+        document.getElementById(lineId).style.display = "none"
+    }
     else
         updateTimeHook()
+    if (jsonData["disableWeather"]){
+        // Hide the date and the line
+        document.getElementById(weatherId).style.display = "none"
+        document.getElementById(lineId).style.display = "none"
+    }
+    else
+        updateWeather(jsonData["weatherConf"])
     if (jsonData["disableSearchBar"])
         document.getElementById(searchBarDivId).style.display = "none"
     else
         initSearchBar(jsonData)
 
-
     sqrs = jsonData["squares"]
 
     sqrs.forEach((element, index) => {
diff --git a/scss/main.scss b/scss/main.scss
index d2720fd..2a0b356 100644
--- a/scss/main.scss
+++ b/scss/main.scss
@@ -40,8 +40,15 @@ body {
     width: 100%;
     text-align: center;
 
-    #date-text {
-        padding-top: 15px;
+    #date {
+        h2 {
+            padding-top: 15px;
+            display: inline-block;
+            vertical-align: top;
+        }
+    }
+
+    #date-text, #weather-text {
         color: darken($foreground, 15);
     }
 
