Started adding app-wide unit selector logic

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

@@ -0,0 +1,69 @@
+import { _ } from '../classes/gettext';
+
+const units = {
+    acres: {
+      factor: 0.00024711,
+      label: _('Acres'),
+      abbr: 'ac'
+    },
+    feet: {
+      factor: 3.2808,
+      label: _('Feet'),
+      abbr: 'ft'
+    },
+    hectares: {
+      factor: 0.0001,
+      label: _('Hectares'),
+      abbr: 'ha'
+    },
+    meters: {
+      factor: 1,
+      label: _('Meters'),
+      abbr: 'm'
+    },
+    kilometers: {
+        factor: 0.001,
+        label: _('Kilometers'),
+        abbr: 'km'
+    },
+    centimeters: {
+      factor: 100,
+      label: _('Centimeters'),
+      abbr: 'cm'
+    },
+    miles: {
+      factor: 3.2808 / 5280,
+      label: _('Miles'),
+      abbr: 'mi'
+    },
+    sqfeet: {
+      factor: 10.7639,
+      label: _('Square Feet'),
+      abbr: 'ft²'
+    },
+    sqmeters: {
+      factor: 1,
+      label: _('Square Meters'),
+      abbr: 'm²'
+    },
+    sqmiles: {
+      factor: 0.000000386102,
+      label: _('Square Miles'),
+      abbr: 'mi²'
+    }
+  };
+
+const systems = {
+    metric: {
+        length: [units.kilometers, units.meters, units.centimeters],
+        area: [units.sqmeters]
+    }
+
+    // TODO
+}
+
+export default {
+    // to be used on individual strings
+    
+};
+

app/static/app/js/components/UnitSelector.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+class UnitSelector extends React.Component {
+  static propTypes = {
+  }
+
+  constructor(props){
+    super(props);
+
+    this.state = {
+        system: window.getPreferredUnitSystem()
+    }
+  }
+  
+  handleChange = e => {
+    this.setState({system: e.target.value});
+    window.setPreferredUnitSystem(e.target.value);
+  };
+
+  render() {
+    return (
+      <select value={this.state.system} onChange={this.handleChange}>
+            <option value="metric" key={}></option>
+        </select>
+    );
+  }
+}
+
+export default UnitSelector;

app/static/app/js/components/tests/UnitSelector.test.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import UnitSelector from '../UnitSelector';
+
+describe('<UnitSelector />', () => {
+  it('renders without exploding', () => {
+    const wrapper = shallow(<UnitSelector />);
+    expect(wrapper.exists()).toBe(true);
+  })
+});

app/static/app/js/main.jsx

@@ -26,6 +26,14 @@ window.React = React;
 // Expose set locale function globally
 window.setLocale = setLocale;
 
+// Expose to allow every part of the app to access this information
+window.getPreferredUnitSystem = () => {
+    return localStorage.getItem("preferred_unit_system") || "metric";
+};
+window.setPreferredUnitSystem = (system) => {
+    localStorage.setItem("preferred_unit_system", system);
+};
+
 $(function(){
     PluginsAPI.App.triggerReady();
 });