The data is for the moment registered in raw I still have to make it dynamic but I would like to make a kind of diagram with the data present. Like in this picture:
I don’t really know where to start I tried to look for diagrams but nothing really matches…
Here is my code:
<template>
<v-row>
<v-col cols="5" lg="8" md="6" sm="5" class="months">
<div v-for="(month) in months" :key=month.id :value="month" class="month">
<h3>{{month.month}}</h3>
</div>
</v-col>
<v-container style="max-width: 100%; height: 420px;" class="overflow-y-auto scrollbar-hidden card-association">
<p v-for="(s) in sowing" :key="s.id" :value="s">Sowing : {{s.start[0] === 1 ? "January" : ""}} to {{s.end[0] === 5 ? "May" : ""}}</p>
<p v-for="(p) in planting" :key="p.id" :value="p">Planting : {{p.start[0] === 3 ? "March" : ""}} to {{p.end[0] === 8 ? "August" : ""}}</p>
<p v-for="(h) in harvesting" :key="h.id" :value="h">Harvesting : {{h.start[0] === 7 ? "July" : ""}} to {{h.end[0] === 11 ? "November" : ""}}</p>
</v-container>
</v-row>
</template>
<script>
import { mapGetters } from "vuex";
export default {
props: {
},
data: () => ({
months: [
{id: 1, month:'January'},
{id: 2, month:'February'},
{id: 3, month:'March'},
{id: 4, month:'April'},
{id: 5, month:'May'},
{id: 6, month:'June'},
{id: 7, month:'July'},
{id: 8, month:'August'},
{id: 9, month:'September'},
{id: 10, month:'October'},
{id: 11, month:'November'},
{id: 12, month:'December'}
],
sowing: [],
planting: [],
harvesting: [],
}),
computed: {
console: () => console,
...mapGetters({
plantActive: 'permatheque/getPlant',
}),
},
methods: {
async getPlantStepSowing() {
this.$axios.$get('/lnk/plant/steps?plant_id_id='+this.plantActive.id+'&step_title=Sowing')
.then(response => {
this.sowing = response
console.log(this.sowing)
}).catch(error => {
console.log(error)
});
},
async getPlantStepPlanting() {
this.$axios.$get('/lnk/plant/steps?plant_id_id='+this.plantActive.id+'&step_title=Planting')
.then(response => {
this.planting = response
console.log(this.planting)
}).catch(error => {
console.log(error)
});
},
async getPlantStepHarvesting() {
this.$axios.$get('/lnk/plant/steps?plant_id_id='+this.plantActive.id+'&step_title=Harvesting')
.then(response => {
this.harvesting = response
console.log(this.harvesting)
}).catch(error => {
console.log(error)
});
},
},
mounted() {
this.getPlantStepSowing();
this.getPlantStepPlanting();
this.getPlantStepHarvesting();
}
}
</script>And what it looks like now:
And here is an example of what I get in response with the API:
[
{
"id": 9,
"plant_id": {
"id": 136,
"name": "Basilic"
},
"start": [
7
],
"end": [
11
],
"step_title": "Harvesting",
"step_order": 3,
"step_subtitle": "Récolte",
"help": ""
}
]