Skip to content

Commit

Permalink
Initial weather widget.
Browse files Browse the repository at this point in the history
  • Loading branch information
azizsafudin committed Aug 5, 2018
1 parent 3a61973 commit 0090b9d
Show file tree
Hide file tree
Showing 5 changed files with 87 additions and 54 deletions.
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ node_modules/
npm-debug.log*
yarn-debug.log*
yarn-error.log*
/src/secret.js

# Editor directories and files
.idea
Expand Down
2 changes: 1 addition & 1 deletion manifest.json
Original file line number Diff line number Diff line change
@@ -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": {
Expand Down
125 changes: 77 additions & 48 deletions src/components/widgets/weather.vue
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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>
10 changes: 5 additions & 5 deletions src/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -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');



Expand All @@ -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 = {
Expand All @@ -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){
Expand Down
3 changes: 3 additions & 0 deletions src/secret.example.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
module.exports = {
weather_api_key : '' //api key from openweathermap.com
};

0 comments on commit 0090b9d

Please sign in to comment.