torjus/apiary
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Change homecomponent to use properties for display

Browse Source
This commit is contained in:
Torjus Håkestad 2021-04-11 12:07:31 +02:00
parent 0e6679d628
commit 49493cec76
1 changed files with 27 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
web/frontend/src/components/Home.vue
View File

@ -6,7 +6,7 @@
<h2>Total login attempts</h2> <h2>Total login attempts</h2>
</b-col> </b-col>
<b-col class="total-count"> <b-col class="total-count">
<h2>{{ getStat('TotalLoginAttempts') }}</h2> <h2>{{ totalLoginAttempts }}</h2>
</b-col> </b-col>
</b-row> </b-row>
<b-row> <b-row>
@ -14,7 +14,7 @@
<h2>Unique passwords</h2> <h2>Unique passwords</h2>
</b-col> </b-col>
<b-col class="total-count"> <b-col class="total-count">
<h2>{{ getStat('UniquePasswords') }}</h2> <h2>{{ uniquePasswords }}</h2>
</b-col> </b-col>
</b-row> </b-row>
<b-row> <b-row>
@ -22,7 +22,7 @@
<h2>Unique usernames</h2> <h2>Unique usernames</h2>
</b-col> </b-col>
<b-col class="total-count"> <b-col class="total-count">
<h2>{{ getStat('UniqueUsernames') }}</h2> <h2>{{ uniqueUsernames }}</h2>
</b-col> </b-col>
</b-row> </b-row>
<b-row> <b-row>
@ -30,7 +30,7 @@
<h2>Unique IPs</h2> <h2>Unique IPs</h2>
</b-col> </b-col>
<b-col class="total-count"> <b-col class="total-count">
<h2>{{ getStat('UniqueIPs') }}</h2> <h2>{{ uniqueIPs }}</h2>
</b-col> </b-col>
</b-row> </b-row>
</b-container> </b-container>
@ -55,27 +55,38 @@ interface TotalStatsResult {
@Component @Component
export default class Home extends Vue { export default class Home extends Vue {
totalStats?: TotalStatsResult[]; totalLoginAttempts?: number;
uniquePasswords?: number;
uniqueUsernames?: number;
uniqueIPs?: number;
uniqueCountries?: number;
ready = false; ready = false;
@Watch('totalStats', { immediate: true, deep: true })
getStat(key: TotalStatsHeaders): string | undefined {
const result = this.totalStats?.find((elem) => elem.name === key);
if (result) {
return Number(result?.count).toLocaleString();
}
return undefined;
}
updateStats(): void { updateStats(): void {
const url = `/api/stats?type=total`; const url = `/api/stats?type=total`;
axios axios
.get<TotalStatsResult[]>(url) .get<TotalStatsResult[]>(url)
.then((resp) => { .then((resp) => {
this.totalStats = resp.data; this.totalLoginAttempts = resp.data.find(
(e) => e.name == 'TotalLoginAttempts',
)?.count;
this.uniquePasswords = resp.data.find(
(e) => e.name == 'UniquePasswords',
)?.count;
this.uniqueUsernames = resp.data.find(
(e) => e.name == 'UniqueUsernames',
)?.count;
this.uniqueIPs = resp.data.find((e) => e.name == 'UniqueIPs')?.count;
this.uniqueCountries = resp.data.find(
(e) => e.name == 'UniqueCountries',
)?.count;
this.ready = true; this.ready = true;
console.log(this.totalStats);
}) })
.catch((e) => { .catch((e) => {
console.log(e); console.log(e);