maciejpedzich/six-degs-of-f1
1
0
Fork 0
mirror of https://github.com/maciejpedzich/six-degs-of-f1.git synced 2024-11-27 15:55:47 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Create a foundation for driver search page

Browse Source
This commit is contained in:
Maciej Pędzich 2024-04-27 23:56:22 +02:00
parent f158026ecd
commit 02908f7021
Signed by: maciejpedzich
GPG Key ID: CE4A303D84882F0D
3 changed files with 113 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/DriversList.astro Normal file
View File

@ -0,0 +1,16 @@
---
import { db } from '@/db';
const { records } = await db.executeQuery(
`MATCH (d:Driver)
RETURN
(d.forename + " " + d.surname) AS fullname
ORDER BY
toUpper(d.surname),
toUpper(d.forename)`
);
---
<datalist id="drivers">
{records.map((rec) => <option value={rec.get('fullname')} />)}
</datalist>

60
src/layouts/BaseLayout.astro
View File

@ -1,18 +1,60 @@
---
import '@picocss/pico/css/pico.blue.min.css';
---
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} /> <meta name="generator" content={Astro.generator} />
<title>Astro</title> <title>Six Degrees of Formula One</title>
<style>
body {
margin: 0;
padding: 0;
}
</style>
</head> </head>
<body> <body class="container">
<slot /> <header>
<nav aria-label="Main navigation">
<ul>
<li><a href="/about">About</a></li>
<li><a href="/credits">Credits</a></li>
<li>
<a href="https://github.com/maciejpedzich/sixdegs">Source Code</a>
</li>
</ul>
<ul>
<li>theme switch</li>
</ul>
</nav>
</header>
<main>
<slot />
</main>
<div id="spacer"></div>
<footer>
<small>
Made with 🧠 by <a href="https://maciejpedzi.ch">Maciej Pędzich</a>
</small>
</footer>
</body> </body>
</html> </html>
<style>
body {
height: 100vh;
display: flex;
flex-direction: column;
}
.container {
max-width: 65ch;
text-align: center;
}
#spacer {
flex: 1 0 auto;
}
footer {
border-top: 1px solid var(--pico-muted-border-color);
padding: 1rem;
}
</style>

62
src/pages/index.astro
View File

@ -1,23 +1,53 @@
--- ---
import BaseLayout from '../layouts/BaseLayout.astro'; import BaseLayout from '../layouts/BaseLayout.astro';
import VisGraph from '../components/VisGraph.astro'; import DriversList from '@/components/DriversList.astro';
const nodes = [ Astro.response.headers.set('Cache-Control', 'public, max-age=604800');
{ id: 1, label: 'Node 1' },
{ id: 2, label: 'Node 2' },
{ id: 3, label: 'Node 3' },
{ id: 4, label: 'Node 4' },
{ id: 5, label: 'Node 5' }
];
const edges = [
{ from: 1, to: 3 },
{ from: 1, to: 2 },
{ from: 2, to: 4 },
{ from: 2, to: 5 },
{ from: 3, to: 3 }
];
--- ---
<BaseLayout> <BaseLayout>
<VisGraph nodes={nodes} edges={edges} /> <hgroup>
<h1>Six Degrees of Formula One</h1>
<p>Find out which driver is the sport's Kevin Bacon</p>
</hgroup>
<p id="prompt">Get all the shortest paths from/to:</p>
<form action="/paths" method="GET">
<fieldset class="grid">
<input
type="text"
name="source"
placeholder="Source"
aria-label="Source"
list="drivers"
autocomplete="off"
required
/>
<input
type="text"
name="dest"
placeholder="Destination"
aria-label="Destination"
list="drivers"
autocomplete="off"
required
/>
<DriversList />
</fieldset>
<button type="submit">Submit</button>
</form>
</BaseLayout> </BaseLayout>
<style>
#prompt {
margin-top: 1.75rem;
}
fieldset.grid {
margin-bottom: 0.25rem;
}
button[type='submit'] {
padding: 0.5rem 0.75rem;
width: unset;
}
</style>