From 0090b9da794d66f26ddd5745bdac8976cecdcc3d Mon Sep 17 00:00:00 2001
From: xmodulus <azizsafudin@yahoo.com.sg>
Date: Sun, 5 Aug 2018 16:09:39 +1200
Subject: [PATCH] Initial weather widget.

---
 .gitignore                         |   1 +
 manifest.json                      |   2 +-
 src/components/widgets/weather.vue | 125 ++++++++++++++++++-----------
 src/main.js                        |  10 +--
 src/secret.example.js              |   3 +
 5 files changed, 87 insertions(+), 54 deletions(-)
 create mode 100644 src/secret.example.js

diff --git a/.gitignore b/.gitignore
index 541a820..c297f5d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,6 +4,7 @@ node_modules/
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+/src/secret.js
 
 # Editor directories and files
 .idea
diff --git a/manifest.json b/manifest.json
index 2b1aed0..679d6d2 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,7 +1,7 @@
 {
   "name": "mdash",
   "description": "A sleek customisable dashboard",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "manifest_version": 2,
   "permissions": ["geolocation"],
   "chrome_url_overrides": {
diff --git a/src/components/widgets/weather.vue b/src/components/widgets/weather.vue
index f6250a5..dbf1979 100644
--- a/src/components/widgets/weather.vue
+++ b/src/components/widgets/weather.vue
@@ -1,52 +1,59 @@
 <template>
-  <div class="main is-unselectable">
-    <div class="clockface" v-bind:class="theme">{{clock.time}}<span class="small">{{clock.seconds}}</span>
-      <span class="small">{{clock.label}}</span>
+  <div class="main">
+    <div class="item is-unselectable" v-if="tempF !== ''">
+      <span :class="theme" class="is-size-4" v-if="!settings.metric.value">{{tempF}}</span>
+      <span :class="theme" class="is-size-4" v-else>{{tempC}}</span>
+      <span :class="theme" class="is-size-4">°</span>
+      <span :class="theme" class="is-size-6" v-if="!settings.metric.value">F</span>
+      <span :class="theme" class="is-size-6" v-else>C</span>
+      <span :class="theme" class="is-size-7">{{location.city_long}}, {{location.country_short}}</span>
     </div>
   </div>
 </template>
 <script>
+import axios from 'axios';
 import moment from 'moment';
 import storage from '../../helpers/storage';
+import store from '../../store';
+import keys from '../../secret';
 
-const widget_name = 'clock';
+const api_url = 'https://api.openweathermap.org/data/2.5/weather?';
+const api_key = keys.weather_api_key;
+const widget_name = 'weather';
 const manifest =  {
                     name: widget_name,        //  Widget name
-                    description: 'Simple clock widget',
+                    description: 'Simple weather widget',
                     settings: {
-                      show24h: {
-                        name: 'Show 24 hours',
+                      metric: {
+                        name: 'Use Celcius',
                         value: true,
                         type: 'boolean',
-                      },
-                      showSeconds: {
-                        name: 'Show seconds',
-                        value: false,
-                        type: 'boolean',
-                      },
+                      }
                     },
                     layout: {             //  default layout
                       i: widget_name,         //  Must be the same name
-                      x: 7,
-                      y: 3,
-                      w: 10,
-                      h: 3,
+                      x: 22,
+                      y: 1,
+                      w: 2,
+                      h: 2,
                     },
                   };
 
 export default {
   name: manifest.name,
   data: () => ({
-    clock: {
-      time: '',
-      seconds: '',
-      label: '',
-    },
-    dark: storage.getSettings('mdash').dark.value,
-    settings: storage.getSettings(manifest.name),
+    location: storage.get('mdash-location') ,
+    tempF: '',
+    tempC: '',
   }),
   manifest: manifest,
   computed: {
+    dark(){
+      return store.getters.settings.mdash.dark.value;
+    },
+    settings(){
+      return store.getters.settings[manifest.name];
+    },
     theme(){
       return {
         'has-text-white': this.dark,
@@ -55,39 +62,61 @@ export default {
     }
   },
   mounted() {
-    this.load();
-    setInterval(this.getTime, 60000); //  update time every minute.
-    if(this.settings.showSeconds.value) setInterval(this.getSeconds, 1000); //  update seconds every second.
+    let weather = storage.get('weather');
+    if(weather !== null){
+      this.tempC = weather.tempC;
+      this.tempF = weather.tempF;
+    }
+
+    let loc = storage.get('mdash-location');
+    let url = api_url + 'lat='+loc.latitude+'&lon='+loc.longitude+'&units=metric&appid='+api_key;
+    let make_call = false;
+
+    if(weather !== null) {
+      let now = moment(new Date());
+      let last_checked = moment(new Date(storage.get('weather').last_checked));
+      make_call = now.diff(last_checked, 'hours') > 3;
+    }
+
+    if (weather === null || make_call) {
+        axios.get(url)
+          .then(res => {
+            console.log('mdash (Weather): Loaded weather data.');
+            this.tempC = Math.round(res.data.main.temp * 10) / 10;
+            this.tempF = this.c2f(res.data.main.temp);
+
+            storage.set('weather', {
+              last_checked: moment(new Date()),
+              tempC: this.tempC,
+              tempF: this.tempF,
+            });
+          });
+      }
+
   },
-  methods: {
-    getTime() {
-      let format = this.settings.show24h.value ? 'H:mm' : 'h:mm';
-      this.clock.time = moment().format(format);
-      this.getLabel();
-    },
-    getSeconds(){
-      if(this.settings.showSeconds.value)this.clock.seconds = moment().format(':ss');
-    },
-    getLabel() {
-      if(!this.settings.show24h.value)this.clock.label = moment().format('A');
-    },
-    load() {
-      this.getTime();
-      this.getSeconds();
-    },
+  watch:{
+    'settings.metric.value'(){
+      if(this.settings.metric.value){
+
+      }
+    }
   },
+  methods:{
+    c2f(temp){
+      return Math.round(((temp * (9/5)) + 32) * 10) / 10;
+    }
+  }
 };
 </script>
 
 <style scoped>
   .main {
+    width: 100px;
+    height: 100px;
     text-align: center;
     font-family: 'Lato', sans-serif;
   }
-  .clockface {
-    font-size: 9rem;
-  }
-  .clockface .small {
-    font-size: 4rem;
+  .item {
+    margin:auto;
   }
 </style>
diff --git a/src/main.js b/src/main.js
index a338e40..5e15f26 100644
--- a/src/main.js
+++ b/src/main.js
@@ -32,8 +32,8 @@ else bg = config.default_bg;
 storage.set('mdash-background', bg);
 console.log('mdash: Background images loaded.');
 
-storage.set('installed-0.1.0', true);
-console.log('mdash: Current version: 0.1.0');
+storage.set('installed-0.1.1', true);
+console.log('mdash: Current version: 0.1.1');
 
 
 
@@ -45,7 +45,7 @@ new Vue({
   mounted() {
     //get user location
     if (navigator.geolocation) {
-      navigator.geolocation.getCurrentPosition(function (pos) {
+      navigator.geolocation.getCurrentPosition(pos => {
         let saved_pos = storage.get('mdash-location');
         let url = `https://maps.googleapis.com/maps/api/geocode/json?latlng=${pos.coords.latitude},${pos.coords.longitude}`;
         let obj = {
@@ -57,10 +57,10 @@ new Vue({
           (saved_pos.latitude !== pos.coords.latitude  || saved_pos.longitude !== pos.coords.longitude || !saved_pos.city_long)){
           axios.get(url)
             .then(res => {
-              let locality = res.data.results[0].address_components.filter(function(o){
+              let locality = res.data.results[0].address_components.filter(o => {
                 return o.types.indexOf('locality') > -1;
               });
-              let country = res.data.results[0].address_components.filter(function(o){
+              let country = res.data.results[0].address_components.filter(o => {
                 return o.types.indexOf('country') > -1;
               });
               if(locality.length > 0){
diff --git a/src/secret.example.js b/src/secret.example.js
new file mode 100644
index 0000000..582b0dd
--- /dev/null
+++ b/src/secret.example.js
@@ -0,0 +1,3 @@
+module.exports = {
+  weather_api_key : '' //api key from openweathermap.com
+};