precipitation

+ precipitation in mm + styling to fit new data
arwebSE · Oct 16, 2022 · fa1cb25 · fa1cb25
1 parent d81df63
commit fa1cb25
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 15 deletions.
diff --git a/packages/preload/index.js b/packages/preload/index.js
@@ -160,6 +160,8 @@ domReady().then(() => {
         const sunrise = document.getElementById("sunrise");
         const sunset = document.getElementById("sunset");
         const tempFormat = document.getElementsByClassName("tempFormat");
+        const prec = document.getElementById("prec");
+        const pop = document.getElementById("pop");
 
         const forecast = [];
         for (let index = 0; index < days; index++) {
@@ -185,6 +187,8 @@ domReady().then(() => {
             sunset,
             forecast,
             tempFormat,
+            prec,
+            pop,
         };
     };
 
@@ -214,6 +218,9 @@ domReady().then(() => {
         el.updatedAt.innerHTML = getTime(updatedAt);
         el.sunrise.innerHTML = getTime(sunrise);
         el.sunset.innerHTML = getTime(sunset);
+        el.prec.innerHTML = res.daily[0].rain;
+        el.pop.innerHTML = res.daily[0].pop * 100;
+        console.log("prec", res.current.rain, "pop", res);
         const tempUnit = getSettings().freedom ? "F" : "C";
         const unitElements = document.getElementsByClassName("tempFormat");
         [].slice.call(unitElements).forEach(function (el) {
@@ -325,7 +332,13 @@ domReady().then(() => {
         const warningEl = document.getElementById("warning");
         timeConsole("Calling API for " + city + " with url " + url);
         await fetch(url)
-            .then((response) => response.json())
+            .then((res) => {
+                if (!res.ok)
+                    return res.text().then((text) => {
+                        throw new Error(text);
+                    });
+                else return res.json();
+            })
             .then((result) => {
                 setData(getElements(days), result);
                 timeConsole("Got data", result);

diff --git a/packages/renderer/index.html b/packages/renderer/index.html
@@ -57,36 +57,36 @@
                                 <h3 id="condition">Clear</h3>
                                 <h1><span id="temp"></span>&deg;<span class="tempFormat">C</span></h1>
                             </div>
-                            <div class="vertical-center">
-                                <h6>
-                                    <i class="fa-solid fa-arrow-up"></i> <span id="cMax">?</span>&deg;<span
+                            <div id="hilow" class="vertical-center">
+                                <h6 class="high">
+                                    <i class="fa-solid fa-arrow-up fa-xs"></i> <span id="cMax">?</span>&deg;<span
                                         class="tempFormat"
                                         >C</span
                                     >
                                 </h6>
-                                <h6>
-                                    <i class="fa-solid fa-arrow-down"></i> <span id="cMin">?</span>&deg;<span
+                                <h6 class="low">
+                                    <i class="fa-solid fa-arrow-down fa-xs"></i> <span id="cMin">?</span>&deg;<span
                                         class="tempFormat"
                                         >C</span
                                     >
                                 </h6>
                             </div>
                         </div>
                         <div class="row">
-                            <h5 id="city" class="center read-the-docs">City</h5>
+                            <h5 id="city" class="center grey">City</h5>
                         </div>
                     </div>
                     <div class="col" id="details">
                         <div class="row">
-                            <h5 class="left read-the-docs">Feels like</h5>
+                            <h5 class="left grey">Feels like</h5>
                             <h5 class="right"><span id="feel"></span>&deg;<span class="tempFormat">C</span></h5>
                         </div>
                         <div class="row">
-                            <h5 class="left read-the-docs">Humidity</h5>
+                            <h5 class="left grey">Humidity</h5>
                             <h5 class="right"><span id="humidity"></span>%</h5>
                         </div>
                         <div class="row">
-                            <h5 class="left read-the-docs">Sunrise</h5>
+                            <h5 class="left grey">Sunrise</h5>
                             <div>
                                 <div class="icons right">
                                     <i class="fa-solid fa-sun fa-2xs"></i>
@@ -96,7 +96,7 @@ <h5 id="sunrise" class="right">?</h5>
                             </div>
                         </div>
                         <div class="row">
-                            <h5 class="left read-the-docs">Sunset</h5>
+                            <h5 class="left grey">Sunset</h5>
                             <div>
                                 <div class="icons right">
                                     <i class="fa-solid fa-sun fa-2xs"></i>
@@ -105,6 +105,16 @@ <h5 class="left read-the-docs">Sunset</h5>
                                 <h5 id="sunset" class="right">?</h5>
                             </div>
                         </div>
+                        <div class="row">
+                            <h5 class="left grey">Precipitation</h5>
+                            <div class="precipitation">
+                                <div class="icons right">
+                                    <i class="fa-solid fa-umbrella fa-xs"></i>
+                                </div>
+                                <h5 class="right"><span id="prec">1</span>mm</h5>
+                                <h6 class="right">(<span id="pop">0</span>%)</h6>
+                            </div>
+                        </div>
                     </div>
                 </div>
                 <div id="row2" class="row">

diff --git a/packages/renderer/style.css b/packages/renderer/style.css
@@ -41,7 +41,7 @@ h5 {
 }
 
 h6 {
-    line-height: 1.4;
+    line-height: 1;
     font-weight: 400;
 }
 
@@ -155,7 +155,7 @@ a:hover {
     padding: 2em;
 }
 
-.read-the-docs {
+.grey {
     color: #888;
 }
 
@@ -240,7 +240,8 @@ a:hover {
 }
 
 #current {
-    width: 65%;
+    width: 60%;
+    padding: 0.3em 0.3em;
 }
 #current img {
     height: 70px;
@@ -254,9 +255,10 @@ a:hover {
 }
 
 #details {
-    width: 34%;
+    width: 50%;
     padding: 0.3em 0.3em;
     margin-top: 1em;
+    line-height: 1.2;
 }
 
 #forecast {
@@ -328,3 +330,26 @@ a:hover {
 .vertical-center {
     margin: auto 0 !important;
 }
+
+#hilow {
+    width: 90%;
+    position: absolute;
+    top: 10px;
+}
+
+.high {
+    color: #f08787;
+}
+
+.low {
+    color: #aeaeff;
+}
+
+.precipitation {
+    line-height: 0.8;
+}
+
+.precipitation h6 {
+    color: rgb(158, 158, 158);
+    margin-top: 1px;
+}