X-Git-Url: https://osm.etsi.org/gitweb/?a=blobdiff_plain;f=skyquake%2Fframework%2Fwidgets%2Ftransmit-receive%2Ftransmit-receive.js;fp=skyquake%2Fframework%2Fwidgets%2Ftransmit-receive%2Ftransmit-receive.js;h=ff03af163661312d6d6712382d3d9be2c09a6310;hb=e29efc315df33d546237e270470916e26df391d6;hp=0000000000000000000000000000000000000000;hpb=9c5e457509ba5a1822c316635c6308874e61b4b9;p=osm%2FUI.git

diff --git a/skyquake/framework/widgets/transmit-receive/transmit-receive.js b/skyquake/framework/widgets/transmit-receive/transmit-receive.js
new file mode 100644
index 000000000..ff03af163
--- /dev/null
+++ b/skyquake/framework/widgets/transmit-receive/transmit-receive.js
@@ -0,0 +1,104 @@
+
+/*
+ * 
+ *   Copyright 2016 RIFT.IO Inc
+ *
+ *   Licensed under the Apache License, Version 2.0 (the "License");
+ *   you may not use this file except in compliance with the License.
+ *   You may obtain a copy of the License at
+ *
+ *       http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *   Unless required by applicable law or agreed to in writing, software
+ *   distributed under the License is distributed on an "AS IS" BASIS,
+ *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *   See the License for the specific language governing permissions and
+ *   limitations under the License.
+ *
+ */
+var React = require("react");
+var MIXINS = require("../mixins/ButtonEventListener.js");
+
+
+
+
+/**
+ *  Transmit and Receive Component
+ *  It's props values and a brief description below
+ *
+ *
+ *
+ **/
+module.exports = React.createClass({
+  displayName: 'TransmitReceive',
+  mixins:MIXINS,
+  propTypes: {
+    component_data:React.PropTypes.shape({
+      incoming:React.PropTypes.shape({
+        bytes:React.PropTypes.number,
+        packets:React.PropTypes.number,
+        label:React.PropTypes.string, 
+        "byte-rate":React.PropTypes.number,
+        "packet-rate":React.PropTypes.number
+      }),
+      outgoing:React.PropTypes.shape({
+        bytes:React.PropTypes.number,
+        packets:React.PropTypes.number,
+        label:React.PropTypes.string, 
+        "byte-rate":React.PropTypes.number,
+        "packet-rate":React.PropTypes.number
+      })
+    })
+  },
+
+  /**
+   * Defines default state.
+   *
+
+   */
+  getInitialState: function() {
+  },
+
+
+  /**
+   *  Called when props are changed.  Syncs props with state.
+   */
+  componentWillReceiveProps: function(nextProps) {
+
+  },
+
+  /**
+   * Calls the render on the gauge object once the component first mounts
+   */
+  componentDidMount: function() {
+    this.canvasRender(this.state);
+  },
+
+  /**
+   * If any of the state variables have changed, the component should update.
+   * Note, this is where the render step occures for the gauge object.
+   */
+  shouldComponentUpdate: function(nextProps, nextState) {
+
+  },
+
+  /**
+   * Renders the Gauge Component
+   * Returns the canvas element the gauge will be housed in.
+   * @returns {*}
+   */
+  render: function() {
+    var gaugeDOM = React.createElement("div", null,
+      React.createElement("canvas",
+        {className: "rwgauge", style:
+          {width:'100%',height:'100%','maxWidth':this.state.width + 'px','maxHeight':'240px'},
+          ref:'gaugeDOM'
+        }
+      )
+    )
+
+
+
+    return gaugeDOM;
+  }
+});