diff --git a/package-lock.json b/package-lock.json deleted file mode 100644 index d7d15f4..0000000 --- a/package-lock.json +++ /dev/null @@ -1,31 +0,0 @@ -{ - "requires": true, - "lockfileVersion": 1, - "dependencies": { - "decode-uri-component": { - "version": "0.2.0", - "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz", - "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=" - }, - "query-string": { - "version": "6.11.1", - "resolved": "https://registry.npmjs.org/query-string/-/query-string-6.11.1.tgz", - "integrity": "sha512-1ZvJOUl8ifkkBxu2ByVM/8GijMIPx+cef7u3yroO3Ogm4DOdZcF5dcrWTIlSHe3Pg/mtlt6/eFjObDfJureZZA==", - "requires": { - "decode-uri-component": "^0.2.0", - "split-on-first": "^1.0.0", - "strict-uri-encode": "^2.0.0" - } - }, - "split-on-first": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/split-on-first/-/split-on-first-1.1.0.tgz", - "integrity": "sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw==" - }, - "strict-uri-encode": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz", - "integrity": "sha1-ucczDHBChi9rFC3CdLvMWGbONUY=" - } - } -} diff --git a/smart-hut/package-lock.json b/smart-hut/package-lock.json index fe9918b..11b699e 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", @@ -2281,6 +2304,37 @@ "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.9.1.tgz", "integrity": "sha512-wMHVg2EOHaMRxbzgFJ9gtjOOCrI80OHLG14rxi28XwOW8ux6IiEbRCGGGqCtdAIg4FQCbW20k9RsT4y3gJlFug==" }, + "axios": { + "version": "0.19.2", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz", + "integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==", + "requires": { + "follow-redirects": "1.5.10" + }, + "dependencies": { + "debug": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz", + "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==", + "requires": { + "ms": "2.0.0" + } + }, + "follow-redirects": { + "version": "1.5.10", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz", + "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==", + "requires": { + "debug": "=3.1.0" + } + }, + "ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" + } + } + }, "axobject-query": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.1.2.tgz", @@ -2477,6 +2531,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 +3065,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 +3695,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 +3790,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 +4424,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 +5406,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 +6752,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 +8779,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", @@ -10592,6 +10737,16 @@ "resolved": "https://registry.npmjs.org/react-axios/-/react-axios-2.0.3.tgz", "integrity": "sha512-63kY2iupdRgbvPq9G8xmM0NWUnt2Q5YmpotMoLQsxKOzKXKZg2Lo6CzF/bcZvtmv3WnfjBU6Bg8nZQO28eIAZw==" }, + "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", @@ -10777,6 +10932,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", @@ -12331,6 +12517,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", @@ -12773,6 +12976,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 68bd548..310d82f 100644 --- a/smart-hut/package.json +++ b/smart-hut/package.json @@ -13,11 +13,15 @@ "material-ui-image": "^3.2.3", "react": "^16.12.0", "react-axios": "^2.0.3", + "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/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/Login.js b/smart-hut/src/views/Login.js index b22ddd2..05647a9 100644 --- a/smart-hut/src/views/Login.js +++ b/smart-hut/src/views/Login.js @@ -1,7 +1,6 @@ import React, {Component} from '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); @@ -15,7 +14,7 @@ export default class Login extends Component { } handleLogin = (e) => { - + e.preventDefault(); const params = { "usernameOrEmail": this.state.user, @@ -53,7 +52,7 @@ export default class Login extends Component { href="/" > - Go Home + Go Home diff --git a/smart-hut/src/views/Signup.js b/smart-hut/src/views/Signup.js index 9c301aa..925e13f 100644 --- a/smart-hut/src/views/Signup.js +++ b/smart-hut/src/views/Signup.js @@ -2,8 +2,6 @@ import React, {Component} from 'react'; import {Button, Form, Grid, Header, Image, Icon, Input, Message} from 'semantic-ui-react'; import { call } from '../client_server'; - - export default class Signup extends Component{ constructor(props) { super(props); @@ -45,7 +43,6 @@ export default class Signup extends Component{ this.setState({[nam]: val}); }; - render() { return ( @@ -75,7 +72,7 @@ export default class Signup extends Component{ type='text' onChange={this.onChangeHandler} required - /> + />