Add icons to menu and versions page

This commit is contained in:
Fred Boniface 2024-04-17 09:59:32 +01:00
parent 0a666afc58
commit 33fb2a607f
2 changed files with 23 additions and 11 deletions

View File

@ -1,19 +1,20 @@
<script> <script>
import Header from '$lib/navigation/header.svelte'; import Header from '$lib/navigation/header.svelte';
import Nav from '$lib/navigation/nav.svelte'; import Nav from '$lib/navigation/nav.svelte';
import { IconCode, IconHelp, IconInfoCircle, IconLocation, IconMessageCode, IconNumber, IconSettings, IconSpy, IconUser, IconUserPlus, IconVersions } from '@tabler/icons-svelte';
const title = 'More'; const title = 'More';
const links = [ const links = [
{ title: 'Your Data', path: '/more/data' }, { title: 'Your Data', path: '/more/data', icon: IconUser},
{ title: 'Registration', path: '/more/reg' }, { title: 'Registration', path: '/more/reg', icon: IconUserPlus },
{ title: 'Settings', path: '/more/settings' }, { title: 'Settings', path: '/more/settings', icon: IconSettings },
{ title: 'Help', path: '/more/help' }, { title: 'Help', path: '/more/help', icon: IconHelp },
{ title: 'About', path: '/more/about' }, { title: 'About', path: '/more/about', icon: IconInfoCircle },
{ title: 'Location Reference Code Lookup', path: '/more/corpus' }, { title: 'Location Reference Code Lookup', path: '/more/corpus', icon: IconLocation },
{ title: 'Reason Code Lookup', path: '/more/reasons' }, { title: 'Reason Code Lookup', path: '/more/reasons', icon: IconMessageCode },
{ title: 'Privacy Policy', path: '/more/privacy' }, { title: 'Privacy Policy', path: '/more/privacy', icon: IconSpy },
{ title: 'Component Versions', path: '/more/versions' }, { title: 'Component Versions', path: '/more/versions', icon: IconVersions },
{ title: 'Statistics', path: '/more/statistics' } { title: 'Statistics', path: '/more/statistics', icon: IconNumber }
]; ];
</script> </script>
@ -22,6 +23,7 @@
{#each links as item} {#each links as item}
<a href={item.path}> <a href={item.path}>
<div> <div>
<svelte:component this={item.icon} />
<p>{item.title}</p> <p>{item.title}</p>
</div> </div>
</a> </a>
@ -37,8 +39,12 @@
border-width: 1px; border-width: 1px;
border-style: solid; border-style: solid;
border-left: none; border-left: none;
padding-left: 0.5rem;
border-right: none; border-right: none;
height: 50px; height: 50px;
display: flex;
align-items: center;
margin-bottom: 0.5rem;
} }
a { a {
text-decoration: none; text-decoration: none;

View File

@ -6,6 +6,7 @@
import LargeLogo from '$lib/images/large-logo.svelte'; import LargeLogo from '$lib/images/large-logo.svelte';
import { version, versionTag } from '$lib/stores/version'; import { version, versionTag } from '$lib/stores/version';
import { getApiUrl } from '$lib/scripts/upstream'; import { getApiUrl } from '$lib/scripts/upstream';
import { IconBrandGolang, IconBrandJavascript, IconBrandPython, IconBrandSvelte, IconBrandTypescript, IconFileTypeSql } from '@tabler/icons-svelte';
const title = 'Versions'; const title = 'Versions';
async function getData() { async function getData() {
@ -24,6 +25,7 @@
{:then data} {:then data}
<Island> <Island>
<p> <p>
<IconBrandSvelte />
<a class="data" href="https://git.fjla.uk/owlboard/owlboard-svelte" target="_blank" <a class="data" href="https://git.fjla.uk/owlboard/owlboard-svelte" target="_blank"
>Web-app version<br /><span class="data" >Web-app version<br /><span class="data"
>{version}{#if versionTag}-{versionTag}{/if}</span >{version}{#if versionTag}-{versionTag}{/if}</span
@ -31,19 +33,23 @@
> >
</p> </p>
<p> <p>
<IconBrandTypescript /><br>
<a class="data" href="https://git.fjla.uk/owlboard/backend" target="_blank">API Server version<br /><span class="data">{data?.backend || 'Unknown'}</span></a> <a class="data" href="https://git.fjla.uk/owlboard/backend" target="_blank">API Server version<br /><span class="data">{data?.backend || 'Unknown'}</span></a>
</p> </p>
<p> <p>
<IconBrandPython /><br>
<a class="data" href="https://git.fjla.uk/owlboard/db-manager" target="_blank">DB Manager version<br /><span class="data">{data?.['db-manager'] || 'Unknown'}</span></a> <a class="data" href="https://git.fjla.uk/owlboard/db-manager" target="_blank">DB Manager version<br /><span class="data">{data?.['db-manager'] || 'Unknown'}</span></a>
</p> </p>
<p> <p>
<IconBrandGolang /><br>
<a class="data" href="https://git.fjla.uk/owlboard/mq-client" target="_blank">MQ Client version<br /><span class="data">{data?.['mq-client'] || 'Not installed'}</span></a> <a class="data" href="https://git.fjla.uk/owlboard/mq-client" target="_blank">MQ Client version<br /><span class="data">{data?.['mq-client'] || 'Not installed'}</span></a>
</p> </p>
</Island> </Island>
{:catch} {:catch}
<Island> <Island>
<p> <p>
Web-app Version<br /><span class="data">{version}-{versionTag}</span> <IconBrandSvelte /><IconBrandJavascript /><IconBrandTypescript /><br>
Web-app Version<br /><span class="data">{version}{#if versionTag}-{versionTag}{/if}</span>
</p> </p>
<p>Unable to fetch server versions</p> <p>Unable to fetch server versions</p>
</Island> </Island>