85 lines
2.8 KiB
Svelte
85 lines
2.8 KiB
Svelte
<script>
|
|
import Apiclient from '$lib/Apiclient';
|
|
$: urls = [];
|
|
let urlQuery = Apiclient.getUrls().then((res) => {
|
|
urls = res;
|
|
});
|
|
|
|
function deleteUrl(shortcode) {
|
|
Apiclient.deleteUrl(shortcode).then(() => {
|
|
urls = urls.filter((url) => url.shortcode != shortcode);
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<h2 class="text-3xl font-bold text-gray-800 dark:text-gray-100 pb-6">Manage all links</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">
|
|
Target
|
|
</th>
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">
|
|
Visits
|
|
</th>
|
|
<th scope="col" class="relative px-6 py-3">
|
|
<span class="sr-only">Edit</span>
|
|
</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">
|
|
<a href="#">Loading data...</a>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm"> Loading data... </td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
|
<button
|
|
class="text-indigo-600 dark:text-red-600 hover:text-indigo-900 dark:hover:text-red-900"
|
|
>Delete</button
|
|
>
|
|
</td>
|
|
</tr>
|
|
{:then}
|
|
{#each urls as url}
|
|
<tr>
|
|
<td
|
|
class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-200"
|
|
>
|
|
{url.shortcode}
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm">
|
|
<a href={url.target}>{url.target}</a>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm"> {url.visits} </td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
|
<button
|
|
on:click={deleteUrl(url.shortcode)}
|
|
class="px-4 py-2 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-red-600 rounded-md hover:bg-red-700 focus:outline-none focus:bg-red-700"
|
|
>
|
|
Delete
|
|
</button>
|
|
<a
|
|
href={`/details?shortcode=${url.shortcode}`}
|
|
class="px-4 py-2 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-blue-600 rounded-md hover:bg-blue-700 focus:outline-none focus:bg-blue-700"
|
|
>
|
|
Details
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
{/each}
|
|
{/await}
|
|
</tbody>
|
|
</table>
|
|
</div>
|