From 18a644bd8f85f8109e35ada69b9e4e933776c896 Mon Sep 17 00:00:00 2001 From: Martin Berg Alstad <600878@stud.hvl.no> Date: Sat, 14 Jan 2023 15:05:42 +0100 Subject: [PATCH] Added loading Icon while fetching, fetch error on screen, refactored tertiary ifs to show, errorBox component, accessibility --- src/truth-table.tsx | 208 ++++++++++++++++++++------------------------ 1 file changed, 94 insertions(+), 114 deletions(-) diff --git a/src/truth-table.tsx b/src/truth-table.tsx index ccfb7bc..998e2e6 100644 --- a/src/truth-table.tsx +++ b/src/truth-table.tsx @@ -6,16 +6,24 @@ import TruthTable from "./components/truth-table"; import { InfoBox, MyDisclosure, MyDisclosureContainer } from "./components/output"; import { diffChars } from "diff"; import MyMenu from "./components/menu"; -import { type BookType, utils, write, writeFile } from "xlsx" 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 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 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 const TruthTablePage: Component = () => { @@ -30,7 +38,6 @@ const TruthTablePage: Component = () => { * The state element used to store the simplified string, "empty string" by default */ const [fetchResult, setFetchResult] = createSignal(null); - /** * If the searchbar is empty, this state is 'false', otherwise 'true' */ @@ -42,22 +49,20 @@ const TruthTablePage: Component = () => { { name: "Hide false results", value: "FALSE" }, ]; + const [hideValues, setHideValues] = createSignal(hideOptions[0]); + const sortOptions: Option[] = [ { name: "Sort by default", value: "DEFAULT" }, { name: "Sort by true first", value: "TRUE_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 [isLoaded, setIsLoaded] = createSignal(null); + + const [error, setError] = createSignal(null); + /** * Updates the state of the current expression to the new search with all whitespace removed. * If the element is not found, reset. @@ -70,16 +75,14 @@ const TruthTablePage: Component = () => { if (exp && exp !== "") { - // TODO add loading animation - let result: FetchResult | undefined; - await fetch(`https://api.martials.no/simplify-truths/simplify/table?exp=${ exp }&simplify=${ simplifyEnabled() }`) + setError(null); + setIsLoaded(false); + 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 => result = res) - .catch(err => console.error(err)) // TODO show error on screen - .finally(); - - // console.log(result); - setFetchResult(result); + .then(res => setFetchResult(res)) + .catch(err => setError(err.toString())) + .finally(() => setIsLoaded(true)); } } @@ -98,7 +101,6 @@ const TruthTablePage: Component = () => { const el = getInputElement(); if (el) { el.value = ""; - setFetchResult(null); setTyping(false); el.focus(); } @@ -112,58 +114,16 @@ const TruthTablePage: Component = () => { 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 { const value = (document.getElementById(filenameId) as HTMLInputElement | null)?.value; exportToExcel({ - name: value !== "" ? value : undefined, + name: value !== "" ? value : undefined, tableId }); } return ( - + +
@@ -181,26 +141,30 @@ const TruthTablePage: Component = () => {
+ C" } type={ "text" } onChange={ onTyping } - leading={ } + leading={ } trailing={ } /> +
- { - fetchResult()?.expression && - <> -
- { - simplifyEnabled && - -

{ fetchResult()?.after }

- - } -
-
-
- { /*TODO make sure table uses whole width and x-scrollable*/ } - + + + +

{ fetchResult()?.after }

+ + + +
+
+ + -
- - } +
+ +
+ ); } @@ -347,19 +317,29 @@ export default TruthTablePage; interface SingleMenuItem { option: Option, currentValue?: Accessor