kauft.es/linkylinky-dashboard
4
0
Fork 0
Code Issues 1 Pull Requests 2 Projects Releases Wiki Activity

Formatting/Linting

Browse Source
This commit is contained in:
Nicolai Ort
2021-08-16 18:27:09 +02:00
parent c4e1b5e445
commit 08520ac616
12 changed files with 422 additions and 415 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
src/routes/details.svelte
View File

@@ -1,66 +1,66 @@
<script>
import { page } from '$app/stores';
import Apiclient from '$lib/Apiclient';
let shortcode = $page.query.get('shortcode');
$: urlDetails = {
shortcode: 'Loading...',
url: 'Loading...',
target: 'Loading...',
visits: 'Loading...'
};
$: urlVisists = [];
Apiclient.getUrlDetails(shortcode).then((res) => {
urlDetails = res;
});
let visitQuery = Apiclient.getUrlVisits(shortcode).then((res) => {
urlVisists = res;
});
</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>
<script>
import { page } from '$app/stores';
import Apiclient from '$lib/Apiclient';
let shortcode = $page.query.get('shortcode');
$: urlDetails = {
shortcode: 'Loading...',
url: 'Loading...',
target: 'Loading...',
visits: 'Loading...'
};
$: urlVisists = [];
Apiclient.getUrlDetails(shortcode).then((res) => {
urlDetails = res;
});
let visitQuery = Apiclient.getUrlVisits(shortcode).then((res) => {
urlVisists = res;
});
</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>

2
src/routes/index.svelte
View File

@@ -36,4 +36,4 @@
/>
</svg>
</Statscard>
</div>
</div>

168
src/routes/links.svelte
View File

@@ -1,84 +1,84 @@
<script>
import Apiclient from '$lib/Apiclient';
$: urls = [];
let urlQuery = Apiclient.getUrls().then((res) => {
urls = res;
});
function deleteUrl(shortcode) {
Apiclient.deleteUrl(shortcode).then((res) => {
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>
<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>