Add equation functionality

1 files changed, 140 insertions, 23 deletions

diff --git a/templates/index.html b/templates/index.html
index e87e7e4..4d44706 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -30,40 +30,142 @@
       <div class="alert alert-info mb-2" role="alert">
         Welcome to <b>pyMathEngine</b>, a mathematical engine in the style of
         Wolfram Alpha. <br />
-        Currently the engine can only take univariate expressions (e.g. \(
-        x^2+2x+3 \)), but additional features are being added over time.<br />
+        Currently, the engine can only take univariate expressions and simple
+        equations, but additional features are being added over time. , but
+        additional features are being added over time.<br />
         Some notes:
         <ul>
           <li>Euler's number (\(e\)) is written as "E" in the box</li>
           <li>Pi (\(\pi\)) is written as "pi" in the box</li>
         </ul>
       </div>
-      <div class="input-group mb-3">
-        <input
-          id="expression"
-          type="text"
-          class="form-control"
-          placeholder="Enter a univariate expression..."
-          aria-label="Enter a univariate expression..."
-          aria-describedby="button-addon"
-        />
-        <button
-          class="btn btn-secondary"
-          type="button"
-          onclick="get()"
-          id="button-addon"
-        >
-          Search
-        </button>
+      <div class="row mt-3">
+        <div class="col-sm">
+          <div class="input-group mb-3">
+            <input
+              id="expression"
+              type="text"
+              class="form-control"
+              placeholder="Enter a univariate expression..."
+              aria-label="Enter a univariate expression..."
+              aria-describedby="button-addon"
+            />
+            <button
+              class="btn btn-secondary"
+              type="button"
+              onclick="get_uni()"
+              id="button-addon"
+            >
+              Search
+            </button>
+          </div>
+        </div>
+        <div class="col-sm">
+          <div class="input-group mb-3">
+            <input
+              id="lhs"
+              type="text"
+              placeholder="LHS of equation"
+              class="form-control"
+            />
+            <span class="input-group-text">=</span>
+            <input
+              id="rhs"
+              type="text"
+              placeholder="RHS of equation"
+              class="form-control"
+            />
+            <button
+              class="btn btn-secondary"
+              type="button"
+              onclick="get_eq()"
+              id="button-addon"
+            >
+              Search
+            </button>
+          </div>
+        </div>
       </div>
     </div>
-    <div id="response" class="m-5"></div>
+    <div id="response" class="m-3"></div>
   </body>
   <script>
-    function get() {
+    function get_eq() {
+      let lhs = document.getElementById("lhs").value;
+      let rhs = document.getElementById("rhs").value;
+      let responseBox = document.getElementById("response");
+      responseBox.innerHTML = `
+      <div class="d-flex justify-content-center">
+        <div class="spinner-border" role="status">
+          <span class="visually-hidden">Loading...</span>
+        </div>
+      </div>
+      `;
+
+      fetch(
+        `http://${"{{ HOSTNAME }}"}/api/equation?lhs=${encodeURIComponent(
+          lhs
+        )}&rhs=${encodeURIComponent(rhs)}`
+      )
+        .then((response) => {
+          if (!response.ok) {
+            let err = new Error("HTTP error: " + response.status);
+            err.response = response;
+            err.status = response.status;
+            throw err;
+          } else {
+            response.json().then((data) => {
+              console.log(data);
+              let responseBox = document.getElementById("response");
+
+              if (data.solution.length == 0) {
+                solution = "\\text{No solutions exist}";
+              } else {
+                solution = data.solution;
+              }
+
+              responseBox.innerHTML = "";
+              responseBox.innerHTML += `
+              <div class="card mt-2">
+                <div class="card-header">Solutions</div>
+                <div class="card-body overflow-auto"><p>
+                    $$ ${solution} $$
+                    </p></div>
+              </div>
+              `;
+
+              MathJax.typeset();
+            });
+          }
+        })
+        .catch((err) => {
+          let responseBox = document.getElementById("response");
+
+          responseBox.innerHTML = "";
+          responseBox.innerHTML += `
+          <div class="card mt-2">
+            <div class="card-header bg-danger text-white">Error</div>
+            <div class="card-body">
+                <p>${err.message}</p>
+                <p>This is likely because you have entered an invalid expression.</p>
+            </div>
+          </div>
+          `;
+        });
+    }
+
+    function get_uni() {
       let exp = document.getElementById("expression").value;
+      let responseBox = document.getElementById("response");
+      responseBox.innerHTML = `
+      <div class="d-flex justify-content-center">
+        <div class="spinner-border" role="status">
+          <span class="visually-hidden">Loading...</span>
+        </div>
+      </div>
+      `;
       fetch(
-        `https://${"{{ HOSTNAME }}"}/api/univariate?func=${encodeURIComponent(
+        `http://${"{{ HOSTNAME }}"}/api/univariate?func=${encodeURIComponent(
           exp
         )}`
       )
@@ -78,6 +180,11 @@
             response.json().then((data) => {
               console.log(data);
               let responseBox = document.getElementById("response");
+              if (data.solution.length == 0) {
+                solution = "\\text{No solutions exist}";
+              } else {
+                solution = data.solution;
+              }
               responseBox.innerHTML = "";
               responseBox.innerHTML += `
               <div class="card mt-2">
@@ -90,7 +197,7 @@
               <div class="card mt-2">
                 <div class="card-header">Solutions (where \\(f(${data.variable}) = 0\\))</div>
                 <div class="card-body overflow-auto"><p>
-                    $$ ${data.solution} $$ 
+                    $$ ${solution} $$
                     </p></div>
               </div>
 
@@ -115,6 +222,16 @@
                 </div>
               </div>
 
+              <div class="card mt-2">
+                <div class="card-header">Limits</div>
+                <div class="card-body">
+                    <p>$$ \\lim_{${data.variable} \\rightarrow  \\infty} = ${data.limit_inf}$$</p>
+                    <p>$$ \\lim_{${data.variable} \\rightarrow  0} = ${data.limit_zero}$$</p>
+                </div>
+              </div>
+
+
+
               `;
               MathJax.typeset();
             });