Commit 23c7308f authored by K9260's avatar K9260 🎅🏼

Sliderit säätyvät kellon mukaan, suosikkilistalta voi valita suosikin

parent 16739b5e
This diff is collapsed.
......@@ -7,7 +7,7 @@
<div>Suosikit</div>
</template>
<v-card color="grey lighten-3">
<v-card-text @click="pickLocation" v-for="favorite in favorites" :key="favorite" > {{ favorite }}</v-card-text>
<v-card-text v-for="(favorite, index) in favorites" :key="index" @click="pushFavorite(favorite)"> {{ favorite }}</v-card-text>
</v-card>
</v-expansion-panel-content>
</v-expansion-panel>
......@@ -22,13 +22,14 @@
panel: [
false
],
test: null,
}),
props: {
favorites: Array,
},
methods: {
pickLocation: function(){
console.log('click');
pushFavorite(location){
this.$emit('pushFavorite', location);
}
}
}
......
<template>
<v-progress-circular
indeterminate
color="light-green accent-4"
:size="30"
></v-progress-circular>
</template>
<script>
export default {
name: 'Loading',
data: () => ({
}),
}
</script>
<style>
.v-progress-circular{
margin: 1rem
}
</style>
<template>
<v-flex xs12 md6 pa-2>
<v-flex xs12 md6 pa-2>
<v-card color="transparent" flat>
<v-card-text>
<v-autocomplete color="light-green accent-4" v-model="selectedKunta" :items="kunnat" hide-no-data hide-selected item-text="Description" item-value="API" label="Paikkakunta" placeholder="" prepend-icon="mdi-database-search" clearable return-object></v-autocomplete>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<Loading v-if="loading"/>
<v-btn :disabled="!selectedKunta" color="white darken-3" @click="addFavorite">
Lisää suosikiksi
<v-icon right>mdi-close-circle</v-icon>
......@@ -15,15 +15,14 @@
Hae sää
<v-icon right>mdi-close-circle</v-icon>
</v-btn>
</v-card-actions>
<favorites :favorites="favorites"></favorites>
<favorites @pushFavorite="pullFavorite" :favorites="favorites"></favorites>
</v-card>
</v-flex>
</template>
<script>
import Loading from './Loading'
export default {
name: 'AutocompleteBox',
data: () => ({
......@@ -41,10 +40,15 @@
hour: 0,
values: [],
labels: [],
loading: false,
}),
components: {
Loading
},
methods: {
getLocations() {
this.loading = true;
axios
.get('/api/locations')
.then(response => (this.locationData = response.data))
......@@ -56,6 +60,7 @@
for (var i = 0; i < this.locationData.length; i++) {
this.kunnat.push(this.locationData[i].kunta);
}
this.loading = false;
},
getCoords() {
axios
......@@ -72,6 +77,7 @@
},
getWeather() {
this.loading = true;
axios
.get('/api/saa?lat=' + this.lat + '&lon=' + this.lon)
.then(response => (this.weatherData = response.data))
......@@ -100,6 +106,10 @@
}
//Push data to parent component, which is Main.vue
this.$emit('pushWeatherData', this.values, this.weatherData, this.queriedKunta);
this.loading = false;
},
pullFavorite(favorite) {
this.selectedKunta = favorite;
},
},
mounted: function() {
......
......@@ -2,7 +2,7 @@
<div>
<v-layout row wrap>
<Locations id="locations" @pushWeatherData="pushData" />
<Weather id="weather" @pushTemperature="pushTemperature" :values="values" :weatherData="weatherData" :kunta="selectedKunta"/>
<Weather id="weather" @pushTemperature="pullTemperature" :values="values" :weatherData="weatherData" :kunta="selectedKunta"/>
<Clothes :temperature="temperature" />
</v-layout>
</div>
......@@ -13,13 +13,14 @@
import WeatherChart from './WeatherChart'
import Weather from './Weather'
import Clothes from './Clothes'
export default {
name: 'Main',
components: {
Locations,
WeatherChart,
Weather,
Clothes
Clothes,
},
data: () => ({
values: [0, 0],
......@@ -34,7 +35,7 @@
this.weatherData = weatherData;
this.selectedKunta = selectedKunta;
},
pushTemperature: function(currentTemp){
pullTemperature: function(currentTemp){
this.temperature = currentTemp;
}
}
......
......@@ -6,7 +6,7 @@
<v-layout fill-height>
<v-flex xs12 align-end flexbox>
<img id="icon" :src="icon">
<WeatherChart id="chart" :values="temperatures" :labels="temperaturesWithC" />
<WeatherChart id="chart" :values="temperatures" :labels="temperaturesWithC"/>
</v-flex>
</v-layout>
</v-container>
......@@ -14,11 +14,11 @@
<v-card-title>
<div id="location" class="left">{{ kunta }}</div>
<div class="label">Lämpötila</div>
<div class="left">{{ currentTemp }}</div>
<div class="left">{{ currentTemp }}°C</div>
<div class="label">Feels like</div>
<div id="feels-like" class="left">{{ feelsLike }}</div>
<div id="summary">{{summary}}</div>
<div id="feels-like" class="left">{{ feelsLike }}°C</div>
<div id="summary">{{ summary }}</div>
</v-card-title>
<v-card-text>
<div class="label">Päivä</div>
......@@ -29,16 +29,37 @@
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-slider
v-model="hour"
:tick-labels="hourLabels"
:max="12"
step="4"
: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>
{{ hour }}
<div class="label">Interval</div>
<v-slider
v-model="interval"
:tick-labels="[3,6]"
:min="3"
:max="6"
:step="3"
ticks="always"
tick-size="4"
color="light-blue accent-4"
thumb-color="light-blue accent-4"
track-color="light-blue accent-1"
></v-slider>
{{ interval }}
</v-card-text>
......@@ -65,6 +86,10 @@
hour: 0,
dateLabels: [],
date: 0,
interval: 3,
ticks: 1,
time: 0,
max: 18
}),
props: {
weatherData: Array,
......@@ -77,9 +102,24 @@
var j = 0;
var d = new Date();
var today = d.getDate();
var month = d.getMonth();
var time = d.getHours();
time -= 4; //Timezone on väärä joten tämä helpottaa
var month = d.getMonth() + 1;
this.time = d.getHours();
this.ticks = parseInt((24 - this.time) / this.interval);
if(this.ticks < 1) this.ticks = 1;
if(this.date > 0) {
this.ticks = 24 / this.interval;
this.max = 24 - this.interval;
}
else{
this.max = 24 - this.interval - this.time;
}
while(this.max % 3 != 0) this.max++;
if(this.max < this.interval) this.max = this.interval;
console.log(this.ticks);
this.icon = '/images/icons/';
this.temperatures = [];
this.temperaturesWithC = [];
......@@ -88,15 +128,37 @@
this.summary = this.weatherData[this.hour + this.date].summary;
this.currentTemp = this.weatherData[this.hour + this.date].temperature;
this.feelsLike = this.weatherData[this.hour + this.date].apparentTemperature + '°C';
this.feelsLike = this.weatherData[this.hour + this.date].apparentTemperature;
this.icon += this.weatherData[this.hour + this.date].icon + ".png";
for (var i = this.hour + this.date; i < this.hour + this.date + 4; i ++) {
//Timestampit 0 - 21
if(this.date > 0){
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++;
}
j = 0;
for (var i = this.hour + this.date - this.time; i <= this.hour + this.date - this.time + this.interval; i++) {
this.temperatures.push(this.weatherData[i].temperature);
this.temperaturesWithC.push(this.weatherData[i].temperature);
this.temperaturesWithC[j] += '°C';
j++;
}
}
//Timestampit this.time - 21
else{
for (var i = this.hour + this.date; i <= this.hour + this.date + this.ticks; i++) {
this.hourLabels.push(((this.time + j * this.interval) % 24).toString());
j++;
}
j = 0;
for (var i = this.hour + this.date; i <= this.hour + this.date + this.interval; i++) {
this.temperatures.push(this.weatherData[i].temperature);
this.temperaturesWithC.push(this.weatherData[i].temperature);
this.temperaturesWithC[j++] += '°C';
this.hourLabels.push(((time + j * 4) % 24).toString());
this.temperaturesWithC[j] += '°C';
j++;
// console.log(i);
}
}
for (var i = 0; i < 5; i++) {
this.dateLabels.push((today + i + '.' + month).toString());
}
......@@ -111,7 +173,11 @@
if(this.weatherData[0])
this.weatherParse();
},
date: function(){
date: function(){
if(this.weatherData[0])
this.weatherParse();
},
interval: function(){
if(this.weatherData[0])
this.weatherParse();
}
......
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