83 lines
2.1 KiB
TypeScript
83 lines
2.1 KiB
TypeScript
import type { NextPage } from "next";
|
|
import EditBox from "../components/EditBox";
|
|
|
|
const Home: NextPage = () => {
|
|
return (
|
|
<main>
|
|
<h2>Items</h2>
|
|
|
|
<details>
|
|
<summary>Details for nerds</summary>
|
|
<pre>{JSON.stringify(state)}</pre>
|
|
</details>
|
|
|
|
<p>
|
|
Final total: {formatter.format(state.finalTotal)}
|
|
<EditBox value={state.finalTotal} />
|
|
<input
|
|
type="text"
|
|
onInput={(e) => trySetNum(["finalTotal"], e.target.value)}
|
|
value={state.finalTotal}
|
|
/>
|
|
</p>
|
|
|
|
<ul style={{ "text-align": "left" }}>
|
|
<For each={state.items}>
|
|
{(item, i) => (
|
|
<li>
|
|
{item.name} ({formatter.format(item.price)})
|
|
<input
|
|
type="text"
|
|
onInput={(e) =>
|
|
trySetNum(["items", i(), "price"], e.target.value)
|
|
}
|
|
value={item.price}
|
|
/>
|
|
<ul>
|
|
<For each={item.people}>
|
|
{(person, j) => <li>{person.name}</li>}
|
|
</For>
|
|
<li>
|
|
<form onSubmit={(e) => itemAddPerson(e, i())}>
|
|
<input
|
|
type="text"
|
|
placeholder="Add person to split..."
|
|
onInput={(e) =>
|
|
setState("items", i(), "personEdit", e.target.value)
|
|
}
|
|
value={item.personEdit}
|
|
/>
|
|
</form>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
)}
|
|
</For>
|
|
|
|
<li>
|
|
<form onSubmit={addItem}>
|
|
<input
|
|
type="text"
|
|
placeholder="Add item..."
|
|
onInput={(e) => setState("itemEdit", e.target.value)}
|
|
value={state.itemEdit}
|
|
/>
|
|
</form>
|
|
</li>
|
|
</ul>
|
|
|
|
<ul>
|
|
<For each={Array.from(state.totals)}>
|
|
{([person, amount], i) => (
|
|
<li>
|
|
{person} : {formatter.format(amount)}
|
|
</li>
|
|
)}
|
|
</For>
|
|
</ul>
|
|
</main>
|
|
);
|
|
};
|
|
|
|
export default Home;
|