{"ast":null,"code":"import _regeneratorRuntime from\"C:/laragon/www/iot.mksolusi/DriverOPCDA/frontend/node_modules/babel-preset-react-app/node_modules/@babel/runtime/regenerator\";import _asyncToGenerator from\"C:/laragon/www/iot.mksolusi/DriverOPCDA/frontend/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/asyncToGenerator\";import _classCallCheck from\"C:/laragon/www/iot.mksolusi/DriverOPCDA/frontend/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/classCallCheck\";import _createClass from\"C:/laragon/www/iot.mksolusi/DriverOPCDA/frontend/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/createClass\";import _assertThisInitialized from\"C:/laragon/www/iot.mksolusi/DriverOPCDA/frontend/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/assertThisInitialized\";import _inherits from\"C:/laragon/www/iot.mksolusi/DriverOPCDA/frontend/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/inherits\";import _createSuper from\"C:/laragon/www/iot.mksolusi/DriverOPCDA/frontend/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/createSuper\";import React from\"react\";import{withStyles}from\"@material-ui/core/styles\";import{Grid,Box,MenuItem}from\"@material-ui/core\";import Button from\"@material-ui/core/Button\";import{withRouter}from\"react-router-dom\";import{ValidatorForm,TextValidator,SelectValidator}from\"react-material-ui-form-validator\";import TagGroupServices from\"./TagGroupServicesClass\";import socketIOClient from\"socket.io-client\";import{jsx as _jsx}from\"react/jsx-runtime\";import{jsxs as _jsxs}from\"react/jsx-runtime\";var ENDPOINT=process.env.REACT_APP_BASE_URL;var tagGroupServ=new TagGroupServices();var socket={};var useStyles=function useStyles(theme){return{root:{\"& .MuiTextField-root\":{margin:theme.spacing(1),width:\"90%\"}},gridColor:{background:\"white\"},button:{marginTop:theme.spacing(1),color:\"#ffffff\",background:theme.palette.success.main,\"&:hover\":{backgroundColor:theme.palette.success.dark,borderColor:theme.palette.success.light,boxShadow:\"none\"}},buttonGetServer:{marginTop:theme.spacing(1),color:\"#ffffff\",background:theme.palette.primary.main,\"&:hover\":{backgroundColor:theme.palette.primary.dark,borderColor:theme.palette.primary.light,boxShadow:\"none\"}},form:{background:\"white\"},textField:{width:\"100%\",marginTop:10},selectField:{width:\"100%\",marginTop:20}};};var TagGroupFormAdd=/*#__PURE__*/function(_React$Component){_inherits(TagGroupFormAdd,_React$Component);var _super=_createSuper(TagGroupFormAdd);function TagGroupFormAdd(props){var _this;_classCallCheck(this,TagGroupFormAdd);_this=_super.call(this,props);_this.state={tagGroup:{TagGroupName:\"\",TagTableName:\"\",TagGroupServer:\"\",Description:\"\",Status:false},servers:[[]]};_this.handleChange=function(event){var tagGroup=_this.state.tagGroup;tagGroup[event.target.name]=event.target.value;_this.setState({tagGroup:tagGroup});};_this.handleSubmit=/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(){var tagGroup,paramInsert,resp;return _regeneratorRuntime.wrap(function _callee$(_context){while(1){switch(_context.prev=_context.next){case 0:tagGroup=_this.state.tagGroup;paramInsert={TagGroupName:tagGroup.TagGroupName,TagTableName:tagGroup.TagTableName,TagGroupServer:tagGroup.TagGroupServer,Description:tagGroup.Description,Status:tagGroup.Status};_context.next=4;return tagGroupServ.store(paramInsert);case 4:resp=_context.sent;// save role data\nif(resp.success){alert(resp.message);_this.onSuccess();}else{alert(resp.message);}case 6:case\"end\":return _context.stop();}}},_callee);}));_this.onSuccess=_this.onSuccess.bind(_assertThisInitialized(_this));_this._isMounted=false;_this._servers=[];return _this;}_createClass(TagGroupFormAdd,[{key:\"onSuccess\",value:function onSuccess(e){this.props.history.push(\"/opc/tag-groups\");}},{key:\"componentDidMount\",value:function componentDidMount(){var _this2=this;socket=socketIOClient(ENDPOINT);console.log(this._isMounted);if(this._isMounted!==true){if(socket)socket.on(\"toClientServers\",function(data){console.log(\"GET SERVERS\");console.log(data);_this2.setState({servers:data});});this._isMounted=true;}}},{key:\"componentWillUnmount\",value:function componentWillUnmount(){this._isMounted=false;socket.removeAllListeners(\"toClientServers\");console.log(\"UNMOUNT\");}},{key:\"getServers\",value:function(){var _getServers=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(){var resp,srvrs;return _regeneratorRuntime.wrap(function _callee2$(_context2){while(1){switch(_context2.prev=_context2.next){case 0:_context2.next=2;return tagGroupServ.getServers();case 2:_context2.next=4;return tagGroupServ.getServers();case 4:resp=_context2.sent;srvrs=[];srvrs.push(resp);console.log(srvrs);this.setState({servers:srvrs});case 9:case\"end\":return _context2.stop();}}},_callee2,this);}));function getServers(){return _getServers.apply(this,arguments);}return getServers;}()},{key:\"render\",value:function render(){var _this3=this;var classes=this.props.classes;var tagGroup=this.state.tagGroup;return/*#__PURE__*/_jsx(Grid,{container:true,spacing:1,children:/*#__PURE__*/_jsx(Grid,{item:true,lg:5,xs:12,children:/*#__PURE__*/_jsx(Box,{p:3,boxShadow:3,className:classes.form,children:/*#__PURE__*/_jsxs(ValidatorForm,{ref:\"form\",onSubmit:this.handleSubmit,onError:function onError(errors){return console.log(errors);},children:[/*#__PURE__*/_jsx(TextValidator,{label:\"Tag Group Name\",onChange:this.handleChange,name:\"TagGroupName\",value:tagGroup.TagGroupName,validators:[\"required\"],errorMessages:[\"this field is required\"],className:classes.textField}),/*#__PURE__*/_jsx(SelectValidator,{id:\"demo-simple-select-helper\",value:tagGroup.TagGroupServer,onChange:this.handleChange,validators:[\"required\"],errorMessages:[\"this field is required\"],className:classes.selectField,name:\"TagGroupServer\",children:this.state.servers[0].map(function(server,i){return/*#__PURE__*/_jsx(MenuItem,{value:server,children:server},i);})}),/*#__PURE__*/_jsx(Button,{type:\"button\",onClick:function onClick(e){_this3.getServers();},size:\"small\",className:classes.buttonGetServer,children:\"Get Servers\"}),/*#__PURE__*/_jsx(TextValidator,{label:\"Tag Table Name\",onChange:this.handleChange,name:\"TagTableName\",value:tagGroup.TagTableName,validators:[\"required\"],errorMessages:[\"this field is required\"],className:classes.textField}),/*#__PURE__*/_jsx(TextValidator,{label:\"Description\",onChange:this.handleChange,name:\"Description\",value:tagGroup.Description,className:classes.textField}),/*#__PURE__*/_jsxs(SelectValidator,{id:\"demo-simple-select-helper\",value:tagGroup.Status,onChange:this.handleChange,validators:[\"required\"],errorMessages:[\"this field is required\"],className:classes.selectField,name:\"Status\",children:[/*#__PURE__*/_jsx(MenuItem,{value:\"\",children:/*#__PURE__*/_jsx(\"em\",{children:\"None\"})}),/*#__PURE__*/_jsx(MenuItem,{value:true,children:\"ON\"}),/*#__PURE__*/_jsx(MenuItem,{value:false,children:\"OFF\"})]}),/*#__PURE__*/_jsx(Button,{type:\"submit\",className:classes.button,children:\"Submit\"})]})})})});}}]);return TagGroupFormAdd;}(React.Component);export default withRouter(withStyles(useStyles)(TagGroupFormAdd));","map":{"version":3,"sources":["C:/laragon/www/iot.mksolusi/DriverOPCDA/frontend/src/components/pages/TagGroups/TagGroupFormAdd.jsx"],"names":["React","withStyles","Grid","Box","MenuItem","Button","withRouter","ValidatorForm","TextValidator","SelectValidator","TagGroupServices","socketIOClient","ENDPOINT","process","env","REACT_APP_BASE_URL","tagGroupServ","socket","useStyles","theme","root","margin","spacing","width","gridColor","background","button","marginTop","color","palette","success","main","backgroundColor","dark","borderColor","light","boxShadow","buttonGetServer","primary","form","textField","selectField","TagGroupFormAdd","props","state","tagGroup","TagGroupName","TagTableName","TagGroupServer","Description","Status","servers","handleChange","event","target","name","value","setState","handleSubmit","paramInsert","store","resp","alert","message","onSuccess","bind","_isMounted","_servers","e","history","push","console","log","on","data","removeAllListeners","getServers","srvrs","classes","errors","map","server","i","Component"],"mappings":"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","sourcesContent":["import React from \"react\";\r\nimport { withStyles } from \"@material-ui/core/styles\";\r\nimport { Grid, Box, MenuItem } from \"@material-ui/core\";\r\nimport Button from \"@material-ui/core/Button\";\r\nimport { withRouter } from \"react-router-dom\";\r\n\r\nimport {\r\n  ValidatorForm,\r\n  TextValidator,\r\n  SelectValidator,\r\n} from \"react-material-ui-form-validator\";\r\n\r\nimport TagGroupServices from \"./TagGroupServicesClass\";\r\n\r\nimport socketIOClient from \"socket.io-client\";\r\nconst ENDPOINT = process.env.REACT_APP_BASE_URL;\r\n\r\nconst tagGroupServ = new TagGroupServices();\r\nvar socket = {}\r\nconst useStyles = (theme) => ({\r\n  root: {\r\n    \"& .MuiTextField-root\": {\r\n      margin: theme.spacing(1),\r\n      width: \"90%\",\r\n    },\r\n  },\r\n  gridColor: {\r\n    background: \"white\",\r\n  },\r\n  button: {\r\n    marginTop: theme.spacing(1),\r\n    color: \"#ffffff\",\r\n    background: theme.palette.success.main,\r\n    \"&:hover\": {\r\n      backgroundColor: theme.palette.success.dark,\r\n      borderColor: theme.palette.success.light,\r\n      boxShadow: \"none\",\r\n    },\r\n  },\r\n  buttonGetServer: {\r\n    marginTop: theme.spacing(1),\r\n    color: \"#ffffff\",\r\n    background: theme.palette.primary.main,\r\n    \"&:hover\": {\r\n      backgroundColor: theme.palette.primary.dark,\r\n      borderColor: theme.palette.primary.light,\r\n      boxShadow: \"none\",\r\n    },\r\n  },\r\n  form: {\r\n    background: \"white\",\r\n  },\r\n  textField: {\r\n    width: \"100%\",\r\n    marginTop: 10,\r\n  },\r\n  selectField: {\r\n    width: \"100%\",\r\n    marginTop: 20,\r\n  },\r\n});\r\nclass TagGroupFormAdd extends React.Component {\r\n  constructor(props) {\r\n    super(props);\r\n    this.onSuccess = this.onSuccess.bind(this);\r\n    this._isMounted = false;\r\n    this._servers = [];\r\n  }\r\n  state = {\r\n    tagGroup: {\r\n      TagGroupName: \"\",\r\n      TagTableName: \"\",\r\n      TagGroupServer: \"\",\r\n      Description: \"\",\r\n      Status: false,\r\n    },\r\n    servers: [[]],\r\n  };\r\n\r\n  onSuccess(e) {\r\n    this.props.history.push(\"/opc/tag-groups\");\r\n  }\r\n\r\n  handleChange = (event) => {\r\n    const { tagGroup } = this.state;\r\n    tagGroup[event.target.name] = event.target.value;\r\n    this.setState({ tagGroup });\r\n  };\r\n\r\n  handleSubmit = async () => {\r\n    const { tagGroup } = this.state;\r\n    const paramInsert = {\r\n      TagGroupName: tagGroup.TagGroupName,\r\n      TagTableName: tagGroup.TagTableName,\r\n      TagGroupServer: tagGroup.TagGroupServer,\r\n      Description: tagGroup.Description,\r\n      Status: tagGroup.Status,\r\n    };\r\n\r\n    const resp = await tagGroupServ.store(paramInsert);\r\n    // save role data\r\n    if (resp.success) {\r\n      alert(resp.message);\r\n      this.onSuccess();\r\n    } else {\r\n      alert(resp.message);\r\n    }\r\n  };\r\n\r\n  componentDidMount() {\r\n    socket = socketIOClient(ENDPOINT);\r\n    console.log(this._isMounted);\r\n    if (this._isMounted !== true) {\r\n      if (socket)\r\n        socket.on(\"toClientServers\", (data) => {\r\n          console.log(\"GET SERVERS\");\r\n          console.log(data);\r\n          this.setState({ servers: data });\r\n        });\r\n      this._isMounted = true;\r\n    }\r\n  }\r\n\r\n  componentWillUnmount() {\r\n    this._isMounted = false;\r\n    socket.removeAllListeners(\"toClientServers\");\r\n    console.log(\"UNMOUNT\");\r\n  }\r\n\r\n  async getServers() {\r\n    await tagGroupServ.getServers();\r\n    let resp = await tagGroupServ.getServers();\r\n    let srvrs = [];\r\n    srvrs.push(resp);\r\n    console.log(srvrs);\r\n    this.setState({ servers: srvrs });\r\n  }\r\n\r\n  render() {\r\n    const { classes } = this.props;\r\n    const { tagGroup } = this.state;\r\n\r\n    return (\r\n      <Grid container spacing={1}>\r\n        <Grid item lg={5} xs={12}>\r\n          <Box p={3} boxShadow={3} className={classes.form}>\r\n            <ValidatorForm\r\n              ref=\"form\"\r\n              onSubmit={this.handleSubmit}\r\n              onError={(errors) => console.log(errors)}\r\n            >\r\n              <TextValidator\r\n                label=\"Tag Group Name\"\r\n                onChange={this.handleChange}\r\n                name=\"TagGroupName\"\r\n                value={tagGroup.TagGroupName}\r\n                validators={[\"required\"]}\r\n                errorMessages={[\"this field is required\"]}\r\n                className={classes.textField}\r\n              />\r\n              <SelectValidator\r\n                id=\"demo-simple-select-helper\"\r\n                value={tagGroup.TagGroupServer}\r\n                onChange={this.handleChange}\r\n                validators={[\"required\"]}\r\n                errorMessages={[\"this field is required\"]}\r\n                className={classes.selectField}\r\n                name=\"TagGroupServer\"\r\n              >\r\n                {this.state.servers[0].map((server, i) => (\r\n                  <MenuItem key={i} value={server}>\r\n                    {server}\r\n                  </MenuItem>\r\n                ))}\r\n              </SelectValidator>\r\n              <Button\r\n                type=\"button\"\r\n                onClick={(e) => {\r\n                  this.getServers();\r\n                }}\r\n                size=\"small\"\r\n                className={classes.buttonGetServer}\r\n              >\r\n                Get Servers\r\n              </Button>\r\n\r\n              <TextValidator\r\n                label=\"Tag Table Name\"\r\n                onChange={this.handleChange}\r\n                name=\"TagTableName\"\r\n                value={tagGroup.TagTableName}\r\n                validators={[\"required\"]}\r\n                errorMessages={[\"this field is required\"]}\r\n                className={classes.textField}\r\n              />\r\n              <TextValidator\r\n                label=\"Description\"\r\n                onChange={this.handleChange}\r\n                name=\"Description\"\r\n                value={tagGroup.Description}\r\n                className={classes.textField}\r\n              />\r\n\r\n              <SelectValidator\r\n                id=\"demo-simple-select-helper\"\r\n                value={tagGroup.Status}\r\n                onChange={this.handleChange}\r\n                validators={[\"required\"]}\r\n                errorMessages={[\"this field is required\"]}\r\n                className={classes.selectField}\r\n                name=\"Status\"\r\n              >\r\n                <MenuItem value=\"\">\r\n                  <em>None</em>\r\n                </MenuItem>\r\n\r\n                <MenuItem value={true}>ON</MenuItem>\r\n                <MenuItem value={false}>OFF</MenuItem>\r\n              </SelectValidator>\r\n\r\n              <Button type=\"submit\" className={classes.button}>\r\n                Submit\r\n              </Button>\r\n            </ValidatorForm>\r\n          </Box>\r\n        </Grid>\r\n      </Grid>\r\n    );\r\n  }\r\n}\r\n\r\nexport default withRouter(withStyles(useStyles)(TagGroupFormAdd));\r\n"]},"metadata":{},"sourceType":"module"}