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

Added loading Icon while fetching, fetch error on screen, refactored tertiary ifs to show, errorBox component, accessibility

Browse Source
This commit is contained in:
Martin Berg Alstad 2023-01-14 15:05:42 +01:00
parent 15c79d6365
commit 18a644bd8f
1 changed files with 94 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

208
src/truth-table.tsx
View File

@ -6,16 +6,24 @@ 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 { FetchResult } from "./types/interfaces"; import type { FetchResult } from "./types/interfaces";
import { Accessor, type Component, createEffect, createSignal, JSX, onMount, Show } from "solid-js"; import { type Accessor, 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 { arrowDownTray, check, eye, eyeSlash, funnel, magnifyingGlass, xMark } from "solid-heroicons/solid"; import {
arrowDownTray, arrowPath,
check,
eye,
eyeSlash,
funnel,
magnifyingGlass,
xMark
} from "solid-heroicons/solid";
import { Button, MySwitch } from "./components/button"; import { Button, MySwitch } from "./components/button";
import MyDialog from "./components/dialog"; import MyDialog from "./components/dialog";
import { exportToExcel } from "./functions/export";
type Option = { name: string, value: string }; type Option = { name: string, value: "NONE" | "TRUE" | "FALSE" | "DEFAULT" | "TRUE_FIRST" | "FALSE_FIRST" };
// TODO move some code to new components // TODO move some code to new components
const TruthTablePage: Component = () => { const TruthTablePage: Component = () => {
@ -30,7 +38,6 @@ const TruthTablePage: Component = () => {
* The state element used to store the simplified string, "empty string" by default * The state element used to store the simplified string, "empty string" by default
*/ */
const [fetchResult, setFetchResult] = createSignal<FetchResult | null>(null); const [fetchResult, setFetchResult] = createSignal<FetchResult | null>(null);
/** /**
* If the searchbar is empty, this state is 'false', otherwise 'true' * If the searchbar is empty, this state is 'false', otherwise 'true'
*/ */
@ -42,22 +49,20 @@ const TruthTablePage: Component = () => {
{ name: "Hide false results", value: "FALSE" }, { name: "Hide false results", value: "FALSE" },
]; ];
const [hideValues, setHideValues] = createSignal(hideOptions[0]);
const sortOptions: Option[] = [ const sortOptions: Option[] = [
{ name: "Sort by default", value: "DEFAULT" }, { name: "Sort by default", value: "DEFAULT" },
{ name: "Sort by true first", value: "TRUE_FIRST" }, { name: "Sort by true first", value: "TRUE_FIRST" },
{ name: "Sort by false first", value: "FALSE_FIRST" }, { name: "Sort by false first", value: "FALSE_FIRST" },
]; ];
/**
* The currently selected hide value, either 'none', 'true' or 'false'
*/
const [hideValues, setHideValues] = createSignal(hideOptions[0]);
/**
* The currently selected sort value, either 'default', 'trueFirst' or 'falseFirst'
*/
const [sortValues, setSortValues] = createSignal(sortOptions[0]); const [sortValues, setSortValues] = createSignal(sortOptions[0]);
const [isLoaded, setIsLoaded] = createSignal<boolean | null>(null);
const [error, setError] = createSignal<string | null>(null);
/** /**
* Updates the state of the current expression to the new search with all whitespace removed. * Updates the state of the current expression to the new search with all whitespace removed.
* If the element is not found, reset. * If the element is not found, reset.
@ -70,16 +75,14 @@ const TruthTablePage: Component = () => {
if (exp && exp !== "") { if (exp && exp !== "") {
// TODO add loading animation setError(null);
let result: FetchResult | undefined; setIsLoaded(false);
await fetch(`https://api.martials.no/simplify-truths/simplify/table?exp=${ exp }&simplify=${ simplifyEnabled() }`) fetch(`https://api.martials.no/simplify-truths/simplify/table?exp=${ exp }&simplify=${ simplifyEnabled() }
&hide=${ hideValues().value }&sort=${ sortValues().value }`)
.then(res => res.json()) .then(res => res.json())
.then(res => result = res) .then(res => setFetchResult(res))
.catch(err => console.error(err)) // TODO show error on screen .catch(err => setError(err.toString()))
.finally(); .finally(() => setIsLoaded(true));
// console.log(result);
setFetchResult(result);
} }
} }
@ -98,7 +101,6 @@ const TruthTablePage: Component = () => {
const el = getInputElement(); const el = getInputElement();
if (el) { if (el) {
el.value = ""; el.value = "";
setFetchResult(null);
setTyping(false); setTyping(false);
el.focus(); el.focus();
} }
@ -112,58 +114,16 @@ const TruthTablePage: Component = () => {
getInputElement()?.focus(); getInputElement()?.focus();
}); });
/**
* Exports the generated truth table to an excel (.xlsx) file
*
* @param type The downloaded files extension. Default is "xlsx"
* @param name The name of the file, excluding the extension. Default is "Truth Table"
* @param dl
* @returns {any}
* @author SheetJS
* @link https://cdn.sheetjs.com/
* @license Apache 2.0 License
* SheetJS Community Edition -- https://sheetjs.com/
*
* Copyright (C) 2012-present SheetJS LLC
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* 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 { 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, tableId
}); });
} }
return ( return (
<Layout title={ "Truth tables" } <Layout title={ "Truth tables" }>
/*containerClass={ "!max-w-full overflow-x-hidden" }
titleAndNavClass={ "max-w-2xl mx-auto" }
footerClass={ "max-w-2xl left-1/2 -translate-x-1/2" }*/>
<div id={ "truth-content" }> <div id={ "truth-content" }>
<div class={ "max-w-2xl mx-auto" }> <div class={ "max-w-2xl mx-auto" }>
<MyDisclosureContainer> <MyDisclosureContainer>
@ -181,26 +141,30 @@ const TruthTablePage: Component = () => {
</MyDisclosureContainer> </MyDisclosureContainer>
<form class={ "flex-row-center" } onSubmit={ onClick } autocomplete={ "off" }> <form class={ "flex-row-center" } onSubmit={ onClick } autocomplete={ "off" }>
<Input className={ `rounded-xl pl-7 h-10 w-52 sm:w-96 pr-8` } <Input className={ `rounded-xl pl-7 h-10 w-52 sm:w-96 pr-8` }
id={ "truth-input" } id={ "truth-input" }
placeholder={ "¬A & B -> C" } placeholder={ "¬A & B -> C" }
type={ "text" } type={ "text" }
onChange={ onTyping } onChange={ onTyping }
leading={ <Icon path={ magnifyingGlass } class={ "pl-1 absolute h-6" } /> } leading={ <Icon path={ magnifyingGlass } aria-label={ "Magnifying glass" }
class={ "pl-2 absolute" } /> }
trailing={ <Show when={ typing() } keyed> trailing={ <Show when={ typing() } keyed>
<button class={ "absolute left-44 sm:left-[22rem]" } <button class={ "absolute left-44 sm:left-[22rem]" }
title={ "Clear" } title={ "Clear" }
type={ "reset" } type={ "reset" }
onClick={ clearSearch }> onClick={ clearSearch }>
<Icon path={ xMark } class={ "h-6" } /> <Icon path={ xMark } aria-label={ "The letter X" } />
</button> </button>
</Show> } </Show> }
/> />
<Button id={ "truth-input-button" } <Button id={ "truth-input-button" }
title={ "Generate (Enter)" } title={ "Generate (Enter)" }
type={ "submit" } type={ "submit" }
className={ "min-w-50px h-10 ml-2" } className={ "min-w-50px h-10 ml-2" }
children={ "Generate" } /> children={ "Generate" } />
</form> </form>
<Row className={ "my-1 gap-2" }> <Row className={ "my-1 gap-2" }>
@ -213,11 +177,11 @@ const TruthTablePage: Component = () => {
<MyMenu title={ "Filter results" } id={ "filter-results" } <MyMenu title={ "Filter results" } id={ "filter-results" }
button={ button={
<Show when={ hideValues().value !== "NONE" } children={ <Show when={ hideValues().value !== "NONE" } children={
<Icon path={ eyeSlash } <Icon path={ eyeSlash } aria-label={ "An eye with a slash through it" }
class={ `mx-1 h-6 w-6 ${ hideValues().value === "TRUE" ? class={ `mx-1 ${ hideValues().value === "TRUE" ?
"text-green-500" : "text-red-500" }` } /> "text-green-500" : "text-red-500" }` } />
} fallback={ } fallback={
<Icon path={ eye } class={ "mx-1 h-6 w-6" } /> <Icon path={ eye } aria-label={ "An eye" } class={ "mx-1" } />
} keyed /> } keyed />
} }
children={ children={
@ -234,7 +198,7 @@ const TruthTablePage: Component = () => {
<div class={ "h-min relative" }> <div class={ "h-min relative" }>
<MyMenu title={ "Sort results" } id={ "sort-results" } <MyMenu title={ "Sort results" } id={ "sort-results" }
button={ <Icon path={ funnel } button={ <Icon path={ funnel } aria-label={ "Filter" }
class={ `h-6 w-6 ${ sortValues().value === "TRUE_FIRST" ? "text-green-500" : class={ `h-6 w-6 ${ sortValues().value === "TRUE_FIRST" ? "text-green-500" :
sortValues().value === "FALSE_FIRST" && "text-red-500" }` } /> } sortValues().value === "FALSE_FIRST" && "text-red-500" }` } /> }
children={ children={
@ -249,13 +213,13 @@ const TruthTablePage: Component = () => {
/> />
</div> </div>
<Show when={ fetchResult()?.expression } keyed> <Show when={ isLoaded() } keyed>
<MyDialog title={ "Download" } <MyDialog title={ "Download" }
description={ "Export current table (.xlsx)" } description={ "Export current table (.xlsx)" }
button={ <> button={ <>
<p class={ "sr-only" }>{ "Download" }</p> <p class={ "sr-only" }>{ "Download" }</p>
<Icon class={ "w-6 h-6" } path={ arrowDownTray } /> <Icon aria-label={ "Download" } path={ arrowDownTray } />
</> } </> }
callback={ _exportToExcel } callback={ _exportToExcel }
acceptButtonName={ "Download" } acceptButtonName={ "Download" }
@ -271,20 +235,26 @@ const TruthTablePage: Component = () => {
</Show> </Show>
</Row> </Row>
{
fetchResult() && fetchResult()?.status.code !== 200 && <Show when={ isLoaded() === false } keyed>
<InfoBox className={ "w-fit text-center mx-auto" } <Icon path={ arrowPath } aria-label={ "Loading indicator" } class={ "animate-spin mx-auto" } />
title={ "Input error" } </Show>
error={ true }>
<p>{ fetchResult()?.status.message }</p> <Show when={ error() } keyed>
</InfoBox> <ErrorBox title={ "Fetch error" } error={ error() } />
} </Show>
{
fetchResult()?.orderOperations && simplifyEnabled() && fetchResult()?.orderOperations.length > 0 && <Show when={ error() === null && isLoaded() && fetchResult()?.status.code !== 200 } keyed>
<ErrorBox title={ "Input error" } error={ fetchResult()?.status.message } />
</Show>
<Show when={ simplifyEnabled() && fetchResult()?.orderOperations?.length > 0 } keyed>
<MyDisclosureContainer> <MyDisclosureContainer>
<MyDisclosure title={ "Show me how it's done" }> <MyDisclosure title={ "Show me how it's done" }>
<table class={ "table" }> <table class={ "table" }>
<tbody> <tbody>
<For each={ fetchResult()?.orderOperations }>{ <For each={ fetchResult()?.orderOperations }>{
(operation, index) => ( (operation, index) => (
<tr class={ "border-b border-dotted border-gray-500" }> <tr class={ "border-b border-dotted border-gray-500" }>
@ -308,36 +278,36 @@ const TruthTablePage: Component = () => {
</tr> </tr>
) } ) }
</For> </For>
</tbody> </tbody>
</table> </table>
</MyDisclosure> </MyDisclosure>
</MyDisclosureContainer> </MyDisclosureContainer>
}
</Show>
</div> </div>
{
fetchResult()?.expression &&
<>
<div class={ "flex flex-row" }>
{
simplifyEnabled &&
<InfoBox className={ "w-fit mx-auto pb-1 text-lg text-center" }
title={ "Output" + ":" } id={ "expression-output" }>
<p>{ fetchResult()?.after }</p>
</InfoBox>
}
</div>
<div class={ "flex justify-center m-2" }> <Show when={ isLoaded() && fetchResult()?.status?.code === 200 } keyed>
<div id={ "table" } class={ "h-[45rem] overflow-auto" }> <Show when={ simplifyEnabled() } keyed>
{ /*TODO make sure table uses whole width and x-scrollable*/ } <InfoBox className={ "w-fit mx-auto pb-1 text-lg text-center" }
<TruthTable header={ fetchResult()?.header ?? undefined } title={ "Output" + ":" } id={ "expression-output" }>
table={ fetchResult()?.table?.truthMatrix } id={ tableId } /> <p>{ fetchResult()?.after }</p>
</InfoBox>
</Show>
<div class={ "flex justify-center m-2" }>
<div id={ "table" } class={ "h-[45rem] overflow-auto" }>
<TruthTable header={ fetchResult()?.header }
table={ fetchResult()?.table?.truthMatrix } id={ tableId } />
</div>
</div> </div>
</> </div>
} </Show>
</div> </div>
</Layout> </Layout>
); );
} }
@ -347,19 +317,29 @@ export default TruthTablePage;
interface SingleMenuItem { interface SingleMenuItem {
option: Option, option: Option,
currentValue?: Accessor<Option>, currentValue?: Accessor<Option>,
onClick: JSX.EventHandlerUnion<HTMLDivElement, MouseEvent>, onClick: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent>,
} }
// TODO not rerendering when currentValue changes
const SingleMenuItem: Component<SingleMenuItem> = ({ option, currentValue, onClick }) => { const SingleMenuItem: Component<SingleMenuItem> = ({ option, currentValue, onClick }) => {
const isSelected = () => currentValue()?.value === option.value;
return ( return (
<div class={ `hover:underline cursor-pointer last:mb-1 flex-row-center` } <button class={ `hover:underline cursor-pointer last:mb-1 flex-row-center` }
onClick={ onClick }> onClick={ onClick }>
<Icon path={ check } <Icon path={ check } aria-label={ isSelected() ? "A checkmark" : "Nothing" }
class={ `h-6 w-6 text-white ${ currentValue().value !== option.value && "text-transparent" }` } /> class={ `text-white ${ !isSelected() && "text-transparent" }` } />
{ option.name } { option.name }
</div> </button>
); );
} }
const ErrorBox: Component<{ title: string, error: string }> = ({ title, error }) => {
return (
<InfoBox className={ "w-fit text-center mx-auto" }
title={ title }
error={ true }>
<p>{ error }</p>
</InfoBox>
)
}
render(() => <TruthTablePage />, document.getElementById("root") as HTMLElement); render(() => <TruthTablePage />, document.getElementById("root") as HTMLElement);