\n \n \n \n \n \n \n \n\n {this.state.tab === 0 && \n
\n {!this.props.update &&
\n Network-server\n \n \n The network-server on which this device-profile will be provisioned. After creating the device-profile, this value can't be changed.\n \n }\n
\n LoRaWAN MAC version\n \n \n The LoRaWAN MAC version supported by the device.\n \n \n
\n LoRaWAN Regional Parameters revision\n \n \n Revision of the Regional Parameters specification supported by the device.\n \n \n
\n
\n
\n
\n \n \n }\n />\n \n {!this.state.object.supportsJoin && }\n {!this.state.object.supportsJoin && }\n {!this.state.object.supportsJoin && }\n {!this.state.object.supportsJoin && }\n {!this.state.object.supportsJoin && }\n
}\n\n {this.state.tab === 2 && \n
\n \n }\n />\n \n\n {this.state.object.supportsClassB &&
}\n {this.state.object.supportsClassB &&
\n Class-B ping-slot periodicity\n \n Class-B ping-slot periodicity.\n }\n {this.state.object.supportsClassB && }\n {this.state.object.supportsClassB && }\n \n \n \n }\n />\n Select this option when the device will operate as Class-C device immediately after activation. In case it sends a DeviceModeInd mac-command when it changes to Class-C, do not select this option.\n \n\n \n
}\n\n {this.state.tab === 4 && \n
\n Payload codec\n \n \n By defining a payload codec, LoRa App Server can encode and decode the binary device payload for you.\n \n \n\n {this.state.object.payloadCodec === \"CUSTOM_JS\" &&
\n \n \n The function must have the signature function Decode(fPort, bytes) and must return an object.\n LoRa App Server will convert this object to JSON.\n \n }\n {this.state.object.payloadCodec === \"CUSTOM_JS\" &&
\n \n \n The function must have the signature function Encode(fPort, obj) and must return an array\n of bytes.\n \n }\n
\n \n \n no discovery 'ping' was emitted yet\n \n \n \n \n the gateway ping feature has been disabled in LoRa App Server\n \n \n \n \n the discovery 'ping' was not received by any other gateways\n \n \n
\n \n \n );\n }\n\n let position = [0, 0];\n if (this.props.gateway.location !== undefined && this.props.gateway.location.latitude !== undefined && this.props.gateway.location.longitude !== undefined) {\n position = [this.props.gateway.location.latitude, this.props.gateway.location.longitude];\n }\n\n const style = {\n height: 800,\n };\n\n let bounds = [];\n let markers = [];\n let lines = [];\n\n markers.push(\n \n \n \n {this.props.gateway.id}
\n Freq: {this.state.ping.frequency/1000000} MHz
\n DR: {this.state.ping.dr}
\n Altitude: {this.props.gateway.location.altitude} meter(s)\n \n \n \n );\n\n bounds.push(position);\n\n for (const rx of this.state.ping.pingRX) {\n const pingPos = [rx.latitude, rx.longitude];\n\n markers.push(\n \n \n \n {rx.gatewayID}
\n RSSI: {rx.rssi} dBm
\n SNR: {rx.LoRaSNR} dB
\n Altitude: {rx.altitude} meter(s)\n \n \n \n );\n\n bounds.push(pingPos);\n\n lines.push(\n \n );\n }\n\n return(\n \n \n \n );\n };\n}\n\nclass LegendControl extends MapControl {\n componentWillMount() {\n const legend = L.control({position: \"bottomleft\"});\n const jsx = (\n \n {this.props.children}\n
\n );\n\n legend.onAdd = function(map) {\n let div = L.DomUtil.create(\"div\", '');\n ReactDOM.render(jsx, div);\n return div;\n };\n\n this.leafletElement = legend;\n }\n\n createLeafletElement () {}\n}\n\nLegendControl = withLeaflet(LegendControl);\n\nexport default withStyles(styles)(GatewayDiscovery);\n\n","import React, { Component } from \"react\";\n\nimport JSONTreeOriginal from \"react-json-tree\";\n\n\nclass JSONTree extends Component {\n render() {\n const theme = {\n scheme: 'google',\n author: 'seth wright (http://sethawright.com)',\n base00: '#000000',\n base01: '#282a2e',\n base02: '#373b41',\n base03: '#969896',\n base04: '#b4b7b4',\n base05: '#c5c8c6',\n base06: '#e0e0e0',\n base07: '#ffffff',\n base08: '#CC342B',\n base09: '#F96A38',\n base0A: '#FBA922',\n base0B: '#198844',\n base0C: '#3971ED',\n base0D: '#3971ED',\n base0E: '#A36AC7',\n base0F: '#3971ED',\n }\n\n return(\n {return true}}\n />\n );\n }\n}\n\nexport default JSONTree;\n","import React, { Component } from \"react\";\n\nimport { withStyles } from \"@material-ui/core/styles\";\nimport Grid from \"@material-ui/core/Grid\";\nimport ExpansionPanel from '@material-ui/core/ExpansionPanel';\nimport ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';\nimport ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';\nimport Typography from '@material-ui/core/Typography';\n\nimport ChevronDown from \"mdi-material-ui/ChevronDown\";\n\nimport moment from \"moment\";\n\nimport JSONTree from \"./JSONTree\";\nimport theme from \"../theme\";\n\n\nconst styles = {\n headerColumn: {\n marginRight: 6 * theme.spacing(1),\n },\n headerColumnFixedSmall: {\n width: 145,\n },\n headerColumnFixedWide: {\n width: 175,\n },\n treeStyle: {\n paddingTop: 0,\n paddingBottom: 0,\n fontSize: 12,\n lineHeight: 1.5,\n },\n};\n\n\nclass LoRaWANFrameLog extends Component {\n render() {\n let dir = \"\";\n let devID = \"\";\n\n if (this.props.frame.uplinkMetaData !== undefined) {\n dir = \"UPLINK\";\n } else {\n dir = \"DOWNLINK\";\n }\n\n const receivedAt = moment(this.props.frame.receivedAt).format(\"LTS\");\n const mType = this.props.frame.phyPayload.mhdr.mType;\n\n if (this.props.frame.phyPayload.macPayload !== undefined) {\n if (this.props.frame.phyPayload.macPayload.devEUI !== undefined) {\n devID = this.props.frame.phyPayload.macPayload.devEUI;\n }\n\n if (this.props.frame.phyPayload.macPayload.fhdr !== undefined) {\n devID = this.props.frame.phyPayload.macPayload.fhdr.devAddr;\n }\n }\n\n return(\n \n }>\n {dir}
\n {receivedAt}
\n {mType}
\n {devID}
\n \n \n \n \n {this.props.frame.uplinkMetaData && }\n {this.props.frame.downlinkMetaData && }\n \n \n \n \n \n \n \n );\n }\n}\n\nexport default withStyles(styles)(LoRaWANFrameLog);\n","import React, { Component } from \"react\";\n\nimport { withStyles } from \"@material-ui/core/styles\";\nimport Avatar from \"@material-ui/core/Avatar\";\nimport Chip from \"@material-ui/core/Chip\";\nimport Grid from \"@material-ui/core/Grid\";\nimport Button from '@material-ui/core/Button';\nimport CircularProgress from '@material-ui/core/CircularProgress';\nimport Dialog from '@material-ui/core/Dialog';\nimport DialogActions from '@material-ui/core/DialogActions';\nimport DialogContent from '@material-ui/core/DialogContent';\nimport DialogContentText from '@material-ui/core/DialogContentText';\nimport DialogTitle from '@material-ui/core/DialogTitle';\n\nimport Play from \"mdi-material-ui/Play\";\nimport Pause from \"mdi-material-ui/Pause\";\nimport Download from \"mdi-material-ui/Download\";\nimport Delete from \"mdi-material-ui/Delete\";\nimport HelpCircleOutline from \"mdi-material-ui/HelpCircleOutline\";\nimport AlertCircleOutline from \"mdi-material-ui/AlertCircleOutline\";\n\nimport fileDownload from \"js-file-download\";\n\nimport LoRaWANFrameLog from \"../../components/LoRaWANFrameLog\";\nimport GatewayStore from \"../../stores/GatewayStore\";\nimport theme from \"../../theme\";\n\n\nconst styles = {\n buttons: {\n textAlign: \"right\",\n },\n button: {\n marginLeft: 2 * theme.spacing(1),\n },\n icon: {\n marginRight: theme.spacing(1),\n },\n center: {\n textAlign: \"center\",\n },\n progress: {\n marginTop: 4 * theme.spacing(1),\n },\n};\n\n\nclass GatewayFrames extends Component {\n constructor() {\n super();\n\n this.state = {\n connected: false,\n paused: false,\n frames: [],\n dialogOpen: false,\n };\n\n this.onFrame = this.onFrame.bind(this);\n this.onDownload = this.onDownload.bind(this);\n this.togglePause = this.togglePause.bind(this);\n this.onClear = this.onClear.bind(this);\n this.toggleHelpDialog = this.toggleHelpDialog.bind(this);\n this.setConnected = this.setConnected.bind(this);\n }\n\n componentDidMount() {\n const conn = GatewayStore.getFrameLogsConnection(this.props.gateway.id, () => {}, () => {}, this.onFrame);\n this.setState({\n wsConn: conn,\n });\n\n GatewayStore.on(\"ws.status.change\", this.setConnected);\n this.setConnected();\n }\n\n componentWillUnmount() {\n this.state.wsConn.close();\n GatewayStore.removeListener(\"ws.status.change\", this.setConnected);\n }\n\n onDownload() {\n const dl = this.state.frames.map((frame, i) => {\n return {\n uplinkMetaData: frame.uplinkMetaData,\n downlinkMetaData: frame.downlinkMetaData,\n phyPayload: frame.phyPayload,\n };\n });\n\n fileDownload(JSON.stringify(dl, null, 4), `gateway-${this.props.match.params.gatewayID}.json`);\n }\n\n togglePause() {\n this.setState({\n paused: !this.state.paused,\n });\n }\n\n toggleHelpDialog() {\n this.setState({\n dialogOpen: !this.state.dialogOpen,\n });\n }\n\n onClear() {\n this.setState({\n frames: [],\n });\n }\n\n setConnected() {\n this.setState({\n connected: GatewayStore.getWSStatus(),\n });\n }\n\n onFrame(frame) {\n if (this.state.paused) {\n return;\n }\n\n let frames = this.state.frames;\n const now = new Date();\n\n if (frame.uplinkFrame !== undefined) {\n frames.unshift({\n id: now.getTime(),\n receivedAt: now,\n uplinkMetaData: {\n rxInfo: frame.uplinkFrame.rxInfo,\n txInfo: frame.uplinkFrame.txInfo,\n },\n phyPayload: JSON.parse(frame.uplinkFrame.phyPayloadJSON),\n });\n }\n\n if (frame.downlinkFrame !== undefined) {\n frames.unshift({\n id: now.getTime(),\n receivedAt: now,\n downlinkMetaData: {\n txInfo: frame.downlinkFrame.txInfo,\n },\n phyPayload: JSON.parse(frame.downlinkFrame.phyPayloadJSON),\n });\n }\n\n console.log(frame);\n\n this.setState({\n frames: frames,\n });\n }\n\n render() {\n const frames = this.state.frames.map((frame, i) => );\n\n return(\n \n \n \n Help\n \n \n The frames below are the raw (and encrypted) LoRaWAN PHYPayload frames as seen by the gateway(s). This data is intended for debugging only.\n \n \n \n \n \n \n\n \n {!this.state.paused && }\n {this.state.paused && }\n \n \n \n \n {!this.state.connected && }\n {(this.state.connected && frames.length === 0 && !this.state.paused) &&
}\n {frames.length > 0 && frames}\n \n \n );\n }\n}\n\nexport default withStyles(styles)(GatewayFrames);\n","import React, { Component } from \"react\";\nimport { Route, Switch, Link, withRouter } from \"react-router-dom\";\n\nimport { withStyles } from \"@material-ui/core/styles\";\nimport Grid from '@material-ui/core/Grid';\nimport Tabs from '@material-ui/core/Tabs';\nimport Tab from '@material-ui/core/Tab';\n\nimport Delete from \"mdi-material-ui/Delete\";\n\nimport TitleBar from \"../../components/TitleBar\";\nimport TitleBarTitle from \"../../components/TitleBarTitle\";\nimport TitleBarButton from \"../../components/TitleBarButton\";\nimport Admin from \"../../components/Admin\";\nimport GatewayStore from \"../../stores/GatewayStore\";\nimport SessionStore from \"../../stores/SessionStore\";\nimport GatewayDetails from \"./GatewayDetails\";\nimport UpdateGateway from \"./UpdateGateway\";\nimport GatewayDiscovery from \"./GatewayDiscovery\";\nimport GatewayFrames from \"./GatewayFrames\";\n\nimport theme from \"../../theme\";\n\n\nconst styles = {\n tabs: {\n borderBottom: \"1px solid \" + theme.palette.divider,\n height: \"48px\",\n overflow: \"visible\",\n },\n};\n\n\nclass GatewayLayout extends Component {\n constructor() {\n super();\n this.state = {\n tab: 0,\n admin: false,\n };\n this.deleteGateway = this.deleteGateway.bind(this);\n this.onChangeTab = this.onChangeTab.bind(this);\n this.locationToTab = this.locationToTab.bind(this);\n this.setIsAdmin = this.setIsAdmin.bind(this);\n }\n\n componentDidMount() {\n GatewayStore.get(this.props.match.params.gatewayID, resp => {\n this.setState({\n gateway: resp,\n });\n });\n\n\n SessionStore.on(\"change\", this.setIsAdmin);\n this.setIsAdmin();\n this.locationToTab();\n }\n\n componentDidUpdate(prevProps) {\n if (this.props === prevProps) {\n return;\n }\n\n this.locationToTab();\n }\n\n componentWillUnmount() {\n SessionStore.removeListener(\"change\", this.setIsAdmin);\n }\n\n setIsAdmin() {\n this.setState({\n admin: SessionStore.isAdmin() || SessionStore.isOrganizationAdmin(this.props.match.params.organizationID),\n });\n }\n\n deleteGateway() {\n if (window.confirm(\"Are you sure you want to delete this gateway?\")) {\n GatewayStore.delete(this.props.match.params.gatewayID, () => {\n this.props.history.push(`/organizations/${this.props.match.params.organizationID}/gateways`);\n });\n }\n }\n\n locationToTab() {\n let tab = 0;\n\n if (window.location.href.endsWith(\"/edit\")) {\n tab = 1;\n } else if (window.location.href.endsWith(\"/discovery\")) {\n tab = 2;\n } else if (window.location.href.endsWith(\"/frames\")) {\n tab = 3;\n }\n\n if (tab > 0 && !this.state.admin) {\n tab = tab - 1;\n }\n\n this.setState({\n tab: tab,\n });\n }\n\n onChangeTab(e, v) {\n this.setState({\n tab: v,\n });\n }\n\n render() {\n if (this.state.gateway === undefined) {\n return();\n }\n\n return(\n \n \n }\n color=\"secondary\"\n onClick={this.deleteGateway}\n />\n \n }\n >\n \n \n \n \n\n \n \n \n {this.state.admin && }\n \n \n \n \n \n \n \n } />\n } />\n } />\n } />\n \n \n \n );\n }\n}\n\nexport default withStyles(styles)(withRouter(GatewayLayout));\n","import React, { Component } from \"react\";\nimport { withRouter, Link } from 'react-router-dom';\n\nimport { withStyles } from \"@material-ui/core/styles\";\nimport Grid from '@material-ui/core/Grid';\nimport Card from '@material-ui/core/Card';\nimport CardContent from \"@material-ui/core/CardContent\";\nimport Dialog from '@material-ui/core/Dialog';\nimport DialogActions from '@material-ui/core/DialogActions';\nimport DialogContent from '@material-ui/core/DialogContent';\nimport DialogContentText from '@material-ui/core/DialogContentText';\nimport DialogTitle from '@material-ui/core/DialogTitle';\nimport Button from \"@material-ui/core/Button\";\n\nimport TitleBar from \"../../components/TitleBar\";\nimport TitleBarTitle from \"../../components/TitleBarTitle\";\n\nimport GatewayForm from \"./GatewayForm\";\nimport GatewayStore from \"../../stores/GatewayStore\";\nimport ServiceProfileStore from \"../../stores/ServiceProfileStore\";\n\n\nconst styles = {\n card: {\n overflow: \"visible\",\n },\n};\n\n\nclass CreateGateway extends Component {\n constructor() {\n super();\n\n this.state = {\n spDialog: false,\n };\n\n this.onSubmit = this.onSubmit.bind(this);\n }\n\n componentDidMount() {\n ServiceProfileStore.list(this.props.match.params.organizationID, 0, 0, resp => {\n if (resp.totalCount === \"0\") {\n this.setState({\n spDialog: true,\n });\n }\n });\n }\n\n closeDialog = () => {\n this.setState({\n spDialog: false,\n });\n }\n\n onSubmit(gateway) {\n let gw = gateway;\n gw.organizationID = this.props.match.params.organizationID;\n\n GatewayStore.create(gateway, resp => {\n this.props.history.push(`/organizations/${this.props.match.params.organizationID}/gateways`);\n });\n }\n\n render() {\n return(\n \n \n Add a service-profile?\n \n \n The selected organization does not have a service-profile yet.\n A service-profile connects an organization to a network-server and defines the features that an organization can use on this network-server.\n \n \n Would you like to create a service-profile?\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n }\n}\n\nexport default withRouter(withStyles(styles)(CreateGateway));\n","import { EventEmitter } from \"events\";\n\nimport Swagger from \"swagger-client\";\n\nimport sessionStore from \"./SessionStore\";\nimport {checkStatus, errorHandler } from \"./helpers\";\nimport dispatcher from \"../dispatcher\";\n\n\nclass ApplicationStore extends EventEmitter {\n constructor() {\n super();\n this.swagger = new Swagger(\"/swagger/application.swagger.json\", sessionStore.getClientOpts());\n }\n\n create(application, callbackFunc) {\n this.swagger.then(client => {\n client.apis.ApplicationService.Create({\n body: {\n application: application,\n },\n })\n .then(checkStatus)\n .then(resp => {\n this.notify(\"created\");\n callbackFunc(resp.obj);\n })\n .catch(errorHandler);\n });\n }\n\n get(id, callbackFunc) {\n this.swagger.then(client => {\n client.apis.ApplicationService.Get({\n id: id,\n })\n .then(checkStatus)\n .then(resp => {\n callbackFunc(resp.obj);\n })\n .catch(errorHandler);\n });\n }\n\n update(application, callbackFunc) {\n this.swagger.then(client => {\n client.apis.ApplicationService.Update({\n \"application.id\": application.id,\n body: {\n application: application,\n },\n })\n .then(checkStatus)\n .then(resp => {\n this.notify(\"updated\");\n callbackFunc(resp.obj);\n })\n .catch(errorHandler);\n });\n }\n\n delete(id, callbackFunc) {\n this.swagger.then(client => {\n client.apis.ApplicationService.Delete({\n id: id,\n })\n .then(checkStatus)\n .then(resp => {\n this.notify(\"deleted\");\n callbackFunc(resp.obj);\n })\n .catch(errorHandler);\n });\n }\n\n list(search, organizationID, limit, offset, callbackFunc) {\n this.swagger.then(client => {\n client.apis.ApplicationService.List({\n limit: limit,\n offset: offset,\n organizationID: organizationID,\n search: search,\n })\n .then(checkStatus)\n .then(resp => {\n callbackFunc(resp.obj);\n })\n .catch(errorHandler);\n });\n }\n\n listIntegrations(applicationID, callbackFunc) {\n this.swagger.then(client => {\n client.apis.ApplicationService.ListIntegrations({\n application_id: applicationID,\n })\n .then(checkStatus)\n .then(resp => {\n callbackFunc(resp.obj);\n })\n .catch(errorHandler);\n });\n }\n\n createHTTPIntegration(integration, callbackFunc) {\n this.swagger.then(client => {\n client.apis.ApplicationService.CreateHTTPIntegration({\n \"integration.application_id\": integration.applicationID,\n body: {\n integration: integration,\n },\n })\n .then(checkStatus)\n .then(resp => {\n this.integrationNotification(\"http\", \"created\");\n callbackFunc(resp.obj);\n })\n .catch(errorHandler);\n });\n }\n\n getHTTPIntegration(applicationID, callbackFunc) {\n this.swagger.then(client => {\n client.apis.ApplicationService.GetHTTPIntegration({\n application_id: applicationID,\n })\n .then(checkStatus)\n .then(resp => {\n callbackFunc(resp.obj);\n })\n .catch(errorHandler);\n });\n }\n\n updateHTTPIntegration(integration, callbackFunc) {\n this.swagger.then(client => {\n client.apis.ApplicationService.UpdateHTTPIntegration({\n \"integration.application_id\": integration.applicationID,\n body: {\n integration: integration,\n },\n })\n .then(checkStatus)\n .then(resp => {\n this.integrationNotification(\"http\", \"updated\");\n callbackFunc(resp.obj);\n })\n .catch(errorHandler);\n });\n }\n\n deleteHTTPIntegration(applicationID, callbackFunc) {\n this.swagger.then(client => {\n client.apis.ApplicationService.DeleteHTTPIntegration({\n application_id: applicationID,\n })\n .then(checkStatus)\n .then(resp => {\n this.integrationNotification(\"http\", \"deleted\");\n callbackFunc(resp.obj);\n })\n .catch(errorHandler);\n ;\n });\n }\n\n createInfluxDBIntegration(integration, callbackFunc) {\n this.swagger.then(client => {\n client.apis.ApplicationService.CreateInfluxDBIntegration({\n \"integration.application_id\": integration.applicationID,\n body: {\n integration: integration,\n },\n })\n .then(checkStatus)\n .then(resp => {\n this.integrationNotification(\"InfluxDB\", \"created\");\n callbackFunc(resp.obj);\n })\n .catch(errorHandler);\n });\n }\n\n getInfluxDBIntegration(applicationID, callbackFunc) {\n this.swagger.then(client => {\n client.apis.ApplicationService.GetInfluxDBIntegration({\n application_id: applicationID,\n })\n .then(checkStatus)\n .then(resp => {\n callbackFunc(resp.obj);\n })\n .catch(errorHandler);\n });\n }\n\n updateInfluxDBIntegration(integration, callbackFunc) {\n this.swagger.then(client => {\n client.apis.ApplicationService.UpdateInfluxDBIntegration({\n \"integration.application_id\": integration.applicationID,\n body: {\n integration: integration,\n },\n })\n .then(checkStatus)\n .then(resp => {\n this.integrationNotification(\"InfluxDB\", \"updated\");\n callbackFunc(resp.obj);\n })\n .catch(errorHandler);\n });\n }\n\n deleteInfluxDBIntegration(applicationID, callbackFunc) {\n this.swagger.then(client => {\n client.apis.ApplicationService.DeleteInfluxDBIntegration({\n application_id: applicationID,\n })\n .then(checkStatus)\n .then(resp => {\n this.integrationNotification(\"InfluxDB\", \"deleted\");\n callbackFunc(resp.obj);\n })\n .catch(errorHandler);\n });\n }\n\n createThingsBoardIntegration(integration, callbackFunc) {\n this.swagger.then(client => {\n client.apis.ApplicationService.CreateThingsBoardIntegration({\n \"integration.application_id\": integration.applicationID,\n body: {\n integration: integration,\n },\n })\n .then(checkStatus)\n .then(resp => {\n this.integrationNotification(\"ThingsBoard.io\", \"created\");\n callbackFunc(resp.obj);\n })\n .catch(errorHandler);\n });\n }\n\n getThingsBoardIntegration(applicationID, callbackFunc) {\n this.swagger.then(client => {\n client.apis.ApplicationService.GetThingsBoardIntegration({\n application_id: applicationID, \n })\n .then(checkStatus)\n .then(resp => {\n callbackFunc(resp.obj);\n })\n .catch(errorHandler);\n });\n }\n\n updateThingsBoardIntegration(integration, callbackFunc) {\n this.swagger.then(client => {\n client.apis.ApplicationService.UpdateThingsBoardIntegration({\n \"integration.application_id\": integration.applicationID,\n body: {\n integration: integration,\n },\n })\n .then(checkStatus)\n .then(resp => {\n this.integrationNotification(\"ThingsBoard.io\", \"updated\");\n callbackFunc(resp.obj);\n })\n .catch(errorHandler);\n });\n }\n\n deleteThingsBoardIntegration(applicationID, callbackFunc) {\n this.swagger.then(client => {\n client.apis.ApplicationService.DeleteThingsBoardIntegration({\n application_id: applicationID,\n })\n .then(checkStatus)\n .then(resp => {\n this.integrationNotification(\"ThingsBoard.io\", \"deleted\");\n callbackFunc(resp.obj);\n })\n .catch(errorHandler);\n });\n }\n\n notify(action) {\n dispatcher.dispatch({\n type: \"CREATE_NOTIFICATION\",\n notification: {\n type: \"success\",\n message: \"application has been \" + action,\n },\n });\n }\n\n integrationNotification(kind, action) {\n dispatcher.dispatch({\n type: \"CREATE_NOTIFICATION\",\n notification: {\n type: \"success\",\n message: kind + \" integration has been \" + action,\n },\n });\n }\n}\n\nconst applicationStore = new ApplicationStore();\nexport default applicationStore;\n","import React, { Component } from \"react\";\n\nimport Grid from \"@material-ui/core/Grid\";\nimport TableCell from \"@material-ui/core/TableCell\";\nimport TableRow from \"@material-ui/core/TableRow\";\n\nimport Plus from \"mdi-material-ui/Plus\";\n\nimport TitleBar from \"../../components/TitleBar\";\nimport TitleBarTitle from \"../../components/TitleBarTitle\";\nimport TableCellLink from \"../../components/TableCellLink\";\nimport TitleBarButton from \"../../components/TitleBarButton\";\nimport DataTable from \"../../components/DataTable\";\nimport Admin from \"../../components/Admin\";\nimport ApplicationStore from \"../../stores/ApplicationStore\";\n\n\nclass ListApplications extends Component {\n constructor() {\n super();\n this.getPage = this.getPage.bind(this);\n this.getRow = this.getRow.bind(this);\n }\n\n getPage(limit, offset, callbackFunc) {\n ApplicationStore.list(\"\", this.props.match.params.organizationID, limit, offset, callbackFunc);\n }\n\n getRow(obj) {\n return(\n \n {obj.id}\n {obj.name}\n {obj.serviceProfileName}\n {obj.description}\n \n );\n }\n\n render() {\n return(\n \n \n }\n to={`/organizations/${this.props.match.params.organizationID}/applications/create`}\n />\n \n }\n >\n \n \n \n \n ID\n Name\n Service-profile\n Description\n \n }\n getPage={this.getPage}\n getRow={this.getRow}\n />\n \n \n );\n }\n}\n\nexport default ListApplications;\n","import React from \"react\";\n\nimport { withStyles } from \"@material-ui/core/styles\";\nimport TextField from '@material-ui/core/TextField';\nimport FormControl from \"@material-ui/core/FormControl\";\nimport FormLabel from \"@material-ui/core/FormLabel\";\nimport FormHelperText from \"@material-ui/core/FormHelperText\";\nimport Typography from '@material-ui/core/Typography';\n\nimport {Controlled as CodeMirror} from \"react-codemirror2\";\nimport \"codemirror/mode/javascript/javascript\";\n\nimport FormComponent from \"../../classes/FormComponent\";\nimport Form from \"../../components/Form\";\nimport AutocompleteSelect from \"../../components/AutocompleteSelect\";\nimport ServiceProfileStore from \"../../stores/ServiceProfileStore\";\n\n\nconst styles = {\n codeMirror: {\n zIndex: 1,\n },\n formLabel: {\n fontSize: 12,\n },\n};\n\n\nclass ApplicationForm extends FormComponent {\n constructor() {\n super();\n this.getServiceProfileOption = this.getServiceProfileOption.bind(this);\n this.getServiceProfileOptions = this.getServiceProfileOptions.bind(this);\n this.getPayloadCodecOptions = this.getPayloadCodecOptions.bind(this);\n this.onCodeChange = this.onCodeChange.bind(this);\n }\n\n getServiceProfileOption(id, callbackFunc) {\n ServiceProfileStore.get(id, resp => {\n callbackFunc({label: resp.serviceProfile.name, value: resp.serviceProfile.id});\n });\n }\n\n getServiceProfileOptions(search, callbackFunc) {\n ServiceProfileStore.list(this.props.match.params.organizationID, 999, 0, resp => {\n const options = resp.result.map((sp, i) => {return {label: sp.name, value: sp.id}});\n callbackFunc(options);\n });\n }\n\n getPayloadCodecOptions(search, callbackFunc) {\n const payloadCodecOptions = [\n {value: \"\", label: \"None\"},\n {value: \"CAYENNE_LPP\", label: \"Cayenne LPP\"},\n {value: \"CUSTOM_JS\", label: \"Custom JavaScript codec functions\"},\n ];\n\n callbackFunc(payloadCodecOptions);\n }\n\n onCodeChange(field, editor, data, newCode) {\n let object = this.state.object;\n object[field] = newCode;\n this.setState({\n object: object,\n });\n }\n\n render() {\n if (this.state.object === undefined) {\n return();\n }\n\n const codeMirrorOptions = {\n lineNumbers: true,\n mode: \"javascript\",\n theme: \"default\",\n };\n \n let payloadEncoderScript = this.state.object.payloadEncoderScript;\n let payloadDecoderScript = this.state.object.payloadDecoderScript;\n\n if (payloadEncoderScript === \"\" || payloadEncoderScript === undefined) {\n payloadEncoderScript = `// Encode encodes the given object into an array of bytes.\n// - fPort contains the LoRaWAN fPort number\n// - obj is an object, e.g. {\"temperature\": 22.5}\n// The function must return an array of bytes, e.g. [225, 230, 255, 0]\nfunction Encode(fPort, obj) {\n return [];\n}`;\n }\n\n if (payloadDecoderScript === \"\" || payloadDecoderScript === undefined) {\n payloadDecoderScript = `// Decode decodes an array of bytes into an object.\n// - fPort contains the LoRaWAN fPort number\n// - bytes is an array of bytes, e.g. [225, 230, 255, 0]\n// The function must return an object, e.g. {\"temperature\": 22.5}\nfunction Decode(fPort, bytes) {\n return {};\n}`;\n }\n\n return(\n \n \n \n {!this.props.update && \n Service-profile\n \n \n The service-profile to which this application will be attached. Note that you can't change this value after the application has been created.\n \n }\n {this.state.object.payloadCodec !== \"\" && \n
\n Payload codec\n \n \n By defining a payload codec, LoRa App Server can encode and decode the binary device payload for you. \n Important note: the payload fields have moved to the device-profile. For backward-compatibility and migration, existing codec settings are still visible.\n Codec settings on the device-profile have priority over the application codec settings.\n \n \n {this.state.object.payloadCodec === \"CUSTOM_JS\" &&
\n \n \n The function must have the signature function Decode(fPort, bytes) and must return an object.\n LoRa App Server will convert this object to JSON.\n \n }\n {this.state.object.payloadCodec === \"CUSTOM_JS\" &&
\n \n \n The function must have the signature function Encode(fPort, obj) and must return an array\n of bytes.\n \n }\n
\n \n Headers\n {headers}\n \n \n \n Endpoints\n \n \n \n \n \n \n \n
\n );\n }\n}\n\n\nclass InfluxDBIntegrationForm extends FormComponent {\n onChange(e) {\n super.onChange(e);\n this.props.onChange(this.state.object);\n }\n\n getPrecisionOptions(search, callbackFunc) {\n const precisionOptions = [\n {value: \"NS\", label: \"Nanosecond\"},\n {value: \"U\", label: \"Microsecond\"},\n {value: \"MS\", label: \"Millisecond\"},\n {value: \"S\", label: \"Second\"},\n {value: \"M\", label: \"Minute\"},\n {value: \"H\", label: \"Hour\"},\n ];\n\n callbackFunc(precisionOptions);\n }\n\n render() {\n if (this.state.object === undefined) {\n return();\n }\n\n return(\n \n InfluxDB integration configuration\n \n \n \n \n \n \n Timestamp precision\n \n \n It is recommented to use the least precise precision possible as this can result in significant improvements in compression.\n \n \n \n );\n }\n}\n\nInfluxDBIntegrationForm = withStyles(styles)(InfluxDBIntegrationForm);\n\n\nclass ThingsBoardIntegrationForm extends FormComponent {\n onChange(e) {\n super.onChange(e);\n this.props.onChange(this.state.object);\n }\n\n render() {\n if (this.state.object === undefined) {\n return null;\n }\n\n return(\n \n ThingsBoard.io integration configuration\n \n \n Each device must have a 'ThingsBoardAccessToken' variable assigned. This access-token is generated by ThingsBoard.\n \n \n );\n }\n}\n\nThingsBoardIntegrationForm = withStyles(styles)(ThingsBoardIntegrationForm);\n\n\nclass IntegrationForm extends FormComponent {\n constructor() {\n super();\n this.getKindOptions = this.getKindOptions.bind(this);\n this.onFormChange = this.onFormChange.bind(this);\n }\n\n onFormChange(object) {\n this.setState({\n object: object,\n });\n }\n\n getKindOptions(search, callbackFunc) {\n const kindOptions = [\n {value: \"http\", label: \"HTTP integration\"},\n {value: \"influxdb\", label: \"InfluxDB integration\"},\n {value: \"thingsboard\", label: \"ThingsBoard.io\"},\n ];\n\n callbackFunc(kindOptions);\n }\n\n render() {\n if (this.state.object === undefined) {\n return();\n }\n\n return(\n \n {!this.props.update && \n Integration kind\n \n }\n {this.state.object.kind === \"http\" && }\n {this.state.object.kind === \"influxdb\" && }\n {this.state.object.kind === \"thingsboard\" && }\n \n );\n }\n}\n\nexport default withStyles(styles)(IntegrationForm);\n","import React, { Component } from \"react\";\nimport { withRouter } from 'react-router-dom';\n\nimport { withStyles } from \"@material-ui/core/styles\";\nimport Grid from '@material-ui/core/Grid';\nimport Card from '@material-ui/core/Card';\nimport CardContent from \"@material-ui/core/CardContent\";\n\nimport TitleBar from \"../../components/TitleBar\";\nimport TitleBarTitle from \"../../components/TitleBarTitle\";\n\nimport ApplicationStore from \"../../stores/ApplicationStore\";\nimport IntegrationForm from \"./IntegrationForm\";\n\n\nconst styles = {\n card: {\n overflow: \"visible\",\n },\n};\n\n\nclass CreateIntegration extends Component {\n constructor() {\n super();\n this.state = {};\n this.onSubmit = this.onSubmit.bind(this);\n }\n\n componentDidMount() {\n ApplicationStore.get(this.props.match.params.applicationID, resp => {\n this.setState({\n application: resp,\n });\n });\n }\n\n onSubmit(integration) {\n let integr = integration;\n integr.applicationID = this.props.match.params.applicationID;\n\n switch (integr.kind) {\n case \"http\":\n ApplicationStore.createHTTPIntegration(integr, resp => {\n this.props.history.push(`/organizations/${this.props.match.params.organizationID}/applications/${this.props.match.params.applicationID}/integrations`);\n });\n break;\n case \"influxdb\":\n ApplicationStore.createInfluxDBIntegration(integr, resp => {\n this.props.history.push(`/organizations/${this.props.match.params.organizationID}/applications/${this.props.match.params.applicationID}/integrations`);\n });\n break;\n case \"thingsboard\":\n ApplicationStore.createThingsBoardIntegration(integr, resp => {\n this.props.history.push(`/organizations/${this.props.match.params.organizationID}/applications/${this.props.match.params.applicationID}/integrations`);\n });\n break;\n default:\n break;\n }\n }\n\n render() {\n if (this.state.application === undefined) {\n return();\n }\n\n return(\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n }\n}\n\nexport default withStyles(styles)(withRouter(CreateIntegration));\n","import React, { Component } from 'react';\n\nimport Grid from '@material-ui/core/Grid';\nimport Card from '@material-ui/core/Card';\nimport CardContent from \"@material-ui/core/CardContent\";\n\nimport TitleBar from \"../../components/TitleBar\";\nimport TitleBarTitle from \"../../components/TitleBarTitle\";\nimport TitleBarButton from \"../../components/TitleBarButton\";\n\nimport ApplicationStore from \"../../stores/ApplicationStore\";\nimport IntegrationForm from \"./IntegrationForm\";\n\n\nclass UpdateIntegration extends Component {\n constructor() {\n super();\n this.state = {};\n this.onSubmit = this.onSubmit.bind(this);\n this.deleteIntegration = this.deleteIntegration.bind(this);\n }\n\n componentDidMount() {\n ApplicationStore.get(this.props.match.params.applicationID, resp => {\n this.setState({\n application: resp,\n });\n });\n\n switch (this.props.match.params.kind) {\n case \"http\":\n ApplicationStore.getHTTPIntegration(this.props.match.params.applicationID, resp => {\n let integration = resp.integration;\n integration.kind = \"http\";\n\n this.setState({\n integration: integration,\n });\n });\n break;\n case \"influxdb\":\n ApplicationStore.getInfluxDBIntegration(this.props.match.params.applicationID, resp => {\n let integration = resp.integration;\n integration.kind = \"influxdb\";\n\n this.setState({\n integration: integration,\n });\n });\n break;\n case \"thingsboard\":\n ApplicationStore.getThingsBoardIntegration(this.props.match.params.applicationID, resp => {\n let integration = resp.integration;\n integration.kind = \"thingsboard\";\n\n this.setState({\n integration: integration,\n });\n });\n break;\n default:\n break;\n }\n }\n\n onSubmit(integration) {\n switch (integration.kind) {\n case \"http\":\n ApplicationStore.updateHTTPIntegration(integration, resp => {\n this.props.history.push(`/organizations/${this.props.match.params.organizationID}/applications/${this.props.match.params.applicationID}/integrations`);\n });\n break;\n case \"influxdb\":\n ApplicationStore.updateInfluxDBIntegration(integration, resp => {\n this.props.history.push(`/organizations/${this.props.match.params.organizationID}/applications/${this.props.match.params.applicationID}/integrations`);\n });\n break;\n case \"thingsboard\":\n ApplicationStore.updateThingsBoardIntegration(integration, resp => {\n this.props.history.push(`/organizations/${this.props.match.params.organizationID}/applications/${this.props.match.params.applicationID}/integrations`);\n });\n break;\n default:\n break;\n }\n }\n\n deleteIntegration() {\n if (window.confirm(\"Are you sure you want to delete this integration?\")) {\n switch(this.props.match.params.kind) {\n case \"http\":\n ApplicationStore.deleteHTTPIntegration(this.props.match.params.applicationID, resp => {\n this.props.history.push(`/organizations/${this.props.match.params.organizationID}/applications/${this.props.match.params.applicationID}/integrations`);\n });\n break;\n case \"influxdb\":\n ApplicationStore.deleteInfluxDBIntegration(this.props.match.params.applicationID, resp => {\n this.props.history.push(`/organizations/${this.props.match.params.organizationID}/applications/${this.props.match.params.applicationID}/integrations`);\n });\n break;\n case \"thingsboard\":\n ApplicationStore.deleteThingsBoardIntegration(this.props.match.params.applicationID, resp => {\n this.props.history.push(`/organizations/${this.props.match.params.organizationID}/applications/${this.props.match.params.applicationID}/integrations`);\n });\n break;\n default:\n break;\n }\n }\n }\n\n render() {\n if (this.state.application === undefined || this.state.integration === undefined) {\n return();\n }\n\n return(\n \n ,\n ]}\n >\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n }\n}\n\nexport default UpdateIntegration;\n","import { EventEmitter } from \"events\";\n\nimport Swagger from \"swagger-client\";\n\nimport sessionStore from \"./SessionStore\";\nimport {checkStatus, errorHandler } from \"./helpers\";\nimport dispatcher from \"../dispatcher\";\n\n\nclass MulticastGroupStore extends EventEmitter {\n constructor() {\n super();\n this.swagger = new Swagger(\"/swagger/multicastGroup.swagger.json\", sessionStore.getClientOpts());\n }\n\n create(multicastGroup, callbackFunc) {\n this.swagger.then(client => {\n client.apis.MulticastGroupService.Create({\n body: {\n multicastGroup: multicastGroup,\n },\n })\n .then(checkStatus)\n .then(resp => {\n this.notify(\"created\");\n callbackFunc(resp.obj);\n })\n .catch(errorHandler);\n });\n }\n\n get(id, callbackFunc) {\n this.swagger.then(client => {\n client.apis.MulticastGroupService.Get({\n id: id,\n })\n .then(checkStatus)\n .then(resp => {\n callbackFunc(resp.obj);\n })\n .catch(errorHandler);\n });\n }\n\n update(multicastGroup, callbackFunc) {\n this.swagger.then(client => {\n client.apis.MulticastGroupService.Update({\n \"multicast_group.id\": multicastGroup.id,\n body: {\n multicastGroup: multicastGroup,\n },\n })\n .then(checkStatus)\n .then(resp => {\n this.notify(\"updated\");\n callbackFunc(resp.obj);\n })\n .catch(errorHandler);\n });\n }\n\n delete(id, callbackFunc) {\n this.swagger.then(client => {\n client.apis.MulticastGroupService.Delete({\n id: id,\n })\n .then(checkStatus)\n .then(resp => {\n this.notify(\"deleted\");\n callbackFunc(resp.obj);\n })\n .catch(errorHandler);\n });\n }\n\n list(search, organizationID, serviceProfileID, devEUI, limit, offset, callbackFunc) {\n this.swagger.then(client => {\n client.apis.MulticastGroupService.List({\n limit: limit,\n offset: offset,\n organizationID: organizationID,\n serviceProfileID: serviceProfileID,\n devEUI: devEUI,\n search: search,\n })\n .then(checkStatus)\n .then(resp => {\n callbackFunc(resp.obj);\n })\n .catch(errorHandler);\n });\n }\n\n addDevice(multicastGroupID, devEUI, callbackFunc) {\n this.swagger.then(client => {\n client.apis.MulticastGroupService.AddDevice({\n multicast_group_id: multicastGroupID,\n body: {\n devEUI: devEUI,\n },\n })\n .then(checkStatus)\n .then(resp => {\n this.notifyDevice(\"added to\");\n callbackFunc(resp.obj);\n })\n .catch(errorHandler);\n });\n }\n\n removeDevice(multicastGroupID, devEUI, callbackFunc) {\n this.swagger.then(client => {\n client.apis.MulticastGroupService.RemoveDevice({\n multicast_group_id: multicastGroupID,\n dev_eui: devEUI,\n })\n .then(checkStatus)\n .then(resp => {\n this.notifyDevice(\"removed from\");\n callbackFunc(resp.obj);\n })\n .catch(errorHandler);\n });\n }\n\n notify(action) {\n dispatcher.dispatch({\n type: \"CREATE_NOTIFICATION\",\n notification: {\n type: \"success\",\n message: \"multicast-group has been \" + action,\n },\n });\n }\n\n notifyDevice(action) {\n dispatcher.dispatch({\n type: \"CREATE_NOTIFICATION\",\n notification: {\n type: \"success\",\n message: \"device has been \" + action + \" multicast-group\",\n },\n });\n }\n}\n\n\nconst multicastGroupStore = new MulticastGroupStore();\nexport default multicastGroupStore;\n","import React, { Component } from \"react\";\n\nimport { withStyles } from \"@material-ui/core/styles\";\nimport Grid from \"@material-ui/core/Grid\";\nimport TableCell from \"@material-ui/core/TableCell\";\nimport TableRow from \"@material-ui/core/TableRow\";\n\nimport Plus from \"mdi-material-ui/Plus\";\n\nimport TitleBar from \"../../components/TitleBar\";\nimport TitleBarTitle from \"../../components/TitleBarTitle\";\nimport TableCellLink from \"../../components/TableCellLink\";\nimport TitleBarButton from \"../../components/TitleBarButton\";\nimport DataTable from \"../../components/DataTable\";\nimport Admin from \"../../components/Admin\";\nimport MulticastGroupStore from \"../../stores/MulticastGroupStore\";\nimport theme from \"../../theme\";\n\n\nconst styles = {\n idColumn: {\n width: theme.spacing(45),\n whiteSpace: \"nowrap\",\n },\n};\n\n\nclass ListMulticastGroups extends Component {\n constructor() {\n super();\n this.getPage = this.getPage.bind(this);\n this.getRow = this.getRow.bind(this);\n }\n\n getPage(limit, offset, callbackFunc) {\n MulticastGroupStore.list(\"\", this.props.match.params.organizationID, \"\", \"\", limit, offset, callbackFunc);\n }\n\n getRow(obj) {\n return(\n \n {obj.id}\n {obj.name}\n {obj.serviceProfileName}\n \n );\n }\n\n render() {\n return(\n \n \n }\n to={`/organizations/${this.props.match.params.organizationID}/multicast-groups/create`}\n />\n \n }\n >\n \n \n \n \n ID\n Name\n Service-profile\n \n }\n getPage={this.getPage}\n getRow={this.getRow}\n />\n \n \n );\n }\n}\n\nexport default withStyles(styles)(ListMulticastGroups);\n","import React, { Component } from \"react\";\n\nimport TextField from \"@material-ui/core/TextField\";\nimport InputAdornment from '@material-ui/core/InputAdornment';\nimport IconButton from '@material-ui/core/IconButton';\nimport Button from \"@material-ui/core/Button\";\nimport Tooltip from '@material-ui/core/Tooltip';\n\nimport Refresh from \"mdi-material-ui/Refresh\";\n\nimport MaskedInput from \"react-text-mask\";\n\n\nclass DevAddrMask extends Component {\n render() {\n const { inputRef, ...other } = this.props;\n\n return(\n \n );\n }\n}\n\n\nclass DevAddrField extends Component {\n constructor() {\n super();\n\n this.state = {\n msb: true,\n value: \"\",\n };\n }\n\n toggleByteOrder = () => {\n this.setState({\n msb: !this.state.msb,\n });\n\n const bytes = this.state.value.match(/[A-Fa-f0-9]{2}/g);\n if (bytes !== null) {\n this.setState({\n value: bytes.reverse().join(\" \"),\n });\n }\n }\n\n randomKey = () => {\n this.props.randomFunc((k) => {\n let key = k;\n const bytes = key.match(/[\\w]{2}/g);\n if(!this.state.msb && bytes !== null) {\n key = bytes.reverse().join(\"\");\n }\n\n this.setState({\n value: key,\n });\n\n this.props.onChange({\n target: {\n value: k,\n type: \"text\",\n id: this.props.id,\n },\n });\n });\n }\n\n onChange = (e) => {\n this.setState({\n value: e.target.value,\n });\n\n let str = \"\";\n\n const bytes = e.target.value.match(/[\\w]{2}/g);\n if (!this.state.msb && bytes !== null) {\n str = bytes.reverse().join(\"\");\n } else if (bytes !== null) {\n str = bytes.join(\"\");\n } else {\n str = \"\";\n }\n\n this.props.onChange({\n target: {\n value: str,\n type: \"text\",\n id: this.props.id,\n },\n });\n }\n\n componentDidMount() {\n this.setState({\n value: this.props.value || \"\",\n });\n }\n\n render() {\n return(\n \n \n \n {this.state.msb ? \"MSB\": \"LSB\"}\n \n \n {this.props.random && !this.props.disabled && \n \n \n \n }\n \n }}\n {...this.props}\n onChange={this.onChange}\n value={this.state.value}\n disabled={this.props.disabled}\n />\n );\n }\n}\n\nexport default DevAddrField;\n","import React from \"react\";\n\nimport { withStyles } from \"@material-ui/core/styles\";\nimport TextField from '@material-ui/core/TextField';\nimport FormControl from \"@material-ui/core/FormControl\";\nimport FormLabel from \"@material-ui/core/FormLabel\";\nimport FormHelperText from \"@material-ui/core/FormHelperText\";\n\nimport FormComponent from \"../../classes/FormComponent\";\nimport AESKeyField from \"../../components/AESKeyField\";\nimport DevAddrField from \"../../components/DevAddrField\";\nimport Form from \"../../components/Form\";\nimport AutocompleteSelect from \"../../components/AutocompleteSelect\";\nimport ServiceProfileStore from \"../../stores/ServiceProfileStore\";\nimport theme from \"../../theme\";\n\n\nconst styles = {\n formLabel: {\n fontSize: 12,\n },\n link: {\n color: theme.palette.primary.main,\n },\n};\n\n\nclass MulticastGroupForm extends FormComponent {\n constructor() {\n super();\n this.getServiceProfileOption = this.getServiceProfileOption.bind(this);\n this.getServiceProfileOptions = this.getServiceProfileOptions.bind(this);\n }\n\n getServiceProfileOption(id, callbackFunc) {\n ServiceProfileStore.get(id, resp => {\n callbackFunc({label: resp.serviceProfile.name, value: resp.serviceProfile.id});\n });\n }\n\n getServiceProfileOptions(search, callbackFunc) {\n ServiceProfileStore.list(this.props.match.params.organizationID, 999, 0, resp => {\n const options = resp.result.map((sp, i) => {return {label: sp.name, value: sp.id}});\n callbackFunc(options);\n });\n }\n\n getRandomKey(len) {\n let key = \"\";\n const possible = 'abcdef0123456789';\n\n for(let i = 0; i < len; i++){\n key += possible.charAt(Math.floor(Math.random() * possible.length));\n }\n\n return key;\n }\n\n getRandomMcAddr = (cb) => {\n cb(this.getRandomKey(8));\n }\n\n getRandomSessionKey = (cb) => {\n cb(this.getRandomKey(32));\n }\n\n\n getGroupTypeOptions(search, callbackFunc) {\n const options = [\n {value: \"CLASS_B\", label: \"Class-B\"},\n {value: \"CLASS_C\", label: \"Class-C\"},\n ];\n\n callbackFunc(options);\n }\n\n getPingSlotPeriodOptions(search, callbackFunc) {\n const pingSlotPeriodOptions = [\n {value: 32 * 1, label: \"every second\"},\n {value: 32 * 2, label: \"every 2 seconds\"},\n {value: 32 * 4, label: \"every 4 seconds\"},\n {value: 32 * 8, label: \"every 8 seconds\"},\n {value: 32 * 16, label: \"every 16 seconds\"},\n {value: 32 * 32, label: \"every 32 seconds\"},\n {value: 32 * 64, label: \"every 64 seconds\"},\n {value: 32 * 128, label: \"every 128 seconds\"},\n ];\n\n callbackFunc(pingSlotPeriodOptions);\n }\n\n render() {\n if (this.state.object === undefined) {\n return null;\n }\n\n return(\n \n \n {!this.props.update && \n Service-profile \n \n \n The service-profile to which this multicast-group will be attached. Note that you can't change this value after the multicast-group has been created.\n \n }\n \n \n \n \n \n \n \n Multicast-group type\n \n \n The multicast-group type defines the way how multicast frames are scheduled by the network-server.\n \n \n {this.state.object.groupType === \"CLASS_B\" && \n Class-B ping-slot periodicity\n \n Class-B ping-slot periodicity.\n }\n \n );\n }\n}\n\nexport default withStyles(styles)(MulticastGroupForm);\n","import React, { Component } from \"react\";\nimport { withRouter, Link } from 'react-router-dom';\n\nimport { withStyles } from \"@material-ui/core/styles\";\nimport Grid from '@material-ui/core/Grid';\nimport Card from '@material-ui/core/Card';\nimport CardContent from \"@material-ui/core/CardContent\";\nimport Dialog from '@material-ui/core/Dialog';\nimport DialogActions from '@material-ui/core/DialogActions';\nimport DialogContent from '@material-ui/core/DialogContent';\nimport DialogContentText from '@material-ui/core/DialogContentText';\nimport DialogTitle from '@material-ui/core/DialogTitle';\nimport Button from \"@material-ui/core/Button\";\n\nimport TitleBar from \"../../components/TitleBar\";\nimport TitleBarTitle from \"../../components/TitleBarTitle\";\n\nimport MulticastGroupForm from \"./MulticastGroupForm\";\nimport ServiceProfileStore from \"../../stores/ServiceProfileStore\";\nimport MulticastGroupStore from \"../../stores/MulticastGroupStore\";\n\n\nconst styles = {\n card: {\n overflow: \"visible\",\n },\n};\n\n\nclass CreateMulticastGroup extends Component {\n constructor() {\n super();\n this.state = {\n spDialog: false,\n };\n this.onSubmit = this.onSubmit.bind(this);\n this.closeDialog = this.closeDialog.bind(this);\n }\n\n componentDidMount() {\n ServiceProfileStore.list(this.props.match.params.organizationID, 0, 0, resp => {\n if (resp.totalCount === \"0\") {\n this.setState({\n spDialog: true,\n });\n }\n });\n }\n\n closeDialog() {\n this.setState({\n spDialog: false,\n });\n }\n\n onSubmit(multicastGroup) {\n MulticastGroupStore.create(multicastGroup, resp => {\n this.props.history.push(`/organizations/${this.props.match.params.organizationID}/multicast-groups`);\n });\n }\n\n render() {\n return(\n \n \n Add a service-profile?\n \n \n The selected organization does not have a service-profile yet.\n A service-profile connects an organization to a network-server and defines the features that an organization can use on this network-server.\n \n \n Would you like to create a service-profile?\n \n \n \n \n \n \n \n\n \n \n \n \n \n\n \n \n \n \n \n \n \n \n );\n }\n}\n\nexport default withStyles(styles)(withRouter(CreateMulticastGroup));\n","import React, { Component } from \"react\";\nimport { withRouter } from 'react-router-dom';\n\nimport { withStyles } from \"@material-ui/core/styles\";\nimport Grid from '@material-ui/core/Grid';\nimport Card from '@material-ui/core/Card';\nimport CardContent from \"@material-ui/core/CardContent\";\n\nimport MulticastGroupStore from \"../../stores/MulticastGroupStore\";\nimport MulticastGroupForm from \"./MulticastGroupForm\";\n\n\nconst styles = {\n card: {\n overflow: \"visible\",\n },\n};\n\n\nclass UpdateMulticastGroup extends Component {\n constructor() {\n super();\n this.onSubmit = this.onSubmit.bind(this);\n }\n\n onSubmit(multicastGroup) {\n MulticastGroupStore.update(multicastGroup, resp => {\n this.props.history.push(`/organizations/${this.props.match.params.organizationID}/multicast-groups/${this.props.match.params.multicastGroupID}`);\n });\n }\n\n render() {\n return(\n \n \n \n \n \n \n \n \n \n );\n }\n}\n\nexport default withStyles(styles)(withRouter(UpdateMulticastGroup));\n","import React, { Component } from \"react\";\nimport { Link } from \"react-router-dom\";\n\nimport { withStyles } from \"@material-ui/core/styles\";\nimport Grid from \"@material-ui/core/Grid\";\nimport TableCell from \"@material-ui/core/TableCell\";\nimport TableRow from \"@material-ui/core/TableRow\";\nimport Button from '@material-ui/core/Button';\nimport IconButton from \"@material-ui/core/IconButton\";\n\nimport Plus from \"mdi-material-ui/Plus\";\nimport Delete from \"mdi-material-ui/Delete\";\n\nimport Admin from \"../../components/Admin\";\nimport TableCellLink from \"../../components/TableCellLink\";\nimport DataTable from \"../../components/DataTable\";\nimport DeviceStore from \"../../stores/DeviceStore\";\nimport theme from \"../../theme\";\nimport multicastGroupStore from \"../../stores/MulticastGroupStore\";\n\n\nconst styles = {\n buttons: {\n textAlign: \"right\",\n },\n button: {\n marginLeft: 2 * theme.spacing(1),\n },\n icon: {\n marginRight: theme.spacing(1),\n },\n};\n\n\n\nclass ListMulticastGroupDevices extends Component {\n constructor() {\n super();\n this.getPage = this.getPage.bind(this);\n this.getRow = this.getRow.bind(this);\n }\n\n getPage(limit, offset, callbackFunc) {\n DeviceStore.list({\n multicastGroupID: this.props.match.params.multicastGroupID,\n limit: limit,\n offset: offset,\n }, callbackFunc);\n }\n\n onDelete(devEUI) {\n if(window.confirm(\"Are you sure you want to remove this device from the multicast-group? This does not remove the device itself.\")) {\n multicastGroupStore.removeDevice(this.props.match.params.multicastGroupID, devEUI, resp => {\n this.forceUpdate();\n });\n }\n }\n\n getRow(obj) {\n return(\n \n {obj.name}\n {obj.devEUI}\n \n \n \n \n );\n }\n\n render() {\n return(\n \n \n \n \n \n \n \n \n Device name\n Device EUI\n \n \n }\n getPage={this.getPage}\n getRow={this.getRow}\n />\n \n \n );\n }\n}\n\nexport default withStyles(styles)(ListMulticastGroupDevices);\n","import React, { Component } from \"react\";\nimport { Route, Switch, Link, withRouter } from \"react-router-dom\";\n\nimport { withStyles } from \"@material-ui/core/styles\";\nimport Grid from '@material-ui/core/Grid';\nimport Tabs from '@material-ui/core/Tabs';\nimport Tab from '@material-ui/core/Tab';\n\nimport Delete from \"mdi-material-ui/Delete\";\n\nimport TitleBar from \"../../components/TitleBar\";\nimport TitleBarTitle from \"../../components/TitleBarTitle\";\nimport TitleBarButton from \"../../components/TitleBarButton\";\nimport Admin from \"../../components/Admin\";\n\nimport MulticastGroupStore from \"../../stores/MulticastGroupStore\";\nimport SessionStore from \"../../stores/SessionStore\";\nimport UpdateMulticastGroup from \"./UpdateMulticastGroup\";\nimport theme from \"../../theme\";\nimport ListMulticastGroupDevices from \"./ListMulticastGroupDevices\";\n\n\nconst styles = {\n tabs: {\n borderBottom: \"1px solid \" + theme.palette.divider,\n height: \"48px\",\n overflow: \"visible\",\n },\n};\n\n\nclass MulticastGroupLayout extends Component {\n constructor() {\n super();\n this.state = {\n tab: 0,\n admin: false,\n };\n\n this.locationToTab = this.locationToTab.bind(this);\n this.onChangeTab = this.onChangeTab.bind(this);\n this.deleteMulticastGroup = this.deleteMulticastGroup.bind(this);\n this.setIsAdmin = this.setIsAdmin.bind(this);\n }\n\n componentDidMount() {\n MulticastGroupStore.get(this.props.match.params.multicastGroupID, resp => {\n this.setState({\n multicastGroup: resp,\n });\n });\n\n SessionStore.on(\"change\", this.setIsAdmin);\n this.setIsAdmin();\n }\n\n componentWillUnmount() {\n SessionStore.removeListener(\"change\", this.setIsAdmin);\n }\n\n componentDidUpdate(oldProps) {\n if (this.props === oldProps) {\n return;\n }\n this.locationToTab();\n }\n\n setIsAdmin() {\n this.setState({\n admin: SessionStore.isAdmin() || SessionStore.isOrganizationAdmin(this.props.match.params.organizationID),\n });\n }\n\n locationToTab() {\n let tab = 0;\n\n if (window.location.href.endsWith(\"/edit\")) {\n tab = 1;\n }\n\n this.setState({\n tab: tab,\n });\n }\n\n onChangeTab(e, v) {\n this.setState({\n tab: v,\n });\n }\n\n deleteMulticastGroup() {\n if (window.confirm(\"Are you sure you want to delete this multicast-group?\")) {\n MulticastGroupStore.delete(this.props.match.params.multicastGroupID, resp => {\n this.props.history.push(`/organizations/${this.props.match.params.organizationID}/multicast-groups`);\n });\n }\n }\n\n render() {\n if (this.state.multicastGroup === undefined) {\n return null;\n }\n\n return(\n \n \n }\n color=\"secondary\"\n onClick={this.deleteMulticastGroup}\n />\n \n }\n >\n \n \n \n \n\n \n \n \n {this.state.admin && }\n \n \n\n \n \n } />\n } />\n \n \n \n );\n }\n}\n\nexport default withStyles(styles)(withRouter(MulticastGroupLayout));\n","import React, { Component } from \"react\";\nimport { withRouter } from 'react-router-dom';\n\nimport { withStyles } from \"@material-ui/core/styles\";\nimport Grid from '@material-ui/core/Grid';\nimport Card from '@material-ui/core/Card';\nimport CardContent from \"@material-ui/core/CardContent\";\nimport FormControl from \"@material-ui/core/FormControl\";\nimport FormLabel from \"@material-ui/core/FormLabel\";\nimport FormHelperText from \"@material-ui/core/FormHelperText\";\n\nimport Form from \"../../components/Form\";\nimport TitleBar from \"../../components/TitleBar\";\nimport TitleBarTitle from \"../../components/TitleBarTitle\";\nimport FormComponent from \"../../classes/FormComponent\";\nimport MulticastGroupStore from \"../../stores/MulticastGroupStore\";\nimport DeviceStore from \"../../stores/DeviceStore\";\nimport AutocompleteSelect from \"../../components/AutocompleteSelect\";\n\n\nconst styles = {\n card: {\n overflow: \"visible\",\n },\n formLabel: {\n fontSize: 12,\n },\n};\n\n\nclass AddDeviceForm extends FormComponent {\n constructor() {\n super();\n\n this.getDeviceOption = this.getDeviceOption.bind(this);\n this.getDeviceOptions = this.getDeviceOptions.bind(this);\n }\n\n getDeviceOption(devEUI, callbackFunc) {\n DeviceStore.get(devEUI, resp => {\n callbackFunc({label: `${resp.device.name} (${resp.device.devEUI})`, value: resp.device.devEUI});\n });\n }\n\n getDeviceOptions(search, callbackFunc) {\n DeviceStore.list({serviceProfileID: this.props.serviceProfileID, search: search, limit: 10}, resp => {\n const options = resp.result.map((d, i) => {return {label: `${d.name} (${d.devEUI})`, value: d.devEUI}});\n callbackFunc(options);\n });\n }\n\n render() {\n if (this.state.object === undefined) {\n return null;\n }\n\n return(\n \n \n Device\n \n Search on device by it's name or device EUI. Only devices part of the same service-profile as the multicast-group can be added (and are visible).\n \n \n );\n }\n}\n\nAddDeviceForm = withStyles(styles)(AddDeviceForm);\n\n\nclass AddDeviceToMulticastGroup extends Component {\n constructor() {\n super();\n this.state = {};\n this.onSubmit = this.onSubmit.bind(this);\n }\n\n componentDidMount() {\n MulticastGroupStore.get(this.props.match.params.multicastGroupID, resp => {\n this.setState({\n multicastGroup: resp.multicastGroup,\n });\n });\n }\n\n onSubmit(device) {\n MulticastGroupStore.addDevice(this.props.match.params.multicastGroupID, device.devEUI, resp => {\n this.props.history.push(`/organizations/${this.props.match.params.organizationID}/multicast-groups/${this.props.match.params.multicastGroupID}`);\n });\n }\n\n render() {\n if (this.state.multicastGroup === undefined) {\n return null;\n }\n\n return(\n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n );\n }\n}\n\nexport default withStyles(styles)(withRouter(AddDeviceToMulticastGroup))\n","import React from \"react\";\n\nimport { withStyles } from \"@material-ui/core/styles\";\nimport TextField from '@material-ui/core/TextField';\nimport FormControl from \"@material-ui/core/FormControl\";\nimport FormControlLabel from \"@material-ui/core/FormControlLabel\";\nimport FormLabel from \"@material-ui/core/FormLabel\";\nimport FormHelperText from \"@material-ui/core/FormHelperText\";\nimport Checkbox from \"@material-ui/core/Checkbox\";\nimport FormGroup from \"@material-ui/core/FormGroup\";\nimport Tabs from '@material-ui/core/Tabs';\nimport Tab from '@material-ui/core/Tab';\nimport Button from \"@material-ui/core/Button\";\nimport Grid from \"@material-ui/core/Grid\";\nimport IconButton from '@material-ui/core/IconButton';\nimport Typography from \"@material-ui/core/Typography\";\n\nimport Delete from \"mdi-material-ui/Delete\";\n\nimport FormComponent from \"../../classes/FormComponent\";\nimport Form from \"../../components/Form\";\nimport EUI64Field from \"../../components/EUI64Field\";\nimport AutocompleteSelect from \"../../components/AutocompleteSelect\";\nimport DeviceProfileStore from \"../../stores/DeviceProfileStore\";\n\nimport theme from \"../../theme\";\n\n\nconst styles = {\n formLabel: {\n fontSize: 12,\n },\n delete: {\n marginTop: 3 * theme.spacing(1),\n },\n};\n\nclass DeviceKVForm extends FormComponent {\n onChange(e) {\n super.onChange(e);\n\n this.props.onChange(this.props.index, this.state.object);\n }\n\n onDelete = (e) => {\n e.preventDefault();\n this.props.onDelete(this.props.index);\n }\n\n render() {\n if (this.state.object === undefined) {\n return null;\n }\n\n return(\n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n }\n}\n\nDeviceKVForm = withStyles(styles)(DeviceKVForm);\n\n\nclass DeviceForm extends FormComponent {\n constructor() {\n super();\n this.getDeviceProfileOption = this.getDeviceProfileOption.bind(this);\n this.getDeviceProfileOptions = this.getDeviceProfileOptions.bind(this);\n\n this.state = {\n tab: 0,\n variables: [],\n tags: [],\n };\n }\n\n componentDidMount() {\n super.componentDidMount();\n\n this.setKVArrays(this.props.object || {});\n }\n\n componentDidUpdate(prevProps) {\n super.componentDidUpdate(prevProps);\n\n if (prevProps.object !== this.props.object) {\n this.setKVArrays(this.props.object || {});\n }\n }\n\n setKVArrays = (props) => {\n let variables = [];\n let tags = [];\n\n if (props.variables !== undefined) {\n for (let key in props.variables) {\n variables.push({key: key, value: props.variables[key]});\n }\n }\n\n if (props.tags !== undefined) {\n for (let key in props.tags) {\n tags.push({key: key, value: props.tags[key]});\n }\n }\n\n this.setState({\n variables: variables,\n tags: tags,\n });\n }\n\n getDeviceProfileOption(id, callbackFunc) {\n DeviceProfileStore.get(id, resp => {\n callbackFunc({label: resp.deviceProfile.name, value: resp.deviceProfile.id});\n });\n }\n\n getDeviceProfileOptions(search, callbackFunc) {\n DeviceProfileStore.list(0, this.props.match.params.applicationID, 999, 0, resp => {\n const options = resp.result.map((dp, i) => {return {label: dp.name, value: dp.id}});\n callbackFunc(options);\n });\n }\n\n onTabChange = (e, v) => {\n this.setState({\n tab: v,\n });\n }\n\n addKV = (name) => {\n return (e) => {\n e.preventDefault();\n\n let kvs = this.state[name];\n kvs.push({});\n\n let obj = {};\n obj[name] = kvs;\n\n this.setState(obj);\n };\n }\n\n onChangeKV = (name) => {\n return (index, obj) => {\n let kvs = this.state[name];\n let object = this.state.object;\n\n kvs[index] = obj;\n\n object[name] = {};\n kvs.forEach((obj, i) => {\n object[name][obj.key] = obj.value;\n });\n\n let ss = {\n object: object,\n };\n ss[name] = kvs;\n\n console.log(ss);\n\n this.setState(ss);\n };\n }\n\n onDeleteKV = (name) => {\n return (index) => {\n let kvs = this.state[name];\n let object = this.state.object;\n\n kvs.splice(index, 1);\n\n object[name] = {};\n kvs.forEach((obj, i) => {\n object[name][obj.key] = obj.value;\n });\n\n let ss = {\n object: object,\n };\n ss[name] = kvs;\n\n this.setState(ss);\n };\n }\n\n render() {\n if (this.state.object === undefined) {\n return null;\n }\n\n const variables = this.state.variables.map((obj, i) => );\n const tags = this.state.tags.map((obj, i) => );\n\n return(\n \n \n \n \n \n \n\n {this.state.tab === 0 && \n
\n
\n {!this.props.update &&
}\n
\n Device-profile\n \n \n
\n \n \n }\n />\n \n \n Note that disabling the frame-counter validation will compromise security as it enables people to perform replay-attacks.\n \n \n
\n \n \n Variables can be used to substitute placeholders in for example integrations, e.g. in case an integration requires the configuration of a device specific token.\n \n {variables}\n \n \n
}\n\n {this.state.tab === 2 && \n \n \n Tags can be used as device filters and are exposed on events as additional meta-data for aggregation.\n \n {tags}\n \n \n
}\n \n );\n }\n}\n\nexport default withStyles(styles)(DeviceForm);\n","import React, { Component } from \"react\";\nimport { withRouter, Link } from 'react-router-dom';\n\nimport { withStyles } from \"@material-ui/core/styles\";\nimport Grid from '@material-ui/core/Grid';\nimport Card from '@material-ui/core/Card';\nimport CardContent from \"@material-ui/core/CardContent\";\nimport Dialog from '@material-ui/core/Dialog';\nimport DialogActions from '@material-ui/core/DialogActions';\nimport DialogContent from '@material-ui/core/DialogContent';\nimport DialogContentText from '@material-ui/core/DialogContentText';\nimport DialogTitle from '@material-ui/core/DialogTitle';\nimport Button from \"@material-ui/core/Button\";\n\nimport TitleBar from \"../../components/TitleBar\";\nimport TitleBarTitle from \"../../components/TitleBarTitle\";\n\nimport ApplicationStore from \"../../stores/ApplicationStore\";\nimport DeviceProfileStore from \"../../stores/DeviceProfileStore\";\nimport DeviceStore from \"../../stores/DeviceStore\";\nimport DeviceForm from \"./DeviceForm\";\n\n\nconst styles = {\n card: {\n overflow: \"visible\",\n },\n};\n\n\nclass CreateDevice extends Component {\n constructor() {\n super();\n this.state = {\n dpDialog: false,\n };\n this.state = {};\n this.onSubmit = this.onSubmit.bind(this);\n this.closeDialog = this.closeDialog.bind(this);\n }\n\n componentDidMount() {\n ApplicationStore.get(this.props.match.params.applicationID, resp => {\n this.setState({\n application: resp,\n });\n });\n\n DeviceProfileStore.list(0, this.props.match.params.applicationID, 0, 0, resp => {\n if (resp.totalCount === \"0\") {\n this.setState({\n dpDialog: true,\n });\n }\n });\n }\n\n closeDialog() {\n this.setState({\n dpDialog: false,\n });\n }\n\n onSubmit(device) {\n let dev = device;\n dev.applicationID = this.props.match.params.applicationID;\n\n DeviceStore.create(dev, resp => {\n DeviceProfileStore.get(dev.deviceProfileID, resp => {\n if (resp.deviceProfile.supportsJoin) {\n this.props.history.push(`/organizations/${this.props.match.params.organizationID}/applications/${this.props.match.params.applicationID}/devices/${dev.devEUI}/keys`);\n } else {\n this.props.history.push(`/organizations/${this.props.match.params.organizationID}/applications/${this.props.match.params.applicationID}/devices/${dev.devEUI}/activation`);\n }\n });\n\n });\n }\n\n render() {\n if (this.state.application === undefined) {\n return();\n }\n\n return(\n \n \n Add a device-profile?\n \n \n The selected application does not have access to any device-profiles.\n A device-profile defines the capabilities and boot parameters of a device. You can create multiple device-profiles for different kind of devices.\n \n \n Would you like to create a device-profile?\n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n );\n }\n}\n\nexport default withStyles(styles)(withRouter(CreateDevice));\n","import React, { Component } from \"react\";\nimport { withRouter } from 'react-router-dom';\n\nimport { withStyles } from \"@material-ui/core/styles\";\nimport Grid from '@material-ui/core/Grid';\nimport Card from '@material-ui/core/Card';\nimport CardContent from \"@material-ui/core/CardContent\";\n\nimport DeviceStore from \"../../stores/DeviceStore\";\nimport DeviceForm from \"./DeviceForm\";\n\n\nconst styles = {\n card: {\n overflow: \"visible\",\n },\n};\n\n\nclass UpdateDevice extends Component {\n constructor() {\n super();\n this.onSubmit = this.onSubmit.bind(this);\n }\n\n onSubmit(device) {\n DeviceStore.update(device, resp => {\n this.props.history.push(`/organizations/${this.props.match.params.organizationID}/applications/${this.props.match.params.applicationID}/devices/${this.props.match.params.devEUI}`);\n });\n }\n\n render() {\n return(\n \n \n \n \n \n \n \n \n \n );\n }\n}\n\nexport default withStyles(styles)(withRouter(UpdateDevice));\n","import React, { Component } from \"react\";\nimport { withRouter } from 'react-router-dom';\n\nimport Grid from '@material-ui/core/Grid';\nimport Card from '@material-ui/core/Card';\nimport CardContent from \"@material-ui/core/CardContent\";\n\nimport FormComponent from \"../../classes/FormComponent\";\nimport Form from \"../../components/Form\";\nimport AESKeyField from \"../../components/AESKeyField\";\nimport DeviceStore from \"../../stores/DeviceStore\";\n\n\nclass LW11DeviceKeysForm extends FormComponent {\n render() {\n let object = {};\n if (this.props.object !== undefined) {\n object = this.props.object;\n }\n\n return(\n \n \n \n \n );\n }\n}\n\nclass LW10DeviceKeysForm extends FormComponent {\n render() {\n let object = {};\n if (this.props.object !== undefined) {\n object = this.props.object;\n }\n\n return(\n \n \n \n \n );\n }\n}\n\n\nclass DeviceKeys extends Component {\n constructor() {\n super();\n this.state = {\n update: false,\n };\n this.onSubmit = this.onSubmit.bind(this);\n }\n\n componentDidMount() {\n DeviceStore.getKeys(this.props.match.params.devEUI, resp => {\n if (resp === null) {\n this.setState({\n deviceKeys: {\n deviceKeys: {},\n },\n });\n } else {\n this.setState({\n update: true,\n deviceKeys: resp,\n });\n }\n });\n }\n\n onSubmit(deviceKeys) {\n if (this.state.update) {\n DeviceStore.updateKeys(deviceKeys, resp => {\n this.props.history.push(`/organizations/${this.props.match.params.organizationID}/applications/${this.props.match.params.applicationID}`);\n });\n } else {\n let keys = deviceKeys;\n keys.devEUI = this.props.match.params.devEUI;\n DeviceStore.createKeys(keys, resp => {\n this.props.history.push(`/organizations/${this.props.match.params.organizationID}/applications/${this.props.match.params.applicationID}`);\n });\n }\n }\n\n render() {\n if (this.state.deviceKeys === undefined) {\n return null;\n }\n\n return(\n \n \n \n \n {this.props.deviceProfile.macVersion.startsWith(\"1.0\") && }\n {this.props.deviceProfile.macVersion.startsWith(\"1.1\") && }\n \n \n \n \n );\n }\n}\n\nexport default withRouter(DeviceKeys);\n","import React, { Component } from 'react';\nimport { withRouter } from 'react-router-dom';\n\nimport { withStyles } from \"@material-ui/core/styles\";\nimport Typograhy from \"@material-ui/core/Typography\";\nimport Card from '@material-ui/core/Card';\nimport CardContent from \"@material-ui/core/CardContent\";\nimport TextField from \"@material-ui/core/TextField\";\n\nimport FormComponent from \"../../classes/FormComponent\";\nimport AESKeyField from \"../../components/AESKeyField\";\nimport DevAddrField from \"../../components/DevAddrField\";\nimport Form from \"../../components/Form\";\nimport DeviceStore from \"../../stores/DeviceStore\";\nimport theme from \"../../theme\";\n\n\nconst styles = {\n link: {\n color: theme.palette.primary.main,\n },\n};\n\n\nclass LW10DeviceActivationForm extends FormComponent {\n constructor() {\n super();\n this.getRandomDevAddr = this.getRandomDevAddr.bind(this);\n }\n\n getRandomDevAddr(cb) {\n DeviceStore.getRandomDevAddr(this.props.match.params.devEUI, resp => {\n cb(resp.devAddr);\n });\n }\n\n render() {\n if (this.state.object === undefined) {\n return();\n }\n\n return(\n \n \n \n \n \n \n \n );\n }\n}\n\n\nclass LW11DeviceActivationForm extends FormComponent {\n constructor() {\n super();\n this.getRandomDevAddr = this.getRandomDevAddr.bind(this);\n }\n\n getRandomDevAddr(cb) {\n DeviceStore.getRandomDevAddr(this.props.match.params.devEUI, resp => {\n cb(resp.devAddr);\n });\n }\n\n render() {\n if (this.state.object === undefined) {\n return();\n }\n\n return(\n \n \n \n \n \n \n \n \n \n \n );\n }\n}\n\n\nLW10DeviceActivationForm = withStyles(styles)(LW10DeviceActivationForm);\nLW11DeviceActivationForm = withStyles(styles)(LW11DeviceActivationForm);\n\n\nclass DeviceActivation extends Component {\n constructor() {\n super();\n this.state = {};\n this.onSubmit = this.onSubmit.bind(this);\n }\n \n componentDidMount() {\n DeviceStore.getActivation(this.props.match.params.devEUI, resp => {\n if (resp === null) {\n this.setState({\n deviceActivation: {\n deviceActivation: {},\n },\n });\n } else {\n this.setState({\n deviceActivation: resp,\n });\n }\n });\n }\n\n onSubmit(deviceActivation) {\n let act = deviceActivation;\n act.devEUI = this.props.match.params.devEUI;\n\n if (this.props.deviceProfile.macVersion.startsWith(\"1.0\")) {\n act.fNwkSIntKey = act.nwkSEncKey;\n act.sNwkSIntKey = act.nwkSEncKey;\n }\n\n DeviceStore.activate(act, resp => {\n this.props.history.push(`/organizations/${this.props.match.params.organizationID}/applications/${this.props.match.params.applicationID}`);\n });\n }\n\n render() {\n if (this.state.deviceActivation === undefined) {\n return null;\n }\n\n let submitLabel = null;\n if (!this.props.deviceProfile.supportsJoin) {\n submitLabel = \"(Re)activate device\";\n }\n\n let showForm = false;\n if (!this.props.deviceProfile.supportsJoin || (this.props.deviceProfile.supportsJoin && this.state.deviceActivation.deviceActivation.devAddr !== undefined)) {\n showForm = true;\n }\n\n return(\n \n \n {showForm && this.props.deviceProfile.macVersion.startsWith(\"1.0\") && }\n {showForm && this.props.deviceProfile.macVersion.startsWith(\"1.1\") && }\n {!showForm && \n This device has not (yet) been activated.\n }\n \n \n );\n }\n}\n\nexport default withRouter(DeviceActivation);\n","import React, { Component } from \"react\";\n\nimport { withStyles } from \"@material-ui/core/styles\";\nimport Avatar from \"@material-ui/core/Avatar\";\nimport Grid from \"@material-ui/core/Grid\";\nimport Chip from \"@material-ui/core/Chip\";\nimport Button from '@material-ui/core/Button';\nimport CircularProgress from '@material-ui/core/CircularProgress';\nimport ExpansionPanel from '@material-ui/core/ExpansionPanel';\nimport ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';\nimport ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';\nimport Typography from '@material-ui/core/Typography';\nimport Dialog from '@material-ui/core/Dialog';\nimport DialogActions from '@material-ui/core/DialogActions';\nimport DialogContent from '@material-ui/core/DialogContent';\nimport DialogContentText from '@material-ui/core/DialogContentText';\nimport DialogTitle from '@material-ui/core/DialogTitle';\n\nimport Play from \"mdi-material-ui/Play\";\nimport Pause from \"mdi-material-ui/Pause\";\nimport Download from \"mdi-material-ui/Download\";\nimport Delete from \"mdi-material-ui/Delete\";\nimport ChevronDown from \"mdi-material-ui/ChevronDown\";\nimport HelpCircleOutline from \"mdi-material-ui/HelpCircleOutline\";\nimport AlertCircleOutline from \"mdi-material-ui/AlertCircleOutline\";\n\nimport moment from \"moment\";\nimport fileDownload from \"js-file-download\";\n\nimport DeviceStore from \"../../stores/DeviceStore\";\nimport theme from \"../../theme\";\nimport JSONTree from \"../../components/JSONTree\";\n\n\nconst styles = {\n buttons: {\n textAlign: \"right\",\n },\n button: {\n marginLeft: 2 * theme.spacing(1),\n },\n icon: {\n marginRight: theme.spacing(1),\n },\n center: {\n textAlign: \"center\",\n },\n progress: {\n marginTop: 4 * theme.spacing(1),\n },\n headerColumn: {\n marginRight: 6 * theme.spacing(1),\n },\n headerColumnFixedSmall: {\n width: 145,\n },\n headerColumnFixedWide: {\n width: 175,\n },\n treeStyle: {\n paddingTop: 0,\n paddingBottom: 0,\n fontSize: 12,\n lineHeight: 1.5,\n },\n};\n\n\nclass DeviceDataItem extends Component {\n render() {\n const receivedAt = moment(this.props.data.receivedAt).format(\"LTS\");\n \n return(\n \n }>\n {receivedAt}
\n {this.props.data.type}
\n \n \n \n \n \n \n \n \n \n );\n }\n}\n\nDeviceDataItem = withStyles(styles)(DeviceDataItem);\n\n\nclass DeviceData extends Component {\n constructor() {\n super();\n\n this.state = {\n paused: false,\n connected: false,\n data: [],\n dialogOpen: false,\n };\n\n this.setConnected = this.setConnected.bind(this);\n this.onData = this.onData.bind(this);\n this.onDownload = this.onDownload.bind(this);\n this.togglePause = this.togglePause.bind(this);\n this.onClear = this.onClear.bind(this);\n this.toggleHelpDialog = this.toggleHelpDialog.bind(this);\n }\n\n componentDidMount() {\n const conn = DeviceStore.getDataLogsConnection(this.props.match.params.devEUI, this.onData);\n this.setState({\n wsConn: conn,\n });\n\n DeviceStore.on(\"ws.status.change\", this.setConnected);\n this.setConnected();\n }\n\n componentWillUnmount() {\n this.state.wsConn.close();\n DeviceStore.removeListener(\"ws.status.change\", this.setConnected);\n }\n\n onDownload() {\n const dl = this.state.data.map((data, i) => {\n return {\n type: data.type,\n payload: data.payload,\n };\n });\n\n fileDownload(JSON.stringify(dl, null, 4), `device-${this.props.match.params.devEUI}.json`);\n }\n\n togglePause() {\n this.setState({\n paused: !this.state.paused,\n });\n }\n\n toggleHelpDialog() {\n this.setState({\n dialogOpen: !this.state.dialogOpen,\n });\n }\n\n onClear() {\n this.setState({\n data: [],\n });\n }\n\n setConnected() {\n this.setState({\n connected: DeviceStore.getWSDataStatus(),\n });\n }\n\n onData(d) {\n if (this.state.paused) {\n return;\n }\n\n let data = this.state.data;\n const now = new Date();\n\n data.unshift({\n id: now.getTime(),\n receivedAt: now,\n type: d.type,\n payload: JSON.parse(d.payloadJSON),\n });\n\n this.setState({\n data: data,\n });\n }\n\n render() {\n const data = this.state.data.map((d, i) => );\n\n return(\n \n \n Help\n \n \n These are the events as published to the application. Please refer to data integrations (documentation) for more information on integrating this with your application.\n \n \n \n \n \n \n\n \n \n {!this.state.paused && }\n {this.state.paused && }\n \n \n \n \n {!this.state.connected && }\n {(this.state.connected && data.length === 0 && !this.state.paused) &&
}\n {data.length > 0 && data}\n \n \n );\n }\n}\n\nexport default withStyles(styles)(DeviceData);\n","import React, { Component } from \"react\";\n\nimport { withStyles } from \"@material-ui/core/styles\";\nimport Avatar from \"@material-ui/core/Avatar\";\nimport Chip from \"@material-ui/core/Chip\";\nimport Grid from \"@material-ui/core/Grid\";\nimport Button from '@material-ui/core/Button';\nimport CircularProgress from '@material-ui/core/CircularProgress';\nimport Dialog from '@material-ui/core/Dialog';\nimport DialogActions from '@material-ui/core/DialogActions';\nimport DialogContent from '@material-ui/core/DialogContent';\nimport DialogContentText from '@material-ui/core/DialogContentText';\nimport DialogTitle from '@material-ui/core/DialogTitle';\n\nimport Play from \"mdi-material-ui/Play\";\nimport Pause from \"mdi-material-ui/Pause\";\nimport Download from \"mdi-material-ui/Download\";\nimport Delete from \"mdi-material-ui/Delete\";\nimport HelpCircleOutline from \"mdi-material-ui/HelpCircleOutline\";\nimport AlertCircleOutline from \"mdi-material-ui/AlertCircleOutline\";\n\nimport fileDownload from \"js-file-download\";\n\nimport LoRaWANFrameLog from \"../../components/LoRaWANFrameLog\";\nimport DeviceStore from \"../../stores/DeviceStore\";\nimport theme from \"../../theme\";\n\n\nconst styles = {\n buttons: {\n textAlign: \"right\",\n },\n button: {\n marginLeft: 2 * theme.spacing(1),\n },\n icon: {\n marginRight: theme.spacing(1),\n },\n center: {\n textAlign: \"center\",\n },\n progress: {\n marginTop: 4 * theme.spacing(1),\n },\n};\n\n\nclass DeviceFrames extends Component {\n constructor() {\n super();\n\n this.state = {\n paused: false,\n connected: false,\n frames: [],\n dialogOpen: false,\n };\n\n this.setConnected = this.setConnected.bind(this);\n this.onFrame = this.onFrame.bind(this);\n this.onDownload = this.onDownload.bind(this);\n this.togglePause = this.togglePause.bind(this);\n this.onClear = this.onClear.bind(this);\n this.toggleHelpDialog = this.toggleHelpDialog.bind(this);\n }\n\n componentDidMount() {\n const conn = DeviceStore.getFrameLogsConnection(this.props.match.params.devEUI, this.onFrame);\n this.setState({\n wsConn: conn,\n });\n\n DeviceStore.on(\"ws.status.change\", this.setConnected);\n this.setConnected();\n }\n\n componentWillUnmount() {\n this.state.wsConn.close();\n\n DeviceStore.removeListener(\"ws.status.change\", this.setConnected);\n }\n\n onDownload() {\n const dl = this.state.frames.map((frame, i) => {\n return {\n uplinkMetaData: frame.uplinkMetaData,\n downlinkMetaData: frame.downlinkMetaData,\n phyPayload: frame.phyPayload,\n };\n });\n\n fileDownload(JSON.stringify(dl, null, 4), `gateway-${this.props.match.params.gatewayID}.json`);\n }\n\n togglePause() {\n this.setState({\n paused: !this.state.paused,\n });\n }\n\n toggleHelpDialog() {\n this.setState({\n dialogOpen: !this.state.dialogOpen,\n });\n }\n\n onClear() {\n this.setState({\n frames: [],\n });\n }\n\n setConnected() {\n this.setState({\n connected: DeviceStore.getWSFramesStatus(),\n });\n }\n\n onFrame(frame) {\n if (this.state.paused) {\n return;\n }\n\n let frames = this.state.frames;\n const now = new Date();\n\n if (frame.uplinkFrame !== undefined) {\n frames.unshift({\n id: now.getTime(),\n receivedAt: now,\n uplinkMetaData: {\n rxInfo: frame.uplinkFrame.rxInfo,\n txInfo: frame.uplinkFrame.txInfo,\n },\n phyPayload: JSON.parse(frame.uplinkFrame.phyPayloadJSON),\n });\n }\n\n if (frame.downlinkFrame !== undefined) {\n frames.unshift({\n id: now.getTime(),\n receivedAt: now,\n downlinkMetaData: {\n txInfo: frame.downlinkFrame.txInfo,\n },\n phyPayload: JSON.parse(frame.downlinkFrame.phyPayloadJSON),\n });\n }\n\n console.log(frame);\n\n this.setState({\n frames: frames,\n });\n }\n\n render() {\n const frames = this.state.frames.map((frame, i) => );\n\n return(\n \n \n Help\n \n \n The frames below are the raw (and encrypted) LoRaWAN PHYPayload frames as seen by the gateway(s). This data is intedend for debugging only.\n \n \n \n \n \n \n\n \n \n {!this.state.paused && }\n {this.state.paused && }\n \n \n \n \n {!this.state.connected && }\n {(this.state.connected && frames.length === 0 && !this.state.paused) &&
}\n {frames.length > 0 && frames}\n \n \n );\n }\n}\n\nexport default withStyles(styles)(DeviceFrames);\n","import React, { Component } from \"react\";\nimport { Link } from \"react-router-dom\";\n\nimport { withStyles } from \"@material-ui/core/styles\";\nimport Grid from \"@material-ui/core/Grid\";\nimport TableCell from \"@material-ui/core/TableCell\";\nimport TableRow from \"@material-ui/core/TableRow\";\nimport Button from '@material-ui/core/Button';\nimport Dialog from '@material-ui/core/Dialog';\nimport DialogActions from '@material-ui/core/DialogActions';\nimport DialogContent from '@material-ui/core/DialogContent';\nimport DialogTitle from '@material-ui/core/DialogTitle';\nimport Table from '@material-ui/core/Table';\nimport TableBody from '@material-ui/core/TableBody';\n\nimport moment from \"moment\";\nimport CloudUpload from \"mdi-material-ui/CloudUpload\";\n\nimport TableCellLink from \"../../components/TableCellLink\";\nimport DataTable from \"../../components/DataTable\";\nimport Admin from \"../../components/Admin\";\nimport FUOTADeploymentStore from \"../../stores/FUOTADeploymentStore\";\nimport theme from \"../../theme\";\n\n\nconst styles = {\n buttons: {\n textAlign: \"right\",\n },\n button: {\n marginLeft: 2 * theme.spacing(1),\n },\n icon: {\n marginRight: theme.spacing(1),\n },\n};\n\n\nclass ListFUOTADeploymentsForDevice extends Component {\n constructor() {\n super();\n\n this.state = {\n detailDialog: false,\n };\n\n this.getPage = this.getPage.bind(this);\n this.getRow = this.getRow.bind(this);\n this.onCloseDialog = this.onCloseDialog.bind(this);\n this.showDetails = this.showDetails.bind(this);\n }\n\n getPage(limit, offset, callbackFunc) {\n FUOTADeploymentStore.list({\n devEUI: this.props.match.params.devEUI,\n limit: limit,\n offset: offset,\n }, callbackFunc);\n }\n\n getRow(obj) {\n const createdAt = moment(obj.createdAt).format('lll');\n const updatedAt = moment(obj.updatedAt).format('lll');\n\n return(\n \n {obj.name}\n {createdAt}\n {updatedAt}\n {obj.state}\n \n \n );\n }\n\n showDetails(fuotaDeploymentID) {\n FUOTADeploymentStore.getDeploymentDevice(fuotaDeploymentID, this.props.match.params.devEUI, resp => {\n this.setState({\n deploymentDevice: resp.deploymentDevice,\n fuotaDeploymentID: fuotaDeploymentID,\n detailDialog: true,\n });\n });\n }\n\n onCloseDialog() {\n this.setState({\n detailDialog: false,\n });\n }\n\n render() {\n let fddUpdatedAt = \"\";\n if (this.state.deploymentDevice !== undefined) {\n fddUpdatedAt = moment(this.state.deploymentDevice.updatedAt).format('lll');\n }\n\n return(\n \n {this.state.deploymentDevice && \n Job status for device\n \n \n \n \n Last updated\n {fddUpdatedAt}\n \n \n Device state\n {this.state.deploymentDevice.state}\n \n {this.state.deploymentDevice.state === \"ERROR\" && \n Error message\n {this.state.deploymentDevice.errorMessage}\n }\n \n
\n \n \n \n \n }\n\n \n \n \n \n \n\n \n \n Job name\n Created at\n Updated at\n Job state\n Device state\n \n }\n getPage={this.getPage}\n getRow={this.getRow}\n />\n \n \n );\n }\n}\n\nexport default withStyles(styles)(ListFUOTADeploymentsForDevice);\n","import React from \"react\";\n\nimport { withStyles } from \"@material-ui/core/styles\";\nimport Tabs from '@material-ui/core/Tabs';\nimport Tab from '@material-ui/core/Tab';\nimport TextField from '@material-ui/core/TextField';\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\nimport Checkbox from '@material-ui/core/Checkbox';\nimport FormControl from \"@material-ui/core/FormControl\";\nimport FormHelperText from \"@material-ui/core/FormHelperText\";\n\nimport {Controlled as CodeMirror} from \"react-codemirror2\";\nimport \"codemirror/mode/javascript/javascript\";\n\nimport FormComponent from \"../../classes/FormComponent\";\nimport Form from \"../../components/Form\";\n\n\nconst styles = {\n codeMirror: {\n zIndex: 1,\n },\n};\n\n\n\nclass DeviceQueueItemForm extends FormComponent {\n constructor() {\n super();\n\n this.state = {\n tab: 0,\n };\n }\n\n onTabChange = (e, v) => {\n this.setState({\n tab: v,\n });\n }\n\n onCodeChange = (field, editor, data, newCode) => {\n let object = this.state.object;\n object[field] = newCode;\n this.setState({\n object: object,\n });\n }\n\n render() {\n if (this.state.object === undefined) {\n return null;\n }\n\n const codeMirrorOptions = {\n lineNumbers: true,\n mode: \"javascript\",\n theme: \"default\",\n };\n\n let objectCode = this.state.object.jsonObject;\n if (objectCode === \"\" || objectCode === undefined) {\n objectCode = `{}`\n }\n\n return(\n \n 0.\"\n required\n fullWidth\n type=\"number\"\n />\n \n \n }\n />\n \n \n \n \n \n {this.state.tab === 0 && }\n {this.state.tab === 1 && \n \n \n The device must be configured with a Device Profile supporting a Codec which is able to encode the given (JSON) payload.\n \n }\n \n );\n }\n}\n\nexport default withStyles(styles)(DeviceQueueItemForm);\n\n","import { EventEmitter } from \"events\";\n\nimport Swagger from \"swagger-client\";\n\nimport sessionStore from \"./SessionStore\";\nimport {checkStatus, errorHandler } from \"./helpers\";\nimport dispatcher from \"../dispatcher\";\n\n\nclass DeviceQueueStore extends EventEmitter {\n constructor() {\n super();\n this.swagger = new Swagger(\"/swagger/deviceQueue.swagger.json\", sessionStore.getClientOpts());\n }\n\n flush(devEUI, callbackFunc) {\n this.swagger.then(client => {\n client.apis.DeviceQueueService.Flush({\n dev_eui: devEUI,\n })\n .then(checkStatus)\n .then(resp => {\n this.notify(\"device-queue has been flushed\");\n callbackFunc(resp.obj);\n })\n .catch(errorHandler);\n });\n }\n\n list(devEUI, callbackFunc) {\n this.swagger.then(client => {\n client.apis.DeviceQueueService.List({\n dev_eui: devEUI,\n })\n .then(checkStatus)\n .then(resp => {\n callbackFunc(resp.obj);\n })\n .catch(errorHandler);\n });\n }\n\n enqueue(item, callbackFunc) {\n this.swagger.then(client => {\n client.apis.DeviceQueueService.Enqueue({\n \"device_queue_item.dev_eui\": item.devEUI,\n body: {\n deviceQueueItem: item,\n },\n })\n .then(checkStatus)\n .then(resp => {\n this.notify(\"device-queue item has bee created\");\n this.emit(\"enqueue\");\n callbackFunc(resp.obj);\n })\n .catch(errorHandler);\n });\n }\n\n notify(msg) {\n dispatcher.dispatch({\n type: \"CREATE_NOTIFICATION\",\n notification: {\n type: \"success\",\n message: msg,\n },\n });\n }\n}\n\nconst deviceQueueStore = new DeviceQueueStore();\nexport default deviceQueueStore;\n","import React, { Component } from \"react\";\nimport { withRouter } from \"react-router-dom\";\n\nimport Grid from \"@material-ui/core/Grid\";\nimport Card from \"@material-ui/core/Card\";\nimport CardHeader from \"@material-ui/core/CardHeader\";\nimport CardContent from \"@material-ui/core/CardContent\";\nimport Table from \"@material-ui/core/Table\";\nimport TableHead from \"@material-ui/core/TableHead\";\nimport TableRow from \"@material-ui/core/TableRow\";\nimport TableCell from \"@material-ui/core/TableCell\";\nimport TableBody from \"@material-ui/core/TableBody\";\nimport Button from '@material-ui/core/Button';\n\nimport Refresh from \"mdi-material-ui/Refresh\";\nimport Delete from \"mdi-material-ui/Delete\";\n\nimport moment from \"moment\";\n\nimport TableCellLink from \"../../components/TableCellLink\";\nimport DeviceQueueItemForm from \"./DeviceQueueItemForm\";\nimport DeviceQueueStore from \"../../stores/DeviceQueueStore\";\nimport DeviceStore from \"../../stores/DeviceStore\";\n\n\nclass DetailsCard extends Component {\n render() {\n return(\n \n \n \n \n \n \n Name\n {this.props.device.device.name}\n \n \n Description\n {this.props.device.device.description}\n \n \n Device-profile\n {this.props.deviceProfile.deviceProfile.name}\n \n \n
\n \n \n );\n }\n}\n\n\nclass StatusCard extends Component {\n render() {\n let lastSeenAt = \"never\";\n\n if (this.props.device.lastSeenAt !== null) {\n lastSeenAt = moment(this.props.device.lastSeenAt).format(\"lll\");\n }\n\n return(\n \n \n \n \n \n \n Last seen at\n {lastSeenAt}\n \n \n
\n \n \n );\n }\n}\n\nclass EnqueueCard extends Component {\n constructor() {\n super();\n\n this.state = {\n object: {},\n };\n }\n\n onSubmit = (queueItem) => {\n console.log(\"foo\");\n let qi = queueItem;\n qi.devEUI = this.props.match.params.devEUI;\n\n DeviceQueueStore.enqueue(qi, resp => {\n this.setState({\n object: {},\n });\n });\n }\n\n render() {\n return(\n \n \n \n \n \n \n );\n }\n}\n\nEnqueueCard = withRouter(EnqueueCard);\n\n\nclass QueueCardRow extends Component {\n render() {\n let confirmed = \"no\";\n if (this.props.item.confirmed) {\n confirmed = \"yes\";\n }\n\n return(\n \n {this.props.item.fCnt}\n {this.props.item.fPort}\n {confirmed}\n {this.props.item.data}\n \n );\n }\n}\n\n\nclass QueueCard extends Component {\n constructor() {\n super();\n\n this.state = {\n deviceQueueItems: [],\n };\n }\n\n componentDidMount() {\n this.getQueue();\n\n DeviceQueueStore.on(\"enqueue\", this.getQueue);\n }\n\n componentWillUnmount() {\n DeviceQueueStore.removeListener(\"enqueue\", this.getQueue);\n }\n\n getQueue = () => {\n DeviceQueueStore.list(this.props.match.params.devEUI, resp => {\n this.setState({\n deviceQueueItems: resp.deviceQueueItems,\n });\n });\n }\n\n flushQueue = () => {\n if (window.confirm(\"Are you sure you want to flush the device queue?\")) {\n DeviceQueueStore.flush(this.props.match.params.devEUI, resp => {\n this.getQueue();\n });\n }\n }\n\n render() {\n const rows = this.state.deviceQueueItems.map((item, i) => );\n\n return(\n \n \n \n \n \n } />\n \n \n \n \n FCnt\n FPort\n Confirmed\n Base64 encoded payload\n \n \n \n {rows}\n \n
\n \n \n );\n }\n}\n\nQueueCard = withRouter(QueueCard);\n\n\nclass DeviceDetails extends Component {\n constructor() {\n super();\n this.state = {\n activated: false,\n };\n }\n\n componentDidMount() {\n this.setDeviceActivation();\n }\n\n componentDidUpdate(prevProps) {\n if (prevProps.device !== this.props.device) {\n this.setDeviceActivation();\n }\n }\n\n setDeviceActivation = () => {\n if (this.props.device === undefined) {\n return;\n }\n\n DeviceStore.getActivation(this.props.device.device.devEUI, resp => {\n if (resp === null) {\n this.setState({\n activated: false,\n });\n } else {\n this.setState({\n activated: true,\n });\n }\n });\n };\n\n render() {\n return(\n \n \n \n \n \n \n \n {this.state.activated && \n \n }\n {this.state.activated &&\n \n }\n \n );\n }\n}\n\nexport default DeviceDetails;\n","import React, { Component } from \"react\";\nimport { Route, Switch, Link, withRouter } from \"react-router-dom\";\n\nimport { withStyles } from \"@material-ui/core/styles\";\nimport Grid from '@material-ui/core/Grid';\nimport Tabs from '@material-ui/core/Tabs';\nimport Tab from '@material-ui/core/Tab';\n\nimport Delete from \"mdi-material-ui/Delete\";\n\nimport TitleBar from \"../../components/TitleBar\";\nimport TitleBarTitle from \"../../components/TitleBarTitle\";\nimport TitleBarButton from \"../../components/TitleBarButton\";\n\nimport ApplicationStore from \"../../stores/ApplicationStore\";\nimport DeviceProfileStore from \"../../stores/DeviceProfileStore\";\nimport SessionStore from \"../../stores/SessionStore\";\nimport Admin from \"../../components/Admin\";\nimport DeviceStore from \"../../stores/DeviceStore\";\nimport UpdateDevice from \"./UpdateDevice\";\nimport DeviceKeys from \"./DeviceKeys\";\nimport DeviceActivation from \"./DeviceActivation\"\nimport DeviceData from \"./DeviceData\";\nimport DeviceFrames from \"./DeviceFrames\";\nimport ListFUOTADeploymentsForDevice from \"../../views/fuota/ListFUOTADeploymentsForDevice\";\nimport DeviceDetails from \"./DeviceDetails\";\n\nimport theme from \"../../theme\";\n\n\nconst styles = {\n tabs: {\n borderBottom: \"1px solid \" + theme.palette.divider,\n height: \"49px\",\n },\n};\n\n\nclass DeviceLayout extends Component {\n constructor() {\n super();\n this.state = {\n tab: 0,\n admin: false,\n };\n\n this.onChangeTab = this.onChangeTab.bind(this);\n this.deleteDevice = this.deleteDevice.bind(this);\n this.locationToTab = this.locationToTab.bind(this);\n this.setIsAdmin = this.setIsAdmin.bind(this);\n this.getDevice = this.getDevice.bind(this);\n }\n\n componentDidMount() {\n ApplicationStore.get(this.props.match.params.applicationID, resp => {\n this.setState({\n application: resp,\n });\n });\n\n\n DeviceStore.on(\"update\", this.getDevice);\n SessionStore.on(\"change\", this.setIsAdmin);\n\n this.locationToTab();\n this.setIsAdmin();\n this.getDevice();\n }\n\n componentWillUnmount() {\n SessionStore.removeListener(\"change\", this.setIsAdmin);\n DeviceStore.removeListener(\"update\", this.getDevice);\n }\n\n componentDidUpdate(oldProps) {\n if (this.props === oldProps) {\n return;\n }\n\n this.locationToTab();\n }\n\n getDevice() {\n DeviceStore.get(this.props.match.params.devEUI, resp => {\n this.setState({\n device: resp,\n });\n\n DeviceProfileStore.get(resp.device.deviceProfileID, resp => {\n this.setState({\n deviceProfile: resp,\n });\n });\n });\n }\n\n setIsAdmin() {\n this.setState({\n admin: SessionStore.isAdmin() || SessionStore.isOrganizationAdmin(this.props.match.params.organizationID),\n }, () => {\n // we need to update the tab index, as for non-admins, some tabs are hidden\n this.locationToTab();\n });\n }\n\n onChangeTab(e, v) {\n this.setState({\n tab: v,\n });\n }\n\n locationToTab() {\n let tab = 0;\n\n if (window.location.href.endsWith(\"/edit\")) {\n tab = 1;\n } else if (window.location.href.endsWith(\"/keys\")) {\n tab = 2;\n } else if (window.location.href.endsWith(\"/activation\")) {\n tab = 3;\n } else if (window.location.href.endsWith(\"/data\")) {\n tab = 4;\n } else if (window.location.href.endsWith(\"/frames\")) {\n tab = 5;\n } else if (window.location.href.endsWith(\"/fuota-deployments\")) {\n tab = 6;\n }\n\n if (tab > 1 && !this.state.admin) {\n tab = tab - 1;\n }\n\n this.setState({\n tab: tab,\n });\n }\n\n deleteDevice() {\n if (window.confirm(\"Are you sure you want to delete this device?\")) {\n DeviceStore.delete(this.props.match.params.devEUI, resp => {\n this.props.history.push(`/organizations/${this.props.match.params.organizationID}/applications/${this.props.match.params.applicationID}`);\n });\n }\n }\n\n render() {\n if (this.state.application === undefined || this.state.device === undefined|| this.state.deviceProfile === undefined) {\n return();\n }\n\n return(\n \n \n }\n color=\"secondary\"\n onClick={this.deleteDevice}\n />\n \n }\n >\n \n \n \n \n \n \n \n \n\n \n \n \n \n {this.state.admin && }\n \n \n \n \n \n \n\n \n \n } />\n } />\n } />\n } />\n } />\n } />\n } />\n \n \n \n );\n }\n}\n\nexport default withStyles(styles)(withRouter(DeviceLayout));\n","import React, { Component } from \"react\";\nimport { Link } from \"react-router-dom\";\n\nimport { withStyles } from \"@material-ui/core/styles\";\nimport Grid from \"@material-ui/core/Grid\";\nimport TableCell from \"@material-ui/core/TableCell\";\nimport TableRow from \"@material-ui/core/TableRow\";\n\nimport TitleBar from \"../../components/TitleBar\";\nimport TitleBarTitle from \"../../components/TitleBarTitle\";\nimport DataTable from \"../../components/DataTable\";\nimport SessionStore from \"../../stores/SessionStore\";\nimport theme from \"../../theme\";\n\n\nconst styles = {\n link: {\n color: theme.palette.primary.main,\n textDecoration: \"none\",\n },\n\n type: {\n fontWeight: \"bold\",\n },\n};\n\n\nclass ApplicationResult extends Component {\n render() {\n return(\n \n application\n {this.props.result.applicationName}\n organization: {this.props.result.organizationName}\n {this.props.result.applicationID}\n \n );\n }\n}\n\nApplicationResult = withStyles(styles)(ApplicationResult);\n\n\nclass OrganizationResult extends Component {\n render() {\n return(\n \n organization\n {this.props.result.organizationName}\n \n {this.props.result.organizationID}\n \n );\n }\n}\n\nOrganizationResult = withStyles(styles)(OrganizationResult);\n\nclass DeviceResult extends Component {\n render() {\n return(\n \n device\n {this.props.result.deviceName}\n organization: {this.props.result.organizationName}, application: {this.props.result.applicationName}\n {this.props.result.deviceDevEUI}\n \n );\n }\n}\n\nDeviceResult = withStyles(styles)(DeviceResult);\n\nclass GatewayResult extends Component {\n render() {\n return(\n \n gateway\n {this.props.result.gatewayName}\n organization: {this.props.result.organizationName}\n {this.props.result.gatewayMAC}\n \n );\n }\n}\n\nGatewayResult = withStyles(styles)(GatewayResult);\n\n\nclass Search extends Component {\n constructor() {\n super();\n this.getPage = this.getPage.bind(this);\n this.getRow = this.getRow.bind(this);\n }\n\n getPage(limit, offset, callbackFunc) {\n const query = new URLSearchParams(this.props.location.search);\n const search = (query.get(\"search\") === null) ? \"\" : query.get(\"search\");\n\n if (search === \"\") {\n callbackFunc({result: [], totalCount: 0});\n return;\n }\n\n SessionStore.globalSearch(search, limit, offset, resp => {\n let r = resp;\n r.totalCount = r.result.length;\n callbackFunc(r);\n });\n }\n\n getRow(obj) {\n switch (obj.kind) {\n case \"application\":\n return \n case \"organization\":\n return \n case \"device\":\n return \n case \"gateway\":\n return \n default:\n break;\n }\n }\n\n render() {\n return(\n \n \n \n \n \n \n Kind\n Name\n \n ID\n \n }\n getPage={this.getPage}\n getRow={this.getRow}\n />\n \n \n );\n }\n}\n\nexport default Search;\n","import React, { Component } from \"react\";\n\nimport TextField from \"@material-ui/core/TextField\";\n\nclass DurationField extends Component {\n constructor() {\n super();\n\n this.state = {\n value: 0,\n };\n }\n\n\n onChange = (e) => {\n this.setState({\n value: e.target.value,\n });\n\n this.props.onChange({\n target: {\n value: `${e.target.value}s`,\n type: \"text\",\n id: this.props.id,\n },\n });\n }\n\n componentDidMount() {\n const str = this.props.value || \"\";\n this.setState({\n value: str.replace(/s/, ''),\n });\n }\n\n render() {\n return(\n \n );\n }\n}\n\nexport default DurationField;\n\n","import React from \"react\";\n\nimport { withStyles } from \"@material-ui/core/styles\";\nimport TextField from '@material-ui/core/TextField';\nimport FormControl from \"@material-ui/core/FormControl\";\nimport FormLabel from \"@material-ui/core/FormLabel\";\nimport FormHelperText from \"@material-ui/core/FormHelperText\";\nimport Button from \"@material-ui/core/Button\";\n\nimport FormComponent from \"../../classes/FormComponent\";\nimport Form from \"../../components/Form\";\nimport DurationField from \"../../components/DurationField\";\nimport AutocompleteSelect from \"../../components/AutocompleteSelect\";\n\nconst styles = {\n formLabel: {\n fontSize: 12,\n },\n};\n\nclass FUOTADeploymentForm extends FormComponent {\n constructor() {\n super();\n\n this.state.file = null;\n\n this.onFileChange = this.onFileChange.bind(this);\n }\n\n getGroupTypeOptions(search, callbackFunc) {\n const options = [\n {value: \"CLASS_C\", label: \"Class-C\"},\n ];\n\n callbackFunc(options);\n }\n\n getMulticastTimeoutOptions(search, callbackFunc) {\n let options = [];\n\n for (let i = 0; i < (1 << 4); i++) {\n options.push({\n label: `${1 << i} seconds`,\n value: i,\n });\n }\n\n callbackFunc(options);\n }\n\n onFileChange(e) {\n let object = this.state.object;\n\n if (e.target.files.length !== 1) {\n object.payload = \"\";\n\n this.setState({\n file: null,\n object: object,\n });\n } else {\n this.setState({\n file: e.target.files[0],\n });\n\n const reader = new FileReader();\n reader.onload = () => {\n const encoded = reader.result.replace(/^data:(.*;base64,)?/, '');\n object.payload = encoded;\n\n this.setState({\n object: object,\n });\n };\n reader.readAsDataURL(e.target.files[0]);\n }\n }\n\n render() {\n if (this.state.object === undefined) {\n return null;\n }\n\n let fileLabel = \"\";\n if (this.state.file !== null) {\n fileLabel = `${this.state.file.name} (${this.state.file.size} bytes)`\n } else {\n fileLabel = \"Select file...\"\n }\n\n return(\n \n \n\n \n Select firmware file\n \n \n This file will fragmented and sent to the device(s). Please note that the format of this file is vendor dependent.\n \n \n\n \n\n \n\n \n\n \n\n \n Multicast-group type\n \n \n The multicast-group type defines the way how multicast frames are scheduled by the network-server.\n \n \n\n \n Multicast timeout\n \n \n\n \n );\n }\n}\n\nexport default withStyles(styles)(FUOTADeploymentForm);\n\n","import React, { Component } from \"react\";\nimport { withRouter } from 'react-router-dom';\n\nimport { withStyles } from \"@material-ui/core/styles\";\nimport Grid from '@material-ui/core/Grid';\nimport Card from '@material-ui/core/Card';\nimport CardContent from \"@material-ui/core/CardContent\";\n\nimport TitleBar from \"../../components/TitleBar\";\nimport TitleBarTitle from \"../../components/TitleBarTitle\";\n\nimport ApplicationStore from \"../../stores/ApplicationStore\";\nimport DeviceStore from \"../../stores/DeviceStore\";\nimport FUOTADeploymentStore from \"../../stores/FUOTADeploymentStore\";\nimport FUOTADeploymentForm from \"./FUOTADeploymentForm\";\n\n\nconst styles = {\n card: {\n overflow: \"visible\",\n },\n};\n\n\nclass CreateFUOTADeploymentForDevice extends Component {\n constructor() {\n super();\n this.state = {};\n this.onSubmit = this.onSubmit.bind(this);\n }\n\n componentDidMount() {\n ApplicationStore.get(this.props.match.params.applicationID, resp => {\n this.setState({\n application: resp,\n });\n });\n\n DeviceStore.get(this.props.match.params.devEUI, resp => {\n this.setState({\n device: resp,\n });\n });\n }\n\n onSubmit(fuotaDeployment) {\n FUOTADeploymentStore.createForDevice(this.props.match.params.devEUI, fuotaDeployment, resp => {\n this.props.history.push(`/organizations/${this.props.match.params.organizationID}/applications/${this.props.match.params.applicationID}/devices/${this.props.match.params.devEUI}/fuota-deployments`);\n });\n }\n\n render() {\n if (this.state.application === undefined || this.state.device === undefined) {\n return null;\n }\n\n return(\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n );\n }\n}\n\nexport default withStyles(styles)(withRouter(CreateFUOTADeploymentForDevice));\n\n","import React, { Component } from \"react\";\n\nimport Grid from '@material-ui/core/Grid';\nimport Card from \"@material-ui/core/Card\";\nimport CardHeader from \"@material-ui/core/CardHeader\";\nimport CardContent from \"@material-ui/core/CardContent\";\nimport LinearProgress from '@material-ui/core/LinearProgress';\nimport Typography from \"@material-ui/core/Typography\";\n\nimport TableCell from \"@material-ui/core/TableCell\";\nimport TableRow from \"@material-ui/core/TableRow\";\nimport Table from '@material-ui/core/Table';\nimport TableBody from '@material-ui/core/TableBody';\n\nimport moment from \"moment\";\n\nimport FUOTADeploymentStore from \"../../stores/FUOTADeploymentStore\";\n\n\nclass FUOTADeploymentDetails extends Component {\n constructor() {\n super();\n\n this.state = {\n progress: 0,\n stepProgress: 0,\n lastReload: 0,\n };\n }\n\n componentDidMount() {\n this.timer = setInterval(this.progress, 1000);\n }\n\n componentWillUnmount() {\n clearInterval(this.timer);\n }\n\n componentDidUpdate(prevProps) {\n if (this.props === prevProps) {\n return;\n }\n\n this.progress();\n }\n\n progress = () => {\n const start = moment(this.props.fuotaDeployment.updatedAt).unix();\n const nextStepAfter = moment(this.props.fuotaDeployment.fuotaDeployment.nextStepAfter).unix();\n const now = moment().unix();\n\n const span = nextStepAfter - start;\n const stepProgress = now - start;\n const progressScaled = stepProgress / span * 100;\n\n if (progressScaled > 100) {\n if (moment().unix() - this.state.lastReload > 5) {\n this.setState({\n lastReload: moment().unix(),\n }, FUOTADeploymentStore.emitReload());\n }\n }\n\n const states = 8;\n let state = 0;\n\n switch(this.props.fuotaDeployment.fuotaDeployment.state) {\n case \"MC_CREATE\":\n state = 0;\n break;\n case \"MC_SETUP\":\n state = 1;\n break;\n case \"FRAG_SESS_SETUP\":\n state = 2;\n break;\n case \"MC_SESS_C_SETUP\":\n state = 3;\n break;\n case \"ENQUEUE\":\n state = 4;\n break;\n case \"STATUS_REQUEST\":\n state = 5;\n break;\n case \"SET_DEVICE_STATUS\":\n state = 6;\n break;\n case \"CLEANUP\":\n state = 7;\n break;\n case \"DONE\":\n state = 8;\n break;\n default:\n state = 0;\n break;\n }\n\n this.setState({\n stepProgress: progressScaled,\n progress: state / states * 100,\n });\n }\n\n render() {\n let multicastTimeout = 0;\n if (this.props.fuotaDeployment.fuotaDeployment.groupType === \"CLASS_C\") {\n multicastTimeout = (1 << this.props.fuotaDeployment.fuotaDeployment.multicastTimeout);\n }\n\n const createdAt = moment(this.props.fuotaDeployment.createdAt).format('lll');\n const updatedAt = moment(this.props.fuotaDeployment.updatedAt).format('lll');\n const nextStepAfter = moment(this.props.fuotaDeployment.fuotaDeployment.nextStepAfter).format('lll');\n\n return(\n \n \n \n \n \n \n \n \n Job name\n {this.props.fuotaDeployment.fuotaDeployment.name}\n \n \n Redundant frames\n {this.props.fuotaDeployment.fuotaDeployment.redundancy}\n \n \n Unicast timeout\n {this.props.fuotaDeployment.fuotaDeployment.unicastTimeout}\n \n \n Data-rate\n {this.props.fuotaDeployment.fuotaDeployment.dr}\n \n \n Frequency\n {this.props.fuotaDeployment.fuotaDeployment.frequency}Hz\n \n \n Multicast-group type\n {this.props.fuotaDeployment.fuotaDeployment.groupType}\n \n \n Multicast timeout\n {multicastTimeout} seconds\n \n \n
\n \n \n \n\n \n \n \n \n \n \n \n Created at\n {createdAt}\n \n \n Updated at\n {updatedAt}\n \n \n State\n {this.props.fuotaDeployment.fuotaDeployment.state}\n \n {this.props.fuotaDeployment.fuotaDeployment.state !== \"DONE\" && \n Next step at\n {nextStepAfter}\n }\n \n
\n \n {this.props.fuotaDeployment.fuotaDeployment.state !== \"DONE\" && \n \n Job progress:\n \n \n }\n {this.props.fuotaDeployment.fuotaDeployment.state !== \"DONE\" && \n \n State progress:\n \n \n }\n \n \n \n );\n }\n}\n\nexport default FUOTADeploymentDetails;\n\n","import React, { Component } from \"react\";\n\nimport Grid from \"@material-ui/core/Grid\";\nimport Table from \"@material-ui/core/Table\";\nimport TableBody from \"@material-ui/core/TableBody\";\nimport TableCell from \"@material-ui/core/TableCell\";\nimport TableRow from \"@material-ui/core/TableRow\";\nimport Button from '@material-ui/core/Button';\nimport Dialog from '@material-ui/core/Dialog';\nimport DialogActions from '@material-ui/core/DialogActions';\nimport DialogContent from '@material-ui/core/DialogContent';\nimport DialogTitle from '@material-ui/core/DialogTitle';\n\nimport moment from \"moment\";\n\nimport TableCellLink from \"../../components/TableCellLink\";\nimport DataTable from \"../../components/DataTable\";\n\nimport FUOTADeploymentStore from \"../../stores/FUOTADeploymentStore\";\n\n\nclass FUOTADeploymentDevices extends Component {\n constructor() {\n super();\n\n this.state = {\n detailDialog: false,\n };\n\n this.getPage = this.getPage.bind(this);\n this.getRow = this.getRow.bind(this);\n this.onCloseDialog = this.onCloseDialog.bind(this);\n this.showDetails = this.showDetails.bind(this);\n }\n\n getPage(limit, offset, callbackFunc) {\n FUOTADeploymentStore.listDeploymentDevices({\n fuota_deployment_id: this.props.match.params.fuotaDeploymentID,\n limit: limit,\n offset: offset,\n }, callbackFunc);\n }\n\n getRow(obj) {\n const createdAt = moment(obj.createdAt).format('lll');\n const updatedAt = moment(obj.updatedAt).format('lll');\n\n return(\n \n {obj.deviceName}\n {obj.devEUI}\n {createdAt}\n {updatedAt}\n \n \n ); \n }\n\n showDetails(devEUI) {\n FUOTADeploymentStore.getDeploymentDevice(this.props.match.params.fuotaDeploymentID, devEUI, resp => {\n this.setState({\n deploymentDevice: resp.deploymentDevice,\n detailDialog: true,\n });\n });\n }\n\n onCloseDialog() {\n this.setState({\n detailDialog: false,\n });\n }\n\n render() {\n let fddUpdatedAt = \"\";\n if (this.state.deploymentDevice !== undefined) {\n fddUpdatedAt = moment(this.state.deploymentDevice.updatedAt).format('lll');\n }\n\n return(\n \n {this.state.deploymentDevice && \n Job status for device\n \n \n \n \n Last updated\n {fddUpdatedAt}\n \n \n Device state\n {this.state.deploymentDevice.state}\n \n {this.state.deploymentDevice.state === \"ERROR\" && \n Error message\n {this.state.deploymentDevice.errorMessage}\n }\n \n
\n \n \n \n \n }\n\n\n \n \n Device name\n Device EUI\n Created at\n Updated at\n State\n \n }\n getPage={this.getPage}\n getRow={this.getRow}\n />\n \n \n );\n }\n}\n\nexport default FUOTADeploymentDevices;\n","import React, { Component } from \"react\";\nimport { Route, Switch, Link } from \"react-router-dom\";\n\nimport { withStyles } from \"@material-ui/core/styles\";\nimport Grid from '@material-ui/core/Grid';\nimport Tabs from '@material-ui/core/Tabs';\nimport Tab from '@material-ui/core/Tab';\n\nimport TitleBar from \"../../components/TitleBar\";\nimport TitleBarTitle from \"../../components/TitleBarTitle\";\n\nimport ApplicationStore from \"../../stores/ApplicationStore\";\nimport FUOTADeploymentStore from \"../../stores/FUOTADeploymentStore\";\nimport FUOTADeploymentDetails from \"./FUOTADeploymentDetails\";\nimport ListFUOTADeploymentDevices from \"./ListFUOTADeploymentDevices\";\n\nimport theme from \"../../theme\";\n\n\nconst styles = {\n tabs: {\n borderBottom: \"1px solid \" + theme.palette.divider,\n height: \"48px\",\n overflow: \"visible\",\n },\n};\n\n\nclass FUOTADeploymentLayout extends Component {\n constructor() {\n super();\n\n this.state = {\n tab: 0,\n };\n\n this.onChangeTab = this.onChangeTab.bind(this);\n this.locationToTab = this.locationToTab.bind(this);\n }\n\n componentDidMount() {\n ApplicationStore.get(this.props.match.params.applicationID, resp => {\n this.setState({\n application: resp,\n });\n });\n\n FUOTADeploymentStore.on(\"reload\", this.getFuotaDeployment);\n\n\n this.getFuotaDeployment();\n this.locationToTab();\n }\n\n componentWillUnmount() {\n FUOTADeploymentStore.removeListener(\"reload\", this.getFuotaDeployment);\n }\n\n getFuotaDeployment = () => {\n FUOTADeploymentStore.get(this.props.match.params.fuotaDeploymentID, resp => {\n this.setState({\n fuotaDeployment: resp,\n });\n });\n }\n\n onChangeTab(e, v) {\n this.setState({\n tab: v,\n });\n }\n\n locationToTab() {\n let tab = 0;\n\n if (window.location.href.endsWith(\"/devices\")) {\n tab = 1;\n }\n\n this.setState({\n tab: tab,\n });\n }\n\n\n render() {\n if (this.state.application === undefined || this.state.fuotaDeployment === undefined) {\n return null;\n }\n\n return(\n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n\n \n \n } />\n } />\n \n \n \n );\n }\n}\n\nexport default withStyles(styles)(FUOTADeploymentLayout);\n\n","import React, { Component } from \"react\";\nimport {Router} from \"react-router-dom\";\nimport { Route, Switch } from 'react-router-dom';\nimport classNames from \"classnames\";\n\nimport CssBaseline from \"@material-ui/core/CssBaseline\";\nimport { MuiThemeProvider, withStyles } from \"@material-ui/core/styles\";\nimport Grid from '@material-ui/core/Grid';\n\nimport history from \"./history\";\nimport theme from \"./theme\";\n\nimport TopNav from \"./components/TopNav\";\nimport SideNav from \"./components/SideNav\";\nimport Footer from \"./components/Footer\";\nimport Notifications from \"./components/Notifications\";\nimport SessionStore from \"./stores/SessionStore\";\n\n// network-server\nimport ListNetworkServers from \"./views/network-servers/ListNetworkServers\";\nimport CreateNetworkServer from \"./views/network-servers/CreateNetworkServer\";\nimport NetworkServerLayout from \"./views/network-servers/NetworkServerLayout\";\n\n// gateway profiles\nimport ListGatewayProfiles from \"./views/gateway-profiles/ListGatewayProfiles\";\nimport CreateGatewayProfile from \"./views/gateway-profiles/CreateGatewayProfile\";\nimport GatewayProfileLayout from \"./views/gateway-profiles/GatewayProfileLayout\";\n\n// organization\nimport ListOrganizations from \"./views/organizations/ListOrganizations\";\nimport CreateOrganization from \"./views/organizations/CreateOrganization\";\nimport OrganizationLayout from \"./views/organizations/OrganizationLayout\";\nimport ListOrganizationUsers from \"./views/organizations/ListOrganizationUsers\";\nimport OrganizationUserLayout from \"./views/organizations/OrganizationUserLayout\";\nimport CreateOrganizationUser from \"./views/organizations/CreateOrganizationUser\";\nimport OrganizationRedirect from \"./views/organizations/OrganizationRedirect\";\n\n// user\nimport Login from \"./views/users/Login\";\nimport ListUsers from \"./views/users/ListUsers\";\nimport CreateUser from \"./views/users/CreateUser\";\nimport UserLayout from \"./views/users/UserLayout\";\nimport ChangeUserPassword from \"./views/users/ChangeUserPassword\";\n\n// service-profile\nimport ListServiceProfiles from \"./views/service-profiles/ListServiceProfiles\";\nimport CreateServiceProfile from \"./views/service-profiles/CreateServiceProfile\";\nimport ServiceProfileLayout from \"./views/service-profiles/ServiceProfileLayout\";\n\n// device-profile\nimport ListDeviceProfiles from \"./views/device-profiles/ListDeviceProfiles\";\nimport CreateDeviceProfile from \"./views/device-profiles/CreateDeviceProfile\";\nimport DeviceProfileLayout from \"./views/device-profiles/DeviceProfileLayout\";\n\n// gateways\nimport ListGateways from \"./views/gateways/ListGateways\";\nimport GatewayLayout from \"./views/gateways/GatewayLayout\";\nimport CreateGateway from \"./views/gateways/CreateGateway\";\n\n// applications\nimport ListApplications from \"./views/applications/ListApplications\";\nimport CreateApplication from \"./views/applications/CreateApplication\";\nimport ApplicationLayout from \"./views/applications/ApplicationLayout\";\nimport CreateIntegration from \"./views/applications/CreateIntegration\";\nimport UpdateIntegration from \"./views/applications/UpdateIntegration\";\n\n// multicast-groups\nimport ListMulticastGroups from \"./views/multicast-groups/ListMulticastGroups\";\nimport CreateMulticastGroup from \"./views/multicast-groups/CreateMulticastGroup\";\nimport MulticastGroupLayout from \"./views/multicast-groups/MulticastGroupLayout\";\nimport AddDeviceToMulticastGroup from \"./views/multicast-groups/AddDeviceToMulticastGroup\";\n\n// device\nimport CreateDevice from \"./views/devices/CreateDevice\";\nimport DeviceLayout from \"./views/devices/DeviceLayout\";\n\n// search\nimport Search from \"./views/search/Search\";\n\n// FUOTA\nimport CreateFUOTADeploymentForDevice from \"./views/fuota/CreateFUOTADeploymentForDevice\";\nimport FUOTADeploymentLayout from \"./views/fuota/FUOTADeploymentLayout\";\n\n\nconst drawerWidth = 270;\n\nconst styles = {\n root: {\n flexGrow: 1,\n display: \"flex\",\n minHeight: \"100vh\",\n flexDirection: \"column\",\n },\n paper: {\n padding: theme.spacing(2),\n textAlign: 'center',\n color: theme.palette.text.secondary,\n },\n main: {\n width: \"100%\",\n padding: 2 * 24,\n paddingTop: 115,\n flex: 1,\n },\n\n mainDrawerOpen: {\n paddingLeft: drawerWidth + (2 * 24),\n },\n footerDrawerOpen: {\n paddingLeft: drawerWidth,\n },\n};\n\n\nclass App extends Component {\n constructor() {\n super();\n\n this.state = {\n user: null,\n drawerOpen: false,\n };\n\n this.setDrawerOpen = this.setDrawerOpen.bind(this);\n }\n\n componentDidMount() {\n SessionStore.on(\"change\", () => {\n this.setState({\n user: SessionStore.getUser(),\n drawerOpen: SessionStore.getUser() != null,\n });\n });\n\n this.setState({\n user: SessionStore.getUser(),\n drawerOpen: SessionStore.getUser() != null,\n });\n }\n\n setDrawerOpen(state) {\n this.setState({\n drawerOpen: state,\n });\n }\n\n render() {\n let topNav = null;\n let sideNav = null;\n\n if (this.state.user !== null) {\n topNav = ;\n sideNav = \n }\n\n return (\n \n \n \n \n \n {topNav}\n {sideNav}\n
\n \n \n \n \n \n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n \n \n \n\n \n \n \n
\n
\n \n
\n
![\"LoRa](\"/logo/logo.png\")
\n