s52kj/call-tester
1
0
Fork 0
mirror of https://github.com/jakobkordez/call-tester.git synced 2025-05-16 00:30:27 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Reformating, ssr and prerendering changes

Browse Source
This commit is contained in:
Jakob Kordež 2024-06-28 11:02:49 +02:00
parent 5a60d141ef
commit c7c594aa8a
8 changed files with 143 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/app.html
View File

@ -1,15 +1,13 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head>
<head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.ico" /> <link rel="icon" href="%sveltekit.assets%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head% %sveltekit.head%
</head> </head>
<body data-sveltekit-preload-data="hover"> <body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div> <div style="display: contents">%sveltekit.body%</div>
</body> </body>
</html> </html>

115
src/components/callsign-checker.svelte Normal file
View File

@ -0,0 +1,115 @@
<script lang="ts">
import { goto } from '$app/navigation';
import { page } from '$app/stores';
import { getSecondarySuffixDescription, parseCallsign } from '$lib/callsign';
import { findDxcc } from '$lib/dxcc-util';
import StyledInput from '../components/styled-input.svelte';
import DxccEntityInfo from '../components/dxcc-entity-info.svelte';
import { browser } from '$app/environment';
let query = new URLSearchParams(browser ? $page.url.searchParams.toString() : '');
let callsign = query.get('c') ?? '';
$: callsignData = parseCallsign(callsign);
$: rawDxcc = findDxcc(callsign);
$: updateUrl(callsign);
function updateUrl(callsign: string) {
if (!browser) return;
if (!callsign) goto('.', { keepFocus: true, replaceState: true });
else goto(`?c=${callsign}`, { keepFocus: true, replaceState: true });
}
function styleText(): string {
const baseClass = 'text-cyan-300';
const prefixClass = 'text-blue-400';
const suffixClass = 'text-green-400';
if (rawDxcc?.matchLength === callsign.length && rawDxcc.isExact) {
return `<span class="text-amber-400">${callsign}</span>`;
}
if (!callsignData) {
const dxcc = findDxcc(callsign);
if (!dxcc) return callsign;
return `<span class="text-cyan-300">${callsign.slice(0, dxcc.matchLength)}</span>${callsign.slice(dxcc.matchLength)}`;
}
const { base, basePrefix, baseSuffix, secondaryPrefix, secondarySuffixes } = callsignData;
// TODO Check if base and prefix same dxcc
return [
secondaryPrefix ? `<span class="${prefixClass}">${secondaryPrefix}/</span>` : '',
basePrefix ? `<span class="${baseClass}">${basePrefix}</span>${baseSuffix}` : base,
secondarySuffixes.length
? `<span class="${suffixClass}">/${secondarySuffixes.join('/')}</span>`
: ''
].join('');
}
</script>
<div class="mb-4">
<StyledInput bind:inputText={callsign} inputRe={/^[A-Z\d/]*$/i} generateStyledText={styleText} />
</div>
{#if rawDxcc?.matchLength === callsign.length && rawDxcc.isExact}
<div class="data-box full cols">
<DxccEntityInfo prefix={callsign} dxccEntity={rawDxcc.entity} />
</div>
{:else if callsignData}
{@const { secondaryPrefix, fullDxcc, basePrefix, baseDxcc, secondarySuffixes } = callsignData}
<div class="flex flex-col gap-4">
{#if secondaryPrefix && fullDxcc}
<div class="data-box prefix cols">
<DxccEntityInfo prefix={secondaryPrefix} dxccEntity={fullDxcc} />
</div>
{/if}
{#if baseDxcc && basePrefix}
<div class="data-box base cols">
<DxccEntityInfo prefix={basePrefix} dxccEntity={baseDxcc} />
</div>
{/if}
{#if secondarySuffixes.length > 0}
<div class="flex flex-wrap gap-4">
{#each secondarySuffixes as suffix}
<div class="data-box suffix min-w-full flex-grow sm:min-w-[30%]">
<div>
<div class="font-mono text-2xl font-medium">{suffix}</div>
<div>{getSecondarySuffixDescription(suffix)}</div>
</div>
</div>
{/each}
</div>
{/if}
</div>
{:else if rawDxcc}
<div class="data-box base cols">
<DxccEntityInfo prefix={callsign.slice(0, rawDxcc.matchLength)} dxccEntity={rawDxcc.entity} />
</div>
{/if}
<style lang="postcss">
.data-box {
@apply mx-auto grid w-full flex-1 rounded-xl p-4 text-center;
& > * {
@apply my-auto;
}
}
.data-box.cols {
@apply grid-cols-3;
}
.data-box.full {
@apply bg-amber-600/40;
}
.data-box.prefix {
@apply bg-blue-600/40;
}
.data-box.base {
@apply bg-cyan-600/40;
}
.data-box.suffix {
@apply bg-green-600/40;
}
</style>

0
src/routes/dxcc-entity-info.svelte → src/components/dxcc-entity-info.svelte
View File

8
src/components/callsign-input.svelte → src/components/styled-input.svelte
View File

@ -2,6 +2,8 @@
import { onMount } from 'svelte'; import { onMount } from 'svelte';
export let inputText = ''; export let inputText = '';
export let inputRe: RegExp = /.*/;
let selectionStart: number | null = inputText.length; let selectionStart: number | null = inputText.length;
let selectionEnd: number | null = inputText.length; let selectionEnd: number | null = inputText.length;
@ -17,8 +19,12 @@
}); });
</script> </script>
<label for="callsign-input" class="mb-1 block w-full text-center text-sm font-light">
Enter a callsign
</label>
<div class="relative w-full"> <div class="relative w-full">
<input <input
id="callsign-input"
class="input shared" class="input shared"
on:keydown={(e) => { on:keydown={(e) => {
const t = e.currentTarget; const t = e.currentTarget;
@ -27,7 +33,7 @@
}} }}
on:input={(e) => { on:input={(e) => {
const t = e.currentTarget; const t = e.currentTarget;
if (/^[A-Z\d/]*$/i.test(t.value)) { if (inputRe.test(t.value)) {
inputText = t.value.toUpperCase(); inputText = t.value.toUpperCase();
} else { } else {
// Users enter the not supported characters // Users enter the not supported characters

9
src/routes/+layout.svelte
View File

@ -4,13 +4,16 @@
<svelte:head> <svelte:head>
<title>Callsign Checker</title> <title>Callsign Checker</title>
<meta name="description" content="Callsign checker for ham radio operators" /> <meta name="description" content="Check what country / DXCC entity a callsign belongs to" />
<meta name="keywords" content="callsign, ham radio, dxcc, country" /> <meta name="keywords" content="callsign, ham radio, amateur radio, dxcc, country" />
<meta name="author" content="Jakob Kordež S52KJ" /> <meta name="author" content="Jakob Kordež S52KJ" />
<meta property="og:url" content="https://cc.jkob.cc/" /> <meta property="og:url" content="https://cc.jkob.cc/" />
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
<meta property="og:title" content="Callsign Checker" /> <meta property="og:title" content="Callsign Checker" />
<meta property="og:description" content="Callsign checker for ham radio operators" /> <meta
property="og:description"
content="Check what country / DXCC entity a callsign belongs to"
/>
</svelte:head> </svelte:head>
<div class="flex min-h-screen flex-col bg-[#333] text-[#eee]"> <div class="flex min-h-screen flex-col bg-[#333] text-[#eee]">

2
src/routes/+layout.ts
View File

@ -1,2 +1,2 @@
export const ssr = false; export const ssr = true;
export const prerender = true; export const prerender = true;

114
src/routes/+page.svelte
View File

@ -1,119 +1,9 @@
<script lang="ts"> <script lang="ts">
import { goto } from '$app/navigation'; import CallsignChecker from '../components/callsign-checker.svelte';
import { page } from '$app/stores';
import { getSecondarySuffixDescription, parseCallsign } from '$lib/callsign';
import { findDxcc } from '$lib/dxcc-util';
import CallsignInput from '../components/callsign-input.svelte';
import DxccEntityInfo from './dxcc-entity-info.svelte';
let query = new URLSearchParams($page.url.searchParams.toString());
let callsign = query.get('c') ?? '';
$: callsignData = parseCallsign(callsign);
$: rawDxcc = findDxcc(callsign);
$: updateUrl(callsign);
function updateUrl(callsign: string) {
if (!callsign) goto('.', { keepFocus: true, replaceState: true });
else goto(`?c=${callsign}`, { keepFocus: true, replaceState: true });
}
function styleText(): string {
const baseClass = 'text-cyan-300';
const prefixClass = 'text-blue-400';
const suffixClass = 'text-green-400';
if (rawDxcc?.matchLength === callsign.length && rawDxcc.isExact) {
return `<span class="text-amber-400">${callsign}</span>`;
}
if (!callsignData) {
const dxcc = findDxcc(callsign);
if (!dxcc) return callsign;
return `<span class="text-cyan-300">${callsign.slice(0, dxcc.matchLength)}</span>${callsign.slice(dxcc.matchLength)}`;
}
const { base, basePrefix, baseSuffix, secondaryPrefix, secondarySuffixes } = callsignData;
// TODO Check if base and prefix same dxcc
return [
secondaryPrefix ? `<span class="${prefixClass}">${secondaryPrefix}/</span>` : '',
basePrefix ? `<span class="${baseClass}">${basePrefix}</span>${baseSuffix}` : base,
secondarySuffixes.length
? `<span class="${suffixClass}">/${secondarySuffixes.join('/')}</span>`
: ''
].join('');
}
</script> </script>
<div class="py-10"> <div class="py-10">
<h1 class="mb-10 text-center text-5xl font-light">Callsign Checker</h1> <h1 class="mb-10 text-center text-5xl font-light">Callsign Checker</h1>
<div class="mb-4"> <CallsignChecker />
<div class="mb-1 text-center text-sm font-light">Enter a callsign</div>
<CallsignInput bind:inputText={callsign} generateStyledText={styleText} />
</div>
{#if rawDxcc?.matchLength === callsign.length && rawDxcc.isExact}
<div class="data-box full cols">
<DxccEntityInfo prefix={callsign} dxccEntity={rawDxcc.entity} />
</div>
{:else if callsignData}
{@const { secondaryPrefix, fullDxcc, basePrefix, baseDxcc, secondarySuffixes } = callsignData}
<div class="flex flex-col gap-4">
{#if secondaryPrefix && fullDxcc}
<div class="data-box prefix cols">
<DxccEntityInfo prefix={secondaryPrefix} dxccEntity={fullDxcc} />
</div>
{/if}
{#if baseDxcc && basePrefix}
<div class="data-box base cols">
<DxccEntityInfo prefix={basePrefix} dxccEntity={baseDxcc} />
</div>
{/if}
{#if secondarySuffixes.length > 0}
<div class="flex flex-wrap gap-4">
{#each secondarySuffixes as suffix}
<div class="data-box suffix min-w-full flex-grow sm:min-w-[30%]">
<div>
<div class="font-mono text-2xl font-medium">{suffix}</div>
<div>{getSecondarySuffixDescription(suffix)}</div>
</div>
</div>
{/each}
</div>
{/if}
</div>
{:else if rawDxcc}
<div class="data-box base cols">
<DxccEntityInfo prefix={callsign.slice(0, rawDxcc.matchLength)} dxccEntity={rawDxcc.entity} />
</div>
{/if}
</div> </div>
<style lang="postcss">
.data-box {
@apply mx-auto grid w-full flex-1 rounded-xl p-4 text-center;
& > * {
@apply my-auto;
}
}
.data-box.cols {
@apply grid-cols-3;
}
.data-box.full {
@apply bg-amber-600/40;
}
.data-box.prefix {
@apply bg-blue-600/40;
}
.data-box.base {
@apply bg-cyan-600/40;
}
.data-box.suffix {
@apply bg-green-600/40;
}
</style>

2
svelte.config.js
View File

@ -12,7 +12,7 @@ const config = {
// If your environment is not supported, or you settled on a specific environment, switch out the adapter. // If your environment is not supported, or you settled on a specific environment, switch out the adapter.
// See https://kit.svelte.dev/docs/adapters for more information about adapters. // See https://kit.svelte.dev/docs/adapters for more information about adapters.
adapter: adapter({ adapter: adapter({
fallback: 'index.html' strict: false
}) })
} }
}; };