From 674bc4273e9a2f1a2e41ef977a80219423c7cb51 Mon Sep 17 00:00:00 2001 From: Maximilian Hils Date: Tue, 16 Sep 2014 00:56:43 +0200 Subject: format javascript --- libmproxy/web/static/js/app.js | 459 ++++++++++++++-------------- web/gulpfile.js | 2 +- web/src/css/app.less | 4 +- web/src/css/eventlog.less | 34 +-- web/src/css/footer.less | 4 +- web/src/js/Connection.es6.js | 4 - web/src/js/Dispatcher.es6.js | 55 ++-- web/src/js/actions.es6.js | 22 +- web/src/js/app.js | 6 +- web/src/js/components/EventLog.react.js | 58 ++-- web/src/js/components/Header.react.js | 18 +- web/src/js/components/ProxyApp.react.js | 46 +-- web/src/js/components/TrafficTable.react.js | 29 +- web/src/js/stores/EventLogStore.es6.js | 129 ++++---- web/src/js/stores/SettingsStore.es6.js | 41 +-- web/src/js/stores/base.es6.js | 48 +-- 16 files changed, 497 insertions(+), 462 deletions(-) diff --git a/libmproxy/web/static/js/app.js b/libmproxy/web/static/js/app.js index 92d6c4c8..8c898673 100644 --- a/libmproxy/web/static/js/app.js +++ b/libmproxy/web/static/js/app.js @@ -1,172 +1,188 @@ const PayloadSources = { - VIEW_ACTION: "VIEW_ACTION", - SERVER_ACTION: "SERVER_ACTION" + VIEW_ACTION: "VIEW_ACTION", + SERVER_ACTION: "SERVER_ACTION" }; - - function Dispatcher() {"use strict"; - this.callbacks = []; - } - - Dispatcher.prototype.register=function(callback){"use strict"; - this.callbacks.push(callback); - }; - - Dispatcher.prototype.unregister=function(callback){"use strict"; - var index = this.callbacks.indexOf(f); - if (index >= 0) { - this.callbacks.splice(this.callbacks.indexOf(f), 1); + function Dispatcher() {"use strict"; + this.callbacks = []; } - }; - - Dispatcher.prototype.dispatch=function(payload){"use strict"; - console.debug("dispatch", payload); - this.callbacks.forEach(function(callback) { - callback(payload); - }); - }; - + Dispatcher.prototype.register=function(callback) {"use strict"; + this.callbacks.push(callback); + }; + Dispatcher.prototype.unregister=function(callback) {"use strict"; + var index = this.callbacks.indexOf(f); + if (index >= 0) { + this.callbacks.splice(this.callbacks.indexOf(f), 1); + } + }; + Dispatcher.prototype.dispatch=function(payload) {"use strict"; + console.debug("dispatch", payload); + this.callbacks.forEach(function(callback) { + callback(payload); + }); + }; AppDispatcher = new Dispatcher(); -AppDispatcher.dispatchViewAction = function(action){ - action.actionSource = PayloadSources.VIEW_ACTION; - this.dispatch(action); +AppDispatcher.dispatchViewAction = function(action) { + action.actionSource = PayloadSources.VIEW_ACTION; + this.dispatch(action); }; -AppDispatcher.dispatchServerAction = function(action){ - action.actionSource = PayloadSources.SERVER_ACTION; - this.dispatch(action); +AppDispatcher.dispatchServerAction = function(action) { + action.actionSource = PayloadSources.SERVER_ACTION; + this.dispatch(action); }; var ActionTypes = { - SETTINGS_UPDATE: "SETTINGS_UPDATE", - EVENTLOG_ADD: "EVENTLOG_ADD" + SETTINGS_UPDATE: "SETTINGS_UPDATE", + EVENTLOG_ADD: "EVENTLOG_ADD" }; var SettingsActions = { - update:function(settings) { - settings = _.merge({}, SettingsStore.getAll(), settings); - //TODO: Update server. - - //Facebook Flux: We do an optimistic update on the client already. - AppDispatcher.dispatchViewAction({ - actionType: ActionTypes.SETTINGS_UPDATE, - settings: settings - }); - } + update:function(settings) { + settings = _.merge({}, SettingsStore.getAll(), settings); + //TODO: Update server. + + //Facebook Flux: We do an optimistic update on the client already. + AppDispatcher.dispatchViewAction({ + actionType: ActionTypes.SETTINGS_UPDATE, + settings: settings + }); + } }; - 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.apply(this, arguments); - }.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[event].indexOf(f); - if (index >= 0) { - this.listeners[event].splice(index, 1); - } - }; + 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.apply(this, arguments); + }.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[event].indexOf(f); + if (index >= 0) { + this.listeners[event].splice(index, 1); + } + }; for(var EventEmitter____Key in EventEmitter){if(EventEmitter.hasOwnProperty(EventEmitter____Key)){_SettingsStore[EventEmitter____Key]=EventEmitter[EventEmitter____Key];}}var ____SuperProtoOfEventEmitter=EventEmitter===null?null:EventEmitter.prototype;_SettingsStore.prototype=Object.create(____SuperProtoOfEventEmitter);_SettingsStore.prototype.constructor=_SettingsStore;_SettingsStore.__superConstructor__=EventEmitter; - function _SettingsStore() {"use strict"; - EventEmitter.call(this); - this.settings = { version: "0.12", showEventLog: true }; //FIXME: Need to get that from somewhere. - } - _SettingsStore.prototype.getAll=function() {"use strict"; - return this.settings; - }; - _SettingsStore.prototype.handle=function(action) {"use strict"; - switch (action.actionType) { - case ActionTypes.SETTINGS_UPDATE: - this.settings = action.settings; - this.emit("change"); - break; - default: - return; - } - }; + function _SettingsStore() {"use strict"; + EventEmitter.call(this); + + //FIXME: What do we do if we haven't requested anything from the server yet? + this.settings = { + version: "0.12", + showEventLog: true + }; + } + _SettingsStore.prototype.getAll=function() {"use strict"; + return this.settings; + }; + _SettingsStore.prototype.handle=function(action) {"use strict"; + switch (action.actionType) { + case ActionTypes.SETTINGS_UPDATE: + this.settings = action.settings; + this.emit("change"); + break; + default: + return; + } + }; var SettingsStore = new _SettingsStore(); AppDispatcher.register(SettingsStore.handle.bind(SettingsStore)); +// +// We have an EventLogView and an EventLogStore: +// The basic architecture is that one can request views on the event log +// from the store, which returns a view object and then deals with getting the data required for the view. +// The view object is accessed by React components and distributes updates etc. +// +// See also: components/EventLog.react.js for(var EventEmitter____Key in EventEmitter){if(EventEmitter.hasOwnProperty(EventEmitter____Key)){EventLogView[EventEmitter____Key]=EventEmitter[EventEmitter____Key];}}var ____SuperProtoOfEventEmitter=EventEmitter===null?null:EventEmitter.prototype;EventLogView.prototype=Object.create(____SuperProtoOfEventEmitter);EventLogView.prototype.constructor=EventLogView;EventLogView.__superConstructor__=EventEmitter; - function EventLogView(store, live){"use strict"; - EventEmitter.call(this); - this.$EventLogView_store = store; - this.live = live; - this.log = []; - - this.add = this.add.bind(this); - - if(live){ - this.$EventLogView_store.addListener("new_entry", this.add); - } - - } - EventLogView.prototype.close=function() {"use strict"; - this.$EventLogView_store.removeListener("new_entry", this.add); - }; - EventLogView.prototype.getAll=function() {"use strict"; - return this.log; - }; - - EventLogView.prototype.add=function(entry){"use strict"; - this.log.push(entry); - this.emit("change"); - }; - EventLogView.prototype.add_bulk=function(messages){"use strict"; - var log = messages; - var last_id = log[log.length-1].id; - var to_add = _.filter(this.log, function(entry) {return entry.id > last_id;}); - this.log = log.concat(to_add); - this.emit("change"); - }; + function EventLogView(store, live) {"use strict"; + EventEmitter.call(this); + this.$EventLogView_store = store; + this.live = live; + this.log = []; + + this.add = this.add.bind(this); + + if (live) { + this.$EventLogView_store.addListener("new_entry", this.add); + } + } + EventLogView.prototype.close=function() {"use strict"; + this.$EventLogView_store.removeListener("new_entry", this.add); + }; + EventLogView.prototype.getAll=function() {"use strict"; + return this.log; + }; + EventLogView.prototype.add=function(entry) {"use strict"; + this.log.push(entry); + this.emit("change"); + }; + EventLogView.prototype.add_bulk=function(messages) {"use strict"; + var log = messages; + var last_id = log[log.length - 1].id; + var to_add = _.filter(this.log, function(entry) {return entry.id > last_id;}); + this.log = log.concat(to_add); + this.emit("change"); + }; for(EventEmitter____Key in EventEmitter){if(EventEmitter.hasOwnProperty(EventEmitter____Key)){_EventLogStore[EventEmitter____Key]=EventEmitter[EventEmitter____Key];}}_EventLogStore.prototype=Object.create(____SuperProtoOfEventEmitter);_EventLogStore.prototype.constructor=_EventLogStore;_EventLogStore.__superConstructor__=EventEmitter;function _EventLogStore(){"use strict";if(EventEmitter!==null){EventEmitter.apply(this,arguments);}} - _EventLogStore.prototype.getView=function(since){"use strict"; - var view = new EventLogView(this, !since); - - //TODO: Really do bulk retrieval of last messages. - - window.setTimeout(function(){ - view.add_bulk([ - { id:1, message: "Hello World"}, - { id:2, message: "I was already transmitted as an event."} - ]); - }, 100); - - var id = 2; - view.add({id:id++, message: "I was already transmitted as an event."}); - view.add({id:id++, message: "I was only transmitted as an event before the bulk was added.."}); - window.setInterval(function(){ - view.add({id: id++, message: "."}); - }, 1000); - return view; - }; - _EventLogStore.prototype.handle=function(action) {"use strict"; - switch (action.actionType) { - case ActionTypes.EVENTLOG_ADD: - this.emit("new_message", action.message); - break; - default: - return; - } - }; + _EventLogStore.prototype.getView=function(since) {"use strict"; + var view = new EventLogView(this, !since); + + //TODO: Really do bulk retrieval of last messages. + window.setTimeout(function() { + view.add_bulk([{ + id: 1, + message: "Hello World" + }, { + id: 2, + message: "I was already transmitted as an event." + }]); + }, 100); + + var id = 2; + view.add({ + id: id++, + message: "I was already transmitted as an event." + }); + view.add({ + id: id++, + message: "I was only transmitted as an event before the bulk was added.." + }); + window.setInterval(function() { + view.add({ + id: id++, + message: "." + }); + }, 1000); + return view; + }; + _EventLogStore.prototype.handle=function(action) {"use strict"; + switch (action.actionType) { + case ActionTypes.EVENTLOG_ADD: + this.emit("new_message", action.message); + break; + default: + return; + } + }; var EventLogStore = new _EventLogStore(); AppDispatcher.register(EventLogStore.handle.bind(EventLogStore)); @@ -177,11 +193,9 @@ AppDispatcher.register(EventLogStore.handle.bind(EventLogStore)); } this.root = root; } - _Connection.prototype.init=function() {"use strict"; this.openWebSocketConnection(); }; - _Connection.prototype.openWebSocketConnection=function() {"use strict"; this.ws = new WebSocket(this.root.replace("http", "ws") + "/ws"); var ws = this.ws; @@ -191,7 +205,6 @@ AppDispatcher.register(EventLogStore.handle.bind(EventLogStore)); ws.onerror = this.onerror.bind(this); ws.onclose = this.onclose.bind(this); }; - _Connection.prototype.onopen=function(open) {"use strict"; console.log("onopen", this, arguments); }; @@ -206,7 +219,6 @@ AppDispatcher.register(EventLogStore.handle.bind(EventLogStore)); console.log("onclose", this, arguments); }; - var Connection = new _Connection(); /** @jsx React.DOM */ @@ -217,21 +229,23 @@ var MainMenu = React.createClass({displayName: 'MainMenu', }); }, render:function(){ - return React.DOM.div(null, - React.DOM.button({className: "btn " + (this.props.settings.showEventLog ? "btn-primary" : "btn-default"), onClick: this.toggleEventLog}, + return ( + React.DOM.div(null, + React.DOM.button({className: "btn " + (this.props.settings.showEventLog ? "btn-primary" : "btn-default"), onClick: this.toggleEventLog}, React.DOM.i({className: "fa fa-database"}), " Display Event Log" + ) ) - ); + ); } }); var ToolsMenu = React.createClass({displayName: 'ToolsMenu', render:function(){ - return (React.DOM.div(null, "Tools Menu")); + return React.DOM.div(null, "Tools Menu"); } }); var ReportsMenu = React.createClass({displayName: 'ReportsMenu', render:function(){ - return (React.DOM.div(null, "Reports Menu")); + return React.DOM.div(null, "Reports Menu"); } }); @@ -268,7 +282,6 @@ var Header = React.createClass({displayName: 'Header', handleFileClick:function(){ console.log("File click"); }, - render:function(){ var header = []; for(var item in _Header_Entries){ @@ -292,74 +305,78 @@ var Header = React.createClass({displayName: 'Header', React.DOM.div({className: "menu"}, menu ) - )); + ) + ); } }); /** @jsx React.DOM */ var TrafficTable = React.createClass({displayName: 'TrafficTable', - getInitialState: function(){ + getInitialState:function() { return { flows: [] }; }, - componentDidMount:function(){ + componentDidMount:function() { //this.flowStore = FlowStore.getView(); //this.flowStore.addListener("change",this.onFlowChange); }, - componentWillUnmount:function(){ + componentWillUnmount:function() { //this.flowStore.removeListener("change",this.onFlowChange); //this.flowStore.close(); }, - onFlowChange:function(){ + onFlowChange:function() { this.setState({ //flows: this.flowStore.getAll() }); }, - render: function () { - /*var flows = this.state.flows.map(function(flow){ - return
{flow.request.method} {flow.request.scheme}://{flow.request.host}{flow.request.path}
; - }); *//**/ - x = "Flow"; - i = 12; - while(i--) x += x; - return React.DOM.div(null, React.DOM.pre(null, x)); - } + render:function() { + /*var flows = this.state.flows.map(function(flow){ + return
{flow.request.method} {flow.request.scheme}://{flow.request.host}{flow.request.path}
; + }); */ + //Dummy Text for layout testing + x = "Flow"; + i = 12; + while (i--) x += x; + return ( + React.DOM.div(null, React.DOM.pre(null, " ", x, " ")) + ); + } }); /** @jsx React.DOM */ var EventLog = React.createClass({displayName: 'EventLog', - getInitialState:function(){ - return { - log: [] - }; - }, - componentDidMount:function(){ - this.log = EventLogStore.getView(); - this.log.addListener("change",this.onEventLogChange); - }, - componentWillUnmount:function(){ - this.log.removeListener("change",this.onEventLogChange); - this.log.close(); - }, - onEventLogChange:function(){ - this.setState({ - log: this.log.getAll() - }); - }, - close:function(){ - SettingsActions.update({ - showEventLog: false - }); - }, - render:function(){ - var messages = this.state.log.map(function(row) {return React.DOM.div({key: row.id}, row.message);}); + getInitialState:function() { + return { + log: [] + }; + }, + componentDidMount:function() { + this.log = EventLogStore.getView(); + this.log.addListener("change", this.onEventLogChange); + }, + componentWillUnmount:function() { + this.log.removeListener("change", this.onEventLogChange); + this.log.close(); + }, + onEventLogChange:function() { + this.setState({ + log: this.log.getAll() + }); + }, + close:function() { + SettingsActions.update({ + showEventLog: false + }); + }, + render:function() { + var messages = this.state.log.map(function(row) {return React.DOM.div({key: row.id}, row.message);}); return ( React.DOM.div({className: "eventlog"}, - React.DOM.pre(null, - React.DOM.i({className: "fa fa-close close-button", onClick: this.close}), - messages - ) + React.DOM.pre(null, + React.DOM.i({className: "fa fa-close close-button", onClick: this.close}), + messages + ) ) ); } @@ -379,54 +396,54 @@ var Footer = React.createClass({displayName: 'Footer', //TODO: Move out of here, just a stub. var Reports = React.createClass({displayName: 'Reports', - render:function(){ - return (React.DOM.div(null, "Report Editor")); - } + render:function(){ + return React.DOM.div(null, "Report Editor"); + } }); var ProxyAppMain = React.createClass({displayName: 'ProxyAppMain', getInitialState:function(){ - return { settings: SettingsStore.getAll() }; + return { settings: SettingsStore.getAll() }; }, componentDidMount:function(){ - SettingsStore.addListener("change", this.onSettingsChange); + SettingsStore.addListener("change", this.onSettingsChange); }, componentWillUnmount:function(){ - SettingsStore.removeListener("change", this.onSettingsChange); + SettingsStore.removeListener("change", this.onSettingsChange); }, onSettingsChange:function(){ - console.log("onSettingsChange"); - this.setState({settings: SettingsStore.getAll()}); + console.log("onSettingsChange"); + this.setState({settings: SettingsStore.getAll()}); }, render:function() { - return ( - React.DOM.div({id: "container"}, - Header({settings: this.state.settings}), - React.DOM.div({id: "main"}, this.props.activeRouteHandler(null)), - this.state.settings.showEventLog ? EventLog(null) : null, - Footer(null) - ) - ); + return ( + React.DOM.div({id: "container"}, + Header({settings: this.state.settings}), + React.DOM.div({id: "main"}, this.props.activeRouteHandler(null)), + this.state.settings.showEventLog ? EventLog(null) : null, + Footer(null) + ) + ); } }); var ProxyApp = ( - ReactRouter.Routes({location: "hash"}, - ReactRouter.Route({name: "app", path: "/", handler: ProxyAppMain}, - ReactRouter.Route({name: "main", handler: TrafficTable}), - ReactRouter.Route({name: "reports", handler: Reports}), - ReactRouter.Redirect({to: "main"}) + ReactRouter.Routes({location: "hash"}, + ReactRouter.Route({name: "app", path: "/", handler: ProxyAppMain}, + ReactRouter.Route({name: "main", handler: TrafficTable}), + ReactRouter.Route({name: "reports", handler: Reports}), + ReactRouter.Redirect({to: "main"}) + ) ) - ) ); -$(function(){ +$(function() { - Connection.init(); - app = React.renderComponent(ProxyApp, document.body); + Connection.init(); + app = React.renderComponent(ProxyApp, document.body); }); //# sourceMappingURL=app.js.map \ No newline at end of file diff --git a/web/gulpfile.js b/web/gulpfile.js index 3aebcd95..6f72016b 100644 --- a/web/gulpfile.js +++ b/web/gulpfile.js @@ -98,7 +98,7 @@ gulp.task("scripts-prod", ["scripts-app-prod", "scripts-vendor-prod"]); gulp.task("jshint", function () { return gulp.src(["src/js/**"]) .pipe(dont_break_on_errors()) - .pipe(react({harmony: true})) + .pipe(react({harmony: false /* Do not do Harmony transformation for JSHint */})) .pipe(jshint()) .pipe(jshint.reporter("jshint-stylish")) }); diff --git a/web/src/css/app.less b/web/src/css/app.less index ce9d9149..a5ff516d 100644 --- a/web/src/css/app.less +++ b/web/src/css/app.less @@ -1,10 +1,10 @@ // www.paulirish.com/2012/box-sizing-border-box-ftw/ html { - box-sizing: border-box; + box-sizing: border-box; } *, *:before, *:after { - box-sizing: inherit; + box-sizing: inherit; } @import (less) "layout.less"; diff --git a/web/src/css/eventlog.less b/web/src/css/eventlog.less index 8ad304aa..6b0c0e61 100644 --- a/web/src/css/eventlog.less +++ b/web/src/css/eventlog.less @@ -1,22 +1,22 @@ .eventlog { - flex: 0 0 auto; + flex: 0 0 auto; - pre { - margin: 0; - border-radius: 0; - height: 200px; - overflow: auto; - } + pre { + margin: 0; + border-radius: 0; + height: 200px; + overflow: auto; + } - .close-button { - float: right; - margin: -9px; - padding: 4px; - cursor: pointer; - color: grey; - &:hover { - color: black; - } - } + .close-button { + float: right; + margin: -9px; + padding: 4px; + cursor: pointer; + color: grey; + &:hover { + color: black; + } + } } \ No newline at end of file diff --git a/web/src/css/footer.less b/web/src/css/footer.less index be7a1d76..c041a022 100644 --- a/web/src/css/footer.less +++ b/web/src/css/footer.less @@ -1,4 +1,4 @@ footer { - box-shadow: 0 -1px 3px lightgray; - padding: 0px 10px 3px; + box-shadow: 0 -1px 3px lightgray; + padding: 0px 10px 3px; } \ No newline at end of file diff --git a/web/src/js/Connection.es6.js b/web/src/js/Connection.es6.js index 05d86c93..7250dd39 100644 --- a/web/src/js/Connection.es6.js +++ b/web/src/js/Connection.es6.js @@ -5,11 +5,9 @@ class _Connection { } this.root = root; } - init() { this.openWebSocketConnection(); } - openWebSocketConnection() { this.ws = new WebSocket(this.root.replace("http", "ws") + "/ws"); var ws = this.ws; @@ -19,7 +17,6 @@ class _Connection { ws.onerror = this.onerror.bind(this); ws.onclose = this.onclose.bind(this); } - onopen(open) { console.log("onopen", this, arguments); } @@ -33,6 +30,5 @@ class _Connection { onclose(close) { console.log("onclose", this, arguments); } - } var Connection = new _Connection(); \ No newline at end of file diff --git a/web/src/js/Dispatcher.es6.js b/web/src/js/Dispatcher.es6.js index 6ac17f9f..f1f36cc8 100644 --- a/web/src/js/Dispatcher.es6.js +++ b/web/src/js/Dispatcher.es6.js @@ -1,40 +1,35 @@ const PayloadSources = { - VIEW_ACTION: "VIEW_ACTION", - SERVER_ACTION: "SERVER_ACTION" + VIEW_ACTION: "VIEW_ACTION", + SERVER_ACTION: "SERVER_ACTION" }; class Dispatcher { - - constructor() { - this.callbacks = []; - } - - register(callback){ - this.callbacks.push(callback); - } - - unregister(callback){ - var index = this.callbacks.indexOf(f); - if (index >= 0) { - this.callbacks.splice(this.callbacks.indexOf(f), 1); + constructor() { + this.callbacks = []; + } + register(callback) { + this.callbacks.push(callback); + } + unregister(callback) { + var index = this.callbacks.indexOf(f); + if (index >= 0) { + this.callbacks.splice(this.callbacks.indexOf(f), 1); + } + } + dispatch(payload) { + console.debug("dispatch", payload); + this.callbacks.forEach((callback) => { + callback(payload); + }); } - } - - dispatch(payload){ - console.debug("dispatch", payload); - this.callbacks.forEach((callback) => { - callback(payload); - }); - } - } AppDispatcher = new Dispatcher(); -AppDispatcher.dispatchViewAction = function(action){ - action.actionSource = PayloadSources.VIEW_ACTION; - this.dispatch(action); +AppDispatcher.dispatchViewAction = function(action) { + action.actionSource = PayloadSources.VIEW_ACTION; + this.dispatch(action); }; -AppDispatcher.dispatchServerAction = function(action){ - action.actionSource = PayloadSources.SERVER_ACTION; - this.dispatch(action); +AppDispatcher.dispatchServerAction = function(action) { + action.actionSource = PayloadSources.SERVER_ACTION; + this.dispatch(action); }; \ No newline at end of file diff --git a/web/src/js/actions.es6.js b/web/src/js/actions.es6.js index 6b3a5870..55cb4552 100644 --- a/web/src/js/actions.es6.js +++ b/web/src/js/actions.es6.js @@ -1,17 +1,17 @@ var ActionTypes = { - SETTINGS_UPDATE: "SETTINGS_UPDATE", - EVENTLOG_ADD: "EVENTLOG_ADD" + SETTINGS_UPDATE: "SETTINGS_UPDATE", + EVENTLOG_ADD: "EVENTLOG_ADD" }; var SettingsActions = { - update(settings) { - settings = _.merge({}, SettingsStore.getAll(), settings); - //TODO: Update server. + update(settings) { + settings = _.merge({}, SettingsStore.getAll(), settings); + //TODO: Update server. - //Facebook Flux: We do an optimistic update on the client already. - AppDispatcher.dispatchViewAction({ - actionType: ActionTypes.SETTINGS_UPDATE, - settings: settings - }); - } + //Facebook Flux: We do an optimistic update on the client already. + AppDispatcher.dispatchViewAction({ + actionType: ActionTypes.SETTINGS_UPDATE, + settings: settings + }); + } }; \ No newline at end of file diff --git a/web/src/js/app.js b/web/src/js/app.js index 2049ef25..3af4c79c 100644 --- a/web/src/js/app.js +++ b/web/src/js/app.js @@ -1,6 +1,6 @@ -$(function(){ +$(function() { - Connection.init(); - app = React.renderComponent(ProxyApp, document.body); + Connection.init(); + app = React.renderComponent(ProxyApp, document.body); }); \ No newline at end of file diff --git a/web/src/js/components/EventLog.react.js b/web/src/js/components/EventLog.react.js index 3a7dedc8..6c7a7c58 100644 --- a/web/src/js/components/EventLog.react.js +++ b/web/src/js/components/EventLog.react.js @@ -1,37 +1,37 @@ /** @jsx React.DOM */ var EventLog = React.createClass({ - getInitialState(){ - return { - log: [] - }; - }, - componentDidMount(){ - this.log = EventLogStore.getView(); - this.log.addListener("change",this.onEventLogChange); - }, - componentWillUnmount(){ - this.log.removeListener("change",this.onEventLogChange); - this.log.close(); - }, - onEventLogChange(){ - this.setState({ - log: this.log.getAll() - }); - }, - close(){ - SettingsActions.update({ - showEventLog: false - }); - }, - render(){ - var messages = this.state.log.map(row =>
{row.message}
); + getInitialState() { + return { + log: [] + }; + }, + componentDidMount() { + this.log = EventLogStore.getView(); + this.log.addListener("change", this.onEventLogChange); + }, + componentWillUnmount() { + this.log.removeListener("change", this.onEventLogChange); + this.log.close(); + }, + onEventLogChange() { + this.setState({ + log: this.log.getAll() + }); + }, + close() { + SettingsActions.update({ + showEventLog: false + }); + }, + render() { + var messages = this.state.log.map(row => (
{row.message}
)); return (
- 
-            
-            {messages}
-
+ 
+                    
+                    {messages}
+
); } diff --git a/web/src/js/components/Header.react.js b/web/src/js/components/Header.react.js index 41202463..0131d350 100644 --- a/web/src/js/components/Header.react.js +++ b/web/src/js/components/Header.react.js @@ -7,21 +7,23 @@ var MainMenu = React.createClass({ }); }, render(){ - return
- -
; + + + ); } }); var ToolsMenu = React.createClass({ render(){ - return (
Tools Menu
); + return
Tools Menu
; } }); var ReportsMenu = React.createClass({ render(){ - return (
Reports Menu
); + return
Reports Menu
; } }); @@ -58,7 +60,6 @@ var Header = React.createClass({ handleFileClick(){ console.log("File click"); }, - render(){ var header = []; for(var item in _Header_Entries){ @@ -82,6 +83,7 @@ var Header = React.createClass({
{ menu }
- ); + + ); } }); \ No newline at end of file diff --git a/web/src/js/components/ProxyApp.react.js b/web/src/js/components/ProxyApp.react.js index fc21ecd8..01adb089 100644 --- a/web/src/js/components/ProxyApp.react.js +++ b/web/src/js/components/ProxyApp.react.js @@ -2,46 +2,46 @@ //TODO: Move out of here, just a stub. var Reports = React.createClass({ - render(){ - return (
Report Editor
); - } + render(){ + return
Report Editor
; + } }); var ProxyAppMain = React.createClass({ getInitialState(){ - return { settings: SettingsStore.getAll() }; + return { settings: SettingsStore.getAll() }; }, componentDidMount(){ - SettingsStore.addListener("change", this.onSettingsChange); + SettingsStore.addListener("change", this.onSettingsChange); }, componentWillUnmount(){ - SettingsStore.removeListener("change", this.onSettingsChange); + SettingsStore.removeListener("change", this.onSettingsChange); }, onSettingsChange(){ - console.log("onSettingsChange"); - this.setState({settings: SettingsStore.getAll()}); + console.log("onSettingsChange"); + this.setState({settings: SettingsStore.getAll()}); }, render() { - return ( -
-
-
- {this.state.settings.showEventLog ? : null} -
-
- ); + return ( +
+
+
+ {this.state.settings.showEventLog ? : null} +
+
+ ); } }); var ProxyApp = ( - - - - - - - + + + + + + + ); diff --git a/web/src/js/components/TrafficTable.react.js b/web/src/js/components/TrafficTable.react.js index d6a4f200..7e9e26e3 100644 --- a/web/src/js/components/TrafficTable.react.js +++ b/web/src/js/components/TrafficTable.react.js @@ -1,31 +1,34 @@ /** @jsx React.DOM */ var TrafficTable = React.createClass({ - getInitialState: function(){ + getInitialState() { return { flows: [] }; }, - componentDidMount(){ + componentDidMount() { //this.flowStore = FlowStore.getView(); //this.flowStore.addListener("change",this.onFlowChange); }, - componentWillUnmount(){ + componentWillUnmount() { //this.flowStore.removeListener("change",this.onFlowChange); //this.flowStore.close(); }, - onFlowChange(){ + onFlowChange() { this.setState({ //flows: this.flowStore.getAll() }); }, - render: function () { - /*var flows = this.state.flows.map(function(flow){ - return
{flow.request.method} {flow.request.scheme}://{flow.request.host}{flow.request.path}
; - }); *//**/ - x = "Flow"; - i = 12; - while(i--) x += x; - return 
{x}
; - } + render() { + /*var flows = this.state.flows.map(function(flow){ + return
{flow.request.method} {flow.request.scheme}://{flow.request.host}{flow.request.path}
; + }); */ + //Dummy Text for layout testing + x = "Flow"; + i = 12; + while (i--) x += x; + return ( + 
 { x }
+ ); + } }); \ No newline at end of file diff --git a/web/src/js/stores/EventLogStore.es6.js b/web/src/js/stores/EventLogStore.es6.js index 55401690..e470f44f 100644 --- a/web/src/js/stores/EventLogStore.es6.js +++ b/web/src/js/stores/EventLogStore.es6.js @@ -1,67 +1,84 @@ -class EventLogView extends EventEmitter { - constructor(store, live){ - super(); - this._store = store; - this.live = live; - this.log = []; +// +// We have an EventLogView and an EventLogStore: +// The basic architecture is that one can request views on the event log +// from the store, which returns a view object and then deals with getting the data required for the view. +// The view object is accessed by React components and distributes updates etc. +// +// See also: components/EventLog.react.js - this.add = this.add.bind(this); +class EventLogView extends EventEmitter { + constructor(store, live) { + super(); + this._store = store; + this.live = live; + this.log = []; - if(live){ - this._store.addListener("new_entry", this.add); - } - - } - close() { - this._store.removeListener("new_entry", this.add); - } - getAll() { - return this.log; - } + this.add = this.add.bind(this); - add(entry){ - this.log.push(entry); - this.emit("change"); - } - add_bulk(messages){ - var log = messages; - var last_id = log[log.length-1].id; - var to_add = _.filter(this.log, entry => entry.id > last_id); - this.log = log.concat(to_add); - this.emit("change"); - } + if (live) { + this._store.addListener("new_entry", this.add); + } + } + close() { + this._store.removeListener("new_entry", this.add); + } + getAll() { + return this.log; + } + add(entry) { + this.log.push(entry); + this.emit("change"); + } + add_bulk(messages) { + var log = messages; + var last_id = log[log.length - 1].id; + var to_add = _.filter(this.log, entry => entry.id > last_id); + this.log = log.concat(to_add); + this.emit("change"); + } } class _EventLogStore extends EventEmitter { - getView(since){ - var view = new EventLogView(this, !since); - - //TODO: Really do bulk retrieval of last messages. + getView(since) { + var view = new EventLogView(this, !since); - window.setTimeout(function(){ - view.add_bulk([ - { id:1, message: "Hello World"}, - { id:2, message: "I was already transmitted as an event."} - ]); - }, 100); + //TODO: Really do bulk retrieval of last messages. + window.setTimeout(function() { + view.add_bulk([{ + id: 1, + message: "Hello World" + }, { + id: 2, + message: "I was already transmitted as an event." + }]); + }, 100); - var id = 2; - view.add({id:id++, message: "I was already transmitted as an event."}); - view.add({id:id++, message: "I was only transmitted as an event before the bulk was added.."}); - window.setInterval(function(){ - view.add({id: id++, message: "."}); - }, 1000); - return view; - } - handle(action) { - switch (action.actionType) { - case ActionTypes.EVENTLOG_ADD: - this.emit("new_message", action.message); - break; - default: - return; - } - } + var id = 2; + view.add({ + id: id++, + message: "I was already transmitted as an event." + }); + view.add({ + id: id++, + message: "I was only transmitted as an event before the bulk was added.." + }); + window.setInterval(function() { + view.add({ + id: id++, + message: "." + }); + }, 1000); + return view; + } + handle(action) { + switch (action.actionType) { + case ActionTypes.EVENTLOG_ADD: + this.emit("new_message", action.message); + break; + default: + return; + } + } } var EventLogStore = new _EventLogStore(); AppDispatcher.register(EventLogStore.handle.bind(EventLogStore)); \ No newline at end of file diff --git a/web/src/js/stores/SettingsStore.es6.js b/web/src/js/stores/SettingsStore.es6.js index dea4597c..2743161e 100644 --- a/web/src/js/stores/SettingsStore.es6.js +++ b/web/src/js/stores/SettingsStore.es6.js @@ -1,21 +1,26 @@ class _SettingsStore extends EventEmitter { - constructor() { - super(); - this.settings = { version: "0.12", showEventLog: true }; //FIXME: Need to get that from somewhere. - } - getAll() { - return this.settings; - } - handle(action) { - switch (action.actionType) { - case ActionTypes.SETTINGS_UPDATE: - this.settings = action.settings; - this.emit("change"); - break; - default: - return; - } - } + constructor() { + super(); + + //FIXME: What do we do if we haven't requested anything from the server yet? + this.settings = { + version: "0.12", + showEventLog: true + }; + } + getAll() { + return this.settings; + } + handle(action) { + switch (action.actionType) { + case ActionTypes.SETTINGS_UPDATE: + this.settings = action.settings; + this.emit("change"); + break; + default: + return; + } + } } var SettingsStore = new _SettingsStore(); -AppDispatcher.register(SettingsStore.handle.bind(SettingsStore)); +AppDispatcher.register(SettingsStore.handle.bind(SettingsStore)); \ No newline at end of file diff --git a/web/src/js/stores/base.es6.js b/web/src/js/stores/base.es6.js index d5d0c7ab..1dc4ca2f 100644 --- a/web/src/js/stores/base.es6.js +++ b/web/src/js/stores/base.es6.js @@ -1,26 +1,26 @@ class EventEmitter { - constructor() { - this.listeners = {}; - } - emit(event) { - if (!(event in this.listeners)) { - return; - } - this.listeners[event].forEach(function(listener) { - listener.apply(this, arguments); - }.bind(this)); - } - addListener(event, f) { - this.listeners[event] = this.listeners[event] || []; - this.listeners[event].push(f); - } - removeListener(event, f) { - if (!(event in this.listeners)) { - return false; - } - var index = this.listeners[event].indexOf(f); - if (index >= 0) { - this.listeners[event].splice(index, 1); - } - } + constructor() { + this.listeners = {}; + } + emit(event) { + if (!(event in this.listeners)) { + return; + } + this.listeners[event].forEach(function(listener) { + listener.apply(this, arguments); + }.bind(this)); + } + addListener(event, f) { + this.listeners[event] = this.listeners[event] || []; + this.listeners[event].push(f); + } + removeListener(event, f) { + if (!(event in this.listeners)) { + return false; + } + var index = this.listeners[event].indexOf(f); + if (index >= 0) { + this.listeners[event].splice(index, 1); + } + } } \ No newline at end of file -- cgit v1.2.3