Measure plugin support for imperial units

app/static/app/js/classes/Units.js

@@ -81,42 +81,42 @@ const units = {
       factor: 1 / (0.3048 * 0.3048),
       abbr: 'ft²',
       round: 2,
-      label: _("Squared Feet"),
+      label: _("Square Feet"),
       type: types.AREA
     },
     sqfeet_us: {
         factor: Math.pow(3937 / 1200, 2),
         abbr: 'ft² (US)',
         round: 2,
-        label: _("Squared Feet"),
+        label: _("Square Feet"),
         type: types.AREA
     },
     sqmeters: {
       factor: 1,
       abbr: 'm²',
       round: 2,
-      label: _("Squared Meters"),
+      label: _("Square Meters"),
       type: types.AREA
     },
     sqkilometers: {
         factor: 0.000001,
         abbr: 'km²',
         round: 5,
-        label: _("Squared Kilometers"),
+        label: _("Square Kilometers"),
         type: types.AREA
     },
     sqmiles: {
       factor: Math.pow((1 / 0.3048) / 5280, 2),
       abbr: 'mi²',
       round: 5,
-      label: _("Squared Miles"),
+      label: _("Square Miles"),
       type: types.AREA
     },
     sqmiles_us: {
         factor: Math.pow((3937 / 1200) / 5280, 2),
         abbr: 'mi² (US)',
         round: 5,
-        label: _("Squared Miles"),
+        label: _("Square Miles"),
         type: types.AREA
     },
     cbmeters:{

coreplugins/measure/public/MeasurePopup.jsx

@@ -4,7 +4,7 @@ import './MeasurePopup.scss';
 import Utils from 'webodm/classes/Utils';
 import Workers from 'webodm/classes/Workers';
 import { _, interpolate } from 'webodm/classes/gettext';
-
+import { systems, unitSystem, getUnitSystem } from 'webodm/classes/Units';
 import $ from 'jquery';
 import L from 'leaflet';
 
@@ -50,15 +50,19 @@ export default class MeasurePopup extends React.Component {
   }
 
   getProperties(){
-    const result = {
-      Length: this.props.model.length,
-      Area: this.props.model.area
-    };
+    const us = systems[this.lastUnitSystem];
 
+    const result = {
+      Length: us.length(this.props.model.length).value,
+      Area: us.area(this.props.model.area).value
+    };
+    
     if (this.state.volume !== null && this.state.volume !== false){
-        result.Volume = this.state.volume;
+        result.Volume = us.volume(this.state.volume).value;
         result.BaseSurface = this.state.baseMethod;
     }
+
+    result.UnitSystem = this.lastUnitSystem;
     
     return result;
   }
@@ -167,6 +171,9 @@ export default class MeasurePopup extends React.Component {
 
   render(){
     const { volume, error, featureType } = this.state;
+    const us = unitSystem();
+    this.lastUnitSystem = getUnitSystem();
+
     const baseMethods = [
       {label: _("Triangulate"), method: 'triangulate'},
       {label: _("Plane"), method: 'plane'},
@@ -175,12 +182,12 @@ export default class MeasurePopup extends React.Component {
       {label: _("Lowest"), method: 'lowest'}];
 
     return (<div className="plugin-measure popup">
-        {featureType == "Polygon" && <p>{_("Area:")} {this.props.model.areaDisplay}</p>}
         {featureType == "Polygon" && <p>{_("Perimeter:")} {this.props.model.lengthDisplay}</p>}
+        {featureType == "Polygon" && <p>{_("Area:")} {this.props.model.areaDisplay}</p>}
         {featureType == "Polygon" && volume === null && !error && <p>{_("Volume:")} <i>{_("computing…")}</i> <i className="fa fa-cog fa-spin fa-fw" /></p>}
         {typeof volume === "number" ? 
             [
-              <p>{_("Volume:")} {volume.toFixed("2")} {_("Cubic Meters")} ({(volume * 35.3147).toFixed(2)} {_("Cubic Feet")})</p>,
+              <p>{_("Volume:")} {us.volume(volume).toString()}</p>,
               <p className="base-control">{_("Base surface:")} 
                 <select className="form-control" value={this.state.baseMethod} onChange={this.handleBaseMethodChange}>
                   {baseMethods.map(bm => 

coreplugins/measure/public/app.jsx

@@ -8,6 +8,7 @@ import ReactDOM from 'ReactDOM';
 import React from 'React';
 import $ from 'jquery';
 import { _, get_format } from 'webodm/classes/gettext';
+import { unitSystem } from 'webodm/classes/Units';
 
 export default class App{
     constructor(map){
@@ -52,6 +53,15 @@ export default class App{
 
         // measure.options.labels.
 
+        measure._getMeasurementDisplayStrings = measurement => {
+          const us = unitSystem();
+
+          return {
+            lengthDisplay: us.length(measurement.length).toString(),
+            areaDisplay: us.area(measurement.area).toString()
+          };
+        };
+
         const $btnExport = $(`<br/><a href='#' class='js-start start'>${_("Export Measurements")}</a>`);
         $btnExport.appendTo($(measure.$startPrompt).children("ul.tasks"));
         $btnExport.on('click', () => {