fixed table not updating, added switch and output box, fixed some css
This commit is contained in:
Martin Berg Alstad
parent
1ae98c3942
commit
f026f2a5e7
@ -5,9 +5,7 @@ import { Input } from "./components/input";
|
|||||||
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 MySwitch from "./components/switch";
|
|
||||||
// import { diffChars } from "diff";
|
// import { diffChars } from "diff";
|
||||||
// import { Menu } from "@headlessui/react";
|
|
||||||
// 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 MyDialog from "./components/myDialog";
|
||||||
@ -16,6 +14,7 @@ import { type Component, createSignal, JSX, 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 { magnifyingGlass, xMark } from "solid-heroicons/solid";
|
||||||
|
import { MySwitch } from "./components/button";
|
||||||
|
|
||||||
// TODO move some code to new components
|
// TODO move some code to new components
|
||||||
const TruthTablePage: Component = () => {
|
const TruthTablePage: Component = () => {
|
||||||
@ -66,34 +65,36 @@ const TruthTablePage: Component = () => {
|
|||||||
e.preventDefault(); // Stops the page from reloading onClick
|
e.preventDefault(); // Stops the page from reloading onClick
|
||||||
const exp = (document.getElementById(inputId) as HTMLInputElement | null)?.value;
|
const exp = (document.getElementById(inputId) as HTMLInputElement | null)?.value;
|
||||||
|
|
||||||
|
setFetchResult(null);
|
||||||
|
|
||||||
if (exp && exp !== "") {
|
if (exp && exp !== "") {
|
||||||
|
|
||||||
// TODO add loading animation
|
// TODO add loading animation
|
||||||
let result: FetchResult | undefined;
|
let result: FetchResult | undefined;
|
||||||
await fetch(`https://api.martials.no/simplify-truths/simplify/table?exp=${ exp }&simplify=${ simplifyEnabled() }`)
|
await fetch(`http://localhost:8080/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
|
||||||
.finally();
|
.finally();
|
||||||
|
|
||||||
console.log(result);
|
// console.log(result);
|
||||||
setFetchResult(result);
|
setFetchResult(result);
|
||||||
}
|
}
|
||||||
else {
|
}
|
||||||
setFetchResult(null);
|
|
||||||
}
|
function getInput() {
|
||||||
|
return document.getElementById(inputId) as HTMLInputElement | null;
|
||||||
}
|
}
|
||||||
|
|
||||||
function onTyping() {
|
function onTyping() {
|
||||||
console.log("typing");
|
const el = getInput();
|
||||||
const el = (document.getElementById(inputId) as HTMLInputElement | null);
|
|
||||||
if (el && (el.value !== "") !== typing()) {
|
if (el && (el.value !== "") !== typing()) {
|
||||||
setTyping(el.value !== "");
|
setTyping(el.value !== "");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function clearSearch() {
|
function clearSearch() {
|
||||||
const el = (document.getElementById(inputId) as HTMLInputElement | null);
|
const el = getInput();
|
||||||
if (el) {
|
if (el) {
|
||||||
el.value = "";
|
el.value = "";
|
||||||
setFetchResult(null);
|
setFetchResult(null);
|
||||||
@ -203,8 +204,9 @@ const TruthTablePage: Component = () => {
|
|||||||
|
|
||||||
<Row className={ "my-1 gap-2" }>
|
<Row className={ "my-1 gap-2" }>
|
||||||
<span class={ "h-min" }>{ "Simplify" }: </span>
|
<span class={ "h-min" }>{ "Simplify" }: </span>
|
||||||
{/*<MySwitch onChange={ setSimplifyEnabled } checked={ simplifyEnabled } title={ t("simplify") }*/ }
|
<MySwitch onChange={ setSimplifyEnabled } defaultValue={ simplifyEnabled() }
|
||||||
{/* name={ t("toggleSimplify") } className={ "mx-1" } />*/ }
|
title={ "Simplify" }
|
||||||
|
name={ "Turn on/off simplify expressions" } className={ "mx-1" } />
|
||||||
|
|
||||||
<div class={ "h-min relative" }>
|
<div class={ "h-min relative" }>
|
||||||
{/*<MyMenu title={ "Filter results" }*/ }
|
{/*<MyMenu title={ "Filter results" }*/ }
|
||||||
@ -261,59 +263,61 @@ const TruthTablePage: Component = () => {
|
|||||||
{/*}*/ }
|
{/*}*/ }
|
||||||
|
|
||||||
</Row>
|
</Row>
|
||||||
{/*{*/ }
|
{
|
||||||
{/* fetchResult && fetchResult()?.status.code !== 200 &&*/ }
|
fetchResult() && fetchResult()?.status.code !== 200 &&
|
||||||
{/* <InfoBox className={ "w-fit text-center" }*/ }
|
<InfoBox className={ "w-fit text-center" }
|
||||||
{/* title={ t("inputError") }*/ }
|
title={ "Input error" }
|
||||||
{/* error={ true }>*/ }
|
error={ true }>
|
||||||
{/* <p>{ fetchResult()?.status.message }</p>*/ }
|
<p>{ fetchResult()?.status.message }</p>
|
||||||
{/* </InfoBox>*/ }
|
</InfoBox>
|
||||||
{/*}*/ }
|
}
|
||||||
{/*{*/ }
|
{
|
||||||
{/* fetchResult()?.orderOperations && simplifyEnabled() && fetchResult()?.orderOperations.length > 0 &&*/ }
|
fetchResult()?.orderOperations && simplifyEnabled() && fetchResult()?.orderOperations.length > 0 &&
|
||||||
{/* <MyDisclosureContainer>*/ }
|
<MyDisclosureContainer>
|
||||||
{/* <MyDisclosure title={ t("showMeHowItsDone") }>*/ }
|
<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" }>
|
||||||
{/* <td>{ index() + 1 }:</td>*/ }
|
<td>{ index() + 1 }:</td>
|
||||||
{/* <td class={ "px-2" }>*/ }
|
<td class={ "px-2" }>
|
||||||
{/* /!*<For each={ diffChars(operation.before, operation.after) }>*!/*/ }
|
{/* // TODO add method or create own
|
||||||
{/* /!* { (part) => (*!/*/ }
|
<For each={ diffChars(operation.before, operation.after) }>
|
||||||
{/* /!* <span class={*!/*/ }
|
{ (part) => (
|
||||||
{/* /!* `${ part.added && "bg-green-500 dark:bg-green-700 default-text-black-white" } *!/*/ }
|
<span class={
|
||||||
{/* /!* ${ part.removed && "bg-red-500 dark:bg-red-700 default-text-black-white" }` }>*!/*/ }
|
`${ part.added && "bg-green-700" }
|
||||||
{/* /!* { part.value }*!/*/ }
|
${ part.removed && "bg-red-700" }` }>
|
||||||
{/* /!* </span>) }*!/*/ }
|
{ part.value }
|
||||||
{/* /!*</For>*!/*/ }
|
</span>) }
|
||||||
{/* { typeof window !== "undefined" && window.outerWidth <= 640 &&*/ }
|
</For>
|
||||||
{/* <p>{ t("using") }: { operation.law }</p> }*/ }
|
*/ }
|
||||||
{/* </td>*/ }
|
{ typeof window !== "undefined" && window.outerWidth <= 640 &&
|
||||||
{/* { typeof window !== "undefined" && window.outerWidth > 640 &&*/ }
|
<p>{ "using" }: { operation.law }</p> }
|
||||||
{/* <td>{ t("using") }: { operation.law }</td> }*/ }
|
</td>
|
||||||
{/* </tr>*/ }
|
{ typeof window !== "undefined" && window.outerWidth > 640 &&
|
||||||
{/* ) }*/ }
|
<td>{ "using" }: { operation.law }</td> }
|
||||||
{/* </For>*/ }
|
</tr>
|
||||||
{/* </tbody>*/ }
|
) }
|
||||||
{/* </table>*/ }
|
</For>
|
||||||
{/* </MyDisclosure>*/ }
|
</tbody>
|
||||||
{/* </MyDisclosureContainer>*/ }
|
</table>
|
||||||
{/*}*/ }
|
</MyDisclosure>
|
||||||
|
</MyDisclosureContainer>
|
||||||
|
}
|
||||||
</div>
|
</div>
|
||||||
{
|
{
|
||||||
fetchResult()?.expression &&
|
fetchResult()?.expression &&
|
||||||
<>
|
<>
|
||||||
{/*<div class={ "flex flex-row" }>*/ }
|
<div class={ "flex flex-row" }>
|
||||||
{/* {*/ }
|
{
|
||||||
{/* simplifyEnabled &&*/ }
|
simplifyEnabled &&
|
||||||
{/* <InfoBox className={ "w-fit mx-auto pb-1 text-lg text-center" }*/ }
|
<InfoBox className={ "w-fit mx-auto pb-1 text-lg text-center" }
|
||||||
{/* title={ t("output") + ":" } id={ "expression-output" }>*/ }
|
title={ "Output" + ":" } id={ "expression-output" }>
|
||||||
{/* <p>{ fetchResult()?.after }</p>*/ }
|
<p>{ fetchResult()?.after }</p>
|
||||||
{/* </InfoBox>*/ }
|
</InfoBox>
|
||||||
{/* }*/ }
|
}
|
||||||
{/*</div>*/ }
|
</div>
|
||||||
|
|
||||||
<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" }>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user