eonum · jbessi · Apr 3, 2023 · Apr 3, 2023 · Apr 30, 2023 · Apr 30, 2023
diff --git a/Monaco_editor/.DS_Store b/Monaco_editor/.DS_Store
diff --git a/Monaco_editor/ReadMe b/Monaco_editor/ReadMe
@@ -0,0 +1,6 @@
+Running this requires the "live server" extension
+
+to run it: right click the main.html code and click open with live server
+
+monaco editor:
+https://microsoft.github.io/monaco-editor/monarch.html
diff --git a/Monaco_editor/infoParser.js b/Monaco_editor/infoParser.js
@@ -0,0 +1,57 @@
+/**
+ * This function takes a JSON object and recursively parses it to return an array.
+ * If the value of a key is an array, it is directly pushed to the output array.
+ * If the value of a key is an object, the function is recursively called and the result is pushed to the output array.
+ * 
+ * @param {Object} jsonObject - A JSON object to be parsed
+ * @returns {Array} - An array of objects with 'name' and 'tables' properties
+*/
+/*
+function parseJsonToArray(jsonObject) {
+    const array = [];
+
+    for (const key in jsonObject) {
+      if (Array.isArray(jsonObject[key])) {
+        // If the value is an array, just push it to the output array
+        array.push({
+          name: key,
+          data: jsonObject[key]
+        });
+      } else if (typeof jsonObject[key] === 'object') {
+        // If the value is an object, recursively call the function
+        // and push the result to the output array
+        array.push({
+          name: key,
+          data: parseJsonToArray(jsonObject[key])
+        });
+      }
+    }
+
+    return array;
+}
+*/
+function parseJsonToArray(jsonObject){
+    let array;
+
+    fetch(jsonObject)
+        .then(data => data.json())
+        .then(data => {
+            array = data;
+        })
+        .catch(error => {
+            console.log(error);
+        })
+
+    //console.log(array)
+    return array;
+}
+
+function loadData(filePath) {
+    return fetch(filePath)
+      .then(response => response.json())
+      .then(data => {
+        //console.log(`Loaded ${filePath}:`, data);
+        return data;
+      })
+      .catch(error => console.error(error));
+}
diff --git a/Monaco_editor/infoParserTest.html b/Monaco_editor/infoParserTest.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>JSON Parsing Test</title>
+    <script src="infoParser.js"></script>
+  </head>
+  <body>
+    <script>
+        const varFilePath = 'variable_and_tables_info/variables.json';
+        let mylangVariables;
+
+        const tabFilePath = 'variable_and_tables_info/tables.json';
+        let mylangTables;
+
+        //TODO find out how to better handle the loading than with these promises
+        const varPromise = loadData(varFilePath);
+        const tabPromise = loadData(tabFilePath);
+
+        // load variables data
+        varPromise.then((variablesData) => {
+            // save variables to global variable for later use
+            window.variablesData = variablesData;
+            mylangVariables = variablesData;
+            mylangVariables = Object.entries(mylangVariables);
+            mylangVariables = mylangVariables.map((variables) => variables[1])
+        });
+
+        // load tables data
+        tabPromise.then((tablesData) => {
+            // save tables to global variable for later use
+            window.tablesData = tablesData;
+            mylangTables = tablesData;
+            mylangTables = Object.entries(mylangTables);
+            mylangTables = mylangTables.map((tables) => tables[1])
+
+            mylangTables = [].concat(...mylangTables)
+
+        });
+
+        Promise.all([varPromise, tabPromise]).then(() => {
+            console.log(mylangVariables);
+            console.log(mylangTables);
+        })
+    </script>
+  </body>
+</html>
diff --git a/Monaco_editor/main.html b/Monaco_editor/main.html
@@ -0,0 +1,93 @@
+<!-- Load the Monaco editor -->
+<script src="https://unpkg.com/[email protected]/min/vs/loader.js"></script>
+
+<!-- Initialize the Monaco editor -->
+<script>
+  require.config({ paths: { 'vs': 'https://unpkg.com/[email protected]/min/vs' }});
+  require(['vs/editor/editor.main'], function() {
+    var editor = monaco.editor.create(document.getElementById('container'), {
+      value: '',
+      language: 'mylang',
+      lineNumbers: false
+    });
+
+    // Timer used for delay in output
+    let timerId;
+    let lastValue = "";
+
+    /**
+     * Throttle and debounce function for better performance
+     * <a href="https://www.youtube.com/watch?v=cjIswDCKgu0"> Youtube Video </a>
+     * @param value (string): The content that should be logged.
+     * @param delay (number): The amount of time before the editor's content is output. Default is 1 second delay.
+     * @param throttleDelay (number): The amount of time before the editor's content is output when typing slowly. Default is 300 milliseconds.
+     */
+    function throttleAndDebounceLogEditorValue(value, delay = 1000, throttleDelay = 300) {
+      // Throttle
+      /**
+       * This statement checks whether timerId is currently null or not. 
+       * If timerId is null, it means that no timer has been set, so we can go ahead and log the editor value. 
+       * If timerId is not null, it means that a timer has already been set, and we don't want to log the editor value again until the timer has completed.
+       */
+      if (!timerId) {
+        console.log(editor.getValue());
+        timerId = setTimeout(() => {
+          timerId = null;
+        }, throttleDelay);
+      }
+
+      // Debounce
+      /**
+       * This statement checks whether the current editor value, newVal, is different from the previous editor value, lastVal. 
+       * If the values are the same, it means that nothing has changed since the last time the function was called, so we don't need to do anything. 
+       * If the values are different, it means that the editor content has been updated, and we need to start the throttle timer again.
+       */
+      if (value != lastValue) {
+        clearTimeout(timerId);
+        timerId = setTimeout(() => {
+          console.log(editor.getValue());
+          timerId = null;
+        }, delay);
+        lastValue = value;
+      }
+    }
+
+    // Call this method whenever the content of the editor is changed
+    editor.onDidChangeModelContent(() => {
+      throttleAndDebounceLogEditorValue(editor.getValue());
+    });
+
+    // Get the current value of the editor
+    editor.onDidChangeModelContent(() => {
+    parseInput(editor.getValue());
+    });
+
+  });
+</script>
+
+<!-- load language -->
+<script src="./mylang.js"></script>
+
+<!-- This is the visual code editor box -->
+<div style="border: 3px solid #ccc; padding: 5px; max-width: 600px;">
+  <div id="container" style="height: 50px; box-sizing: border-box;"></div> 
+</div>
+
+<script src = "medcodelogic.js"></script>
+	<script>
+
+		function parseInput(valueMonaco) {
+
+			// Call function from our parser (peg$parse) with the user input as a parameter
+			try {
+				var result = peg$parse(valueMonaco);
+				document.getElementById("output").innerHTML = result;
+			} catch (e) {
+				document.getElementById("output").innerHTML = "Error: " + e.message;
+			}
+		}
+	</script>
+<br><br><br><br><br><br><br><br><br><br><br><br>
+<div id="output"></div>
+
+
diff --git a/Monaco_editor/mainreact.html b/Monaco_editor/mainreact.html
@@ -0,0 +1,56 @@
+<!-- load language, somehow its not working with our language definition (mylang.js). there is a problem with the require command in mylang -->
+<!-- in this file the monaco editors language is javascript (see line 34)  -->
+
+<!-- <script src="./mylang.js"></script> -->
+
+
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>React Monaco Editor Example</title>
+    <script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
+    <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
+    <script src="https://unpkg.com/[email protected]/min/vs/loader.js"></script>
+  </head>
+  <body>
+    <div id="root"></div>
+
+    <script>
+      // Define a React component that uses the Monaco editor
+      class MonacoEditor extends React.Component {
+        constructor(props) {
+          super(props);
+
+          this.state = {
+            editorValue: "",
+          };
+
+          // Load the Monaco editor
+          require.config({ paths: { vs: "https://unpkg.com/[email protected]/min/vs" } });
+          require(["vs/editor/editor.main"], () => {
+            // Initialize the editor
+            const editor = monaco.editor.create(document.getElementById("container"), {
+              value: "",
+              language: "javascript",
+              lineNumbers: false
+            });
+          });
+        }
+
+        render() {
+        return React.createElement(
+        'div',
+        null,
+        React.createElement('div', { id: 'container', style: { height: '400px', width: '800px' } }),
+        React.createElement('pre', null, this.state.editorValue)
+        );
+        }
+
+      }
+
+      // Render the MonacoEditor component to the root element
+      ReactDOM.render(React.createElement(MonacoEditor, null), document.getElementById("root"));    
+      </script>
+  </body>
+</html>