SethTrowbridge
/
new-tree-system
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

cleanup layout

This commit is contained in:
Seth Trowbridge 2022-12-09 10:32:55 -05:00
parent 7b1bece42b
commit d0b5099826
3 changed files with 65 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
deno.json
View File

@ -1,14 +1,14 @@
{
"importMap": "./deno.map.json",
"compilerOptions": {
"types": ["./ts/types"],
"types": ["./ts/types.d.ts"],
"lib": ["deno.window", "dom"],
"checkJs": true
},
"tasks": {
"dev": "deno task fmt & deno task serve & deno task test",
"fmt": "deno fmt --watch --no-lock --no-check",
"serve": "deno run -A --unstable --no-lock --no-check https://deno.land/std@0.167.0/http/file_server.ts",
"fmt": "deno fmt --watch",
"serve": "deno run -A --unstable --no-check https://deno.land/std@0.167.0/http/file_server.ts",
"test": "deno test ts/test.ts --watch --no-lock --no-check"
}
}

6
index.html
View File

@ -1,4 +1,4 @@
<script type="importmap-shim" src="./deno.map.json"></script>
<script async src="https://unpkg.com/es-module-shims@0.13.1/dist/es-module-shims.min.js"></script>
<div id="app"></div>
<script type="module-shim">import "app";</script>
<script type="importmap-shim" src="./deno.map.json"></script>
<script type="module-shim">import "app";</script>
<script async src="https://unpkg.com/es-module-shims@0.13.1/dist/es-module-shims.min.js"></script>

85
js/people.js
View File

@ -4,7 +4,8 @@ import { Consumer } from "./store.js";
/** @typedef {(e:SubmitEvent|Event)=>void|null} handler */
/** @type {(props:{person:Store.Person })=>preact.VNode} */ const Person = (props) => {
/** @type {(props:{person:Store.Person })=>preact.VNode} */
const Person = (props) => {
const [, dispatch] = Consumer();
/** @type {handler} */ const handleClick = () => {
@ -12,49 +13,81 @@ import { Consumer } from "./store.js";
};
return html`
<div class="flex font-sans">
<button class="w-8 h-8 text(white xs) bg-red-500 rounded-lg" onClick=${handleClick}>X</button>
<span>${props.person.Name}</span>
<span>${props.person.Age}</span>
<div class="flex font-sans gap-5">
<button class="w-8 h-8 text(white xs) font-black bg-red-500 rounded-lg" onClick=${handleClick}>X</button>
<span class="w-36">${props.person.Name}</span>
<span class="w-12">${props.person.Age}</span>
</div>`;
};
/** @type {()=>preact.VNode} */ export default () => {
const [state, dispatch] = Consumer();
/** @type {()=>preact.VNode} */
const PersonTable = () => {
const [state] = Consumer();
return html`<h3 class="text-lg font-sans mb-3">People</h3>
<div class="p-4">
${
state.People.length > 0
? html`
<div class="flex flex-col gap-5">
<div class="flex font-sans text(xs gray-500) gap-5">
<span class="w-8">Delete</span>
<span class="w-36">Name</span>
<span class="w-12">Age</span>
</div>
${state.People.map((p) => html`<${Person} person=${p}/>`)}
</div>`
: html`
<p class="text(sm gray-500) italic font-sans">No people created</p>
`
}</div>`;
};
/** @type {()=>preact.VNode} */
const PersonForm = () => {
const [, dispatch] = Consumer();
const [nameGet, nameSet] = Preact.useState("default name");
const [ageGet, ageSet] = Preact.useState(21);
/** @type {handler} */ const handleSubmit = (e) => {
/** @type {handler} */
const handleSubmit = (e) => {
e.preventDefault();
dispatch({ Key: "person-create", Arg: { Name: nameGet, Age: ageGet } });
};
/** @type {handler} */ const handleName = (e) => {
/** @type {handler} */
const handleName = (e) => {
e.target && nameSet(/** @type {HTMLInputElement}*/ (e.target).value);
};
/** @type {handler} */ const handleAge = (e) => {
/** @type {handler} */
const handleAge = (e) => {
e.target &&
ageSet(parseInt(/** @type {HTMLInputElement}*/ (e.target).value));
};
return html`
<h3 class="text-lg font-sans">Add Person</h3>
<form onSubmit=${handleSubmit} class="p-4 font-sans flex items-end">
<span>
<label for="name" class="block text-xs">Name</label>
<input class="bg-gray-100 p-2 mr-2 rounded-lg" type="text" value=${nameGet} onInput=${handleName}/>
</span>
<span>
<label for="name" class="block text-xs">Age</label>
<input class="bg-gray-100 p-2 mr-2 rounded-lg" type="number" value=${ageGet} onInput=${handleAge} min="0" max="111"/>
</span>
<button class="p-2 rounded-lg text-white bg-blue-700">Create</button>
</form>`;
};
/** @type {()=>preact.VNode} */
export default () => {
return html`
<div>
<h3 class="text-lg font-sans">Add Person</h3>
<form onSubmit=${handleSubmit} class="p-4 font-sans flex items-end">
<span>
<label for="name" class="block text-xs">Name</label>
<input class="bg-gray-100 p-2 mr-2 rounded-lg" type="text" value=${nameGet} onInput=${handleName}/>
</span>
<span>
<label for="name" class="block text-xs">Age</label>
<input class="bg-gray-100 p-2 mr-2 rounded-lg" type="number" value=${ageGet} onInput=${handleAge} min="0" max="111"/>
</span>
<button class="p-2 rounded-lg text-white bg-blue-700">Create</button>
</form>
<h3 class="text-lg font-sans">People</h3>
<div>
${state.People.map((p) => html`<${Person} person=${p}/>`)}
</div>
<h2 class="pb-2 mb-2 border-b text-2xl font-sans border(">Person Records</h2>
<div class="px-2">
<${PersonForm}/>
<${PersonTable}/>
</div>
</div>`;
};