Commit 16739b5e authored by K9260's avatar K9260 🎅🏼

Sliderit päivän ja tunnin valinnalle sekä sääkomponentin leiskaa

parent 1d9785bd
This diff is collapsed.
......@@ -2,14 +2,18 @@
<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-icon dark>keyboard_arrow_left</v-icon>
</v-btn>
<div class="cloth-info">
<div v-if="cloth[index]" class="cloth-info">
{{ label }}:
{{ cloth[index] }}
</div>
<div v-else class="cloth-info">
{{ label }}:
Valitse vapaasti
</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-icon dark>keyboard_arrow_right</v-icon>
</v-btn>
</div>
</div>
......@@ -27,6 +31,11 @@
cloth: Array,
label: String
},
watch:{
cloth: function() {
this.index = 0;
}
}
}
</script>
<style>
......
......@@ -18,11 +18,12 @@
lowerBody: [],
hats: [],
shoes: [],
age: 10,
temperature: 10,
age: 60,
gender: "N",
}),
props:{
weatherData: Array,
temperature: Number,
},
components: {
ClothSlider
......@@ -30,7 +31,7 @@
methods: {
getClothes() {
axios
.get('/api/clothes?age='+this.age+'&temperature='+this.temperature)
.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())
......@@ -52,10 +53,8 @@
}
}
},
weatherParse() {
this.temperature = this.weatherData[0].temperature;
},
resetVariables(){
resetVariables(){
this.hats = [];
this.upperBody = [];
this.lowerBody = [];
......@@ -67,12 +66,8 @@
}
},
mounted: function() {
this.getClothes();
},
watch: {
weatherData: function() {
this.weatherParse();
temperature: function() {
this.getClothes();
}
}
......
......@@ -99,10 +99,8 @@
this.values.push(this.weatherData[i].temperature);
}
//Push data to parent component, which is Main.vue
this.$emit('pushWeatherData', this.values, this.weatherData);
this.$emit('pushWeatherData', this.values, this.weatherData, this.queriedKunta);
},
},
mounted: function() {
this.getLocations();
......
......@@ -2,9 +2,9 @@
<div>
<v-layout row wrap>
<Locations id="locations" @pushWeatherData="pushData" />
<Weather id="weather" :values="values" :weatherData="weatherData"/>
<Clothes :weatherData="weatherData"/>
</v-layout>
<Weather id="weather" @pushTemperature="pushTemperature" :values="values" :weatherData="weatherData" :kunta="selectedKunta"/>
<Clothes :temperature="temperature" />
</v-layout>
</div>
</template>
......@@ -24,12 +24,18 @@
data: () => ({
values: [0, 0],
weatherData: [],
selectedKunta: null,
temperature: null,
}),
methods: {
pushData: function(chartData, weatherData) {
pushData: function(chartData, weatherData, selectedKunta) {
this.values = chartData;
this.weatherData = weatherData;
this.selectedKunta = selectedKunta;
},
pushTemperature: function(currentTemp){
this.temperature = currentTemp;
}
}
}
......
......@@ -7,23 +7,43 @@
<v-flex xs12 align-end flexbox>
<img id="icon" :src="icon">
<WeatherChart id="chart" :values="temperatures" :labels="temperaturesWithC" />
<div class="center">{{ currentTemp }}</div>
<div class="center">{{ feelsLike }}</div>
</v-flex>
</v-layout>
</v-container>
</v-img>
<v-card-title>
<div id="summary">{{summary}}</div>
<div class="temperature" v-for="(temperature, key) in temperaturesWithC" :key="temperature.key">
{{ temperature }}
</div>
</v-card-title>
</v-card>
</v-flex>
<div id="location" class="left">{{ kunta }}</div>
<div class="label">Lämpötila</div>
<div class="left">{{ currentTemp }}</div>
<div class="label">Feels like</div>
<div id="feels-like" class="left">{{ feelsLike }}</div>
<div id="summary">{{summary}}</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"
></v-slider>
<div class="label">Tunti</div>
<v-slider
v-model="hour"
:tick-labels="hourLabels"
:max="12"
step="4"
ticks="always"
tick-size="4"
></v-slider>
</v-card-text>
</v-card>
</v-flex>
</template>
<script>
......@@ -40,37 +60,61 @@
temperaturesWithC: ['-', '-', '-', '-', '-', '-', '-'],
icon: '/images/icons/clear-day.png',
feelsLike: '-',
summary: '-',
summary: null,
hourLabels: [],
hour: 0,
dateLabels: [],
date: 0,
}),
props: {
weatherData: Array,
values: Array,
kunta: String,
},
methods: {
weatherParse: function() {
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
this.icon = '/images/icons/';
this.temperatures = [];
this.temperaturesWithC = [];
this.hourLabels = [];
this.dateLabels = [];
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.icon += this.weatherData[this.hour + this.date].icon + ".png";
this.summary = this.weatherData[0].summary;
this.currentTemp = this.weatherData[0].temperature + '°C';
this.feelsLike = this.weatherData[0].apparentTemperature + '°C';
this.icon += this.weatherData[0].icon + ".png";
for (var i = 0; i < this.weatherData.length - 1; i += 24) {
for (var i = this.hour + this.date; i < this.hour + this.date + 4; 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());
}
for (var i = 0; i < 5; i++) {
this.dateLabels.push((today + i + '.' + month).toString());
}
}
this.$emit('pushTemperature', this.currentTemp);
},
},
watch: { //Runs the function if weatherData changes
weatherData: function() {
this.weatherParse();
}
},
hour: function(){
if(this.weatherData[0])
this.weatherParse();
},
date: function(){
if(this.weatherData[0])
this.weatherParse();
}
}
}
......@@ -87,13 +131,14 @@
width: 80%;
}
.center {
.left {
float: left;
margin-right: 50px;
font-size: 2.5vw;
width: 100%;
font-size: calc(0.6vw + 30px);
text-align:left;
margin-bottom: 10px;
}
#daily {}
.temperature {
margin-right: 20px;
......@@ -107,5 +152,17 @@
#summary{
width: 100%;
text-align: left;
font-size: calc(0.2vw + 16px);
}
#location{
font-size: calc(0.2vw + 16px);
}
#feels-like{
font-size: calc(0.2vw + 24px);
}
.label {
float:left;
font-size: calc(0.2vw + 8px);
margin-bottom: -5px;
}
</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