1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
|
var MainMenu = React.createClass({
statics: {
title: "Traffic",
route: "flows"
},
toggleEventLog: function () {
SettingsActions.update({
showEventLog: !this.props.settings.showEventLog
});
},
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({
statics: {
title: "Tools",
route: "flows"
},
render: function () {
return <div>Tools Menu</div>;
}
});
var ReportsMenu = React.createClass({
statics: {
title: "Visualization",
route: "reports"
},
render: function () {
return <div>Reports Menu</div>;
}
});
var header_entries = [MainMenu, ToolsMenu, ReportsMenu];
var Header = React.createClass({
mixins: [ReactRouter.Navigation],
getInitialState: function () {
return {
active: header_entries[0]
};
},
handleClick: function (active, e) {
e.preventDefault();
this.transitionTo(active.route);
this.setState({active: active});
},
handleFileClick: function () {
console.log("File click");
},
render: function () {
var header = header_entries.map(function(entry, i){
var classes = React.addons.classSet({
active: entry == this.state.active
});
return (
<a key={i}
href="#"
className={classes}
onClick={this.handleClick.bind(this, entry)}
>
{ entry.title}
</a>
);
}.bind(this));
return (
<header>
<div className="title-bar">
mitmproxy { this.props.settings.version }
</div>
<nav className="nav-tabs nav-tabs-lg">
<a href="#" className="special" onClick={this.handleFileClick}> File </a>
{header}
</nav>
<div className="menu">
<this.state.active settings={this.props.settings}/>
</div>
</header>
);
}
});
|
