Live Weather

This commit is contained in:
nicco 2017-12-28 18:09:32 +01:00
parent 555b9ef292
commit d4d73219f3
3 changed files with 35 additions and 45 deletions

View File

@ -38,9 +38,9 @@
<div class="side">
<div class="fill weather-container">
<dvb-weather offset="0"></dvb-weather>
<dvb-weather offset="14400"></dvb-weather>
<dvb-weather offset="28800"></dvb-weather>
<dvb-weather offset="43200"></dvb-weather>
<dvb-weather offset="1"></dvb-weather>
<dvb-weather offset="2"></dvb-weather>
<dvb-weather offset="3"></dvb-weather>
</div>
</div>
</div>
@ -50,7 +50,10 @@
<script type="text/x-template" id="tmpl-dvb-weather">
<div class="weather-item">
<span class="temperature">{{cur}}</span>
<span class="temperature">
{{cur}}
<small>C</small>
</span>
</div>
</script>

View File

@ -22,9 +22,9 @@
.weather-container .weather-item .temperature {
position: absolute;
bottom: 10%;
top: 6%;
right: 10%;
width: 80%;
text-align: right;
font-size: var(--font-xl);
font-size: var(--font-lg);
}

View File

@ -5,40 +5,20 @@ Vue.component('dvb-weather', {
},
data() {
return {
hz: 10,
hz: 30,
cur: '...',
images: {
'sunny': 11,
'rain': 4,
'snow': 6,
'clouds': 10,
'storm': 1,
'': 9,
},
states: {
'fog': 2,
'wind': 3,
'frosty': 8,
'wet': 12,
'cold': 7,
},
static: {
'0': {
image: 11,
temp: '23'
},
'14400': {
image: 4,
temp: '11'
},
'28800': {
image: 6,
temp: '-1'
},
'43200': {
image: 1,
temp: '7'
},
zip: '01217',
url: 'https://wundtstr.club/cache',
mapping: {
1: 11,
2: 9,
3: 10,
4: 10,
9: 10,
10: 4,
11: 1,
13: 6,
50: 2,
}
}
},
@ -50,14 +30,21 @@ Vue.component('dvb-weather', {
stopWatcher() {
clearInterval(this.watcherId)
},
update() {},
async update() {
fetch(`${this.url}/${this.zip}`, {
mode: 'cors',
cache: 'default'
}).then(res => res.json()).then(res => {
const data = res.list[this.offset]
const image = this.mapping[parseInt(data.weather[0].icon)]
this.$el.style.backgroundImage = `url('res/img/${image}.png')`
this.cur = data.main.temp
})
},
},
created() {
this.startWatcher()
},
mounted() {
const data = this.static[this.offset]
this.$el.style.backgroundImage = `url('res/img/${data.image}.png')`
this.cur = data.temp
},
})