dashboard almost done with device buttons
This commit is contained in:
christiancp
parent
bdf6b96098
commit
465b96f30c
20 changed files with 786 additions and 25 deletions
177
smart-hut/package-lock.json
generated
177
smart-hut/package-lock.json
generated
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
41
smart-hut/public/img/add.svg
Normal file
41
smart-hut/public/img/add.svg
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
|
||||
<g>
|
||||
<g>
|
||||
<path d="M492,236H276V20c0-11.046-8.954-20-20-20c-11.046,0-20,8.954-20,20v216H20c-11.046,0-20,8.954-20,20s8.954,20,20,20h216
|
||||
v216c0,11.046,8.954,20,20,20s20-8.954,20-20V276h216c11.046,0,20-8.954,20-20C512,244.954,503.046,236,492,236z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 798 B |
86
smart-hut/public/img/lightOff.svg
Normal file
86
smart-hut/public/img/lightOff.svg
Normal file
|
|
@ -0,0 +1,86 @@
|
|||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
|
||||
<g>
|
||||
<g>
|
||||
<path d="M256,0c-8.284,0-15,6.716-15,15v32c0,8.284,6.716,15,15,15s15-6.716,15-15V15C271,6.716,264.284,0,256,0z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path d="M256,450c-8.284,0-15,6.716-15,15v32c0,8.284,6.716,15,15,15s15-6.716,15-15v-32C271,456.716,264.284,450,256,450z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path d="M119.529,98.315L96.901,75.687c-5.858-5.857-15.356-5.857-21.213,0c-5.858,5.858-5.858,15.356,0,21.213l22.628,22.628
|
||||
c2.928,2.929,6.767,4.394,10.606,4.394s7.678-1.465,10.607-4.394C125.387,113.67,125.387,104.172,119.529,98.315z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path d="M436.313,415.099l-22.628-22.628c-5.858-5.857-15.356-5.857-21.213,0c-5.858,5.858-5.858,15.356,0,21.213l22.628,22.628
|
||||
c2.928,2.929,6.767,4.394,10.606,4.394c3.839,0,7.678-1.465,10.607-4.394C442.171,430.454,442.171,420.956,436.313,415.099z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path d="M47,241H15c-8.284,0-15,6.716-15,15s6.716,15,15,15h32c8.284,0,15-6.716,15-15S55.284,241,47,241z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path d="M497,241h-32c-8.284,0-15,6.716-15,15s6.716,15,15,15h32c8.284,0,15-6.716,15-15S505.284,241,497,241z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path d="M119.529,392.471c-5.858-5.857-15.356-5.857-21.213,0l-22.628,22.628c-5.858,5.858-5.858,15.356,0,21.213
|
||||
c2.928,2.929,6.767,4.394,10.606,4.394s7.678-1.465,10.606-4.393l22.629-22.629C125.387,407.826,125.387,398.328,119.529,392.471z
|
||||
"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path d="M436.313,75.688c-5.858-5.857-15.356-5.857-21.213,0l-22.628,22.627c-5.858,5.858-5.858,15.356,0,21.213
|
||||
c2.928,2.929,6.767,4.394,10.606,4.394s7.678-1.465,10.607-4.393l22.628-22.628C442.171,91.043,442.171,81.545,436.313,75.688z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path d="M256,97c-87.673,0-159,71.327-159,159s71.327,159,159,159s159-71.327,159-159S343.673,97,256,97z M271,384.123V127.877
|
||||
c64.089,7.456,114,62.066,114,128.123S335.089,376.667,271,384.123z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.4 KiB |
63
smart-hut/public/img/lightOn.svg
Normal file
63
smart-hut/public/img/lightOn.svg
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
|
||||
<g>
|
||||
<path style="fill:#FFDE33;" d="M256,62c-8.284,0-15-6.716-15-15V15c0-8.284,6.716-15,15-15s15,6.716,15,15v32
|
||||
C271,55.284,264.284,62,256,62z"/>
|
||||
<path style="fill:#FFDE33;" d="M256,512c-8.284,0-15-6.716-15-15v-32c0-8.284,6.716-15,15-15s15,6.716,15,15v32
|
||||
C271,505.284,264.284,512,256,512z"/>
|
||||
<path style="fill:#FFDE33;" d="M108.922,123.922c-3.839,0-7.678-1.465-10.606-4.394L75.688,96.9
|
||||
c-5.858-5.857-5.858-15.355,0-21.213c5.857-5.857,15.355-5.857,21.213,0l22.628,22.628c5.858,5.857,5.858,15.355,0,21.213
|
||||
C116.6,122.457,112.761,123.922,108.922,123.922z"/>
|
||||
</g>
|
||||
<path style="fill:#FAA736;" d="M425.706,440.706c-3.839,0-7.678-1.465-10.606-4.394l-22.628-22.628
|
||||
c-5.858-5.857-5.858-15.355,0-21.213c5.857-5.857,15.355-5.857,21.213,0l22.628,22.628c5.858,5.857,5.858,15.355,0,21.213
|
||||
C433.384,439.241,429.545,440.706,425.706,440.706z"/>
|
||||
<path style="fill:#FFDE33;" d="M47,271H15c-8.284,0-15-6.716-15-15s6.716-15,15-15h32c8.284,0,15,6.716,15,15S55.284,271,47,271z"/>
|
||||
<path style="fill:#FAA736;" d="M497,271h-32c-8.284,0-15-6.716-15-15s6.716-15,15-15h32c8.284,0,15,6.716,15,15S505.284,271,497,271
|
||||
z"/>
|
||||
<path style="fill:#FFDE33;" d="M86.294,440.706c-3.839,0-7.678-1.465-10.606-4.394c-5.858-5.857-5.858-15.355,0-21.213
|
||||
l22.628-22.628c5.857-5.857,15.355-5.857,21.213,0s5.858,15.355,0,21.213L96.9,436.313
|
||||
C93.972,439.241,90.133,440.706,86.294,440.706z"/>
|
||||
<path style="fill:#FAA736;" d="M403.078,123.922c-3.839,0-7.678-1.465-10.606-4.394c-5.858-5.857-5.858-15.355,0-21.213
|
||||
L415.1,75.688c5.857-5.857,15.355-5.857,21.213,0s5.858,15.355,0,21.213l-22.628,22.628
|
||||
C410.756,122.457,406.917,123.922,403.078,123.922z"/>
|
||||
<path style="fill:#FFDE33;" d="M256,415c-87.673,0-159-71.327-159-159S168.327,97,256,97s159,71.327,159,159S343.673,415,256,415z"
|
||||
/>
|
||||
<g>
|
||||
<path style="fill:#FFBC33;" d="M415,256c0-87.673-71.327-159-159-159v318C343.673,415,415,343.673,415,256z"/>
|
||||
<path style="fill:#FFBC33;" d="M271,497v-32c0-8.284-6.716-15-15-15v62C264.284,512,271,505.284,271,497z"/>
|
||||
</g>
|
||||
<path style="fill:#FAA736;" d="M271,47V15c0-8.284-6.716-15-15-15v62C264.284,62,271,55.284,271,47z"/>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
2
smart-hut/public/img/settings.svg
Normal file
2
smart-hut/public/img/settings.svg
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
<?xml version="1.0"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="512px" viewBox="0 0 512 512" width="512px" class=""><g><path d="m499.953125 197.703125-39.351563-8.554687c-3.421874-10.476563-7.660156-20.695313-12.664062-30.539063l21.785156-33.886719c3.890625-6.054687 3.035156-14.003906-2.050781-19.089844l-61.304687-61.304687c-5.085938-5.085937-13.035157-5.941406-19.089844-2.050781l-33.886719 21.785156c-9.84375-5.003906-20.0625-9.242188-30.539063-12.664062l-8.554687-39.351563c-1.527344-7.03125-7.753906-12.046875-14.949219-12.046875h-86.695312c-7.195313 0-13.421875 5.015625-14.949219 12.046875l-8.554687 39.351563c-10.476563 3.421874-20.695313 7.660156-30.539063 12.664062l-33.886719-21.785156c-6.054687-3.890625-14.003906-3.035156-19.089844 2.050781l-61.304687 61.304687c-5.085937 5.085938-5.941406 13.035157-2.050781 19.089844l21.785156 33.886719c-5.003906 9.84375-9.242188 20.0625-12.664062 30.539063l-39.351563 8.554687c-7.03125 1.53125-12.046875 7.753906-12.046875 14.949219v86.695312c0 7.195313 5.015625 13.417969 12.046875 14.949219l39.351563 8.554687c3.421874 10.476563 7.660156 20.695313 12.664062 30.539063l-21.785156 33.886719c-3.890625 6.054687-3.035156 14.003906 2.050781 19.089844l61.304687 61.304687c5.085938 5.085937 13.035157 5.941406 19.089844 2.050781l33.886719-21.785156c9.84375 5.003906 20.0625 9.242188 30.539063 12.664062l8.554687 39.351563c1.527344 7.03125 7.753906 12.046875 14.949219 12.046875h86.695312c7.195313 0 13.421875-5.015625 14.949219-12.046875l8.554687-39.351563c10.476563-3.421874 20.695313-7.660156 30.539063-12.664062l33.886719 21.785156c6.054687 3.890625 14.003906 3.039063 19.089844-2.050781l61.304687-61.304687c5.085937-5.085938 5.941406-13.035157 2.050781-19.089844l-21.785156-33.886719c5.003906-9.84375 9.242188-20.0625 12.664062-30.539063l39.351563-8.554687c7.03125-1.53125 12.046875-7.753906 12.046875-14.949219v-86.695312c0-7.195313-5.015625-13.417969-12.046875-14.949219zm-152.160156 58.296875c0 50.613281-41.179688 91.792969-91.792969 91.792969s-91.792969-41.179688-91.792969-91.792969 41.179688-91.792969 91.792969-91.792969 91.792969 41.179688 91.792969 91.792969zm0 0" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/></g> </svg>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
|
|
@ -10,7 +10,6 @@
|
|||
<meta name="theme-color" content="#000000" />
|
||||
<meta name="description" content="Web site created using create-react-app" />
|
||||
<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
|
||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
||||
<!--
|
||||
manifest.json provides metadata used when your web app is installed on a
|
||||
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
||||
|
|
@ -43,4 +42,4 @@
|
|||
-->
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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));*/
|
||||
|
||||
|
|
|
|||
|
|
@ -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() {
|
|||
<Route path="/" exact component={Home}/>
|
||||
<Route path="/login" exact component={Login}/>
|
||||
<Route path="/signup" exact component={Signup}/>
|
||||
<Route path="/dashboard" exact component={Dashboard}/>
|
||||
</Switch>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
85
smart-hut/src/components/dashboard/DevicePanel.js
Normal file
85
smart-hut/src/components/dashboard/DevicePanel.js
Normal file
|
|
@ -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 (
|
||||
<div style={panelStyle}>
|
||||
<button style={editButtonStyle} onClick={this.editModeController}>Edit</button>
|
||||
<Grid doubling columns={5} divided="vertically">
|
||||
{devices.map((e, i) => {
|
||||
return (
|
||||
<Grid.Column key={i.toString()}>
|
||||
<Device device={e} edit={this.state.editMode}/>
|
||||
</Grid.Column>
|
||||
)
|
||||
})}
|
||||
<Grid.Column>
|
||||
<NewDevice/>
|
||||
</Grid.Column>
|
||||
</Grid>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
export default class DevicePanel extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
shownRoom: "All"
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Panel/>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
87
smart-hut/src/components/dashboard/devices/Device.js
Normal file
87
smart-hut/src/components/dashboard/devices/Device.js
Normal file
|
|
@ -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 (
|
||||
<StyledDiv>
|
||||
{this.props.edit ? (<span style={editModeStyle}><img src="/img/settings.svg" style={editModeIconStyle}/></span>) : ("")}
|
||||
<Sensor device={this.props.device}/>
|
||||
</StyledDiv>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<StyledDiv onClick={this.onClickDevice} style={{textAlign: "center"}}>
|
||||
{this.props.edit ? (<span style={editModeStyle}><img src="/img/settings.svg" style={editModeIconStyle}/></span>) : ("")}
|
||||
<Image src={this.state.icon} style={iconStyle}/>
|
||||
<h5 style={nameStyle}>{this.props.device.name}</h5>
|
||||
</StyledDiv>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
73
smart-hut/src/components/dashboard/devices/NewDevice.js
Normal file
73
smart-hut/src/components/dashboard/devices/NewDevice.js
Normal file
|
|
@ -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 (
|
||||
<StyledDiv onClick={this.onClickDevice} style={{textAlign: "center"}}>
|
||||
<Image src="/img/add.svg" style={{filter : "invert()"}}/>
|
||||
</StyledDiv>
|
||||
)
|
||||
}
|
||||
}
|
||||
67
smart-hut/src/components/dashboard/devices/Sensor.js
Normal file
67
smart-hut/src/components/dashboard/devices/Sensor.js
Normal file
|
|
@ -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 (
|
||||
<text x={x} y={y} style={style}>
|
||||
{Math.round(value * 100)}
|
||||
</text>
|
||||
)
|
||||
}
|
||||
|
||||
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 (
|
||||
<CircularInput
|
||||
value={value}
|
||||
onChange={setValue}
|
||||
style={style}
|
||||
>
|
||||
<CircularTrack/>
|
||||
<CircularProgress/>
|
||||
<CircularThumb/>
|
||||
|
||||
<text style={valueStyle} x={100} y={100} textAnchor="middle" dy="0.3em" fontWeight="bold">
|
||||
{Math.round(value * props.device.maxValue)}{props.device.units}
|
||||
</text>
|
||||
<text style={nameStyle} x={100} y={150} textAnchor="middle" dy="0.3em" fontWeight="bold">
|
||||
{props.device.name}
|
||||
</text>
|
||||
</CircularInput>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
13
smart-hut/src/components/dashboard/devices/TypesOfDevices.js
Normal file
13
smart-hut/src/components/dashboard/devices/TypesOfDevices.js
Normal file
|
|
@ -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
|
||||
};
|
||||
|
|
@ -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"
|
||||
}
|
||||
10
smart-hut/src/views/Dashboard.js
Normal file
10
smart-hut/src/views/Dashboard.js
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
import React from 'react';
|
||||
import DevicePanel from "../components/dashboard/DevicePanel";
|
||||
|
||||
export default function Dashboard(props){
|
||||
return(
|
||||
<div style={{height : "110vh"}}>
|
||||
<DevicePanel />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -3,7 +3,6 @@ import React, { Component } from 'react';
|
|||
import {
|
||||
Button,
|
||||
Container,
|
||||
Divider,
|
||||
Grid,
|
||||
Header,
|
||||
Icon,
|
||||
|
|
|
|||
|
|
@ -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 : ""
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,38 @@
|
|||
import React, {Component} from 'react';
|
||||
import React, {Component, useState} from 'react';
|
||||
|
||||
function Step1(props) {
|
||||
return <button onClick={() => props.setStep(props.step+1)}>Continue</button>
|
||||
}
|
||||
|
||||
|
||||
function Step2(props){
|
||||
return <button onClick={() => props.setStep(props.step+1)}>Continue 2</button>
|
||||
};
|
||||
|
||||
function Form(props){
|
||||
const [step, setStep] = useState(1);
|
||||
if(step === 0){
|
||||
return <Step1 step={step} setStep={setStep}/>
|
||||
}
|
||||
else if(step === 1){
|
||||
return <Step2 step={step} setStep={setStep}/>
|
||||
}
|
||||
return <h1>this is step: {step}</h1>
|
||||
};
|
||||
|
||||
export default class Signup extends Component{
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
step : 0,
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
return(
|
||||
"This is the register page"
|
||||
<Form/>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue