Add carbon svelte

.github/workflows/firebase-hosting-pull-request.yml

@@ -14,6 +14,7 @@ jobs:
 
       - name: Install dependencies
         run: npm install
+
       - name: Install Playwright Browsers
         run: npx playwright install --with-deps
 

package.json

@@ -16,10 +16,13 @@
 	},
 	"devDependencies": {
 		"@playwright/test": "^1.28.1",
+		"@rovacc/vatsim-types": "^0.0.1",
 		"@sveltejs/adapter-auto": "^2.0.0",
 		"@sveltejs/kit": "^1.20.4",
 		"@typescript-eslint/eslint-plugin": "^5.45.0",
 		"@typescript-eslint/parser": "^5.45.0",
+		"carbon-components-svelte": "^0.80.0",
+		"carbon-icons-svelte": "^12.2.0",
 		"eslint": "^8.28.0",
 		"eslint-config-prettier": "^8.5.0",
 		"eslint-plugin-svelte": "^2.30.0",
@@ -32,5 +35,6 @@
 		"vite": "^4.4.2",
 		"vitest": "^0.32.2"
 	},
-	"type": "module"
+	"type": "module",
+	"dependencies": {}
 }

src/models/user.ts

@@ -0,0 +1,17 @@
+interface Rating {
+	rating: number;
+	code: string;
+	humanReadable: string;
+}
+export interface User {
+	id: string;
+	rating: Rating;
+	pilotRating: Rating;
+	militaryRating: Rating;
+	suspDate: Date;
+	regDate: Date;
+	region: 'string';
+	division: string;
+	subdivision: string;
+	lastRatingChange: Date;
+}

src/routes/$layout.svelte

@@ -0,0 +1,3 @@
+<script>
+	import 'carbon-components-svelte/css/g10.css';
+</script>

src/routes/+layout.svelte

@@ -0,0 +1,75 @@
+<script>
+	import 'carbon-components-svelte/css/g10.css';
+	import {
+		Header,
+		HeaderUtilities,
+		HeaderAction,
+		HeaderGlobalAction,
+		HeaderPanelLinks,
+		HeaderPanelDivider,
+		HeaderPanelLink,
+		SideNav,
+		SideNavItems,
+		SideNavMenu,
+		SideNavMenuItem,
+		SideNavLink,
+		SkipToContent,
+		Content,
+		Grid,
+		Row,
+		Column
+	} from 'carbon-components-svelte';
+	import SettingsAdjust from 'carbon-icons-svelte/lib/SettingsAdjust.svelte';
+	import UserAvatarFilledAlt from 'carbon-icons-svelte/lib/UserAvatarFilledAlt.svelte';
+
+	let isSideNavOpen = false;
+	let isOpen1 = false;
+	let isOpen2 = false;
+</script>
+
+<Header company="ROvACC" platformName="Operations" bind:isSideNavOpen>
+	<svelte:fragment slot="skip-to-content">
+		<SkipToContent />
+	</svelte:fragment>
+	<HeaderUtilities>
+		<HeaderGlobalAction aria-label="Settings" icon={SettingsAdjust} />
+		<HeaderAction bind:isOpen={isOpen1} icon={UserAvatarFilledAlt} closeIcon={UserAvatarFilledAlt}>
+			<HeaderPanelLinks>
+				<HeaderPanelDivider>Switcher subject 1</HeaderPanelDivider>
+				<HeaderPanelLink>Switcher item 1</HeaderPanelLink>
+				<HeaderPanelLink>Switcher item 2</HeaderPanelLink>
+				<HeaderPanelLink>Switcher item 3</HeaderPanelLink>
+				<HeaderPanelLink>Switcher item 4</HeaderPanelLink>
+				<HeaderPanelDivider>Switcher subject 2</HeaderPanelDivider>
+				<HeaderPanelLink>Switcher item 1</HeaderPanelLink>
+				<HeaderPanelLink>Switcher item 2</HeaderPanelLink>
+				<HeaderPanelDivider>Switcher subject 3</HeaderPanelDivider>
+				<HeaderPanelLink>Switcher item 1</HeaderPanelLink>
+			</HeaderPanelLinks>
+		</HeaderAction>
+	</HeaderUtilities>
+</Header>
+
+<SideNav bind:isOpen={isSideNavOpen}>
+	<SideNavItems>
+		<SideNavLink text="Link 1" />
+		<SideNavLink text="Link 2" />
+		<SideNavLink text="Link 3" />
+		<SideNavMenu text="Menu">
+			<SideNavMenuItem href="/" text="Link 1" />
+			<SideNavMenuItem href="/" text="Link 2" />
+			<SideNavMenuItem href="/" text="Link 3" />
+		</SideNavMenu>
+	</SideNavItems>
+</SideNav>
+
+<Content>
+	<Grid>
+		<Row>
+			<Column>
+				<h1>Welcome</h1>
+				<slot />
+			</Column>
+		</Row>
+	</Grid>
+</Content>

src/routes/about/+page.server.js

@@ -1,5 +1,8 @@
-export function load() {
+export async function load() {
+	const response = await fetch('https://metar.vatsim.net/metar.php?id=LROP');
+	const metar = response.ok ? response.text() : '';
 	return {
-		today: new Date().toISOString()
+		today: new Date().toISOString(),
+		metar
 	};
 }

src/routes/about/+page.svelte

@@ -3,4 +3,4 @@
 </script>
 
 <h1>Welcome to SvelteKit</h1>
-<p>Today is {data.today}</p>
+<p>Today is {data.metar}</p>

src/stores/auth.ts

@@ -0,0 +1,15 @@
+import { writable } from 'svelte/store';
+import type { User } from '@rovacc/vatsim-types';
+
+const createAuthStore = () => {
+	const { subscribe, set, update } = writable({});
+
+	return {
+		subscribe,
+		set,
+		login: (user: User) => set({ user }),
+		logout: () => set({})
+	};
+};
+
+export const auth = createAuthStore();