adding unit test for rendering site and fixing LP export issue (#28)
* Initial Push
Inititial project state
* Static demo version
* static demo site - added variables
a
* first_implementation
* Updated UI, Improved Style to be more "Reactly", added Functionality
* add parsing functions
* change folder
* Import/Export Prototype
* Adding "reactjs-popup" to package,json
* Adding GLPK source
* Rough implementation of solver + example
* Show solution in output
* example 2 + popup lib
* removing import button
This feature won't be needed in this state of the project and might come back later. Right now it serves no functional purpose.
* Removing "Popout" button
This feature won't be needed in this state of the project and might come back later. Right now it serves no functional purpose.
* Updating Logs
Now the site displays all logs created with customLog(STRING). Logs can be cleared with customLogClear();
* Adding walltime
Can be called using:
Start:
function walltimeStart() {
returns Date.now();
Stop:
function walltimeStopAndPrint(startpoint: number) {
Add startpoint as argument.
It prints the elapsed time using customLog()
* Adding duals ouput
* Adding glpk.js package
required dependency
* adding LP format export and fixing a few errors
* fixing further errors
* adding automatic build
* Moving files to correct folders
* Update nextjs.yml
* Updating README and .gitignore
README:
- added installation instructions
- added troubleshooting
gitignore:
- skipping Writerside and .idea folders
* Update LICENCE.txt
We are required to use the same license. See https://github.com/hgourvest/node-glpk/blob/master/LICENSE
* Updating icon
* Adding RegEx input checks and updating text box explanations
* Update README.md
Updating license info
Signed-off-by: SinusFox <61253950+SinusFox@users.noreply.github.com>
* Deleting license to recreate proper license
* Update layout.tsx
fixing typo
Signed-off-by: SinusFox <61253950+SinusFox@users.noreply.github.com>
* Fixing word issue
English has some false friends... like the German "Enter" is actually return in English.
* Updatint License
* Fixing design issue and updating license link
* Fixing typo in log
* Fixing white mode
* adding translations 1/2
UI Translations
Coming in 2/2: Output translations
* adding output translations
* adding minimize button
* adding unit test for rendering home page
* fixing maxmin on lp export
* Update .gitignore
* Update .gitignore
* Update scripts.ts
* Update scripts.ts
* Update README.md
* adding tests
---------
Signed-off-by: SinusFox <61253950+SinusFox@users.noreply.github.com>
Co-authored-by: moebiusl <lucas.moebius@icloud.com>
Co-authored-by: Marcel Pöppe <marcel.poeppe@gmail.com>
This commit is contained in:
SinusFox
@@ -172,3 +172,13 @@ body {
|
||||
.dropdown-custom:hover {
|
||||
background-color: #444;
|
||||
}
|
||||
|
||||
.dropdown-custom-maxmin {
|
||||
width: 150px;
|
||||
background-color: black;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
+32
-17
@@ -2,11 +2,13 @@
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import { Box, Button, Output } from "./modules";
|
||||
import { calculate_clickMaximize, calculate_clickMinimize, downloadLP, import_click } from "./scripts"
|
||||
import text from "./lang"
|
||||
import { calculate_click, downloadLP } from "./scripts";
|
||||
import text from "./lang";
|
||||
|
||||
export default function Home() {
|
||||
const [language, setLanguage] = useState('eng');
|
||||
const [maxminOption, setMaxminOption] = useState('maximize');
|
||||
|
||||
const tr_hTitle = text(language, 'header_title');
|
||||
const tr_hSubtitle = text(language, 'header_subtitle');
|
||||
const tr_boxObjTitle = text(language, 'boxObjTitle');
|
||||
@@ -21,21 +23,27 @@ export default function Home() {
|
||||
const tr_boxExportLP = text(language, "boxExportLP");
|
||||
const tr_calc_max = text(language, "maximize");
|
||||
const tr_calc_min = text(language, "minimize");
|
||||
const tr_calcButton = text(language, "buttonCalc");
|
||||
|
||||
const handleLanguageChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
|
||||
setLanguage(event.target.value);
|
||||
};
|
||||
|
||||
const handleMaxMinChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
|
||||
setMaxminOption(event.target.value);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<header className="header">
|
||||
<div className="title">
|
||||
<main className="header_box">
|
||||
{tr_hTitle}
|
||||
<br></br>
|
||||
<br />
|
||||
<span className="header_copyright">
|
||||
<i>{tr_hSubtitle}</i>
|
||||
</span><br></br>
|
||||
</span>
|
||||
<br />
|
||||
<select id="language_current" value={language} onChange={handleLanguageChange} className="dropdown-custom">
|
||||
<option value="ger">Deutsch</option>
|
||||
<option value="eng">English</option>
|
||||
@@ -46,35 +54,42 @@ export default function Home() {
|
||||
<Box
|
||||
title={tr_boxObjTitle}
|
||||
placeholder={tr_boxObjDesc}
|
||||
id="objective" />
|
||||
id="objective"
|
||||
/>
|
||||
<Box
|
||||
title={tr_boxSubjTitle}
|
||||
placeholder={tr_boxSubjDesc}
|
||||
id="subject" />
|
||||
id="subject"
|
||||
/>
|
||||
<Box
|
||||
title={tr_boxBoundsTitle}
|
||||
placeholder={tr_boxBoundsDesc}
|
||||
id="bounds" />
|
||||
id="bounds"
|
||||
/>
|
||||
<Box
|
||||
title={tr_boxVarsTitle}
|
||||
placeholder={tr_boxVarsDesc}
|
||||
id="vars" />
|
||||
id="vars"
|
||||
/>
|
||||
<select id="maxminswitch" value={maxminOption} onChange={handleMaxMinChange} className="dropdown-custom-maxmin">
|
||||
<option value="maximize">{tr_calc_max}</option>
|
||||
<option value="minimize">{tr_calc_min}</option>
|
||||
</select>
|
||||
<Button
|
||||
title={tr_calc_max}
|
||||
title={tr_calcButton}
|
||||
className={"button_green"}
|
||||
onClickFunc={calculate_clickMaximize} />
|
||||
<Button
|
||||
title={tr_calc_min}
|
||||
className={"button_green"}
|
||||
onClickFunc={calculate_clickMinimize} />
|
||||
onClickFunc={calculate_click}
|
||||
/>
|
||||
<Button
|
||||
title={tr_boxExportLP}
|
||||
className={"button"}
|
||||
onClickFunc={downloadLP} />
|
||||
<br></br>
|
||||
onClickFunc={downloadLP}
|
||||
/>
|
||||
<br />
|
||||
<Output
|
||||
id="out"
|
||||
text={tr_boxOut} />
|
||||
text={tr_boxOut}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
+15
-108
@@ -8,7 +8,7 @@ import { start } from "repl";
|
||||
import text from "./lang"
|
||||
|
||||
// custom log so we can append the output dynamically
|
||||
function customLog(input: string) {
|
||||
export function customLog(input: string) {
|
||||
// get language
|
||||
const lang = (document.getElementById('language_current') as HTMLSelectElement)?.value;
|
||||
|
||||
@@ -25,14 +25,14 @@ function customLog(input: string) {
|
||||
}
|
||||
}
|
||||
|
||||
function customLogClear() {
|
||||
export function customLogClear() {
|
||||
const outElement = document.getElementById('out');
|
||||
if (outElement) {
|
||||
outElement.innerHTML = "";
|
||||
}
|
||||
}
|
||||
|
||||
function getTranslation(input: string) {
|
||||
export function getTranslation(input: string) {
|
||||
// get language
|
||||
const lang = (document.getElementById('language_current') as HTMLSelectElement)?.value;
|
||||
|
||||
@@ -62,7 +62,7 @@ function walltimeStart() {
|
||||
return Date.now();
|
||||
}
|
||||
|
||||
function isInputValidRegex(obj: string | undefined, subj: string | undefined, bounds: string | undefined, vars: string | undefined): boolean {
|
||||
export function isInputValidRegex(obj: string | undefined, subj: string | undefined, bounds: string | undefined, vars: string | undefined): boolean {
|
||||
customLog("input_checks_start");
|
||||
|
||||
// standard case: input is undefined - invalid
|
||||
@@ -108,7 +108,7 @@ function isInputValidRegex(obj: string | undefined, subj: string | undefined, bo
|
||||
return true;
|
||||
}
|
||||
|
||||
function isInputFilled(obj: string | undefined, subj: string | undefined, bounds: string | undefined, vars: string | undefined) {
|
||||
export function isInputFilled(obj: string | undefined, subj: string | undefined, bounds: string | undefined, vars: string | undefined): boolean {
|
||||
if (obj == "" || obj == null || obj == undefined) {
|
||||
customLog("err_emptyBox");
|
||||
return false;
|
||||
@@ -128,7 +128,7 @@ function isInputFilled(obj: string | undefined, subj: string | undefined, bounds
|
||||
return true;
|
||||
}
|
||||
|
||||
function calculate_click(maximize: boolean) {
|
||||
export function calculate_click() {
|
||||
customLogClear();
|
||||
const timer = walltimeStart();
|
||||
customLog("calculating");
|
||||
@@ -158,56 +158,6 @@ function calculate_click(maximize: boolean) {
|
||||
variables = (varsElement as HTMLInputElement).value;
|
||||
}
|
||||
|
||||
// let funcs:string[] = functions.split(/;/);
|
||||
// let vars:string[] = variables.split(/;/);
|
||||
|
||||
// let direction = null;
|
||||
|
||||
// let namesVars:string[] = [];
|
||||
|
||||
// let variablesMIP:VariableMIP[];
|
||||
// let variablesLP:VariableLP[];
|
||||
|
||||
// // console.log(vars);
|
||||
|
||||
// for (const decider of vars) {
|
||||
|
||||
// // match comments
|
||||
// let regexMatch:RegExpMatchArray|null = decider.match(/#.*/);
|
||||
// if (regexMatch != null)
|
||||
// continue;
|
||||
|
||||
// regexMatch = decider.match(/var/);
|
||||
// if (regexMatch != null)
|
||||
// namesVars.push(regexMatch[1]);
|
||||
|
||||
|
||||
|
||||
// console.log(regexMatch);
|
||||
// }
|
||||
|
||||
|
||||
// for (const decider of funcs) {
|
||||
// let dir = decider.match(/(min|max) .*/);
|
||||
// if (direction != null && dir != null) {
|
||||
// document.getElementById('out').innerHTML = "ERROR: Multiple Functions!";
|
||||
// return;
|
||||
// }
|
||||
// if (direction == null && dir != null) {
|
||||
// direction = dir[1];
|
||||
// let test = parseFunction(decider);
|
||||
// console.log(test?.name);
|
||||
// variablesLP.
|
||||
// continue;
|
||||
// }
|
||||
|
||||
// console.log(direction);
|
||||
|
||||
// document.getElementById('out').innerHTML = direction;
|
||||
|
||||
// console.log(parseFunction(decider));
|
||||
|
||||
|
||||
// catch error: empty input field(s)
|
||||
if (!isInputFilled(objective, subject, bounds, variables)) return;
|
||||
|
||||
@@ -215,8 +165,9 @@ function calculate_click(maximize: boolean) {
|
||||
if (!isInputValidRegex(objective, subject, bounds, variables)) return;
|
||||
|
||||
// fetch operator
|
||||
const maxmin = (document.getElementById('maxminswitch') as HTMLSelectElement)?.value;
|
||||
let operator = "Minimize";
|
||||
if (maximize) operator = "Maximize";
|
||||
if (maxmin == "maximize") operator = "Maximize";
|
||||
|
||||
let wholeText: string = operator + "\n obj: " + objective
|
||||
+ "\nSubject To \n" + subject
|
||||
@@ -224,8 +175,6 @@ function calculate_click(maximize: boolean) {
|
||||
+ "\nGenerals \n" + variables
|
||||
+ "\nEnd";
|
||||
|
||||
// customLog("<br><br>DEBUGGING<br><br>\nfunctions:<br>" + functions + "<br><br>variables:<br>" + variables + "<br><br>DEBUGGING END<br>");
|
||||
|
||||
customLog(getTranslation("run_optimization") + ": \"" + wholeText + "\"");
|
||||
customLog("");
|
||||
run(wholeText);
|
||||
@@ -275,7 +224,7 @@ function run(text: string) {
|
||||
customLog("");
|
||||
}
|
||||
|
||||
function downloadLPFormatting(objective: any, subject: any, bounds: any) {
|
||||
export function downloadLPFormatting(objective: any, subject: any, bounds: any) {
|
||||
customLog(getTranslation("downloadPrepFileString"));
|
||||
customLog("");
|
||||
|
||||
@@ -284,11 +233,16 @@ function downloadLPFormatting(objective: any, subject: any, bounds: any) {
|
||||
const formattedSubject = typeof subject === 'string' ? subject : '';
|
||||
const formattedBounds = typeof bounds === 'string' ? bounds : '';
|
||||
|
||||
// fetch operator
|
||||
const maxmin = (document.getElementById('maxminswitch') as HTMLSelectElement)?.value;
|
||||
let operator = "Minimize";
|
||||
if (maxmin == "maximize") operator = "Maximize";
|
||||
|
||||
// Header mit Problemname
|
||||
const header = "\\ Your problem\n";
|
||||
|
||||
// format objective
|
||||
const objectiveFunction = `Maximize\n obj: ${formattedObjective}\n`;
|
||||
const objectiveFunction = operator + `\n obj: ${formattedObjective}\n`;
|
||||
|
||||
// turn each subject into a single line
|
||||
const constraints = `Subject To\n${formattedSubject.split("\n").filter(line => line.trim() !== "").map(line => ` ${line}`).join("\n")}\n`;
|
||||
@@ -302,15 +256,6 @@ function downloadLPFormatting(objective: any, subject: any, bounds: any) {
|
||||
return lpFormat;
|
||||
}
|
||||
|
||||
export function calculate_clickMaximize() {
|
||||
calculate_click(true);
|
||||
}
|
||||
|
||||
export function calculate_clickMinimize() {
|
||||
calculate_click(false);
|
||||
}
|
||||
|
||||
|
||||
function downloadProblemDownload(content: string) {
|
||||
customLog("downloadPrepFile");
|
||||
customLog("");
|
||||
@@ -360,41 +305,3 @@ export function downloadLP() {
|
||||
|
||||
downloadProblemDownload(exportString);
|
||||
}
|
||||
|
||||
// Irgend ein Interface
|
||||
// document.getElementById('out').innerHTML = funcs;
|
||||
|
||||
// output.innerHTML = functions.innerHTML;
|
||||
|
||||
// createProblemMIP();
|
||||
|
||||
// LPAPI.default();
|
||||
|
||||
|
||||
export function import_click() {
|
||||
console.log("importing");
|
||||
}
|
||||
|
||||
|
||||
// export function export_click() {
|
||||
// console.log("Exporting...");
|
||||
|
||||
// }
|
||||
|
||||
// function parseFunction(toParse: string) {
|
||||
// var regex = toParse.match(/([a-zA-Z][a-zA-Z0-9]*):/);
|
||||
// if (regex == null)
|
||||
// return;
|
||||
// var name = regex[1];
|
||||
|
||||
// regex = toParse.match(/(?:([0-9]*) *\* *([a-zA-Z][a-zA-Z0-9]*))/g);
|
||||
|
||||
// let coefs:number[] = [];
|
||||
// let vars:string[] = [];
|
||||
|
||||
// for (const rg of regex) {
|
||||
// coefs.push(+rg.match(/([0-9]+)/g));
|
||||
// vars.push(rg.match(/([a-zA-Z][a-zA-Z0-9]*)/g)[0]);
|
||||
// }
|
||||
// return {name, coefs, vars};
|
||||
// }
|
||||
|
||||
Reference in New Issue
Block a user