Debug info panel

src/js/components/DebugInfo.js

@@ -0,0 +1,50 @@
+
+import React, { PropTypes } from 'react'
+import { connect } from 'react-redux'
+import { Link } from 'react-router'
+import { createStore, bindActionCreators } from 'redux'
+
+import * as uiActions from '../services/ui/actions'
+
+class DebugInfo extends React.Component{
+
+	constructor(props) {
+		super(props);
+	}
+
+	render(){
+		return (
+			<div className="debug-info">
+				<div className="item">
+					{this.props.ui.albums ? Object.keys(this.props.ui.albums).length : '0'}&nbsp;albums
+				</div>
+				<div className="item">
+					{this.props.ui.artists ? Object.keys(this.props.ui.artists).length : '0'}&nbsp;artists
+				</div>
+				<div className="item">
+					{this.props.ui.playlists ? Object.keys(this.props.ui.playlists).length : '0'}&nbsp;playlists
+				</div>
+				<div className="item">
+					{this.props.ui.users ? Object.keys(this.props.ui.users).length : '0'}&nbsp;users
+				</div>
+				<div className="item">
+					{'ontouchstart' in document.documentElement ? 'can touch' : 'no touch'}
+				</div>
+			</div>
+		);
+	}
+}
+
+const mapStateToProps = (state, ownProps) => {
+	return {
+		ui: state.ui
+	}
+}
+
+const mapDispatchToProps = (dispatch) => {
+	return {
+		uiActions: bindActionCreators(uiActions, dispatch)
+	}
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(DebugInfo)

src/js/views/App.js

@@ -12,6 +12,7 @@ import ContextMenu from '../components/ContextMenu'
 import Dragger from '../components/Dragger'
 import Modal from '../components/Modal/Modal'
 import Notifications from '../components/Notifications'
+import DebugInfo from '../components/DebugInfo'
 
 import * as uiActions from '../services/ui/actions'
 import * as pusherActions from '../services/pusher/actions'
@@ -132,6 +133,7 @@ class App extends React.Component{
 		        <Dragger />
 		        <Modal />
 		        <Notifications />
+		        {this.props.debug_info ? <DebugInfo /> : null}
 	        </div>
 		);
 	}
@@ -151,7 +153,8 @@ const mapStateToProps = (state, ownProps) => {
 		sidebar_open: state.ui.sidebar_open,
 		dragger: state.ui.dragger,
 		modal: state.ui.modal,
-		context_menu: state.ui.context_menu
+		context_menu: state.ui.context_menu,
+		debug_info: state.ui.debug_info
 	}
 }
 

src/js/views/Debug.js

@@ -87,6 +87,14 @@ class Debug extends React.Component{
 										onChange={ e => this.props.uiActions.set({ log_actions: !this.props.log_actions })} />
 									<span className="label">Log actions in developer console</span>
 								</label>
+								<label>
+									<input 
+										type="checkbox"
+										name="debug_info"
+										checked={ this.props.debug_info }
+										onChange={ e => this.props.uiActions.set({ debug_info: !this.props.debug_info })} />
+									<span className="label">Show debug info</span>
+								</label>
 							</div>
 						</div>
 					</form>
@@ -161,6 +169,7 @@ const mapStateToProps = (state, ownProps) => {
 		connectionid: state.pusher.connectionid,
 		emulate_touch: state.ui.emulate_touch,
 		log_actions: state.ui.log_actions,
+		debug_info: state.ui.debug_info,
 		debug_response: state.ui.debug_response
 	}
 }

src/scss/app.scss

@@ -23,6 +23,7 @@
 @import 'components/notifications';
 @import 'components/dropdown-field';
 @import 'components/loader';
+@import 'components/debug';
 
 @import 'views/artist';
 @import 'views/user';

src/scss/components/_debug.scss

@@ -0,0 +1,11 @@
+
+.debug-info {
+	font-size: 10px;
+	position: fixed;
+	top: 0;
+	right: 0;
+	padding: 10px;
+	background: rgba(0,0,0,0.5);
+	color: #FFFFFF;
+	pointer-events: none;
+}