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>
<v-row class="ma-5">
<v-col cols="4">
<WorkPausePie/>
<work-pause-pie/>
</v-col>
<v-col cols="4">
<account-pie/>
@ -13,12 +13,12 @@
</v-row>
<v-row class="ma-5">
<v-col cols="12">
<MonthSummary/>
<month-summary/>
</v-col>
</v-row>
<v-row class="ma-5">
<v-col cols="12">
<WeekSummary/>
<week-summary :records="records"/>
</v-col>
</v-row>
</div>
@ -30,6 +30,8 @@
import MonthSummary from "./charts/MonthSummary.vue";
import WorkPausePie from "./charts/WorkPausePie.vue";
import AccountPie from "./charts/AccountPie.vue";
import axios from "axios"
import {BASE_URI} from "../../globals"
export default {
name: "StatisticOverview",
@ -39,8 +41,34 @@
MonthSummary,
WorkPausePie,
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>
<style scoped>

View File

@ -3,8 +3,8 @@
<div>
<p></p>
<h3 align="center">My last 7 Days</h3>
<div id="chart">
<apexchart :options="chartOptions" :series="series" class="ma-5" height="350" type="bar"></apexchart>
<div>
<apexchart ref="chart" :options="chartOptions" :series="series" class="ma-5" height="350" type="bar"></apexchart>
</div>
</div>
</v-card>
@ -18,6 +18,9 @@
export default {
name: "WeekSummary",
props: [
"records"
],
components: {
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 xhttp = new XMLHttpRequest();
var records = new Array(0);