2021-08-16 16:27:09 +00:00
|
|
|
<script>
|
|
|
|
import { page } from '$app/stores';
|
|
|
|
import Apiclient from '$lib/Apiclient';
|
2021-08-21 06:34:33 +00:00
|
|
|
import UserStore from '$lib/UserStore';
|
|
|
|
import { onDestroy } from 'svelte';
|
2021-08-16 16:27:09 +00:00
|
|
|
|
|
|
|
let shortcode = $page.query.get('shortcode');
|
2021-08-21 06:34:33 +00:00
|
|
|
|
2021-08-16 16:27:09 +00:00
|
|
|
$: urlDetails = {
|
|
|
|
shortcode: 'Loading...',
|
|
|
|
url: 'Loading...',
|
|
|
|
target: 'Loading...',
|
|
|
|
visits: 'Loading...'
|
|
|
|
};
|
|
|
|
$: urlVisists = [];
|
2021-08-21 06:34:33 +00:00
|
|
|
let visitQuery;
|
2021-08-16 16:27:09 +00:00
|
|
|
|
2021-08-21 06:34:33 +00:00
|
|
|
const unsubscribe = UserStore.subscribe((value) => {
|
|
|
|
if (value.isLoggedIn) {
|
|
|
|
Apiclient.getUrlDetails(shortcode).then((res) => {
|
|
|
|
urlDetails = res;
|
|
|
|
});
|
|
|
|
visitQuery = Apiclient.getUrlVisits(shortcode).then((res) => {
|
|
|
|
urlVisists = res;
|
|
|
|
});
|
|
|
|
}
|
2021-08-16 16:27:09 +00:00
|
|
|
});
|
2021-08-21 06:34:33 +00:00
|
|
|
|
|
|
|
onDestroy(unsubscribe);
|
2021-08-16 16:27:09 +00:00
|
|
|
</script>
|
|
|
|
|
|
|
|
<h2 class="text-3xl font-bold text-gray-800 dark:text-gray-100 pb-6">Details: {shortcode}</h2>
|
|
|
|
|
|
|
|
<div class="text-gray-800 dark:text-gray-100">
|
|
|
|
<span>Shortcode:</span>
|
|
|
|
{urlDetails.shortcode} <br />
|
|
|
|
<span>URL:</span>
|
|
|
|
{urlDetails.url} <br />
|
|
|
|
<span>Target:</span>
|
|
|
|
{urlDetails.target} <br />
|
|
|
|
<span>Visits:</span>
|
|
|
|
{urlDetails.visits}
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<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">
|
|
|
|
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 visitQuery}
|
|
|
|
<tr>
|
|
|
|
<td
|
|
|
|
class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-200"
|
|
|
|
>
|
|
|
|
Loading data...
|
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
{:then}
|
|
|
|
{#each urlVisists as visit}
|
|
|
|
<tr>
|
|
|
|
<td
|
|
|
|
class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-200"
|
|
|
|
>
|
|
|
|
{visit.timestamp}
|
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
{/each}
|
|
|
|
{/await}
|
|
|
|
</tbody>
|
|
|
|
</table>
|
|
|
|
</div>
|