Latest Contributions by kawishabbas

Hi, As I stated in my subject, I want to use socket.io to get real-time alerts from ONT devices. Everything is going good, I am receiving real-time alerts on server side and also get those alerts on my web page. But, I have a confusion, as is apply applyEdits() method on my GEOJSON layer to remove and add the points within real-time (or as the alert receive)  then my web page crashed. I hope community members are understanding my point. For the better understanding, I attached the code as a zip file.  Please anyone from the community can help me to resolve this issue.?   Note: For front-end I am using react.js and esri-loader for mapping capabilities. Regards, Kawish ... View more

Hello, Please suggest what is the procedure to create a dropdown checkbox to select multiple values from the table. I have created a dropdown list that shows customer status. Users can select the online status to reflect the record of online customer to the map as it is there are multiple statuses that can be select one by one. Now, I want to create a checkbox with the dropdown list. User want to select multiple status at a time. Please suggest or help me to find out the solution. import React, { Component } from 'react'; import { Navbar, NavbarBrand, Nav, NavbarToggler, Collapse, NavItem,Dropdown,DropdownToggle, DropdownMenu,DropdownItem,UncontrolledDropdown} from 'reactstrap'; import { NavLink } from 'react-router-dom'; import { authenticationService } from '../_services/authentication'; class Header extends Component { constructor(props) { super(props); this.state = { isNavOpen: false, dropdownOpen:false, south:null, north:null, central:null, alarminfo:'', status:false, show:false }; this.toggleNav = this.toggleNav.bind(this); this.toggleDrop = this.toggleDrop.bind(this); } logout = () => { authenticationService.logout(); } toggleNav() { this.setState({ isNavOpen: !this.state.isNavOpen // true }); } toggleDrop() { this.setState({ isNavOpen: !this.state.isNavOpen // true }); } selectLayer = (e) => { let _this = this if(this.props.loginRole.data.role === 'Admin'){ let customerQuery = this.props.item.customer.data var query = customerQuery.createQuery(); let centerCustomerQuery = this.props.centerItem.centerCustomer.data var centerQuery = centerCustomerQuery.createQuery(); let northCustomerQuery = this.props.northItem.northCustomer.data var northQuery = northCustomerQuery.createQuery(); if(e.target.value === "clear"){ /* this.props.view.goTo({ target:[67.116733,24.898892], zoom:14 }) */ let clearQuery = "status = 'Active'" customerQuery.definitionExpression = clearQuery centerCustomerQuery.definitionExpression = clearQuery northCustomerQuery.definitionExpression = clearQuery query.where = clearQuery customerQuery.queryFeatures(query) .then(function(response){ _this.setState({ show:true }) _this.props.alarmInfo(_this.state) }); centerQuery.where = clearQuery centerCustomerQuery.queryFeatures(centerQuery) .then(function(response){ _this.setState({ show:true }) _this.props.alarmInfo(_this.state) }); northQuery.where = clearQuery northCustomerQuery.queryFeatures(northQuery) .then(function(response){ _this.setState({ show:true }) _this.props.alarmInfo(_this.state) }); query.where = clearQuery centerQuery.where = clearQuery northQuery.where = clearQuery } else { //var queryExpression = `status = '${e.target.value}'` var queryExpression = `alarmstate = ${e.target.value} AND status = 'Active'` // South customerQuery.definitionExpression = queryExpression query.where = queryExpression customerQuery.queryFeatures(query) .then(function(response){ if (response.features[0].attributes.alarmstate === 0){ _this.setState({ alarminfo:'Online', south:response.features.length, status:true, show:false }) }else if (response.features[0].attributes.alarmstate === 1){ _this.setState({ alarminfo:'Powered Off', south:response.features.length, status:true, show:false }) }else if (response.features[0].attributes.alarmstate === 2){ _this.setState({ alarminfo:'Link Down', south:response.features.length, status:true, show:false }) }else if (response.features[0].attributes.alarmstate === 3){ _this.setState({ alarminfo:'GEM Packet Loss', south:response.features.length, status:true, show:false }) }else if (response.features[0].attributes.alarmstate === 4){ _this.setState({ alarminfo:'Low Optical Power', south:response.features.length, status:true, show:false }) }else _this.setState({ alarminfo:response.features[0].attributes.alarminfo, south:response.features.length, status:true, show:false }) _this.props.alarmInfo(_this.state) }); // Central centerCustomerQuery.definitionExpression = queryExpression centerQuery.where = queryExpression centerCustomerQuery.queryFeatures(centerQuery) .then(function(response){ _this.setState({ central:response.features.length, show:false }) _this.props.alarmInfo(_this.state) }); // North northCustomerQuery.definitionExpression = queryExpression northQuery.where = queryExpression northCustomerQuery.queryFeatures(northQuery) .then(function(response){ _this.setState({ north:response.features.length, show:false }) _this.props.alarmInfo(_this.state) }); query.where = queryExpression centerQuery.where = queryExpression northQuery.where = queryExpression } } else { let customerQuery = this.props.item.customer.data var query = customerQuery.createQuery(); if(e.target.value === "clear"){ let clearQuery = "1=1" customerQuery.definitionExpression = clearQuery query.where = clearQuery } else { //var queryExpression = `status = '${e.target.value}'` var queryExpression = `alarmstate = ${e.target.value} AND status = 'Active'` customerQuery.definitionExpression = queryExpression query.where = queryExpression } } } render() { return( <div> <Navbar color="dark" dark expand="md"> <NavbarToggler onClick={this.toggleNav} /> <NavbarBrand style={{color:'#1f91f3'}}>Transworld</NavbarBrand> <Collapse isOpen={this.state.isNavOpen} navbar> <Nav className="ml-auto" navbar> <UncontrolledDropdown nav inNavbar> <DropdownToggle style={styles.dropToggle} nav caret> Customer Status </DropdownToggle> <DropdownMenu onClick={(e)=> this.selectLayer(e)} style={{background:"#343a40"}} center> <DropdownItem value = "clear" style={styles.dropItem}>Clear Selection</DropdownItem> <DropdownItem value='0' style={styles.dropItem}>Online</DropdownItem> <DropdownItem value='1' style={styles.dropItem}>Powered Off</DropdownItem> <DropdownItem value='2' style={styles.dropItem}>Link Down</DropdownItem> <DropdownItem value='3' style={styles.dropItem}>GEM Packet Loss</DropdownItem> <DropdownItem value='4' style={styles.dropItem}>Low Optical Power</DropdownItem> </DropdownMenu> </UncontrolledDropdown> <NavItem> <NavLink className="nav-link" to='/login' onClick={this.logout}><span className="fa fa-sign-in fa-lg"></span> Logout</NavLink> </NavItem> </Nav> </Collapse> </Navbar> </div> ); } } const styles = { dropToggle:{ background:"#343a40", color:"#1f91f3", }, dropItem:{ color:"#1f91f3", } } export default Header;   Regards, Kawish ... View more

Hello, I want to symbolize my data on behalf of two fields. One is status field and other is category field. I try to used arcade expression for uniqueValueInfos to render the layer but unfortunately it is not working. Please help me to figure out my mistake. Here is source code. Thanks     const name = "$feature.alarmstate" const cat = "$feature.category" const valueExpression = `When( ${name} == '0' AND ${cat} == 'VIP', 0, ${name} == '1' AND ${cat} == 'VIP', 0, ${name} == '2' AND ${cat} == 'VIP', 0, ${name} == '3' AND ${cat} == 'VIP', 0, ${name} == '4' AND ${cat} == 'VIP', 0, ${name} == '0' AND ${cat} == 'Ordinary', 1, ${name} == '1' AND ${cat} == 'Ordinary', 2, ${name} == '2' AND ${cat} == 'Ordinary', 3, ${name} == '3' AND ${cat} == 'Ordinary', 4, ${name} == '4' AND ${cat} == 'Ordinary', 5)` var rendererCheck = { type: "unique-value", //field: "alarminfo", valueExpression:valueExpression, uniqueValueInfos: [ { value: "0", symbol: { type: "picture-marker", url: "images/vip.png", width: "30px", height: "15px" } }, { value: "1", symbol: { type: "simple-marker", style: "diamond", color: "green", size: "10px", outline: { color: [ 255, 255, 255, 1 ], width: 0.4 } } }, { value: "2", symbol: { type: "simple-marker", style: "diamond", color: "blue", size: "10px", outline: { color: [ 255, 255, 255, 1 ], width: 0.4 } } }, { value: "3", symbol: { type: "simple-marker", style: "diamond", color: "red", size: "10px", outline: { color: [ 255, 255, 255, 1 ], width: 0.4 } } }, { value: "4", symbol: { type: "simple-marker", style: "diamond", color: "black", size: "10px", outline: { color: [ 255, 255, 255, 1 ], width: 0.4 } } }, { value: "5", symbol: { type: "simple-marker", style: "diamond", color: "Yellow", size: "10px", outline: { color: [ 255, 255, 255, 1 ], width: 0.4 } } } ] }; customerLayer.renderer =rendererCheck   ... View more