feat: update activity page, + fallbacks

This commit is contained in:
Arman
2022-09-05 13:41:50 +02:00
parent 6669cd9c60
commit d1237e99ed
2 changed files with 54 additions and 38 deletions
@@ -21,7 +21,7 @@
$: request = sdkForProject.teams.listLogs($page.params.team, $pageLimit, offset);
const getBrowser = (clientCode: string) => {
return sdkForProject.avatars.getBrowser(clientCode, 40, 40);
return sdkForProject.avatars.getBrowser(clientCode, 80, 80);
};
</script>
@@ -42,21 +42,31 @@
{#each response.logs as log}
<TableRow>
<TableCell title="Client">
<div class="u-flex u-cross-center u-gap-12">
<div class="avatar is-small">
<img
height="20"
width="20"
src={getBrowser(log.clientCode).toString()}
alt={log.clientName} />
{#if log.clientName}
<div class="u-flex u-cross-center u-gap-12">
<div class="avatar is-small">
<img
height="20"
width="20"
src={getBrowser(log.clientCode).toString()}
alt={log.clientName} />
</div>
<p class="text u-trim">
{log.clientName}
{log.clientVersion}
on {log.osName}
{log.osVersion}
</p>
</div>
<p class="text u-trim">
{log.clientName}
{log.clientVersion}
on {log.osName}
{log.osVersion}
</p>
</div>
{:else}
<div class="u-flex u-cross-center u-gap-12">
<p class="text u-trim">
<span class="avatar is-color-empty" />
Unknown
</p>
</div>
{/if}
</TableCell>
<TableCellText title="Event">{log.event}</TableCellText>
@@ -14,14 +14,14 @@
import { Container } from '$lib/layout';
import { toLocaleDateTime } from '$lib/helpers/date';
import { sdkForProject } from '$lib/stores/sdk';
import { pageLimit } from '$lib/stores/layout';
let offset = 0;
const limit = 25;
$: request = sdkForProject.users.getLogs($page.params.user, limit, offset);
$: request = sdkForProject.users.getLogs($page.params.user, $pageLimit, offset);
const getBrowser = (clientCode: string) => {
return sdkForProject.avatars.getBrowser(clientCode, 40, 40);
return sdkForProject.avatars.getBrowser(clientCode, 80, 80);
};
</script>
@@ -42,31 +42,37 @@
{#each response.logs as log}
<TableRow>
<TableCell title="Client">
<div class="u-flex u-cross-center u-gap-12">
<div class="avatar is-small">
<img
height="20"
width="20"
src={getBrowser(log.clientCode).toString()}
alt={log.clientName} />
{#if log.clientName}
<div class="u-flex u-cross-center u-gap-12">
<div class="avatar is-small">
<img
height="20"
width="20"
src={getBrowser(log.clientCode).toString()}
alt={log.clientName} />
</div>
<p class="text u-trim">
{log.clientName}
{log.clientVersion}
on {log.osName}
{log.osVersion}
</p>
</div>
<p class="text u-trim">
{log.clientName}
{log.clientVersion}
on {log.osName}
{log.osVersion}
</p>
</div>
{:else}
<div class="u-flex u-cross-center u-gap-12">
<p class="text u-trim">
<span class="avatar is-color-empty" />
Unknown
</p>
</div>
{/if}
</TableCell>
<TableCellText title="Event">{log.event}</TableCellText>
<TableCellText title="Location">
{#if log.countryCode !== '--'}
<img
src={sdkForProject.avatars
.getFlag(log.countryCode, 32, 32)
.toString()}
alt={log.countryName} />{log.countryName}
{log.countryName}
{:else}
Unknown
{/if}
@@ -95,7 +101,7 @@
{/if}
<div class="u-flex u-margin-block-start-32 u-main-space-between">
<p class="text">Total results: {response.total}</p>
<Pagination {limit} bind:offset sum={response.total} />
<Pagination limit={$pageLimit} bind:offset sum={response.total} />
</div>
{/await}
</Container>