From 465b96f30c3671196121bbf9e6cc37dbfb9c4aa9 Mon Sep 17 00:00:00 2001 From: christiancp Date: Mon, 9 Mar 2020 13:52:27 +0100 Subject: [PATCH] dashboard almost done with device buttons --- smart-hut/package-lock.json | 177 ++++++++++++++++++ smart-hut/package.json | 6 +- smart-hut/public/img/add.svg | 41 ++++ smart-hut/public/img/lightOff.svg | 86 +++++++++ smart-hut/public/img/lightOn.svg | 63 +++++++ smart-hut/public/img/settings.svg | 2 + smart-hut/public/index.html | 3 +- smart-hut/public/manifest.json | 15 -- smart-hut/public/style.css | 3 +- smart-hut/src/Routes.js | 2 + .../src/components/dashboard/DevicePanel.js | 85 +++++++++ .../components/dashboard/devices/Device.js | 87 +++++++++ .../components/dashboard/devices/NewDevice.js | 73 ++++++++ .../components/dashboard/devices/Sensor.js | 67 +++++++ .../dashboard/devices/TypesOfDevices.js | 13 ++ .../dashboard/devices/styleComponents.js | 41 ++++ smart-hut/src/views/Dashboard.js | 10 + smart-hut/src/views/Home.js | 1 - smart-hut/src/views/Login.js | 4 +- smart-hut/src/views/Signup.js | 32 +++- 20 files changed, 786 insertions(+), 25 deletions(-) create mode 100644 smart-hut/public/img/add.svg create mode 100644 smart-hut/public/img/lightOff.svg create mode 100644 smart-hut/public/img/lightOn.svg create mode 100644 smart-hut/public/img/settings.svg create mode 100644 smart-hut/src/components/dashboard/DevicePanel.js create mode 100644 smart-hut/src/components/dashboard/devices/Device.js create mode 100644 smart-hut/src/components/dashboard/devices/NewDevice.js create mode 100644 smart-hut/src/components/dashboard/devices/Sensor.js create mode 100644 smart-hut/src/components/dashboard/devices/TypesOfDevices.js create mode 100644 smart-hut/src/components/dashboard/devices/styleComponents.js create mode 100644 smart-hut/src/views/Dashboard.js diff --git a/smart-hut/package-lock.json b/smart-hut/package-lock.json index cb13d46..1ef82db 100644 --- a/smart-hut/package-lock.json +++ b/smart-hut/package-lock.json @@ -1052,6 +1052,29 @@ "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.7.4.tgz", "integrity": "sha512-fxfMSBMX3tlIbKUdtGKxqB1fyrH6gVrX39Gsv3y8lRYKUqlgDt3UMqQyGnR1bQMa2B8aGnhLZokZgg8vT0Le+A==" }, + "@emotion/is-prop-valid": { + "version": "0.8.7", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.7.tgz", + "integrity": "sha512-OPkKzUeiid0vEKjZqnGcy2mzxjIlCffin+L2C02pdz/bVlt5zZZE2VzO0D3XOPnH0NEeF21QNKSXiZphjr4xiQ==", + "requires": { + "@emotion/memoize": "0.7.4" + } + }, + "@emotion/memoize": { + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", + "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==" + }, + "@emotion/stylis": { + "version": "0.8.5", + "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz", + "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==" + }, + "@emotion/unitless": { + "version": "0.7.5", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz", + "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==" + }, "@hapi/address": { "version": "2.1.4", "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz", @@ -2477,6 +2500,22 @@ "resolved": "https://registry.npmjs.org/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.6.tgz", "integrity": "sha512-1aGDUfL1qOOIoqk9QKGIo2lANk+C7ko/fqH0uIyC71x3PEGz0uVP8ISgfEsFuG+FKmjHTvFK/nNM8dowpmUxLA==" }, + "babel-plugin-styled-components": { + "version": "1.10.7", + "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.10.7.tgz", + "integrity": "sha512-MBMHGcIA22996n9hZRf/UJLVVgkEOITuR2SvjHLb5dSTUyR4ZRGn+ngITapes36FI3WLxZHfRhkA1ffHxihOrg==", + "requires": { + "@babel/helper-annotate-as-pure": "^7.0.0", + "@babel/helper-module-imports": "^7.0.0", + "babel-plugin-syntax-jsx": "^6.18.0", + "lodash": "^4.17.11" + } + }, + "babel-plugin-syntax-jsx": { + "version": "6.18.0", + "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz", + "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=" + }, "babel-plugin-syntax-object-rest-spread": { "version": "6.13.0", "resolved": "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz", @@ -2995,6 +3034,11 @@ "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz", "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==" }, + "camelize": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz", + "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=" + }, "caniuse-api": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz", @@ -3620,6 +3664,11 @@ "postcss": "^7.0.5" } }, + "css-color-keywords": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", + "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=" + }, "css-color-names": { "version": "0.0.4", "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz", @@ -3710,6 +3759,16 @@ "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz", "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==" }, + "css-to-react-native": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz", + "integrity": "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==", + "requires": { + "camelize": "^1.0.0", + "css-color-keywords": "^1.0.0", + "postcss-value-parser": "^4.0.2" + } + }, "css-tree": { "version": "1.0.0-alpha.37", "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz", @@ -4334,6 +4393,14 @@ "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz", "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=" }, + "encoding": { + "version": "0.1.12", + "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.12.tgz", + "integrity": "sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=", + "requires": { + "iconv-lite": "~0.4.13" + } + }, "end-of-stream": { "version": "1.4.4", "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz", @@ -5308,6 +5375,35 @@ "bser": "2.1.1" } }, + "fbjs": { + "version": "0.8.17", + "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.17.tgz", + "integrity": "sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=", + "requires": { + "core-js": "^1.0.0", + "isomorphic-fetch": "^2.1.1", + "loose-envify": "^1.0.0", + "object-assign": "^4.1.0", + "promise": "^7.1.1", + "setimmediate": "^1.0.5", + "ua-parser-js": "^0.7.18" + }, + "dependencies": { + "core-js": { + "version": "1.2.7", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz", + "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY=" + }, + "promise": { + "version": "7.3.1", + "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz", + "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==", + "requires": { + "asap": "~2.0.3" + } + } + } + }, "figgy-pudding": { "version": "3.5.1", "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.1.tgz", @@ -6625,6 +6721,15 @@ "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz", "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=" }, + "isomorphic-fetch": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz", + "integrity": "sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=", + "requires": { + "node-fetch": "^1.0.1", + "whatwg-fetch": ">=0.10.0" + } + }, "isstream": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz", @@ -8643,6 +8748,15 @@ "tslib": "^1.10.0" } }, + "node-fetch": { + "version": "1.7.3", + "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz", + "integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==", + "requires": { + "encoding": "^0.1.11", + "is-stream": "^1.0.1" + } + }, "node-forge": { "version": "0.9.0", "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.9.0.tgz", @@ -10587,6 +10701,16 @@ "whatwg-fetch": "^3.0.0" } }, + "react-circular-input": { + "version": "0.1.6", + "resolved": "https://registry.npmjs.org/react-circular-input/-/react-circular-input-0.1.6.tgz", + "integrity": "sha512-MELeTANICDuky+vJ/dLf7+dPufNajfAPeU5glo7dgcDsC0gEAJJ9MaVOTy3FsU9xcXC2G122qPBQNXMMlKYJng==" + }, + "react-circular-slider-svg": { + "version": "0.1.5", + "resolved": "https://registry.npmjs.org/react-circular-slider-svg/-/react-circular-slider-svg-0.1.5.tgz", + "integrity": "sha512-ZXSlwKHExjb950+84gydH5wxX1CnND1v4w1DywOHcOgzD48Wmjr+nME4JeOumNJ9QOXhm1HROhSEDMlTFIAGqw==" + }, "react-dev-utils": { "version": "10.2.0", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-10.2.0.tgz", @@ -10772,6 +10896,37 @@ "warning": "^4.0.2" } }, + "react-round-slider": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/react-round-slider/-/react-round-slider-1.0.1.tgz", + "integrity": "sha512-Z26omllRvX/8IyDW/0MUklamitqUzCpnWHl9op425inmYYN7A1TarQci6PElYfnakHAi42I5LBvyMqLBe/uvvA==", + "requires": { + "prop-types": "15.6.2", + "react": "16.4.2" + }, + "dependencies": { + "prop-types": { + "version": "15.6.2", + "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.2.tgz", + "integrity": "sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ==", + "requires": { + "loose-envify": "^1.3.1", + "object-assign": "^4.1.1" + } + }, + "react": { + "version": "16.4.2", + "resolved": "https://registry.npmjs.org/react/-/react-16.4.2.tgz", + "integrity": "sha512-dMv7YrbxO4y2aqnvA7f/ik9ibeLSHQJTI6TrYAenPSaQ6OXfb+Oti+oJiy8WBxgRzlKatYqtCjphTgDSCEiWFg==", + "requires": { + "fbjs": "^0.8.16", + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1", + "prop-types": "^15.6.0" + } + } + } + }, "react-router": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.1.2.tgz", @@ -12326,6 +12481,23 @@ } } }, + "styled-components": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.0.1.tgz", + "integrity": "sha512-E0xKTRIjTs4DyvC1MHu/EcCXIj6+ENCP8hP01koyoADF++WdBUOrSGwU1scJRw7/YaYOhDvvoad6VlMG+0j53A==", + "requires": { + "@babel/helper-module-imports": "^7.0.0", + "@babel/traverse": "^7.4.5", + "@emotion/is-prop-valid": "^0.8.3", + "@emotion/stylis": "^0.8.4", + "@emotion/unitless": "^0.7.4", + "babel-plugin-styled-components": ">= 1", + "css-to-react-native": "^3.0.0", + "hoist-non-react-statics": "^3.0.0", + "shallowequal": "^1.1.0", + "supports-color": "^5.5.0" + } + }, "stylehacks": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz", @@ -12768,6 +12940,11 @@ "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz", "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=" }, + "ua-parser-js": { + "version": "0.7.21", + "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.21.tgz", + "integrity": "sha512-+O8/qh/Qj8CgC6eYBVBykMrNtp5Gebn4dlGD/kKXVkJNDwyrAwSIqwz8CDf+tsAIWVycKcku6gIXJ0qwx/ZXaQ==" + }, "unicode-canonical-property-names-ecmascript": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz", diff --git a/smart-hut/package.json b/smart-hut/package.json index 8a47c6f..88a5471 100644 --- a/smart-hut/package.json +++ b/smart-hut/package.json @@ -11,11 +11,15 @@ "classnames": "^2.2.6", "material-ui-image": "^3.2.3", "react": "^16.12.0", + "react-circular-input": "^0.1.6", + "react-circular-slider-svg": "^0.1.5", "react-dom": "^16.12.0", + "react-round-slider": "^1.0.1", "react-router": "^5.1.2", "react-router-dom": "^5.1.2", "react-scripts": "3.4.0", - "semantic-ui-react": "^0.88.2" + "semantic-ui-react": "^0.88.2", + "styled-components": "^5.0.1" }, "scripts": { "start": "react-scripts start", diff --git a/smart-hut/public/img/add.svg b/smart-hut/public/img/add.svg new file mode 100644 index 0000000..6583d3e --- /dev/null +++ b/smart-hut/public/img/add.svg @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/smart-hut/public/img/lightOff.svg b/smart-hut/public/img/lightOff.svg new file mode 100644 index 0000000..3531b7b --- /dev/null +++ b/smart-hut/public/img/lightOff.svg @@ -0,0 +1,86 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/smart-hut/public/img/lightOn.svg b/smart-hut/public/img/lightOn.svg new file mode 100644 index 0000000..e94a4e7 --- /dev/null +++ b/smart-hut/public/img/lightOn.svg @@ -0,0 +1,63 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/smart-hut/public/img/settings.svg b/smart-hut/public/img/settings.svg new file mode 100644 index 0000000..0e5299a --- /dev/null +++ b/smart-hut/public/img/settings.svg @@ -0,0 +1,2 @@ + + diff --git a/smart-hut/public/index.html b/smart-hut/public/index.html index c6f0780..378b944 100644 --- a/smart-hut/public/index.html +++ b/smart-hut/public/index.html @@ -10,7 +10,6 @@ - - \ No newline at end of file + diff --git a/smart-hut/public/manifest.json b/smart-hut/public/manifest.json index 080d6c7..43d793f 100644 --- a/smart-hut/public/manifest.json +++ b/smart-hut/public/manifest.json @@ -2,21 +2,6 @@ "short_name": "React App", "name": "Create React App Sample", "icons": [ - { - "src": "favicon.ico", - "sizes": "64x64 32x32 24x24 16x16", - "type": "image/x-icon" - }, - { - "src": "logo192.png", - "type": "image/png", - "sizes": "192x192" - }, - { - "src": "logo512.png", - "type": "image/png", - "sizes": "512x512" - } ], "start_url": ".", "display": "standalone", diff --git a/smart-hut/public/style.css b/smart-hut/public/style.css index c0c2326..297e85a 100644 --- a/smart-hut/public/style.css +++ b/smart-hut/public/style.css @@ -1,6 +1,7 @@ *{ margin: 0; padding: 0; - box-sizing: border-box; + font-family: "Lato", Helvetica, SansSerif, serif; } /*background: linear-gradient(to bottom, rgba(0, 46, 200, 0.51), rgba(0, 0, 0, 0.51));*/ + diff --git a/smart-hut/src/Routes.js b/smart-hut/src/Routes.js index 0afa599..99a10de 100644 --- a/smart-hut/src/Routes.js +++ b/smart-hut/src/Routes.js @@ -3,6 +3,7 @@ import {Route, Switch} from 'react-router-dom'; import Home from './views/Home'; import Login from "./views/Login"; import Signup from "./views/Signup"; +import Dashboard from "./views/Dashboard"; export default function Routes() { return ( @@ -10,6 +11,7 @@ export default function Routes() { + ) } diff --git a/smart-hut/src/components/dashboard/DevicePanel.js b/smart-hut/src/components/dashboard/DevicePanel.js new file mode 100644 index 0000000..20171bd --- /dev/null +++ b/smart-hut/src/components/dashboard/DevicePanel.js @@ -0,0 +1,85 @@ +import React, {Component} from 'react'; +import { + Grid, +} from "semantic-ui-react"; +import Device from "./devices/Device"; +import NewDevice from "./devices/NewDevice"; +import {LightDevice, TemperatureSensor} from "./devices/TypesOfDevices"; +import {editButtonStyle, panelStyle} from "./devices/styleComponents"; + +class Panel extends Component { + + constructor(props) { + super(props); + this.state = { + editMode : false + }; + } + + editModeController = (e) => { + this.setState((prevState) => ({ editMode: !prevState.editMode })); + }; + + render() { + const devices = [ + { + "name": "Bedroom Light", + ...LightDevice + }, + { + "name": "Bathroom Light", + ...LightDevice + }, + { + "name": "Desktop Light", + ...LightDevice + }, + { + "name": "Entrance Light", + ...LightDevice + }, + { + "name": "Bedroom", + ...TemperatureSensor + } + ]; + + return ( +
+ + + {devices.map((e, i) => { + return ( + + + + ) + })} + + + + +
+ ) + } + +} + + +export default class DevicePanel extends Component { + + constructor(props) { + super(props); + this.state = { + shownRoom: "All" + } + } + + render() { + return ( + + ) + } + +} + diff --git a/smart-hut/src/components/dashboard/devices/Device.js b/smart-hut/src/components/dashboard/devices/Device.js new file mode 100644 index 0000000..3ca57de --- /dev/null +++ b/smart-hut/src/components/dashboard/devices/Device.js @@ -0,0 +1,87 @@ +import React, {Component} from 'react'; +import styled from 'styled-components'; +import {Image} from "semantic-ui-react"; +import Sensor from './Sensor'; +import {editModeIconStyle, editModeStyle} from "./styleComponents"; + +const StyledDiv = styled.div` + background-color : white; + padding : 3rem; + width: 10rem; + height: 10rem; + border-radius : 100%; + border : none; + position : relative; + box-shadow: 3px 2px 10px 5px #ccc; + transition : all .3s ease-out; + :hover{ + background-color : #f2f2f2; + } + :active{ + transform : translate(0.3px, 0.8px); + box-shadow: 0.5px 0.5px 7px 3.5px #ccc; + } +`; + +const iconStyle = { + width: "4rem", + height: "auto", + position: "absolute", + top: "20%", + left: "50%", + transform: "translateX(-50%)", + filter: "drop-shadow( 1px 1px 0.5px rgba(0, 0, 0, .25))" +}; + +const nameStyle = { + position: "absolute", + top: "50%", + left: "50%", + transform: "translateX(-50%)" +} + +export default class Device extends Component { + constructor(props) { + super(props); + this.state = { + turnOnOff: "off", + icon: this.props.device.img + } + } + + onClickDevice = () => { + if (this.props.device.type === "light") { + if (this.state.turnOnOff === "on") { + this.setState({ + turnOnOff: "off", + icon: this.props.device.img + }); + } else { + this.setState({ + turnOnOff: "on", + icon: this.props.device.imgClick + }); + } + } + }; + + render() { + if (this.props.device.type === "temperature_sensor") { + return ( + + {this.props.edit ? () : ("")} + + + ) + } + return ( + + {this.props.edit ? () : ("")} + +
{this.props.device.name}
+ + ) + } +} + + diff --git a/smart-hut/src/components/dashboard/devices/NewDevice.js b/smart-hut/src/components/dashboard/devices/NewDevice.js new file mode 100644 index 0000000..4b30f3f --- /dev/null +++ b/smart-hut/src/components/dashboard/devices/NewDevice.js @@ -0,0 +1,73 @@ +import React, {Component} from 'react'; +import styled, {keyframes} from 'styled-components'; +import {Image} from "semantic-ui-react"; + +const rotateAddButton = keyframes` + 0% { + transform : translate(0px, 0px) rotate(0deg); + box-shadow: 3px 2px 10px 5px #ccc; + } + 100% { + transform : translate(0.3px, 0.8px) rotate(90deg); + box-shadow: 0.5px 0.5px 7px 3.5px #ccc; + } +`; + +const StyledDiv = styled.div` + background-color : #ff4050; + padding : 3rem; + width: 10rem; + height: 10rem; + border-radius : 100%; + border : none; + position : relative; + box-shadow: 3px 2px 10px 5px #ccc; + transition : all .3s ease-out; + :hover{ + background-color : #ff2436; + } + :active{ + animation-name: ${rotateAddButton}; + animation-duration: 0.5s; + animation-timing-function: ease; + animation-delay: 0s; + animation-direction: normal; + animation-play-state: running; + animation-fill-mode: forwards; + } +`; +const iconStyle = { + width : "4rem", + height : "auto", + position : "absolute", + top : "20%", + left : "50%", + transform : "translateX(-50%)" +}; + +const nameStyle = { + position : "absolute", + top : "50%", + left : "50%", + transform : "translateX(-50%)" +} + +export default class NewDevice extends Component { + constructor(props) { + super(props); + this.state = { + } + } + + onClickDevice = (event) => { + console.log(this.props.children); + }; + + render() { + return ( + + + + ) + } +} diff --git a/smart-hut/src/components/dashboard/devices/Sensor.js b/smart-hut/src/components/dashboard/devices/Sensor.js new file mode 100644 index 0000000..d603ec1 --- /dev/null +++ b/smart-hut/src/components/dashboard/devices/Sensor.js @@ -0,0 +1,67 @@ +import React, {useState} from "react"; +import { + CircularInput, + CircularTrack, + CircularProgress, + CircularThumb, + useCircularInputContext, +} from 'react-circular-input' + + +// Example of a custom component to display text on top of the thumb + +function TemperatureDisplay() { + const {getPointFromValue, value} = useCircularInputContext(); + const {x, y} = getPointFromValue(); + const style = { + fontFamily: "Lato", + fontSize: "1.2rem", + color: "white", + + }; + + return ( + + {Math.round(value * 100)} + + ) +} + +export default function Sensor(props) { + const style = {width: "10rem", height: "10rem", position: "absolute", top: "0", left: "0"}; + const valueStyle = { + fill: "#3e99ff", + fontSize: "2.5rem", + fontFamily: "Lato", + textShadow: "1px 1px 0.5px rgba(0, 0, 0, .2)", + } + + const nameStyle = { + fill: "#3e99ff", + fontSize: "1.5rem", + fontFamily: "Lato", + textShadow: "1px 1px 0.5px rgba(0, 0, 0, .2)", + } + const [value, setValue] = useState(0.25); + + return ( + + + + + + + {Math.round(value * props.device.maxValue)}{props.device.units} + + + {props.device.name} + + + ) +} + + diff --git a/smart-hut/src/components/dashboard/devices/TypesOfDevices.js b/smart-hut/src/components/dashboard/devices/TypesOfDevices.js new file mode 100644 index 0000000..35320ac --- /dev/null +++ b/smart-hut/src/components/dashboard/devices/TypesOfDevices.js @@ -0,0 +1,13 @@ +export const LightDevice = { + type : "light", + img : "/img/lightOff.svg", + imgClick : "/img/lightOn.svg" +}; + +export const TemperatureSensor = { + type : "temperature_sensor", + img : "", + imgClick : "", + units: "ºC", + maxValue : 30 +}; diff --git a/smart-hut/src/components/dashboard/devices/styleComponents.js b/smart-hut/src/components/dashboard/devices/styleComponents.js new file mode 100644 index 0000000..f61fc12 --- /dev/null +++ b/smart-hut/src/components/dashboard/devices/styleComponents.js @@ -0,0 +1,41 @@ +export const editButtonStyle = { + position : "absolute", + top: "0", + right : "0", + backgroundColor : "#3e99ff", + borderRadius : "0 0 0 20px", + padding : ".4rem 1.2rem", + outline : "none", + color : "white", + fontFamily : "Lato", + textTransform : "uppercase" +}; + +export const panelStyle = { + backgroundColor: "#fafafa", + height: "100%", + width: "auto", + padding: "3rem", +}; + +export const editModeStyle = { + position : "absolute", + top: "15%", + right: "0", + width : "1.5rem", + height : "1.5rem", + backgroundColor : "black", + borderRadius: "100%", + zIndex : "100" +}; + +export const editModeIconStyle = { + position : "absolute", + top: "50%", + left: "50%", + transform : "translate(-50%, -50%)", + width: "0.75rem", + height : "0.75rem", + borderRadius : "20%", + zIndex : "101" +} diff --git a/smart-hut/src/views/Dashboard.js b/smart-hut/src/views/Dashboard.js new file mode 100644 index 0000000..320d33b --- /dev/null +++ b/smart-hut/src/views/Dashboard.js @@ -0,0 +1,10 @@ +import React from 'react'; +import DevicePanel from "../components/dashboard/DevicePanel"; + +export default function Dashboard(props){ + return( +
+ +
+ ) +} diff --git a/smart-hut/src/views/Home.js b/smart-hut/src/views/Home.js index c73c137..3746ed0 100644 --- a/smart-hut/src/views/Home.js +++ b/smart-hut/src/views/Home.js @@ -3,7 +3,6 @@ import React, { Component } from 'react'; import { Button, Container, - Divider, Grid, Header, Icon, diff --git a/smart-hut/src/views/Login.js b/smart-hut/src/views/Login.js index 051847d..5eee9e4 100644 --- a/smart-hut/src/views/Login.js +++ b/smart-hut/src/views/Login.js @@ -1,13 +1,11 @@ import React, {Component} from 'react'; -import {Button, Form, Grid, Header, Image, Message, Segment, Icon, Checkbox, Input} from 'semantic-ui-react'; +import {Button, Form, Grid, Header, Image, Message, Icon, Checkbox, Input} from 'semantic-ui-react'; export default class Login extends Component { constructor(props) { super(props); this.state = { logged : false, - email: "", - password : "" }; } diff --git a/smart-hut/src/views/Signup.js b/smart-hut/src/views/Signup.js index db1fd6c..fc56c82 100644 --- a/smart-hut/src/views/Signup.js +++ b/smart-hut/src/views/Signup.js @@ -1,10 +1,38 @@ -import React, {Component} from 'react'; +import React, {Component, useState} from 'react'; +function Step1(props) { + return +} + + +function Step2(props){ + return +}; + +function Form(props){ + const [step, setStep] = useState(1); + if(step === 0){ + return + } + else if(step === 1){ + return + } + return

this is step: {step}

+}; export default class Signup extends Component{ + + constructor(props) { + super(props); + this.state = { + step : 0, + }; + } + render() { + return( - "This is the register page" +
) } }