Started moving over truth-table.tsx from h600878.GitHub.io
This commit is contained in:
Martin Berg Alstad
parent
d1ba86a1fe
commit
13be22be57
@ -1 +1,5 @@
|
||||
ErrorDocument 404 /404.html
|
||||
ErrorDocument 404 /404.html
|
||||
|
||||
<IfModule mod_headers.c>
|
||||
Header add Access-Control-Allow-Origin 'https://api.martials.no/'
|
||||
</IfModule>
|
||||
|
||||
52
package-lock.json
generated
52
package-lock.json
generated
@ -1,23 +1,25 @@
|
||||
{
|
||||
"name": "vite-template-solid",
|
||||
"name": "martials-no",
|
||||
"version": "0.1",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "vite-template-solid",
|
||||
"name": "martials-no",
|
||||
"version": "0.1",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"solid-js": "^1.6.2"
|
||||
"solid-headless": "^0.13.0",
|
||||
"solid-heroicons": "^3.1.1",
|
||||
"solid-js": "^1.6.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^10.4.13",
|
||||
"postcss": "^8.4.19",
|
||||
"postcss": "^8.4.20",
|
||||
"tailwindcss": "^3.2.4",
|
||||
"typescript": "^4.9.3",
|
||||
"vite": "^3.2.4",
|
||||
"vite-plugin-solid": "^2.4.0"
|
||||
"typescript": "^4.9.4",
|
||||
"vite": "^3.2.5",
|
||||
"vite-plugin-solid": "^2.5.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@ampproject/remapping": {
|
||||
@ -1965,6 +1967,31 @@
|
||||
"semver": "bin/semver.js"
|
||||
}
|
||||
},
|
||||
"node_modules/solid-headless": {
|
||||
"version": "0.13.0",
|
||||
"resolved": "https://registry.npmjs.org/solid-headless/-/solid-headless-0.13.0.tgz",
|
||||
"integrity": "sha512-N118iPl7W5lyug4K+4c0cwM8YR2yEVJ/3H4wq6tVijATHfXfLnB1ACFI5GGHSXlwu70PUzaGSKwcVqLlloUMyA==",
|
||||
"dependencies": {
|
||||
"solid-use": "^0.5.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"solid-js": "^1.2"
|
||||
}
|
||||
},
|
||||
"node_modules/solid-heroicons": {
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npmjs.org/solid-heroicons/-/solid-heroicons-3.1.1.tgz",
|
||||
"integrity": "sha512-wfU/SqxqxWxInvfFlKJfCBPnJ94Zq1GQFiFL3M0KwZzT81lSF5yIC4HA/Czp3DYrn+dUumjO0qdrx8Ab3cy2sA==",
|
||||
"dependencies": {
|
||||
"solid-js": "^1.6.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"solid-js": ">= ^1.2.5"
|
||||
}
|
||||
},
|
||||
"node_modules/solid-js": {
|
||||
"version": "1.6.6",
|
||||
"resolved": "https://registry.npmjs.org/solid-js/-/solid-js-1.6.6.tgz",
|
||||
@ -1987,6 +2014,17 @@
|
||||
"solid-js": "^1.3"
|
||||
}
|
||||
},
|
||||
"node_modules/solid-use": {
|
||||
"version": "0.5.0",
|
||||
"resolved": "https://registry.npmjs.org/solid-use/-/solid-use-0.5.0.tgz",
|
||||
"integrity": "sha512-z1AaS99SL3gNP70K4+XIVKGXDRI56m3Q6Q4X63bfgw0kaN6cwT4SAyFZAmIRjHcvf5rOMRQfNgUV4YVDha+LcQ==",
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"solid-js": "^1.2"
|
||||
}
|
||||
},
|
||||
"node_modules/source-map-js": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
|
||||
|
||||
@ -17,6 +17,8 @@
|
||||
"vite-plugin-solid": "^2.5.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"solid-headless": "^0.13.0",
|
||||
"solid-heroicons": "^3.1.1",
|
||||
"solid-js": "^1.6.6"
|
||||
}
|
||||
}
|
||||
|
||||
18
simplify-truths.html
Normal file
18
simplify-truths.html
Normal file
@ -0,0 +1,18 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#181a1b" />
|
||||
<title>Simplify | Martials.no</title>
|
||||
<meta name="description" content="Simplify truth values and generate truth tables">
|
||||
<link rel="icon" type="image/x-icon" href="resources/code.svg">
|
||||
<link rel="stylesheet" href="src/index.css">
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
|
||||
<script src="/src/truth-table.tsx" type="module"></script>
|
||||
</body>
|
||||
</html>
|
||||
113
src/components/input.tsx
Normal file
113
src/components/input.tsx
Normal file
@ -0,0 +1,113 @@
|
||||
/* @refresh reload */
|
||||
import { type Component, createSignal, JSX, Setter } from "solid-js";
|
||||
import type { InputProps } from "../types/interfaces";
|
||||
import Row from "./row";
|
||||
|
||||
function setupEventListener(id: string, setIsHover: Setter<boolean>): () => void {
|
||||
let isMounted = true;
|
||||
|
||||
function hover(hover: boolean): void {
|
||||
if (isMounted) {
|
||||
setIsHover(hover);
|
||||
}
|
||||
}
|
||||
|
||||
const el = document.getElementById(id);
|
||||
el?.addEventListener("pointerenter", () => hover(true));
|
||||
el?.addEventListener("pointerleave", () => hover(false));
|
||||
|
||||
return () => {
|
||||
el?.removeEventListener("pointerenter", () => hover(true));
|
||||
el?.removeEventListener("pointerleave", () => hover(false));
|
||||
isMounted = false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets isText to 'true' or 'false' using the setIsText function.
|
||||
* if the value of the input element is not empty and it's different from the current value
|
||||
*/
|
||||
function setSetIsText(id: string | undefined, isText: boolean, setIsText: Setter<boolean>): void {
|
||||
if (id) {
|
||||
const el = document.getElementById(id) as HTMLInputElement | HTMLTextAreaElement | null;
|
||||
if (el && el.value !== "" !== isText) {
|
||||
setIsText(el.value !== "");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
interface Input<T> extends InputProps<T> {
|
||||
leading?: JSX.Element,
|
||||
trailing?: JSX.Element,
|
||||
}
|
||||
|
||||
export const Input: Component<Input<HTMLInputElement>> = (
|
||||
{
|
||||
className,
|
||||
id,
|
||||
name,
|
||||
type = "text",
|
||||
title,
|
||||
placeholder,
|
||||
required = false,
|
||||
onChange,
|
||||
leading,
|
||||
trailing
|
||||
}): JSX.Element => {
|
||||
|
||||
/**
|
||||
* Is 'true' if the input element is in focus
|
||||
*/
|
||||
const [isFocused, setIsFocused] = createSignal(false);
|
||||
/**
|
||||
* Is 'true' if the user is hovering over the input element
|
||||
*/
|
||||
const [isHover, setIsHover] = createSignal(false);
|
||||
/**
|
||||
* Is 'true' if the input element contains any characters
|
||||
*/
|
||||
const [isText, setIsText] = createSignal(false);
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
if (id && title) {
|
||||
setupEventListener(id, setIsHover);
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<Row className={ "relative" }>
|
||||
{ leading }
|
||||
<HoverTitle title={ title } isActive={ isFocused() || isHover() || isText() } htmlFor={ id }/>
|
||||
<input
|
||||
class={ `bg-default-bg focus:border-cyan-500 outline-none border-2 border-gray-500
|
||||
hover:border-t-cyan-400 ${ className }` }
|
||||
id={ id }
|
||||
onFocus={ () => setIsFocused(true) }
|
||||
onBlur={ () => setIsFocused(false) }
|
||||
name={ name ?? undefined }
|
||||
type={ type }
|
||||
placeholder={ placeholder ?? undefined }
|
||||
required={ required }
|
||||
onInput={ () => setSetIsText(id, isText(), setIsText) }
|
||||
onChange={ onChange /*TODO only called after ENTER*/ }/>
|
||||
{ trailing }
|
||||
</Row>
|
||||
);
|
||||
}
|
||||
|
||||
function HoverTitle(
|
||||
{
|
||||
title,
|
||||
isActive = false,
|
||||
htmlFor
|
||||
}: { title?: string | null, isActive?: boolean, htmlFor?: string }): JSX.Element {
|
||||
return (
|
||||
<label class={ `absolute pointer-events-none
|
||||
${ isActive ? "-top-2 left-3 default-bg text-sm" : "left-2 top-1" }
|
||||
transition-all duration-150 text-gray-600 dark:text-gray-400` }
|
||||
for={ htmlFor }>
|
||||
<div class={ "z-50 relative" }>{ title }</div>
|
||||
<div class={ "w-full h-2 default-bg absolute bottom-1/3 z-10" }/>
|
||||
</label>
|
||||
);
|
||||
}
|
||||
75
src/components/output.tsx
Normal file
75
src/components/output.tsx
Normal file
@ -0,0 +1,75 @@
|
||||
import { Disclosure, DisclosureButton, DisclosurePanel, Transition } from "solid-headless";
|
||||
import { Icon } from "solid-heroicons";
|
||||
import type { ChildProps, TitleProps } from "../types/interfaces";
|
||||
import { Component, JSX } from "solid-js";
|
||||
import { chevronUp } from "solid-heroicons/solid";
|
||||
|
||||
interface InfoBoxProps extends TitleProps {
|
||||
error?: boolean,
|
||||
}
|
||||
|
||||
export const InfoBox: Component<InfoBoxProps> = (
|
||||
{
|
||||
title = "",
|
||||
children,
|
||||
error = false,
|
||||
className
|
||||
}: InfoBoxProps): JSX.Element => {
|
||||
return (
|
||||
<div class={ `border-rounded ${ error ? "border-red-500" : "border-gray-500" } ${ className }` }>
|
||||
<p class={ `border-b px-2 ${ error ? "border-red-500" : "border-gray-500" }` }>{ title }</p>
|
||||
<div class={ "mx-2" }>{ children }</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface MyDisclosureProps extends TitleProps {
|
||||
defaultOpen?: boolean,
|
||||
onClick?: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent>,
|
||||
}
|
||||
|
||||
export const MyDisclosure: Component<MyDisclosureProps> = (
|
||||
{
|
||||
title,
|
||||
children,
|
||||
defaultOpen = false,
|
||||
className,
|
||||
id,
|
||||
onClick
|
||||
}): JSX.Element => {
|
||||
return (
|
||||
<div id={ id } class={ `border-rounded bg-default-bg ${ className }` }>
|
||||
<Disclosure defaultOpen={ defaultOpen }>
|
||||
{ ({ isOpen }) =>
|
||||
<>
|
||||
<DisclosureButton onClick={ onClick }
|
||||
class={ `flex-row-center w-full justify-between px-2` }>
|
||||
<p class={ `py-1` }>{ title }</p>
|
||||
<Icon path={ chevronUp } class={ `w-5 ${ isOpen() && "transform rotate-180" } transition` } />
|
||||
</DisclosureButton>
|
||||
<Transition
|
||||
enter="transition duration-100 ease-out"
|
||||
enterFrom="transform scale-95 opacity-0"
|
||||
enterTo="transform scale-100 opacity-100"
|
||||
leave="transition duration-75 ease-out"
|
||||
leaveFrom="transform scale-100 opacity-100"
|
||||
leaveTo="transform scale-95 opacity-0" show>
|
||||
<DisclosurePanel>
|
||||
<div class={ "px-2 pb-2 text-gray-300" }>{ children }</div>
|
||||
</DisclosurePanel>
|
||||
</Transition>
|
||||
</>
|
||||
}
|
||||
</Disclosure>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export const MyDisclosureContainer: Component<ChildProps> = ({ children, className }): JSX.Element => {
|
||||
return (
|
||||
<div class={ `bg-cyan-900 border-rounded dark:border-gray-800 p-2 mb-2
|
||||
flex flex-col gap-1 ${ className }` }>
|
||||
{ children }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
9
src/components/row.tsx
Normal file
9
src/components/row.tsx
Normal file
@ -0,0 +1,9 @@
|
||||
/* @refresh reload */
|
||||
import { type Component } from "solid-js";
|
||||
import type { ChildProps } from "../types/interfaces";
|
||||
|
||||
const Row: Component<ChildProps> = ({ children, className }) => {
|
||||
return <div class={ `flex-row-center ${ className }` }>{ children }</div>
|
||||
}
|
||||
|
||||
export default Row;
|
||||
57
src/components/truth-table.tsx
Normal file
57
src/components/truth-table.tsx
Normal file
@ -0,0 +1,57 @@
|
||||
/* @refresh reload */
|
||||
import type { SimpleProps } from "../types/interfaces";
|
||||
import type { Table } from "../types/interfaces";
|
||||
import { For } from "solid-js/web";
|
||||
import { type Component } from "solid-js";
|
||||
|
||||
interface TruthTableProps extends SimpleProps {
|
||||
table?: Table,
|
||||
header?: string[],
|
||||
}
|
||||
|
||||
const TruthTable: Component<TruthTableProps> = (
|
||||
{
|
||||
table,
|
||||
header,
|
||||
className,
|
||||
style,
|
||||
id,
|
||||
}) => {
|
||||
|
||||
return (
|
||||
<table class={ `border-2 border-gray-500 border-collapse table z-10 ${ className }` } id={ id }
|
||||
style={ style }>
|
||||
<thead>
|
||||
<tr>
|
||||
<For each={ header }>
|
||||
{ (exp) => (
|
||||
<th scope={ "col" }
|
||||
class={ `default-bg text-center sticky top-0 [position:-webkit-sticky;]
|
||||
outline outline-2 outline-offset-[-1px] outline-gray-500` /*TODO sticky header at the top of the screen */ }>
|
||||
<p class={ "px-2" }>{ exp }</p>
|
||||
</th>
|
||||
) }
|
||||
</For>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<For each={ table }>
|
||||
{ (row) =>
|
||||
<tr class={ "dark:hover:text-black hover:text-white" }>
|
||||
<For each={ row }>
|
||||
{ (value) =>
|
||||
<td class={ `text-center border border-gray-500 last:underline
|
||||
${ value ? "bg-green-500 dark:bg-green-700" : "bg-red-500 dark:bg-red-700" }` }>
|
||||
<p>{ value ? "T" : "F" }</p>
|
||||
</td>
|
||||
}
|
||||
</For>
|
||||
</tr>
|
||||
}
|
||||
</For>
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
}
|
||||
|
||||
export default TruthTable;
|
||||
@ -9,6 +9,18 @@
|
||||
@apply after:content-['DEBUG'] after:absolute;
|
||||
}
|
||||
|
||||
.flex-row-center {
|
||||
@apply flex flex-row items-center;
|
||||
}
|
||||
|
||||
.border-rounded {
|
||||
@apply border rounded-2xl border-gray-700;
|
||||
}
|
||||
|
||||
input[type="submit"] {
|
||||
@apply border-rounded bg-cyan-900 px-2 cursor-pointer;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@apply text-4xl;
|
||||
}
|
||||
|
||||
355
src/truth-table.tsx
Normal file
355
src/truth-table.tsx
Normal file
@ -0,0 +1,355 @@
|
||||
/* @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 MySwitch from "./components/switch";
|
||||
// import { diffChars } from "diff";
|
||||
// import { Menu } from "@headlessui/react";
|
||||
// import MyMenu from "./components/menu";
|
||||
// import { type BookType, utils, write, writeFile } from "xlsx"
|
||||
// import MyDialog from "./components/myDialog";
|
||||
import type { FetchResult } from "./types/interfaces";
|
||||
import { type Component, createSignal, JSX, Show } from "solid-js";
|
||||
import { For, render } from "solid-js/web";
|
||||
import Row from "./components/row";
|
||||
import { magnifyingGlass, xMark } from "solid-heroicons/solid";
|
||||
|
||||
// TODO move some code to new components
|
||||
const TruthTablePage: Component = () => {
|
||||
|
||||
const inputId = "truth-input";
|
||||
|
||||
/**
|
||||
* Stores the boolean value of the simplify toggle
|
||||
*/
|
||||
const [simplifyEnabled, setSimplifyEnabled] = createSignal(true);
|
||||
/**
|
||||
* The state element used to store the simplified string, "empty string" by default
|
||||
*/
|
||||
const [fetchResult, setFetchResult] = createSignal<FetchResult | null>(null);
|
||||
|
||||
/**
|
||||
* If the searchbar is empty, this state is 'false', otherwise 'true'
|
||||
*/
|
||||
const [typing, setTyping] = createSignal(false);
|
||||
|
||||
const hideOptions = [
|
||||
{ name: "Show all result", value: "NONE" },
|
||||
{ name: "Hide true results", value: "TRUE" },
|
||||
{ name: "Hide false results", value: "FALSE" },
|
||||
];
|
||||
|
||||
const sortOptions = [
|
||||
{ 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]);
|
||||
|
||||
/**
|
||||
* Updates the state of the current expression to the new search with all whitespace removed.
|
||||
* If the element is not found, reset.
|
||||
*/
|
||||
async function onClick(e: { preventDefault: () => void; }): Promise<void> {
|
||||
e.preventDefault(); // Stops the page from reloading onClick
|
||||
const exp = (document.getElementById(inputId) as HTMLInputElement | null)?.value;
|
||||
|
||||
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() }`)
|
||||
.then(res => res.json())
|
||||
.then(res => result = res)
|
||||
.catch(err => console.error(err)) // TODO show error on screen
|
||||
.finally();
|
||||
|
||||
console.log(result);
|
||||
setFetchResult(result);
|
||||
}
|
||||
else {
|
||||
setFetchResult(null);
|
||||
}
|
||||
}
|
||||
|
||||
function onTyping() {
|
||||
console.log("typing");
|
||||
const el = (document.getElementById(inputId) as HTMLInputElement | null);
|
||||
if (el && (el.value !== "") !== typing()) {
|
||||
setTyping(el.value !== "");
|
||||
}
|
||||
}
|
||||
|
||||
function clearSearch() {
|
||||
const el = (document.getElementById(inputId) as HTMLInputElement | null);
|
||||
if (el) {
|
||||
el.value = "";
|
||||
setFetchResult(null);
|
||||
setTyping(false);
|
||||
el.focus();
|
||||
}
|
||||
}
|
||||
|
||||
const tableId = "truth-table";
|
||||
const filenameId = "excel-filename";
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
// Focuses searchbar on load
|
||||
(document.getElementById(inputId) as HTMLInputElement | null)?.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,
|
||||
// });
|
||||
// }
|
||||
|
||||
return (
|
||||
<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 class={ "max-w-2xl mx-auto" }>
|
||||
<MyDisclosureContainer>
|
||||
<MyDisclosure title={ "How to" }>
|
||||
<p>{ "truthTableHowTo" /*TODO*/ }</p>
|
||||
</MyDisclosure>
|
||||
<MyDisclosure title={ "Keywords" }>
|
||||
<>
|
||||
<p>not</p>
|
||||
<p>and</p>
|
||||
<p>or</p>
|
||||
<p>implication</p>
|
||||
</>
|
||||
</MyDisclosure>
|
||||
</MyDisclosureContainer>
|
||||
|
||||
<form class={ "flex-row-center" } onSubmit={ onClick } autocomplete={ "off" }>
|
||||
<Input className={ `rounded-xl pl-7 h-10 w-52 sm:w-96 pr-8` }
|
||||
id={ "truth-input" }
|
||||
placeholder={ "¬A & B -> C" }
|
||||
type={ "text" }
|
||||
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*/ }
|
||||
title={ "Clear" }
|
||||
type={ "reset" }
|
||||
onClick={ clearSearch }>
|
||||
<Icon path={ xMark } class={ "h-6" } />
|
||||
</button>
|
||||
</Show> }
|
||||
/>
|
||||
<input id={ "truth-input-button" }
|
||||
title={ "Generate (Enter)" }
|
||||
type={ "submit" }
|
||||
class={ "button min-w-50px h-10 ml-2" }
|
||||
value={ "Generate" } />
|
||||
</form>
|
||||
|
||||
<Row className={ "my-1 gap-2" }>
|
||||
<span class={ "h-min" }>{ "Simplify" }: </span>
|
||||
{/*<MySwitch onChange={ setSimplifyEnabled } checked={ simplifyEnabled } title={ t("simplify") }*/ }
|
||||
{/* name={ t("toggleSimplify") } className={ "mx-1" } />*/ }
|
||||
|
||||
<div class={ "h-min relative" }>
|
||||
{/*<MyMenu title={ "Filter results" }*/ }
|
||||
{/* // button={*/ }
|
||||
{/* // hideValues().value === "none" ?*/ }
|
||||
{/* // <Eye className={ "mx-1" } /> :*/ }
|
||||
{/* // <EyeOff className={ `mx-1 ${ hideValues().value === "TRUE" ?*/ }
|
||||
{/* // "text-green-500" : "text-red-500" }` } />*/ }
|
||||
{/* // }*/ }
|
||||
{/* children={*/ }
|
||||
{/* <For each={ hideOptions }>*/ }
|
||||
{/* { (option) => (*/ }
|
||||
{/* <SingleMenuItem onClick={ () => setHideValues(option) }*/ }
|
||||
{/* option={ option }*/ }
|
||||
{/* currentValue={ hideValues } />)*/ }
|
||||
{/* }*/ }
|
||||
{/* </For>*/ }
|
||||
{/* } itemsClassName={ "right-0" }*/ }
|
||||
{/*/>*/ }
|
||||
</div>
|
||||
|
||||
<div class={ "h-min relative" }>
|
||||
{/*<MyMenu title={ t("sort") + " " + t("results") }*/ }
|
||||
{/* button={ <Filter*/ }
|
||||
{/* className={ sortValues().value === "trueFirst" ?*/ }
|
||||
{/* "text-green-500" : sortValues().value === "falseFirst" ? "text-red-500" : "" } /> }*/ }
|
||||
{/* children={*/ }
|
||||
{/* <For each={ sortOptions }>*/ }
|
||||
{/* { option => (*/ }
|
||||
{/* <SingleMenuItem option={ option } currentValue={ sortValues }*/ }
|
||||
{/* onClick={ () => setSortValues(option) } />)*/ }
|
||||
{/* }*/ }
|
||||
{/* </For>*/ }
|
||||
{/* }*/ }
|
||||
{/* itemsClassName={ "right-0" }*/ }
|
||||
{/*/>*/ }
|
||||
</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>*/ }
|
||||
{/*}*/ }
|
||||
|
||||
</Row>
|
||||
{/*{*/ }
|
||||
{/* fetchResult && fetchResult()?.status.code !== 200 &&*/ }
|
||||
{/* <InfoBox className={ "w-fit text-center" }*/ }
|
||||
{/* title={ t("inputError") }*/ }
|
||||
{/* error={ true }>*/ }
|
||||
{/* <p>{ fetchResult()?.status.message }</p>*/ }
|
||||
{/* </InfoBox>*/ }
|
||||
{/*}*/ }
|
||||
{/*{*/ }
|
||||
{/* fetchResult()?.orderOperations && simplifyEnabled() && fetchResult()?.orderOperations.length > 0 &&*/ }
|
||||
{/* <MyDisclosureContainer>*/ }
|
||||
{/* <MyDisclosure title={ t("showMeHowItsDone") }>*/ }
|
||||
{/* <table class={ "table" }>*/ }
|
||||
{/* <tbody>*/ }
|
||||
{/* <For each={ fetchResult()?.orderOperations }>{*/ }
|
||||
{/* (operation, index) => (*/ }
|
||||
{/* <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-500 dark:bg-green-700 default-text-black-white" } *!/*/ }
|
||||
{/* /!* ${ part.removed && "bg-red-500 dark:bg-red-700 default-text-black-white" }` }>*!/*/ }
|
||||
{/* /!* { part.value }*!/*/ }
|
||||
{/* /!* </span>) }*!/*/ }
|
||||
{/* /!*</For>*!/*/ }
|
||||
{/* { typeof window !== "undefined" && window.outerWidth <= 640 &&*/ }
|
||||
{/* <p>{ t("using") }: { operation.law }</p> }*/ }
|
||||
{/* </td>*/ }
|
||||
{/* { typeof window !== "undefined" && window.outerWidth > 640 &&*/ }
|
||||
{/* <td>{ t("using") }: { operation.law }</td> }*/ }
|
||||
{/* </tr>*/ }
|
||||
{/* ) }*/ }
|
||||
{/* </For>*/ }
|
||||
{/* </tbody>*/ }
|
||||
{/* </table>*/ }
|
||||
{/* </MyDisclosure>*/ }
|
||||
{/* </MyDisclosureContainer>*/ }
|
||||
{/*}*/ }
|
||||
</div>
|
||||
{
|
||||
fetchResult()?.expression &&
|
||||
<>
|
||||
{/*<div class={ "flex flex-row" }>*/ }
|
||||
{/* {*/ }
|
||||
{/* simplifyEnabled &&*/ }
|
||||
{/* <InfoBox className={ "w-fit mx-auto pb-1 text-lg text-center" }*/ }
|
||||
{/* title={ t("output") + ":" } id={ "expression-output" }>*/ }
|
||||
{/* <p>{ fetchResult()?.after }</p>*/ }
|
||||
{/* </InfoBox>*/ }
|
||||
{/* }*/ }
|
||||
{/*</div>*/ }
|
||||
|
||||
<div class={ "flex justify-center m-2" }>
|
||||
<div id={ "table" } class={ "h-[45rem] overflow-auto" }>
|
||||
|
||||
<TruthTable header={ fetchResult()?.header ?? undefined }
|
||||
table={ fetchResult()?.table?.truthMatrix } id={ tableId } />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
export default TruthTablePage;
|
||||
|
||||
interface SingleMenuItem {
|
||||
option: any,
|
||||
currentValue?: any,
|
||||
onClick: JSX.EventHandlerUnion<HTMLDivElement, MouseEvent>,
|
||||
}
|
||||
|
||||
const SingleMenuItem: Component<SingleMenuItem> = ({ option, currentValue, onClick }) => {
|
||||
return (<></>
|
||||
// <Menu.Item>
|
||||
// <div
|
||||
// class={ `hover:underline cursor-pointer last:mb-1 flex-row-center` }
|
||||
// onClick={ onClick }>
|
||||
// <Check
|
||||
// className={ `${ currentValue.value !== option.value && "text-transparent" }` } />
|
||||
// { option.name }
|
||||
// </div>
|
||||
// </Menu.Item>
|
||||
);
|
||||
}
|
||||
|
||||
render(() => <TruthTablePage />, document.getElementById("root") as HTMLElement);
|
||||
@ -1,6 +1,7 @@
|
||||
import { JSX } from "solid-js";
|
||||
|
||||
export interface SimpleProps {
|
||||
name?: string;
|
||||
className?: string,
|
||||
style?: JSX.CSSProperties,
|
||||
id?: string,
|
||||
@ -20,6 +21,47 @@ export interface TitleProps extends ChildProps {
|
||||
title?: string,
|
||||
}
|
||||
|
||||
export interface InputProps<T> extends TitleProps {
|
||||
onChange?: JSX.EventHandlerUnion<T, Event>,
|
||||
placeholder?: string | null,
|
||||
required?: boolean,
|
||||
type?: string,
|
||||
}
|
||||
|
||||
export interface CardProps extends LinkProps {
|
||||
title?: string;
|
||||
}
|
||||
}
|
||||
|
||||
export type Expression = {
|
||||
leading: string,
|
||||
left: Expression | null,
|
||||
operator: Operator | null,
|
||||
right: Expression | null,
|
||||
trailing: string,
|
||||
atomic: string | null,
|
||||
};
|
||||
|
||||
export type Operator = "AND" | "OR" | "NOT" | "IMPLICATION";
|
||||
|
||||
export type Table = boolean[][];
|
||||
|
||||
export type OrderOfOperations = {
|
||||
before: string,
|
||||
after: string,
|
||||
law: string,
|
||||
}[];
|
||||
|
||||
export type FetchResult = {
|
||||
status: {
|
||||
code: number,
|
||||
message: string,
|
||||
},
|
||||
before: string,
|
||||
after: string,
|
||||
orderOperations: OrderOfOperations | null,
|
||||
expression: Expression | null,
|
||||
header: string[] | null,
|
||||
table: {
|
||||
truthMatrix: Table,
|
||||
} | null,
|
||||
};
|
||||
|
||||
@ -12,6 +12,7 @@ export default defineConfig({
|
||||
input: {
|
||||
main: "index.html",
|
||||
"404": "404.html",
|
||||
simplifyTruths: "simplify-truths.html",
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user