Commit 5d8eab2e authored by Reko Meriö's avatar Reko Meriö

Merge

parent bd2652cb
This diff is collapsed.
......@@ -2,9 +2,9 @@
<div>
<v-layout row wrap>
<Locations id="locations" @pushWeatherData="pushData" />
<Clothes :temperature="temperature" />
<Weather id="weather" @pushTemperature="pullTemperature" :values="values" :weatherData="weatherData" :kunta="selectedKunta"/>
<Clothes :temperature="temperature" />
</v-layout>
</div>
</template>
......
<template>
<v-flex xs12 md6 pa-2>
<v-card flat>
<v-layout row wrap>
<v-card-title>
<div id="location" class="left">{{ kunta }}</div>
<v-flex xs3>
<div class="label">Lämpötila</div>
<div class="left">{{ currentTemp }}°C</div>
<div class="label">Feels like</div>
<div id="feels-like" class="left">{{ feelsLike }}°C</div>
</v-flex >
<v-flex xs9>
<WeatherChart id="chart" :hours="hours" :values="temperatures" :labels="temperaturesWithC" />
</v-flex>
<div id="summary">{{ summary }}</div>
<div id="wind">Tuuli: {{ wind }} m/s</div>
</v-card-title>
<v-card-text>
<div class="label">Päivä</div>
<v-slider v-model="date" :tick-labels="dateLabels" :max="96" step="24" ticks="always" tick-size="4" color="light-blue accent-4" thumb-color="light-blue accent-4" track-color="light-blue accent-1"></v-slider>
<div class="label">Tunti</div>
<v-slider v-model="hour" :tick-labels="hourLabels" :max="max" :step="interval" ticks="always" tick-size="4" color="light-blue accent-4" thumb-color="light-blue accent-4" track-color="light-blue accent-1"></v-slider>
<v-layout row wrap justify-space-between>
<v-flex class="time-stamp" xs1 v-for="(icon,index) in icons" :key="index"><img class="icon" :src="icon"></v-flex>
</v-layout>
</v-card-text>
</v-layout>
<v-card flat>
<v-layout row wrap>
<v-card-title>
<div id="location" class="left">{{ kunta }}</div>
<v-flex xs3>
<div class="label">Lämpötila</div>
<div class="left">{{ currentTemp }}°C</div>
<div class="label">Feels like</div>
<div id="feels-like" class="left">{{ feelsLike }}°C</div>
</v-flex>
<v-flex xs9>
<WeatherChart id="chart" :hours="hours" :values="temperatures" :labels="temperaturesWithC" />
</v-flex>
<div id="summary">{{ summary }}</div>
<div id="wind">Tuuli: {{ wind }} m/s</div>
</v-card-title>
<v-card-text>
<div class="label">Päivä</div>
<v-slider v-model="date" :tick-labels="dateLabels" :max="96" step="24" ticks="always" tick-size="4" color="light-blue accent-4" thumb-color="light-blue accent-4" track-color="light-blue accent-1"></v-slider>
<div class="label">Tunti</div>
<v-slider v-model="hour" :tick-labels="hourLabels" :max="max" :step="interval" ticks="always" tick-size="4" color="light-blue accent-4" thumb-color="light-blue accent-4" track-color="light-blue accent-1"></v-slider>
<v-layout row wrap justify-space-between>
<v-flex class="time-stamp" xs1 v-for="(icon,index) in icons" :key="index"><img class="icon" :src="icon"></v-flex>
</v-layout>
</v-card-text>
</v-layout>
</v-card>
</v-flex>
</template>
......@@ -45,8 +43,8 @@
temperatures: [0, 0],
currentTemp: '-',
temperaturesWithC: ['-', '-', '-', '-', '-', '-', '-'],
icon_src: '/images/icons/',
icons: [],
icon_src: '/images/icons/',
icons: [],
feelsLike: '-',
summary: null,
hourLabels: [],
......@@ -56,9 +54,9 @@
interval: 3,
ticks: 1,
time: 0,
max: 18,
wind: 0,
hours: [],
max: 18,
wind: 0,
hours: [],
}),
props: {
weatherData: Array,
......@@ -73,38 +71,39 @@
var today = d.getDate();
var month = d.getMonth() + 1;
this.time = d.getHours();
this.ticks = Math.round((24 - this.time) / this.interval);
if (this.ticks < 2) this.ticks = 2;
if (this.date > 0) {
this.ticks = 24 / this.interval;
this.max = 24 - this.interval;
} else {
this.max = 24 - this.interval - this.time;
this.ticks = (24 - this.time) / this.interval;
if (this.ticks < 2) this.ticks = 2;
}
while (this.max % this.interval != 0) this.max++;
if (this.max < this.interval) this.max = this.interval;
// if (this.max < this.interval) this.max = this.interval;
this.icon = '/images/icons/';
this.temperatures = [];
this.temperaturesWithC = [];
this.hourLabels = [];
this.dateLabels = [];
this.hours = [];
this.icons = [];
this.dateLabels = [];
this.hours = [];
this.icons = [];
//Timestampit 0 - 21
if (this.date > 0) {
this.summary = this.weatherData[this.hour + this.date - this.time].summary;
this.currentTemp = Math.round(this.weatherData[this.hour + this.date - this.time].temperature);
this.feelsLike = Math.round(this.weatherData[this.hour + this.date - this.time].apparentTemperature);
this.icon += this.weatherData[this.hour + this.date].icon + ".png";
this.wind = Math.round(this.weatherData[this.hour + this.date].windSpeed);
this.wind = Math.round(this.weatherData[this.hour + this.date].windSpeed);
for (var i = this.hour + this.date - this.time; i <= this.hour + this.date - this.time + this.ticks; i++) {
this.hourLabels.push(((j * this.interval) % 24).toString());
j++;
this.hourLabels.push(((j * this.interval) % 24).toString());
j++;
}
j = 0;
for (var i = this.hour + this.date - this.time; i <= this.hour + this.date - this.time + this.interval; i++) {
......@@ -112,15 +111,18 @@
this.temperaturesWithC.push(Math.round(this.weatherData[i].temperature));
this.temperaturesWithC[j] += '°C';
j++;
}
for (var i = this.date - this.time; i < this.date - this.time + this.interval * this.ticks; i += this.interval) {
this.icons.push(this.icon_src + this.weatherData[i].icon + ".png");
}
}
for (var i = this.date - this.time; i < this.date - this.time + this.interval * this.ticks; i += this.interval) {
this.icons.push(this.icon_src + this.weatherData[i].icon + ".png");
}
}
//Timestampit this.time - 21
else {
console.log(this.ticks);
// if (this.time == 14 || this.time == 17) this.ticks++;
console.log(this.ticks);
this.summary = this.weatherData[this.hour + this.date].summary;
this.currentTemp = Math.round(this.weatherData[this.hour + this.date].temperature);
this.feelsLike = Math.round(this.weatherData[this.hour + this.date].apparentTemperature);
......@@ -136,22 +138,22 @@
this.temperaturesWithC.push(Math.round(this.weatherData[i].temperature));
this.temperaturesWithC[j] += '°C';
j++;
}
j = 0;
for (var i = 0; i < this.ticks; i++) {
this.icons.push(this.icon_src + this.weatherData[j].icon + ".png");
j += 3;
}
}
j = 0;
for (var i = 0; i < this.ticks; i++) {
this.icons.push(this.icon_src + this.weatherData[j].icon + ".png");
j += 3;
}
}
for (var i = 0; i < 5; i++) {
this.dateLabels.push((today + i + '.' + month).toString());
}
for (var i = 0; i < 4; i++) {
if(this.date == 0)
this.hours.push(this.time + this.hour + i);
else
this.hours.push(this.hour + i);
}
}
for (var i = 0; i < 4; i++) {
if (this.date == 0)
this.hours.push((this.time + this.hour + i) % 24);
else
this.hours.push((this.hour + i) % 24);
}
this.$emit('pushTemperature', this.currentTemp);
},
},
......@@ -177,7 +179,7 @@
</script>
<style>
.icon {
width: 70%;
width: calc(50% + 10px);
}
#chart {
......@@ -185,7 +187,7 @@
}
.left {
width: 100%;
font-size: calc(0.6vw + 30px);
text-align: left;
......@@ -227,9 +229,10 @@
margin-left: 10px;
margin-right: 10px;
}
#wind{
font-size: calc(0.2vw + 10px);
}
#wind {
font-size: calc(0.2vw + 10px);
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment