Adding language switching and minimize button (#25)

* 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 --------- 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>
2024-10-11 09:30:11 +02:00
parent b4d9c797d1
commit cc0715b6ad
7 changed files with 656 additions and 94 deletions
@@ -5,13 +5,20 @@ import * as LPAPI from "../api/optimizeLP.js"
 import * as GLPKAPI from "../solver/glpk.min.js"
 import { start } from "repl";

+import text from "./lang"
+
 // custom log so we can append the output dynamically
-function customLog(message: string) {
-  console.log(message); // Continue to print message inside of box
+function customLog(input: string) {
+  // get language
+  const lang = (document.getElementById('language_current') as HTMLSelectElement)?.value;

  // Get Output Box
  const outputElement = document.getElementById('out');

+  // load text
+  const message: string = text(lang, input);
+  console.log(message); // Continue to print message inside of box
+
  // Append message if element exists
  if (outputElement) {
    outputElement.innerHTML += message + "<br>"; // Append message
@@ -25,6 +32,14 @@ function customLogClear() {
  }
 }

+function getTranslation(input: string) {
+  // get language
+  const lang = (document.getElementById('language_current') as HTMLSelectElement)?.value;
+
+  // return translation
+  return text(lang, input);
+}
+
 function walltimeStopAndPrint(startpoint: number) {
  // calculating elapsed time as timestamp
  let duration = Date.now() - startpoint;
@@ -37,7 +52,8 @@ function walltimeStopAndPrint(startpoint: number) {
  const durationFormatted = seconds + (milliseconds >= 0 ? "." : ".") + Math.abs(milliseconds).toFixed(3).slice(2);

  // Printing elapsed time
-  customLog("Elapsed time: " + durationFormatted + " seconds<br>");
+  customLog(getTranslation("etime") + ": " + durationFormatted + " " + getTranslation("seconds"));
+  customLog("");

  // return durationFormatted;
 }
@@ -47,11 +63,11 @@ function walltimeStart() {
 }

 function isInputValidRegex(obj: string | undefined, subj: string | undefined, bounds: string | undefined, vars: string | undefined): boolean {
-  customLog("Starting input checks...");
-  
+  customLog("input_checks_start");
+
  // standard case: input is undefined - invalid
-  if (obj === undefined || obj === null || subj === undefined || subj === null || bounds === undefined || bounds === null || vars === undefined || vars === null) { 
-    customLog("Error: Function isInputValidRegex received undefined or null input.");
+  if (obj === undefined || obj === null || subj === undefined || subj === null || bounds === undefined || bounds === null || vars === undefined || vars === null) {
+    customLog(getTranslation("err_nullInput") + "function isInputValidRegex.");
    return false;
  }

@@ -59,63 +75,64 @@ function isInputValidRegex(obj: string | undefined, subj: string | undefined, bo
  let regex = /^[ (\n)]*[\+-]? *((\d+(.\d+)? )?[a-zA-Z][a-zA-Z0-9]*)( *[\+-] *((\d+(.\d+)? )?[a-zA-Z][a-zA-Z0-9]*))*[ (\n)]*$/g;
  let isValid = regex.test(obj);
  if (!isValid) {
-    customLog("Error: Invalid or missing character in object box.");
-      return false;
+    customLog(getTranslation("err_invalidInput") + " " + getTranslation("obj_box") + ".");
+    return false;
  }

  // RegEx check for subject
  regex = /^([ (\n)]*[\+-]* *(\d+(.\d+)? )?[a-zA-Z][a-zA-Z0-9]*( *[\+-] *(\d+(.\d+)? )?[a-zA-Z][a-zA-Z0-9]*)* *((<=?)|(>=?)|=) *[\+-]? *\d+(.\d+)?[ (\n)]*)+$/g;
  isValid = regex.test(subj);
  if (!isValid) {
-    customLog("Error: Invalid or missing character in subject box.");
-      return false;
+    customLog(getTranslation("err_invalidInput") + " " + getTranslation("subj_box") + ".");
+    return false;
  }

-// RegEx check for subject
-regex = /[ (\n)]*(([a-zA-Z][a-zA-Z0-9]* *((<=?)|(>=?)|=) *\d(.\d+)?)|((\d(.\d+)?) *<=? *[a-zA-Z][a-zA-Z0-9]* *<= *(\d(.\d+)?)))[ (\n)]*/g;
-isValid = regex.test(bounds);
-if (!isValid) {
-  customLog("Error: Invalid or missing character in bounds box.");
+  // RegEx check for subject
+  regex = /[ (\n)]*(([a-zA-Z][a-zA-Z0-9]* *((<=?)|(>=?)|=) *\d(.\d+)?)|((\d(.\d+)?) *<=? *[a-zA-Z][a-zA-Z0-9]* *<= *(\d(.\d+)?)))[ (\n)]*/g;
+  isValid = regex.test(bounds);
+  if (!isValid) {
+    customLog(getTranslation("err_invalidInput") + " " + getTranslation("bounds_box") + ".");
    return false;
-}
+  }

  // RegEx check for variables
  regex = /^ *([a-zA-Z][a-zA-Z0-9]*(\n)* *)+$/g;
  isValid = regex.test(vars);
  if (!isValid) {
-    customLog("Error: Invalid or missing  character in variables box.");
+    customLog(getTranslation("err_invalidInput") + " " + getTranslation("vars_box") + ".");
    return false;
  }

-  customLog("All input checks successful.");
+  customLog("input_checks_successful");
  customLog("");
  return true;
 }

 function isInputFilled(obj: string | undefined, subj: string | undefined, bounds: string | undefined, vars: string | undefined) {
  if (obj == "" || obj == null || obj == undefined) {
-    customLog("Error: Empty input field.");
+    customLog("err_emptyBox");
    return false;
  }
  if (subj == "" || subj == null || subj == undefined) {
-    customLog("Error: Empty input field.");
+    customLog("err_emptyBox");
    return false;
  }
  if (bounds == "" || bounds == null || bounds == undefined) {
-    customLog("Error: Empty input field.");
+    customLog("err_emptyBox");
    return false;
  }
  if (vars == "" || vars == null || vars == undefined) {
-    customLog("Error: Empty input field.");
+    customLog("err_emptyBox");
    return false;
  }
  return true;
 }

-export function calculate_click() {
+function calculate_click(maximize: boolean) {
  customLogClear();
  const timer = walltimeStart();
-  customLog("Calculating...<br>");
+  customLog("calculating");
+  customLog("");

  let objective: string | undefined;
  const objectiveElement = document.getElementById('objective');
@@ -190,67 +207,78 @@ export function calculate_click() {

  //   console.log(parseFunction(decider));

-  
+
  // catch error: empty input field(s)
  if (!isInputFilled(objective, subject, bounds, variables)) return;

  // catch error: variables field has invalid characters
  if (!isInputValidRegex(objective, subject, bounds, variables)) return;

-  let wholeText: string = "Maximize\n obj: " + objective
-                        + "\nSubject To \n" + subject 
-                        + "\nBounds \n" + bounds
-                        + "\nGenerals \n" + variables
-                        + "\nEnd";
+  // fetch operator
+  let operator = "Minimize";
+  if (maximize) operator = "Maximize";
+
+  let wholeText: string = operator + "\n obj: " + objective
+    + "\nSubject To \n" + subject
+    + "\nBounds \n" + bounds
+    + "\nGenerals \n" + variables
+    + "\nEnd";

  // customLog("<br><br>DEBUGGING<br><br>\nfunctions:<br>" + functions + "<br><br>variables:<br>" + variables + "<br><br>DEBUGGING END<br>");

-  customLog("Running optimization with input: \"" + wholeText + "\"<br>");
+  customLog(getTranslation("run_optimization") + ": \"" + wholeText + "\"");
+  customLog("");
  run(wholeText);

  walltimeStopAndPrint(timer);
 }

 function run(text: string) {
-  customLog("Starting problem setup...");
+  customLog("startProblemSetup");
  let lp = GLPKAPI.glp_create_prob();
  GLPKAPI.glp_read_lp_from_string(lp, null, text);
-  customLog("Problem created.<br>");
+  customLog("succProblemSetup");
+  customLog("");

-  customLog("Scaling problem...");
+  customLog("startScaling");
  GLPKAPI.glp_scale_prob(lp, GLPKAPI.GLP_SF_AUTO);
-  customLog("Scaling complete.<br>");
+  customLog("succScaling");
+  customLog("");

-  customLog("Starting simplex optimization...");
+  customLog("startOptimizationSimplex");
  let smcp = new GLPKAPI.SMCP({ presolve: GLPKAPI.GLP_ON });
  GLPKAPI.glp_simplex(lp, smcp);
-  customLog("Simplex optimization complete.<br>");
+  customLog("succOptimizationSimplex");
+  customLog("");

-  customLog("Starting integer optimization...");
+  customLog("startOptimizationInteger");
  let iocp = new GLPKAPI.IOCP({ presolve: GLPKAPI.GLP_ON });
  GLPKAPI.glp_intopt(lp, iocp);
-  customLog("Integer optimization complete.<br>");
+  customLog("succOptimizationInteger");
+  customLog("");

  // customLog("obj: " + GLPKAPI.glp_mip_obj_val(lp));
-  customLog("<i>Final objective value: " + GLPKAPI.glp_mip_obj_val(lp) + "</i><br>");
-  customLog("Value of each variable:");
-  for (let i = 1; i <= GLPKAPI.glp_get_num_cols(lp) - 1; i++) {   // "-1" to remove the "End-variable" from logs
+  customLog("<i>" + getTranslation("finalObjValue") + ": " + GLPKAPI.glp_mip_obj_val(lp) + "</i>");
+  customLog("");
+  customLog(getTranslation("varsValues") + ":");
+  for (let i = 1; i <= GLPKAPI.glp_get_num_cols(lp); i++) {
    customLog(GLPKAPI.glp_get_col_name(lp, i) + " = " + GLPKAPI.glp_mip_col_val(lp, i));
  }
  customLog("");

-  customLog("Dual values of constraints:");
-    for (let j = 1; j <= GLPKAPI.glp_get_num_rows(lp); j++) {
-        const dualValue = GLPKAPI.glp_get_row_dual(lp, j); // fetch dual
-        const constraintName = GLPKAPI.glp_get_row_name(lp, j);
-        customLog(constraintName + " dual = " + dualValue);
-    }
+  customLog(getTranslation("dualValues") + ":");
+  for (let j = 1; j <= GLPKAPI.glp_get_num_rows(lp); j++) {
+    const dualValue = GLPKAPI.glp_get_row_dual(lp, j); // fetch dual
+    const constraintName = GLPKAPI.glp_get_row_name(lp, j);
+    customLog(constraintName + " dual = " + dualValue);
+  }
  customLog("");
 }

 function downloadLPFormatting(objective: any, subject: any, bounds: any) {
-  customLog("Preparing file content string...<br>");
-  
+  customLog(getTranslation("downloadPrepFileString"));
+  customLog("");
+
  // ensure that all vars are strings
  const formattedObjective = typeof objective === 'string' ? objective : '';
  const formattedSubject = typeof subject === 'string' ? subject : '';
@@ -274,23 +302,32 @@ 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("Preparing file...<br>")
+  customLog("downloadPrepFile");
+  customLog("");
  const blob = new Blob([content], { type: 'text/plain' });
  const link = document.createElement('a');
  link.href = URL.createObjectURL(blob);
  link.download = 'problem.txt'; // file name
  link.click(); // starting download
-  customLog("Starting download.")
+  customLog("downloadStart");
 }

 export function downloadLP() {
  customLogClear();
-  customLog("Preparing download...<br>");
-  customLog("Fetching input...<br>")
+  customLog("downloadPrep");
+  customLog("");
+  customLog("downloadFetchInput");
+  customLog("");

  let objective: string | undefined;
  const objectiveElement = document.getElementById('objective');
@@ -335,7 +372,7 @@ export function downloadLP() {


 export function import_click() {
-  console.log("Importing...");
+  console.log("importing");
 }