Initial
This commit is contained in:
commit
111cc23599
15 changed files with 8142 additions and 0 deletions
24
.gitignore
vendored
Normal file
24
.gitignore
vendored
Normal file
|
@ -0,0 +1,24 @@
|
||||||
|
|
||||||
|
dist
|
||||||
|
.solid
|
||||||
|
.output
|
||||||
|
.vercel
|
||||||
|
.netlify
|
||||||
|
netlify
|
||||||
|
|
||||||
|
# dependencies
|
||||||
|
/node_modules
|
||||||
|
|
||||||
|
# IDEs and editors
|
||||||
|
/.idea
|
||||||
|
.project
|
||||||
|
.classpath
|
||||||
|
*.launch
|
||||||
|
.settings/
|
||||||
|
|
||||||
|
# Temp
|
||||||
|
gitignore
|
||||||
|
|
||||||
|
# System Files
|
||||||
|
.DS_Store
|
||||||
|
Thumbs.db
|
9
README.md
Normal file
9
README.md
Normal file
|
@ -0,0 +1,9 @@
|
||||||
|
# Wisesplit
|
||||||
|
|
||||||
|
Does the one calculation I expected Splitwise to have but it didn't.
|
||||||
|
|
||||||
|
## Contact
|
||||||
|
|
||||||
|
License: AGPL-3.0
|
||||||
|
|
||||||
|
Author: Michael Zhang
|
7761
package-lock.json
generated
Normal file
7761
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
24
package.json
Normal file
24
package.json
Normal file
|
@ -0,0 +1,24 @@
|
||||||
|
{
|
||||||
|
"name": "splitwise",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "solid-start dev",
|
||||||
|
"build": "solid-start build",
|
||||||
|
"start": "solid-start start"
|
||||||
|
},
|
||||||
|
"type": "module",
|
||||||
|
"devDependencies": {
|
||||||
|
"solid-start-node": "^0.2.0",
|
||||||
|
"typescript": "^4.8.4",
|
||||||
|
"vite": "^3.1.8"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@solidjs/meta": "^0.28.0",
|
||||||
|
"@solidjs/router": "^0.5.0",
|
||||||
|
"solid-js": "^1.6.0",
|
||||||
|
"solid-start": "^0.2.0",
|
||||||
|
"undici": "^5.11.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=16"
|
||||||
|
}
|
||||||
|
}
|
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
After Width: | Height: | Size: 664 B |
20
src/components/Counter.css
Normal file
20
src/components/Counter.css
Normal file
|
@ -0,0 +1,20 @@
|
||||||
|
.increment {
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: inherit;
|
||||||
|
padding: 1em 2em;
|
||||||
|
color: #335d92;
|
||||||
|
background-color: rgba(68, 107, 158, 0.1);
|
||||||
|
border-radius: 2em;
|
||||||
|
border: 2px solid rgba(68, 107, 158, 0);
|
||||||
|
outline: none;
|
||||||
|
width: 200px;
|
||||||
|
font-variant-numeric: tabular-nums;
|
||||||
|
}
|
||||||
|
|
||||||
|
.increment:focus {
|
||||||
|
border: 2px solid #335d92;
|
||||||
|
}
|
||||||
|
|
||||||
|
.increment:active {
|
||||||
|
background-color: rgba(68, 107, 158, 0.2);
|
||||||
|
}
|
11
src/components/Counter.tsx
Normal file
11
src/components/Counter.tsx
Normal file
|
@ -0,0 +1,11 @@
|
||||||
|
import { createSignal } from "solid-js";
|
||||||
|
import "./Counter.css";
|
||||||
|
|
||||||
|
export default function Counter() {
|
||||||
|
const [count, setCount] = createSignal(0);
|
||||||
|
return (
|
||||||
|
<button class="increment" onClick={() => setCount(count() + 1)}>
|
||||||
|
Clicks: {count()}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
}
|
3
src/entry-client.tsx
Normal file
3
src/entry-client.tsx
Normal file
|
@ -0,0 +1,3 @@
|
||||||
|
import { mount, StartClient } from "solid-start/entry-client";
|
||||||
|
|
||||||
|
mount(() => <StartClient />, document);
|
9
src/entry-server.tsx
Normal file
9
src/entry-server.tsx
Normal file
|
@ -0,0 +1,9 @@
|
||||||
|
import {
|
||||||
|
createHandler,
|
||||||
|
renderAsync,
|
||||||
|
StartServer,
|
||||||
|
} from "solid-start/entry-server";
|
||||||
|
|
||||||
|
export default createHandler(
|
||||||
|
renderAsync((event) => <StartServer event={event} />)
|
||||||
|
);
|
40
src/root.css
Normal file
40
src/root.css
Normal file
|
@ -0,0 +1,40 @@
|
||||||
|
body {
|
||||||
|
font-family: Gordita, Roboto, Oxygen, Ubuntu, Cantarell,
|
||||||
|
'Open Sans', 'Helvetica Neue', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
margin-right: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
text-align: center;
|
||||||
|
padding: 1em;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
color: #335d92;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-size: 4rem;
|
||||||
|
font-weight: 100;
|
||||||
|
line-height: 1.1;
|
||||||
|
margin: 4rem auto;
|
||||||
|
max-width: 14rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
max-width: 14rem;
|
||||||
|
margin: 2rem auto;
|
||||||
|
line-height: 1.35;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 480px) {
|
||||||
|
h1 {
|
||||||
|
max-width: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
max-width: none;
|
||||||
|
}
|
||||||
|
}
|
39
src/root.tsx
Normal file
39
src/root.tsx
Normal file
|
@ -0,0 +1,39 @@
|
||||||
|
// @refresh reload
|
||||||
|
import { Suspense } from "solid-js";
|
||||||
|
import {
|
||||||
|
A,
|
||||||
|
Body,
|
||||||
|
ErrorBoundary,
|
||||||
|
FileRoutes,
|
||||||
|
Head,
|
||||||
|
Html,
|
||||||
|
Meta,
|
||||||
|
Routes,
|
||||||
|
Scripts,
|
||||||
|
Title,
|
||||||
|
} from "solid-start";
|
||||||
|
import "./root.css";
|
||||||
|
|
||||||
|
export default function Root() {
|
||||||
|
return (
|
||||||
|
<Html lang="en">
|
||||||
|
<Head>
|
||||||
|
<Title>SolidStart - Bare</Title>
|
||||||
|
<Meta charset="utf-8" />
|
||||||
|
<Meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
</Head>
|
||||||
|
<Body>
|
||||||
|
<Suspense>
|
||||||
|
<ErrorBoundary>
|
||||||
|
<A href="/">Index</A>
|
||||||
|
<A href="/about">About</A>
|
||||||
|
<Routes>
|
||||||
|
<FileRoutes />
|
||||||
|
</Routes>
|
||||||
|
</ErrorBoundary>
|
||||||
|
</Suspense>
|
||||||
|
<Scripts />
|
||||||
|
</Body>
|
||||||
|
</Html>
|
||||||
|
);
|
||||||
|
}
|
19
src/routes/[...404].tsx
Normal file
19
src/routes/[...404].tsx
Normal file
|
@ -0,0 +1,19 @@
|
||||||
|
import { Title } from "solid-start";
|
||||||
|
import { HttpStatusCode } from "solid-start/server";
|
||||||
|
|
||||||
|
export default function NotFound() {
|
||||||
|
return (
|
||||||
|
<main>
|
||||||
|
<Title>Not Found</Title>
|
||||||
|
<HttpStatusCode code={404} />
|
||||||
|
<h1>Page Not Found</h1>
|
||||||
|
<p>
|
||||||
|
Visit{" "}
|
||||||
|
<a href="https://start.solidjs.com" target="_blank">
|
||||||
|
start.solidjs.com
|
||||||
|
</a>{" "}
|
||||||
|
to learn how to build SolidStart apps.
|
||||||
|
</p>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
161
src/routes/index.tsx
Normal file
161
src/routes/index.tsx
Normal file
|
@ -0,0 +1,161 @@
|
||||||
|
import { createStore } from "solid-js/store";
|
||||||
|
import { batch, createComputed, createSignal, For } from "solid-js";
|
||||||
|
import { Title } from "solid-start";
|
||||||
|
|
||||||
|
export default function Home() {
|
||||||
|
const [state, setState] = createStore({
|
||||||
|
itemEdit: "",
|
||||||
|
items: [],
|
||||||
|
finalTotal: 0,
|
||||||
|
|
||||||
|
get totals() {
|
||||||
|
const totals = new Map();
|
||||||
|
|
||||||
|
let subtotalSum = 0;
|
||||||
|
for (let item of state.items) {
|
||||||
|
const price = item.price;
|
||||||
|
const numPeople = item.people.length;
|
||||||
|
if (numPeople == 0) continue;
|
||||||
|
|
||||||
|
const eachPrice = price / numPeople;
|
||||||
|
subtotalSum += price;
|
||||||
|
for (let person of item.people) {
|
||||||
|
const personName = person.name.toString();
|
||||||
|
let accum = totals.get(personName) || 0;
|
||||||
|
accum += eachPrice;
|
||||||
|
totals.set(personName, accum);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (subtotalSum == 0) return totals;
|
||||||
|
|
||||||
|
const proportion = state.finalTotal / subtotalSum;
|
||||||
|
console.log("Subtotal sum", subtotalSum, proportion);
|
||||||
|
const newTotals = new Map();
|
||||||
|
for (let person of totals.keys()) {
|
||||||
|
const value = totals.get(person);
|
||||||
|
newTotals.set(person, value * proportion);
|
||||||
|
}
|
||||||
|
|
||||||
|
return newTotals;
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const [totals, setTotals] = createSignal(new Map());
|
||||||
|
|
||||||
|
const addItem = (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
batch(() => {
|
||||||
|
setState("items", [
|
||||||
|
...state.items,
|
||||||
|
{ name: state.itemEdit, price: 0, personEdit: "", people: [] },
|
||||||
|
]);
|
||||||
|
setState("itemEdit", "");
|
||||||
|
});
|
||||||
|
return false;
|
||||||
|
};
|
||||||
|
|
||||||
|
const itemAddPerson = (e, i) => {
|
||||||
|
e.preventDefault();
|
||||||
|
batch(() => {
|
||||||
|
setState("items", i, "people", [
|
||||||
|
...state.items[i].people,
|
||||||
|
{ name: state.items[i].personEdit },
|
||||||
|
]);
|
||||||
|
setState("items", i, "personEdit", "");
|
||||||
|
});
|
||||||
|
return false;
|
||||||
|
};
|
||||||
|
|
||||||
|
const trySetNum = (target, v) => {
|
||||||
|
try {
|
||||||
|
let n = parseFloat(v);
|
||||||
|
console.log([...target, n]);
|
||||||
|
setState.apply(null, [...target, n]);
|
||||||
|
} catch (e) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const formatter = new Intl.NumberFormat("en-US", {
|
||||||
|
style: "currency",
|
||||||
|
currency: "USD",
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<main>
|
||||||
|
<Title>Hello World</Title>
|
||||||
|
|
||||||
|
<h2>Items</h2>
|
||||||
|
|
||||||
|
<details>
|
||||||
|
<summary>Details for nerds</summary>
|
||||||
|
<pre>{JSON.stringify(state)}</pre>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Final total: {formatter.format(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>
|
||||||
|
);
|
||||||
|
}
|
16
tsconfig.json
Normal file
16
tsconfig.json
Normal file
|
@ -0,0 +1,16 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"allowSyntheticDefaultImports": true,
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"target": "ESNext",
|
||||||
|
"module": "ESNext",
|
||||||
|
"moduleResolution": "node",
|
||||||
|
"jsxImportSource": "solid-js",
|
||||||
|
"jsx": "preserve",
|
||||||
|
"types": ["vite/client"],
|
||||||
|
"baseUrl": "./",
|
||||||
|
"paths": {
|
||||||
|
"~/*": ["./src/*"]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
6
vite.config.ts
Normal file
6
vite.config.ts
Normal file
|
@ -0,0 +1,6 @@
|
||||||
|
import solid from "solid-start/vite";
|
||||||
|
import { defineConfig } from "vite";
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [solid()],
|
||||||
|
});
|
Loading…
Reference in a new issue