Add OwlBoard API Library
Add styling to UI Components
This commit is contained in:
19
package-lock.json
generated
19
package-lock.json
generated
@@ -8,11 +8,13 @@
|
||||
"name": "web-pwa",
|
||||
"version": "0.0.1",
|
||||
"dependencies": {
|
||||
"@owlboard/owlboard-ts": "^3.0.0",
|
||||
"@tabler/icons-svelte": "^3.40.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/compat": "^2.0.2",
|
||||
"@eslint/js": "^9.39.2",
|
||||
"@owlboard/owlboard-ts": "^3.0.0",
|
||||
"@playwright/test": "^1.58.1",
|
||||
"@sveltejs/adapter-static": "^3.0.10",
|
||||
"@sveltejs/kit": "^2.50.2",
|
||||
@@ -778,6 +780,23 @@
|
||||
"@jridgewell/sourcemap-codec": "^1.4.14"
|
||||
}
|
||||
},
|
||||
"node_modules/@owlboard/api-schema-types": {
|
||||
"version": "3.0.1-alpha3",
|
||||
"resolved": "https://git.fjla.uk/api/packages/OwlBoard/npm/%40owlboard%2Fapi-schema-types/-/3.0.1-alpha3/api-schema-types-3.0.1-alpha3.tgz",
|
||||
"integrity": "sha512-5CVm1k/C++/VrtAw4NkvclDunH+RmYLnDZZMSWTM1mm+WlEVnmD+MVnTgC/FhcsAmsNHV8swm66RCqkCuhbOnA==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@owlboard/owlboard-ts": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://git.fjla.uk/api/packages/OwlBoard/npm/%40owlboard%2Fowlboard-ts/-/3.0.0/owlboard-ts-3.0.0.tgz",
|
||||
"integrity": "sha512-ycmBQ8JEwSFDLeRg7pb+g+umljHQ/vqrZ+BIs7qmwZyOVyuCjzny6keiHdhMALiNBDD9yU9DzJpqxry78rCIYg==",
|
||||
"dev": true,
|
||||
"license": "GPL-3.0",
|
||||
"dependencies": {
|
||||
"@owlboard/api-schema-types": "^3.0.1-alpha3"
|
||||
}
|
||||
},
|
||||
"node_modules/@playwright/test": {
|
||||
"version": "1.58.2",
|
||||
"resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.58.2.tgz",
|
||||
|
||||
@@ -19,6 +19,7 @@
|
||||
"devDependencies": {
|
||||
"@eslint/compat": "^2.0.2",
|
||||
"@eslint/js": "^9.39.2",
|
||||
"@owlboard/owlboard-ts": "^3.0.0",
|
||||
"@playwright/test": "^1.58.1",
|
||||
"@sveltejs/adapter-static": "^3.0.10",
|
||||
"@sveltejs/kit": "^2.50.2",
|
||||
@@ -41,6 +42,7 @@
|
||||
"vitest-browser-svelte": "^2.0.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tabler/icons-svelte": "^3.40.0"
|
||||
"@tabler/icons-svelte": "^3.40.0",
|
||||
"@owlboard/owlboard-ts": "^3.0.0"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -72,6 +72,7 @@
|
||||
transition: all 0.2s ease-in-out;
|
||||
outline: none;
|
||||
text-align: center;
|
||||
box-shadow: var(--shadow-std);
|
||||
}
|
||||
|
||||
.all-caps {
|
||||
|
||||
@@ -60,6 +60,7 @@
|
||||
font-family: 'URW Gothic', sans-serif;
|
||||
color: var(--color-brand);
|
||||
padding: 10px 0;
|
||||
box-shadow: var(--shadow-std);
|
||||
}
|
||||
|
||||
.header-content {
|
||||
|
||||
@@ -3,6 +3,8 @@ import BaseCard from '$lib/components/ui/cards/BaseCard.svelte';
|
||||
import Textbox from '$lib/components/ui/Textbox.svelte';
|
||||
import Button from '$lib/components/ui/Button.svelte';
|
||||
|
||||
let { onsearch }: { onsearch: (c: string) => void } = $props();
|
||||
|
||||
let codeValue = $state('');
|
||||
|
||||
function resetValues(): void {
|
||||
@@ -18,7 +20,7 @@ function resetValues(): void {
|
||||
</div>
|
||||
</div>
|
||||
<div class="button-wrapper">
|
||||
<Button>Search</Button>
|
||||
<Button onclick={() => onsearch(codeValue.toString())}>Search</Button>
|
||||
<Button onclick={resetValues}>Reset</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -3,6 +3,9 @@ import BaseCard from '$lib/components/ui/cards/BaseCard.svelte';
|
||||
import Textbox from '$lib/components/ui/Textbox.svelte';
|
||||
import Button from '$lib/components/ui/Button.svelte';
|
||||
|
||||
let { onsearch }: { onsearch: (s: string, e: string) => void } = $props();
|
||||
|
||||
|
||||
let startValue = $state('');
|
||||
let endValue = $state('');
|
||||
|
||||
@@ -23,7 +26,7 @@ function resetValues(): void {
|
||||
</div>
|
||||
</div>
|
||||
<div class="button-wrapper">
|
||||
<Button>Search</Button>
|
||||
<Button onclick={() => onsearch(startValue, endValue)}>Search</Button>
|
||||
<Button onclick={resetValues}>Reset</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -30,8 +30,8 @@
|
||||
</p>
|
||||
<p class="amble">
|
||||
Why OwlBoard? The name was chosen as an evolution of its predecessor, 'Athena'; owls are
|
||||
associated with the Roman Goddess as well as with wisdom. The name also links to Bath, where the
|
||||
app has been built and is run, representing the 'Minerva Owl' sculpture trail in the city, with
|
||||
associated with the equivalent Roman Goddess - Minerva - as well as with wisdom. This also links to Bath, where the
|
||||
app has been built and is run, relating to the 'Minerva Owl' sculpture trail in the city, with
|
||||
many of the sculptures still in the area.
|
||||
</p>
|
||||
<p class="opensource">
|
||||
|
||||
@@ -1,16 +1,46 @@
|
||||
<script lang="ts">
|
||||
import PisStartEndCard from '$lib/components/ui/cards/pis/PisStartEndCard.svelte';
|
||||
import PisCode from '$lib/components/ui/cards/pis/PisCode.svelte';
|
||||
import Button from '$lib/components/ui/Button.svelte';
|
||||
import type { PisObjects } from '@owlboard/api-schema-types';
|
||||
|
||||
let results = $state<PisObjects[]>([]);
|
||||
let resultsLoaded = $state<boolean>(false);
|
||||
|
||||
function handleStartEndSearch(start: string, end: string) {
|
||||
console.log(`PIS Search: ${start}-${end}`);
|
||||
// Fetch API Results Here
|
||||
resultsLoaded = true;
|
||||
}
|
||||
|
||||
function handleCodeSearch(code: string) {
|
||||
console.log(`PIS Search: ${code}`);
|
||||
// Fetch API Results Here
|
||||
resultsLoaded = true;
|
||||
}
|
||||
|
||||
function clearResults() {
|
||||
console.log('Clearing Results');
|
||||
resultsLoaded = false;
|
||||
results = [];
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="card-container">
|
||||
<PisStartEndCard />
|
||||
<PisCode />
|
||||
</div>
|
||||
|
||||
<div class="result-container">
|
||||
|
||||
</div>
|
||||
{#if !resultsLoaded}
|
||||
<div class="card-container">
|
||||
<PisStartEndCard onsearch={handleStartEndSearch} />
|
||||
<PisCode onsearch={handleCodeSearch} />
|
||||
</div>
|
||||
{:else}
|
||||
<div class="result-container">
|
||||
{#if !results.length}
|
||||
<p class="no-results">No results found</p>
|
||||
{:else}
|
||||
<p class="no-results">Unable to load results</p>
|
||||
{/if}
|
||||
<Button onclick={clearResults}>Reset</Button>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.card-container {
|
||||
@@ -23,11 +53,21 @@
|
||||
}
|
||||
|
||||
.result-container {
|
||||
font-family: 'URW Gothic', sans-serif;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
justify-content: center;
|
||||
background: var(--color-accent);
|
||||
border-radius: 15px;
|
||||
padding: 0 0 20px 0;
|
||||
margin: auto;
|
||||
margin-top: 25px;
|
||||
width: 90%;
|
||||
max-width: 1000px;
|
||||
box-shadow: var(--shadow-std);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user