filter by level

Author: icewind1991

css/app.css

@@ -85,3 +85,15 @@ ol.trace > li {
 ol.trace .file, ol.trace .line {
 	font-style: italic;
 }
+
+a.checkbox-holder {
+	line-height: 30px;
+}
+
+input[type="checkbox"] {
+	margin: 5px;
+}
+
+label {
+	margin: 5px;
+}

js/App.js

@@ -4,14 +4,17 @@ import ReactScrolla from 'react-scrolla';
 
 import {LogProvider} from './Providers/LogProvider.js';
 import {LogTable} from './Components/LogTable.js';
-import {SideBar} from './Components/SideBar.js';
+import {SideBar, Entry, Separator} from './Components/SideBar.js';
+import {ToggleEntry} from './Components/ToggleEntry.js';
+import {App as OCApp} from './Components/App.js';
 
 import {LogSearch} from './Search.js';
 
 export class App extends Component {
 	state = {
 		'entries': [],
-		'loading': false
+		'loading': false,
+		'levels': [true, true, true, true, true]
 	};
 
 	constructor () {
@@ -31,23 +34,40 @@ export class App extends Component {
 		this.setState({loading: false});
 	};
 
+	setLevel (level, newState) {
+		let levels = this.state.levels;
+		levels[level] = newState;
+		this.setState({levels});
+	}
+
 	render () {
+		let entries = this.state.entries.filter(entry=> {
+			return this.state.levels[entry.level];
+		});
+
+		let filters = this.state.levels.map((status, level)=> {
+			return (
+				<ToggleEntry active={status}
+							 onChange={this.setLevel.bind(this, level)}>
+					{LogProvider.levels[level]}
+				</ToggleEntry>
+			);
+		});
+
 		return (
-			<div id="content" role="main" className={"app-" + this.props.appId}>
+			<OCApp appId="logreader">
 				<SideBar>
-					<p>Dummy 1</p>
-
-					<p>Dummy 2</p>
+					{filters}
 				</SideBar>
 
 				<ReactScrolla
 					id="app-content"
 					percentage={85}
 					onPercentage={this.fetchNextPage}
 					isLoading={this.state.loading}>
-					<LogTable entries={this.state.entries}/>
+					<LogTable entries={entries}/>
 				</ReactScrolla>
-			</div>
+			</OCApp>
 		);
 	}
 }

js/Components/App.js

@@ -0,0 +1,11 @@
+import {Component} from 'react/addons';
+
+export class App extends Component {
+	render () {
+		return (
+			<div id="content" role="main" className={"app-" + this.props.appId}>
+				{this.props.children}
+			</div>
+		);
+	}
+}

js/Components/SideBar.js

@@ -7,11 +7,25 @@ export class SideBar extends Component {
 			return <li key={i}>{child}</li>
 		});
 		return (
-			<div id="app-navigation">
-				<ul>
-					{entries}
-				</ul>
-			</div>
+			<ul id="app-navigation">
+				{this.props.children}
+			</ul>
+		);
+	}
+}
+
+export class Entry extends Component {
+	render () {
+		return (
+			<li>{this.props.children}</li>
+		);
+	}
+}
+
+export class Separator extends Component {
+	render () {
+		return (
+			<li className="app-navigation-separator"/>
 		);
 	}
 }

js/Components/ToggleEntry.js

@@ -0,0 +1,46 @@
+import {Component} from 'react/addons';
+
+export class ToggleEntry extends Component {
+	static idCounter = 0;
+	_id = null;
+
+	state = {
+		active: false
+	};
+
+	constructor (props) {
+		super();
+		this.state.active = props.active || false;
+	}
+
+	get id () {
+		if (!this._id) {
+			this._id = this.props.id || '__checkbox_' + (++ToggleEntry.idCounter);
+		}
+		return this._id;
+	}
+
+	onChange = (event)=> {
+
+	};
+
+	onClick = () => {
+		let active = !this.state.active;
+		this.setState({active});
+		if (this.props.onChange) {
+			this.props.onChange(active);
+		}
+	};
+
+	render () {
+		return (
+			<li>
+				<a className="checkbox-holder" onClick={this.onClick}>
+					<input id={this.id} type="checkbox"
+						   checked={this.state.active}/>
+					<label htmlFor={this.id}>{this.props.children}</label>
+				</a>
+			</li>
+		);
+	}
+}

js/index.js

@@ -10,5 +10,5 @@ if (process.env.NODE_ENV !== 'production') {
 }
 
 $(document).ready(() => {
-	React.render(<App appId="logreader" />, document.getElementById('content'));
+	React.render(<App />, document.getElementById('content'));
 });