commit 4f0a0a8b5e3036cecbe6b84848adf9ff5fe5dcc7
author swissChili <swisschili@fastmail.com> Fri Mar 08 18:58:38 2024 -0500
committer swissChili <swisschili@fastmail.com> Fri Mar 08 18:58:38 2024 -0500
tree af807f110032f2309dcaa70aa3132946ca56d179
parent 16de322dd25405d34089197c1b1469783d268dc6

Add unit choice

frontend-impl.js

diff --git a/frontend-impl.js b/frontend-impl.js
index 95ca17f..9c7b07c 100644
--- a/frontend-impl.js
+++ b/frontend-impl.js
@@ -1,20 +1,27 @@
 const React = require("preact");
-const {useState} = require('preact/hooks');
+const { useState } = require('preact/hooks');
 
 export const UnitsApp = () => {
   const [hist, setHist] = useState([]);
   const [query, setQuery] = useState("");
   const [to, setTo] = useState("");
+  const [unitSystem, setUnitSystem] = useState('si');
 
   function doConversion(e) {
     e.preventDefault();
     console.log("conversion");
+
+    if (query == '')
+      return;
+
+    console.log("units", unitSystem);
+
+    convert(query, to, unitSystem).then(res => {
+      setHist([...hist, [query, to, res]]);
+    });
+
     setQuery('');
     setTo('');
-    
-    convert(query, to).then(res => {
-      setHist([...hist, [query, to, res]]);
-    })
   }
 
   return (
@@ -34,21 +41,37 @@
           placeholder="To"
           onChange={(val) => setTo(val.target.value)}
         ></input>
-          
+
         <input value="Convert" type="submit"></input>
       </form>
 
-          <div class="table-container">
-      <table>
-      <thead>
-      <tr><td style="width: 30%">From</td><td style="width: 15%">To</td><td style="width: 55%">Result</td></tr>
-      </thead>
-        {hist.map((entry) => (
-          <tr>{entry.map(t => <td>{t}</td>)}</tr>
-        ))}
-        <tr><td></td></tr>
-      </table>
-        </div>
+      <div class="table-container">
+        <table>
+          <thead>
+            <tr><td style="width: 30%">From</td><td style="width: 15%">To</td><td style="width: 55%">Result</td></tr>
+          </thead>
+          {hist.map((entry) => (
+            <tr>{entry.map(t => <td>{t}</td>)}</tr>
+          ))}
+          <tr><td></td></tr>
+        </table>
+      </div>
+
+      <div class="bottom-menu">
+        <span>
+          Units: &nbsp;
+          <select onChange={val => setUnitSystem(val.target.value)}>
+            <option value="si">SI</option>
+            <option value="gauss">CGS Gaussian</option>
+            <option value="esu">CGS ESU</option>
+            <option value="emu">CGS EMU</option>
+            <option value="lhu">CGS LHU</option>
+          </select>
+        </span>
+
+        <button onClick={() => setHist([])}>Clear</button>
+      </div>
+
     </>
   );
 };