martials/old.martials.no
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added diff and xlsx, added dialog box, center error box, added download button

Browse Source
This commit is contained in:
Martin Berg Alstad 2023-01-11 23:45:43 +01:00
parent f8c56aabc6
commit 15220b923e
5 changed files with 187 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

116
package-lock.json generated
View File

@ -1,17 +1,20 @@
{ {
"name": "martials-no", "name": "martials-no",
"version": "0.1", "version": "1.0",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "martials-no", "name": "martials-no",
"version": "0.1", "version": "1.0",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@types/diff": "^5.0.2",
"diff": "^5.1.0",
"solid-headless": "^0.13.0", "solid-headless": "^0.13.0",
"solid-heroicons": "^3.1.1", "solid-heroicons": "^3.1.1",
"solid-js": "^1.6.6" "solid-js": "^1.6.6",
"xlsx": "^0.18.5"
}, },
"devDependencies": { "devDependencies": {
"autoprefixer": "^10.4.13", "autoprefixer": "^10.4.13",
@ -597,6 +600,11 @@
"node": ">= 8" "node": ">= 8"
} }
}, },
"node_modules/@types/diff": {
"version": "5.0.2",
"resolved": "https://registry.npmjs.org/@types/diff/-/diff-5.0.2.tgz",
"integrity": "sha512-uw8eYMIReOwstQ0QKF0sICefSy8cNO/v7gOTiIy9SbwuHyEecJUm7qlgueOO5S1udZ5I/irVydHVwMchgzbKTg=="
},
"node_modules/acorn": { "node_modules/acorn": {
"version": "7.4.1", "version": "7.4.1",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz", "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
@ -629,6 +637,14 @@
"node": ">=0.4.0" "node": ">=0.4.0"
} }
}, },
"node_modules/adler-32": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/adler-32/-/adler-32-1.3.1.tgz",
"integrity": "sha512-ynZ4w/nUUv5rrsR8UUGoe1VC9hZj6V5hU9Qw1HlMDJGEJw5S7TfTErWTjMys6M7vr0YWcPqs3qAr4ss0nDfP+A==",
"engines": {
"node": ">=0.8"
}
},
"node_modules/ansi-styles": { "node_modules/ansi-styles": {
"version": "3.2.1", "version": "3.2.1",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
@ -806,6 +822,18 @@
} }
] ]
}, },
"node_modules/cfb": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/cfb/-/cfb-1.2.2.tgz",
"integrity": "sha512-KfdUZsSOw19/ObEWasvBP/Ac4reZvAGauZhs6S/gqNhXhI7cKwvlH7ulj+dOEYnca4bm4SGo8C1bTAQvnTjgQA==",
"dependencies": {
"adler-32": "~1.3.0",
"crc-32": "~1.2.0"
},
"engines": {
"node": ">=0.8"
}
},
"node_modules/chalk": { "node_modules/chalk": {
"version": "2.4.2", "version": "2.4.2",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
@ -859,6 +887,14 @@
"node": ">= 6" "node": ">= 6"
} }
}, },
"node_modules/codepage": {
"version": "1.15.0",
"resolved": "https://registry.npmjs.org/codepage/-/codepage-1.15.0.tgz",
"integrity": "sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA==",
"engines": {
"node": ">=0.8"
}
},
"node_modules/color-convert": { "node_modules/color-convert": {
"version": "1.9.3", "version": "1.9.3",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@ -886,6 +922,17 @@
"integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==", "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
"dev": true "dev": true
}, },
"node_modules/crc-32": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.2.tgz",
"integrity": "sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==",
"bin": {
"crc32": "bin/crc32.njs"
},
"engines": {
"node": ">=0.8"
}
},
"node_modules/cssesc": { "node_modules/cssesc": {
"version": "3.0.0", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@ -952,6 +999,14 @@
"integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==", "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
"dev": true "dev": true
}, },
"node_modules/diff": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/diff/-/diff-5.1.0.tgz",
"integrity": "sha512-D+mk+qE8VC/PAUrlAU34N+VfXev0ghe5ywmpqrawphmVZc1bEfn56uo9qpyGp1p4xpzOHkSW4ztBd6L7Xx4ACw==",
"engines": {
"node": ">=0.3.1"
}
},
"node_modules/dlv": { "node_modules/dlv": {
"version": "1.1.3", "version": "1.1.3",
"resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz", "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
@ -1388,6 +1443,14 @@
"node": ">=8" "node": ">=8"
} }
}, },
"node_modules/frac": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/frac/-/frac-1.1.2.tgz",
"integrity": "sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA==",
"engines": {
"node": ">=0.8"
}
},
"node_modules/fraction.js": { "node_modules/fraction.js": {
"version": "4.2.0", "version": "4.2.0",
"resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz", "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz",
@ -2034,6 +2097,17 @@
"node": ">=0.10.0" "node": ">=0.10.0"
} }
}, },
"node_modules/ssf": {
"version": "0.11.2",
"resolved": "https://registry.npmjs.org/ssf/-/ssf-0.11.2.tgz",
"integrity": "sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==",
"dependencies": {
"frac": "~1.1.2"
},
"engines": {
"node": ">=0.8"
}
},
"node_modules/supports-color": { "node_modules/supports-color": {
"version": "5.5.0", "version": "5.5.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@ -2246,6 +2320,42 @@
} }
} }
}, },
"node_modules/wmf": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/wmf/-/wmf-1.0.2.tgz",
"integrity": "sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw==",
"engines": {
"node": ">=0.8"
}
},
"node_modules/word": {
"version": "0.3.0",
"resolved": "https://registry.npmjs.org/word/-/word-0.3.0.tgz",
"integrity": "sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA==",
"engines": {
"node": ">=0.8"
}
},
"node_modules/xlsx": {
"version": "0.18.5",
"resolved": "https://registry.npmjs.org/xlsx/-/xlsx-0.18.5.tgz",
"integrity": "sha512-dmg3LCjBPHZnQp5/F/+nnTa+miPJxUXB6vtk42YjBBKayDNagxGEeIdWApkYPOf3Z3pm3k62Knjzp7lMeTEtFQ==",
"dependencies": {
"adler-32": "~1.3.0",
"cfb": "~1.2.1",
"codepage": "~1.15.0",
"crc-32": "~1.2.1",
"ssf": "~0.11.2",
"wmf": "~1.0.1",
"word": "~0.3.0"
},
"bin": {
"xlsx": "bin/xlsx.njs"
},
"engines": {
"node": ">=0.8"
}
},
"node_modules/xtend": { "node_modules/xtend": {
"version": "4.0.2", "version": "4.0.2",
"resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz", "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",

9
package.json
View File

@ -1,7 +1,7 @@
{ {
"name": "martials-no", "name": "martials-no",
"version": "0.1", "version": "1.0",
"description": "", "description": "Landing page Martin Berg Alstad's APIs and other things",
"scripts": { "scripts": {
"dev": "vite", "dev": "vite",
"build": "vite build && sh build_extra.sh", "build": "vite build && sh build_extra.sh",
@ -17,8 +17,11 @@
"vite-plugin-solid": "^2.5.0" "vite-plugin-solid": "^2.5.0"
}, },
"dependencies": { "dependencies": {
"@types/diff": "^5.0.2",
"diff": "^5.1.0",
"solid-headless": "^0.13.0", "solid-headless": "^0.13.0",
"solid-heroicons": "^3.1.1", "solid-heroicons": "^3.1.1",
"solid-js": "^1.6.6" "solid-js": "^1.6.6",
"xlsx": "^0.18.5"
} }
} }

4
src/index.css
View File

@ -17,10 +17,6 @@
@apply border rounded-2xl border-gray-700; @apply border rounded-2xl border-gray-700;
} }
input[type="submit"] {
@apply border-rounded bg-cyan-900 px-2 cursor-pointer;
}
h1 { h1 {
@apply text-4xl; @apply text-4xl;
} }

124
src/truth-table.tsx
View File

@ -1,20 +1,19 @@
/* @refresh reload */ /* @refresh reload */
import Layout from "./components/layout"; import Layout from "./components/layout";
import { Input } from "./components/input"; import { Input } from "./components/input";
// import { Check, Download, Eye, EyeOff, Filter, Search, X } from "react-feather";
import { Icon } from "solid-heroicons"; import { Icon } from "solid-heroicons";
import TruthTable from "./components/truth-table"; import TruthTable from "./components/truth-table";
import { InfoBox, MyDisclosure, MyDisclosureContainer } from "./components/output"; import { InfoBox, MyDisclosure, MyDisclosureContainer } from "./components/output";
// import { diffChars } from "diff"; import { diffChars } from "diff";
// import MyMenu from "./components/menu"; // import MyMenu from "./components/menu";
// import { type BookType, utils, write, writeFile } from "xlsx" import { type BookType, utils, write, writeFile } from "xlsx"
// import MyDialog from "./components/myDialog";
import type { FetchResult } from "./types/interfaces"; import type { FetchResult } from "./types/interfaces";
import { type Component, createSignal, JSX, Show } from "solid-js"; import { type Component, createSignal, JSX, onMount, Show } from "solid-js";
import { For, render } from "solid-js/web"; import { For, render } from "solid-js/web";
import Row from "./components/row"; import Row from "./components/row";
import { magnifyingGlass, xMark } from "solid-heroicons/solid"; import { arrowDownTray, magnifyingGlass, xMark } from "solid-heroicons/solid";
import { MySwitch } from "./components/button"; import { Button, MySwitch } from "./components/button";
import MyDialog from "./components/dialog";
// TODO move some code to new components // TODO move some code to new components
const TruthTablePage: Component = () => { const TruthTablePage: Component = () => {
@ -71,7 +70,7 @@ const TruthTablePage: Component = () => {
// TODO add loading animation // TODO add loading animation
let result: FetchResult | undefined; let result: FetchResult | undefined;
await fetch(`http://localhost:8080/simplify/table?exp=${ exp }&simplify=${ simplifyEnabled() }`) await fetch(`https://api.martials.no/simplify-truths/simplify/table?exp=${ exp }&simplify=${ simplifyEnabled() }`)
.then(res => res.json()) .then(res => res.json())
.then(res => result = res) .then(res => result = res)
.catch(err => console.error(err)) // TODO show error on screen .catch(err => console.error(err)) // TODO show error on screen
@ -82,19 +81,19 @@ const TruthTablePage: Component = () => {
} }
} }
function getInput() { function getInputElement() {
return document.getElementById(inputId) as HTMLInputElement | null; return document.getElementById(inputId) as HTMLInputElement | null;
} }
function onTyping() { function onTyping() {
const el = getInput(); const el = getInputElement();
if (el && (el.value !== "") !== typing()) { if (el && (el.value !== "") !== typing()) {
setTyping(el.value !== ""); setTyping(el.value !== "");
} }
} }
function clearSearch() { function clearSearch() {
const el = getInput(); const el = getInputElement();
if (el) { if (el) {
el.value = ""; el.value = "";
setFetchResult(null); setFetchResult(null);
@ -106,9 +105,9 @@ const TruthTablePage: Component = () => {
const tableId = "truth-table"; const tableId = "truth-table";
const filenameId = "excel-filename"; const filenameId = "excel-filename";
document.addEventListener("DOMContentLoaded", () => { onMount(() => {
// Focuses searchbar on load // Focuses searchbar on load
(document.getElementById(inputId) as HTMLInputElement | null)?.focus(); getInputElement()?.focus();
}); });
/** /**
@ -137,26 +136,26 @@ const TruthTablePage: Component = () => {
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
// function exportToExcel( function exportToExcel(
// { {
// type = "xlsx", type = "xlsx",
// name = "Truth Table", name = "Truth Table",
// dl = false dl = false
// }: { type?: BookType, name?: string, dl?: boolean }): any { }: { type?: BookType, name?: string, dl?: boolean }): any {
//
// const element = document.getElementById(tableId); const element = document.getElementById(tableId);
// const wb = utils.table_to_book(element, { sheet: "sheet1" }); const wb = utils.table_to_book(element, { sheet: "sheet1" });
// return dl ? return dl ?
// write(wb, { bookType: type, bookSST: true, type: 'base64' }) : write(wb, { bookType: type, bookSST: true, type: 'base64' }) :
// writeFile(wb, name + "." + type); writeFile(wb, name + "." + type);
// } }
//
// function _exportToExcel(): void { function _exportToExcel(): void {
// const value = (document.getElementById(filenameId) as HTMLInputElement | null)?.value; const value = (document.getElementById(filenameId) as HTMLInputElement | null)?.value;
// exportToExcel({ exportToExcel({
// name: value !== "" ? value : undefined, name: value !== "" ? value : undefined,
// }); });
// } }
return ( return (
<Layout title={ "Truth tables" } <Layout title={ "Truth tables" }
@ -187,7 +186,7 @@ const TruthTablePage: Component = () => {
onChange={ onTyping } onChange={ onTyping }
leading={ <Icon path={ magnifyingGlass } class={ "pl-1 absolute h-6" } /> } leading={ <Icon path={ magnifyingGlass } class={ "pl-1 absolute h-6" } /> }
trailing={ <Show when={ typing() } keyed> trailing={ <Show when={ typing() } keyed>
<button class={ "absolute left-44 sm:left-[22rem]" /*TODO*/ } <button class={ "absolute left-44 sm:left-[22rem]" }
title={ "Clear" } title={ "Clear" }
type={ "reset" } type={ "reset" }
onClick={ clearSearch }> onClick={ clearSearch }>
@ -195,11 +194,11 @@ const TruthTablePage: Component = () => {
</button> </button>
</Show> } </Show> }
/> />
<input id={ "truth-input-button" } <Button id={ "truth-input-button" }
title={ "Generate (Enter)" } title={ "Generate (Enter)" }
type={ "submit" } type={ "submit" }
class={ "button min-w-50px h-10 ml-2" } className={ "min-w-50px h-10 ml-2" }
value={ "Generate" } /> children={ "Generate" } />
</form> </form>
<Row className={ "my-1 gap-2" }> <Row className={ "my-1 gap-2" }>
@ -245,27 +244,30 @@ const TruthTablePage: Component = () => {
{/*/>*/ } {/*/>*/ }
</div> </div>
{/*{*/ } {
{/* fetchResult()?.expression &&*/ } fetchResult()?.expression &&
{/* <MyDialog title={ t("download") }*/ } <MyDialog title={ "Download" }
{/* description={ t("exportCurrentTable") + " (.xlsx)" }*/ } description={ "Export current table (.xlsx)" }
{/* button={ <><p class={ "sr-only" }>{ t("download") }</p><Download /></> }*/ } button={ <>
{/* callback={ _exportToExcel }*/ } <p class={ "sr-only" }>{ "Download" }</p>
{/* acceptButtonName={ t("download") }*/ } <Icon class={ "w-6 h-6" } path={ arrowDownTray } />
{/* cancelButtonName={ t("cancel") }*/ } </> }
{/* buttonClasses={ `float-right` }*/ } callback={ _exportToExcel }
{/* buttonTitle={ t("exportCurrentTable") }*/ } acceptButtonName={ "Download" }
{/* acceptButtonId={ "download-accept" }>*/ } cancelButtonName={ "Cancel" }
{/* <p>{ t("filename") }:</p>*/ } buttonClasses={ `float-right` }
{/* <Input className={ "border-rounded h-10" } id={ filenameId }*/ } buttonTitle={ "Export current table" }
{/* placeholder={ "Truth Table" } />*/ } acceptButtonId={ "download-accept" }>
{/* </MyDialog>*/ } <p>{ "Filename" }:</p>
{/*}*/ } <Input className={ "border-rounded h-10 px-2" } id={ filenameId }
placeholder={ "Truth Table" } />
</MyDialog>
}
</Row> </Row>
{ {
fetchResult() && fetchResult()?.status.code !== 200 && fetchResult() && fetchResult()?.status.code !== 200 &&
<InfoBox className={ "w-fit text-center" } <InfoBox className={ "w-fit text-center mx-auto" }
title={ "Input error" } title={ "Input error" }
error={ true }> error={ true }>
<p>{ fetchResult()?.status.message }</p> <p>{ fetchResult()?.status.message }</p>
@ -281,8 +283,8 @@ const TruthTablePage: Component = () => {
(operation, index) => ( (operation, index) => (
<tr class={ "border-b border-dotted border-gray-500" }> <tr class={ "border-b border-dotted border-gray-500" }>
<td>{ index() + 1 }:</td> <td>{ index() + 1 }:</td>
<td class={ "px-2" }> <td class={ "px-2" }>{
{/* // TODO add method or create own
<For each={ diffChars(operation.before, operation.after) }> <For each={ diffChars(operation.before, operation.after) }>
{ (part) => ( { (part) => (
<span class={ <span class={
@ -290,8 +292,8 @@ const TruthTablePage: Component = () => {
${ part.removed && "bg-red-700" }` }> ${ part.removed && "bg-red-700" }` }>
{ part.value } { part.value }
</span>) } </span>) }
</For> </For> }
*/ }
{ typeof window !== "undefined" && window.outerWidth <= 640 && { typeof window !== "undefined" && window.outerWidth <= 640 &&
<p>{ "using" }: { operation.law }</p> } <p>{ "using" }: { operation.law }</p> }
</td> </td>
@ -321,7 +323,7 @@ const TruthTablePage: Component = () => {
<div class={ "flex justify-center m-2" }> <div class={ "flex justify-center m-2" }>
<div id={ "table" } class={ "h-[45rem] overflow-auto" }> <div id={ "table" } class={ "h-[45rem] overflow-auto" }>
{ /*TODO make sure table uses whole width and x-scrollable*/ }
<TruthTable header={ fetchResult()?.header ?? undefined } <TruthTable header={ fetchResult()?.header ?? undefined }
table={ fetchResult()?.table?.truthMatrix } id={ tableId } /> table={ fetchResult()?.table?.truthMatrix } id={ tableId } />

5
src/types/interfaces.ts
View File

@ -21,6 +21,11 @@ export interface TitleProps extends ChildProps {
title?: string, title?: string,
} }
export interface ButtonProps extends TitleProps {
onClick?: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent>,
type?: "button" | "submit" | "reset",
}
export interface InputProps<T> extends TitleProps { export interface InputProps<T> extends TitleProps {
onInput?: JSX.EventHandlerUnion<T, Event>, onInput?: JSX.EventHandlerUnion<T, Event>,
placeholder?: string | null, placeholder?: string | null,