daily pastebin goal
53%
SHARE
TWEET

Untitled

a guest Feb 14th, 2018 65 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { Component } from 'react'
  2. import ReactDOM from 'react-dom'
  3. import store from '../flux/Store'
  4. import uuid from 'uuid'
  5. import Modal from 'react-modal'
  6. import { initWeightTable } from './Weight.config'
  7. import TypeActions from '../flux/Constants'
  8. import Dispatcher from '../flux/Dispatcher'
  9. import { MQTT_Publish} from '../MQTT_INIT'
  10.  
  11. let moment = require('moment-timezone')
  12. moment.locale('th')
  13.  
  14. export default class Devices extends Component {
  15.  
  16.   constructor (props) {
  17.     super(props)
  18.  
  19.     this.state = {
  20.       devices: [],
  21.       modalIsOpen: false,
  22.       tableInfoContent: [],
  23.       tableDataContent: [],
  24.       currentDevice: '',
  25.       tableHeaderFirst: [
  26.         <tr key={uuid()}>
  27.           <th>DataKey</th>
  28.           <th>Value</th>
  29.         </tr>
  30.       ],
  31.       tableHeaderSecond: [
  32.         <tr key={uuid()}>
  33.           <th>InfoKey</th>
  34.           <th>Value</th>
  35.         </tr>
  36.       ]
  37.     }
  38.  
  39.     store.addListener(() => {
  40.  
  41.       if (store.state.connection) {
  42.         this.storeData = store.state.messageArrived
  43.         this.storeFilterDevices = store.state.filterDevices
  44.         this.listDevices = []
  45.         this.stateDevices = this.state.devices
  46.  
  47.         let checkedOnline = store.state.checkedOnline
  48.         let checkedOffline = store.state.checkedOffline
  49.  
  50.         if (checkedOnline === false && checkedOffline === false) {
  51.           if (this.storeFilterDevices.length === 0) {
  52.             this.renderDevices(this.storeData)
  53.           } else {
  54.             this.renderDevices(this.storeFilterDevices)
  55.           }
  56.         } else {
  57.           if (checkedOffline) {
  58.             this.renderDevices(store.state.devicesOffline)
  59.           }
  60.           if (checkedOnline) {
  61.             this.renderDevices(store.state.devicesOnline)
  62.           }
  63.         }
  64.  
  65.       } else {
  66.  
  67.         this.setState({
  68.           devices: []
  69.         })
  70.  
  71.         ReactDOM.render(<div></div>, document.getElementById('myDevices'))
  72.       }
  73.  
  74.     })
  75.  
  76.     Modal.setAppElement('#root')
  77.   }
  78.  
  79.   renderDevices = (store) => {
  80.     Object.keys(store).forEach((myName, idx) => {
  81.       if (this.stateDevices[idx] !== undefined) {
  82.         if (store[myName].d.timestamp > this.stateDevices[idx].d.timestamp) {
  83.  
  84.           store[myName].classUpdate = 'text-danger'
  85.           store[myName].classCardHeader = 'card-header bg-success'
  86.  
  87.           if (this.state.currentDevice === myName) {
  88.  
  89.             initWeightTable(store[myName].info, store[myName].d)
  90.  
  91.             let tableInfoContent = []
  92.             let tableDataContent = []
  93.  
  94.             Object.keys(store[myName].info).forEach((key) => {
  95.               tableInfoContent.push(
  96.                 <tr key={uuid()}>
  97.                   <td>{key}</td>
  98.                   <td>{store[myName].info[key]}</td>
  99.                 </tr>
  100.               )
  101.             })
  102.  
  103.             Object.keys(store[myName].d).forEach((key) => {
  104.               tableDataContent.push(
  105.                 <tr key={uuid()}>
  106.                   <td>{key}</td>
  107.                   <td>{store[myName].d[key]}</td>
  108.                 </tr>
  109.               )
  110.             })
  111.  
  112.             this.setState({
  113.               tableInfoContent: tableInfoContent,
  114.               tableDataContent: tableDataContent
  115.             })
  116.  
  117.           }
  118.  
  119.         }
  120.       }
  121.       this.listDevices.push(store[myName])
  122.     })
  123.     this.setState({devices: this.listDevices})
  124.   }
  125.  
  126.   componentWillMount () {
  127.     setInterval(() => {
  128.       this.state.devices.forEach((device, idx) => {
  129.         let d = this.state.devices
  130.         d[idx].classUpdate = 'text-primary'
  131.  
  132.         let diff = moment.now() - d[idx].d.timestamp
  133.         if (diff > (60000 * 5)) {
  134.           d[idx].classCardHeader = 'card-header bg-secondary'
  135.           Dispatcher.dispatch({
  136.             type: TypeActions.DEVICES_OFFLINE,
  137.             data: d[idx]
  138.           })
  139.         }
  140.  
  141.         this.setState({devices: d})
  142.       })
  143.       // console.log(this.state.devices)
  144.     }, 1000)
  145.   }
  146.  
  147.   openModal = () => {
  148.     this.setState({modalIsOpen: true})
  149.   }
  150.  
  151.   closeModal = () => {
  152.     this.setState({modalIsOpen: false})
  153.   }
  154.  
  155.   handleClickInfo = (e, info, d) => {
  156.     e.preventDefault()
  157.  
  158.     this.setState({weightTable: initWeightTable(info, d)})
  159.  
  160.     let tableInfoContent = []
  161.     let tableDataContent = []
  162.  
  163.     Object.keys(info).forEach((key) => {
  164.       tableInfoContent.push(
  165.         <tr key={uuid()}>
  166.           <td>{key}</td>
  167.           <td>{info[key]}</td>
  168.         </tr>
  169.       )
  170.     })
  171.  
  172.     Object.keys(d).forEach((key) => {
  173.       tableDataContent.push(
  174.         <tr key={uuid()}>
  175.           <td>{key}</td>
  176.           <td>{d[key]}</td>
  177.         </tr>
  178.       )
  179.     })
  180.  
  181.     let resultWeight = initWeightTable(info, d)
  182.  
  183.     if (resultWeight) {
  184.       this.setState({
  185.         tableHeaderFirst: [resultWeight[0]],
  186.         tableHeaderSecond: [resultWeight[1]]
  187.       })
  188.     }
  189.  
  190.     this.setState({
  191.       tableInfoContent: tableInfoContent,
  192.       tableDataContent: tableDataContent,
  193.       currentDevice: d.myName
  194.     })
  195.  
  196.     this.openModal()
  197.   }
  198.  
  199.   publish = (topic, value) => {
  200.  
  201.     console.log('topic : ', topic)
  202.  
  203.     MQTT_Publish(topic, value)
  204.   }
  205.  
  206.   render () {
  207.  
  208.     const Component = (props) => {
  209.  
  210.       let d = props.data.d
  211.       let info = props.data.info
  212.  
  213.       const styles = {
  214.         content: {marginBottom: 5},
  215.         footer: {marginBottom: 0},
  216.         customStyle: {
  217.           overlay: {
  218.             position: 'fixed',
  219.             top: 0,
  220.             left: 0,
  221.             right: 0,
  222.             bottom: 0,
  223.             backgroundColor: 'rgba(255, 255, 255, 0.75)'
  224.           },
  225.           content: {
  226.             position: 'absolute',
  227.             top: '40px',
  228.             left: '40px',
  229.             right: '40px',
  230.             bottom: '40px',
  231.             border: '1px solid #ccc',
  232.             background: '#fff',
  233.             overflow: 'auto',
  234.             WebkitOverflowScrolling: 'touch',
  235.             borderRadius: '4px',
  236.             outline: 'none',
  237.             padding: '20px'
  238.           }
  239.         }
  240.       }
  241.  
  242.       return (
  243.         <div className="col-12 col-md-3">
  244.           <div className="form-group">
  245.             <div className="card">
  246.               <div className={props.data.classCardHeader}>
  247.                 <span style={{color: 'white'}}>{d.myName}</span>
  248.               </div>
  249.               <div className="card-body text-primary">
  250.                 <p>ip : {info.ip}</p>
  251.                 <p>heap : {d.heap}</p>
  252.                 <p>run time : {moment(moment.now() - d.millis).fromNow()}</p>
  253.                 <p>millis : {d.millis}</p>
  254.                 <p>prefix : {info.prefix}</p>
  255.                 <p className={props.data.classUpdate}>
  256.                   <i className='fa fa-clock-o'/>&ensp;
  257.                   {moment(d.timestamp).fromNow()}
  258.                 </p>
  259.                 <button className='btn' style={{width: '100%', backgroundColor: '#0D86D9', color: 'white'}}
  260.                         onClick={(e) => this.handleClickInfo(e, info, d)}>
  261.                   MORE INFO
  262.                 </button>
  263.                 <Modal
  264.                   isOpen={this.state.modalIsOpen}
  265.                   style={styles.customStyle}
  266.                   contentLabel="Modal"
  267.                 >
  268.                   <div className='row'>
  269.                     <div className="col-12 col-md-6 text-center">
  270.                       <table className='table table-bordered'>
  271.                         <thead>
  272.                         {this.state.tableHeaderFirst.map(header => header)}
  273.                         </thead>
  274.                         <tbody>
  275.                         {this.state.tableInfoContent.map(d => d)}
  276.                         </tbody>
  277.                       </table>
  278.                     </div>
  279.                     <div className="col-12 col-md-6 text-center">
  280.                       <table className='table table-bordered'>
  281.                         <thead>
  282.                         {this.state.tableHeaderSecond.map(header => header)}
  283.                         </thead>
  284.                         <tbody>
  285.                         {this.state.tableDataContent.map(d => d)}
  286.                         </tbody>
  287.                       </table>
  288.                     </div>
  289.                   </div>
  290.                   <button type='button' className='btn btn-danger float-right' style={{marginRight: 5}} onClick={this.closeModal}>
  291.                     Close
  292.                   </button>
  293.                   <button type='button' className='btn btn-warning float-right' style={{color: 'white', marginRight: 5}} onClick={() => this.publish(`${info.prefix}${info.id}/$/command`, 'OFF')}>
  294.                     <i className='fa fa-power-off'/>&nbsp;
  295.                     OFF
  296.                   </button>
  297.                   <button type='button' className='btn btn-success float-right' style={{marginRight: 5}} onClick={() => this.publish(`${info.prefix}${info.id}/$/command`, 'ON')}>
  298.                     <i className='fa fa-power-off'/>&nbsp;
  299.                     ON
  300.                   </button>
  301.                 </Modal>
  302.               </div>
  303.             </div>
  304.           </div>
  305.         </div>
  306.       )
  307.     }
  308.  
  309.     return (
  310.       <div id='myDevices' className='row'>
  311.         {this.state.devices.map(obj => <Component key={uuid()} data={obj}/>)}
  312.       </div>
  313.     )
  314.   }
  315.  
  316. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top