Add another attempt with python
This commit is contained in:
15
rust_warp_svelte/ui/src/routes/Home.svelte
Normal file
15
rust_warp_svelte/ui/src/routes/Home.svelte
Normal file
@@ -0,0 +1,15 @@
|
||||
<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>
|
||||
<button on:click={() => redirect("/trips/")}>Trips</button>
|
||||
</main>
|
||||
10
rust_warp_svelte/ui/src/routes/NotFound.svelte
Normal file
10
rust_warp_svelte/ui/src/routes/NotFound.svelte
Normal file
@@ -0,0 +1,10 @@
|
||||
<script lang="ts">
|
||||
export let redirect;
|
||||
</script>
|
||||
|
||||
<main>
|
||||
<div>
|
||||
404 -- Not Found
|
||||
</div>
|
||||
<button on:click={() => redirect("/")}>Back to home</button>
|
||||
</main>
|
||||
134
rust_warp_svelte/ui/src/routes/PackageList.svelte
Normal file
134
rust_warp_svelte/ui/src/routes/PackageList.svelte
Normal file
@@ -0,0 +1,134 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
import PackageListTable from "../components/PackageListTable.svelte"
|
||||
|
||||
export let redirect;
|
||||
export let data;
|
||||
|
||||
const resetActiveElement = () => {
|
||||
activeElement = {
|
||||
name: "",
|
||||
count: 1,
|
||||
preparationsteps: [],
|
||||
};
|
||||
};
|
||||
|
||||
let activeElement;
|
||||
resetActiveElement();
|
||||
|
||||
export const url = `/lists/${data.id}`
|
||||
|
||||
let sidebarActive = true;
|
||||
|
||||
const toggleSidebar = () => {
|
||||
sidebarActive = !sidebarActive;
|
||||
}
|
||||
|
||||
const apply = async () => {
|
||||
const response = await fetch(`http://localhost:9000/v1/lists/${data.id}/items`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"Accept": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
name: activeElement.name,
|
||||
count: activeElement.count,
|
||||
}),
|
||||
cache: "no-store",
|
||||
});
|
||||
|
||||
const d = await response.json();
|
||||
|
||||
console.log(d);
|
||||
items = [...items, d];
|
||||
console.log(items[0]);
|
||||
console.log(d);
|
||||
|
||||
resetActiveElement();
|
||||
sidebarActive = false;
|
||||
}
|
||||
|
||||
const cancel = () => {
|
||||
resetActiveElement();
|
||||
sidebarActive = false;
|
||||
}
|
||||
|
||||
async function getItems(id) {
|
||||
let response = await fetch(`http://localhost:9000/v1/lists/${id}/items`, {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Accept": "application/json"
|
||||
},
|
||||
cache: "no-store",
|
||||
});
|
||||
items = await response.json();
|
||||
}
|
||||
|
||||
async function getList() {
|
||||
const response = await fetch(`http://localhost:9000/v1/lists/${data.id}`, {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Accept": "application/json"
|
||||
},
|
||||
cache: "no-store",
|
||||
})
|
||||
|
||||
list = await response.json();
|
||||
}
|
||||
|
||||
let list = {name: ""};
|
||||
let items = [];
|
||||
|
||||
onMount(async () => {
|
||||
await getList();
|
||||
await getItems(data.id);
|
||||
});
|
||||
</script>
|
||||
|
||||
<main>
|
||||
<div>
|
||||
<h2 class="text-3xl mt-12 mb-20 font-semibold text-center mb-5 mt-3">{list.name}</h2>
|
||||
<div class="container mx-auto grid grid-cols-12 gap-1 items-start justify-items-stretch">
|
||||
<div class="col-start-1 col-end-9">
|
||||
<PackageListTable items={items} id={list.id} {redirect}/>
|
||||
<button class="p-3 w-full mt-3 border border-gray-200 bg-indigo-300" on:click={toggleSidebar}>Add new item</button>
|
||||
</div>
|
||||
<div class="col-start-9 col-end-10"/>
|
||||
<div class="col-start-10 col-end-13">
|
||||
{#if sidebarActive}
|
||||
<div>
|
||||
<label for="name">Name</label>
|
||||
<input
|
||||
class="w-full"
|
||||
type="text"
|
||||
id="name"
|
||||
name="name"
|
||||
bind:value={activeElement.name}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label for="count">Count</label>
|
||||
<input
|
||||
class="w-full"
|
||||
type="number"
|
||||
id="count"
|
||||
name="count"
|
||||
bind:value={activeElement.count}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
{#each activeElement.preparationsteps as step}
|
||||
{step}
|
||||
{/each}
|
||||
</div>
|
||||
<div class="flex flex-row mt-6 justify-between w-full">
|
||||
<button type="submit" class="p-3 border border-gray-200 bg-green-300" on:click={() => apply()}>Apply</button>
|
||||
<button class="p-3 border border-gray-200 bg-red-300" on:click={() => cancel()}>Cancel</button>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
47
rust_warp_svelte/ui/src/routes/PackageLists.svelte
Normal file
47
rust_warp_svelte/ui/src/routes/PackageLists.svelte
Normal file
@@ -0,0 +1,47 @@
|
||||
<script lang="ts">
|
||||
import PackageList from "../components/PackageList.svelte"
|
||||
|
||||
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: {
|
||||
"Accept": "application/json"
|
||||
},
|
||||
cache: "no-store",
|
||||
});
|
||||
let lists = await response.json();
|
||||
return lists;
|
||||
}
|
||||
</script>
|
||||
|
||||
<main>
|
||||
<div class="container mx-auto mt-12">
|
||||
<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>
|
||||
<th class="p-3"># Items</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#await getLists()}
|
||||
<p>Loading</p>
|
||||
{:then lists}
|
||||
{#each lists as list}
|
||||
<tr class="border" on:click={e => redirect(url + list.id)}>
|
||||
<td class="p-3">{list.name}</td>
|
||||
<td class="p-3">{list.items.length}</td>
|
||||
</tr>
|
||||
{/each}
|
||||
{:catch error}
|
||||
<p>Error: {error}</p>
|
||||
{/await}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</main>
|
||||
41
rust_warp_svelte/ui/src/routes/Preparation.svelte
Normal file
41
rust_warp_svelte/ui/src/routes/Preparation.svelte
Normal file
@@ -0,0 +1,41 @@
|
||||
<script lang="ts">
|
||||
export let redirect;
|
||||
export let data;
|
||||
|
||||
async function getSteps() {
|
||||
let response = await fetch(`http://localhost:9000/v1/lists/${data.list_id}/items/${data.item_id}/preparation`, {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Accept": "application/json"
|
||||
},
|
||||
cache: "no-store",
|
||||
});
|
||||
let list = await response.json();
|
||||
return list;
|
||||
}
|
||||
</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>
|
||||
<th class="p-3">Start</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#await getSteps()}
|
||||
<p>Loading</p>
|
||||
{:then steps}
|
||||
{#each steps as step}
|
||||
<tr class="border">
|
||||
<td class="p-3">{step.name}</td>
|
||||
<td class="p-3">{step.start.days} days before</td>
|
||||
</tr>
|
||||
{/each}
|
||||
{:catch error}
|
||||
<p>Error: {error}</p>
|
||||
{/await}
|
||||
</tbody>
|
||||
</table>
|
||||
</main>
|
||||
78
rust_warp_svelte/ui/src/routes/Trip.svelte
Normal file
78
rust_warp_svelte/ui/src/routes/Trip.svelte
Normal file
@@ -0,0 +1,78 @@
|
||||
<script lang="ts">
|
||||
export let redirect;
|
||||
export let data;
|
||||
|
||||
export const url = "/trips/"
|
||||
|
||||
async function getTrip() {
|
||||
let response = await fetch(`http://localhost:9000/v1/trips/${data.id}`, {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Accept": "application/json"
|
||||
},
|
||||
cache: "no-store",
|
||||
});
|
||||
let trip = await response.json();
|
||||
return trip;
|
||||
}
|
||||
|
||||
async function getTripItems() {
|
||||
let response = await fetch(`http://localhost:9000/v1/trips/${data.id}/items`, {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Accept": "application/json"
|
||||
},
|
||||
cache: "no-store",
|
||||
});
|
||||
let items = await response.json();
|
||||
return items;
|
||||
}
|
||||
</script>
|
||||
|
||||
<main>
|
||||
<div class="container mx-auto mt-12">
|
||||
{#await getTrip()}
|
||||
<p>Loading</p>
|
||||
{:then trip}
|
||||
<h2 class="text-3xl mt-12 mb-20 font-semibold text-center mb-5 mt-3">{trip.name}</h2>
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td>Date</td>
|
||||
<td>{trip.date}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Duration</td>
|
||||
<td>{trip.parameters.days} Days</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Status</td>
|
||||
<td>{trip.state}</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<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>
|
||||
<th class="p-3">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#await getTripItems()}
|
||||
<p>Loading</p>
|
||||
{:then items}
|
||||
{#each items as item}
|
||||
<tr class="border">
|
||||
<td class="p-3">{item.packageItem.name}</td>
|
||||
<td class="p-3">{item.status}</td>
|
||||
</tr>
|
||||
{/each}
|
||||
{:catch error}
|
||||
{error}
|
||||
{/await}
|
||||
</tbody>
|
||||
</table>
|
||||
{/await}
|
||||
</div>
|
||||
</main>
|
||||
64
rust_warp_svelte/ui/src/routes/Trips.svelte
Normal file
64
rust_warp_svelte/ui/src/routes/Trips.svelte
Normal file
@@ -0,0 +1,64 @@
|
||||
<script lang="ts">
|
||||
export let redirect;
|
||||
export let data;
|
||||
|
||||
export const url = "/trips/"
|
||||
|
||||
async function getTrips() {
|
||||
let response = await fetch("http://localhost:9000/v1/trips", {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Accept": "application/json"
|
||||
},
|
||||
cache: "no-store",
|
||||
});
|
||||
let trips = await response.json();
|
||||
return trips;
|
||||
}
|
||||
</script>
|
||||
|
||||
<main>
|
||||
<div class="container mx-auto mt-12">
|
||||
<h2 class="text-3xl mt-12 mb-20 font-semibold text-center mb-5 mt-3">Trips</h2>
|
||||
<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>
|
||||
<th class="p-3">Date</th>
|
||||
<th class="p-3">Days</th>
|
||||
<th class="p-3">State</th>
|
||||
<th class="p-3">Package Lists</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#await getTrips()}
|
||||
<p>Loading</p>
|
||||
{:then trips}
|
||||
{#each trips as trip}
|
||||
<tr class="border" on:click={e => redirect(url + trip.id)}>
|
||||
<td class="p-3" on:click={() => redirect(`/trips/${trip.id}`)}>{trip.name}</td>
|
||||
<td class="p-3">{trip.date}</td>
|
||||
<td class="p-3">{trip.parameters.days}</td>
|
||||
{#if trip.state == "active"}
|
||||
<td class="p-3 bg-green-100">{trip.state}</td>
|
||||
{:else if trip.state == "planned"}
|
||||
<td class="p-3 bg-blue-100">{trip.state}</td>
|
||||
{:else}
|
||||
<td class="p-3">{trip.state}</td>
|
||||
{/if}
|
||||
<td class="p-3">
|
||||
<ul>
|
||||
{#each trip.packageLists as list}
|
||||
<li><button on:click={() => redirect(`/lists/${list.id}`)}>{list.name}</button></li>
|
||||
{/each}
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
{:catch error}
|
||||
<p>Error: {error}</p>
|
||||
{/await}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</main>
|
||||
Reference in New Issue
Block a user