added SMUI table.

bjmckenz · Mar 11, 2024 · d97d0df · d97d0df
1 parent b3e8278
commit d97d0df
Show file tree

Hide file tree

Showing 10 changed files with 1,117 additions and 61 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -7,9 +7,13 @@
 		"build": "vite build",
 		"preview": "vite preview",
 		"lint": "prettier --check . && eslint .",
-		"format": "prettier --write ."
+		"format": "prettier --write .",
+		"prepare": "npm run smui-theme-light && npm run smui-theme-dark",
+		"smui-theme-light": "smui-theme compile static/smui.css -i src/theme",
+		"smui-theme-dark": "smui-theme compile static/smui-dark.css -i src/theme/dark"
 	},
 	"devDependencies": {
+		"@smui/data-table": "^7.0.0-beta.16",
 		"@sveltejs/adapter-auto": "^3.0.0",
 		"@sveltejs/kit": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "^3.0.0",
@@ -19,8 +23,11 @@
 		"eslint-plugin-svelte": "^2.36.0-next.4",
 		"prettier": "^3.1.1",
 		"prettier-plugin-svelte": "^3.1.2",
-		"svelte": "^5.0.0-next.1",
+		"svelte": "^4.2.12",
 		"vite": "^5.0.3"
 	},
-	"type": "module"
+	"type": "module",
+	"dependencies": {
+		"smui-theme": "^7.0.0-beta.16"
+	}
 }
diff --git a/src/app.html b/src/app.html
@@ -1,12 +1,20 @@
 <!doctype html>
 <html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
-		<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>
+    <head>
+        <meta charset="utf-8">
+        <link rel="icon" href="%sveltekit.assets%/favicon.png">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        %sveltekit.head%
+        <!-- SMUI Styles -->
+        <link rel="stylesheet" href="/smui.css" media="(prefers-color-scheme: light)">
+        <link rel="stylesheet" href="/smui-dark.css" media="screen and (prefers-color-scheme: dark)">
+        <!-- Hint where we get fonts from. -->
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <!-- Material Icons, Roboto, and Roboto Mono fonts -->
+        <link href="https://fonts.googleapis.com/css2?family=Material+Icons&Roboto+Mono:ital@0;1&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
+    </head>
+    <body data-sveltekit-preload-data="hover">
+        <div style="display: contents">%sveltekit.body%</div>
+    </body>
 </html>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -15,6 +15,9 @@
 <p>Step 3: Set up site-wide layout</p>
 <p class=note>(go look at +layout.svelte)</p>
 
+<p>Step 4: Use Svelte MUI to display data</p>
+<button on:click={() => {goto('/fromapi_mui')}}>Show Containers in nice table</button>
+
 <style>
     .note {
         font-style: italic;

diff --git a/src/routes/fromapi_mui/+page.js b/src/routes/fromapi_mui/+page.js
@@ -0,0 +1,7 @@
+
+export async function load({ fetch }) {
+    const res = await fetch(`http://localhost:3000/containers`);
+    const as_obj = await res.json();
+    //console.log({as_obj});
+    return as_obj;
+}
diff --git a/src/routes/fromapi_mui/+page.svelte b/src/routes/fromapi_mui/+page.svelte
@@ -0,0 +1,27 @@
+<script>
+	import DataTable, { Head, Body, Row, Cell } from '@smui/data-table';
+
+	export let data;
+</script>
+
+<h1>Fetched from API, Displayed with Material UI</h1>
+
+<a href="https://sveltematerialui.com/demo/data-table/">Svelte Material UI Data Table info</a>
+<hr/>
+<DataTable stickyHeader table$aria-label="Containers" style="width: 100%;">
+	<Head>
+		<Row>
+			<Cell>ID</Cell>
+			<Cell>Ship Name</Cell>
+		</Row>
+	</Head>
+	<Body>
+		{#each data.containers as container (container.id)}
+			<Row>
+				<Cell>{container.id}</Cell>
+				<Cell>{container.nameOfShip}</Cell>
+			</Row>
+		{/each}
+	</Body>
+</DataTable>
+
diff --git a/src/theme/_smui-theme.scss b/src/theme/_smui-theme.scss
@@ -0,0 +1,25 @@
+@use 'sass:color';
+
+@use '@material/theme/color-palette';
+
+// Svelte Colors!
+@use '@material/theme/index' as theme with (
+  $primary: #ff3e00,
+  $secondary: #676778,
+  $surface: #fff,
+  $background: #fff,
+  $error: color-palette.$red-900
+);
+
+html,
+body {
+  background-color: theme.$surface;
+  color: theme.$on-surface;
+}
+
+a {
+  color: #40b3ff;
+}
+a:visited {
+  color: color.scale(#40b3ff, $lightness: -35%);
+}
diff --git a/src/theme/dark/_smui-theme.scss b/src/theme/dark/_smui-theme.scss
@@ -0,0 +1,25 @@
+@use 'sass:color';
+
+@use '@material/theme/color-palette';
+
+// Svelte Colors! (Dark Theme)
+@use '@material/theme/index' as theme with (
+  $primary: #ff3e00,
+  $secondary: color.scale(#676778, $whiteness: -10%),
+  $surface: color.adjust(color-palette.$grey-900, $blue: +4),
+  $background: #000,
+  $error: color-palette.$red-700
+);
+
+html,
+body {
+  background-color: #000;
+  color: theme.$on-surface;
+}
+
+a {
+  color: #40b3ff;
+}
+a:visited {
+  color: color.scale(#40b3ff, $lightness: -35%);
+}
diff --git a/static/smui-dark.css b/static/smui-dark.css
diff --git a/static/smui.css b/static/smui.css