Weather OS notification

manifest.json

@@ -26,7 +26,9 @@
       "default_icon": "icons/Foxy-SF.svg"
     },
 
-    "permissions": ["nativeMessaging",  "bookmarks", "tabs", "activeTab", "<all_urls>"],
+    "permissions": ["nativeMessaging",  "bookmarks", "tabs", "activeTab", "<all_urls>", "notifications"],
+
+    "web_accessible_resources": ["/sidebar/*"],
 
     "commands": {
       "_execute_sidebar_action": {

sidebar/panel.js

@@ -34,7 +34,7 @@ port.onMessage.addListener((response) => {
   let ID;
   let template;
 
-  switch(response.cmd) {
+  switch (response.cmd) {
     case 'KEYWORD':
       console.log('DETECTED KEYWORD');
       if (!mute_state) {
@@ -43,7 +43,7 @@ port.onMessage.addListener((response) => {
         setTimeout(function() {
           console.log('removing spinnter');
           document.getElementById('microphone').classList.remove('spinner');
-        },3000);
+        }, 3000);
       }
       return;
 
@@ -102,7 +102,7 @@ port.onMessage.addListener((response) => {
       template = `
         <div class="panel-item-header">
           <div class="panel-item-thumb">
-            <img src="${findProperWeatherImage(response.param5)}" alt="">
+            <img src=".${findProperWeatherImage(response.param5)}" alt="">
           </div>
           <span class="speechtext">${response.utterance}</span>
           <a href="/" class="panel-item-close"><img src="resources/close-16.svg" alt=""></a>
@@ -123,6 +123,15 @@ port.onMessage.addListener((response) => {
         + response.param2 + '&min=' + response.param3 + '&max=' +
         + response.param4 + '&description=' + response.param5
         + '&time=' + localTime.time + '&day=' + localTime.day);
+
+      const messageContent = () => {
+        const gettingActiveTab = browser.tabs.query({active: true, currentWindow: true});
+        gettingActiveTab.then((tabs) => {
+          browser.tabs.sendMessage(tabs[0].id, {response: response, imgUrl: findProperWeatherImage(response.param5)});
+        });
+      };
+
+      const reportErr = (err) => console.log('Error occured: ', err);
       break;
     case 'IOT':
       iDiv.className = "iotcardiv";
@@ -325,26 +334,26 @@ function getSidebar() {
 // TODO:  Share this code so we don't have to duplicate.  We need to add a
 // require.js or something similar to share this.
 function findProperWeatherImage(weatherDesc) {
-  var imagefile = '';
+  var imageFile = '';
   var desc = weatherDesc.toLowerCase()
   if (desc.indexOf('sun') !== -1) {
-      imageFile = './resources/sun.svg';
+      imageFile = '/resources/sun.svg';
   } else if (desc.indexOf('cloud') !== -1) {
-    imageFile = './resources/cloudy.svg';
+    imageFile = '/resources/cloudy.svg';
   } else if (desc.indexOf('rain') !== -1) {
-    imageFile = './resources/rain.svg';
+    imageFile = '/resources/rain.svg';
   } else if (desc.indexOf('snow') !== -1) {
-    imageFile = './resources/snow.svg';
+    imageFile = '/resources/snow.svg';
   } else if (desc.indexOf('rain') !== -1) {
-    imageFile = './resources/rain.svg';
+    imageFile = '/resources/rain.svg';
   } else if (desc.indexOf('wind') !== -1) {
-    imageFile = './resources/wind.svg';
+    imageFile = '/resources/wind.svg';
   } else if (desc.indexOf('clear') !== -1) {
-    imageFile = './resources/sun.svg';
+    imageFile = '/resources/sun.svg';
   } else {
     // We should try and get an icon for
     // 'haze', 'clear', and thunderstorm too
-    imageFile = './resources/cloudy.svg';
+    imageFile = '/resources/cloudy.svg';
   }
 
   return imageFile;

sidebar/panelweather.js

@@ -30,7 +30,7 @@ function initializeWeather(city, weather, temp, min, max, desc, localTime, local
 
   var subweatherdiv = document.getElementById('subweatherdiv');
   var currtempSpan = subweatherdiv.querySelector('.currtempfont');
-  document.getElementById("weatherImage").src = findProperWeatherImage(desc);
+  document.getElementById("weatherImage").src = `.${findProperWeatherImage(desc)}`;
 
   var highlow = document.getElementById('highlowdiv');
   var highlowtempfontSpan = highlow.querySelector('.highlowtempfont');
@@ -39,29 +39,45 @@ function initializeWeather(city, weather, temp, min, max, desc, localTime, local
   descriptionSpan.innerHTML = `${localDay}, ${localTime} - ${desc}`;
   currtempSpan.innerHTML = Math.round(temp);
   highlowtempfontSpan.innerHTML = 'H: ' + Math.round(max) + ' L: ' + Math.round(min);
+
+  browser.notifications.create(city, {
+    type: 'image',
+    iconUrl: browser.extension.getURL(`./sidebar${findProperWeatherImage(desc)}`),
+    title: `${Math.round(temp)}°F in ${city}`,
+    message: `${localDay}, ${localTime} - ${desc}`,
+   // Buttons are not supported by FF in extensions
+   // buttons: [{ title: "Chocolate" }, { title: "Battenberg" }],
+  });
+
+  browser.notifications.onClicked.addListener((id) => {
+    browser.tabs.create({
+      active: true,
+      url: `http://www.openweathermap.org/find?q=${id}`,
+    });
+  });
 }
 
 function findProperWeatherImage(weatherDesc) {
-  var imagefile = '';
-  var desc = weatherDesc.toLowerCase()
+  var imageFile = '';
+  var desc = weatherDesc.toLowerCase();
   if (desc.indexOf('sun') !== -1) {
-      imageFile = './resources/sun.svg';
+      imageFile = '/resources/sun.svg';
   } else if (desc.indexOf('cloud') !== -1) {
-    imageFile = './resources/cloudy.svg';
+    imageFile = '/resources/cloudy.svg';
   } else if (desc.indexOf('rain') !== -1) {
-    imageFile = './resources/rain.svg';
+    imageFile = '/resources/rain.svg';
   } else if (desc.indexOf('snow') !== -1) {
-    imageFile = './resources/snow.svg';
+    imageFile = '/resources/snow.svg';
   } else if (desc.indexOf('rain') !== -1) {
-    imageFile = './resources/rain.svg';
+    imageFile = '/resources/rain.svg';
   } else if (desc.indexOf('wind') !== -1) {
-    imageFile = './resources/wind.svg';
+    imageFile = '/resources/wind.svg';
   } else if (desc.indexOf('clear') !== -1) {
-    imageFile = './resources/sun.svg';
+    imageFile = '/resources/sun.svg';
   } else {
     // We should try and get an icon for
     // 'haze', 'clear', and thunderstorm too
-    imageFile = './resources/cloudy.svg';
+    imageFile = '/resources/cloudy.svg';
   }
 
   return imageFile;

sidebar/weatherBrowserModal.js

@@ -0,0 +1,44 @@
+function showPopup(request) {
+  const city = request.response.param;
+  const temp = request.response.param2;
+  const min = request.response.param3;
+  const max = request.response.param4;
+  const description = request.response.param5;
+  const localTime = request.response.localTime.time || '';
+  const localDay = request.response.localTime.day || '';
+
+  const background = document.createElement('div');
+  background.classList.add('foxy-background');
+
+  const link = document.createElement('link');
+  link.rel = 'stylesheet';
+  link.href = browser.extension.getURL('./sidebar/weatherModal.css');
+  document.head.appendChild(link);
+
+  const popupContent = `
+    <div class="foxy-content">
+      <div class="header">
+        <div class="city">${city}</div>
+        <button class="foxy-btn-close">x</button>
+      </div>
+      <div class="description">${localDay}, ${localTime} - ${description}</div>
+      <div class="info">
+        <img class="img" src="${browser.extension.getURL('/sidebar' + request.imgUrl)}" />
+        <span class="temperature">${Math.round(temp)}</span>
+        <div class="fahrenheit-sign">°F</div>
+        <div class="high-low">
+          <div class="high">H: ${Math.round(max)}°</div>
+          <div class="low">L: ${Math.round(min)}°</div>
+        </div>
+      </div>
+    </div>
+  `;
+
+  background.innerHTML = popupContent;
+  document.body.appendChild(background);
+  document.querySelector('.foxy-btn-close').addEventListener('click', () => background.remove());
+
+  setInterval(() => {background.remove()}, 5000);
+}
+
+browser.runtime.onMessage.addListener(showPopup);

sidebar/weatherModal.css

@@ -0,0 +1,91 @@
+.foxy-content .high-low {
+    display: flex;
+    flex-direction: column;
+    margin-left: 15px;
+    justify-content: flex-start;
+    margin-top: 18px;
+}
+
+.foxy-content .high {
+    font-size: 13px;
+    color: #0F1126;
+    margin-bottom: 7px;
+}
+
+.foxy-content .low {
+    font-size: 13px;
+    color: #0F1126;
+}
+
+.foxy-content .fahrenheit-sign {
+    font-size: 12px;
+    color: #0F1126;
+    margin-left: 2px;
+    margin-top: 18px;
+}
+
+.foxy-content .temperature {
+    font-size: 57px;
+    color: #0F1126;
+    font-weight: bold;
+    vertical-align: top;
+    padding-left: 10px
+}
+
+.foxy-content .img {
+    width: 52px;
+}
+
+.foxy-content .info {
+    display: flex;
+    justify-content: flex-start;
+}
+
+.foxy-content .header {
+    display: flex;
+    justify-content: space-between;
+}
+
+.foxy-content .description {
+    font-size: 14px;
+    color: #0F1126;
+}
+
+.foxy-content .city {
+    font-size: 21px;
+    color: #0F1126;
+    font-weight: bold;
+}
+
+.foxy-btn-close {
+    border: none;
+    font-size: 15px;
+    color: #d9d9d9;
+    margin-top: -10px;
+}
+
+.foxy-content {
+    background-color: #fefefe;
+    font-family: -apple-system, sans-serif;
+    padding: 10px 10px 10px 22px;
+    width: 27%;
+    height: auto;
+    border: 2px;
+    border-radius: 8px;
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    margin: 0;
+}
+
+.foxy-background {
+    position: fixed;
+    z-index: 100;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgb(0,0,0);
+    background-color: rgba(0,0,0,0.4);
+}