diff options
Diffstat (limited to 'libmproxy/web/static/js/app.js')
| -rw-r--r-- | libmproxy/web/static/js/app.js | 272 |
1 files changed, 272 insertions, 0 deletions
diff --git a/libmproxy/web/static/js/app.js b/libmproxy/web/static/js/app.js new file mode 100644 index 00000000..8dada810 --- /dev/null +++ b/libmproxy/web/static/js/app.js @@ -0,0 +1,272 @@ + + function EventEmitter(){"use strict"; + this.listeners = {}; + } + EventEmitter.prototype.emit=function(event){"use strict"; + if(!(event in this.listeners)){ + return; + } + this.listeners[event].forEach(function (listener) { + listener(event, this); + }.bind(this)); + }; + EventEmitter.prototype.addListener=function(event, f){"use strict"; + this.listeners[event] = this.listeners[event] || []; + this.listeners[event].push(f); + }; + EventEmitter.prototype.removeListener=function(event, f){"use strict"; + if(!(event in this.listeners)){ + return false; + } + var index = this.listeners.indexOf(f); + if (index >= 0) { + this.listeners.splice(this.listeners.indexOf(f), 1); + } + }; + + +var FLOW_CHANGED = "flow.changed"; + +for(var EventEmitter____Key in EventEmitter){if(EventEmitter.hasOwnProperty(EventEmitter____Key)){FlowStore[EventEmitter____Key]=EventEmitter[EventEmitter____Key];}}var ____SuperProtoOfEventEmitter=EventEmitter===null?null:EventEmitter.prototype;FlowStore.prototype=Object.create(____SuperProtoOfEventEmitter);FlowStore.prototype.constructor=FlowStore;FlowStore.__superConstructor__=EventEmitter; + function FlowStore() {"use strict"; + EventEmitter.call(this); + this.flows = []; + } + + FlowStore.prototype.getAll=function() {"use strict"; + return this.flows; + }; + + FlowStore.prototype.close=function(){"use strict"; + console.log("FlowStore.close()"); + this.listeners = []; + }; + + FlowStore.prototype.emitChange=function() {"use strict"; + return this.emit(FLOW_CHANGED); + }; + + FlowStore.prototype.addChangeListener=function(f) {"use strict"; + this.addListener(FLOW_CHANGED, f); + }; + + FlowStore.prototype.removeChangeListener=function(f) {"use strict"; + this.removeListener(FLOW_CHANGED, f); + }; + + +for(var FlowStore____Key in FlowStore){if(FlowStore.hasOwnProperty(FlowStore____Key)){DummyFlowStore[FlowStore____Key]=FlowStore[FlowStore____Key];}}var ____SuperProtoOfFlowStore=FlowStore===null?null:FlowStore.prototype;DummyFlowStore.prototype=Object.create(____SuperProtoOfFlowStore);DummyFlowStore.prototype.constructor=DummyFlowStore;DummyFlowStore.__superConstructor__=FlowStore; + function DummyFlowStore(flows) {"use strict"; + FlowStore.call(this); + this.flows = flows; + } + + DummyFlowStore.prototype.addFlow=function(flow) {"use strict"; + this.flows.push(flow); + this.emitChange(); + }; + + + +var SETTINGS_CHANGED = "settings.changed"; + +for(EventEmitter____Key in EventEmitter){if(EventEmitter.hasOwnProperty(EventEmitter____Key)){Settings[EventEmitter____Key]=EventEmitter[EventEmitter____Key];}}Settings.prototype=Object.create(____SuperProtoOfEventEmitter);Settings.prototype.constructor=Settings;Settings.__superConstructor__=EventEmitter; + function Settings(){"use strict"; + EventEmitter.call(this); + this.settings = false; + } + + Settings.prototype.getAll=function(){"use strict"; + return this.settings; + }; + + Settings.prototype.emitChange=function() {"use strict"; + return this.emit(SETTINGS_CHANGED); + }; + + Settings.prototype.addChangeListener=function(f) {"use strict"; + this.addListener(SETTINGS_CHANGED, f); + }; + + Settings.prototype.removeChangeListener=function(f) {"use strict"; + this.removeListener(SETTINGS_CHANGED, f); + }; + + +for(var Settings____Key in Settings){if(Settings.hasOwnProperty(Settings____Key)){DummySettings[Settings____Key]=Settings[Settings____Key];}}var ____SuperProtoOfSettings=Settings===null?null:Settings.prototype;DummySettings.prototype=Object.create(____SuperProtoOfSettings);DummySettings.prototype.constructor=DummySettings;DummySettings.__superConstructor__=Settings; + function DummySettings(settings){"use strict"; + Settings.call(this); + this.settings = settings; + } + DummySettings.prototype.update=function(obj){"use strict"; + _.merge(this.settings, obj); + this.emitChange(); + }; + +/** @jsx React.DOM */ + +var Footer = React.createClass({displayName: 'Footer', + render : function(){ + return (React.DOM.footer(null, + React.DOM.span({className: "label label-success"}, "transparent mode") + )); + } +}); +/** @jsx React.DOM */ + +var MainMenu = React.createClass({displayName: 'MainMenu', + render : function(){ + return (React.DOM.div(null, "Main Menu")); + } +}); +var ToolsMenu = React.createClass({displayName: 'ToolsMenu', + render : function(){ + return (React.DOM.div(null, "Tools Menu")); + } +}); +var ReportsMenu = React.createClass({displayName: 'ReportsMenu', + render : function(){ + return (React.DOM.div(null, "Reports Menu")); + } +}); + +var _Header_Entries = { + main: { + title: "Traffic", + route: "main", + menu: MainMenu + }, + tools: { + title: "Tools", + route: "main", + menu: ToolsMenu + }, + reports: { + title: "Visualization", + route: "reports", + menu: ReportsMenu + } +}; + +var Header = React.createClass({displayName: 'Header', + getInitialState: function(){ + return {active: "main"}; + }, + handleClick: function(active){ + this.setState({active: active}); + ReactRouter.transitionTo(_Header_Entries[active].route); + return false; + }, + handleFileClick: function(){ + console.log("File click"); + }, + render: function(){ + + var header = []; + for(var item in _Header_Entries){ + var classes = this.state.active == item ? "active" : ""; + header.push(React.DOM.a({key: item, href: "#", className: classes, + onClick: this.handleClick.bind(this, item)}, _Header_Entries[item].title)); + } + + var menu = _Header_Entries[this.state.active].menu(); + return ( + React.DOM.header(null, + React.DOM.div({className: "title-bar"}, + "mitmproxy ", this.props.settings.version + ), + React.DOM.nav(null, + React.DOM.a({href: "#", className: "special", onClick: this.handleFileClick}, " File "), + header + ), + React.DOM.div({className: "menu"}, + menu + ) + )); + } +}); +/** @jsx React.DOM */ + +var App = React.createClass({displayName: 'App', + getInitialState: function () { + return { + settings: {} //TODO: How explicit should we get here? + //List all subattributes? + }; + }, + componentDidMount: function () { + //TODO: Replace DummyStore with real settings over WS (https://facebook.github.io/react/tips/initial-ajax.html) + var settingsStore = new DummySettings({ + version: "0.12" + }); + this.setState({settingsStore: settingsStore}); + settingsStore.addChangeListener(this.onSettingsChange); + }, + onSettingsChange: function(event, settings){ + this.setState({settings: settings.getAll()}); + }, + render: function () { + return ( + React.DOM.div({id: "container"}, + Header({settings: this.state.settings}), + React.DOM.div({id: "main"}, + this.props.activeRouteHandler({settings: this.state.settings}) + ), + Footer(null) + ) + ); + } +}); + +var TrafficTable = React.createClass({displayName: 'TrafficTable', + getInitialState: function(){ + return { + flows: [] + }; + }, + componentDidMount: function () { + var flowStore = new DummyFlowStore([]); + this.setState({flowStore: flowStore}); + + flowStore.addChangeListener(this.onFlowsChange); + + $.getJSON("/flows.json").success(function (flows) { + + flows.forEach(function (flow, i) { + window.setTimeout(function () { + flowStore.addFlow(flow); + }, _.random(i*400,i*400+1000)); + }); + + }.bind(this)); + }, + componentWillUnmount: function(){ + this.state.flowStore.close(); + }, + onFlowsChange: function(event, flows){ + this.setState({flows: flows.getAll()}); + }, + render: function () { + var flows = this.state.flows.map(function(flow){ + return React.DOM.div(null, flow.request.method, " ", flow.request.scheme, "://", flow.request.host, flow.request.path); + }); + return React.DOM.pre(null, flows); + } +}); + +var Reports = React.createClass({displayName: 'Reports', + render: function(){ + return (React.DOM.div(null, "Report Editor")); + } +}); + +var routes = ( + ReactRouter.Routes({location: "hash"}, + ReactRouter.Route({name: "app", path: "/", handler: App}, + ReactRouter.Route({name: "main", handler: TrafficTable}), + ReactRouter.Route({name: "reports", handler: Reports}), + ReactRouter.Redirect({to: "main"}) + ) + ) +); +//# sourceMappingURL=app.js.map
\ No newline at end of file |