Generalizes Device List, completes FLOWMON-7

app/components/ABBFlowMeter.js

@@ -1,41 +0,0 @@
-import React from 'react';
-import {auth, baseURL} from './Meshify';
-import {Channel} from './Channel';
-
-let channelStarter = {
-  yesterday_volume: {order: 1, data:{}},
-  today_volume: {order: 2, data:{}},
-  volume_flow: {order: 3, data:{}},
-  differential_pressure: {order: 4, data:{}},
-  static_pressure: {order: 5, data:{}},
-  temperature: {order: 6, data:{}},
-  battery_voltage: {order: 7, data:{}},
-  last_calculation_period_volume: {order: 8, data:{}}
-}
-
-export class ABBFlowMeter extends React.Component {
-  constructor(props){
-    super(props);
-    this.state = {channels: channelStarter};
-  }
-
-
-  render(){
-    let t = this;
-    const channelList = this.props.values.sort((a, b) => {
-      return this.state.channels[a.channel].order - this.state.channels[b.channel].order;
-    }).map(function(ch, i){
-      return <Channel key={t.props.deviceId + "_channel_" + i}
-        name={ch.name}
-        timestamp={ch.timestamp}
-        value={ch.value} />
-    });
-
-    return (
-      <tr>
-        <td>{this.props.name}</td>
-        {channelList}
-      </tr>
-    );
-  }
-}

app/components/Auth.js

@@ -33,7 +33,7 @@ export class Auth extends React.Component{
     // this.setState({login: true, meshifyUsername: 'api@henry-pump.com'});
     fetch(baseURL + 'login', {credentials: 'include'}).then((response)=>response.json())
     .then((responseJson)=>{
-      console.log(responseJson)
+      // console.log(responseJson)
       if (typeof responseJson.username !== 'undefined'){
         this.setState({login: true, meshifyUsername: responseJson.username})
       } else {
@@ -58,7 +58,7 @@ export class Auth extends React.Component{
       body: JSON.stringify({username: this.state.meshifyUsername, authToken: authToken})
     }).then((response)=>response.json())
     .then((responseJson)=>{
-      console.log(responseJson);
+      // console.log(responseJson);
       if (responseJson.status === "success"){
         this.setState({login: true, meshifyUsername: responseJson.username})
       } else if (responseJson.status === 'failure'){

app/components/Company.js

@@ -1,7 +1,6 @@
 import React from 'react';
-import {auth, baseURL} from './Meshify';
-import {MaxWaterSystemList} from './MaxWaterSystemList'
-import {ABBFlowMeterList} from './ABBFlowMeterList'
+import {auth, baseURL, channelStarter} from './Meshify';
+import {DeviceList} from './DeviceList'
 import {isDefined} from './Utilities'
 
 export class Company extends React.Component {
@@ -29,14 +28,51 @@ export class Company extends React.Component {
     let maxWaterSystemCode = <span></span>
     if (isDefined(this.props.companyObj.devices.advvfdipp)){
       maxWaterSystemDevices = this.props.companyObj.devices.advvfdipp;
-      maxWaterSystemCode = <MaxWaterSystemList deviceList={maxWaterSystemDevices} listName="Max Water System" />
+      let tableHeadInner = Object.keys(channelStarter.advvfdipp).sort((a, b)=>{
+        return channelStarter.advvfdipp[a].order - channelStarter.advvfdipp[b].order;
+      }).map((ch, i)=>{
+        return <th key={"advvfdipp_" + i}>{channelStarter.advvfdipp[ch].name}</th>
+      })
+      let tableHead = <thead><tr><th>Well</th>{tableHeadInner}</tr></thead>
+      maxWaterSystemCode = <DeviceList 
+        deviceList={maxWaterSystemDevices} 
+        listName="Max Water System" 
+        deviceType="advvfdipp" 
+        tableHead={tableHead} />
     }
 
     let abbFlowDevices = [];
     let abbFlowCode = <span></span>
     if (isDefined(this.props.companyObj.devices.abbflow)){
       abbFlowDevices = this.props.companyObj.devices.abbflow;
-      abbFlowCode = <ABBFlowMeterList deviceList={abbFlowDevices} listName="ABB Flowmeter" />
+      let tableHeadInner = Object.keys(channelStarter.abbflow).sort((a, b)=>{
+        return channelStarter.abbflow[a].order - channelStarter.abbflow[b].order;
+      }).map((ch, i)=>{
+        return <th key={"abbflow_" + i}>{channelStarter.abbflow[ch].name}</th>
+      })
+      let tableHead = <thead><tr><th>Well</th>{tableHeadInner}</tr></thead>
+      abbFlowCode = <DeviceList 
+        deviceList={abbFlowDevices} 
+        listName="ABB Flowmeter" 
+        deviceType="abbflow" 
+        tableHead={tableHead} />
+    }
+
+    let flowMonitorDevices = [];
+    let flowMonitorCode = <span></span>
+    if (isDefined(this.props.companyObj.devices.flowmonitor)){
+      flowMonitorDevices = this.props.companyObj.devices.flowmonitor;
+      let tableHeadInner = Object.keys(channelStarter.flowmonitor).sort((a, b)=>{
+        return channelStarter.flowmonitor[a].order - channelStarter.flowmonitor[b].order;
+      }).map((ch, i)=>{
+        return <th key={"flowmonitor_" + i}>{channelStarter.flowmonitor[ch].name}</th>
+      })
+      let tableHead = <thead><tr><th>Well</th>{tableHeadInner}</tr></thead>
+      flowMonitorCode = <DeviceList 
+        deviceList={flowMonitorDevices} 
+        listName="Flow Monitor" 
+        deviceType="flowmonitor" 
+        tableHead={tableHead} />
     }
 
 
@@ -46,6 +82,7 @@ export class Company extends React.Component {
         
         {maxWaterSystemCode} 
         {abbFlowCode} 
+        {flowMonitorCode}
         <hr />
       </div>
     );

app/components/Device.js

@@ -1,108 +1,34 @@
 import React from 'react';
-import {auth, baseURL} from './Meshify';
 import {Channel} from './Channel';
 
 export class Device extends React.Component {
   constructor(props){
     super(props);
-
     this.state = {channels: []};
-    this.getChannels = this.getChannels.bind(this);
-    this.showChannels = this.showChannels.bind(this);
-    this.hideChannels = this.hideChannels.bind(this);
   }
 
-  getChannels(){
-    let t = this;
-    const deviceId = this.props.deviceId;
-
-    $.ajax({
-      type: "GET",
-      dataType: 'json',
-      url: baseURL + 'devices/' + deviceId + '/values',
-      beforeSend: function (xhr) {
-          xhr.setRequestHeader("Authorization", auth.authType + " " + auth.token);
-      },
-      success: function(data){
-        let channels = [];
-        for (var c in data){
-          let newChan = {};
-          newChan.name = c;
-          newChan.timestamp = data[c].timestamp;
-          newChan.value = data[c].value;
-          channels.push(newChan);
-        }
-        t.setState({channels: channels});
-      }
-    })
+  componentWillMount(){
+    // console.log(nextProps);
+    this.setState({channels: this.props.channelStarter});
   }
 
-  hideChannels(){
-    this.setState({
-      channels: []
-    })
-  }
-
-  showChannels(){
-    this.getChannels();
-  }
 
   render(){
-    const deviceName = this.props.name;
-    const deviceType = this.props.deviceType;
-    const deviceId = this.props.deviceId;
-
-    const channelList = this.state.channels.map(function(ch, i){
-      return <Channel key={deviceId + "_channel_" + i}
+    let t = this;
+    const channelList = this.props.values.sort((a, b) => {
+      return this.state.channels[a.channel].order - this.state.channels[b.channel].order;
+    }).map(function(ch, i){
+      return <Channel key={t.props.deviceId + "_channel_" + i}
         name={ch.name}
         timestamp={ch.timestamp}
         value={ch.value} />
     });
 
-    const deviceDisplay = (
-      <h3 className="ui header">{deviceName} [{deviceType}]</h3>
-    )
-
-    const channelHideButton = <button className="ui button" onClick={this.hideChannels}>Hide Channels</button>;
-    const channelTable = (
-      <table className="ui celled table">
-        <thead>
-          <tr>
-            <th>Name</th>
-            <th>Value</th>
-            <th>Timestamp</th>
-          </tr>
-        </thead>
-        <tbody>
-          {channelList}
-        </tbody>
-      </table>
+    return (
+      <tr>
+        <td>{this.props.name}</td>
+        {channelList}
+      </tr>
     );
-
-    const channelShowButton = <button className="ui primary button" onClick={this.showChannels}>Fetch and Show Channels</button>;
-
-    if (this.state.channels.length > 0){
-      return (
-        <div className="ui row">
-          <div className="ui column">
-            {deviceDisplay}
-            {channelHideButton}
-            {channelTable}
-          </div>
-        </div>
-      );
-    } else {
-      return (
-        <div className="ui row">
-          <div className="ui column">
-            {deviceDisplay}
-            {channelShowButton}
-          </div>
-        </div>
-      );
-    }
-
   }
-
-
 }

app/components/DeviceList.js

@@ -1,9 +1,8 @@
 import React from 'react';
-import {auth, baseURL} from './Meshify';
+import {auth, baseURL, channelStarter} from './Meshify';
 import {Device} from './Device';
-import {ABBFlowMeter} from './ABBFlowMeter';
 
-export class ABBFlowMeterList extends React.Component {
+export class DeviceList extends React.Component {
   constructor(props){
     super(props);
     this.state = {
@@ -12,44 +11,29 @@ export class ABBFlowMeterList extends React.Component {
     this.toggleTable = this.toggleTable.bind(this)
   }
 
-  componentDidMount() {
-  }
-
   toggleTable(){
     this.setState({tableVisible: !this.state.tableVisible});
   }
 
 
   render(){
-  const devices = this.props.deviceList.map((dev, i) =>{
+    const devices = this.props.deviceList.map((dev, i) =>{
       return (
-        <ABBFlowMeter key={"abbflow_" + i}
+        <Device key={this.props.deviceType + "_" + i}
           deviceId={dev.id}
-          deviceType="ABB Flowmeter"
+          deviceType={this.props.listName}
           name={dev.vanityName} 
-          values={dev.values}/>
+          values={dev.values}
+          channelStarter={channelStarter[this.props.deviceType]} />
       );
     });
 
     let showHideButton
     let deviceTable
-    let tableHead = <thead>
-        <tr>
-          <th>Well</th>
-          <th>Yesterday Total</th>
-          <th>Today Total</th>
-          <th>Flow Rate</th>
-          <th>Diff. Pressure</th>
-          <th>Static Pressure</th>
-          <th>Temperature</th>
-          <th>Battery Voltage</th>
-          <th>Last Calc. Period</th>
-        </tr>
-      </thead>
     if (this.state.tableVisible){
       showHideButton = <button className="btn btn-outline-primary" onClick={this.toggleTable}>Hide</button>;
       deviceTable = <table className="table small table-bordered table-responsive">
-        {tableHead}
+        {this.props.tableHead}
         <tbody>
           {devices}
         </tbody>

app/components/MaxWaterSystem.js

@@ -1,47 +0,0 @@
-import React from 'react';
-import {auth, baseURL} from './Meshify';
-import {Channel} from './Channel';
-
-let channelStarter = {
-  wellstatus: {order: 1, data:{}},
-  flowtotalyesterday: {order: 2, data:{}},
-  flowtotal: {order: 3, data:{}},
-  energytotalyesterday: {order: 4, data:{}},
-  energytotal: {order: 5, data:{}},
-  fluidlevel: {order: 6, data:{}},
-  flowrate: {order: 7, data:{}},
-  vfdcurrent: {order: 8, data:{}},
-  vfd_fault: {order: 9, data:{}},
-  pidcontrolmode: {order: 10, data:{}},
-  downholesensorstatus: {order: 11, data:{}},
-  intakepressure: {order: 12, data:{}},
-  intaketemperature: {order: 13, data:{}},
-  tubingpressure: {order: 14, data:{}},
-}
-
-export class MaxWaterSystem extends React.Component {
-  constructor(props){
-    super(props);
-    this.state = {channels: channelStarter};
-  }
-
-
-  render(){
-    let t = this;
-    const channelList = this.props.values.sort((a, b) => {
-      return this.state.channels[a.channel].order - this.state.channels[b.channel].order;
-    }).map(function(ch, i){
-      return <Channel key={t.props.deviceId + "_channel_" + i}
-        name={ch.name}
-        timestamp={ch.timestamp}
-        value={ch.value} />
-    });
-
-    return (
-      <tr>
-        <td>{this.props.name}</td>
-        {channelList}
-      </tr>
-    );
-  }
-}

app/components/MaxWaterSystemList.js

@@ -1,75 +0,0 @@
-import React from 'react';
-import {auth, baseURL} from './Meshify';
-import {Device} from './Device';
-import {MaxWaterSystem} from './MaxWaterSystem';
-
-export class MaxWaterSystemList extends React.Component {
-  constructor(props){
-    super(props);
-    this.state = {
-      tableVisible: true
-    }
-    this.toggleTable = this.toggleTable.bind(this)
-  }
-
-  componentDidMount() {
-  }
-
-  toggleTable(){
-    this.setState({tableVisible: !this.state.tableVisible});
-  }
-
-  render(){
-    let tableHead = <thead>
-        <tr>
-          <th>Well</th>
-          <th>Status</th>
-          <th>Flow Yest.</th>
-          <th>Flow Today</th>
-          <th>Energy Yest.</th>
-          <th>Energy Today</th>
-          <th>Fluid Level</th>
-          <th>Flowrate</th>
-          <th>VFD Current</th>
-          <th>VFD Status</th>
-          <th>Control Mode</th>
-          <th>DH Status</th>
-          <th>Intake Pres.</th>
-          <th>Intake Temp.</th>
-          <th>Tubing Pres.</th>
-        </tr>
-      </thead>
-
-  const devices = this.props.deviceList.map((dev, i) =>{
-      return (
-        <MaxWaterSystem key={"maxwatersystem_" + i}
-          deviceId={dev.id}
-          deviceType="Max Water System"
-          name={dev.vanityName} 
-          values={dev.values}/>
-      );
-    });
-
-    let showHideButton
-    let deviceTable
-    if (this.state.tableVisible){
-      showHideButton = <button className="btn btn-outline-primary" onClick={this.toggleTable}>Hide</button>;
-      deviceTable = <table className="table small table-bordered table-responsive">
-        {tableHead}
-        <tbody>
-          {devices}
-        </tbody>
-      </table>
-    } else {
-      showHideButton = <button className="btn btn-outline-primary" onClick={this.toggleTable}>Show</button>;
-      deviceTable = <span></span>
-    }
-
-    return (
-      <div className="container-fluid">
-        <h2>{this.props.listName} [{devices.length}] {showHideButton}</h2>
-        {deviceTable}
-      </div>
-    )
-  }
-}

app/components/Meshify.js

@@ -15,4 +15,42 @@ export const auth = {
 // export const baseURL = "http://localhost:3000/"
 export const baseURL = "http://api.henrypump.cloud/"
 
+export let channelStarter = {
+  abbflow: {
+    yesterday_volume: {order: 1, name: "Yesterday Flow", data:{}},
+    today_volume: {order: 2, name: "Today Flow", data:{}},
+    volume_flow: {order: 3, name: "Flow Rate", data:{}},
+    differential_pressure: {order: 4, name: "Diff. Pressure", data:{}},
+    static_pressure: {order: 5, name: "Static Pressure", data:{}},
+    temperature: {order: 6, name: "Temperature", data:{}},
+    battery_voltage: {order: 7, name: "Battery Voltage", data:{}},
+    last_calculation_period_volume: {order: 8, name: "Last Calc. Period", data:{}}
+  },
+  advvfdipp: {
+    wellstatus: {order: 1, name: "Well Status", data:{}},
+    flowtotalyesterday: {order: 2, name: "Yesterday Flow", data:{}},
+    flowtotal: {order: 3, name: "Today Flow", data:{}},
+    energytotalyesterday: {order: 4, name: "Yesterday Energy", data:{}},
+    energytotal: {order: 5, name: "Today Energy", data:{}},
+    fluidlevel: {order: 6, name: "Fluid Level", data:{}},
+    flowrate: {order: 7, name: "Flow Rate", data:{}},
+    vfdcurrent: {order: 8, name: "VFD Current", data:{}},
+    vfd_fault: {order: 9, name: "VFD Fault", data:{}},
+    pidcontrolmode: {order: 10, name: "Control Mode", data:{}},
+    downholesensorstatus: {order: 11, name: "DH Sensor Status", data:{}},
+    intakepressure: {order: 12, name: "Intake Pressure", data:{}},
+    intaketemperature: {order: 13, name: "Intake Temperature", data:{}},
+    tubingpressure: {order: 14, name: "Tubing Pressure", data:{}},
+  },
+  flowmonitor:{
+    gal_total_yesterday: {order: 1, name: "GAL Yesterday", data:{}},
+    bbl_total_yesterday: {order: 2, name: "BBL Yesterday", data:{}},
+    gal_total: {order: 3, name: "GAL Today", data:{}},
+    bbl_total: {order: 4, name: "BBL Today", data:{}},
+    gpm_flow: {order: 5, name: "GPM Flow Rate", data:{}},
+    bpd_flow: {order: 6, name: "BPD Flow Rate", data:{}},
+    run_status: {order: 7, name: "Run Status", data:{}},
+  }
+}
+