Commit 2f3f3a7f authored by Reko Meriö's avatar Reko Meriö

Parempi vaatedatan haku

parent c20a78d1
......@@ -2601,26 +2601,33 @@ __webpack_require__.r(__webpack_exports__);
});
},
clothesToArrays: function clothesToArrays() {
// 0 is empty
var j = this.getTemperatureIndex();
console.table(this.clothes[j]);
console.log(j);
this.resetVariables();
for (var i = 0; i < this.clothes.length; i++) {
if (this.clothes[i].tyyppi == 'hattu') {
this.hats.push(this.clothes[i].vaate);
for (var i = 0; i < this.clothes[j].length; i++) {
if (this.clothes[j][i].tyyppi == 'hattu') {
this.hats.push(this.clothes[j][i].vaate);
}
if (this.clothes[i].tyyppi == 'paita' || this.clothes[i].tyyppi == 'takki') {
this.upperBody.push(this.clothes[i].vaate);
if (this.clothes[j][i].tyyppi == 'paita' || this.clothes[j][i].tyyppi == 'takki') {
this.upperBody.push(this.clothes[j][i].vaate);
}
if (this.clothes[i].tyyppi == 'housut') {
this.lowerBody.push(this.clothes[i].vaate);
if (this.clothes[j][i].tyyppi == 'housut') {
this.lowerBody.push(this.clothes[j][i].vaate);
}
if (this.clothes[i].tyyppi == 'kengät') {
this.shoes.push(this.clothes[i].vaate);
if (this.clothes[j][i].tyyppi == 'kengät') {
this.shoes.push(this.clothes[j][i].vaate);
}
}
},
getTemperatureIndex: function getTemperatureIndex() {
if (this.temperature >= 20) return 1;else if (this.temperature >= 10 && this.temperature <= 19) return 2;else if (this.temperature >= 0 && this.temperature <= 9) return 3;else if (this.temperature >= -10 && this.temperature <= 0) return 4;else if (this.temperature >= -29 && this.temperature <= -20) return 5;else if (this.temperature >= -100 && this.temperature <= -30) return 6;
},
resetVariables: function resetVariables() {
this.hats = [];
this.upperBody = [];
......@@ -2634,8 +2641,11 @@ __webpack_require__.r(__webpack_exports__);
},
watch: {
temperature: function temperature() {
this.getClothes();
this.clothesToArrays();
}
},
mounted: function mounted() {
this.getClothes();
}
});
......@@ -3177,9 +3187,6 @@ __webpack_require__.r(__webpack_exports__);
}
} //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);
......@@ -3208,7 +3215,7 @@ __webpack_require__.r(__webpack_exports__);
}
for (var i = 0; i < 5; i++) {
this.dateLabels.push((today + i + '.' + month).toString());
this.dateLabels.push((today + i + '.' + month + '.').toString());
}
for (var i = 0; i < 4; i++) {
......@@ -7911,7 +7918,7 @@ exports = module.exports = __webpack_require__(/*! ../../../node_modules/css-loa
// module
exports.push([module.i, "\n.icon {\n width: calc(50% + 10px);\n}\n#chart {\n width: 100%;\n}\n.left {\n\n width: 100%;\n font-size: calc(0.6vw + 30px);\n text-align: left;\n margin-bottom: 10px;\n}\n.temperature {\n margin-right: 20px;\n margin-top: 10px;\n padding: 5px;\n font-size: 1.5vw;\n background-color: #f0fdff;\n border-radius: 5px;\n min-width: 80px;\n}\n#summary {\n width: 100%;\n text-align: left;\n font-size: calc(0.2vw + 16px);\n}\n#location {\n font-size: calc(0.2vw + 16px);\n}\n#feels-like {\n font-size: calc(0.2vw + 24px);\n}\n.label {\n float: left;\n font-size: calc(0.2vw + 8px);\n margin-bottom: -5px;\n}\n#top {\n margin-left: 10px;\n margin-right: 10px;\n}\n#wind {\n font-size: calc(0.2vw + 10px);\n}\n\n", ""]);
exports.push([module.i, "\n.icon {\n width: calc(35% + 10px);\n}\n#chart {\n width: 100%;\n}\n.left {\n\n width: 100%;\n font-size: calc(0.6vw + 30px);\n text-align: left;\n margin-bottom: 10px;\n}\n.temperature {\n margin-right: 20px;\n margin-top: 10px;\n padding: 5px;\n font-size: 1.5vw;\n background-color: #f0fdff;\n border-radius: 5px;\n min-width: 80px;\n}\n#summary {\n width: 100%;\n text-align: left;\n font-size: calc(0.2vw + 16px);\n}\n#location {\n font-size: calc(0.2vw + 16px);\n}\n#feels-like {\n font-size: calc(0.2vw + 24px);\n}\n.label {\n float: left;\n font-size: calc(0.2vw + 8px);\n margin-bottom: -5px;\n}\n#top {\n margin-left: 10px;\n margin-right: 10px;\n}\n#wind {\n font-size: calc(0.2vw + 10px);\n}\n\n", ""]);
// exports
......@@ -44182,7 +44189,7 @@ var render = function() {
max: 96,
step: "24",
ticks: "always",
"tick-size": "4",
"tick-size": "1",
color: "light-blue accent-4",
"thumb-color": "light-blue accent-4",
"track-color": "light-blue accent-1"
......@@ -44204,7 +44211,7 @@ var render = function() {
max: _vm.max,
step: _vm.interval,
ticks: "always",
"tick-size": "4",
"tick-size": "1",
color: "light-blue accent-4",
"thumb-color": "light-blue accent-4",
"track-color": "light-blue accent-1"
......@@ -44283,7 +44290,7 @@ var render = function() {
"v-sheet",
{
staticClass: "v-sheet--offset mx-auto",
attrs: { color: "light-blue " }
attrs: { color: "rgb(33, 149, 249)" }
},
[
_c(
......@@ -44293,7 +44300,7 @@ var render = function() {
return _c(
"v-flex",
{ key: index, staticClass: "time-stamp", attrs: { xs1: "" } },
[_vm._v(" " + _vm._s(hour))]
[_vm._v(" " + _vm._s(hour) + ":00")]
)
}),
1
<template>
<v-flex xs12 md6 pa-2>
<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"/>
<ClothSlider :cloth="hats" label="Hatut" />
<ClothSlider :cloth="upperBody" label="Ylävartalo" />
<ClothSlider :cloth="lowerBody" label="Housut" />
<ClothSlider :cloth="shoes" label="Kengät" />
</v-flex>
</v-flex>
</template>
<script>
......@@ -20,59 +20,76 @@
lowerBody: [],
hats: [],
shoes: [],
age: 60,
gender: "N",
age: 60,
gender: "N",
}),
props:{
weatherData: Array,
props: {
weatherData: Array,
temperature: Number,
},
components: {
components: {
ClothSlider
},
methods: {
getClothes() {
axios
.get('/api/clothes?age='+this.age+'&temperature='+this.temperature+"&gender="+this.gender)
.get('/api/clothes?age=' + this.age + '&temperature=' + this.temperature + "&gender=" + this.gender)
.then(response => (this.clothes = response.data))
.catch(error => console.log(error))
.finally(() => this.clothesToArrays())
},
clothesToArrays(){
clothesToArrays() {
// 0 is empty
var j = this.getTemperatureIndex();
console.table(this.clothes[j]);
console.log(j);
this.resetVariables();
for (var i = 0; i < this.clothes.length; i++){
if(this.clothes[i].tyyppi == 'hattu'){
this.hats.push(this.clothes[i].vaate);
for (var i = 0; i < this.clothes[j].length; i++) {
if (this.clothes[j][i].tyyppi == 'hattu') {
this.hats.push(this.clothes[j][i].vaate);
}
if(this.clothes[i].tyyppi == 'paita' || this.clothes[i].tyyppi == 'takki' ){
this.upperBody.push(this.clothes[i].vaate);
if (this.clothes[j][i].tyyppi == 'paita' || this.clothes[j][i].tyyppi == 'takki') {
this.upperBody.push(this.clothes[j][i].vaate);
}
if(this.clothes[i].tyyppi == 'housut'){
this.lowerBody.push(this.clothes[i].vaate);
if (this.clothes[j][i].tyyppi == 'housut') {
this.lowerBody.push(this.clothes[j][i].vaate);
}
if(this.clothes[i].tyyppi == 'kengät'){
this.shoes.push(this.clothes[i].vaate);
if (this.clothes[j][i].tyyppi == 'kengät') {
this.shoes.push(this.clothes[j][i].vaate);
}
}
},
getTemperatureIndex() {
if (this.temperature >= 20) return 1;
else if (this.temperature >= 10 && this.temperature <= 19) return 2;
else if (this.temperature >= 0 && this.temperature <= 9) return 3;
else if (this.temperature >= -10 && this.temperature <= 0) return 4;
else if (this.temperature >= -29 && this.temperature <= -20) return 5;
else if (this.temperature >= -100 && this.temperature <= -30) return 6;
},
resetVariables(){
resetVariables() {
this.hats = [];
this.upperBody = [];
this.lowerBody = [];
this.shoes = [];
this.hatIndex = 0;
this.upperBodyIndex = 0;
this.lowerBodyIndex = 0;
this.shoeIndex = 0;
this.upperBodyIndex = 0;
this.lowerBodyIndex = 0;
this.shoeIndex = 0;
}
},
watch: {
temperature: function() {
this.clothesToArrays();
}
},
mounted: function() {
this.getClothes();
},
watch: {
temperature: function() {
this.getClothes();
}
}
}
</script>
</script>
<template>
<v-flex xs12 md12 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="1" 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="1" 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>
......@@ -78,11 +78,11 @@
} else {
this.max = 24 - this.interval - this.time;
this.ticks = (24 - this.time) / this.interval;
if (this.ticks < 2) this.ticks = 2;
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 = [];
......@@ -119,9 +119,6 @@
}
//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);
......@@ -146,7 +143,7 @@
}
}
for (var i = 0; i < 5; i++) {
this.dateLabels.push((today + i + '.' + month).toString());
this.dateLabels.push((today + i + '.' + month + '.').toString());
}
for (var i = 0; i < 4; i++) {
if (this.date == 0)
......@@ -179,7 +176,7 @@
</script>
<style>
.icon {
width: calc(50% + 10px);
width: calc(35% + 10px);
}
#chart {
......
......@@ -2,10 +2,10 @@
<div>
<v-sheet
class="v-sheet--offset mx-auto"
color="light-blue "
color="rgb(33, 149, 249)"
>
<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-flex class="time-stamp" xs1 v-for="(hour,index) in hours" :key="index"> {{ hour }}:00</v-flex>
</v-layout>
<v-sparkline
:labels="labels"
......
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