formatting

This commit is contained in:
Maximilian Hils 2014-09-17 02:13:37 +02:00
parent d998790c2f
commit 51db9a5612
13 changed files with 164 additions and 158 deletions

View File

@ -4,32 +4,32 @@ const PayloadSources = {
};
function Dispatcher() {"use strict";
function Dispatcher() {
this.callbacks = [];
}
Dispatcher.prototype.register=function(callback) {"use strict";
Dispatcher.prototype.register = function (callback) {
this.callbacks.push(callback);
};
Dispatcher.prototype.unregister=function(callback) {"use strict";
Dispatcher.prototype.unregister = function (callback) {
var index = this.callbacks.indexOf(f);
if (index >= 0) {
this.callbacks.splice(this.callbacks.indexOf(f), 1);
}
};
Dispatcher.prototype.dispatch=function(payload) {"use strict";
Dispatcher.prototype.dispatch = function (payload) {
console.debug("dispatch", payload);
this.callbacks.forEach(function(callback) {
this.callbacks.forEach(function (callback) {
callback(payload);
});
};
AppDispatcher = new Dispatcher();
AppDispatcher.dispatchViewAction = function(action) {
AppDispatcher.dispatchViewAction = function (action) {
action.actionSource = PayloadSources.VIEW_ACTION;
this.dispatch(action);
};
AppDispatcher.dispatchServerAction = function(action) {
AppDispatcher.dispatchServerAction = function (action) {
action.actionSource = PayloadSources.SERVER_ACTION;
this.dispatch(action);
};
@ -40,7 +40,7 @@ var ActionTypes = {
};
var SettingsActions = {
update:function(settings) {
update: function (settings) {
settings = _.merge({}, SettingsStore.getAll(), settings);
//TODO: Update server.
@ -52,23 +52,22 @@ var SettingsActions = {
}
};
function EventEmitter() {
this.listeners = {};
}
EventEmitter.prototype.emit=function(event) {
EventEmitter.prototype.emit = function (event) {
if (!(event in this.listeners)) {
return;
}
this.listeners[event].forEach(function(listener) {
this.listeners[event].forEach(function (listener) {
listener.apply(this, arguments);
}.bind(this));
};
EventEmitter.prototype.addListener=function(event, f) {
EventEmitter.prototype.addListener = function (event, f) {
this.listeners[event] = this.listeners[event] || [];
this.listeners[event].push(f);
};
EventEmitter.prototype.removeListener=function(event, f) {
EventEmitter.prototype.removeListener = function (event, f) {
if (!(event in this.listeners)) {
return false;
}
@ -78,7 +77,6 @@ EventEmitter.prototype.removeListener=function(event, f) {
}
};
function _SettingsStore() {
EventEmitter.call(this);
@ -87,13 +85,13 @@ function _SettingsStore() {
version: "0.12",
showEventLog: true,
mode: "transparent",
};
};
}
_.extend(_SettingsStore.prototype, EventEmitter.prototype, {
getAll: function() {
getAll: function () {
return this.settings;
},
handle: function(action) {
handle: function (action) {
switch (action.actionType) {
case ActionTypes.SETTINGS_UPDATE:
this.settings = action.settings;
@ -128,42 +126,47 @@ function EventLogView(store, live) {
}
}
_.extend(EventLogView.prototype, EventEmitter.prototype, {
close: function() {
close: function () {
this.$EventLogView_store.removeListener("new_entry", this.add);
},
getAll: function() {
getAll: function () {
return this.log;
},
add: function(entry) {
add: function (entry) {
this.log.push(entry);
this.emit("change");
},
add_bulk: function(messages) {
add_bulk: function (messages) {
var log = messages;
var last_id = log[log.length - 1].id;
var to_add = _.filter(this.log, function(entry) {return entry.id > last_id;});
var to_add = _.filter(this.log, function (entry) {
return entry.id > last_id;
});
this.log = log.concat(to_add);
this.emit("change");
}
});
function _EventLogStore(){
function _EventLogStore() {
EventEmitter.call(this);
}
_.extend(_EventLogStore.prototype, EventEmitter.prototype, {
getView: function(since) {
getView: function (since) {
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."
}]);
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;
@ -175,7 +178,7 @@ _.extend(_EventLogStore.prototype, EventEmitter.prototype, {
id: id++,
message: "I was only transmitted as an event before the bulk was added.."
});
window.setInterval(function() {
window.setInterval(function () {
view.add({
id: id++,
message: "."
@ -183,7 +186,7 @@ _.extend(_EventLogStore.prototype, EventEmitter.prototype, {
}, 1000);
return view;
},
handle: function(action) {
handle: function (action) {
switch (action.actionType) {
case ActionTypes.EVENTLOG_ADD:
this.emit("new_message", action.message);
@ -201,10 +204,10 @@ AppDispatcher.register(EventLogStore.handle.bind(EventLogStore));
function _Connection(url) {
this.url = url;
}
_Connection.prototype.init=function() {
_Connection.prototype.init = function () {
this.openWebSocketConnection();
};
_Connection.prototype.openWebSocketConnection=function() {
_Connection.prototype.openWebSocketConnection = function () {
this.ws = new WebSocket(this.url.replace("http", "ws"));
var ws = this.ws;
@ -213,17 +216,17 @@ _Connection.prototype.openWebSocketConnection=function() {
ws.onerror = this.onerror.bind(this);
ws.onclose = this.onclose.bind(this);
};
_Connection.prototype.onopen=function(open) {
_Connection.prototype.onopen = function (open) {
console.log("onopen", this, arguments);
};
_Connection.prototype.onmessage=function(message) {
_Connection.prototype.onmessage = function (message) {
//AppDispatcher.dispatchServerAction(...);
console.log("onmessage", this, arguments);
};
_Connection.prototype.onerror=function(error) {
_Connection.prototype.onerror = function (error) {
console.log("onerror", this, arguments);
};
_Connection.prototype.onclose=function(close) {
_Connection.prototype.onclose = function (close) {
console.log("onclose", this, arguments);
};
@ -232,28 +235,28 @@ var Connection = new _Connection(location.origin + "/updates");
/** @jsx React.DOM */
var MainMenu = React.createClass({displayName: 'MainMenu',
toggleEventLog: function() {
toggleEventLog: function () {
SettingsActions.update({
showEventLog: !this.props.settings.showEventLog
});
},
render: function(){
render: function () {
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(){
render: function () {
return React.DOM.div(null, "Tools Menu");
}
});
var ReportsMenu = React.createClass({displayName: 'ReportsMenu',
render: function(){
render: function () {
return React.DOM.div(null, "Reports Menu");
}
});
@ -278,22 +281,22 @@ var _Header_Entries = {
};
var Header = React.createClass({displayName: 'Header',
getInitialState: function(){
getInitialState: function () {
return {
active: "main"
};
},
handleClick: function(active){
handleClick: function (active) {
this.setState({active: active});
ReactRouter.transitionTo(_Header_Entries[active].route);
return false;
},
handleFileClick: function(){
handleFileClick: function () {
console.log("File click");
},
render: function(){
render: function () {
var header = [];
for(var item in _Header_Entries){
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));
@ -315,72 +318,72 @@ var Header = React.createClass({displayName: 'Header',
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() {
render: function () {
/*var flows = this.state.flows.map(function(flow){
return <div>{flow.request.method} {flow.request.scheme}://{flow.request.host}{flow.request.path}</div>;
}); */
return <div>{flow.request.method} {flow.request.scheme}://{flow.request.host}{flow.request.path}</div>;
}); */
//Dummy Text for layout testing
x = "Flow";
i = 12;
while (i--) x += x;
return (
return (
React.DOM.div(null, "Flow")
);
);
}
});
/** @jsx React.DOM */
var EventLog = React.createClass({displayName: 'EventLog',
getInitialState: function() {
getInitialState: function () {
return {
log: []
};
},
componentDidMount: function() {
componentDidMount: function () {
this.log = EventLogStore.getView();
this.log.addListener("change", this.onEventLogChange);
},
componentWillUnmount: function() {
componentWillUnmount: function () {
this.log.removeListener("change", this.onEventLogChange);
this.log.close();
},
onEventLogChange: function() {
onEventLogChange: function () {
this.setState({
log: this.log.getAll()
});
},
close: function() {
close: function () {
SettingsActions.update({
showEventLog: false
});
},
render: function() {
render: function () {
//var messages = this.state.log.map(row => (<div key={row.id}>{row.message}</div>));
var messages = [];
return (
@ -390,20 +393,20 @@ var EventLog = React.createClass({displayName: 'EventLog',
messages
)
)
);
);
}
});
/** @jsx React.DOM */
var Footer = React.createClass({displayName: 'Footer',
render: function(){
render: function () {
var mode = this.props.settings.mode;
return (
React.DOM.footer(null,
mode != "regular" ? React.DOM.span({className: "label label-success"}, mode, " mode") : null
)
);
);
}
});
@ -411,27 +414,27 @@ 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, "ReportEditor");
}
});
var ProxyAppMain = React.createClass({displayName: 'ProxyAppMain',
getInitialState: function(){
getInitialState: function () {
return { settings: SettingsStore.getAll() };
},
componentDidMount: function(){
componentDidMount: function () {
SettingsStore.addListener("change", this.onSettingsChange);
},
componentWillUnmount: function(){
componentWillUnmount: function () {
SettingsStore.removeListener("change", this.onSettingsChange);
},
onSettingsChange: function(){
onSettingsChange: function () {
console.log("onSettingsChange");
this.setState({settings: SettingsStore.getAll()});
},
render: function() {
render: function () {
return (
React.DOM.div({id: "container"},
Header({settings: this.state.settings}),
@ -439,7 +442,7 @@ var ProxyAppMain = React.createClass({displayName: 'ProxyAppMain',
this.state.settings.showEventLog ? EventLog(null) : null,
Footer({settings: this.state.settings})
)
);
);
}
});
@ -452,9 +455,9 @@ var ProxyApp = (
ReactRouter.Redirect({to: "main"})
)
)
);
);
$(function() {
$(function () {
Connection.init();
app = React.renderComponent(ProxyApp, document.body);
});

View File

@ -4,7 +4,7 @@ var ActionTypes = {
};
var SettingsActions = {
update:function(settings) {
update: function (settings) {
settings = _.merge({}, SettingsStore.getAll(), settings);
//TODO: Update server.

View File

@ -1,4 +1,4 @@
$(function() {
$(function () {
Connection.init();
app = React.renderComponent(ProxyApp, document.body);
});

View File

@ -1,30 +1,30 @@
/** @jsx React.DOM */
var EventLog = React.createClass({
getInitialState: function() {
getInitialState: function () {
return {
log: []
};
},
componentDidMount: function() {
componentDidMount: function () {
this.log = EventLogStore.getView();
this.log.addListener("change", this.onEventLogChange);
},
componentWillUnmount: function() {
componentWillUnmount: function () {
this.log.removeListener("change", this.onEventLogChange);
this.log.close();
},
onEventLogChange: function() {
onEventLogChange: function () {
this.setState({
log: this.log.getAll()
});
},
close: function() {
close: function () {
SettingsActions.update({
showEventLog: false
});
},
render: function() {
render: function () {
//var messages = this.state.log.map(row => (<div key={row.id}>{row.message}</div>));
var messages = [];
return (
@ -34,6 +34,6 @@ var EventLog = React.createClass({
{messages}
</pre>
</div>
);
);
}
});

View File

@ -1,12 +1,12 @@
/** @jsx React.DOM */
var Footer = React.createClass({
render: function(){
render: function () {
var mode = this.props.settings.mode;
return (
<footer>
{mode != "regular" ? <span className="label label-success">{mode} mode</span> : null}
</footer>
);
);
}
});

View File

@ -1,28 +1,28 @@
/** @jsx React.DOM */
var MainMenu = React.createClass({
toggleEventLog: function() {
toggleEventLog: function () {
SettingsActions.update({
showEventLog: !this.props.settings.showEventLog
});
},
render: function(){
render: function () {
return (
<div>
<button className={"btn " + (this.props.settings.showEventLog ? "btn-primary" : "btn-default")} onClick={this.toggleEventLog}>
<i className="fa fa-database"></i> Display Event Log
</button>
</div>
);
);
}
});
var ToolsMenu = React.createClass({
render: function(){
render: function () {
return <div>Tools Menu</div>;
}
});
var ReportsMenu = React.createClass({
render: function(){
render: function () {
return <div>Reports Menu</div>;
}
});
@ -47,22 +47,22 @@ var _Header_Entries = {
};
var Header = React.createClass({
getInitialState: function(){
getInitialState: function () {
return {
active: "main"
};
},
handleClick: function(active){
handleClick: function (active) {
this.setState({active: active});
ReactRouter.transitionTo(_Header_Entries[active].route);
return false;
},
handleFileClick: function(){
handleFileClick: function () {
console.log("File click");
},
render: function(){
render: function () {
var header = [];
for(var item in _Header_Entries){
for (var item in _Header_Entries) {
var classes = this.state.active == item ? "active" : "";
header.push(<a key={item} href="#" className={classes}
onClick={this.handleClick.bind(this, item)}>{ _Header_Entries[item].title }</a>);
@ -84,6 +84,6 @@ var Header = React.createClass({
{ menu }
</div>
</header>
);
);
}
});

View File

@ -2,27 +2,27 @@
//TODO: Move out of here, just a stub.
var Reports = React.createClass({
render: function(){
return <div>Report Editor</div>;
render: function () {
return <div>ReportEditor</div>;
}
});
var ProxyAppMain = React.createClass({
getInitialState: function(){
getInitialState: function () {
return { settings: SettingsStore.getAll() };
},
componentDidMount: function(){
componentDidMount: function () {
SettingsStore.addListener("change", this.onSettingsChange);
},
componentWillUnmount: function(){
componentWillUnmount: function () {
SettingsStore.removeListener("change", this.onSettingsChange);
},
onSettingsChange: function(){
onSettingsChange: function () {
console.log("onSettingsChange");
this.setState({settings: SettingsStore.getAll()});
},
render: function() {
render: function () {
return (
<div id="container">
<Header settings={this.state.settings}/>
@ -30,7 +30,7 @@ var ProxyAppMain = React.createClass({
{this.state.settings.showEventLog ? <EventLog/> : null}
<Footer settings={this.state.settings}/>
</div>
);
);
}
});
@ -43,4 +43,4 @@ var ProxyApp = (
<ReactRouter.Redirect to="main"/>
</ReactRouter.Route>
</ReactRouter.Routes>
);
);

View File

@ -1,34 +1,34 @@
/** @jsx React.DOM */
var TrafficTable = React.createClass({
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() {
render: function () {
/*var flows = this.state.flows.map(function(flow){
return <div>{flow.request.method} {flow.request.scheme}://{flow.request.host}{flow.request.path}</div>;
}); */
return <div>{flow.request.method} {flow.request.scheme}://{flow.request.host}{flow.request.path}</div>;
}); */
//Dummy Text for layout testing
x = "Flow";
i = 12;
while (i--) x += x;
return (
return (
<div>Flow</div>
);
);
}
});

View File

@ -1,10 +1,10 @@
function _Connection(url) {
this.url = url;
}
_Connection.prototype.init=function() {
_Connection.prototype.init = function () {
this.openWebSocketConnection();
};
_Connection.prototype.openWebSocketConnection=function() {
_Connection.prototype.openWebSocketConnection = function () {
this.ws = new WebSocket(this.url.replace("http", "ws"));
var ws = this.ws;
@ -13,17 +13,17 @@ _Connection.prototype.openWebSocketConnection=function() {
ws.onerror = this.onerror.bind(this);
ws.onclose = this.onclose.bind(this);
};
_Connection.prototype.onopen=function(open) {
_Connection.prototype.onopen = function (open) {
console.log("onopen", this, arguments);
};
_Connection.prototype.onmessage=function(message) {
_Connection.prototype.onmessage = function (message) {
//AppDispatcher.dispatchServerAction(...);
console.log("onmessage", this, arguments);
};
_Connection.prototype.onerror=function(error) {
_Connection.prototype.onerror = function (error) {
console.log("onerror", this, arguments);
};
_Connection.prototype.onclose=function(close) {
_Connection.prototype.onclose = function (close) {
console.log("onclose", this, arguments);
};

View File

@ -4,32 +4,32 @@ const PayloadSources = {
};
function Dispatcher() {"use strict";
function Dispatcher() {
this.callbacks = [];
}
Dispatcher.prototype.register=function(callback) {"use strict";
Dispatcher.prototype.register = function (callback) {
this.callbacks.push(callback);
};
Dispatcher.prototype.unregister=function(callback) {"use strict";
Dispatcher.prototype.unregister = function (callback) {
var index = this.callbacks.indexOf(f);
if (index >= 0) {
this.callbacks.splice(this.callbacks.indexOf(f), 1);
}
};
Dispatcher.prototype.dispatch=function(payload) {"use strict";
Dispatcher.prototype.dispatch = function (payload) {
console.debug("dispatch", payload);
this.callbacks.forEach(function(callback) {
this.callbacks.forEach(function (callback) {
callback(payload);
});
};
AppDispatcher = new Dispatcher();
AppDispatcher.dispatchViewAction = function(action) {
AppDispatcher.dispatchViewAction = function (action) {
action.actionSource = PayloadSources.VIEW_ACTION;
this.dispatch(action);
};
AppDispatcher.dispatchServerAction = function(action) {
AppDispatcher.dispatchServerAction = function (action) {
action.actionSource = PayloadSources.SERVER_ACTION;
this.dispatch(action);
};

View File

@ -1,20 +1,19 @@
function EventEmitter() {
this.listeners = {};
}
EventEmitter.prototype.emit=function(event) {
EventEmitter.prototype.emit = function (event) {
if (!(event in this.listeners)) {
return;
}
this.listeners[event].forEach(function(listener) {
this.listeners[event].forEach(function (listener) {
listener.apply(this, arguments);
}.bind(this));
};
EventEmitter.prototype.addListener=function(event, f) {
EventEmitter.prototype.addListener = function (event, f) {
this.listeners[event] = this.listeners[event] || [];
this.listeners[event].push(f);
};
EventEmitter.prototype.removeListener=function(event, f) {
EventEmitter.prototype.removeListener = function (event, f) {
if (!(event in this.listeners)) {
return false;
}

View File

@ -18,42 +18,47 @@ function EventLogView(store, live) {
}
}
_.extend(EventLogView.prototype, EventEmitter.prototype, {
close: function() {
close: function () {
this.$EventLogView_store.removeListener("new_entry", this.add);
},
getAll: function() {
getAll: function () {
return this.log;
},
add: function(entry) {
add: function (entry) {
this.log.push(entry);
this.emit("change");
},
add_bulk: function(messages) {
add_bulk: function (messages) {
var log = messages;
var last_id = log[log.length - 1].id;
var to_add = _.filter(this.log, function(entry) {return entry.id > last_id;});
var to_add = _.filter(this.log, function (entry) {
return entry.id > last_id;
});
this.log = log.concat(to_add);
this.emit("change");
}
});
function _EventLogStore(){
function _EventLogStore() {
EventEmitter.call(this);
}
_.extend(_EventLogStore.prototype, EventEmitter.prototype, {
getView: function(since) {
getView: function (since) {
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."
}]);
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;
@ -65,7 +70,7 @@ _.extend(_EventLogStore.prototype, EventEmitter.prototype, {
id: id++,
message: "I was only transmitted as an event before the bulk was added.."
});
window.setInterval(function() {
window.setInterval(function () {
view.add({
id: id++,
message: "."
@ -73,7 +78,7 @@ _.extend(_EventLogStore.prototype, EventEmitter.prototype, {
}, 1000);
return view;
},
handle: function(action) {
handle: function (action) {
switch (action.actionType) {
case ActionTypes.EVENTLOG_ADD:
this.emit("new_message", action.message);

View File

@ -1,4 +1,3 @@
function _SettingsStore() {
EventEmitter.call(this);
@ -7,13 +6,13 @@ function _SettingsStore() {
version: "0.12",
showEventLog: true,
mode: "transparent",
};
};
}
_.extend(_SettingsStore.prototype, EventEmitter.prototype, {
getAll: function() {
getAll: function () {
return this.settings;
},
handle: function(action) {
handle: function (action) {
switch (action.actionType) {
case ActionTypes.SETTINGS_UPDATE:
this.settings = action.settings;