feat: Updated app to use component library
Some checks failed
Run Unit and Integration Tests / test (push) Failing after 37s
Some checks failed
Run Unit and Integration Tests / test (push) Failing after 37s
This commit is contained in:
1
.gitignore
vendored
1
.gitignore
vendored
@@ -1,4 +1,5 @@
|
|||||||
node_modules
|
node_modules
|
||||||
|
.pnpm-store
|
||||||
|
|
||||||
# Output
|
# Output
|
||||||
.output
|
.output
|
||||||
|
|||||||
2
.npmrc
2
.npmrc
@@ -1 +1,3 @@
|
|||||||
engine-strict=true
|
engine-strict=true
|
||||||
|
|
||||||
|
@luke-else:registry=https://git.luke-else.co.uk/api/packages/luke-else/npm/
|
||||||
@@ -41,6 +41,7 @@
|
|||||||
]
|
]
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@luke-else/component-lib": "^1.1.5",
|
||||||
"svelte-toasts": "^1.1.2"
|
"svelte-toasts": "^1.1.2"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
639
pnpm-lock.yaml
generated
639
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@@ -1,23 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
// Allows additional styling to be applied to the Card component's outer wrapping
|
|
||||||
export let containerStyle: string = "";
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div class={containerStyle}>
|
|
||||||
<div class="bg-slate-100/10 dark:bg-slate-100/10 rounded-2xl shadow-2xl p-6 flex flex-col h-full w-full">
|
|
||||||
<div class="text-red-400 font-bold flex flex-row justify-between items-center mb-4">
|
|
||||||
<slot name="headerLeft" class="text-2xl md:text-3xl truncate"></slot>
|
|
||||||
<slot name="headerRight" class="max-md:hidden text-xl md:text-2xl truncate"></slot>
|
|
||||||
</div>
|
|
||||||
<hr class="border-1" />
|
|
||||||
<div class="flex-1 flex flex-col justify-center mt-4 mb-8">
|
|
||||||
<slot name="content"/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<hr class="border-1" />
|
|
||||||
<div class="flex flex-row justify-between items-center mt-4 text-base opacity-90">
|
|
||||||
<slot name="footerLeft"/>
|
|
||||||
<slot name="footerRight"/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
@@ -1,5 +1,5 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import Card from './Card.svelte';
|
import { Card } from '@luke-else/component-lib';
|
||||||
import type { Metar } from '$lib/api/types/metar';
|
import type { Metar } from '$lib/api/types/metar';
|
||||||
|
|
||||||
export let metar: Metar;
|
export let metar: Metar;
|
||||||
@@ -62,38 +62,4 @@
|
|||||||
<div class="text-sm italic mb-2">{metar.altim}hPa</div>
|
<div class="text-sm italic mb-2">{metar.altim}hPa</div>
|
||||||
<div class="text-xs text-gray-500 truncate w-full text-center"><code>{metar.rawOb}</code></div>
|
<div class="text-xs text-gray-500 truncate w-full text-center"><code>{metar.rawOb}</code></div>
|
||||||
</div>
|
</div>
|
||||||
{#if effect === 'rain-effect'}
|
</Card>
|
||||||
<div class="absolute inset-0 pointer-events-none rain"></div>
|
|
||||||
{/if}
|
|
||||||
{#if effect === 'snow-effect'}
|
|
||||||
<div class="absolute inset-0 pointer-events-none snow"></div>
|
|
||||||
{/if}
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.rain {
|
|
||||||
background-image: repeating-linear-gradient(
|
|
||||||
120deg,
|
|
||||||
rgba(0, 0, 255, 0.1) 0 2px,
|
|
||||||
transparent 2px 8px
|
|
||||||
);
|
|
||||||
animation: rainmove 0.7s linear infinite;
|
|
||||||
}
|
|
||||||
@keyframes rainmove {
|
|
||||||
0% { background-position: 0 0; }
|
|
||||||
100% { background-position: 20px 40px; }
|
|
||||||
}
|
|
||||||
|
|
||||||
.snow {
|
|
||||||
background-image: radial-gradient(white 1.5px, transparent 2px),
|
|
||||||
radial-gradient(white 1.5px, transparent 2px);
|
|
||||||
background-size: 20px 20px;
|
|
||||||
background-position: 0 0, 10px 10px;
|
|
||||||
opacity: 0.5;
|
|
||||||
animation: snowmove 1.5s linear infinite;
|
|
||||||
}
|
|
||||||
@keyframes snowmove {
|
|
||||||
0% { background-position: 0 0, 10px 10px; }
|
|
||||||
100% { background-position: 0 20px, 10px 30px; }
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,33 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
export let open = false;
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div class="w-full">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
class="flex items-center justify-between w-full px-2 py-2 text-left rounded hover:font-bold transition group"
|
|
||||||
on:click={() => open = !open}
|
|
||||||
aria-expanded={open}
|
|
||||||
>
|
|
||||||
<span><slot name="label"/></span>
|
|
||||||
<svg
|
|
||||||
class="w-5 h-5 ml-2 transition-transform duration-200"
|
|
||||||
style="transform: rotate({open ? 90 : 0}deg)"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
stroke-width="2"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
>
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
<div
|
|
||||||
class="overflow-hidden transition-all duration-300"
|
|
||||||
style="max-height: {open ? '1000px' : '0'}"
|
|
||||||
aria-hidden={!open}
|
|
||||||
>
|
|
||||||
<div class="pt-2">
|
|
||||||
<slot name="content"/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
@@ -1,7 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- GridGallery.svelte -->
|
|
||||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 w-full">
|
|
||||||
<slot />
|
|
||||||
</div>
|
|
||||||
@@ -1,82 +0,0 @@
|
|||||||
<style>
|
|
||||||
.loader {
|
|
||||||
position: absolute;
|
|
||||||
top: calc(50% - 32px);
|
|
||||||
left: calc(50% - 32px);
|
|
||||||
width: 64px;
|
|
||||||
height: 64px;
|
|
||||||
border-radius: 50%;
|
|
||||||
perspective: 800px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loaderText {
|
|
||||||
position: absolute;
|
|
||||||
top: calc(50% - 84px);
|
|
||||||
left: calc(50% - 64px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.inner {
|
|
||||||
position: absolute;
|
|
||||||
box-sizing: border-box;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.inner.one {
|
|
||||||
left: 0%;
|
|
||||||
top: 0%;
|
|
||||||
animation: rotate-one 1s linear infinite;
|
|
||||||
border-bottom: 3px solid gray;
|
|
||||||
}
|
|
||||||
|
|
||||||
.inner.two {
|
|
||||||
right: 0%;
|
|
||||||
top: 0%;
|
|
||||||
animation: rotate-two 1s linear infinite;
|
|
||||||
border-right: 3px solid gray;
|
|
||||||
}
|
|
||||||
|
|
||||||
.inner.three {
|
|
||||||
right: 0%;
|
|
||||||
bottom: 0%;
|
|
||||||
animation: rotate-three 1s linear infinite;
|
|
||||||
border-top: 3px solid gray;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes rotate-one {
|
|
||||||
0% {
|
|
||||||
transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes rotate-two {
|
|
||||||
0% {
|
|
||||||
transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes rotate-three {
|
|
||||||
0% {
|
|
||||||
transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<div class="loaderText">
|
|
||||||
Loading...
|
|
||||||
</div>
|
|
||||||
<div class="loader">
|
|
||||||
<div class="inner one"></div>
|
|
||||||
<div class="inner two"></div>
|
|
||||||
<div class="inner three"></div>
|
|
||||||
</div>
|
|
||||||
@@ -1,26 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
export let label: string = "";
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div id={label} class="relative flex flex-row w-full min-h-[300px] mt-5 mb-25">
|
|
||||||
<!-- Sticky/Sliding Label -->
|
|
||||||
<div class="hidden md:flex flex-col items-center mr-6">
|
|
||||||
<div class="sticky top-24 left-0 z-10">
|
|
||||||
<span class="text-2xl font-bold text-blue-400 tracking-widest"
|
|
||||||
style="writing-mode: vertical-rl; text-orientation: mixed;">
|
|
||||||
{label}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Main Content -->
|
|
||||||
<div class="flex-1 flex flex-col">
|
|
||||||
<!-- Label for mobile -->
|
|
||||||
<div class="md:hidden mb-2">
|
|
||||||
<span class="text-2xl font-bold text-blue-400">{label}</span>
|
|
||||||
</div>
|
|
||||||
<hr class="border-blue-400 mb-6" />
|
|
||||||
<div>
|
|
||||||
<slot />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
@@ -1,29 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
import Collapsible from "./Collapsible.svelte";
|
|
||||||
|
|
||||||
export let timelineData: Array<{
|
|
||||||
title: string;
|
|
||||||
description: string;
|
|
||||||
duration: string;
|
|
||||||
}>;
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div class="flex flex-col items-center justify-center">
|
|
||||||
<div class="max-w-4xl w-full">
|
|
||||||
{#each timelineData as entry, i}
|
|
||||||
<div class="relative border-l border-gray-700 pl-8 pb-12">
|
|
||||||
{#if i == 0}
|
|
||||||
<div class="absolute top-0 left-[8px] text-green-400 w-4 h-4">♦</div>
|
|
||||||
{:else}
|
|
||||||
<div class="absolute top-0 left-[8px] text-green-400 w-4 h-4">⋄</div>
|
|
||||||
{/if}
|
|
||||||
<p class="text-sm opacity-70">{entry.duration}</p>
|
|
||||||
|
|
||||||
<Collapsible open={i==0}>
|
|
||||||
<span slot="label" class="text-2lg font-semibold text-red-400 mt-1 focus:outline-none hover:underline transition">{entry.title}</span>
|
|
||||||
<span slot="content">{@html entry.description}</span>
|
|
||||||
</Collapsible>
|
|
||||||
</div>
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
@@ -2,9 +2,7 @@
|
|||||||
import { ToastContainer, FlatToast } from 'svelte-toasts';
|
import { ToastContainer, FlatToast } from 'svelte-toasts';
|
||||||
import '../app.css';
|
import '../app.css';
|
||||||
|
|
||||||
import Section from '$lib/components/Section.svelte';
|
import { Section, Card } from '@luke-else/component-lib';
|
||||||
import Card from '$lib/components/Cards/Card.svelte';
|
|
||||||
|
|
||||||
import { icao } from '$lib/stores/icao';
|
import { icao } from '$lib/stores/icao';
|
||||||
|
|
||||||
let icaoInput = $state<string>('');
|
let icaoInput = $state<string>('');
|
||||||
|
|||||||
@@ -1,14 +1,13 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import Section from '$lib/components/Section.svelte';
|
import { Section, Card, Loading } from "@luke-else/component-lib"
|
||||||
import Card from '$lib/components/Cards/Card.svelte';
|
import WeatherCard from '$lib/components/Cards/WeatherCard.svelte';
|
||||||
|
|
||||||
import { toasts } from 'svelte-toasts';
|
import { toasts } from 'svelte-toasts';
|
||||||
import Loading from '$lib/components/Loading.svelte';
|
|
||||||
|
|
||||||
import { icao } from '$lib/stores/icao';
|
import { icao } from '$lib/stores/icao';
|
||||||
import { aviationWeatherApi } from '$lib/api/weatherservice';
|
import { aviationWeatherApi } from '$lib/api/weatherservice';
|
||||||
import type { Metar } from '$lib/api/types/metar'
|
import type { Metar } from '$lib/api/types/metar'
|
||||||
import { onDestroy } from 'svelte';
|
import { onDestroy } from 'svelte';
|
||||||
import WeatherCard from '$lib/components/Cards/WeatherCard.svelte';
|
|
||||||
|
|
||||||
let metar: Metar | null = null;
|
let metar: Metar | null = null;
|
||||||
let loading = false;
|
let loading = false;
|
||||||
|
|||||||
Reference in New Issue
Block a user