mirror of
https://github.com/jakobkordez/call-tester.git
synced 2025-05-15 16:20:29 +00:00
Reformating, ssr and prerendering changes
This commit is contained in:
Jakob Kordež
parent
5a60d141ef
commit
c7c594aa8a
24
src/app.html
24
src/app.html
@ -1,15 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%sveltekit.assets%/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%sveltekit.assets%/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
115
src/components/callsign-checker.svelte
Normal file
115
src/components/callsign-checker.svelte
Normal 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>
|
||||
@ -2,6 +2,8 @@
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
export let inputText = '';
|
||||
export let inputRe: RegExp = /.*/;
|
||||
|
||||
let selectionStart: number | null = inputText.length;
|
||||
let selectionEnd: number | null = inputText.length;
|
||||
|
||||
@ -17,8 +19,12 @@
|
||||
});
|
||||
</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">
|
||||
<input
|
||||
id="callsign-input"
|
||||
class="input shared"
|
||||
on:keydown={(e) => {
|
||||
const t = e.currentTarget;
|
||||
@ -27,7 +33,7 @@
|
||||
}}
|
||||
on:input={(e) => {
|
||||
const t = e.currentTarget;
|
||||
if (/^[A-Z\d/]*$/i.test(t.value)) {
|
||||
if (inputRe.test(t.value)) {
|
||||
inputText = t.value.toUpperCase();
|
||||
} else {
|
||||
// Users enter the not supported characters
|
||||
@ -4,13 +4,16 @@
|
||||
|
||||
<svelte:head>
|
||||
<title>Callsign Checker</title>
|
||||
<meta name="description" content="Callsign checker for ham radio operators" />
|
||||
<meta name="keywords" content="callsign, ham radio, dxcc, country" />
|
||||
<meta name="description" content="Check what country / DXCC entity a callsign belongs to" />
|
||||
<meta name="keywords" content="callsign, ham radio, amateur radio, dxcc, country" />
|
||||
<meta name="author" content="Jakob Kordež S52KJ" />
|
||||
<meta property="og:url" content="https://cc.jkob.cc/" />
|
||||
<meta property="og:type" content="website" />
|
||||
<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>
|
||||
|
||||
<div class="flex min-h-screen flex-col bg-[#333] text-[#eee]">
|
||||
|
||||
@ -1,2 +1,2 @@
|
||||
export const ssr = false;
|
||||
export const ssr = true;
|
||||
export const prerender = true;
|
||||
|
||||
@ -1,119 +1,9 @@
|
||||
<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 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('');
|
||||
}
|
||||
import CallsignChecker from '../components/callsign-checker.svelte';
|
||||
</script>
|
||||
|
||||
<div class="py-10">
|
||||
<h1 class="mb-10 text-center text-5xl font-light">Callsign Checker</h1>
|
||||
|
||||
<div class="mb-4">
|
||||
<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}
|
||||
<CallsignChecker />
|
||||
</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>
|
||||
|
||||
@ -12,7 +12,7 @@ const config = {
|
||||
// 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.
|
||||
adapter: adapter({
|
||||
fallback: 'index.html'
|
||||
strict: false
|
||||
})
|
||||
}
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user