cupcakearmy/dvb
1
0
Fork 0
mirror of https://github.com/cupcakearmy/dvb.git synced 2024-12-22 16:16:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Live Weather

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
app/index.html
View File

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

4
app/res/css/weather.css
View File

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

65
app/res/js/vue/dvb-weather.js
View File

@ -5,40 +5,20 @@ Vue.component('dvb-weather', {
}, },
data() { data() {
return { return {
hz: 10, hz: 30,
cur: '...', cur: '...',
images: { zip: '01217',
'sunny': 11, url: 'https://wundtstr.club/cache',
'rain': 4, mapping: {
'snow': 6, 1: 11,
'clouds': 10, 2: 9,
'storm': 1, 3: 10,
'': 9, 4: 10,
}, 9: 10,
states: { 10: 4,
'fog': 2, 11: 1,
'wind': 3, 13: 6,
'frosty': 8, 50: 2,
'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'
},
} }
} }
}, },
@ -50,14 +30,21 @@ Vue.component('dvb-weather', {
stopWatcher() { stopWatcher() {
clearInterval(this.watcherId) 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() { created() {
this.startWatcher() this.startWatcher()
}, },
mounted() {
const data = this.static[this.offset]
this.$el.style.backgroundImage = `url('res/img/${data.image}.png')`
this.cur = data.temp
},
}) })