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

Vaatetuksen esitys jaettu osiin

parent 074ab4e3
This diff is collapsed.
<template>
<div id="cloth-picker">
<div class="clothes-child">
<v-btn :disabled="!cloth[index - 1]" class="previousButton" fab small color="light-green accent-4" @click="index--">
<v-icon dark>remove</v-icon>
</v-btn>
<div class="cloth-info">
{{ label }}:
{{ cloth[index] }}
</div>
<v-btn :disabled="!cloth[index + 1]" class="nextButton" fab small color="light-green accent-4" @click="index++">
<v-icon dark>add</v-icon>
</v-btn>
</div>
</div>
</template>
<script>
export default {
name: 'ClothSlider',
data: () => ({
index: 0,
}),
props:{
cloth: Array,
label: String
},
}
</script>
<style>
.clothes-child{
font-size:calc(6px + 0.8vw);
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>
<template>
<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>
<ClothSlider :cloth="hats" label="Hatut"/>
<ClothSlider :cloth="upperBody" label="Ylävartalo"/>
<ClothSlider :cloth="lowerBody" label="Housut"/>
<ClothSlider :cloth="shoes" label="Kengät"/>
</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>
<script>
import ClothSlider from './ClothSlider'
export default {
name: 'Clothing',
name: 'Cloth',
data: () => ({
clothes: [],
upperBody: [],
......@@ -68,14 +20,12 @@
shoes: [],
age: 10,
temperature: 10,
hatIndex: 0,
upperBodyIndex: 0,
lowerBodyIndex: 0,
shoeIndex: 0,
}),
props:{
weatherData: Array,
},
components: {
ClothSlider
},
methods: {
getClothes() {
......@@ -101,7 +51,6 @@
this.shoes.push(this.clothes[i].vaate);
}
}
console.log(this.clothes);
},
weatherParse() {
this.temperature = this.weatherData[0].temperature;
......@@ -115,7 +64,7 @@
this.upperBodyIndex = 0;
this.lowerBodyIndex = 0;
this.shoeIndex = 0;
}
}
},
mounted: function() {
......@@ -140,28 +89,4 @@
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>
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