hannes/packager
1
0
Fork 0
Code Issues 10 Pull Requests Projects Releases Wiki Activity

WIP

Browse Source
This commit is contained in:
Hannes Körber
2021-09-07 00:02:53 +02:00
parent fdffe5fcdd
commit 2bebb7b378
12 changed files with 834 additions and 529 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
ui/rollup.config.js
View File

@@ -19,7 +19,7 @@ function serve() {
return {
writeBundle() {
if (server) return;
server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev', '--single'], {
stdio: ['ignore', 'inherit', 'inherit'],
shell: true
});

55
ui/src/App.svelte
View File

@@ -3,29 +3,58 @@
</svelte:head>
<script lang="ts">
import PackageLists from "./routes/PackageLists.svelte";
import Home from "./routes/Home.svelte";
import PackageLists from "./routes/PackageLists.svelte";
import PackageList from "./routes/PackageList.svelte";
$: {
const path = window.location.pathname;
console.log(`Routing ${path}`);
function normalize(path) {
return path.replace(/\/+$/, '') + "/";
}
let component;
let currentRoute;
let data;
if (path == "/") {
compontent = Home;
} else if (path == "/lists/") {
console.log("Routing to package lists");
component = PackageLists;
} else if (path.startswith("/lists/")) {
console.log("hm");
function route(path) {
path = normalize(path);
console.log(`Routing path "${path}"`);
data = {}
let urlParts = path.split("/").slice(1, -1);
if (path === "/") {
console.log("=> Home");
currentRoute = Home;
} else if (urlParts[0] == "lists" && urlParts.length == 1) {
console.log("=> PackageLists");
currentRoute = PackageLists;
} else if (urlParts[0] == "lists" && urlParts.length == 2) {
console.log("=> PackageList");
currentRoute = PackageList;
data = {id: urlParts[1]};
} else {
console.log("No matching route found");
}
}
window.onload = e => {
route(window.location.pathname);
}
function redirect(path) {
history.pushState({id: path}, "", path);
route(path);
}
window.addEventListener("locationchange", function() {
route(window.location.pathname);
});
window.addEventListener("popstate", event => {
route(window.location.pathname);
});
</script>
<main>
<svelte:component this={component} />
<svelte:component this={currentRoute} redirect={redirect} data={data}/>
</main>

11
ui/src/components/PackageList.svelte
View File

@@ -1,11 +1,14 @@
<script lang="ts">
import PackageItem from "./PackageItem.svelte"
import { fade, fly, draw } from 'svelte/transition';
import { createEventDispatcher } from 'svelte';
import { fade } from 'svelte/transition';
export let name;
export let items;
export let id;
const dispatch = createEventDispatcher();
let active = false;
let shown_items = [];
let ellipsed = false;
@@ -25,8 +28,10 @@
ellipsed = true
}
function onClick(e) {
window.history.pushState({}, "", `/lists/${e}`);
function onClick(id) {
dispatch('select', {
id: id
});
}
</script>

56
ui/src/components/PackageListTable.svelte Normal file
View File

@@ -0,0 +1,56 @@
<script lang="ts">
export let list;
$: has_sizes = list.items.some(l => l.size.type != "None");
$: has_counts = list.items.some(l => l.count > 1);
</script>
<main>
<table class="table-auto w-full">
<thead>
<tr class="font-semibold tracking-wider text-left bg-gray-100 uppercase border-b border-gray-400">
<th class="p-3">Name</th>
{#if has_sizes }
<th class="p-3">Size</th>
{/if}
{#if has_counts}
<th class="p-3">Count</th>
{/if}
</tr>
</thead>
<tbody>
{#each list.items as item}
<tr class="border">
<td class="p-3">{item.name}</td>
{#if has_sizes }
<td class="p-3">
{#if item.size.type == "None"}
{:else if item.size.type == "Gram"}
{#if item.size.value == 1}
{item.size.value} Gram
{:else}
{item.size.value} Grams
{/if}
{:else if item.size.type == "Pack"}
{#if item.size.value == 1}
{item.size.value} Pack
{:else}
{item.size.value} Packs
{/if}
{:else}
{item.size.value} {item.size.type}
{/if}
</td>
{/if}
{#if has_counts}
<td class="p-3">
{#if item.count > 1}
{item.count}
{/if}
</td>
{/if}
</tr>
{/each}
</tbody>
</table>
</main>

6
ui/src/routes/Home.svelte
View File

@@ -1,8 +1,14 @@
<script lang="ts">
export let redirect;
function navigateToPackageLists() {
redirect("/lists/");
}
</script>
<main>
<div>
Welcome to Packager, your helper for your next trip!
</div>
<button on:click={navigateToPackageLists}>Lists</button>
</main>

35
ui/src/routes/PackageList.svelte Normal file
View File

@@ -0,0 +1,35 @@
<script lang="ts">
import PackageListTable from "../components/PackageListTable.svelte"
export let redirect;
export let data;
export const url = `/lists/${data.id}`
async function getList() {
let response = await fetch(`http://localhost:9000/v1/lists/${data.id}`, {
method: "GET",
headers: {
"Accept": "application/json"
},
cache: "no-store",
});
let list = await response.json();
return list;
}
</script>
<main>
<div>
{#await getList()}
<p>Loading</p>
{:then list}
<div class="container mx-auto">
<h2 class="text-3xl mt-12 mb-20 font-semibold text-center mb-5 mt-3">{list.name}</h2>
<PackageListTable list={list} />
</div>
{:catch error}
<p>Error: {error}</p>
{/await}
</div>
</main>

15
ui/src/routes/PackageLists.svelte
View File

@@ -1,7 +1,12 @@
<script lang="ts">
import PackageList from "../components/PackageList.svelte"
async function getUsers() {
export let redirect;
export let data;
export const url = "/lists/"
async function getLists() {
let response = await fetch("http://localhost:9000/v1/lists", {
method: "GET",
headers: {
@@ -9,20 +14,20 @@
},
cache: "no-store",
});
let users = await response.json();
return users;
let lists = await response.json();
return lists;
}
</script>
<main>
<div>
{#await getUsers()}
{#await getLists()}
<p>Loading</p>
{:then lists}
<div class="m-2 grid grid-cols-3 gap-5 items-start grid-flow-row">
{#each lists as list}
<div class="p-3 border rounded-lg border-gray-300 shadow hover:shadow-xl bg-gray-100 bg-opacity-30 hover:bg-opacity-100">
<PackageList id={list.id} name={list.name} items={list.items}/>
<PackageList id={list.id} name={list.name} items={list.items} on:select={e => redirect(url + e.detail.id)} />
</div>
{/each}
</div>