From 02eb28a3085ddd6bf2058fa7e74a51c9e2afa9c3 Mon Sep 17 00:00:00 2001
From: Lennart Koopmann <lennart.koopmann@nzyme.org>
Date: Thu, 21 Mar 2024 15:41:42 -0500
Subject: [PATCH] Floor plan dimension unit selection and conversion #956

---
 .../locations/floors/FloorDetailsPage.jsx     | 10 +--
 .../locations/floors/UploadFloorPlanForm.jsx  | 68 +++++++++++++++----
 2 files changed, 59 insertions(+), 19 deletions(-)

diff --git a/web-interface/src/components/system/authentication/management/tenants/locations/floors/FloorDetailsPage.jsx b/web-interface/src/components/system/authentication/management/tenants/locations/floors/FloorDetailsPage.jsx
index 800593570..15c309ec3 100644
--- a/web-interface/src/components/system/authentication/management/tenants/locations/floors/FloorDetailsPage.jsx
+++ b/web-interface/src/components/system/authentication/management/tenants/locations/floors/FloorDetailsPage.jsx
@@ -113,10 +113,12 @@ function FloorDetailsPage() {
     }
 
     return (
-        <p>
-          Width: {numeral(plan.width_meters).format(0)} Meters / {numeral(plan.width_meters * 3.28084).format(0)} Feet,
-          Length: {numeral(plan.length_meters).format(0)} Meters / {numeral(plan.length_meters * 3.28084).format(0)} Feet
-        </p>
+        <dl>
+          <dt>Width (X Axis)</dt>
+          <dd>{numeral(plan.width_meters).format(0)} Meters / {numeral(plan.width_meters * 3.28084).format(0)} Feet</dd>
+          <dt>Length (Y Axis)</dt>
+          <dd>{numeral(plan.length_meters).format(0)} Meters / {numeral(plan.length_meters * 3.28084).format(0)} Feet</dd>
+        </dl>
     )
   }
 
diff --git a/web-interface/src/components/system/authentication/management/tenants/locations/floors/UploadFloorPlanForm.jsx b/web-interface/src/components/system/authentication/management/tenants/locations/floors/UploadFloorPlanForm.jsx
index e35250687..e33cbc5a1 100644
--- a/web-interface/src/components/system/authentication/management/tenants/locations/floors/UploadFloorPlanForm.jsx
+++ b/web-interface/src/components/system/authentication/management/tenants/locations/floors/UploadFloorPlanForm.jsx
@@ -4,18 +4,21 @@ import FormSubmitErrorMessage from "../../../../../../misc/FormSubmitErrorMessag
 
 const authenticationManagementService = new AuthenticationManagementService();
 
+const FEET_CONVERSION = 0.3048;
+
 function UploadFloorPlanForm(props) {
 
   const organizationId = props.organizationId;
-  const tenantId  = props.tenantId;
-  const locationId  = props.locationId;
-  const floorId  = props.floorId;
+  const tenantId = props.tenantId;
+  const locationId = props.locationId;
+  const floorId = props.floorId;
 
   const hasExistingPlan = props.hasExistingPlan;
   const submitText = props.submitText;
 
-  const [widthMeters, setWidthMeters] = useState("");
-  const [lengthMeters, setLengthMeters] = useState("");
+  const [unit, setUnit] = useState("Feet");
+  const [width, setWidth] = useState("")
+  const [length, setLength] = useState("");
 
   const [isUploading, setIsUploading] = useState(false);
 
@@ -29,10 +32,20 @@ function UploadFloorPlanForm(props) {
       return;
     }
 
+    // Convert unit if required.
+    let widthMeters, lengthMeters;
+    if (unit === "Feet") {
+      widthMeters = width*FEET_CONVERSION;
+      lengthMeters = length*FEET_CONVERSION;
+    } else {
+      widthMeters = width;
+      lengthMeters = length;
+    }
+
     const formData = new FormData();
     formData.append("plan", planFiles[0]);
-    formData.append("width_meters", widthMeters);
-    formData.append("length_meters", lengthMeters)
+    formData.append("width_meters", Math.round(widthMeters));
+    formData.append("length_meters", Math.round(lengthMeters));
 
     setIsUploading(true);
     authenticationManagementService.uploadFloorPlan(organizationId, tenantId, locationId, floorId, formData,
@@ -50,8 +63,18 @@ function UploadFloorPlanForm(props) {
         })
   }
 
+  const toggleUnit = (e) => {
+    e.preventDefault();
+
+    if (unit === "Feet") {
+      setUnit("Meters");
+    } else {
+      setUnit("Feet");
+    }
+  }
+
   const formIsReady = () => {
-    return planFiles.length > 0 && parseInt(widthMeters, 10) > 0 && parseInt(lengthMeters, 10) > 0 && !isUploading
+    return planFiles.length > 0 && parseInt(width, 10) > 0 && parseInt(length, 10) > 0 && !isUploading
   }
 
   return (
@@ -64,23 +87,38 @@ function UploadFloorPlanForm(props) {
                  onChange={(e) => setPlanFiles(e.target.files)}/>
         </div>
 
-        <div className="row mb-3">
+        <div className="row">
           <div className="col-6">
             <label htmlFor="width_meters" className="form-label">
-              Width (Meters)
+              Width (X Axis)
             </label>
-            <input className="form-control form-control-sm" name="width_meters" id="width_meters" type="number"
-                   onChange={(e) => setWidthMeters(e.target.value)}/>
+
+            <div className="input-group mb-3">
+              <input className="form-control" name="width_meters" id="width_meters" type="number"
+                     min={1} onChange={(e) => setWidth(e.target.value)}/>
+              <button className="btn btn-outline-secondary" type="button" onClick={toggleUnit}>
+                {unit} &nbsp;<small><i className="fa-solid fa-repeat"></i></small>
+              </button>
+            </div>
           </div>
           <div className="col-6">
             <label htmlFor="length_meters" className="form-label">
-              Length (Meters)
+              Length (Y Axis)
             </label>
-            <input className="form-control form-control-sm" name="length_meters" id="length_meters" type="number"
-                   onChange={(e) => setLengthMeters(e.target.value)}/>
+            <div className="input-group mb-3">
+              <input className="form-control" name="length_meters" id="length_meters" type="number" min={1}
+                     onChange={(e) => setLength(e.target.value)}/>
+              <button className="btn btn-outline-secondary" type="button" onClick={toggleUnit}>
+                {unit} &nbsp;<small><i className="fa-solid fa-repeat"></i></small>
+              </button>
+            </div>
           </div>
         </div>
 
+        <p className="text-muted mt-0">
+          Dimension values are converted to rounded meters internally.
+        </p>
+
         <button className="btn btn-sm btn-primary" onClick={submit} disabled={!formIsReady()}>
           {isUploading ? "Please Wait ..." : submitText}
         </button>