Commit 5da321f8 authored by Kevin Di Lallo's avatar Kevin Di Lallo
Browse files

frontend configurable zone colors + package dependency on react-color

parent 1c7ab162

js-apps/meep-frontend/package-lock.json

+31 −0
Original line number Diff line number Diff line
@@ -938,6 +938,11 @@ 
        "lodash": "^4.17.15"

      }

    },

    "@icons/material": {

      "version": "0.2.4",

      "resolved": "https://registry.npmjs.org/@icons/material/-/material-0.2.4.tgz",

      "integrity": "sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw=="

    },

    "@jest/console": {

      "version": "24.9.0",

      "resolved": "https://registry.npmjs.org/@jest/console/-/console-24.9.0.tgz",
@@ -10866,6 +10871,11 @@ 
        }

      }

    },

    "material-colors": {

      "version": "1.2.6",

      "resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz",

      "integrity": "sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg=="

    },

    "material-components-web": {

      "version": "0.38.1",

      "resolved": "https://registry.npmjs.org/material-components-web/-/material-components-web-0.38.1.tgz",
@@ -13129,6 +13139,19 @@ 
      "resolved": "https://registry.npmjs.org/react-autobind/-/react-autobind-1.0.6.tgz",

      "integrity": "sha1-k2u1jt9ribYZxQ+C8OYXFZ/f1PE="

    },

    "react-color": {

      "version": "2.18.1",

      "resolved": "https://registry.npmjs.org/react-color/-/react-color-2.18.1.tgz",

      "integrity": "sha512-X5XpyJS6ncplZs74ak0JJoqPi+33Nzpv5RYWWxn17bslih+X7OlgmfpmGC1fNvdkK7/SGWYf1JJdn7D2n5gSuQ==",

      "requires": {

        "@icons/material": "^0.2.4",

        "lodash": "^4.17.11",

        "material-colors": "^1.2.1",

        "prop-types": "^15.5.10",

        "reactcss": "^1.2.0",

        "tinycolor2": "^1.4.1"

      }

    },

    "react-d3-axis": {

      "version": "0.1.2",

      "resolved": "https://registry.npmjs.org/react-d3-axis/-/react-d3-axis-0.1.2.tgz",
@@ -13319,6 +13342,14 @@ 
        }

      }

    },

    "reactcss": {

      "version": "1.2.3",

      "resolved": "https://registry.npmjs.org/reactcss/-/reactcss-1.2.3.tgz",

      "integrity": "sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A==",

      "requires": {

        "lodash": "^4.0.1"

      }

    },

    "read-pkg": {

      "version": "3.0.0",

      "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",

js-apps/meep-frontend/package.json

+1 −0
Original line number Diff line number Diff line
@@ -58,6 +58,7 @@ 
    "prop-types": "15.6.2",

    "react": "^16.8.6",

    "react-autobind": "^1.0.6",

    "react-color": "^2.18.1",

    "react-d3-axis": "^0.1.2",

    "react-d3-graph": "^2.0.2",

    "react-dom": "^16.8.6",

js-apps/meep-frontend/src/js/containers/cfg/cfg-network-element-container.js

+70 −5
Original line number Diff line number Diff line
@@ -23,6 +23,8 @@ import { Button } from '@rmwc/button'; 
import { TextField, TextFieldIcon, TextFieldHelperText } from '@rmwc/textfield';

import { Checkbox } from '@rmwc/checkbox';

import { Typography } from '@rmwc/typography';

import { Icon } from '@rmwc/icon';

import { ChromePicker } from 'react-color';



import { updateObject } from '../../util/object-util';

import { createUniqueName } from '../../util/elem-utils';
@@ -62,6 +64,7 @@ import { 
  FIELD_CHART_LOC,

  FIELD_CHART_VAL,

  FIELD_CHART_GROUP,

  FIELD_META_DISPLAY_MAP_COLOR,

  getElemFieldVal,

  setElemFieldVal,

  getElemFieldErr,
@@ -354,6 +357,16 @@ const validateProtocol = protocol => { 
  return null;

};



const validateColor = val => {

  if (val === '') {

    return null;

  }

  if (!val.match(/^#[0-9A-Fa-f]{6}$/)) {

    return 'Invalid hex format';

  }

  return null;

};



// Validates list of similar comma-separated entries

const validateEntries = validator => entries => {

  return _.chain(entries.split(','))
@@ -659,12 +672,32 @@ const UserChartFields = ({ element, onUpdate }) => { 
  );

};



const ColorIcon = (color) => {

  return (

    <Icon

      icon={

        <div

          style={{

            background: color,

            width: '24px',

            height: '24px',

            border: '1px solid',

            borderRadius: '5px',

            borderColor: '#4d4d4d'

          }}

        />

      }

    />

  );

};



// Display element-specific form fields

const TypeRelatedFormFields = ({ onUpdate, onEditLocation, onEditPath, element }) => {

  var type = getElemFieldVal(element, FIELD_TYPE);

  var isExternal = getElemFieldVal(element, FIELD_IS_EXTERNAL);

  var chartEnabled = getElemFieldVal(element, FIELD_CHART_ENABLED);

  var eopMode = getElemFieldVal(element, FIELD_GEO_EOP_MODE) || '';

  var color = getElemFieldVal(element, FIELD_META_DISPLAY_MAP_COLOR);



  switch (type) {

  case ELEMENT_TYPE_SCENARIO:
@@ -726,11 +759,38 @@ const TypeRelatedFormFields = ({ onUpdate, onEditLocation, onEditPath, element } 
    );

  case ELEMENT_TYPE_ZONE:

    return (

      <>

        <NCGroups

          onUpdate={onUpdate}

          element={element}

          prefixes={[PREFIX_INTRA_ZONE]}

        />

        <Grid style={{position: 'relative'}}>

          <CfgTextFieldCell

            span={6}

            icon={ColorIcon(color)}

            onIconClick={() => {

              var colorErr = getElemFieldErr(element, FIELD_META_DISPLAY_MAP_COLOR);

              element.editColor = !element.editColor;

              onUpdate(FIELD_META_DISPLAY_MAP_COLOR, color, colorErr);

            }}

            onUpdate={onUpdate}

            element={element}

            validate={validateColor}

            label="Zone Color"

            fieldName={FIELD_META_DISPLAY_MAP_COLOR}

          />

          { !element.editColor ? null :

            <div style={ styles.popover }>

              <ChromePicker

                color={color}

                disableAlpha={true}

                onChange={(color) => {onUpdate(FIELD_META_DISPLAY_MAP_COLOR, color.hex.toUpperCase(), null);}}

              />

            </div>

          }

        </Grid>

      </>

    );

  case ELEMENT_TYPE_POA:

    return (
@@ -1503,6 +1563,11 @@ const styles = { 
  },

  select: {

    width: '100%'

  },

  popover: {

    position: 'absolute',

    top: '80px',

    zIndex: '2'

  }

};

js-apps/meep-frontend/src/js/containers/cfg/cfg-page-container.js

+3 −1
Original line number Diff line number Diff line
@@ -76,7 +76,8 @@ import { 
  FIELD_EXT_PORT,

  FIELD_GPU_COUNT,

  FIELD_GPU_TYPE,

  getElemFieldVal

  getElemFieldVal,

  resetElem

} from '../../util/elem-utils';



import { pipe, filter } from '../../util/functional';
@@ -122,6 +123,7 @@ class CfgPageContainer extends Component { 
  onEditElement(element) {

    if (element !== null) {

      if (!this.props.configuredElement || (element.id !== this.props.configuredElement.id)) {

        resetElem(element);

        this.props.cfgElemEdit(element);

      }

    } else {

js-apps/meep-frontend/src/js/util/elem-utils.js

+10 −0
Original line number Diff line number Diff line
@@ -135,8 +135,18 @@ export const setElemFieldErr = (elem, field, err) => { 
  }

};



export const resetElem = (elem) => {

  if (elem) {

    elem.editColor = false;

  }

};



export const createElem = name => {

  var elem = {};

  // State

  resetElem(elem);



  // Fields

  setElemFieldVal(elem, FIELD_TYPE, '');

  setElemFieldVal(elem, FIELD_PARENT, '');

  setElemFieldVal(elem, FIELD_NAME, name);