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
|
/** @jsx React.DOM */
var MainMenu = React.createClass({
toggleEventLog() {
SettingsActions.update({
showEventLog: !this.props.settings.showEventLog
});
},
render(){
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(){
return (<div>Tools Menu</div>);
}
});
var ReportsMenu = React.createClass({
render(){
return (<div>Reports Menu</div>);
}
});
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({
getInitialState(){
return {
active: "main"
};
},
handleClick(active){
this.setState({active: active});
ReactRouter.transitionTo(_Header_Entries[active].route);
return false;
},
handleFileClick(){
console.log("File click");
},
render(){
var header = [];
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>);
}
var menu = _Header_Entries[this.state.active].menu({
settings: this.props.settings
});
return (
<header>
<div className="title-bar">
mitmproxy { this.props.settings.version }
</div>
<nav>
<a href="#" className="special" onClick={this.handleFileClick}> File </a>
{header}
</nav>
<div className="menu">
{ menu }
</div>
</header>);
}
});
|
