From 698d38b28e43ce0685ce8ce8c119926af2083cbc Mon Sep 17 00:00:00 2001 From: Maximilian Hils Date: Thu, 2 Jun 2016 17:46:18 -0700 Subject: web: :hatching_chick: --- web/src/css/eventlog.less | 8 +++ web/src/css/header.less | 17 ----- web/src/js/app.js | 4 +- web/src/js/components/common.js | 17 +++-- web/src/js/components/eventlog.js | 146 +++++++++++++++----------------------- web/src/js/components/header.js | 19 +---- web/src/js/components/proxyapp.js | 15 ++-- web/src/js/ducks/README.md | 1 + web/src/js/ducks/eventLog.js | 39 ++++++++++ web/src/js/ducks/index.js | 8 +++ web/src/js/reducers/eventLog.js | 31 -------- web/src/js/reduxActions.js | 13 ---- 12 files changed, 138 insertions(+), 180 deletions(-) create mode 100644 web/src/js/ducks/README.md create mode 100644 web/src/js/ducks/eventLog.js create mode 100644 web/src/js/ducks/index.js delete mode 100644 web/src/js/reducers/eventLog.js delete mode 100644 web/src/js/reduxActions.js (limited to 'web/src') diff --git a/web/src/css/eventlog.less b/web/src/css/eventlog.less index 26dea3cc..908312cd 100644 --- a/web/src/css/eventlog.less +++ b/web/src/css/eventlog.less @@ -33,6 +33,14 @@ } } + .btn-toggle { + margin-top: -2px; + margin-left: 3px; + padding: 2px 2px; + font-size: 10px; + line-height: 10px; + border-radius: 2px; + } .label { cursor: pointer; vertical-align: middle; diff --git a/web/src/css/header.less b/web/src/css/header.less index b1bd9c04..4813b933 100644 --- a/web/src/css/header.less +++ b/web/src/css/header.less @@ -32,20 +32,3 @@ header { overflow-y: auto; } } - -.menu .toggle-btn { - .make-xs-column(4, @menu-row-gutter-width); - .make-sm-column(3, @menu-row-gutter-width); - .make-lg-column(2, @menu-row-gutter-width); - margin-bottom:5px; -} - -.menu .toggle-btn .btn { - width: 100%; -} - -.menu .toggle-input-btn { - .make-sm-column(6, @menu-row-gutter-width); - .make-lg-column(4, @menu-row-gutter-width); - margin-bottom:5px; -} \ No newline at end of file diff --git a/web/src/js/app.js b/web/src/js/app.js index 30897686..5b5d1fc8 100644 --- a/web/src/js/app.js +++ b/web/src/js/app.js @@ -2,14 +2,14 @@ import React from "react" import {render} from 'react-dom' import {createStore} from 'redux' import {Provider} from 'react-redux' -import mitmproxyApp from './reducers' import $ from "jquery" import Connection from "./connection" import {App} from "./components/proxyapp.js" import {EventLogActions} from "./actions.js" +import rootReducer from './ducks/index'; -let store = createStore(mitmproxyApp); +let store = createStore(rootReducer); $(function () { window.ws = new Connection("/updates"); diff --git a/web/src/js/components/common.js b/web/src/js/components/common.js index 87c34ffc..3496f1de 100644 --- a/web/src/js/components/common.js +++ b/web/src/js/components/common.js @@ -108,18 +108,17 @@ export var Splitter = React.createClass({ } }); -export const ToggleButton = (props) => -
-
-  {props.name} -
+export const ToggleButton = ({checked, onToggle, text}) => +
+ +   + {text}
; ToggleButton.propTypes = { - name: React.PropTypes.string.isRequired, - onToggleChanged: React.PropTypes.func.isRequired + checked: React.PropTypes.bool.isRequired, + onToggle: React.PropTypes.func.isRequired, + text: React.PropTypes.string.isRequired }; export class ToggleInputButton extends React.Component { diff --git a/web/src/js/components/eventlog.js b/web/src/js/components/eventlog.js index 687c5265..a2e6a0c1 100644 --- a/web/src/js/components/eventlog.js +++ b/web/src/js/components/eventlog.js @@ -1,12 +1,12 @@ import React from "react" import ReactDOM from "react-dom" -import { connect } from 'react-redux' +import {connect} from 'react-redux' import shallowEqual from "shallowequal" -import {Query} from "../actions.js" -import {toggleEventLogFilter} from "../reduxActions" +import {toggleEventLogFilter, toggleEventLogVisibility} from "../ducks/eventLog" import AutoScroll from "./helpers/AutoScroll"; import {calcVScroll} from "./helpers/VirtualScroll" import {StoreView} from "../store/view.js" +import {ToggleButton} from "./common"; class EventLogContents extends React.Component { @@ -27,7 +27,7 @@ class EventLogContents extends React.Component { ); this.heights = {}; - this.state = { entries: this.view.list, vScroll: calcVScroll() }; + this.state = {entries: this.view.list, vScroll: calcVScroll()}; this.onChange = this.onChange.bind(this); this.onViewportUpdate = this.onViewportUpdate.bind(this); @@ -71,12 +71,12 @@ class EventLogContents extends React.Component { }); if (!shallowEqual(this.state.vScroll, vScroll)) { - this.setState({ vScroll }); + this.setState({vScroll}); } } onChange() { - this.setState({ entries: this.view.list }); + this.setState({entries: this.view.list}); } setHeight(id, ref) { @@ -90,7 +90,7 @@ class EventLogContents extends React.Component { } getIcon(level) { - return { web: "html5", debug: "bug" }[level] || "info"; + return {web: "html5", debug: "bug"}[level] || "info"; } render() { @@ -112,87 +112,59 @@ class EventLogContents extends React.Component { } } -ToggleFilter.propTypes = { - name: React.PropTypes.string.isRequired, - toggleLevel: React.PropTypes.func.isRequired, - active: React.PropTypes.bool, -}; - -function ToggleFilter ({ name, active, toggleLevel }) { - let className = "label "; - if (active) { - className += "label-primary"; - } else { - className += "label-default"; - } - - function onClick(event) { - event.preventDefault(); - toggleLevel(); - } - - return ( - - {name} - - ); -} - -const mapStateToProps = (state, ownProps) => { - return { - active: state.eventLog.visibilityFilter[ownProps.name] - } -}; +EventLogContents = AutoScroll(EventLogContents); + + +const EventLogContentsContainer = connect( + state => ({ + filter: state.eventLog.filter + }) +)(EventLogContents); + + +export const ToggleEventLog = connect( + state => ({ + checked: state.eventLog.visible + }), + dispatch => ({ + onToggle: () => dispatch(toggleEventLogVisibility()) + }) +)(ToggleButton); + + +const ToggleFilter = connect( + (state, ownProps) => ({ + checked: state.eventLog.filter[ownProps.text] + }), + (dispatch, ownProps) => ({ + onToggle: () => dispatch(toggleEventLogFilter(ownProps.text)) + }) +)(ToggleButton); + + +const EventLog = ({close}) => +
+
+ Eventlog +
+ + + + +
+
+ +
; -const mapDispatchToProps = (dispatch, ownProps) => { - return { - toggleLevel: () => { - dispatch(toggleEventLogFilter(ownProps.name)) - } - } +EventLog.propTypes = { + close: React.PropTypes.func.isRequired }; -const ToggleEventLogFilter = connect( - mapStateToProps, - mapDispatchToProps -)(ToggleFilter); - - -const AutoScrollEventLog = AutoScroll(EventLogContents); - - -const VisibleAutoScrollEventLog = connect( - function mapStateToProps(state, ownProps) { - return {filter: state.eventLog.visibilityFilter} - })(AutoScrollEventLog); - - -var EventLog = React.createClass({ - close() { - var d = {}; - d[Query.SHOW_EVENTLOG] = undefined; - this.props.updateLocation(undefined, d); - }, - render() { - return ( -
-
- Eventlog -
- - - - -
- -
- -
- ); - } -}); +const EventLogContainer = connect( + undefined, + dispatch => ({ + close: () => dispatch(toggleEventLogVisibility()) + }) +)(EventLog); -export default EventLog; +export default EventLogContainer; diff --git a/web/src/js/components/header.js b/web/src/js/components/header.js index 643659c3..76c4744a 100644 --- a/web/src/js/components/header.js +++ b/web/src/js/components/header.js @@ -1,6 +1,7 @@ import React from "react"; import ReactDOM from 'react-dom'; import $ from "jquery"; +import {connect} from 'react-redux' import Filt from "../filt/filt.js"; import {Key} from "../utils.js"; @@ -8,6 +9,7 @@ import {ToggleInputButton, ToggleButton} from "./common.js"; import {SettingsActions, FlowActions} from "../actions.js"; import {Query} from "../actions.js"; import {SettingsState} from "./common.js"; +import {ToggleEventLog} from "./eventlog" var FilterDocs = React.createClass({ statics: { @@ -224,26 +226,11 @@ var ViewMenu = React.createClass({ title: "View", route: "flows" }, - toggleEventLog: function () { - var d = {}; - if (this.props.query[Query.SHOW_EVENTLOG]) { - d[Query.SHOW_EVENTLOG] = undefined; - } else { - d[Query.SHOW_EVENTLOG] = "t"; // any non-false value will do it, keep it short - } - - this.props.updateLocation(undefined, d); - console.log('toggleevent'); - }, render: function () { - var showEventLog = this.props.query[Query.SHOW_EVENTLOG]; return (
- +
diff --git a/web/src/js/components/proxyapp.js b/web/src/js/components/proxyapp.js index 4c790d3d..99b64580 100644 --- a/web/src/js/components/proxyapp.js +++ b/web/src/js/components/proxyapp.js @@ -1,6 +1,8 @@ import React from "react"; import ReactDOM from "react-dom"; import _ from "lodash"; +import {connect} from 'react-redux' +import { Route, Router as ReactRouter, hashHistory, Redirect} from "react-router" import {Splitter} from "./common.js" import MainView from "./mainview.js"; @@ -8,7 +10,6 @@ import Footer from "./footer.js"; import {Header, MainMenu} from "./header.js"; import EventLog from "./eventlog.js" import {EventLogStore, FlowStore, SettingsStore} from "../store/store.js"; -import {Query} from "../actions.js"; import {Key} from "../utils.js"; @@ -120,10 +121,10 @@ var ProxyAppMain = React.createClass({ render: function () { var query = this.getQuery(); var eventlog; - if (this.props.location.query[Query.SHOW_EVENTLOG]) { + if (this.props.showEventLog) { eventlog = [ , - + ]; } else { eventlog = null; @@ -142,13 +143,17 @@ var ProxyAppMain = React.createClass({ } }); +const AppContainer = connect( + state => ({ + showEventLog: state.eventLog.visible + }) +)(ProxyAppMain); -import { Route, Router as ReactRouter, hashHistory, Redirect} from "react-router"; export var App = ( - + diff --git a/web/src/js/ducks/README.md b/web/src/js/ducks/README.md new file mode 100644 index 00000000..9d005f35 --- /dev/null +++ b/web/src/js/ducks/README.md @@ -0,0 +1 @@ +https://github.com/erikras/ducks-modular-redux \ No newline at end of file diff --git a/web/src/js/ducks/eventLog.js b/web/src/js/ducks/eventLog.js new file mode 100644 index 00000000..5bae252a --- /dev/null +++ b/web/src/js/ducks/eventLog.js @@ -0,0 +1,39 @@ +const TOGGLE_FILTER = 'TOGGLE_EVENTLOG_FILTER' +const TOGGLE_VISIBILITY = 'TOGGLE_EVENTLOG_VISIBILITY' + + +const defaultState = { + visible: false, + filter: { + "debug": false, + "info": true, + "web": true + } +} +export default function reducer(state = defaultState, action) { + switch (action.type) { + case TOGGLE_FILTER: + return { + ...state, + filter: { + ...state.filter, + [action.filter]: !state.filter[action.filter] + } + } + case TOGGLE_VISIBILITY: + return { + ...state, + visible: !state.visible + } + default: + return state + } +} + + +export function toggleEventLogFilter(filter) { + return {type: TOGGLE_FILTER, filter} +} +export function toggleEventLogVisibility() { + return {type: TOGGLE_VISIBILITY} +} \ No newline at end of file diff --git a/web/src/js/ducks/index.js b/web/src/js/ducks/index.js new file mode 100644 index 00000000..c82d42bb --- /dev/null +++ b/web/src/js/ducks/index.js @@ -0,0 +1,8 @@ +import {combineReducers} from 'redux' +import eventLog from './eventLog.js'; + +const rootReducer = combineReducers({ + eventLog +}) + +export default rootReducer \ No newline at end of file diff --git a/web/src/js/reducers/eventLog.js b/web/src/js/reducers/eventLog.js deleted file mode 100644 index 9d078c14..00000000 --- a/web/src/js/reducers/eventLog.js +++ /dev/null @@ -1,31 +0,0 @@ -import {combineReducers} from 'redux' -import {TOGGLE_EVENTLOG_FILTER} from "../reduxActions" - -const defaultVisibility = { - "debug": false, - "info": true, - "web": true -}; - -const visibilityFilter = (state = defaultVisibility, action) => { - switch (action.type) { - case TOGGLE_EVENTLOG_FILTER: - return { - ...state, - [action.filter]: !state[action.filter] - }; - default: - return state; - } -}; - -const entries = (state = [], action) => { - return state; -}; - -const eventLog = combineReducers({ - visibilityFilter, - entries -}); - -export default eventLog diff --git a/web/src/js/reduxActions.js b/web/src/js/reduxActions.js deleted file mode 100644 index c5902f80..00000000 --- a/web/src/js/reduxActions.js +++ /dev/null @@ -1,13 +0,0 @@ -export const TOGGLE_EVENTLOG_FILTER = 'TOGGLE_EVENTLOG_FILTER'; -export const HIDE_EVENTLOG = 'HIDE_EVENTLOG'; -export const SHOW_EVENTLOG = 'SHOW_EVENTLOG'; - -export const EventLogFilters = { - DEBUG: 'debug', - INFO: 'info', - WEB: 'web' -}; - -export function toggleEventLogFilter(filter) { - return {type: TOGGLE_EVENTLOG_FILTER, filter} -} -- cgit v1.2.3