react-widgetconfigurator/lib/WidgetSelection.js

A React app for to generate out of box widgets

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = undefined;

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _class;

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _reactstrap = require("reactstrap");

var _hero = require("./Images/hero.jpg");

var _hero2 = _interopRequireDefault(_hero);

var _aculist_logo_stacked = require("./Images/aculist_logo_stacked.jpg");

var _aculist_logo_stacked2 = _interopRequireDefault(_aculist_logo_stacked);

var _reactAutosuggest = require("react-autosuggest");

var _reactAutosuggest2 = _interopRequireDefault(_reactAutosuggest);

var _OutofBoxWidget = require("./OutofBoxWidget");

var _OutofBoxWidget2 = _interopRequireDefault(_OutofBoxWidget);

var _uniqueId = require("lodash/uniqueId");

var _uniqueId2 = _interopRequireDefault(_uniqueId);

var _findIndex = require("lodash/findIndex");

var _findIndex2 = _interopRequireDefault(_findIndex);

var _SettingsModal = require("./SettingsModal");

var _SettingsModal2 = _interopRequireDefault(_SettingsModal);

var _WidgetTabs = require("./WidgetTabs");

var _WidgetTabs2 = _interopRequireDefault(_WidgetTabs);

var _WidgetStore = require("./WidgetStore");

var _WidgetStore2 = _interopRequireDefault(_WidgetStore);

var _mobxReact = require("mobx-react");

var _ViewCart = require("./ViewCart");

var _ViewCart2 = _interopRequireDefault(_ViewCart);

var _Ad = require("./Ad.js");

var _Ad2 = _interopRequireDefault(_Ad);

var _reactAzureAdb2c = require("react-azure-adb2c");

var _reactAzureAdb2c2 = _interopRequireDefault(_reactAzureAdb2c);

var _Auth = require("./Auth");

var _Auth2 = _interopRequireDefault(_Auth);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var test = _react2.default.createContext();

var WidgetSelection = (0, _mobxReact.observer)(_class = function (_Component) {
  _inherits(WidgetSelection, _Component);

  function WidgetSelection(props) {
    _classCallCheck(this, WidgetSelection);

    var _this = _possibleConstructorReturn(this, (WidgetSelection.__proto__ || Object.getPrototypeOf(WidgetSelection)).call(this, props));

    _this.onChange = function (event, _ref) {
      var newValue = _ref.newValue,
          method = _ref.method;

      console.log('btn random7');
      _this.setState({
        value: newValue
      });
    };

    _this.ontypeChange = function (event, _ref2) {
      var newValue = _ref2.newValue;

      // console.log('btn random8');
      _this.setState({
        typeValue: newValue
      });
    };

    _this.onnameChange = function (event, _ref3) {
      var newValue = _ref3.newValue;

      // console.log('btn random9');
      _this.setState({
        nameValue: newValue
      });
    };

    _this.ontypeSuggestionsFetchRequested = function (_ref4) {
      var value = _ref4.value;

      if (_this.state.typeSuggestions != _this.getSuggestions(value)) {
        _this.setState({
          typeSuggestions: _this.getSuggestions(value)
        });
      }
    };

    _this.ontypeSuggestionSelected = function (event, _ref5) {
      var suggestion = _ref5.suggestion;

      // console.log('btn random12');
      console.log('selection', suggestion.countyfilter);
      var widgetselections = _this.state.widgetselections;
      var kpiwidgetselections = _this.state.kpiwidgetselections;
      widgetselections.geo = [suggestion.type + ":" + suggestion.name + ":" + suggestion.countyfilter];
      kpiwidgetselections.geo = [suggestion.type + ":" + suggestion.name + ":" + suggestion.countyfilter];
      var btnactive = _this.state.btnactive;
      var selectedGeo = widgetselections.geo;
      // const auth = new Auth();
      console.log(_this.props.usertoken);
      widgetselections.usertoken = _this.props.usertoken;
      kpiwidgetselections.usertoken = _this.props.usertoken;

      _this.setState({
        nameValue: suggestion.type + "-" + suggestion.name, typeValue: suggestion.type + "-" + suggestion.name,
        widgetselections: widgetselections, btnactive: btnactive, selectedGeo: selectedGeo, kpiwidgetselections: kpiwidgetselections
      });
    };

    _this.ontypeSuggestionsClearRequested = function () {

      if (_this.state.typeSuggestions != []) {
        // this.setState({
        //   typeSuggestions: []
        // });
      }
    };

    _this.onnameSuggestionSelected = function (event, _ref6) {
      var suggestion = _ref6.suggestion;

      console.log('btn random15');
      _this.setState({
        typeValue: suggestion.type
      });
    };

    _this.loadgeographynames();
    _this.state = {
      viewcart: false,
      widgetselections: {
        periodtype: "Year",
        period: "10",
        geo: "",
        usertoken: ""
      },
      chartselections: {
        colors: ['#fdb921', '#0033a0', '#7ED321', '#1DB2B8'], charttype: ['bar', 'spline'], download: true
      },
      kpiwidgetselections: { measure: "",
        classtype: "",
        aculogo: "",
        geo: [],
        displaycolumns: "",
        themecolor: 'black',
        title: 'false',
        tokenid: 'rhone',
        info: "",
        measurelogo: false, usertoken: "" },

      geographies: [],
      selectedGeo: "",
      btnactive: "1",
      // btnsnapshotactive: "",
      // geo: "",
      value: '',
      typeValue: '',
      typeSuggestions: [],
      nameValue: '',
      nameSuggestions: [],

      widgetPeriodBtns: [{
        id: "periodBtnToggle-1",
        isOpen: false,
        isActive: true,
        label: "Yearly",
        value: 'Year',
        options: [{
          id: "pty-1",
          type: "3",
          value: 3,
          active: false
          // enabled: true,
        }, {
          id: "pty-2",
          type: "5",
          value: 5,
          active: false
          //   enabled: true,
        }, {
          id: "pty-3",
          type: "7",
          value: 7,
          active: false
          //  enabled: false,
        }, {
          id: "pty-4",
          type: "10",
          value: 10,
          active: true
          //  enabled: false,
        }]
      }, {
        label: "Quarterly",
        id: "periodBtnToggle-2",
        isOpen: false,
        isActive: false,
        value: 'Quarter',
        options: [{
          id: "ptq-1",
          type: "4",
          value: 4,
          active: true
          //  enabled: true,
        }, {
          id: "ptq-2",
          type: "8",
          value: 8,
          active: false
          //enabled: true,
        }, {
          id: "ptq-3",
          type: "12",
          value: 12,
          active: false
          //  enabled: false,
        }]
      }, {
        label: "Monthly",
        id: "periodBtnToggle-3",
        isOpen: false,
        isActive: false,
        value: 'Month',
        options: [{
          id: "ptm-1",
          type: "12",
          value: 12,
          active: true
          //   enabled: false,
        }, {
          id: "ptm-2",
          type: "24",
          value: 24,
          active: false
          //  enabled: true,
        }]
      }]
    };
    _this.viewCart = _this.viewCart.bind(_this);
    return _this;
  }

  _createClass(WidgetSelection, [{
    key: "loadgeographynames",
    value: function loadgeographynames() {
      var _this2 = this;

      fetch('https://bi.aculist.com/BIEntity/vGeography').then(function (response) {
        return response.json();
      }).then(function (items) {

        var values = items.value.filter(function (g) {
          return g.GeographyType.toLowerCase().indexOf('school') == -1;
        }).map(function (val) {
          return {
            type: val.GeographyType.toLowerCase() == "postalcode" ? 'Zip' : val.GeographyType,
            name: val.GeographyName,
            countyfilter: val.CountyName
          };
        });
        _this2.state.geographies = values;
      });
    }
  }, {
    key: "escapeRegexCharacters",
    value: function escapeRegexCharacters(str) {
      return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
    }
  }, {
    key: "getSuggestions",
    value: function getSuggestions(value) {

      var escapedValue = this.escapeRegexCharacters(value.trim());
      var regex = new RegExp('^' + escapedValue, 'i');

      return this.state.geographies.filter(function (geo) {
        return regex.test(geo.type) || regex.test(geo.name);
      });
    }
  }, {
    key: "getSuggestiontype",
    value: function getSuggestiontype(suggestion) {
      // console.log('btn random3');
      return suggestion.type;
    }
  }, {
    key: "getSuggestionname",
    value: function getSuggestionname(suggestion) {
      // console.log('btn random4');
      return suggestion.name;
    }
  }, {
    key: "renderSuggestion",
    value: function renderSuggestion(suggestion) {
      // console.log('btn random5');
      return _react2.default.createElement(
        "span",
        null,
        suggestion.type,
        "  -  ",
        suggestion.name,
        " (",
        suggestion.countyfilter,
        ")"
      );
    }
  }, {
    key: "_onTrendsSelect",
    value: function _onTrendsSelect(trend) {
      // console.log('btn random6');
      var btnactive = trend;
      this.setState({ btnactive: btnactive });
    }

    // onnameSuggestionsClearRequested = () => {
    //   console.log('btn random11');
    //   this.setState({
    //     nameSuggestions: []
    //   });
    // };

    // onnameSuggestionsFetchRequested = ({ value }) => {
    //   console.log('btn random13');
    //   this.setState({
    //     nameSuggestions: this.getSuggestions(value)
    //   });
    // };

  }, {
    key: "_periodTypeDropdownToggle",
    value: function _periodTypeDropdownToggle(btn) {
      console.log('btn1');
      var widgetPeriodBtnsState = this.state.widgetPeriodBtns;

      var index = (0, _findIndex2.default)(widgetPeriodBtnsState, function (b) {
        return b.id === btn.id;
      });

      widgetPeriodBtnsState[index].isOpen = !widgetPeriodBtnsState[index].isOpen;

      this.setState({ widgetPeriodBtnsState: widgetPeriodBtnsState });
    }
  }, {
    key: "_periodTypeButtonClick",
    value: function _periodTypeButtonClick(btn) {

      var widgetPeriodBtnsState = this.state.widgetPeriodBtns;
      var widgetselections = this.state.widgetselections;

      for (var b in widgetPeriodBtnsState) {
        widgetPeriodBtnsState[b].isActive = false;
      }

      var index = (0, _findIndex2.default)(widgetPeriodBtnsState, function (b) {
        return b.id === btn.id;
      });
      var activeTypeIndex = (0, _findIndex2.default)(widgetPeriodBtnsState[index].options, function (type) {
        return type.active === true;
      });

      widgetselections.periodtype = widgetPeriodBtnsState[index].value;
      widgetselections.period = widgetPeriodBtnsState[index].options[activeTypeIndex].type;

      widgetPeriodBtnsState[index].isActive = !widgetPeriodBtnsState[index].isActive;

      this.setState({ widgetPeriodBtnsState: widgetPeriodBtnsState, widgetselections: widgetselections });
    }
  }, {
    key: "_periodTypeOptionClick",
    value: function _periodTypeOptionClick(periodval, btn) {
      console.log('btn3');
      var widgetPeriodBtnsState = this.state.widgetPeriodBtns;
      var widgetselections = this.state.widgetselections;

      for (var b in widgetPeriodBtnsState) {
        widgetPeriodBtnsState[b].isActive = false;
      }

      var parentindex = (0, _findIndex2.default)(widgetPeriodBtnsState, function (b) {
        return b.id === btn.id;
      });
      widgetPeriodBtnsState[parentindex].isActive = !widgetPeriodBtnsState[parentindex].isActive;
      var activeoptionindex = (0, _findIndex2.default)(widgetPeriodBtnsState[parentindex].options, function (o) {
        return o.id === periodval.id;
      });

      for (var record in widgetPeriodBtnsState[parentindex].options) {
        widgetPeriodBtnsState[parentindex].options[record].active = false;
      }
      widgetPeriodBtnsState[parentindex].options[activeoptionindex].active = !widgetPeriodBtnsState[parentindex].options[activeoptionindex].active;

      widgetselections.periodtype = widgetPeriodBtnsState[parentindex].value;
      widgetselections.period = widgetPeriodBtnsState[parentindex].options[activeoptionindex].type;

      this.setState({ widgetPeriodBtnsState: widgetPeriodBtnsState, widgetselections: widgetselections });
    }
  }, {
    key: "applyChildSettings",
    value: function applyChildSettings(colors, charttypes) {
      var chartselections = this.state.chartselections;
      var charttype = this.state.charttype;
      chartselections.colors = colors;
      //chartselections.charttype=charttypes;
      this.setState({
        chartselections: chartselections
      });
    }
  }, {
    key: "viewCart",
    value: function viewCart() {
      console.log('test');
      window.open('https://aculist-widget-assets.azureedge.net/Widgetdocumentation.docx');
      // this.setState({
      //   viewcart:true
      // });
    }
  }, {
    key: "render",
    value: function render() {
      var _this3 = this;

      var auth = new _Auth2.default();
      // let authuser=auth.currentUser().emails[0];


      var _state = this.state,
          typeValue = _state.typeValue,
          typeSuggestions = _state.typeSuggestions,
          nameValue = _state.nameValue,
          nameSuggestions = _state.nameSuggestions;

      var typeInputProps = {
        placeholder: "Type Geography...",
        value: typeValue,
        onChange: this.ontypeChange
      };
      // const nameInputProps = {
      //   placeholder: "name",
      //   value: nameValue,
      //   onChange: this.onnameChange
      // };
      var assets = "";

      var sectionStyle = {
        width: "100%",
        height: "180px",
        backgroundImage: "url(" + _hero2.default + ")"
      };
      var logoStyle = {
        display: 'inline-block',
        height: '52px',
        width: '147px',
        backgroundImage: "url('https://aculist-widget-assets.azureedge.net/aculist-logo.png')"
      };

      var PeriodDropdownToggleButtons = this.state.widgetPeriodBtns.map(function (btn) {
        var BtnOptions = btn.options.map(function (option) {
          //  if(!option.enabled){
          //   return true;
          // }  

          return _react2.default.createElement(
            _reactstrap.DropdownItem,
            { onClick: _this3._periodTypeOptionClick.bind(_this3, option, btn), key: (0, _uniqueId2.default)("periodToggleOption_"), className: "mx-0 periodType pl-0 " + (option.active === true ? "isActive" : "") },
            option.type
          );
        }.bind(_this3));

        return _react2.default.createElement(
          _reactstrap.ButtonDropdown,
          { key: (0, _uniqueId2.default)("periodToggle_"), id: btn.id, isOpen: btn.isOpen, toggle: _this3._periodTypeDropdownToggle.bind(_this3, btn) },
          _react2.default.createElement(
            _reactstrap.Button,
            { className: "mr-0 periodbtn", active: btn.isActive, onClick: _this3._periodTypeButtonClick.bind(_this3, btn) },
            btn.label
          ),
          _react2.default.createElement(_reactstrap.DropdownToggle, { caret: true }),
          _react2.default.createElement(
            _reactstrap.DropdownMenu,
            null,
            BtnOptions
          )
        );
      });

      var widget = this.state.widgetselections.geo !== "" ? _react2.default.createElement(_WidgetTabs2.default, { widgetselections: this.state.widgetselections, kpiwidgetselections: this.state.kpiwidgetselections, chartselections: this.state.chartselections })
      // <OutofBoxWidget widgetselections={this.state.widgetselections} chartselections={this.state.chartselections}/>
      : "";
      var viewcart = this.state.viewcart;

      var widgetdisplay =
      //viewcart===true?<ViewCart/>:
      _react2.default.createElement(
        "div",
        null,
        _react2.default.createElement(
          "div",
          { className: "justify-content-center optionsbar" },
          _react2.default.createElement(
            "div",
            { className: "cartholder px-2", onClick: this.viewCart },
            _react2.default.createElement("i", { className: "fa fa-question-circle widgetcart" })
          ),
          _react2.default.createElement(
            _reactstrap.Row,
            { className: "bi-geoselection autosuggestcontainer mb-0" },
            _react2.default.createElement(_reactAutosuggest2.default, {
              suggestions: typeSuggestions,
              onSuggestionsFetchRequested: this.ontypeSuggestionsFetchRequested,
              onSuggestionsClearRequested: this.ontypeSuggestionsClearRequested,
              onSuggestionSelected: this.ontypeSuggestionSelected,
              getSuggestionValue: this.getSuggestiontype.bind(this),
              renderSuggestion: this.renderSuggestion.bind(this),
              inputProps: typeInputProps
            }),
            _react2.default.createElement(
              _reactstrap.ButtonGroup,
              null,
              PeriodDropdownToggleButtons
            ),
            _react2.default.createElement(_SettingsModal2.default, { ChildSettings: this.applyChildSettings.bind(this) })
          )
        ),
        _react2.default.createElement(
          _reactstrap.Container,
          {
            fluid: true,
            className: this.state.selectedGeo === "" ? "bi-hidden" : "px-0" },
          widget
        ),
        _react2.default.createElement(
          _reactstrap.Container,
          {
            fluid: true,
            className: this.state.selectedGeo === "" ? "px-0" : "bi-hidden" },
          _react2.default.createElement(_Ad2.default, null)
        )
      );

      return _react2.default.createElement(
        "div",
        { className: "container-fluid responsive body-content px-0" },
        _react2.default.createElement(
          "div",
          null,
          _react2.default.createElement(
            _reactstrap.Container,
            { style: sectionStyle, fluid: true },
            _react2.default.createElement(
              _reactstrap.Row,
              null,
              _react2.default.createElement(
                _reactstrap.Col,
                { xs: "6" },
                _react2.default.createElement("span", { className: "logo", style: logoStyle })
              ),
              _react2.default.createElement(
                _reactstrap.Col,
                { xs: "6", className: "text-right auth" },
                "Hello,  !    ",
                _react2.default.createElement(
                  "a",
                  {
                    className: "App-link",
                    href: "/", onClick: function onClick() {
                      return auth.logout();
                    }
                  },
                  "Sign Out"
                )
              )
            ),
            _react2.default.createElement(
              _reactstrap.Row,
              { className: "text-center" },
              _react2.default.createElement(
                _reactstrap.Col,
                { sm: "12", md: { size: 6, offset: 3 } },
                " ",
                _react2.default.createElement(
                  "div",
                  { className: "bi-bannertop1 pb-0" },
                  "Web Widget Configurator"
                ),
                _react2.default.createElement(
                  "div",
                  { className: "bi-bannerbottom1 pt-0" },
                  "Neighborhood trends and stats updated daily"
                )
              )
            )
          )
        ),
        widgetdisplay
      );
    }
  }]);

  return WidgetSelection;
}(_react.Component)) || _class;

exports.default = WidgetSelection;
module.exports = exports["default"];