Added new "visits" page

This commit is contained in:
Nicolai Ort 2021-08-21 10:10:51 +02:00
parent 58adc6511a
commit b655ff2372
Signed by: niggl
GPG Key ID: 13AFA55AF62F269F
1 changed files with 69 additions and 0 deletions

69
src/routes/visits.svelte Normal file
View File

@ -0,0 +1,69 @@
<script>
import Apiclient from '$lib/Apiclient';
import UserStore from '$lib/UserStore';
import { onDestroy } from 'svelte';
$: visits = [];
let visitQuery;
// Yes i know this isn't the best way to implement this, but linkylinky dashboard is just a oneshot sideproject r/n.
const unsubscribe = UserStore.subscribe((value) => {
if (value.isLoggedIn && visit.length == 0) {
visitQuery = Apiclient.getVisits().then((res) => {
visits = res;
});
}
});
onDestroy(unsubscribe);
</script>
<h2 class="text-3xl font-bold text-gray-800 dark:text-gray-100 pb-6">View all visits</h2>
<div class="rounded-xl">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-100">
<tr>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">
Shortcode
</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">
Provider
</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">
Timestamp
</th>
</tr>
</thead>
<tbody class="bg-white dark:bg-gray-700 divide-y divide-gray-200 dark:text-gray-100" x-max="1">
{#await urlQuery}
<tr>
<td
class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-200"
>
Loading data...
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm"> Loading data... </td>
<td class="px-6 py-4 whitespace-nowrap text-sm"> Loading data... </td>
</tr>
{:then}
{#each visits as visit}
<tr>
<td
class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-200"
>
{#if visit.provider == "native"}
<a href={`./details/${visit.shortcode}`}>{visit.shortcode}</a>
{:else}
{visit.shortcode}
{/if}
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm">
{visit.provider}
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm"> {visit.timestamp} </td>
</tr>
{/each}
{/await}
</tbody>
</table>
</div>