Make StatisticsOverview and WeekSummary async

This commit is contained in:
Marcel Schwarz 2020-09-20 03:11:48 +02:00
parent 9fd0055f36
commit 3450ce6f87
2 changed files with 52 additions and 7 deletions

View File

@ -2,7 +2,7 @@
<div> <div>
<v-row class="ma-5"> <v-row class="ma-5">
<v-col cols="4"> <v-col cols="4">
<WorkPausePie/> <work-pause-pie/>
</v-col> </v-col>
<v-col cols="4"> <v-col cols="4">
<account-pie/> <account-pie/>
@ -13,12 +13,12 @@
</v-row> </v-row>
<v-row class="ma-5"> <v-row class="ma-5">
<v-col cols="12"> <v-col cols="12">
<MonthSummary/> <month-summary/>
</v-col> </v-col>
</v-row> </v-row>
<v-row class="ma-5"> <v-row class="ma-5">
<v-col cols="12"> <v-col cols="12">
<WeekSummary/> <week-summary :records="records"/>
</v-col> </v-col>
</v-row> </v-row>
</div> </div>
@ -30,6 +30,8 @@
import MonthSummary from "./charts/MonthSummary.vue"; import MonthSummary from "./charts/MonthSummary.vue";
import WorkPausePie from "./charts/WorkPausePie.vue"; import WorkPausePie from "./charts/WorkPausePie.vue";
import AccountPie from "./charts/AccountPie.vue"; import AccountPie from "./charts/AccountPie.vue";
import axios from "axios"
import {BASE_URI} from "../../globals"
export default { export default {
name: "StatisticOverview", name: "StatisticOverview",
@ -39,8 +41,34 @@
MonthSummary, MonthSummary,
WorkPausePie, WorkPausePie,
AccountPie AccountPie
},
data() {
return {
accounts: [],
records: []
}
},
async mounted() {
let recordsResponse
let link = BASE_URI + "/records/search/allForUser?"
+ "username=" + sessionStorage.getItem("username") + "&"
+ "projection=overview"
do {
recordsResponse = await axios.get(link)
link = recordsResponse.data._links?.next?.href
this.records.push(...recordsResponse.data._embedded.records)
} while (link)
let accountsResponse
link = BASE_URI + "/accounts/search/findByUsername?"
+ "username=" + sessionStorage.getItem("username")
do {
accountsResponse = await axios.get(link)
link = accountsResponse.data._links?.next?.href
this.accounts.push(...accountsResponse.data._embedded.accounts)
} while(link)
}
} }
};
</script> </script>
<style scoped> <style scoped>

View File

@ -3,8 +3,8 @@
<div> <div>
<p></p> <p></p>
<h3 align="center">My last 7 Days</h3> <h3 align="center">My last 7 Days</h3>
<div id="chart"> <div>
<apexchart :options="chartOptions" :series="series" class="ma-5" height="350" type="bar"></apexchart> <apexchart ref="chart" :options="chartOptions" :series="series" class="ma-5" height="350" type="bar"></apexchart>
</div> </div>
</div> </div>
</v-card> </v-card>
@ -18,6 +18,9 @@
export default { export default {
name: "WeekSummary", name: "WeekSummary",
props: [
"records"
],
components: { components: {
apexchart: VueApexCharts apexchart: VueApexCharts
}, },
@ -100,7 +103,21 @@
} }
}; };
}, },
created() { async created() {
let firstDate = new Date()
firstDate.setDate(firstDate.getDate() - 7)
let interestingData = this.records.filter(record => new Date(record.startdate) > firstDate)
if (interestingData.length === 0) return
let test = new Date(interestingData[0].startdate)
let dateFormat = new Intl.DateTimeFormat("de-DE", {day: "2-digit", month: "short"})
console.log(dateFormat.format(test))
setTimeout(() => {
this.series[1].data[4] = 6000
this.$refs.chart.refresh()
}, 2000)
var daysToDisplay = 8; var daysToDisplay = 8;
var xhttp = new XMLHttpRequest(); var xhttp = new XMLHttpRequest();
var records = new Array(0); var records = new Array(0);