Added diff and xlsx, added dialog box, center error box, added download button
This commit is contained in:
Martin Berg Alstad
parent
f8c56aabc6
commit
15220b923e
116
package-lock.json
generated
116
package-lock.json
generated
@ -1,17 +1,20 @@
|
||||
{
|
||||
"name": "martials-no",
|
||||
"version": "0.1",
|
||||
"version": "1.0",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "martials-no",
|
||||
"version": "0.1",
|
||||
"version": "1.0",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/diff": "^5.0.2",
|
||||
"diff": "^5.1.0",
|
||||
"solid-headless": "^0.13.0",
|
||||
"solid-heroicons": "^3.1.1",
|
||||
"solid-js": "^1.6.6"
|
||||
"solid-js": "^1.6.6",
|
||||
"xlsx": "^0.18.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^10.4.13",
|
||||
@ -597,6 +600,11 @@
|
||||
"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": {
|
||||
"version": "7.4.1",
|
||||
"resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
|
||||
@ -629,6 +637,14 @@
|
||||
"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": {
|
||||
"version": "3.2.1",
|
||||
"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": {
|
||||
"version": "2.4.2",
|
||||
"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
|
||||
@ -859,6 +887,14 @@
|
||||
"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": {
|
||||
"version": "1.9.3",
|
||||
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
|
||||
@ -886,6 +922,17 @@
|
||||
"integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
|
||||
"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": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
|
||||
@ -952,6 +999,14 @@
|
||||
"integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
|
||||
"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": {
|
||||
"version": "1.1.3",
|
||||
"resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
|
||||
@ -1388,6 +1443,14 @@
|
||||
"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": {
|
||||
"version": "4.2.0",
|
||||
"resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz",
|
||||
@ -2034,6 +2097,17 @@
|
||||
"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": {
|
||||
"version": "5.5.0",
|
||||
"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": {
|
||||
"version": "4.0.2",
|
||||
"resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "martials-no",
|
||||
"version": "0.1",
|
||||
"description": "",
|
||||
"version": "1.0",
|
||||
"description": "Landing page Martin Berg Alstad's APIs and other things",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build && sh build_extra.sh",
|
||||
@ -17,8 +17,11 @@
|
||||
"vite-plugin-solid": "^2.5.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@types/diff": "^5.0.2",
|
||||
"diff": "^5.1.0",
|
||||
"solid-headless": "^0.13.0",
|
||||
"solid-heroicons": "^3.1.1",
|
||||
"solid-js": "^1.6.6"
|
||||
"solid-js": "^1.6.6",
|
||||
"xlsx": "^0.18.5"
|
||||
}
|
||||
}
|
||||
|
||||
@ -17,10 +17,6 @@
|
||||
@apply border rounded-2xl border-gray-700;
|
||||
}
|
||||
|
||||
input[type="submit"] {
|
||||
@apply border-rounded bg-cyan-900 px-2 cursor-pointer;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@apply text-4xl;
|
||||
}
|
||||
|
||||
@ -1,20 +1,19 @@
|
||||
/* @refresh reload */
|
||||
import Layout from "./components/layout";
|
||||
import { Input } from "./components/input";
|
||||
// import { Check, Download, Eye, EyeOff, Filter, Search, X } from "react-feather";
|
||||
import { Icon } from "solid-heroicons";
|
||||
import TruthTable from "./components/truth-table";
|
||||
import { InfoBox, MyDisclosure, MyDisclosureContainer } from "./components/output";
|
||||
// import { diffChars } from "diff";
|
||||
import { diffChars } from "diff";
|
||||
// import MyMenu from "./components/menu";
|
||||
// import { type BookType, utils, write, writeFile } from "xlsx"
|
||||
// import MyDialog from "./components/myDialog";
|
||||
import { type BookType, utils, write, writeFile } from "xlsx"
|
||||
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 Row from "./components/row";
|
||||
import { magnifyingGlass, xMark } from "solid-heroicons/solid";
|
||||
import { MySwitch } from "./components/button";
|
||||
import { arrowDownTray, magnifyingGlass, xMark } from "solid-heroicons/solid";
|
||||
import { Button, MySwitch } from "./components/button";
|
||||
import MyDialog from "./components/dialog";
|
||||
|
||||
// TODO move some code to new components
|
||||
const TruthTablePage: Component = () => {
|
||||
@ -71,7 +70,7 @@ const TruthTablePage: Component = () => {
|
||||
|
||||
// TODO add loading animation
|
||||
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 => result = res)
|
||||
.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;
|
||||
}
|
||||
|
||||
function onTyping() {
|
||||
const el = getInput();
|
||||
const el = getInputElement();
|
||||
if (el && (el.value !== "") !== typing()) {
|
||||
setTyping(el.value !== "");
|
||||
}
|
||||
}
|
||||
|
||||
function clearSearch() {
|
||||
const el = getInput();
|
||||
const el = getInputElement();
|
||||
if (el) {
|
||||
el.value = "";
|
||||
setFetchResult(null);
|
||||
@ -106,9 +105,9 @@ const TruthTablePage: Component = () => {
|
||||
const tableId = "truth-table";
|
||||
const filenameId = "excel-filename";
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
onMount(() => {
|
||||
// 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
|
||||
* limitations under the License.
|
||||
*/
|
||||
// function exportToExcel(
|
||||
// {
|
||||
// type = "xlsx",
|
||||
// name = "Truth Table",
|
||||
// dl = false
|
||||
// }: { type?: BookType, name?: string, dl?: boolean }): any {
|
||||
//
|
||||
// const element = document.getElementById(tableId);
|
||||
// const wb = utils.table_to_book(element, { sheet: "sheet1" });
|
||||
// return dl ?
|
||||
// write(wb, { bookType: type, bookSST: true, type: 'base64' }) :
|
||||
// writeFile(wb, name + "." + type);
|
||||
// }
|
||||
//
|
||||
// function _exportToExcel(): void {
|
||||
// const value = (document.getElementById(filenameId) as HTMLInputElement | null)?.value;
|
||||
// exportToExcel({
|
||||
// name: value !== "" ? value : undefined,
|
||||
// });
|
||||
// }
|
||||
function exportToExcel(
|
||||
{
|
||||
type = "xlsx",
|
||||
name = "Truth Table",
|
||||
dl = false
|
||||
}: { type?: BookType, name?: string, dl?: boolean }): any {
|
||||
|
||||
const element = document.getElementById(tableId);
|
||||
const wb = utils.table_to_book(element, { sheet: "sheet1" });
|
||||
return dl ?
|
||||
write(wb, { bookType: type, bookSST: true, type: 'base64' }) :
|
||||
writeFile(wb, name + "." + type);
|
||||
}
|
||||
|
||||
function _exportToExcel(): void {
|
||||
const value = (document.getElementById(filenameId) as HTMLInputElement | null)?.value;
|
||||
exportToExcel({
|
||||
name: value !== "" ? value : undefined,
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<Layout title={ "Truth tables" }
|
||||
@ -187,7 +186,7 @@ const TruthTablePage: Component = () => {
|
||||
onChange={ onTyping }
|
||||
leading={ <Icon path={ magnifyingGlass } class={ "pl-1 absolute h-6" } /> }
|
||||
trailing={ <Show when={ typing() } keyed>
|
||||
<button class={ "absolute left-44 sm:left-[22rem]" /*TODO*/ }
|
||||
<button class={ "absolute left-44 sm:left-[22rem]" }
|
||||
title={ "Clear" }
|
||||
type={ "reset" }
|
||||
onClick={ clearSearch }>
|
||||
@ -195,11 +194,11 @@ const TruthTablePage: Component = () => {
|
||||
</button>
|
||||
</Show> }
|
||||
/>
|
||||
<input id={ "truth-input-button" }
|
||||
title={ "Generate (Enter)" }
|
||||
type={ "submit" }
|
||||
class={ "button min-w-50px h-10 ml-2" }
|
||||
value={ "Generate" } />
|
||||
<Button id={ "truth-input-button" }
|
||||
title={ "Generate (Enter)" }
|
||||
type={ "submit" }
|
||||
className={ "min-w-50px h-10 ml-2" }
|
||||
children={ "Generate" } />
|
||||
</form>
|
||||
|
||||
<Row className={ "my-1 gap-2" }>
|
||||
@ -245,27 +244,30 @@ const TruthTablePage: Component = () => {
|
||||
{/*/>*/ }
|
||||
</div>
|
||||
|
||||
{/*{*/ }
|
||||
{/* fetchResult()?.expression &&*/ }
|
||||
{/* <MyDialog title={ t("download") }*/ }
|
||||
{/* description={ t("exportCurrentTable") + " (.xlsx)" }*/ }
|
||||
{/* button={ <><p class={ "sr-only" }>{ t("download") }</p><Download /></> }*/ }
|
||||
{/* callback={ _exportToExcel }*/ }
|
||||
{/* acceptButtonName={ t("download") }*/ }
|
||||
{/* cancelButtonName={ t("cancel") }*/ }
|
||||
{/* buttonClasses={ `float-right` }*/ }
|
||||
{/* buttonTitle={ t("exportCurrentTable") }*/ }
|
||||
{/* acceptButtonId={ "download-accept" }>*/ }
|
||||
{/* <p>{ t("filename") }:</p>*/ }
|
||||
{/* <Input className={ "border-rounded h-10" } id={ filenameId }*/ }
|
||||
{/* placeholder={ "Truth Table" } />*/ }
|
||||
{/* </MyDialog>*/ }
|
||||
{/*}*/ }
|
||||
{
|
||||
fetchResult()?.expression &&
|
||||
<MyDialog title={ "Download" }
|
||||
description={ "Export current table (.xlsx)" }
|
||||
button={ <>
|
||||
<p class={ "sr-only" }>{ "Download" }</p>
|
||||
<Icon class={ "w-6 h-6" } path={ arrowDownTray } />
|
||||
</> }
|
||||
callback={ _exportToExcel }
|
||||
acceptButtonName={ "Download" }
|
||||
cancelButtonName={ "Cancel" }
|
||||
buttonClasses={ `float-right` }
|
||||
buttonTitle={ "Export current table" }
|
||||
acceptButtonId={ "download-accept" }>
|
||||
<p>{ "Filename" }:</p>
|
||||
<Input className={ "border-rounded h-10 px-2" } id={ filenameId }
|
||||
placeholder={ "Truth Table" } />
|
||||
</MyDialog>
|
||||
}
|
||||
|
||||
</Row>
|
||||
{
|
||||
fetchResult() && fetchResult()?.status.code !== 200 &&
|
||||
<InfoBox className={ "w-fit text-center" }
|
||||
<InfoBox className={ "w-fit text-center mx-auto" }
|
||||
title={ "Input error" }
|
||||
error={ true }>
|
||||
<p>{ fetchResult()?.status.message }</p>
|
||||
@ -281,8 +283,8 @@ const TruthTablePage: Component = () => {
|
||||
(operation, index) => (
|
||||
<tr class={ "border-b border-dotted border-gray-500" }>
|
||||
<td>{ index() + 1 }:</td>
|
||||
<td class={ "px-2" }>
|
||||
{/* // TODO add method or create own
|
||||
<td class={ "px-2" }>{
|
||||
|
||||
<For each={ diffChars(operation.before, operation.after) }>
|
||||
{ (part) => (
|
||||
<span class={
|
||||
@ -290,8 +292,8 @@ const TruthTablePage: Component = () => {
|
||||
${ part.removed && "bg-red-700" }` }>
|
||||
{ part.value }
|
||||
</span>) }
|
||||
</For>
|
||||
*/ }
|
||||
</For> }
|
||||
|
||||
{ typeof window !== "undefined" && window.outerWidth <= 640 &&
|
||||
<p>{ "using" }: { operation.law }</p> }
|
||||
</td>
|
||||
@ -321,7 +323,7 @@ const TruthTablePage: Component = () => {
|
||||
|
||||
<div class={ "flex justify-center m-2" }>
|
||||
<div id={ "table" } class={ "h-[45rem] overflow-auto" }>
|
||||
|
||||
{ /*TODO make sure table uses whole width and x-scrollable*/ }
|
||||
<TruthTable header={ fetchResult()?.header ?? undefined }
|
||||
table={ fetchResult()?.table?.truthMatrix } id={ tableId } />
|
||||
|
||||
|
||||
@ -21,6 +21,11 @@ export interface TitleProps extends ChildProps {
|
||||
title?: string,
|
||||
}
|
||||
|
||||
export interface ButtonProps extends TitleProps {
|
||||
onClick?: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent>,
|
||||
type?: "button" | "submit" | "reset",
|
||||
}
|
||||
|
||||
export interface InputProps<T> extends TitleProps {
|
||||
onInput?: JSX.EventHandlerUnion<T, Event>,
|
||||
placeholder?: string | null,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user