Commit 074ab4e3 authored by K9260's avatar K9260 🎅🏼

Vaatteiden selailu onnistuu

parent 7d1dc0b3
This diff is collapsed.
<template>
<div><button @click="getLocations"></button></div>
<div id="cloth-picker">
<div class="clothes-child">
<v-btn :disabled="!hats[hatIndex - 1]" class="previousButton" fab small color="light-green accent-4" @click="hatIndex--">
<v-icon dark>remove</v-icon>
</v-btn>
<div class="cloth-info">
Hatut:
{{ hats[hatIndex] }}
</div>
<v-btn :disabled="!hats[hatIndex + 1]" class="nextButton" fab small color="light-green accent-4" @click="hatIndex++">
<v-icon dark>add</v-icon>
</v-btn>
</div>
<div class="clothes-child">
<v-btn :disabled="!upperBody[upperBodyIndex - 1]" class="previousButton" fab small color="light-green accent-4" @click="upperBodyIndex--">
<v-icon dark>remove</v-icon>
</v-btn>
<div class="cloth-info">
Yläosa:
{{ upperBody[upperBodyIndex] }}
</div>
<v-btn :disabled="!upperBody[upperBodyIndex + 1]" class="nextButton" fab small color="light-green accent-4" @click="upperBodyIndex++">
<v-icon dark>add</v-icon>
</v-btn>
</div>
<div class="clothes-child">
<v-btn :disabled="!lowerBody[lowerBodyIndex - 1]" class="previousButton" fab small color="light-green accent-4" @click="lowerBodyIndex--">
<v-icon dark>remove</v-icon>
</v-btn>
<div class="cloth-info">
Housut:
{{ lowerBody[lowerBodyIndex] }}
</div>
<v-btn :disabled="!lowerBody[lowerBodyIndex + 1]" class="nextButton" fab small color="light-green accent-4" @click="lowerBodyIndex++">
<v-icon dark>add</v-icon>
</v-btn>
</div>
<div class="clothes-child">
<v-btn :disabled="!shoes[shoeIndex - 1]" class="previousButton" fab small color="light-green accent-4" @click="shoeIndex--">
<v-icon dark>remove</v-icon>
</v-btn>
<div class="cloth-info">
Kengät:
{{ shoes[shoeIndex] }}
</div>
<v-btn :disabled="!shoes[shoeIndex + 1]" class="nextButton" fab small color="light-green accent-4" @click="shoeIndex++">
<v-icon dark>add</v-icon>
</v-btn>
</div>
</div>
</template>
......@@ -7,18 +61,107 @@
export default {
name: 'Clothing',
data: () => ({
clothes: []
clothes: [],
upperBody: [],
lowerBody: [],
hats: [],
shoes: [],
age: 10,
temperature: 10,
hatIndex: 0,
upperBodyIndex: 0,
lowerBodyIndex: 0,
shoeIndex: 0,
}),
props:{
weatherData: Array,
},
methods: {
getLocations() {
getClothes() {
axios
.get('/api/clothes?age=10&temperature=10')
.get('/api/clothes?age='+this.age+'&temperature='+this.temperature)
.then(response => (this.clothes = response.data))
.catch(error => console.log(error))
.finally(() => console.log(clothes))
}
}
.finally(() => this.clothesToArrays())
},
clothesToArrays(){
this.resetVariables();
for (var i = 0; i < this.clothes.length; i++){
if(this.clothes[i].tyyppi == 'hattu'){
this.hats.push(this.clothes[i].vaate);
}
if(this.clothes[i].tyyppi == 'paita' || this.clothes[i].tyyppi == 'takki' ){
this.upperBody.push(this.clothes[i].vaate);
}
if(this.clothes[i].tyyppi == 'housut'){
this.lowerBody.push(this.clothes[i].vaate);
}
if(this.clothes[i].tyyppi == 'kengät'){
this.shoes.push(this.clothes[i].vaate);
}
}
console.log(this.clothes);
},
weatherParse() {
this.temperature = this.weatherData[0].temperature;
},
resetVariables(){
this.hats = [];
this.upperBody = [];
this.lowerBody = [];
this.shoes = [];
this.hatIndex = 0;
this.upperBodyIndex = 0;
this.lowerBodyIndex = 0;
this.shoeIndex = 0;
}
},
mounted: function() {
this.getClothes();
},
watch: {
weatherData: function() {
this.weatherParse();
this.getClothes();
}
}
}
</script>
<style>
#cloth-picker{
width: 100%;
font-size: 30px;
background-color: #f1f1f1;
padding: 30px;
border-radius: 5px;
text-align: center;
margin:auto;
font-family: inherit;
}
.clothes{
margin: auto;
margin-top: 50px;
list-style: none;
}
.clothes-child{
font-size: 1.2vw;
text-decoration: none;
float: left;
width: 100%;
text-align:center;
}
.cloth-info{
float:left;
text-align:center;
margin-left: 30%;
}
.previousButton{
float: left;
}
.nextButton{
float: right;
}
</style>
......@@ -6,7 +6,7 @@
<template v-slot:header>
<div>Suosikit</div>
</template>
<v-card>
<v-card color="grey lighten-3">
<v-card-text @click="pickLocation" v-for="favorite in favorites" :key="favorite" > {{ favorite }}</v-card-text>
</v-card>
</v-expansion-panel-content>
......
......@@ -2,7 +2,7 @@
<v-flex xs12 md6 pa-2>
<v-card color="transparent" flat>
<v-card-text>
<v-autocomplete 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-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>
......@@ -11,7 +11,7 @@
Lisää suosikiksi
<v-icon right>mdi-close-circle</v-icon>
</v-btn>
<v-btn :disabled="!selectedKunta" color="#64dd17" @click="getCoords">
<v-btn :disabled="!selectedKunta" color="light-green accent-4" @click="getCoords">
Hae sää
<v-icon right>mdi-close-circle</v-icon>
</v-btn>
......
......@@ -3,7 +3,7 @@
<v-layout row wrap>
<Locations id="locations" @pushWeatherData="pushData" />
<Weather id="weather" :values="values" :weatherData="weatherData"/>
<Clothes/>
<Clothes :weatherData="weatherData"/>
</v-layout>
</div>
</template>
......
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