added visibility information

package.json

@@ -1,6 +1,6 @@
 {
   "name": "weather-sucks",
-  "version": "9.0.0",
+  "version": "10.0.0",
   "description": "Our Earth needs yet another Weather App",
   "devDependencies": {
     "typescript": "^3.2.2"

src/@types/index.js

@@ -18,10 +18,11 @@
  * @property {string} [forecast]
  * @property {string} [country]
  * @property {string} [city]
- * @property {number} [humidity]
- * @property {number} [pressure]
+ * @property {number} [humidity] in percent
+ * @property {number} [pressure] mBar
  * @property {number} [windSpeed] m/s
  * @property {number} [windDirection] degrees
+ * @property {number} [visibility] meters
  */
 
 /**
@@ -54,8 +55,9 @@
 
 /**
  * @typedef {object} AdditionalInfo
- * @property {number} humidity
- * @property {number} pressure
- * @property {number} windSpeed
- * @property {number} windDirection
+ * @property {number} humidity in percent
+ * @property {number} pressure mBar
+ * @property {number} windSpeed m/s
+ * @property {number} windDirection in degrees
+ * @property {number} visibility in meters
  */

src/app.js

@@ -139,13 +139,14 @@ class App extends Component {
     const { city, unit } = this.state;
     fetchWeatherInfo(city)
       .then(/** @type {WeatherInfo} **/data => {
-        const { temperature, forecast, city, country, humidity, pressure, windSpeed, windDirection } = data;
+        const { temperature, forecast, city, country, humidity, pressure, windSpeed, windDirection, visibility } = data;
         /** @type {AdditionalInfo} **/
         const additionalInfo = {
           humidity,
           pressure,
           windSpeed,
-          windDirection
+          windDirection,
+          visibility
         };
         this.setState({
           temperature: convertKelvinTo(temperature, unit),

src/components/additional-info.js

@@ -9,15 +9,16 @@ export const AdditionalInfoPanel = ({ show, data }) => {
     return html``;
   }
   const showClass = show ? 'additional-info-show' : 'additional-info-hide';
-  const { humidity, pressure, windSpeed, windDirection } = data;
+  const { humidity, pressure, windSpeed, windDirection, visibility } = data;
 
   return html`
     <div class=${`additional-info ${showClass}`}>
       <div style="padding: 1em;">
         <div>Humidity: ${humidity}%</div>
-        <div>Pressure: ${pressure} hPa</div>
+        <div>Pressure: ${pressure.toLocaleString()} mBar</div>
         <div>Wind Speed: ${windSpeed} m/s</div>
         <div>Wind Direction: ${windDirection}° (${degreeToCompass(windDirection)})</div>
+        <div>Visibility: ${Math.floor(visibility / 1000)} km</div>
       </div>
     </div>
   `;

src/modules/service.js

@@ -22,7 +22,7 @@ export function fetchWeatherInfo(city) {
         const { /** @type {number|string} **/ cod } = json;
         const code = toInt(cod);
         if (code === 200) {
-          const { main, weather, sys, name, wind } = json;
+          const { main, weather, sys, name, wind, visibility } = json;
           /** @type {WeatherInfo} **/
           const info = {
             temperature: main ? main.temp : undefined,
@@ -33,6 +33,7 @@ export function fetchWeatherInfo(city) {
             pressure: main ? main.pressure : undefined,
             windSpeed: wind ? wind.speed : undefined,
             windDirection: wind ? wind.deg : undefined,
+            visibility
           };
           resolve(info);
         } else {

src/service-worker.js

@@ -1,7 +1,7 @@
 // @ts-nocheck
 // having issues with ServiceWorker types
 
-const version = '10.0.0'; // version needs to be updated manually for now
+const version = '10.1.0'; // version needs to be updated manually for now
 const projectName = 'weather-sucks';
 const preCacheName = `${projectName}-precache-${version}`;
 const runtimeCacheName = `${projectName}-runtimeCache-${version}`;
@@ -13,21 +13,19 @@ const cacheUrls = [
   './app.js'
 ];
 
-/** @type {ServiceWorkerGlobalScope} **/
-const worker = self;
 // The install handler takes care of precaching the resources we always need.
-worker.addEventListener('install', /** @type {ExtendableEvent} **/event => {
+self.addEventListener('install', /** @type {ExtendableEvent} **/event => {
   event.waitUntil(
     caches.open(preCacheName)
       .then(cache => cache.addAll(cacheUrls))
       .then(() => {
-        return worker.skipWaiting();
+        return self.skipWaiting();
       })
   );
 });
 
 // The activate handler takes care of cleaning up old caches.
-worker.addEventListener('activate', /** @type {ExtendableEvent} **/event => {
+self.addEventListener('activate', /** @type {ExtendableEvent} **/event => {
   const currentCaches = [preCacheName, runtimeCacheName];
   event.waitUntil(
     caches.keys()
@@ -39,13 +37,13 @@ worker.addEventListener('activate', /** @type {ExtendableEvent} **/event => {
           return caches.delete(cacheToDelete);
         }));
       })
-      .then(() => worker.clients.claim())
+      .then(() => self.clients.claim())
   );
 });
 
-worker.addEventListener('fetch', /** @type {FetchEvent} **/event => {
+self.addEventListener('fetch', /** @type {FetchEvent} **/event => {
   // ignore requests to OpenWeather API
-  const requestsFromApp = event.request.url.startsWith(worker.location.origin);
+  const requestsFromApp = event.request.url.startsWith(self.location.origin);
   if (!requestsFromApp) {
     return;
   }
@@ -71,14 +69,14 @@ worker.addEventListener('fetch', /** @type {FetchEvent} **/event => {
 });
 
 // https://github.com/GoogleChrome/workbox/issues/1120
-worker.addEventListener('message', /** @type {MessageEvent} **/event => {
+self.addEventListener('message', /** @type {MessageEvent} **/event => {
   const { /** @type {string} **/data } = event;
   switch (data) {
     case 'force-activate':
-      worker.skipWaiting();
-      if (worker.clients) {
-        worker.clients.claim();
-        worker.clients.matchAll()
+      self.skipWaiting();
+      if (self.clients) {
+        self.clients.claim();
+        self.clients.matchAll()
           .then(clients => {
             clients.forEach(client => client.postMessage('new-version-installed'));
           });