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

The actual input will be stored in the url instead of the api call, moved some code to it's own component

Browse Source
This commit is contained in:
Martin Berg Alstad 2023-04-09 11:42:13 +02:00
parent 7f6c405890
commit fbc6611137
2 changed files with 33 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
src/truth-table.tsx
View File

@ -6,7 +6,7 @@ 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 { FetchResult } from "./types/types"; import type { FetchResult, OrderOfOperation } from "./types/types";
import { type Accessor, type Component, 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";
@ -94,11 +94,12 @@ const TruthTablePage: Component = () => {
let exp = getInputElement()?.value; let exp = getInputElement()?.value;
if (exp) { if (exp) {
exp = replaceOperators(exp);
history.pushState(null, "", `?exp=${ encodeURIComponent(exp) }&simplify=${ simplifyEnabled() }& history.pushState(null, "", `?exp=${ encodeURIComponent(exp) }&simplify=${ simplifyEnabled() }&
hide=${ hideValues().value }&sort=${ sortValues().value }&hideIntermediate=${ hideIntermediates() }`); hide=${ hideValues().value }&sort=${ sortValues().value }&hideIntermediate=${ hideIntermediates() }`);
exp = replaceOperators(exp);
getFetchResult(exp); getFetchResult(exp);
} }
} }
@ -351,31 +352,8 @@ const ShowMeHow: Component<ShowMeHowProps> = ({ fetchResult }) => (
<table class={ "table" }> <table class={ "table" }>
<tbody> <tbody>
<For each={ fetchResult()?.orderOperations }>{ <For each={ fetchResult()?.orderOperations }>
(operation, index) => ( { orderOperationRow() }
<tr class={ "border-b border-dotted border-gray-500" }>
<td>{ index() + 1 }:</td>
<td class={ "px-2" }>{
<For each={ diffChars(operation.before, operation.after) }>
{ (part) => (
<span class={
`${ part.added && "bg-green-700" }
${ part.removed && "bg-red-700" }` }>
{ part.value }
</span>) }
</For> }
<Show when={ typeof window !== "undefined" && window.outerWidth <= 640 } keyed>
<p>{ "using" }: { operation.law }</p>
</Show>
</td>
<Show when={ typeof window !== "undefined" && window.outerWidth > 640 } keyed>
<td>{ "using" }: { operation.law }</td>
</Show>
</tr>
) }
</For> </For>
</tbody> </tbody>
@ -386,6 +364,7 @@ const ShowMeHow: Component<ShowMeHowProps> = ({ fetchResult }) => (
const HowTo: Component = () => ( const HowTo: Component = () => (
<MyDisclosureContainer> <MyDisclosureContainer>
<MyDisclosure title={ "How to" }> <MyDisclosure title={ "How to" }>
<p>Fill in a truth expression and it will be simplified for you as much as possible. <p>Fill in a truth expression and it will be simplified for you as much as possible.
It will also genereate a truth table with all possible values. You can use a single It will also genereate a truth table with all possible values. You can use a single
@ -402,6 +381,30 @@ const HowTo: Component = () => (
</MyDisclosureContainer> </MyDisclosureContainer>
); );
const orderOperationRow = () => (operation: OrderOfOperation, index: Accessor<number>) => (
<tr class={ "border-b border-dotted border-gray-500" }>
<td>{ index() + 1 }:</td>
<td class={ "px-2" }>{
<For each={ diffChars(operation.before, operation.after) }>
{ (part) => (
<span class={ `${ part.added && "bg-green-700" } ${ part.removed && "bg-red-700" }` }>
{ part.value }
</span>
) }
</For> }
<Show when={ typeof window !== "undefined" && window.outerWidth <= 640 } keyed>
<p>{ "using" }: { operation.law }</p>
</Show>
</td>
<Show when={ typeof window !== "undefined" && window.outerWidth > 640 } keyed>
<td>{ "using" }: { operation.law }</td>
</Show>
</tr>
);
const KeywordsDisclosure: Component = () => ( const KeywordsDisclosure: Component = () => (
<MyDisclosure title={ "Keywords" }> <MyDisclosure title={ "Keywords" }>
<table> <table>

6
src/types/types.d.ts vendored
View File

@ -51,18 +51,18 @@ type Operator = "AND" | "OR" | "NOT" | "IMPLICATION";
type Table = boolean[][]; type Table = boolean[][];
type OrderOfOperations = { type OrderOfOperation = {
before: string, before: string,
after: string, after: string,
law: string, law: string,
}[]; };
type FetchResult = { type FetchResult = {
status: string, status: string,
version: string | null, version: string | null,
before: string, before: string,
after: string, after: string,
orderOperations: OrderOfOperations | null, orderOperations: OrderOfOperation[] | null,
expression: Expression | null, expression: Expression | null,
header: string[] | null, header: string[] | null,
table: { table: {