Commit 1bfa3f45 authored by K9260's avatar K9260 🎅🏼

Korjauksia ominaisuuksille joista saatiin palautetta

parent 5967cd64
<template>
<div id="cloth-picker">
<v-flex xs12 md6 pa-2>
<ClothSlider :cloth="hats" label="Hatut"/>
<ClothSlider :cloth="upperBody" label="Ylävartalo"/>
<ClothSlider :cloth="lowerBody" label="Housut"/>
<ClothSlider :cloth="shoes" label="Kengät"/>
</div>
</v-flex>
</template>
<script>
......@@ -73,15 +75,4 @@
}
}
</script>
<style>
#cloth-picker{
width: 100%;
font-size: 30px;
background-color: #ffffff;
padding: 10px;
border-radius: 5px;
text-align: center;
margin:auto;
font-family: inherit;
}
</style>
<template>
<div>
<div class="text-xs-center mb-3"></div>
<v-expansion-panel v-model="panel" expand: false>
<v-expansion-panel-content v-if="favorites != null">
<v-expansion-panel v-model="panel" expand: false >
<v-expansion-panel-content v-if="favorites != null">
<template v-slot:header>
<div>Suosikit</div>
</template>
<v-card color="grey lighten-3">
<v-card-text v-for="(favorite, index) in favorites" :key="index" @click="pushFavorite(favorite)"> {{ favorite }}</v-card-text>
<v-card color="grey lighten-3" >
<v-card-text v-for="(favorite, index) in favorites" :key="index" @click="pushFavorite(favorite)" class="fav"> {{ favorite }} </v-card-text>
</v-card>
</v-expansion-panel-content>
</v-expansion-panel>
......@@ -20,9 +20,8 @@
name: 'FavoriteTab',
data: () => ({
panel: [
false
true
],
test: null,
}),
props: {
favorites: Array,
......@@ -30,9 +29,18 @@
methods: {
pushFavorite(location){
this.$emit('pushFavorite', location);
this.panel = 1;
}
}
}
</script>
<style>
.fav:hover{
color: rgb(9, 173, 0);
}
.fav:active{
color: rgb(100, 221, 23);
}
</style>
......@@ -11,14 +11,10 @@
Lisää suosikiksi
<v-icon right>mdi-close-circle</v-icon>
</v-btn>
<v-btn :disabled="!selectedKunta" color="light-green accent-4" @click="getCoords">
Hae sää
<v-icon right>mdi-close-circle</v-icon>
</v-btn>
</v-card-actions>
<favorites @pushFavorite="pullFavorite" :favorites="favorites"></favorites>
</v-card>
</v-flex>
</v-flex>
</template>
<script>
......@@ -114,7 +110,12 @@
},
mounted: function() {
this.getLocations();
}
}
},
watch: {
selectedKunta: function(){
if(this.selectedKunta)
this.getCoords();
}
}}
</script>
......@@ -2,8 +2,9 @@
<div>
<v-layout row wrap>
<Locations id="locations" @pushWeatherData="pushData" />
<Weather id="weather" @pushTemperature="pullTemperature" :values="values" :weatherData="weatherData" :kunta="selectedKunta"/>
<Clothes :temperature="temperature" />
<Clothes :temperature="temperature" />
</v-layout>
</div>
</template>
......
<template>
<v-flex xs12 md6 pa-2>
<v-card flat>
<div id="top">
<img id="icon" :src="icon">
<WeatherChart id="chart" :values="temperatures" :labels="temperaturesWithC" />
</div>
<v-card flat>
<v-layout row wrap>
<v-card-title>
<div id="location" class="left">{{ kunta }}</div>
<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>
<div id="summary">{{ summary }}</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-card-text>
<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>
......@@ -36,7 +45,8 @@
temperatures: [0, 0],
currentTemp: '-',
temperaturesWithC: ['-', '-', '-', '-', '-', '-', '-'],
icon: '/images/icons/clear-day.png',
icon_src: '/images/icons/',
icons: [],
feelsLike: '-',
summary: null,
hourLabels: [],
......@@ -46,7 +56,9 @@
interval: 3,
ticks: 1,
time: 0,
max: 18
max: 18,
wind: 0,
hours: [],
}),
props: {
weatherData: Array,
......@@ -61,9 +73,8 @@
var today = d.getDate();
var month = d.getMonth() + 1;
this.time = d.getHours();
this.ticks = parseInt((24 - this.time) / this.interval);
if (this.ticks < 1) this.ticks = 1;
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;
......@@ -74,15 +85,13 @@
if (this.max < this.interval) this.max = this.interval;
console.log(this.ticks);
console.log(this.max);
this.icon = '/images/icons/';
this.temperatures = [];
this.temperaturesWithC = [];
this.hourLabels = [];
this.dateLabels = [];
this.dateLabels = [];
this.hours = [];
this.icons = [];
//Timestampit 0 - 21
if (this.date > 0) {
......@@ -91,10 +100,11 @@
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);
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++) {
......@@ -102,7 +112,11 @@
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");
}
}
//Timestampit this.time - 21
else {
......@@ -122,12 +136,22 @@
this.temperaturesWithC.push(Math.round(this.weatherData[i].temperature));
this.temperaturesWithC[j] += '°C';
j++;
// console.log(i);
}
}
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);
}
this.$emit('pushTemperature', this.currentTemp);
},
},
......@@ -152,21 +176,16 @@
</script>
<style>
#icon {
float: left;
width: calc(20% - 40px);
margin-right: 40px;
margin-top: 10px;
.icon {
width: 70%;
}
#chart {
float: left;
width: 80%;
margin-top: 10px;
width: 100%;
}
.left {
float: left;
width: 100%;
font-size: calc(0.6vw + 30px);
text-align: left;
......@@ -208,5 +227,9 @@
margin-left: 10px;
margin-right: 10px;
}
#wind{
font-size: calc(0.2vw + 10px);
}
</style>
<template>
<div>
<v-sheet
class="v-sheet--offset mx-auto"
color="light-blue "
>
<v-layout row wrap justify-space-between>
<v-flex class="time-stamp" xs1 v-for="(hour,index) in hours" :key="index"> {{ hour }}</v-flex>
</v-layout>
<v-sparkline
:labels="labels"
:value="values"
......@@ -11,7 +15,9 @@
padding="16"
auto-draw
></v-sparkline>
</v-sheet>
</v-sheet>
</div>
</template>
<script>
......@@ -24,8 +30,15 @@
props:{
values: Array,
labels: Array,
hours: Array,
}
}
</script>
<style>
.time-stamp{
font-size: calc(6px + 0.4vw);
color: white;
}
</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