Created base sensor design.

kallaspriit · Aug 4, 2016 · e0abbf4 · e0abbf4
1 parent 5867f35
commit e0abbf4
Show file tree

Hide file tree

Showing 14 changed files with 292 additions and 41 deletions.
diff --git a/gfx/css/components/header-component.scss b/gfx/css/components/header-component.scss
@@ -0,0 +1,4 @@
+.header-component {
+	position: fixed !important;
+	margin-bottom: 50px;
+}
diff --git a/gfx/css/main.scss b/gfx/css/main.scss
@@ -1,3 +1,15 @@
 BODY {
 	margin: 0;
 }
+
+.top-wrap {
+	height: 100%;
+	overflow: hidden;
+	overflow-y: auto;
+}
+.main-contents {
+	padding-top: 70px;
+}
+
+@import "views/device-view";
+@import "components/header-component";
diff --git a/gfx/css/views/device-view.scss b/gfx/css/views/device-view.scss
@@ -0,0 +1,20 @@
+.device-view {
+	.gauge-wrap {
+		position: relative;
+		top: -20px;
+
+		.gauge-value-wrap {
+			text-align:center;
+
+			.gauge-value-number {
+				font-size:14px;
+				color:#000;
+			}
+
+			.gauge-value-unit {
+				font-size:10px;
+				color:#666;
+			}
+		}
+	}
+}
diff --git a/gfx/images/logo.png b/gfx/images/logo.png
diff --git a/index.html b/index.html
@@ -3,7 +3,9 @@
 <head>
 	<title>IoT Client</title>
 	<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500' rel='stylesheet' type='text/css'>
+	<link rel="manifest" href="manifest.json">
 	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0, maximum-scale=1, minimum-scale=1">
+	<meta name="mobile-web-app-capable" content="yes">
 </head>
 <body>
 	<div id="root">

diff --git a/manifest.json b/manifest.json
@@ -0,0 +1,44 @@
+{
+  "name": "Cumulocity",
+  "icons": [
+    {
+      "src": "/gfx/images/logo.png",
+      "sizes": "36x36",
+      "type": "image/png",
+      "density": 0.75
+    },
+    {
+      "src": "/gfx/images/logo.png",
+      "sizes": "48x48",
+      "type": "image/png",
+      "density": 1.0
+    },
+    {
+      "src": "/gfx/images/logo.png",
+      "sizes": "72x72",
+      "type": "image/png",
+      "density": 1.5
+    },
+    {
+      "src": "/gfx/images/logo.png",
+      "sizes": "96x96",
+      "type": "image/png",
+      "density": 2.0
+    },
+    {
+      "src": "/gfx/images/logo.png",
+      "sizes": "144x144",
+      "type": "image/png",
+      "density": 3.0
+    },
+    {
+      "src": "/gfx/images/logo.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "density": 4.0
+    }
+  ],
+  "start_url": "/device",
+  "display": "standalone",
+  "orientation": "portrait"
+}
diff --git a/package.json b/package.json
@@ -18,49 +18,52 @@
   },
   "homepage": "http://redux.js.org",
   "dependencies": {
+    "extract-text-webpack-plugin": "^1.0.1",
     "highcharts": "^4.2.6",
-    "material-ui": "^0.15.2",
+    "highcharts-more": "^0.1.2",
+    "material-ui": "^0.15.3",
     "react": "^15.3.0",
+    "react-addons-update": "^15.3.0",
     "react-dom": "^15.3.0",
     "react-highcharts": "^10.0.0",
-    "react-redux": "^4.2.1",
+    "react-redux": "^4.4.5",
     "react-router": "^2.6.1",
     "react-router-redux": "^4.0.5",
     "react-tap-event-plugin": "^1.0.0",
-    "redux": "^3.2.1",
+    "redux": "^3.5.2",
     "redux-actions": "^0.10.1",
     "redux-devtools": "^3.3.1",
     "redux-devtools-dock-monitor": "^1.1.1",
     "redux-devtools-log-monitor": "^1.0.11",
     "redux-slider-monitor": "^1.0.7",
     "redux-thunk": "^2.1.0",
     "schema-object": "^4.0.3",
-	"webpack": "^1.9.11",
-	"webpack-dev-server": "^1.14.1"
+    "webpack": "^1.13.1",
+    "webpack-dev-server": "^1.14.1"
   },
   "devDependencies": {
-    "babel-core": "^6.3.15",
-    "babel-loader": "^6.2.0",
-    "babel-preset-es2015": "^6.3.13",
-    "babel-preset-react": "^6.3.13",
+    "babel-core": "^6.11.4",
+    "babel-loader": "^6.2.4",
+    "babel-preset-es2015": "^6.9.0",
+    "babel-preset-react": "^6.11.1",
     "babel-preset-react-hmre": "^1.1.1",
     "babel-preset-stage-0": "^6.5.0",
-    "babel-register": "^6.3.13",
+    "babel-register": "^6.11.6",
     "cross-env": "^2.0.0",
     "css-loader": "^0.23.1",
-    "enzyme": "^2.0.0",
+    "enzyme": "^2.4.1",
     "eslint": "^3.2.2",
     "eslint-config-sl": "git@github.com:kallaspriit/eslint-config-sl.git",
-    "expect": "^1.6.0",
-    "express": "^4.13.3",
+    "expect": "^1.20.2",
+    "express": "^4.14.0",
     "mocha": "^3.0.0",
     "node-libs-browser": "^1.0.0",
     "node-sass": "^3.8.0",
     "react-addons-test-utils": "^15.3.0",
     "react-hot-loader": "^1.3.0",
     "sass-loader": "^4.0.0",
     "style-loader": "^0.13.1",
-    "webpack-dev-middleware": "^1.2.0",
-    "webpack-hot-middleware": "^2.9.1"
+    "webpack-dev-middleware": "^1.6.1",
+    "webpack-hot-middleware": "^2.12.2"
   }
 }
diff --git a/views/DeviceView.js b/views/DeviceView.js
@@ -12,16 +12,17 @@ import FlatButton from 'material-ui/FlatButton';
 import * as counterActions from '../actions/counter-actions';
 
 import HeaderComponent from './components/HeaderComponent';
+import GaugeComponent from './components/GaugeComponent';
 
 function DeviceView({
 	number,
 	increase,
 	decrease,
 }) {
 	return (
-		<div>
+		<div className="device-view">
 			<HeaderComponent title="Light sensor" />
-			<Card>
+			<Card className="main-contents">
 				<CardHeader
 					title="Priit Kallas"
 					subtitle="Lai 29 4th floor"
@@ -41,7 +42,17 @@ function DeviceView({
 					/>
 				</CardMedia>
 				<CardText>
-					Clicked: {number} times
+					<div className="gauge-wrap">
+						<GaugeComponent
+							title="Light intensity"
+							unit="lux"
+							height={200}
+							min={0}
+							max={100}
+							value={Math.round(Math.random() * 100)}
+						/>
+					</div>
+					<span>Clicked: {number} times</span>
 				</CardText>
 				<CardActions>
 					<FlatButton label="Increase" onTouchTap={() => increase(1)} />

diff --git a/views/RootView.js b/views/RootView.js
@@ -1,15 +1,20 @@
 import React, { PropTypes } from 'react';
 import injectTapEventPlugin from 'react-tap-event-plugin';
 import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
+import getMuiTheme from 'material-ui/styles/getMuiTheme';
 import css from '../gfx/css/main.scss'; // eslint-disable-line no-unused-vars
 import DrawerMenuComponent from './components/DrawerMenuComponent';
 
 injectTapEventPlugin();
 
+const muiTheme = getMuiTheme({
+	// override theme styles
+});
+
 function RootView({ children }) {
 	return (
-		<MuiThemeProvider>
-			<div>
+		<MuiThemeProvider muiTheme={muiTheme}>
+			<div className="top-wrap">
 				{children}
 				<DrawerMenuComponent />
 			</div>

diff --git a/views/UserView.js b/views/UserView.js
@@ -1,9 +1,15 @@
 import React, { Component, PropTypes } from 'react';
 import { connect } from 'react-redux';
-import * as userActions from '../actions/user-actions';
+
+import Card from 'material-ui/Card/Card';
+import CardHeader from 'material-ui/Card/CardHeader';
+import CardText from 'material-ui/Card/CardText';
+import RaisedButton from 'material-ui/RaisedButton';
 
 import HeaderComponent from './components/HeaderComponent';
 
+import * as userActions from '../actions/user-actions';
+
 class UserView extends Component {
 
 	render() {
@@ -12,15 +18,23 @@ class UserView extends Component {
 			fetchUser,
 		} = this.props;
 
+		const btnStyle = {
+			margin: '0 5px',
+		};
+
 		return (
-			<div>
+			<div className="user-view">
 				<HeaderComponent title="User" />
-				{this.renderUserInfo(user)}
-				<div>
-					<button onClick={() => fetchUser(1)}>Load user #1</button>
-					<button onClick={() => fetchUser(2)}>Load user #2</button>
-					<button onClick={() => fetchUser('x')}>Load invalid user</button>
-				</div>
+				<Card className="main-contents">
+					<CardText>
+						{this.renderUserInfo(user)}
+						<div>
+							<RaisedButton onTouchTap={() => fetchUser(1)} style={btnStyle}>Load user #1</RaisedButton>
+							<RaisedButton onTouchTap={() => fetchUser(2)} style={btnStyle}>Load user #2</RaisedButton>
+							<RaisedButton onTouchTap={() => fetchUser('x')} style={btnStyle}>Load invalid</RaisedButton>
+						</div>
+					</CardText>
+				</Card>
 			</div>
 		);
 	}
@@ -41,9 +55,11 @@ class UserView extends Component {
 		}
 
 		return (
-			<div>
-				#{user.info.id} - {user.info.name}
-			</div>
+			<CardHeader
+				title={user.info.name}
+				subtitle="Telia"
+				avatar="/gfx/images/avatar.png"
+			/>
 		);
 	}
 }

diff --git a/views/components/DrawerMenuComponent.js b/views/components/DrawerMenuComponent.js
@@ -34,6 +34,10 @@ export default class DrawerMenuComponent extends Component {
 
 	handleOpen(view) {
 		return () => {
+			this.setState({
+				isOpen: false,
+			});
+
 			browserHistory.push(`/${view}`);
 		};
 	}