Merge branch 'dev' into 'master'

Milestone 1 deployment (attempt 1)

See merge request sa4-2020/the-sanmarinoes/frontend!78

.gitignore

@@ -0,0 +1,43 @@
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.next
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# If Packages have their independent repo
+# /packages
+
+# ignore log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.idea/
+.vscode/
+node_modules/
+build
+.DS_Store
+*.tgz
+my-app*
+template/src/__tests__/__snapshots__/
+lerna-debug.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+/.changelog
+.npm/
+dist

.gitlab-ci.yml

@@ -0,0 +1,47 @@
+image: node:latest
+
+stages:
+  - build
+  - test
+  - deploy
+
+cache:
+  paths:
+    - smart-hut/node_modules/
+
+install_dependencies:
+  stage: build
+  script:
+    - cd smart-hut
+    - yarn install
+  artifacts:
+    paths:
+      - smart-hut/node_modules/
+
+testing_testing:
+  stage: test
+  script:
+    - cd smart-hut
+    - yarn test
+
+smartHut_deploy:
+  stage: deploy
+  tags:
+    - dind
+  image: docker:latest
+  services:
+    - docker:dind
+  variables:
+    DOCKER_DRIVER: overlay
+  before_script:
+    - docker version
+    - docker info
+    - docker login -u smarthutsm -p $CI_DOCKER_PASS #GiovanniRoberto
+  script:
+    - "docker build -t smarthutsm/smarthut:${CI_COMMIT_BRANCH} ."
+    - "docker push smarthutsm/smarthut:${CI_COMMIT_BRANCH}"
+  after_script:
+    - docker logout
+  only:
+    - dev
+    - master

Dockerfile

@@ -0,0 +1,32 @@
+FROM node:9-alpine as builder
+
+RUN mkdir -p /usr/src/app
+WORKDIR /usr/src/app
+
+ENV PATH /usr/src/app/node_modules/.bin:$PATH
+
+COPY smart-hut/. /usr/src/app
+
+RUN npm install --silent
+RUN npm install react-scripts@1.1.1 -g --silent
+RUN npm run build
+
+
+FROM nginx:alpine
+
+# Install envsubst
+RUN apk add --no-cache gettext
+
+COPY --from=builder /usr/src/app/build /usr/share/nginx/html
+
+# Delete default config
+RUN rm -r /etc/nginx/conf.d && rm /etc/nginx/nginx.conf
+
+# Create folder for PID file
+RUN mkdir -p /run/nginx
+
+# Copy nginx config
+COPY nginx/nginx.conf /etc/nginx/nginx.template.conf
+
+EXPOSE 80
+ENTRYPOINT ["/bin/sh", "-c", "envsubst '${BACKEND_URL}' </etc/nginx/nginx.template.conf >/etc/nginx/nginx.conf && nginx -g 'daemon off;'"]

hooks/pre-commit.sh

@@ -0,0 +1,12 @@
+#!/bin/sh
+
+FILES=$(git diff --cached --name-only --diff-filter=ACMR "*.js" "*.jsx" | sed 's| |\\ |g')
+[ -z "$FILES" ] && exit 0
+
+# Prettify all selected files
+echo "$FILES" | xargs ./smart-hut/node_modules/.bin/prettier --write
+
+# Add back the modified/prettified files to staging
+echo "$FILES" | xargs git add
+
+exit 0

hooks/setup.sh

@@ -0,0 +1,14 @@
+#!/bin/sh
+
+git config --unset core.hooksPath
+
+if [[ -z $(which realpath) ]]; then
+    this_dir="$(pwd)/hooks"
+else
+    this_dir="$(dirname $(realpath "$0"))"
+fi
+
+hook_script="$this_dir/pre-commit.sh"
+ln -svf "$hook_script" "$this_dir/../.git/hooks/pre-commit"
+
+echo "Commit hook installed"

nginx/nginx.conf

@@ -0,0 +1,48 @@
+# vim: set ft=nginx ts=4 sw=4 et tw=80:
+
+include /etc/nginx/modules/*.conf;
+
+user  nginx;
+worker_processes  auto;
+
+error_log  /var/log/nginx/error.log warn;
+pid        /var/run/nginx.pid;
+
+pcre_jit on;
+
+events {
+    worker_connections  1024;
+}
+
+
+http {
+    include       /etc/nginx/mime.types;
+    default_type  application/octet-stream;
+
+    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
+                      '$status $body_bytes_sent "$http_referer" '
+                      '"$http_user_agent" "$http_x_forwarded_for"';
+
+    access_log  /var/log/nginx/access.log  main;
+
+    sendfile        on;
+
+    keepalive_timeout  65;
+
+    server {
+        listen 80;
+
+        root   /usr/share/nginx/html;
+        index  index.html index.htm;
+
+        location / {
+            sub_filter "__BACKEND_URL__" ${BACKEND_URL};
+            try_files $uri $uri/ /index.html;
+        }
+        error_page   500 502 503 504  /50x.html;
+
+        location = /50x.html {
+            root   /usr/share/nginx/html;
+        }
+    }
+}

smart-hut/.gitignore

@@ -0,0 +1,26 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# idea
+.idea

smart-hut/README.md

@@ -0,0 +1,68 @@
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `yarn start`
+
+Runs the app in the development mode.<br />
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.<br />
+You will also see any lint errors in the console.
+
+### `yarn test`
+
+Launches the test runner in the interactive watch mode.<br />
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+### `yarn build`
+
+Builds the app for production to the `build` folder.<br />
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.<br />
+Your app is ready to be deployed!
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
+### `yarn eject`
+
+**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+
+If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+
+Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+
+You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+
+## Learn More
+
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+
+To learn React, check out the [React documentation](https://reactjs.org/).
+
+### Code Splitting
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
+
+### Analyzing the Bundle Size
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
+
+### Making a Progressive Web App
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
+
+### Advanced Configuration
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
+
+### Deployment
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
+
+### `yarn build` fails to minify
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify

smart-hut/icons.txt

@@ -0,0 +1,65 @@
+1. Home
+'home'
+
+2. Bar
+'coffee', 'beer', 'glass martini'
+
+3. Filmroom
+'film', 'video'
+
+4. Musicroom
+'music', 'headphones'
+
+5. Office
+'fax', 'phone', 'laptop'
+
+6. Bathroom
+'bath', 'shower'
+
+7. Bedroom
+'bed', 'child'
+
+8. Garage
+'warehouse', 'car', 'bicycle', 'motorcycle'
+
+9. Cellar
+'archive', 'boxes', 'cubes'
+
+10. Game Room
+'chess', 'gamepad', 'futbol', 'table tennis'
+
+11. IT Rack
+'server'
+
+12. Livingroom
+'tv'
+
+13. Love Room
+'heart'
+
+14. Hobby Room
+'camera', 'trophy', 'wrench'
+
+15. Gallery
+'image'
+
+16. Library
+'book', 'university'
+
+17. Infirmary
+'medkit'
+
+18. Petroom
+'paw'
+
+19. Garden
+'tree'
+
+20. Kitchen
+'utensils'
+
+21. Toilette
+'female', 'male'
+
+22. Swimmingpool
+'life ring outline'

smart-hut/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "smart-hut",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@material-ui/core": "^4.9.4",
+    "@material-ui/icons": "^4.9.1",
+    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/react": "^9.3.2",
+    "@testing-library/user-event": "^7.1.2",
+    "axios": "^0.19.2",
+    "classnames": "^2.2.6",
+    "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-device-detect": "^1.11.14",
+    "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",
+    "styled-components": "^5.0.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "prettier": "2.0.1"
+  }
+}

smart-hut/public/img/add.svg

@@ -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>

smart-hut/public/img/buttonDimmer.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" enable-background="new 0 0 512 512" height="512px" viewBox="0 0 512 512" width="512px" class=""><g><path d="m150 461c0 11.046-8.954 20-20 20h-110c-11.046 0-20-8.954-20-20s8.954-20 20-20h110c11.046 0 20 8.954 20 20zm232-365h34v34c0 11.046 8.954 20 20 20s20-8.954 20-20v-34h36c11.046 0 20-8.954 20-20s-8.954-20-20-20h-36v-36c0-11.046-8.954-20-20-20s-20 8.954-20 20v36h-34c-11.046 0-20 8.954-20 20s8.954 20 20 20zm-52 47v226c0 40.804-33.196 74-74 74s-74-33.196-74-74v-226c0-40.804 33.196-74 74-74s74 33.196 74 74zm-40 0c0-18.748-15.252-34-34-34s-34 15.252-34 34v226c0 18.748 15.252 34 34 34s34-15.252 34-34zm148 93h-53c-11.046 0-20 8.954-20 20s8.954 20 20 20h53c18.748 0 34 15.252 34 34v128c0 18.748-15.252 34-34 34s-34-15.252-34-34v-102c0-11.046-8.954-20-20-20s-20 8.954-20 20v102c0 40.804 33.196 74 74 74s74-33.196 74-74v-128c0-40.804-33.196-74-74-74zm-306 0h-58c-18.748 0-34-15.252-34-34v-128c0-18.748 15.252-34 34-34s34 15.252 34 34v103c0 11.046 8.954 20 20 20s20-8.954 20-20v-103c0-40.804-33.196-74-74-74s-74 33.196-74 74v128c0 40.804 33.196 74 74 74h58c11.046 0 20-8.954 20-20s-8.954-20-20-20z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#1A2849"/></g> </svg>

smart-hut/public/img/dimmer.svg

@@ -0,0 +1 @@
+<svg id="icons" enable-background="new 0 0 64 64" height="512" viewBox="0 0 64 64" width="512" xmlns="http://www.w3.org/2000/svg"><path d="m62 6.005v51.99c0 2.2-1.8 4-4 4h-52c-2.2 0-4-1.8-4-4v-51.99c0-2.199 1.8-4 4-4h52c2.2 0 4 1.801 4 4zm-5 50.99v-50h-50v50z" fill="#fff"/><path d="m32 17.025c5.24 0 9.99 2.12 13.43 5.56 3.431 3.44 5.561 8.181 5.561 13.42v.011h-2.991v-.011c0-8.829-7.17-16-16-16s-16 7.171-16 16v.011h-2.98v-.011c0-5.239 2.121-9.979 5.561-13.409 3.429-3.441 8.179-5.571 13.419-5.571z" fill="#94c1ff"/><path d="m32 17.025c-5.24 0-9.99 2.13-13.42 5.57-3.439 3.43-5.561 8.17-5.561 13.409v.011h2.981v-.011c0-8.829 7.17-16 16-16s16 7.171 16 16v.011h2.99v-.011c0-5.239-2.13-9.979-5.561-13.42-3.439-3.438-8.189-5.559-13.429-5.559zm13 18.98c0-7.17-5.82-13-13-13-7.17 0-13 5.83-13 13 0 7.171 5.83 13 13 13 7.18 0 13-5.829 13-13zm12-29.01v50h-50v-50z" fill="#d7e9ff"/><path d="m32 25.995c1.109 0 2 .9 2 2 0 1.101-.891 2-2 2-1.1 0-2-.899-2-2 0-1.099.9-2 2-2z" fill="#d7e9ff"/><path d="m32 25.995c-1.1 0-2 .9-2 2 0 1.101.9 2 2 2 1.109 0 2-.899 2-2 0-1.099-.891-2-2-2zm0-2.99c7.18 0 13 5.83 13 13 0 7.171-5.82 13-13 13-7.17 0-13-5.829-13-13 0-7.17 5.83-13 13-13z" fill="#fff"/><g fill="#116fff"><path d="m57.999 62.999h-51.998c-2.757 0-5-2.243-5-5v-51.998c0-2.757 2.243-5 5-5h51.998c2.757 0 5 2.243 5 5v51.998c0 2.757-2.243 5-5 5zm-51.998-59.998c-1.654 0-3 1.346-3 3v51.998c0 1.654 1.346 3 3 3h51.998c1.654 0 3-1.346 3-3v-51.998c0-1.654-1.346-3-3-3z"/><path d="m57 58h-50c-.553 0-1-.447-1-1v-50c0-.553.447-1 1-1h50c.553 0 1 .447 1 1v50c0 .553-.447 1-1 1zm-49-2h48v-48h-48z"/><path d="m32 50.004c-7.72 0-14-6.281-14-14.001 0-7.719 6.28-13.999 14-13.999s14 6.28 14 13.999c0 7.72-6.28 14.001-14 14.001zm0-26c-6.617 0-12 5.383-12 11.999 0 6.617 5.383 12.001 12 12.001s12-5.384 12-12.001c0-6.616-5.383-11.999-12-11.999z"/><path d="m32 30.995c-1.654 0-3-1.346-3-3s1.346-3 3-3 3 1.346 3 3-1.346 3-3 3zm0-4c-.552 0-1 .448-1 1s.448 1 1 1 1-.448 1-1-.448-1-1-1z"/><path d="m50.983 37.003c-.553 0-1-.447-1-1 0-9.916-8.067-17.982-17.983-17.982s-17.983 8.066-17.983 17.982c0 .553-.447 1-1 1s-1-.447-1-1c0-11.019 8.965-19.982 19.983-19.982s19.983 8.964 19.983 19.982c0 .553-.447 1-1 1z"/><path d="m48 37.003c-.553 0-1-.447-1-1 0-8.271-6.729-14.999-15-14.999s-15 6.729-15 14.999c0 .553-.447 1-1 1s-1-.447-1-1c0-9.373 7.626-16.999 17-16.999s17 7.626 17 16.999c0 .553-.447 1-1 1z"/><path d="m32 19.021c-.553 0-1-.447-1-1v-1.017c0-.553.447-1 1-1s1 .447 1 1v1.017c0 .553-.447 1-1 1z"/><path d="m19.278 24.291c-.256 0-.512-.098-.707-.293l-.719-.719c-.391-.391-.391-1.023 0-1.414s1.023-.391 1.414 0l.719.719c.391.391.391 1.023 0 1.414-.195.195-.451.293-.707.293z"/><path d="m15.998 37.013h-3.006c-.553 0-1-.447-1-1s.447-1 1-1h3.006c.553 0 1 .447 1 1s-.447 1-1 1z"/><path d="m51.007 37.014h-3.007c-.553 0-1-.447-1-1s.447-1 1-1h3.007c.553 0 1 .447 1 1s-.447 1-1 1z"/><path d="m44.721 24.293c-.256 0-.512-.098-.707-.293-.391-.391-.391-1.023 0-1.414l.72-.72c.391-.391 1.023-.391 1.414 0s.391 1.023 0 1.414l-.72.72c-.196.195-.451.293-.707.293z"/><path d="m11.044 12.021c-.553 0-1.005-.447-1.005-1s.442-1 .994-1h.011c.552 0 1 .447 1 1s-.448 1-1 1z"/><path d="m11.044 54.017c-.553 0-1.005-.447-1.005-1s.442-1 .994-1h.011c.552 0 1 .447 1 1s-.448 1-1 1z"/><path d="m53.046 12.021c-.553 0-1.005-.447-1.005-1s.442-1 .994-1h.011c.552 0 1 .447 1 1s-.448 1-1 1z"/><path d="m53.046 54.017c-.553 0-1.005-.447-1.005-1s.442-1 .994-1h.011c.552 0 1 .447 1 1s-.448 1-1 1z"/></g></svg>

smart-hut/public/img/humidity-sensor.svg

@@ -0,0 +1 @@
+<svg id="Capa_1" enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><g id="XMLID_2040_"><circle id="XMLID_1170_" cx="210" cy="302" fill="#91def5" r="200"/><path id="XMLID_1252_" d="m310.911 116.754 84.079-106.754 84.079 106.754c33.55 42.598 29.941 103.557-8.401 141.899-41.796 41.796-109.561 41.796-151.357 0-38.342-38.342-41.951-99.301-8.4-141.899z" fill="#dff6fc"/><g id="XMLID_759_"><path id="XMLID_760_" d="m174.798 388.747c1.265.531 2.576.782 3.866.782 3.907 0 7.618-2.304 9.225-6.133l64.758-154.303c2.138-5.092-.259-10.953-5.351-13.09-5.095-2.138-10.954.258-13.091 5.351l-64.758 154.303c-2.137 5.092.259 10.953 5.351 13.09z"/><path id="XMLID_763_" d="m199.375 247.585c0-21.81-16.087-39.553-35.859-39.553s-35.858 17.743-35.858 39.553 16.086 39.553 35.858 39.553 35.859-17.744 35.859-39.553zm-35.859 19.552c-8.744 0-15.858-8.771-15.858-19.553s7.114-19.553 15.858-19.553c8.745 0 15.859 8.771 15.859 19.553s-7.114 19.553-15.859 19.553z"/><path id="XMLID_770_" d="m256.484 400.032c19.772 0 35.858-17.743 35.858-39.553s-16.086-39.553-35.858-39.553-35.859 17.743-35.859 39.553 16.087 39.553 35.859 39.553zm0-59.106c8.744 0 15.858 8.771 15.858 19.553s-7.114 19.553-15.858 19.553c-8.745 0-15.859-8.771-15.859-19.553s7.114-19.553 15.859-19.553z"/><path id="XMLID_773_" d="m486.926 110.567-84.079-106.754c-1.897-2.408-4.792-3.813-7.857-3.813s-5.96 1.405-7.855 3.813l-84.081 106.754c-.598.759-1.184 1.524-1.76 2.293-28.294-13.656-59.669-20.86-91.294-20.86-115.794 0-210 94.206-210 210s94.206 210 210 210c39.357 0 77.729-10.955 110.966-31.681 4.687-2.922 6.116-9.09 3.194-13.776-2.922-4.687-9.09-6.117-13.776-3.194-30.06 18.743-64.772 28.651-100.384 28.651-104.767 0-190-85.233-190-190s85.233-190 190-190c27.901 0 55.58 6.193 80.663 17.946-22.563 44.347-14.795 99.405 21.578 135.777 22.103 22.104 51.49 34.277 82.748 34.277 1.665 0 3.324-.042 4.978-.111.008.704.033 1.409.033 2.111 0 35.875-10.045 70.807-29.048 101.018-2.94 4.675-1.534 10.848 3.141 13.789 1.654 1.041 3.495 1.537 5.314 1.537 3.323 0 6.574-1.656 8.475-4.677 21.012-33.405 32.118-72.019 32.118-111.667 0-1.547-.039-3.102-.073-4.655 21.74-4.695 41.71-15.52 57.812-31.621 41.902-41.901 45.851-108.604 9.187-155.157zm-91.937 169.433c-25.916 0-50.281-10.092-68.606-28.418-34.741-34.74-38.016-90.043-7.616-128.64h-.001l76.225-96.779 76.223 96.779c30.399 38.597 27.125 93.9-7.616 128.641-18.327 18.325-42.692 28.417-68.609 28.417z"/><path id="XMLID_799_" d="m351.34 433.5c-2.64 0-5.22 1.07-7.07 2.93-1.859 1.86-2.93 4.44-2.93 7.07 0 2.64 1.07 5.21 2.93 7.08 1.86 1.86 4.431 2.92 7.07 2.92 2.63 0 5.2-1.06 7.07-2.92 1.859-1.87 2.93-4.44 2.93-7.08 0-2.63-1.07-5.21-2.93-7.07s-4.44-2.93-7.07-2.93z"/></g></g></svg>

smart-hut/public/img/humidityIcon.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 512.005 512.005" style="enable-background:new 0 0 512.005 512.005;" xml:space="preserve" width="512px" height="512px" class=""><g><g>
+	<g>
+		<g>
+			<path d="M327.159,2.766c-4.063-3.688-10.25-3.688-14.313,0c-4.642,4.186-110.889,101.292-160.228,213.839     c-5.318-1.867-11.44-3.266-19.355-3.266c-18.677,0-28.698,6.969-36.75,12.573c-7.031,4.896-12.583,8.76-24.573,8.76     c-11.969,0-17.521-3.865-24.542-8.75c-8.042-5.604-18.063-12.583-36.729-12.583c-5.896,0-10.667,4.771-10.667,10.667     c0,5.896,4.771,10.667,10.667,10.667c11.969,0,17.521,3.865,24.542,8.75c8.042,5.604,18.063,12.583,36.729,12.583     c18.677,0,28.708-6.979,36.76-12.583c7.031-4.885,12.583-8.75,24.563-8.75c12,0,17.563,3.865,24.604,8.76     c8.052,5.604,18.083,12.573,36.771,12.573c18.677,0,28.708-6.969,36.771-12.573c7.031-4.896,12.594-8.76,24.594-8.76     c5.896,0,10.667-4.771,10.667-10.667c0-5.896-4.771-10.667-10.667-10.667c-18.687,0-28.719,6.969-36.781,12.573     c-7.031,4.896-12.594,8.76-24.583,8.76c-11.208,0-16.823-3.419-23.242-7.854c40.121-92.661,123.661-177.466,148.607-201.49     c33.219,32.01,170.667,171.865,170.667,294.677c0,94.104-76.563,170.667-170.667,170.667c-42.477,0-82.669-15.822-113.78-43.758     c11.542-2.138,18.994-7.177,25.186-11.482c7.031-4.896,12.594-8.76,24.594-8.76c5.896,0,10.667-4.771,10.667-10.667     s-4.771-10.667-10.667-10.667c-18.687,0-28.719,6.969-36.781,12.573c-7.031,4.896-12.594,8.76-24.583,8.76     c-12,0-17.563-3.865-24.594-8.76c-8.063-5.604-18.094-12.573-36.781-12.573c-18.677,0-28.698,6.969-36.75,12.573     c-7.031,4.896-12.583,8.76-24.573,8.76c-11.969,0-17.521-3.865-24.542-8.75c-8.042-5.604-18.063-12.583-36.729-12.583     c-5.896,0-10.667,4.771-10.667,10.667s4.771,10.667,10.667,10.667c11.969,0,17.521,3.865,24.542,8.75     c8.042,5.604,18.063,12.583,36.729,12.583c18.677,0,28.708-6.979,36.76-12.583c7.031-4.885,12.583-8.75,24.563-8.75     c12,0,17.563,3.865,24.604,8.76c4.345,3.023,9.414,6.355,15.961,8.865c36.6,42.996,89.655,67.708,146.174,67.708     c105.865,0,192-86.135,192-192C512.003,171.641,334.701,9.589,327.159,2.766z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
+			<path d="M10.669,362.672c11.969,0,17.521,3.865,24.542,8.75c8.042,5.604,18.063,12.583,36.729,12.583     c5.896,0,10.667-4.771,10.667-10.667c0-5.896-4.771-10.667-10.667-10.667c-11.969,0-17.521-3.865-24.542-8.75     c-8.042-5.604-18.063-12.583-36.729-12.583c-5.896,0-10.667,4.771-10.667,10.667S4.773,362.672,10.669,362.672z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
+			<path d="M133.263,341.339c-5.896,0-10.667,4.771-10.667,10.667s4.771,10.667,10.667,10.667c12,0,17.563,3.865,24.594,8.76     c8.063,5.604,18.094,12.573,36.781,12.573c18.677,0,28.708-6.969,36.771-12.573c7.031-4.896,12.594-8.76,24.594-8.76     c12.198,0,18.406,3.969,26.25,8.99c9.052,5.781,19.313,12.344,37.75,12.344c5.896,0,10.667-4.771,10.667-10.667     c0-5.896-4.771-10.667-10.667-10.667c-12.198,0-18.406-3.969-26.25-8.99c-9.052-5.781-19.313-12.344-37.75-12.344     c-18.687,0-28.719,6.969-36.781,12.573c-7.031,4.896-12.594,8.76-24.583,8.76c-12,0-17.563-3.865-24.604-8.76     C161.982,348.307,151.951,341.339,133.263,341.339z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
+			<path d="M133.263,277.339c-18.677,0-28.698,6.969-36.75,12.573c-7.031,4.896-12.583,8.76-24.573,8.76     c-11.969,0-17.521-3.865-24.542-8.75c-8.042-5.604-18.063-12.583-36.729-12.583c-5.896,0-10.667,4.771-10.667,10.667     c0,5.896,4.771,10.667,10.667,10.667c11.969,0,17.521,3.865,24.542,8.75c8.042,5.604,18.063,12.583,36.729,12.583     c18.677,0,28.708-6.979,36.76-12.583c7.031-4.885,12.583-8.75,24.563-8.75c5.896,0,10.667-4.771,10.667-10.667     C143.93,282.109,139.159,277.339,133.263,277.339z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
+			<path d="M231.409,307.432c7.031-4.896,12.594-8.76,24.594-8.76c11.969,0,17.521,3.865,24.542,8.75     c8.042,5.604,18.063,12.583,36.729,12.583c18.677,0,28.708-6.979,36.76-12.583c7.031-4.885,12.583-8.75,24.563-8.75     c5.896,0,10.667-4.771,10.667-10.667c0-5.896-4.771-10.667-10.667-10.667c-18.677,0-28.698,6.969-36.75,12.573     c-7.031,4.896-12.583,8.76-24.573,8.76c-11.969,0-17.521-3.865-24.542-8.75c-8.042-5.604-18.063-12.583-36.729-12.583     c-18.687,0-28.719,6.969-36.781,12.573c-7.031,4.896-12.594,8.76-24.583,8.76c-5.896,0-10.667,4.771-10.667,10.667     s4.771,10.667,10.667,10.667C213.315,320.005,223.346,313.036,231.409,307.432z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
+		</g>
+	</g>
+</g></g> </svg>

smart-hut/public/img/intensity-light.svg

@@ -0,0 +1 @@
+<svg height="512pt" viewBox="-1 0 512 512" width="512pt" xmlns="http://www.w3.org/2000/svg"><path d="m255.128906 398.359375c-49.757812 0-90.234375-40.480469-90.234375-90.230469v-13.941406c0-8.429688 6.835938-15.265625 15.265625-15.265625h149.933594c8.429688 0 15.265625 6.835937 15.265625 15.265625v13.941406c0 49.75-40.480469 90.230469-90.230469 90.230469zm0 0" fill="#145180"/><path d="m330.089844 278.917969h-74.960938v119.441406c49.753906-.003906 90.230469-40.480469 90.230469-90.230469v-13.941406c0-8.433594-6.835937-15.269531-15.269531-15.269531zm0 0" fill="#082130"/><path d="m164.894531 294.1875v-57.515625c-28.894531-25.75-45.320312-62.191406-45.320312-101.121094 0-74.742187 60.808593-135.550781 135.554687-135.550781 74.742188 0 135.550782 60.808594 135.550782 135.550781 0 38.929688-16.425782 75.371094-45.320313 101.121094v57.515625zm0 0" fill="#fff04a"/><path d="m255.128906 0v294.1875h90.226563v-57.515625c28.898437-25.75 45.320312-62.191406 45.320312-101.121094 0-74.742187-60.804687-135.54687475-135.546875-135.550781zm0 0" fill="#ff961f"/><path d="m308.277344 126.613281c-5.960938-5.960937-15.628906-5.960937-21.589844 0l-31.558594 31.558594-31.558594-31.558594c-5.960937-5.964843-15.628906-5.964843-21.589843 0-5.964844 5.960938-5.964844 15.628907 0 21.589844l37.882812 37.882813v108.101562h30.53125v-108.101562l37.882813-37.882813c5.960937-5.960937 5.960937-15.628906 0-21.589844zm0 0" fill="#fff"/><path d="m286.6875 126.613281-31.558594 31.558594v136.015625h15.265625v-108.101562l37.882813-37.882813c5.960937-5.960937 5.960937-15.628906 0-21.589844-5.960938-5.960937-15.628906-5.960937-21.589844 0zm0 0" fill="#fff04a"/><path d="m494.992188 512h-479.726563c-8.429687 0-15.265625-6.835938-15.265625-15.265625v-51.90625c0-8.429687 6.835938-15.265625 15.265625-15.265625h479.726563c8.429687 0 15.265624 6.835938 15.265624 15.265625v51.90625c0 8.429687-6.832031 15.265625-15.265624 15.265625zm0 0" fill="#9ffeff"/><path d="m494.992188 429.5625h-239.863282v82.4375h239.863282c8.429687 0 15.265624-6.835938 15.265624-15.265625v-51.90625c0-8.429687-6.832031-15.265625-15.265624-15.265625zm0 0" fill="#78e3f6"/><path d="m494.992188 429.5625h-121.882813v82.4375h121.882813c8.429687 0 15.265624-6.835938 15.265624-15.265625v-51.90625c0-8.429687-6.832031-15.265625-15.265624-15.265625zm0 0" fill="#082130"/><path d="m494.992188 370.03125h-56.660157c-8.429687 0-15.265625-6.835938-15.265625-15.269531 0-8.429688 6.835938-15.265625 15.265625-15.265625h56.660157c8.429687 0 15.265624 6.835937 15.265624 15.265625 0 8.433593-6.832031 15.269531-15.265624 15.269531zm0 0" fill="#082130"/><path d="m71.925781 339.496094h-13.0625v-13.0625c0-8.429688-6.835937-15.265625-15.265625-15.265625-8.433594 0-15.269531 6.835937-15.269531 15.265625v13.0625h-13.0625c-8.429687 0-15.265625 6.835937-15.265625 15.265625 0 8.433593 6.835938 15.269531 15.265625 15.269531h13.0625v13.0625c0 8.429688 6.835937 15.265625 15.269531 15.265625 8.429688 0 15.265625-6.835937 15.265625-15.265625v-13.0625h13.0625c8.429688 0 15.265625-6.835938 15.265625-15.269531 0-8.429688-6.832031-15.265625-15.265625-15.265625zm0 0" fill="#145180"/></svg>

smart-hut/public/img/intensityLightIcon.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" height="512px" viewBox="0 -1 512 512" width="512px" class=""><g><path d="m141.554688 114.441406c0 34.976563 15.71875 67.589844 43.128906 89.46875 3.640625 2.90625 5.761718 7.3125 5.761718 11.972656v54.371094h50.238282v-101.769531l-41.207032-41.207031c-5.984374-5.980469-5.984374-15.679688 0-21.664063 5.980469-5.980469 15.679688-5.980469 21.664063 0l34.859375 34.859375 34.855469-34.859375c5.984375-5.980469 15.683593-5.980469 21.664062 0 5.984375 5.980469 5.984375 15.679688 0 21.664063l-41.199219 41.203125v101.773437h50.226563v-54.371094c0-4.660156 2.121094-9.066406 5.761719-11.972656 27.410156-21.882812 43.128906-54.492187 43.128906-89.46875 0-63.101562-51.339844-114.441406-114.441406-114.441406-63.101563 0-114.441406 51.339844-114.441406 114.441406zm0 0" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFD31D"/><path d="m190.445312 300.890625c.148438 36.019531 29.5 65.273437 65.550782 65.273437 36.054687 0 65.402344-29.253906 65.550781-65.273437zm0 0" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFD31D"/><path d="m496.679688 428.113281h-91.660157v82.71875h91.660157c8.460937 0 15.320312-6.859375 15.320312-15.320312v-52.082031c0-8.460938-6.859375-15.316407-15.320312-15.316407zm0 0" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFD31D"/><path d="m374.382812 428.113281h-359.0625c-8.460937 0-15.320312 6.855469-15.320312 15.316407v52.082031c0 8.460937 6.859375 15.320312 15.320312 15.320312h359.0625zm0 0" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFD31D"/><path d="m15.320312 368.375h13.105469v13.109375c0 8.457031 6.859375 15.316406 15.320313 15.316406 8.460937 0 15.316406-6.859375 15.316406-15.316406v-13.109375h13.109375c8.457031 0 15.316406-6.859375 15.316406-15.316406 0-8.460938-6.859375-15.320313-15.316406-15.320313h-13.109375v-13.105469c0-8.460937-6.855469-15.320312-15.316406-15.320312-8.460938 0-15.320313 6.859375-15.320313 15.320312v13.105469h-13.105469c-8.460937 0-15.320312 6.859375-15.320312 15.320313 0 8.457031 6.859375 15.316406 15.320312 15.316406zm0 0" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFD31D"/><path d="m439.828125 368.375h56.851563c8.460937 0 15.320312-6.859375 15.320312-15.316406 0-8.460938-6.859375-15.320313-15.320312-15.320313h-56.851563c-8.457031 0-15.316406 6.859375-15.316406 15.320313 0 8.457031 6.859375 15.316406 15.316406 15.316406zm0 0" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFD31D"/></g> </svg>

smart-hut/public/img/knob.svg

@@ -0,0 +1 @@
+<svg height="512pt" viewBox="0 0 512 512" width="512pt" xmlns="http://www.w3.org/2000/svg"><path d="m256 512c-111.382812 0-202-90.617188-202-202s90.617188-202 202-202 202 90.617188 202 202-90.617188 202-202 202zm0 0" fill="#004fc4"/><path d="m256 108v404c111.382812 0 202-90.617188 202-202s-90.617188-202-202-202zm0 0" fill="#003480"/><path d="m256 452c-78.300781 0-142-63.699219-142-142s63.699219-142 142-142 142 63.699219 142 142-63.699219 142-142 142zm0 0" fill="#47f5ff"/><path d="m398 310c0-78.300781-63.699219-142-142-142v284c78.300781 0 142-63.699219 142-142zm0 0" fill="#69a7ff"/><path d="m415.804688 96.191406c-42.683594-42.683594-99.4375-66.191406-159.804688-66.191406s-117.121094 23.507812-159.804688 66.191406l-21.214843-21.210937c48.351562-48.351563 112.640625-74.980469 181.019531-74.980469s132.667969 26.628906 181.019531 74.980469zm0 0" fill="#fee362"/><path d="m0 130h90v30h-90zm0 0" fill="#003480"/><path d="m512 130h-30v-30h-30v30h-30v30h30v30h30v-30h30zm0 0" fill="#001739"/><path d="m345.191406 199.59375-55.957031 55.957031 21.214844 21.214844 55.957031-55.957031c-6.308594-7.792969-13.421875-14.90625-21.214844-21.214844zm0 0" fill="#bb266d"/><path d="m415.804688 96.191406 21.214843-21.210937c-48.351562-48.351563-112.640625-74.980469-181.019531-74.980469v30c60.367188 0 117.121094 23.507812 159.804688 66.191406zm0 0" fill="#ffcb00"/></svg>

smart-hut/public/img/knobDimmer.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512px" height="512px"><g><g id="_12-home" data-name="12-home"><g id="glyph"><circle cx="202" cy="460" r="4" data-original="#000000" class="active-path" data-old_color="#000000" fill="#1A2849"/><circle cx="310" cy="428" r="4" data-original="#000000" class="active-path" data-old_color="#000000" fill="#1A2849"/><circle cx="140" cy="364" r="4" data-original="#000000" class="active-path" data-old_color="#000000" fill="#1A2849"/><path d="M264.485,67.515a12,12,0,0,0-16.97,0L188,127.03V108a12,12,0,0,0-12-12H80a12,12,0,0,0-12,12V247.03L7.515,307.515A12,12,0,0,0,16,328H68V496a12,12,0,0,0,12,12H432a12,12,0,0,0,12-12V328h52a12,12,0,0,0,8.485-20.485ZM136.8,391.821a28,28,0,1,1,8.061-55.39L162,297.477V204a12,12,0,0,1,12-12h0a12,12,0,0,1,12,12v96a12,12,0,0,1-1.016,4.833l-20.259,46.044A27.991,27.991,0,0,1,136.8,391.821ZM244,380a12,12,0,0,1-.707,4.059L222.75,441.221a27.987,27.987,0,1,1-22.2-9.183L220,377.909V156a12,12,0,0,1,12-12h0a12,12,0,0,1,12,12Zm62.777,75.819a27.985,27.985,0,0,1-17.563-46.557l-19.947-39.894A12.007,12.007,0,0,1,268,364V124a12,12,0,0,1,12-12h0a12,12,0,0,1,12,12V361.167l19.435,38.87a28,28,0,1,1-4.658,55.782ZM334.15,343.94A28,28,0,0,1,324,290.707V204a12,12,0,0,1,12-12h0a12,12,0,0,1,12,12v86.707a28,28,0,0,1-13.85,53.233Z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#1A2849"/><circle cx="336" cy="316" r="4" data-original="#000000" class="active-path" data-old_color="#000000" fill="#1A2849"/><path d="M352,124a36.04,36.04,0,0,1,36,36,12,12,0,0,0,24,0,60.068,60.068,0,0,0-60-60,12,12,0,0,0,0,24Z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#1A2849"/><path d="M352,76a84.1,84.1,0,0,1,84,84,12,12,0,0,0,24,0A108.123,108.123,0,0,0,352,52a12,12,0,0,0,0,24Z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#1A2849"/><path d="M352,28c72.785,0,132,59.215,132,132a12,12,0,0,0,24,0C508,73.981,438.019,4,352,4a12,12,0,0,0,0,24Z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#1A2849"/></g></g></g> </svg>

smart-hut/public/img/light-sensor.svg

@@ -0,0 +1 @@
+<svg height="512pt" viewBox="0 0 512 512" width="512pt" xmlns="http://www.w3.org/2000/svg"><path d="m256 394.414062c-77.425781 0-140.414062-62.988281-140.414062-140.410156 0-77.425781 62.988281-140.414062 140.414062-140.414062s140.414062 62.988281 140.414062 140.414062c0 77.421875-62.988281 140.410156-140.414062 140.410156zm0 0" fill="#ffe645"/><path d="m256 113.589844c-.003906 0-.007812 0-.007812 0v280.824218h.007812c77.425781 0 140.414062-62.988281 140.414062-140.410156 0-77.425781-62.988281-140.414062-140.414062-140.414062zm0 0" fill="#a19d8d"/><path d="m256 512c-8.285156 0-15-6.714844-15-15v-56c0-8.28125 6.714844-15 15-15s15 6.71875 15 15v56c0 8.285156-6.714844 15-15 15zm0 0" fill="#ffe645"/><path d="m497 271h-54.011719c-8.285156 0-15-6.714844-15-15 0-8.28125 6.714844-15 15-15h54.011719c8.285156 0 15 6.71875 15 15 0 8.285156-6.714844 15-15 15zm0 0" fill="#ffcf2c"/><path d="m69.011719 271h-54.011719c-8.285156 0-15-6.714844-15-15 0-8.28125 6.714844-15 15-15h54.011719c8.285156 0 15 6.71875 15 15 0 8.285156-6.714844 15-15 15zm0 0" fill="#ffe645"/><path d="m418.839844 176.996094c-5.183594 0-10.226563-2.691406-13.003906-7.503906-4.140626-7.171876-1.683594-16.347657 5.492187-20.488282l45.882813-26.492187c7.175781-4.144531 16.351562-1.683594 20.492187 5.492187 4.140625 7.171875 1.683594 16.347656-5.492187 20.488282l-45.882813 26.492187c-2.363281 1.363281-4.941406 2.011719-7.488281 2.011719zm0 0" fill="#ffcf2c"/><g fill="#ffe645"><path d="m48.140625 391.019531c-5.183594 0-10.226563-2.691406-13.003906-7.503906-4.144531-7.171875-1.683594-16.347656 5.488281-20.488281l46.785156-27.011719c7.175782-4.144531 16.347656-1.683594 20.488282 5.492187 4.144531 7.171876 1.6875 16.347657-5.488282 20.488282l-46.785156 27.011718c-2.359375 1.363282-4.941406 2.011719-7.484375 2.011719zm0 0"/><path d="m136.332031 478.246094c-2.542969 0-5.121093-.644532-7.484375-2.011719-7.175781-4.140625-9.632812-13.316406-5.492187-20.488281l27.007812-46.777344c4.140625-7.171875 13.316407-9.632812 20.488281-5.488281 7.175782 4.140625 9.632813 13.316406 5.492188 20.488281l-27.007812 46.777344c-2.777344 4.8125-7.820313 7.5-13.003907 7.5zm0 0"/><path d="m93.160156 176.996094c-2.546875 0-5.125-.648438-7.484375-2.011719l-46.78125-27.007813c-7.171875-4.140624-9.632812-13.316406-5.488281-20.492187 4.140625-7.171875 13.3125-9.632813 20.488281-5.488281l46.78125 27.007812c7.171875 4.140625 9.628907 13.316406 5.488281 20.488282-2.777343 4.8125-7.820312 7.503906-13.003906 7.503906zm0 0"/></g><path d="m464.699219 391.503906c-2.546875 0-5.125-.648437-7.488281-2.011718l-47.617188-27.492188c-7.171875-4.144531-9.628906-13.316406-5.488281-20.492188 4.140625-7.171874 13.316406-9.632812 20.488281-5.488281l47.617188 27.492188c7.175781 4.140625 9.632812 13.316406 5.492187 20.488281-2.777344 4.8125-7.820313 7.503906-13.003906 7.503906zm0 0" fill="#ffcf2c"/><path d="m375.667969 478.246094c-5.1875 0-10.226563-2.6875-13.003907-7.5l-27.003906-46.769532c-4.140625-7.175781-1.683594-16.347656 5.492188-20.488281 7.171875-4.144531 16.347656-1.6875 20.488281 5.488281l27.003906 46.769532c4.140625 7.175781 1.683594 16.347656-5.492187 20.488281-2.363282 1.367187-4.941406 2.011719-7.484375 2.011719zm0 0" fill="#ffcf2c"/><path d="m256 84c-8.285156 0-15-6.714844-15-15v-54c0-8.285156 6.714844-15 15-15s15 6.714844 15 15v54c0 8.285156-6.714844 15-15 15zm0 0" fill="#ffe645"/><path d="m348.632812 108.535156c-2.542968 0-5.125-.648437-7.484374-2.015625-7.175782-4.140625-9.632813-13.3125-5.492188-20.488281l27.007812-46.773438c4.140626-7.175781 13.3125-9.636718 20.488282-5.492187 7.175781 4.140625 9.632812 13.316406 5.492187 20.492187l-27.007812 46.773438c-2.777344 4.8125-7.820313 7.503906-13.003907 7.503906zm0 0" fill="#ffcf2c"/><path d="m163.363281 108.527344c-5.183593 0-10.226562-2.691406-13.003906-7.503906l-27.003906-46.765626c-4.140625-7.175781-1.683594-16.351562 5.492187-20.492187 7.171875-4.144531 16.347656-1.683594 20.488282 5.492187l27.003906 46.765626c4.140625 7.175781 1.683594 16.347656-5.492188 20.492187-2.359375 1.363281-4.941406 2.011719-7.484375 2.011719zm0 0" fill="#ffe645"/><path d="m256 426c-.003906 0-.007812 0-.007812 0v86h.007812c8.285156 0 15-6.714844 15-15v-56c0-8.28125-6.714844-15-15-15zm0 0" fill="#ffcf2c"/><path d="m256 0c-.003906 0-.007812 0-.007812 0v84h.007812c8.285156 0 15-6.714844 15-15v-54c0-8.285156-6.714844-15-15-15zm0 0" fill="#ffcf2c"/></svg>

smart-hut/public/img/lightOff.svg

@@ -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>

smart-hut/public/img/lightOn.svg

@@ -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>

smart-hut/public/img/lightSensorIcon.svg

@@ -0,0 +1,58 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve" width="512px" height="512px" class=""><g><g>
+	<g>
+		<rect x="241" width="30" height="56" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
+	</g>
+</g><g>
+	<g>
+		<rect x="389.218" y="79.775" transform="matrix(0.7071 -0.7071 0.7071 0.7071 55.1847 322.7765)" width="55.999" height="30" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
+	</g>
+</g><g>
+	<g>
+		<rect x="456" y="241" width="56" height="30" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
+	</g>
+</g><g>
+	<g>
+		<rect x="402.22" y="389.213" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -172.8129 417.2178)" width="30" height="55.999" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
+	</g>
+</g><g>
+	<g>
+		<rect x="241" y="456" width="30" height="56" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
+	</g>
+</g><g>
+	<g>
+		<rect x="66.783" y="402.215" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -267.2545 189.221)" width="55.999" height="30" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
+	</g>
+</g><g>
+	<g>
+		<rect y="241" width="56" height="30" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
+	</g>
+</g><g>
+	<g>
+		<rect x="79.779" y="66.777" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -39.2574 94.7787)" width="30" height="55.999" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
+	</g>
+</g><g>
+	<g>
+		<path d="M373.5,271v90.174c21.892-24.433,36.293-55.704,39.559-90.174H373.5z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
+	</g>
+</g><g>
+	<g>
+		<path d="M256,98.224c-81.939,0-149.479,62.788-157.059,142.776h314.118C405.479,161.012,337.939,98.224,256,98.224z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
+	</g>
+</g><g>
+	<g>
+		<path d="M305.167,271v134.922c13.696-4.502,26.571-10.829,38.333-18.698V271H305.167z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
+	</g>
+</g><g>
+	<g>
+		<path d="M98.941,271c3.266,34.47,17.667,65.741,39.559,90.174V271H98.941z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
+	</g>
+</g><g>
+	<g>
+		<path d="M236.833,271v141.61c6.285,0.765,12.68,1.167,19.167,1.167s12.882-0.402,19.167-1.167V271H236.833z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
+	</g>
+</g><g>
+	<g>
+		<path d="M168.5,271v116.224c11.762,7.869,24.637,14.196,38.333,18.698V271H168.5z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
+	</g>
+</g></g> </svg>

smart-hut/public/img/motionSensorIcon.svg

@@ -0,0 +1,62 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve" width="512px" height="512px" class=""><g><g>
+	<g>
+		<path d="M418.998,498.791l-25.075-73.998c-1.375-4.06-5.185-6.791-9.471-6.791h-1.455v-145.01    c0-70.026-56.97-126.997-126.997-126.997s-126.997,56.97-126.997,126.997v145.01h-1.455c-4.286,0-8.096,2.731-9.471,6.791    l-25.074,73.998c-1.035,3.053-0.534,6.416,1.344,9.036c1.878,2.619,4.903,4.173,8.127,4.173h307.053    c3.224,0,6.249-1.554,8.127-4.173C419.532,505.207,420.033,501.844,418.998,498.791z M149.003,272.993    c0-58.998,47.999-106.997,106.997-106.997c58.998,0,106.997,47.999,106.997,106.997v145.01H149.003V272.993z M116.421,492.001    l18.297-53.998h242.563l18.298,53.998H116.421z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
+	</g>
+</g><g>
+	<g>
+		<path d="M256,0c-5.522,0-10,4.478-10,10v59.999c0,5.522,4.477,10,10,10c5.522,0,10-4.478,10-10V10C266,4.478,261.522,0,256,0z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
+	</g>
+</g><g>
+	<g>
+		<path d="M263.069,101.884c-1.859-1.86-4.439-2.92-7.069-2.92s-5.21,1.06-7.07,2.92c-1.86,1.87-2.93,4.439-2.93,7.08    c0,2.63,1.069,5.2,2.93,7.07c1.86,1.859,4.44,2.92,7.07,2.92s5.21-1.061,7.069-2.92c1.86-1.87,2.931-4.44,2.931-7.07    C266,106.323,264.93,103.754,263.069,101.884z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
+	</g>
+</g><g>
+	<g>
+		<path d="M95.504,267.66H49.587c-5.522,0-10,4.478-10,10s4.478,10,10,10h45.918c5.522,0,10-4.478,10-10    S101.026,267.66,95.504,267.66z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
+	</g>
+</g><g>
+	<g>
+		<path d="M17.076,270.59c-1.859-1.861-4.439-2.93-7.069-2.93s-5.21,1.069-7.07,2.93c-1.86,1.861-2.93,4.44-2.93,7.07    s1.069,5.21,2.93,7.069c1.86,1.86,4.44,2.931,7.07,2.931s5.21-1.07,7.069-2.931c1.86-1.859,2.931-4.439,2.931-7.069    S18.936,272.45,17.076,270.59z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
+	</g>
+</g><g>
+	<g>
+		<path d="M188.673,88.988l-13.554-32.721c-2.114-5.102-7.963-7.521-13.066-5.412c-5.103,2.114-7.525,7.964-5.412,13.066    l13.554,32.721c1.596,3.851,5.319,6.176,9.243,6.176c1.275,0,2.571-0.246,3.823-0.764    C188.364,99.939,190.786,94.089,188.673,88.988z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
+	</g>
+</g><g>
+	<g>
+		<path d="M74.981,191.855L42.26,178.301c-5.104-2.108-10.952,0.311-13.066,5.412c-2.113,5.103,0.31,10.952,5.412,13.066    l32.721,13.554c1.252,0.517,2.548,0.764,3.823,0.764c3.924,0,7.647-2.325,9.243-6.176    C82.506,199.818,80.083,193.969,74.981,191.855z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
+	</g>
+</g><g>
+	<g>
+		<path d="M466.58,267.66h-45.918c-5.522,0-10,4.478-10,10s4.478,10,10,10h45.918c5.522,0,10-4.478,10-10    S472.102,267.66,466.58,267.66z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
+	</g>
+</g><g>
+	<g>
+		<path d="M509.062,270.59c-1.859-1.86-4.439-2.93-7.069-2.93s-5.21,1.069-7.07,2.93s-2.93,4.44-2.93,7.07s1.069,5.21,2.93,7.069    c1.86,1.86,4.44,2.931,7.07,2.931s5.21-1.07,7.069-2.931c1.86-1.859,2.931-4.439,2.931-7.069S510.923,272.45,509.062,270.59z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
+	</g>
+</g><g>
+	<g>
+		<path d="M453.748,79.909c-3.906-3.904-10.236-3.904-14.143,0l-49.203,49.204c-3.905,3.905-3.905,10.237,0,14.143    c1.954,1.953,4.513,2.929,7.072,2.929c2.56,0,5.118-0.977,7.071-2.929l49.203-49.204    C457.652,90.147,457.652,83.815,453.748,79.909z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
+	</g>
+</g><g>
+	<g>
+		<path d="M121.596,129.113L72.393,79.911c-3.906-3.904-10.236-3.904-14.143,0c-3.905,3.905-3.905,10.237,0,14.143l49.204,49.203    c1.953,1.952,4.512,2.929,7.071,2.929c2.559,0,5.118-0.977,7.071-2.929C125.501,139.351,125.501,133.019,121.596,129.113z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
+	</g>
+</g><g>
+	<g>
+		<path d="M349.945,50.855c-5.103-2.108-10.952,0.311-13.066,5.412l-13.554,32.721c-2.113,5.102,0.31,10.951,5.412,13.066    c1.252,0.518,2.548,0.764,3.823,0.764c3.924,0,7.647-2.325,9.243-6.176l13.554-32.721    C357.47,58.817,355.047,52.969,349.945,50.855z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
+	</g>
+</g><g>
+	<g>
+		<path d="M482.805,183.713c-2.114-5.103-7.963-7.522-13.066-5.412l-32.721,13.554c-5.103,2.114-7.525,7.964-5.412,13.066    c1.596,3.851,5.319,6.176,9.243,6.176c1.275,0,2.571-0.246,3.823-0.764l32.721-13.554    C482.496,194.665,484.918,188.815,482.805,183.713z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
+	</g>
+</g><g>
+	<g>
+		<path d="M256,209.008c-16.542,0-29.999,13.458-29.999,29.999v47.999c0,16.542,13.458,29.999,29.999,29.999    s29.999-13.458,29.999-29.999v-47.999C285.999,222.466,272.542,209.008,256,209.008z M266,287.006c0,5.514-4.486,10-10,10    s-10-4.486-10-10v-47.999c0-5.514,4.486-10,10-10s10,4.486,10,10V287.006z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
+	</g>
+</g><g>
+	<g>
+		<path d="M256,337.005c-16.542,0-29.999,13.458-29.999,29.999c0,16.542,13.458,29.999,29.999,29.999s29.999-13.458,29.999-29.999    C285.999,350.462,272.542,337.005,256,337.005z M256,377.004c-5.514,0-10-4.486-10-10s4.486-10,10-10s10,4.486,10,10    S261.514,377.004,256,377.004z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
+	</g>
+</g></g> </svg>

smart-hut/public/img/plusminus.svg

@@ -0,0 +1 @@
+<svg id="Layer" enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><path d="m437.02 74.98c-48.35-48.35-112.64-74.98-181.02-74.98s-132.67 26.63-181.02 74.98-74.98 112.64-74.98 181.02 26.63 132.67 74.98 181.02 112.64 74.98 181.02 74.98 132.67-26.63 181.02-74.98 74.98-112.64 74.98-181.02-26.63-132.67-74.98-181.02z" fill="#f0eaea"/><path d="m512 256c0 68.38-26.63 132.67-74.98 181.02s-112.64 74.98-181.02 74.98-132.67-26.63-181.02-74.98l362.04-362.04c48.35 48.35 74.98 112.64 74.98 181.02z" fill="#dccfcf"/><g fill="#00e1d7"><path d="m208 152h-16v-16c0-13.255-10.745-24-24-24s-24 10.745-24 24v16h-16c-13.255 0-24 10.745-24 24s10.745 24 24 24h16v16c0 13.255 10.745 24 24 24s24-10.745 24-24v-16h16c13.255 0 24-10.745 24-24s-10.745-24-24-24z"/><path d="m384 312h-80c-13.255 0-24 10.745-24 24s10.745 24 24 24h80c13.255 0 24-10.745 24-24s-10.745-24-24-24z"/></g></svg>

smart-hut/public/img/refresh.svg

@@ -0,0 +1,42 @@
+<?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 341.333 341.333" style="enable-background:new 0 0 341.333 341.333;" xml:space="preserve">
+<g>
+	<g>
+		<path d="M341.227,149.333V0l-50.133,50.133C260.267,19.2,217.707,0,170.56,0C76.267,0,0.107,76.373,0.107,170.667
+			s76.16,170.667,170.453,170.667c79.467,0,146.027-54.4,164.907-128h-44.373c-17.6,49.707-64.747,85.333-120.533,85.333
+			c-70.72,0-128-57.28-128-128s57.28-128,128-128c35.307,0,66.987,14.72,90.133,37.867l-68.8,68.8H341.227z"/>
+	</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>

smart-hut/public/img/sensorOff.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><g><path d="m437.066 74.981c-5.857-5.858-15.355-5.858-21.213 0s-5.858 15.355 0 21.213c42.656 42.655 66.147 99.409 66.147 159.806s-23.491 117.151-66.147 159.806c-5.858 5.857-5.858 15.355 0 21.213 5.868 5.868 15.365 5.848 21.213 0 48.322-48.321 74.934-112.608 74.934-181.019s-26.612-132.698-74.934-181.019z"/><path d="m391.646 120.4c-5.858-5.857-15.356-5.857-21.213 0-5.857 5.858-5.857 15.355 0 21.213 30.533 30.531 47.349 71.155 47.349 114.387s-16.815 83.855-47.349 114.387c-5.858 5.858-5.858 15.355 0 21.213 5.856 5.856 15.353 5.859 21.213 0 36.2-36.198 56.136-84.355 56.136-135.601s-19.937-99.402-56.136-135.599z"/><path d="m346.193 165.852c-5.858-5.857-15.356-5.857-21.213 0-5.858 5.858-5.857 15.356 0 21.213 18.4 18.398 28.533 42.88 28.533 68.934s-10.133 50.536-28.533 68.934c-5.858 5.857-5.858 15.355 0 21.213 5.857 5.857 15.354 5.859 21.213 0 24.066-24.065 37.32-56.08 37.32-90.148s-13.254-66.081-37.32-90.146z"/><path d="m30 256c0-60.397 23.491-117.151 66.147-159.806 5.858-5.857 5.858-15.355 0-21.213-5.857-5.857-15.354-5.858-21.213 0-48.322 48.321-74.934 112.608-74.934 181.019s26.612 132.698 74.934 181.019c5.856 5.857 15.355 5.859 21.213 0 5.858-5.858 5.858-15.355 0-21.213-42.656-42.655-66.147-99.409-66.147-159.806z"/><path d="m94.219 256c0-43.232 16.815-83.855 47.349-114.387 5.858-5.858 5.858-15.355 0-21.213-5.857-5.858-15.355-5.857-21.213 0-36.2 36.197-56.136 84.355-56.136 135.6s19.936 99.403 56.136 135.601c5.866 5.865 15.363 5.85 21.213 0 5.857-5.858 5.857-15.355 0-21.213-30.534-30.532-47.349-71.156-47.349-114.388z"/><path d="m187.021 165.853c-5.857-5.858-15.355-5.858-21.213 0-24.066 24.065-37.32 56.08-37.32 90.148s13.254 66.083 37.32 90.148c5.866 5.865 15.363 5.85 21.213 0 5.858-5.858 5.857-15.356 0-21.213-18.4-18.398-28.533-42.88-28.533-68.934s10.133-50.536 28.533-68.934c5.857-5.859 5.857-15.357 0-21.215z"/><path d="m256 192.8c-34.849 0-63.2 28.352-63.2 63.2s28.352 63.2 63.2 63.2 63.2-28.352 63.2-63.2-28.351-63.2-63.2-63.2z"/></g></svg>

smart-hut/public/img/sensorOn.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><g><path d="m415.853 437.019c-5.858-5.858-5.858-15.355 0-21.213 42.656-42.655 66.147-99.409 66.147-159.806s-23.491-117.151-66.147-159.806c-5.858-5.857-5.858-15.355 0-21.213 5.857-5.858 15.355-5.858 21.213 0 48.322 48.321 74.934 112.608 74.934 181.019s-26.612 132.698-74.934 181.019c-5.848 5.848-15.345 5.868-21.213 0z" fill="#7affe4"/><path d="m370.432 391.6c-5.857-5.858-5.857-15.355 0-21.213 30.533-30.531 47.349-71.155 47.349-114.387s-16.815-83.855-47.349-114.387c-5.858-5.858-5.858-15.355 0-21.213 5.857-5.857 15.355-5.858 21.213 0 36.2 36.198 56.136 84.355 56.136 135.601s-19.936 99.403-56.136 135.601c-5.86 5.858-15.356 5.855-21.213-.002z" fill="#00ddc1"/><path d="m324.979 346.148c-5.858-5.858-5.857-15.356 0-21.213 18.4-18.398 28.533-42.88 28.533-68.934s-10.133-50.536-28.533-68.934c-5.858-5.857-5.858-15.355 0-21.213 5.857-5.857 15.355-5.858 21.213 0 24.066 24.065 37.32 56.08 37.32 90.148s-13.254 66.083-37.32 90.148c-5.858 5.857-15.356 5.854-21.213-.002z" fill="#7affe4"/><path d="m415.853 437.019c5.868 5.868 15.365 5.848 21.213 0 48.322-48.321 74.934-112.608 74.934-181.019h-30c0 60.397-23.491 117.151-66.147 159.806-5.858 5.858-5.858 15.355 0 21.213z" fill="#00ddc1"/><path d="m370.432 391.6c5.856 5.856 15.353 5.859 21.213 0 36.2-36.198 56.136-84.355 56.136-135.601h-30c0 43.232-16.815 83.855-47.349 114.387-5.857 5.859-5.857 15.356 0 21.214z" fill="#00b4bc"/><path d="m324.979 346.148c5.857 5.857 15.354 5.859 21.213 0 24.066-24.065 37.32-56.08 37.32-90.148h-30c0 26.054-10.133 50.536-28.533 68.934-5.857 5.858-5.857 15.355 0 21.214z" fill="#00ddc1"/><path d="m74.934 437.019c-48.322-48.321-74.934-112.608-74.934-181.019s26.612-132.698 74.934-181.019c5.858-5.858 15.355-5.857 21.213 0 5.858 5.858 5.858 15.355 0 21.213-42.656 42.655-66.147 99.409-66.147 159.806s23.491 117.151 66.147 159.806c5.858 5.857 5.858 15.355 0 21.213-5.858 5.859-15.357 5.857-21.213 0z" fill="#7affe4"/><path d="m120.354 391.601c-36.199-36.198-56.135-84.355-56.135-135.601s19.936-99.403 56.136-135.601c5.858-5.857 15.356-5.857 21.213 0 5.857 5.858 5.857 15.355 0 21.213-30.534 30.533-47.349 71.156-47.349 114.388s16.815 83.855 47.349 114.387c5.858 5.858 5.858 15.355 0 21.213-5.85 5.85-15.347 5.866-21.214.001z" fill="#00ddc1"/><path d="m165.807 346.148c-24.066-24.065-37.32-56.08-37.32-90.148s13.254-66.083 37.32-90.148c5.858-5.858 15.356-5.857 21.213 0 5.858 5.858 5.857 15.356 0 21.213-18.4 18.398-28.533 42.88-28.533 68.934s10.133 50.536 28.533 68.934c5.858 5.857 5.858 15.355 0 21.213-5.85 5.852-15.347 5.867-21.213.002z" fill="#7affe4"/><path d="m96.147 437.019c5.858-5.858 5.858-15.355 0-21.213-42.656-42.655-66.147-99.409-66.147-159.806h-30c0 68.411 26.612 132.698 74.934 181.019 5.856 5.857 15.355 5.859 21.213 0z" fill="#00ddc1"/><path d="m141.568 391.6c5.857-5.858 5.857-15.355 0-21.213-30.534-30.531-47.349-71.155-47.349-114.387h-30c0 51.246 19.936 99.403 56.136 135.601 5.866 5.865 15.363 5.849 21.213-.001z" fill="#00b4bc"/><path d="m187.021 346.148c5.858-5.858 5.857-15.356 0-21.213-18.4-18.398-28.533-42.88-28.533-68.934h-30c0 34.068 13.254 66.083 37.32 90.148 5.865 5.864 15.362 5.849 21.213-.001z" fill="#00ddc1"/><circle cx="256" cy="256" fill="#00ddc1" r="63.2"/><path d="m256 319.2c34.849 0 63.2-28.352 63.2-63.2h-126.4c0 34.849 28.351 63.2 63.2 63.2z" fill="#00b4bc"/></g></svg>

smart-hut/public/img/settings.svg

@@ -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>

smart-hut/public/img/smart-plug-off.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" enable-background="new 0 0 512 512" height="512px" viewBox="0 0 512 512" width="512px"><g><g><path d="m384.533 56.233c-8.284 0-15 6.716-15 15s6.716 15 15 15c22.736 0 41.233 18.497 41.233 41.233 0 8.284 6.716 15 15 15s15-6.716 15-15c.001-39.278-31.954-71.233-71.233-71.233z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#1A2849"/><path d="m384.533 0c-8.284 0-15 6.716-15 15s6.716 15 15 15c53.743 0 97.467 43.724 97.467 97.467 0 8.284 6.716 15 15 15s15-6.716 15-15c0-70.285-57.182-127.467-127.467-127.467z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#1A2849"/><circle cx="384.533" cy="127.467" r="15" data-original="#000000" class="active-path" data-old_color="#000000" fill="#1A2849"/><path d="m272.066 144.6h-176.733c-51.798 0-95.333 41.856-95.333 95.334v176.733c0 53.521 43.561 95.333 95.333 95.333h176.733c51.794 0 95.334-41.848 95.334-95.333v-176.733c0-53.521-43.561-95.334-95.334-95.334zm65.334 272.067c0 36.68-29.865 65.333-65.334 65.333h-176.733c-35.401 0-65.333-28.594-65.333-65.333v-176.733c0-36.702 29.888-65.334 65.333-65.334h176.733c35.402 0 65.334 28.594 65.334 65.334z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#1A2849"/><path d="m183.7 337.4c-25.487 0-47.133 20.558-47.133 47.133v48.2c0 8.284 6.716 15 15 15h64.267c8.284 0 15-6.716 15-15v-48.2c-.001-26.576-21.646-47.133-47.134-47.133zm17.133 80.333h-34.267v-33.2c0-9.594 7.778-17.133 17.133-17.133 9.366 0 17.133 7.552 17.133 17.133v33.2z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#1A2849"/><path d="m111.4 224.934c-8.284 0-15 6.716-15 15v64.266c0 8.284 6.716 15 15 15s15-6.716 15-15v-64.267c0-8.284-6.716-14.999-15-14.999z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#1A2849"/><path d="m256 224.934c-8.284 0-15 6.716-15 15v64.266c0 8.284 6.716 15 15 15s15-6.716 15-15v-64.267c0-8.284-6.716-14.999-15-14.999z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#1A2849"/></g></g> </svg>

smart-hut/public/img/smart-plug.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" enable-background="new 0 0 512 512" height="512px" viewBox="0 0 512 512" width="512px" class=""><g><g><path d="m183.7 367.4c-9.355 0-17.133 7.539-17.133 17.133v33.2h34.267v-33.2c-.001-9.581-7.768-17.133-17.134-17.133z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#505BDA"/><path d="m272.066 144.6h-176.733c-51.798 0-95.333 41.856-95.333 95.334v176.733c0 53.521 43.561 95.333 95.333 95.333h176.733c51.794 0 95.334-41.848 95.334-95.333v-176.733c0-53.521-43.561-95.334-95.334-95.334zm-145.666 159.6c0 8.284-6.716 15-15 15s-15-6.716-15-15v-64.267c0-8.284 6.716-15 15-15s15 6.716 15 15zm104.433 128.533c0 8.284-6.716 15-15 15h-64.267c-8.284 0-15-6.716-15-15v-48.2c0-26.575 21.647-47.133 47.133-47.133 25.488 0 47.133 20.556 47.133 47.133v48.2zm40.167-128.533c0 8.284-6.716 15-15 15s-15-6.716-15-15v-64.267c0-8.284 6.716-15 15-15s15 6.716 15 15z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#505BDA"/><path d="m384.533 56.233c-8.284 0-15 6.716-15 15s6.716 15 15 15c22.736 0 41.233 18.497 41.233 41.233 0 8.284 6.716 15 15 15s15-6.716 15-15c.001-39.278-31.954-71.233-71.233-71.233z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#505BDA"/><path d="m384.533 0c-8.284 0-15 6.716-15 15s6.716 15 15 15c53.743 0 97.467 43.724 97.467 97.467 0 8.284 6.716 15 15 15s15-6.716 15-15c0-70.285-57.182-127.467-127.467-127.467z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#505BDA"/><circle cx="384.533" cy="127.467" r="15" data-original="#000000" class="active-path" data-old_color="#000000" fill="#505BDA"/></g></g> </svg>

smart-hut/public/img/switchOff.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve" width="512px" height="512px" class=""><g><g>
+	<g>
+		<path d="M256,0C114.841,0,0,114.841,0,256s114.841,256,256,256s256-114.841,256-256S397.159,0,256,0z M256,485.345    C129.539,485.345,26.655,382.461,26.655,256S129.539,26.655,256,26.655S485.345,129.539,485.345,256S382.461,485.345,256,485.345z    " data-original="#000000" class="active-path" data-old_color="#000000" fill="#1A2849"/>
+	</g>
+</g><g>
+	<g>
+		<path d="M338.722,115.086c-6.343-3.732-14.513-1.611-18.244,4.733s-1.613,14.513,4.733,18.244    c41.646,24.492,67.517,69.683,67.517,117.937c0,75.394-61.335,136.729-136.729,136.729c-75.393,0-136.729-61.337-136.729-136.729    c0-48.254,25.87-93.445,67.517-117.937c6.345-3.73,8.464-11.899,4.733-18.244c-3.73-6.345-11.898-8.462-18.244-4.733    C123.523,144.347,92.616,198.342,92.616,256c0,90.091,73.293,163.384,163.384,163.384S419.384,346.091,419.382,256    C419.382,198.343,388.475,144.347,338.722,115.086z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#1A2849"/>
+	</g>
+</g><g>
+	<g>
+		<path d="M256,74.832c-7.361,0-13.328,5.968-13.328,13.328V256c0,7.361,5.967,13.328,13.328,13.328    c7.361,0,13.328-5.967,13.328-13.328V88.16C269.328,80.801,263.361,74.832,256,74.832z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#1A2849"/>
+	</g>
+</g></g> </svg>

smart-hut/public/img/switchOn.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve" width="512px" height="512px" class=""><g><path style="fill:#FFFFFF" d="M256,0c141.155,0,256,114.845,256,256S397.155,512,256,512S0,397.155,0,256S114.845,0,256,0z   M485.344,256c0-126.467-102.877-229.344-229.344-229.344S26.656,129.533,26.656,256S129.533,485.344,256,485.344  S485.344,382.467,485.344,256z" data-original="#1E0478" class="active-path" data-old_color="#1E0478"/><path style="fill:#505BDA" d="M256,26.656c126.467,0,229.344,102.877,229.344,229.344S382.467,485.344,256,485.344  S26.656,382.467,26.656,256S129.533,26.656,256,26.656z M419.385,256c0-57.656-30.907-111.66-80.66-140.915  c-6.344-3.732-14.514-1.613-18.246,4.731s-1.613,14.514,4.731,18.246C366.86,162.559,392.73,207.74,392.73,256  c0,75.395-61.334,136.73-136.73,136.73S119.27,331.395,119.27,256c0-48.26,25.869-93.441,67.519-117.938  c6.344-3.732,8.463-11.902,4.731-18.246s-11.902-8.463-18.246-4.731C123.522,144.34,92.615,198.344,92.615,256  c0,90.096,73.289,163.385,163.385,163.385S419.385,346.096,419.385,256z M269.328,256V88.163c0-7.37-5.971-13.328-13.328-13.328  c-7.357,0-13.328,5.958-13.328,13.328V256c0,7.357,5.971,13.328,13.328,13.328C263.357,269.328,269.328,263.357,269.328,256z" data-original="#94E7EF" class="" data-old_color="#94E7EF"/><g>
+	<path style="fill:#FFFFFF" d="M338.726,115.085c49.753,29.254,80.66,83.259,80.66,140.915   c0,90.096-73.289,163.385-163.385,163.385S92.615,346.096,92.615,256c0-57.656,30.907-111.66,80.66-140.915   c6.344-3.732,14.514-1.613,18.246,4.731s1.613,14.514-4.731,18.246C145.14,162.559,119.27,207.74,119.27,256   c0,75.395,61.334,136.73,136.73,136.73S392.73,331.395,392.73,256c0-48.26-25.869-93.441-67.519-117.938   c-6.344-3.732-8.463-11.902-4.731-18.246C324.212,113.473,332.382,111.354,338.726,115.085z" data-original="#1E0478" class="active-path" data-old_color="#1E0478"/>
+	<path style="fill:#FFFFFF" d="M269.328,88.163V256c0,7.357-5.971,13.328-13.328,13.328c-7.357,0-13.328-5.971-13.328-13.328   V88.163c0-7.37,5.971-13.328,13.328-13.328C263.357,74.835,269.328,80.793,269.328,88.163z" data-original="#1E0478" class="active-path" data-old_color="#1E0478"/>
+</g></g> </svg>

smart-hut/public/img/temperature-sensor.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="590pt" version="1.1" viewBox="-193 0 590 590.60879" width="590pt">
+<g id="surface1">
+<path d="M 163.433594 407.625 L 163.433594 61.121094 C 163.433594 27.363281 136.070312 0 102.308594 0 C 68.550781 0 41.1875 27.363281 41.1875 61.121094 L 41.1875 407.625 C -3.820312 441.386719 -12.945312 505.238281 20.8125 550.246094 C 54.574219 595.253906 118.425781 604.378906 163.433594 570.621094 C 208.441406 536.859375 217.566406 473.007812 183.808594 428 C 178.019531 420.277344 171.15625 413.421875 163.433594 407.625 Z M 163.433594 407.625 " style=" stroke:none;fill-rule:nonzero;fill:rgb(41.176471%,80%,84.313725%);fill-opacity:1;" />
+<path d="M 163.433594 407.625 L 163.433594 244.488281 L 41.1875 366.734375 L 41.1875 407.625 C -3.820312 441.386719 -12.945312 505.238281 20.8125 550.246094 C 54.574219 595.253906 118.425781 604.378906 163.433594 570.621094 C 208.441406 536.859375 217.566406 473.007812 183.808594 428 C 178.019531 420.277344 171.15625 413.421875 163.433594 407.625 Z M 163.433594 407.625 " style=" stroke:none;fill-rule:nonzero;fill:rgb(38.039216%,74.117647%,78.039216%);fill-opacity:1;" />
+<path d="M 143.058594 488.980469 C 143.058594 511.484375 124.816406 529.726562 102.308594 529.726562 C 79.804688 529.726562 61.5625 511.484375 61.5625 488.980469 C 61.5625 466.476562 79.804688 448.230469 102.308594 448.230469 C 124.816406 448.230469 143.058594 466.476562 143.058594 488.980469 Z M 143.058594 488.980469 " style=" stroke:none;fill-rule:nonzero;fill:rgb(92.941176%,19.215686%,14.117647%);fill-opacity:1;" />
+<path d="M 92.125 81.496094 L 112.496094 81.496094 L 112.496094 478.792969 L 92.125 478.792969 Z M 92.125 81.496094 " style=" stroke:none;fill-rule:nonzero;fill:rgb(92.941176%,19.215686%,14.117647%);fill-opacity:1;" />
+<path d="M 41.1875 356.546875 L 71.75 356.546875 L 71.75 376.921875 L 41.1875 376.921875 Z M 41.1875 356.546875 " style=" stroke:none;fill-rule:nonzero;fill:rgb(31.764706%,61.568627%,65.098039%);fill-opacity:1;" />
+<path d="M 41.1875 305.613281 L 71.75 305.613281 L 71.75 325.988281 L 41.1875 325.988281 Z M 41.1875 305.613281 " style=" stroke:none;fill-rule:nonzero;fill:rgb(31.764706%,61.568627%,65.098039%);fill-opacity:1;" />
+<path d="M 41.1875 254.675781 L 71.75 254.675781 L 71.75 275.050781 L 41.1875 275.050781 Z M 41.1875 254.675781 " style=" stroke:none;fill-rule:nonzero;fill:rgb(31.764706%,61.568627%,65.098039%);fill-opacity:1;" />
+<path d="M 41.1875 203.742188 L 71.75 203.742188 L 71.75 224.117188 L 41.1875 224.117188 Z M 41.1875 203.742188 " style=" stroke:none;fill-rule:nonzero;fill:rgb(31.764706%,61.568627%,65.098039%);fill-opacity:1;" />
+<path d="M 41.1875 152.804688 L 71.75 152.804688 L 71.75 173.179688 L 41.1875 173.179688 Z M 41.1875 152.804688 " style=" stroke:none;fill-rule:nonzero;fill:rgb(31.764706%,61.568627%,65.098039%);fill-opacity:1;" />
+<path d="M 41.1875 101.871094 L 71.75 101.871094 L 71.75 122.246094 L 41.1875 122.246094 Z M 41.1875 101.871094 " style=" stroke:none;fill-rule:nonzero;fill:rgb(31.764706%,61.568627%,65.098039%);fill-opacity:1;" />
+</g>
+</svg>

smart-hut/public/img/temperatureIcon.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve" width="512px" height="512px" class=""><g><g>
+	<g>
+		<g>
+			<path d="M234.667,53.333C234.667,23.927,210.74,0,181.333,0S128,23.927,128,53.333v332.073     c-13.615,13.958-21.333,32.625-21.333,51.927c0,41.167,33.5,74.667,74.667,74.667C222.5,512,256,478.5,256,437.333     c0-19.302-7.719-37.969-21.333-51.927V53.333z M181.333,490.667c-29.406,0-53.333-23.927-53.333-53.333     c0-15.104,6.323-29.125,17.813-39.469c2.24-2.031,3.521-4.906,3.521-7.927V53.333c0-17.646,14.354-32,32-32     c17.646,0,32,14.354,32,32v336.604c0,3.021,1.281,5.896,3.521,7.927c11.49,10.344,17.813,24.365,17.813,39.469     C234.667,466.74,210.74,490.667,181.333,490.667z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
+			<path d="M192,407.298V224c0-5.896-4.771-10.667-10.667-10.667c-5.896,0-10.667,4.771-10.667,10.667v183.298     c-12.389,4.418-21.333,16.147-21.333,30.035c0,17.646,14.354,32,32,32c17.646,0,32-14.354,32-32     C213.333,423.445,204.389,411.716,192,407.298z M181.333,448c-5.885,0-10.667-4.781-10.667-10.667     c0-5.885,4.781-10.667,10.667-10.667c5.885,0,10.667,4.781,10.667,10.667C192,443.219,187.219,448,181.333,448z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
+			<path d="M96,341.333H32c-5.896,0-10.667,4.771-10.667,10.667c0,5.896,4.771,10.667,10.667,10.667h64     c5.896,0,10.667-4.771,10.667-10.667C106.667,346.104,101.896,341.333,96,341.333z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
+			<path d="M96,298.667H74.667c-5.896,0-10.667,4.771-10.667,10.667C64,315.229,68.771,320,74.667,320H96     c5.896,0,10.667-4.771,10.667-10.667C106.667,303.438,101.896,298.667,96,298.667z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
+			<path d="M96,256H74.667C68.771,256,64,260.771,64,266.667c0,5.896,4.771,10.667,10.667,10.667H96     c5.896,0,10.667-4.771,10.667-10.667C106.667,260.771,101.896,256,96,256z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
+			<path d="M32,234.667h64c5.896,0,10.667-4.771,10.667-10.667S101.896,213.333,96,213.333H32c-5.896,0-10.667,4.771-10.667,10.667     S26.104,234.667,32,234.667z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
+			<path d="M32,106.667h64c5.896,0,10.667-4.771,10.667-10.667S101.896,85.333,96,85.333H32c-5.896,0-10.667,4.771-10.667,10.667     S26.104,106.667,32,106.667z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
+			<path d="M96,170.667H74.667c-5.896,0-10.667,4.771-10.667,10.667C64,187.229,68.771,192,74.667,192H96     c5.896,0,10.667-4.771,10.667-10.667C106.667,175.438,101.896,170.667,96,170.667z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
+			<path d="M96,128H74.667C68.771,128,64,132.771,64,138.667c0,5.896,4.771,10.667,10.667,10.667H96     c5.896,0,10.667-4.771,10.667-10.667C106.667,132.771,101.896,128,96,128z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
+			<path d="M330.667,170.667H352c17.646,0,32,14.354,32,32c0,5.896,4.771,10.667,10.667,10.667s10.667-4.771,10.667-10.667     c0-29.406-23.927-53.333-53.333-53.333h-21.333c-29.406,0-53.333,23.927-53.333,53.333V288c0,29.406,23.927,53.333,53.333,53.333     H352c29.406,0,53.333-23.927,53.333-53.333c0-5.896-4.771-10.667-10.667-10.667S384,282.104,384,288c0,17.646-14.354,32-32,32     h-21.333c-17.646,0-32-14.354-32-32v-85.333C298.667,185.021,313.021,170.667,330.667,170.667z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
+			<path d="M458.667,149.333c-17.646,0-32,14.354-32,32c0,17.646,14.354,32,32,32s32-14.354,32-32     C490.667,163.688,476.313,149.333,458.667,149.333z M458.667,192c-5.885,0-10.667-4.781-10.667-10.667     c0-5.885,4.781-10.667,10.667-10.667s10.667,4.781,10.667,10.667C469.333,187.219,464.552,192,458.667,192z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
+		</g>
+	</g>
+</g></g> </svg>

smart-hut/public/index.html

@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script>
+      window.BACKEND_URL = "__BACKEND_URL__";
+    </script>
+
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="stylesheet" href="style.css" />
+    <link
+      rel="stylesheet"
+      href="//cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css"
+    />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <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"
+    />
+    <!--
+      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/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

smart-hut/public/manifest.json

@@ -0,0 +1,9 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

smart-hut/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

smart-hut/public/style.css

@@ -0,0 +1,6 @@
+* {
+  margin: 0;
+  padding: 0;
+  font-family: "Lato", Helvetica, SansSerif, serif;
+}
+/*background: linear-gradient(to bottom, rgba(0, 46, 200, 0.51), rgba(0, 0, 0, 0.51));*/

smart-hut/src/App.js

@@ -0,0 +1,152 @@
+import React, { Component } from "react";
+import { BrowserRouter, Switch, Route, Redirect } from "react-router-dom";
+import Home from "./views/Home";
+import Dashboard from "./views/Dashboard";
+import Signup from "./views/Signup";
+import Login from "./views/Login";
+import FourOhFour from "./views/FourOhFour";
+import ForgotPass from "./views/Forgot-password";
+import ChangePass from "./views/Forgot-pass-reset";
+import ConfirmForgotPasswrod from "./views/ConfirmForgotPassword";
+import ConfirmRegistration from "./views/ConfirmRegistration";
+import ConfirmResetPassword from "./views/ConfirmResetPassword";
+import Instruction from "./views/Instruction";
+import queryString from "query-string";
+
+import { call } from "./client_server";
+
+/*let userJsonString = JSON.parse(localStorage.getItem("token"));
+      let date = new Date().getTime().toString();
+      let delta = date - userJsonString.timestamp;
+			if (delta < 5*60*60*1000) {
+				loggedIn = true;
+      }*/
+
+class App extends Component {
+  constructor(props) {
+    super(props);
+
+    let loggedIn = false;
+    let token = undefined;
+
+    try {
+      let userJsonString = localStorage.getItem("token");
+      let exp = localStorage.getItem("exp");
+      let date = new Date().getTime();
+      if (userJsonString && exp && date < exp) {
+        loggedIn = true;
+        token = userJsonString;
+      } else {
+        localStorage.removeItem("token");
+        localStorage.removeItem("exp");
+      }
+    } catch (exception) {}
+
+    this.state = {
+      loggedIn: loggedIn,
+      token: token,
+      info: "",
+    };
+
+    this.auth = this.auth.bind(this);
+    this.logout = this.logout.bind(this);
+  }
+
+  componentDidMount() {
+    if (window.location) {
+      const values = queryString.parse(window.location.search);
+      this.setState({
+        query: values,
+      });
+    } else {
+      this.setState({
+        query: "ciao",
+      });
+    }
+  }
+
+  auth(data) {
+    return call
+      .login(data.params)
+      .then((res) => {
+        if (res.data && res.status === 200) {
+          let expire = new Date().getTime() + 60 * 60 * 5 * 1000;
+          localStorage.setItem("token", res.data.jwttoken);
+          localStorage.setItem("exp", expire);
+          call.setToken(res.data.jwttoken);
+          this.setState({
+            user: data.params.user,
+            token: res.data.jwttoken,
+            loggedIn: true,
+          });
+          this.getInfo();
+          return res;
+          //this.props.history.push("/dashboard");
+        } else {
+          this.setState({
+            error: res.data.message,
+          });
+          return res.status;
+        }
+      })
+      .catch((err) => {
+        return err;
+      });
+  }
+
+  logout() {
+    this.setState({
+      loggedIn: false,
+    });
+
+    localStorage.removeItem("token");
+    localStorage.removeItem("exp");
+  }
+
+  render() {
+    return (
+      <BrowserRouter>
+        <Switch>
+          <Route path="/" exact component={Home} />
+          <Route path="/login">
+            {this.state.loggedIn && this.state.token ? (
+              <Redirect tkn={this.state.token} to="/dashboard" />
+            ) : (
+              <Login auth={this.auth} />
+            )}
+          </Route>
+          <Route path="/signup" exact component={Signup} />
+          <Route path="/dashboard">
+            {this.state.loggedIn ? (
+              <Dashboard tkn={this.state.token} logout={this.logout} />
+            ) : (
+              <Redirect to="/login" />
+            )}
+          </Route>
+          <Route path="/forgot-password">
+            <ForgotPass />
+          </Route>
+          <Route path="/sent-email">
+            <ConfirmForgotPasswrod />
+          </Route>
+          <Route path="/sent-email-reg">
+            <ConfirmRegistration />
+          </Route>
+          <Route path="/instruction">
+            <Instruction />
+          </Route>
+          <Route path="/forgot-pass-reset"> </Route>
+          <Route path="/password-reset">
+            <ChangePass query={this.state.query} />
+          </Route>
+          <Route path="/conf-reset-pass">
+            <ConfirmResetPassword />
+          </Route>
+          <Route component={FourOhFour} />
+        </Switch>
+      </BrowserRouter>
+    );
+  }
+}
+
+export default App;

smart-hut/src/App.test.js

@@ -0,0 +1,15 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import { Router } from "react-router";
+import { createMemoryHistory } from "history";
+import App from "./App";
+
+test("redirects to homepage", () => {
+  const history = createMemoryHistory();
+  render(
+    <Router history={history}>
+      <App />
+    </Router>
+  );
+  expect(history.location.pathname).toBe("/");
+});

smart-hut/src/client_server.js

@@ -0,0 +1,285 @@
+// vim: set ts=2 sw=2 et tw=80:
+
+import axios from "axios";
+
+let config;
+if (window.BACKEND_URL !== "__BACKEND_URL__") {
+  config = window.BACKEND_URL + "/";
+} else {
+  config = "http://localhost:8080/";
+}
+var tkn = localStorage.getItem("token");
+
+/** the ServiceSocket instance valid for the current session */
+var socket;
+
+// requests data devices
+/*
+
+    {
+  params : data,
+  device: 'tipoDiDevice',
+  id: se serve
+    }
+
+
+    device routes:
+  - buttonDimmer
+  - dimmableLight
+  - knobDimmer
+  - motionSensor
+  - regularLight
+  - sensor
+  - smartPlug
+  - switch
+
+*/
+
+/** The number of times a connection to the socket was tried */
+var retries = 0;
+
+/** Class to handle connection with the sensor socket */
+class ServiceSocket {
+  /**
+   * Create a new sensor socket connection
+   * @param {string} token - The JWT token (needed for authentication)
+   * @param {Object.<number, function>|null} callbacks - A callback map from
+   *  device id to callback function
+   */
+  constructor(token, callbacks) {
+    this.token = token;
+    this.authenticated = false;
+    this.callbacks = callbacks || {};
+
+    this.connection = new WebSocket("ws://localhost:8080/sensor-socket");
+
+    this.connection.onopen = (evt) => {
+      this.connection.send(JSON.stringify({ token }));
+    };
+
+    this.connection.onmessage = (evt) => {
+      let data = JSON.parse(evt.data);
+
+      if (!this.authenticated) {
+        if (data.authenticated) {
+          this.authenticated = true;
+          retries = 0;
+        } else {
+          console.error("socket authentication failed");
+        }
+      } else {
+        this.invokeCallbacks(data);
+      }
+    };
+
+    this.connection.onerror = (evt) => {
+      if (retries >= 5) {
+        console.error("too many socket connection retries");
+        return;
+      }
+      retries++;
+      socket = new ServiceSocket(this.token, this.callbacks);
+    };
+  }
+
+  invokeCallbacks(data) {
+    if (data.id && this.callbacks[data.id]) {
+      this.callbacks[data.id].forEach((f) => f(data));
+    }
+  }
+
+  /**
+   * Registers a new callback function to be called when updates on the device
+   * with the id given are recieved
+   * @param {number} id - the id of the device to check updates for
+   * @param {function} stateCallback - a function that recieves a device as the
+   *  first parameter, that will be called whenever a update is recieved
+   */
+  subscribe(id, stateCallback) {
+    if (this.callbacks[id] === undefined) {
+      this.callbacks[id] = [];
+    }
+
+    this.callbacks[id].push(stateCallback);
+  }
+
+  /**
+   * Unregisters a function previously registered with `subscribe(...)`.
+   * @param {number} id - the id of the device to stop checking updates for
+   * @param {function} stateCallback - the callback to unregister
+   */
+  unsubscribe(id, stateCallback) {
+    this.callbacks[id].splice(this.callbacks[id].indexOf(stateCallback), 1);
+  }
+
+  /**
+   * Closes the underlying websocket connection
+   */
+  close() {
+    this.connection.close();
+  }
+}
+
+if (tkn) {
+  socket = new ServiceSocket(tkn);
+}
+
+export var call = {
+  setToken: function (token) {
+    tkn = token;
+    if (tkn) {
+      if (socket) {
+        socket.close();
+      }
+      socket = new ServiceSocket(tkn);
+    }
+  },
+
+  /**
+   * Registers a new callback function to be called when updates on the device
+   * with the id given are recieved
+   * @param {number} id - the id of the device to check updates for
+   * @param {function} stateCallback - a function that recieves a device as the
+   *  first parameter, that will be called whenever a update is recieved
+   */
+  socketSubscribe: function (id, callback) {
+    socket.subscribe(id, callback);
+  },
+
+  /**
+   * Unregisters a function previously registered with `subscribe(...)`.
+   * @param {number} id - the id of the device to stop checking updates for
+   * @param {function} stateCallback - the callback to unregister
+   */
+  socketUnsubscribe: function (id, callback) {
+    socket.unsubscribe(id, callback);
+  },
+  login: function (data, headers) {
+    return axios.post(config + "auth/login", data);
+  },
+  register: function (data, headers) {
+    return axios.post(config + "register", data);
+  },
+  getUserInfo: function (token) {
+    if (!token) {
+      token = tkn;
+    }
+    return axios.get(config + "auth/profile", {
+      headers: { Authorization: "Bearer " + token },
+    });
+  },
+  initResetPassword: function (data, headers) {
+    return axios.post(config + "register/init-reset-password", data);
+  },
+  resetPassword: function (data, headers) {
+    return axios.put(config + "register/reset-password", data);
+  },
+  getAllRooms: function (token) {
+    if (!token) {
+      token = tkn;
+    }
+    return axios.get(config + "room", {
+      headers: { Authorization: "Bearer " + token },
+    });
+  },
+  getAllDevices: function (token) {
+    if (!token) {
+      token = tkn;
+    }
+    return axios.get(config + "device", {
+      headers: { Authorization: "Bearer " + token },
+    });
+  },
+  getAllDevicesByRoom: function (id, token) {
+    if (!token) {
+      token = tkn;
+    }
+    return axios.get(config + "room/" + id + "/devices", {
+      headers: { Authorization: "Bearer " + token },
+    });
+  },
+  createRoom: function (data, headers) {
+    return axios.post(config + "room", data, {
+      headers: { Authorization: "Bearer " + tkn },
+    });
+  },
+  updateRoom: function (data, headers) {
+    return axios.put(config + "room/" + data.id, data, {
+      headers: { Authorization: "Bearer " + tkn },
+    });
+  },
+  deleteRoom: function (data, headers) {
+    return axios.delete(config + "room/" + data.id, {
+      headers: { Authorization: "Bearer " + tkn },
+    });
+  },
+  devicePost: function (data, headers) {
+    return axios
+      .post(config + data.device, data.params, {
+        headers: { Authorization: "Bearer " + tkn },
+      })
+      .then((res) => {
+        if (
+          res.status === 200 &&
+          (data.device === "switch" ||
+            data.device === "buttonDimmer" ||
+            data.device === "knobDimmer")
+        ) {
+          let type = "lightId=";
+          if (data.device === "switch") {
+            type = "switchableId=";
+          }
+          data.params.lights.forEach((e) => {
+            let urlUp =
+              config + data.device + "/" + res.data.id + "/lights?" + type + e;
+            axios.post(
+              urlUp,
+              {},
+              { headers: { Authorization: "Bearer " + tkn } }
+            );
+          });
+        }
+        return res;
+      });
+  },
+  deviceUpdate: function (data, typeDevice) {
+    let url = "device";
+    if (typeDevice) {
+      url = typeDevice;
+    }
+    let promiseRes = axios.put(config + url, data, {
+      headers: { Authorization: "Bearer " + tkn },
+    });
+    // also for btn/knob dimmer
+    if (
+      typeDevice === "switch/operate" ||
+      typeDevice === "buttonDimmer/dim" ||
+      typeDevice === "knobDimmer/dimTo"
+    ) {
+      promiseRes = promiseRes.then((e) => {
+        if (e.status === 200) {
+          e.data.forEach((device) => socket.invokeCallbacks(device));
+        }
+        return e;
+      });
+    }
+
+    return promiseRes;
+  },
+  deviceDelete: function (data, headers) {
+    return axios.delete(config + data.device + "/" + data.id, {
+      headers: { Authorization: "Bearer " + tkn },
+    });
+  },
+  deviceGetById: function (data, headers) {
+    return axios.get(config + data.device + "/" + data.id);
+  },
+  deviceGetAll: function (data, headers) {
+    return axios.get(config + data.device);
+  },
+  smartPlugReset: function (id) {
+    return axios.delete(config + "smartPlug/" + id + "/meter", {
+      headers: { Authorization: "Bearer " + tkn },
+    });
+  },
+};

smart-hut/src/components/Banner.js

@@ -0,0 +1,82 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { makeStyles } from "@material-ui/core/styles";
+import Paper from "@material-ui/core/Paper";
+import Typography from "@material-ui/core/Typography";
+import Grid from "@material-ui/core/Grid";
+import Link from "@material-ui/core/Link";
+
+const useStyles = makeStyles((theme) => ({
+  mainFeaturedPost: {
+    position: "relative",
+    backgroundColor: theme.palette.grey[800],
+    color: theme.palette.common.white,
+    marginBottom: theme.spacing(4),
+    backgroundImage: "img/banner.jpg",
+    backgroundSize: "cover",
+    backgroundRepeat: "no-repeat",
+    backgroundPosition: "center",
+  },
+  overlay: {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    right: 0,
+    left: 0,
+    backgroundColor: "rgba(0,0,0,.3)",
+  },
+  mainFeaturedPostContent: {
+    position: "relative",
+    padding: theme.spacing(3),
+    [theme.breakpoints.up("md")]: {
+      padding: theme.spacing(6),
+      paddingRight: 0,
+    },
+  },
+}));
+
+export default function Banner(props) {
+  const classes = useStyles();
+  const { post } = props;
+
+  return (
+    <Paper
+      className={classes.mainFeaturedPost}
+      style={{ backgroundImage: `url(${post.image})` }}
+    >
+      {/* Increase the priority of the hero background image */}
+      {
+        <img
+          style={{ display: "none" }}
+          src={post.image}
+          alt={post.imageText}
+        />
+      }
+      <div className={classes.overlay} />
+      <Grid container>
+        <Grid item md={6}>
+          <div className={classes.mainFeaturedPostContent}>
+            <Typography
+              component="h1"
+              variant="h3"
+              color="inherit"
+              gutterBottom
+            >
+              {post.title}
+            </Typography>
+            <Typography variant="h5" color="inherit" paragraph>
+              {post.description}
+            </Typography>
+            <Link variant="subtitle1" href="#">
+              {post.linkText}
+            </Link>
+          </div>
+        </Grid>
+      </Grid>
+    </Paper>
+  );
+}
+
+Banner.propTypes = {
+  post: PropTypes.object,
+};

smart-hut/src/components/FilterDevices.js

@@ -0,0 +1,82 @@
+import { Dropdown } from "semantic-ui-react";
+import React, { Component } from "react";
+
+export default class FilterDevices extends Component {
+  render() {
+    const tagOptions = [
+      {
+        key: "regularLight",
+        text: "regularLight",
+        value: "regularLight",
+        label: { color: "red", empty: true, circular: true },
+      },
+      {
+        key: "dimmableLight",
+        text: "dimmableLight",
+        value: "dimmableLight",
+        label: { color: "blue", empty: true, circular: true },
+      },
+      {
+        key: "buttonDimmer",
+        text: "buttonDimmer",
+        value: "buttonDimmer",
+        label: { color: "black", empty: true, circular: true },
+      },
+      {
+        key: "knobDimmer",
+        text: "knobDimmer",
+        value: "knobDimmer",
+        label: { color: "purple", empty: true, circular: true },
+      },
+      {
+        key: "motionSensor",
+        text: "motionSensor",
+        value: "motionSensor",
+        label: { color: "orange", empty: true, circular: true },
+      },
+      {
+        key: "sensor",
+        text: "sensor",
+        value: "sensor",
+        label: { empty: true, circular: true },
+      },
+      {
+        key: "smartPlug",
+        text: "smartPlug",
+        value: "smartPlug",
+        label: { color: "pink", empty: true, circular: true },
+      },
+      {
+        key: "switch",
+        text: "switch",
+        value: "switch",
+        label: { color: "green", empty: true, circular: true },
+      },
+    ];
+
+    return (
+      <Dropdown
+        text="Filter Devices"
+        icon="filter"
+        floating
+        labeled
+        button
+        className="icon"
+      >
+        <Dropdown.Menu>
+          <Dropdown.Divider />
+          <Dropdown.Header icon="tags" content="Tag Device" />
+          <Dropdown.Menu scrolling>
+            {tagOptions.map((option) => (
+              <Dropdown.Item
+                key={option.value}
+                {...option}
+                onClick={this.props.filterDevices}
+              />
+            ))}
+          </Dropdown.Menu>
+        </Dropdown.Menu>
+      </Dropdown>
+    );
+  }
+}

smart-hut/src/components/Footer.js

@@ -0,0 +1,9 @@
+import React from "react";
+
+export default function Footer() {
+  return (
+    <div>
+      <p>This is the footer</p>
+    </div>
+  );
+}

smart-hut/src/components/Header.js

@@ -0,0 +1,78 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { makeStyles } from "@material-ui/core/styles";
+import Toolbar from "@material-ui/core/Toolbar";
+import Button from "@material-ui/core/Button";
+import IconButton from "@material-ui/core/IconButton";
+import SearchIcon from "@material-ui/icons/Search";
+import Typography from "@material-ui/core/Typography";
+import Link from "@material-ui/core/Link";
+
+const useStyles = makeStyles((theme) => ({
+  toolbar: {
+    borderBottom: `1px solid ${theme.palette.divider}`,
+  },
+  toolbarTitle: {
+    flex: 1,
+  },
+  toolbarSecondary: {
+    justifyContent: "space-between",
+    overflowX: "auto",
+  },
+  toolbarLink: {
+    padding: theme.spacing(1),
+    flexShrink: 0,
+  },
+}));
+
+export default function Header(props) {
+  const classes = useStyles();
+  const { sections, title } = props;
+
+  return (
+    <React.Fragment>
+      <Toolbar className={classes.toolbar}>
+        <Typography
+          component="h2"
+          variant="h5"
+          color="inherit"
+          align="center"
+          noWrap
+          className={classes.toolbarTitle}
+        >
+          {title}
+        </Typography>
+        <Toolbar
+          component="nav"
+          variant="dense"
+          className={classes.toolbarSecondary}
+        >
+          {sections.map((section) => (
+            <Link
+              color="inherit"
+              noWrap
+              key={section.title}
+              variant="body2"
+              href={section.url}
+              className={classes.toolbarLink}
+            >
+              {section.title}
+            </Link>
+          ))}
+        </Toolbar>
+        <Button size="small" variant="outlined" style={{ margin: "0 1rem" }}>
+          Login
+        </Button>
+
+        <Button variant="outlined" size="small">
+          Sign up
+        </Button>
+      </Toolbar>
+    </React.Fragment>
+  );
+}
+
+Header.propTypes = {
+  sections: PropTypes.array,
+  title: PropTypes.string,
+};

smart-hut/src/components/HeaderController.js

@@ -0,0 +1,88 @@
+import React from "react";
+import { Grid, Divider, Button, Label, Responsive } from "semantic-ui-react";
+import { Segment, Image } from "semantic-ui-react";
+import { call } from "../client_server";
+
+const IconHomeImage = () => (
+  <Image
+    src="smart-home.png"
+    style={{ width: "50px", height: "auto" }}
+    centered
+    as="a"
+    href="/"
+  />
+);
+
+const TitleImage = () => <Image src="sm_logo.png" size="medium" centered />;
+
+export default class MyHeader extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      username: "",
+    };
+
+    this.getInfo();
+  }
+  getInfo() {
+    call.getUserInfo(this.state.token).then((res) => {
+      if (res.status === 200) {
+        this.setState({
+          username: res.data.username,
+        });
+      }
+    });
+  }
+  render() {
+    return (
+      <div>
+        <Responsive minWidth={768}>
+          <Grid columns="equal" divided inverted padded>
+            <Grid.Row color="black" textAlign="center">
+              <Grid.Column width={3} height={0.5}>
+                <Segment color="black" inverted>
+                  <IconHomeImage />
+                </Segment>
+              </Grid.Column>
+              <Grid.Column>
+                <Segment color="black" inverted>
+                  <TitleImage />
+                </Segment>
+              </Grid.Column>
+              <Grid.Column width={2} heigth={1}>
+                <Label as="a" image color="black">
+                  <img alt="SmartHut logo" src="smart-home.png" />
+                  {this.state.username}
+                </Label>
+                <Divider />
+                <Button onClick={this.props.logout}>Logout</Button>
+              </Grid.Column>
+            </Grid.Row>
+          </Grid>
+        </Responsive>
+        <Responsive maxWidth={768}>
+          <Grid columns="equal" divided inverted padded>
+            <Grid.Row color="black" textAlign="center">
+              <Segment color="black" inverted>
+                <TitleImage />
+              </Segment>
+            </Grid.Row>
+            <Grid.Row color="black" textAlign="center">
+              <Grid.Column>
+                <IconHomeImage />
+              </Grid.Column>
+              <Grid.Column>
+                <Label as="a" image color="black">
+                  <img alt="SmartHut logo" src="smart-home.png" />
+                  {this.state.username}
+                </Label>
+                <Divider />
+                <Button onClick={this.props.logout}>Logout</Button>
+              </Grid.Column>
+            </Grid.Row>
+          </Grid>
+        </Responsive>
+      </div>
+    );
+  }
+}

smart-hut/src/components/HomeNavbar.js

@@ -0,0 +1,133 @@
+import _ from "lodash";
+import React, { Component } from "react";
+import {
+  Container,
+  Icon,
+  Image,
+  Menu,
+  Sidebar,
+  Responsive,
+} from "semantic-ui-react";
+
+const NavBarMobile = ({
+  children,
+  leftItems,
+  onPusherClick,
+  onToggle,
+  rightItems,
+  visible,
+}) => (
+  <Sidebar.Pushable>
+    <Sidebar
+      as={Menu}
+      animation="overlay"
+      icon="labeled"
+      inverted
+      items={leftItems}
+      vertical
+      visible={visible}
+    />
+    <Sidebar.Pusher
+      dimmed={visible}
+      onClick={onPusherClick}
+      style={{ minHeight: "100vh" }}
+    >
+      <Menu fixed="top" inverted>
+        <Menu.Item>
+          <Image size="mini" src="smart-home_index.png" />
+        </Menu.Item>
+        <Menu.Item onClick={onToggle}>
+          <Icon name="sidebar" />
+        </Menu.Item>
+        <Menu.Menu position="right">
+          {_.map(rightItems, (item) => (
+            <Menu.Item {...item} />
+          ))}
+        </Menu.Menu>
+      </Menu>
+      {children}
+    </Sidebar.Pusher>
+  </Sidebar.Pushable>
+);
+
+const NavBarDesktop = ({ leftItems, rightItems }) => (
+  <Menu fixed="top" inverted>
+    <Menu.Item>
+      <Image size="mini" src="smart-home_index.png" />
+    </Menu.Item>
+    {_.map(leftItems, (item) => (
+      <Menu.Item {...item} />
+    ))}
+    <Menu.Menu position="right">
+      {_.map(rightItems, (item) => (
+        <Menu.Item {...item} />
+      ))}
+    </Menu.Menu>
+  </Menu>
+);
+
+const NavBarChildren = ({ children }) => (
+  <Container style={{ marginTop: "5em" }}>{children}</Container>
+);
+
+class HomeNavabarApp extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      logged: true,
+      email: "",
+      password: "",
+    };
+  }
+  state = {
+    visible: false,
+  };
+
+  handlePusher = () => {
+    const { visible } = this.state;
+
+    if (visible) this.setState({ visible: false });
+  };
+
+  handleToggle = () => this.setState({ visible: !this.state.visible });
+
+  render() {
+    const { children, leftItems, rightItems } = this.props;
+    const { visible } = this.state;
+
+    return (
+      <div>
+        <Responsive {...Responsive.onlyMobile}>
+          <NavBarMobile
+            leftItems={leftItems}
+            onPusherClick={this.handlePusher}
+            onToggle={this.handleToggle}
+            rightItems={rightItems}
+            visible={visible}
+          >
+            <NavBarChildren>{children}</NavBarChildren>
+          </NavBarMobile>
+        </Responsive>
+        <Responsive minWidth={Responsive.onlyTablet.minWidth}>
+          <NavBarDesktop leftItems={leftItems} rightItems={rightItems} />
+          <NavBarChildren>{children}</NavBarChildren>
+        </Responsive>
+      </div>
+    );
+  }
+}
+
+const leftItems = [{ as: "a", content: "Home", key: "home", href: "/" }];
+const rightItems = [
+  { as: "a", content: "Login", key: "login", href: "/login" },
+  { as: "a", content: "Sign up", key: "register", href: "/signup" },
+];
+
+const HomeNavbarApp = () => (
+  <HomeNavabarApp
+    leftItems={leftItems}
+    rightItems={rightItems}
+  ></HomeNavabarApp>
+);
+
+export default HomeNavbarApp;

smart-hut/src/components/SelectIcons.js

@@ -0,0 +1,56 @@
+import React, { Component } from "react";
+import { Button, Grid } from "semantic-ui-react";
+
+export default class SelectIcons extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      currentIcon: this.props.currentIcon,
+    };
+  }
+
+  selectIcon = (e) => {
+    let el = e.target.name;
+    if (e.target.tagName === "I") {
+      el = e.target.parentNode.name;
+    }
+    this.props.updateIcon(el);
+    this.setState({ currentIcon: el });
+  };
+
+  render() {
+    const myicons = [
+      ["home", "coffee", "beer", "glass martini", "film", "video"],
+      ["music", "headphones", "fax", "phone", "laptop", "bath"],
+      ["shower", "bed", "child", "warehouse", "car", "bicycle"],
+      ["motorcycle", "archive", "boxes", "cubes", "chess", "gamepad"],
+      ["futbol", "table tennis", "server", "tv", "heart", "camera"],
+      ["trophy", "wrench", "image", "book", "university", "medkit"],
+      ["paw", "tree", "utensils", "male", "female", "life ring outline"],
+    ];
+
+    return (
+      <Grid centered relaxed>
+        {myicons.map((e, i) => {
+          return (
+            <Grid.Row key={i}>
+              {e.map((e, i) => {
+                return (
+                  <Grid.Column key={i}>
+                    <Button
+                      name={e}
+                      color={e === this.state.currentIcon ? "black" : null}
+                      icon={e}
+                      size="small"
+                      onClick={this.selectIcon}
+                    />
+                  </Grid.Column>
+                );
+              })}
+            </Grid.Row>
+          );
+        })}
+      </Grid>
+    );
+  }
+}

smart-hut/src/components/dashboard/DevicePanel.js

@@ -0,0 +1,183 @@
+// vim: set ts=2 sw=2 et tw=80:
+
+import React, { Component } from "react";
+import { Grid } from "semantic-ui-react";
+import { editButtonStyle, panelStyle } from "./devices/styleComponents";
+import { checkMaxLength, DEVICE_NAME_MAX_LENGTH } from "./devices/constants";
+import DeviceType from "./devices/DeviceTypeController";
+import NewDevice from "./devices/NewDevice";
+import SettingsModal from "./devices/SettingsModal";
+import { call } from "../../client_server";
+
+export default class DevicePanel extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      editMode: false,
+    };
+
+    this.addDevice = this.addDevice.bind(this);
+  }
+
+  editModeController = (e) =>
+    this.setState((prevState) => ({ editMode: !prevState.editMode }));
+
+  openModal = (settingsDeviceId) => {
+    this.setState((prevState) => ({
+      openSettingsModal: !prevState.openSettingsModal,
+      settingsDeviceId: settingsDeviceId,
+    }));
+  };
+
+  changeDeviceData = (deviceId, newSettings) => {
+    console.log(newSettings.name, " <-- new name --> ", deviceId);
+    this.props.devices.map((device) => {
+      if (device.id === deviceId) {
+        for (let prop in newSettings) {
+          if (device.hasOwnProperty(prop)) {
+            if (prop === "name") {
+              if (checkMaxLength(newSettings[prop])) {
+                device[prop] = newSettings[prop];
+              } else {
+                alert(
+                  "Name must be less than " +
+                    DEVICE_NAME_MAX_LENGTH +
+                    " characters."
+                );
+              }
+            } else {
+              device[prop] = newSettings[prop];
+            }
+          }
+        }
+      }
+      return null;
+    });
+    this.forceUpdate();
+  };
+
+  getDevices = () => {
+    if (this.props.activeItem === -1) {
+      call
+        .getAllDevices()
+        .then((res) => {
+          if (res.status === 200) {
+            this.setState({
+              devices: res.data,
+            });
+          }
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    } else {
+      call
+        .getAllDevicesByRoom(this.props.activeItem)
+        .then((res) => {
+          if (res.status === 200) {
+            this.setState({
+              devices: res.data,
+            });
+          }
+        })
+        .catch((err) => {});
+    }
+  };
+
+  async addDevice(data) {
+    const ds = await this.props.addDevice(data);
+    this.setState({
+      devices: ds,
+    });
+    this.forceUpdate();
+  }
+
+  updateDevice = (data) => {
+    const roomId = this.props.devices.filter(
+      (d) => d.id === this.state.settingsDeviceId
+    )[0].roomId;
+    data["id"] = this.state.settingsDeviceId;
+    data["roomId"] = roomId;
+    call
+      .deviceUpdate(data)
+      .then((res) => {
+        if (res.status === 200) {
+          this.getDevices();
+          this.forceUpdate();
+        }
+      })
+      .catch((err) => {});
+  };
+
+  removeDevice = () => {
+    const item = this.props.devices.filter(
+      (d) => d.id === this.state.settingsDeviceId
+    )[0];
+    const data = {
+      device: item.kind,
+      id: this.state.settingsDeviceId,
+    };
+
+    call
+      .deviceDelete(data)
+      .then((res) => {
+        if (res.status === 200) {
+          this.openModal();
+          this.getDevices();
+          this.forceUpdate();
+        }
+      })
+      .catch((err) => {});
+  };
+
+  render() {
+    const edit = {
+      mode: this.state.editMode,
+      openModal: this.openModal,
+    };
+
+    /*var backGroundImg =
+      this.props.activeItem === -1 ? "" : this.props.room.image;*/
+    const ds = this.state.devices ? this.state.devices : this.props.devices;
+
+    return (
+      <div style={panelStyle}>
+        <button style={editButtonStyle} onClick={this.editModeController}>
+          Edit
+        </button>
+        <Grid doubling columns={4} divided="vertically">
+          {this.state.openSettingsModal ? (
+            <SettingsModal
+              openModal={this.openModal}
+              updateDevice={this.updateDevice}
+              removeDevice={this.removeDevice}
+              device={ds.filter((d) => d.id === this.state.settingsDeviceId)[0]}
+            />
+          ) : (
+            ""
+          )}
+          {ds
+            ? ds.map((e, i) => {
+                return (
+                  <Grid.Column key={i}>
+                    <DeviceType
+                      updateDev={this.props.updateDeviceUi}
+                      type={e.kind}
+                      onChangeData={this.changeDeviceData}
+                      device={e}
+                      edit={edit}
+                    />
+                  </Grid.Column>
+                );
+              })
+            : null}
+          {this.props.activeItem !== -1 ? (
+            <Grid.Column>
+              <NewDevice addDevice={this.addDevice} devices={ds} />
+            </Grid.Column>
+          ) : null}
+        </Grid>
+      </div>
+    );
+  }
+}

smart-hut/src/components/dashboard/devices/DeviceSettings.js

@@ -0,0 +1,26 @@
+import React, { Component } from "react";
+import { editModeIconStyle, editModeStyle } from "./styleComponents";
+
+export default class Settings extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      displayForm: true,
+    };
+  }
+
+  displayForm = () => {
+    this.setState((prevState) => ({ displayForm: !prevState.displayForm }));
+  };
+
+  render() {
+    const view = (
+      <div onClick={() => this.props.edit.openModal(this.props.deviceId)}>
+        <span style={editModeStyle}>
+          <img src="/img/settings.svg" alt="" style={editModeIconStyle} />
+        </span>
+      </div>
+    );
+    return <React.Fragment>{this.props.edit.mode ? view : ""}</React.Fragment>;
+  }
+}

smart-hut/src/components/dashboard/devices/DeviceTypeController.js

@@ -0,0 +1,87 @@
+import React from "react";
+import Light from "./Light";
+import SmartPlug from "./SmartPlug";
+import Sensor from "./Sensor";
+import { ButtonDimmer, KnobDimmer } from "./Dimmer";
+import Switcher from "./Switch";
+
+const DeviceType = (props) => {
+  switch (props.type) {
+    case "regularLight":
+      return (
+        <Light
+          updateDev={props.updateDeviceUi}
+          onChangeData={props.changeDeviceData}
+          device={props.device}
+          edit={props.edit}
+        />
+      );
+    case "sensor":
+      return (
+        <Sensor
+          updateDev={props.updateDeviceUi}
+          onChangeData={props.changeDeviceData}
+          device={props.device}
+          edit={props.edit}
+        />
+      );
+    case "motionSensor":
+      return (
+        <Sensor
+          updateDev={props.updateDeviceUi}
+          onChangeData={props.changeDeviceData}
+          device={props.device}
+          edit={props.edit}
+        />
+      );
+    case "buttonDimmer":
+      return (
+        <ButtonDimmer
+          updateDev={props.updateDeviceUi}
+          onChangeData={props.changeDeviceData}
+          device={props.device}
+          edit={props.edit}
+        />
+      );
+    case "knobDimmer":
+      return (
+        <KnobDimmer
+          updateDev={props.updateDeviceUi}
+          onChangeData={props.changeDeviceData}
+          device={props.device}
+          edit={props.edit}
+        />
+      );
+    case "smartPlug":
+      return (
+        <SmartPlug
+          updateDev={props.updateDeviceUi}
+          onChangeData={props.changeDeviceData}
+          device={props.device}
+          edit={props.edit}
+        />
+      );
+    case "switch":
+      return (
+        <Switcher
+          updateDev={props.updateDeviceUi}
+          onChangeData={props.changeDeviceData}
+          device={props.device}
+          edit={props.edit}
+        />
+      );
+    case "dimmableLight":
+      return (
+        <Light
+          updateDev={props.updateDeviceUi}
+          onChangeData={props.changeDeviceData}
+          device={props.device}
+          edit={props.edit}
+        />
+      );
+    default:
+      return "";
+  }
+};
+
+export default DeviceType;

smart-hut/src/components/dashboard/devices/DigitalSensor.js

@@ -0,0 +1,63 @@
+/**
+ * Users can add sensors in their rooms.
+ * Sensors typically measure physical quantities in a room.
+ * You must support temperature sensors, humidity sensors, light sensors (which measure luminosity1).
+ * Sensors have an internal state that cannot be changed by the user.
+ * For this story, make the sensors return a constant value with some small random error.
+ */
+
+import React, { Component } from "react";
+import {
+  CircularInput,
+  CircularProgress,
+  CircularTrack,
+} from "react-circular-input";
+import { errorStyle, sensorText, style, valueStyle } from "./SensorStyle";
+import { StyledDiv } from "./styleComponents";
+import Settings from "./DeviceSettings";
+import { Image } from "semantic-ui-react";
+import { imageStyle, nameStyle } from "./DigitalSensorStyle";
+
+export default class DigitalSensor extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: false, // This value is a boolean, was this type of sensor returns presence/absence
+    };
+
+    this.iconOn = "/img/sensorOn.svg";
+    this.iconOff = "/img/sensorOff.svg";
+  }
+
+  setName = () => {
+    if (this.props.device.name.length > 15) {
+      return this.props.device.name.slice(0, 12) + "...";
+    }
+    return this.props.device.name;
+  };
+
+  getIcon = () => {
+    if (this.state.value) {
+      return this.iconOn;
+    }
+    return this.iconOff;
+  };
+
+  componentDidMount() {}
+
+  render() {
+    return (
+      <StyledDiv>
+        <Settings
+          deviceId={this.props.device.id}
+          edit={this.props.edit}
+          onChangeData={(id, newSettings) =>
+            this.props.onChangeData(id, newSettings)
+          }
+        />
+        <Image src={this.getIcon()} style={imageStyle} />
+        <h5 style={nameStyle}>{this.props.device.name}</h5>
+      </StyledDiv>
+    );
+  }
+}

smart-hut/src/components/dashboard/devices/DigitalSensorStyle.js

@@ -0,0 +1,17 @@
+export const imageStyle = {
+  width: "3.5rem",
+  height: "auto",
+  position: "absolute",
+  top: "20%",
+  left: "50%",
+  transform: "translateX(-50%)",
+  filter: "drop-shadow( 1px 1px 0.5px rgba(0, 0, 0, .25))",
+};
+
+export const nameStyle = {
+  color: "black",
+  position: "absolute",
+  top: "40%",
+  left: "50%",
+  transform: "translateX(-50%)",
+};

smart-hut/src/components/dashboard/devices/Dimmer.js

@@ -0,0 +1,153 @@
+/**
+ Users can add dimmers, a particular kind of switch that can also modify the intensity level of a given light.
+ There are two types of dimmers:
+ • A dimmer with state stores a given intensity level and sets the light to that level. <-- StatefulDimmer
+ • A dimmer without state can just increase or decrease the intensity of a light. <-- DefualtDimmer
+
+ The user can change the state of a dimmer through an intuitive UI in SmartHut .
+ **/
+
+import React, { Component } from "react";
+import {
+  CircularInput,
+  CircularProgress,
+  CircularThumb,
+} from "react-circular-input";
+import {
+  ButtonDimmerContainer,
+  MinusPanel,
+  PlusPanel,
+  ThumbText,
+} from "./styleComponents";
+import Settings from "./DeviceSettings";
+import {
+  CircularThumbStyle,
+  KnobDimmerStyle,
+  KnobProgress,
+  textStyle,
+  knobIcon,
+  knobContainer,
+} from "./DimmerStyle";
+
+import { call } from "../../../client_server";
+
+export class ButtonDimmer extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  increaseIntensity = () => {
+    let data = {
+      dimType: "UP",
+      id: this.props.device.id,
+    };
+    call.deviceUpdate(data, "buttonDimmer/dim").then((res) => {
+      if (res.status === 200) {
+      }
+    });
+  };
+  decreaseIntensity = () => {
+    let data = {
+      dimType: "DOWN",
+      id: this.props.device.id,
+    };
+    call.deviceUpdate(data, "buttonDimmer/dim").then((res) => {
+      if (res.status === 200) {
+      }
+    });
+  };
+
+  componentDidMount() {}
+
+  render() {
+    return (
+      <ButtonDimmerContainer>
+        <Settings
+          deviceId={this.props.device.id}
+          edit={this.props.edit}
+          onChangeData={(id, newSettings) =>
+            this.props.onChangeData(id, newSettings)
+          }
+        />
+        <img alt="icon" src="/img/buttonDimmer.svg" />
+        <span className="knob">
+          {this.props.device.name} ({this.props.device.id})
+        </span>
+        <PlusPanel name="UP" onClick={this.increaseIntensity}>
+          <span>&#43;</span>
+        </PlusPanel>
+        <MinusPanel name="DOWN" onClick={this.decreaseIntensity}>
+          <span>&minus;</span>
+        </MinusPanel>
+      </ButtonDimmerContainer>
+    );
+  }
+}
+
+export class KnobDimmer extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      pointingDevices: [],
+      value: 1,
+    };
+  }
+
+  setIntensity = (newValue) => {
+    let val = Math.round(newValue * 100) <= 1 ? 1 : Math.round(newValue * 100);
+    let data = {
+      id: this.props.device.id,
+      intensity: val,
+    };
+    call.deviceUpdate(data, "knobDimmer/dimTo").then((res) => {
+      if (res.status === 200) {
+        this.setState({
+          value: val,
+        });
+      }
+    });
+  };
+
+  componentDidMount() {
+    this.setState({
+      value: 1,
+    });
+  }
+
+  render() {
+    return (
+      <div style={knobContainer}>
+        <Settings
+          deviceId={this.props.device.id}
+          edit={this.props.edit}
+          onChangeData={(id, newSettings) =>
+            this.props.onChangeData(id, newSettings)
+          }
+        />
+        <CircularInput
+          style={KnobDimmerStyle}
+          value={+(Math.round(this.state.value / 100 + "e+2") + "e-2")}
+          onChange={this.setIntensity}
+        >
+          <text
+            style={textStyle}
+            x={100}
+            y={120}
+            textAnchor="middle"
+            dy="0.3em"
+            fontWeight="bold"
+          >
+            {this.props.device.name} ({this.props.device.id})
+          </text>
+          <CircularProgress
+            style={{ ...KnobProgress, opacity: this.state.value + 0.1 }}
+          />
+          <CircularThumb style={CircularThumbStyle} />
+          <ThumbText color={"#1a2849"} />
+        </CircularInput>
+        <img alt="Knob Icon" style={knobIcon} src="/img/knobDimmer.svg" />
+      </div>
+    );
+  }
+}

smart-hut/src/components/dashboard/devices/DimmerStyle.js

@@ -0,0 +1,70 @@
+export const KnobDimmerStyle = {
+  cursor: "pointer",
+  marginTop: "1rem",
+  width: "9rem",
+  height: "9rem",
+  fill: "#1a2849",
+};
+
+export const KnobHolder = {
+  marginTop: "1rem",
+  cursor: "pointer",
+  padding: "3rem",
+  backgroundColor: "white",
+  width: "10rem",
+  height: "10rem",
+};
+
+export const KnobCircularTrack = {
+  fill: "white",
+  stroke: "#1a2849",
+};
+
+export const KnobIcon = {
+  fill: "#1a2849",
+};
+
+export const KnobProgress = {
+  stroke: "#1a2849",
+  strokeWidth: "3rem",
+};
+
+export const ValueStyle = {
+  pointerEvents: "none",
+  fill: "#1a2849",
+  fontSize: "1.3rem",
+  fontFamily: "Lato",
+  textAnchor: "middle",
+};
+
+export const CircularThumbStyle = {
+  fill: "white",
+  stroke: "#1a2849",
+  strokeWidth: ".2rem",
+  r: "1.4rem",
+};
+
+export const textStyle = {
+  position: "absolute",
+  fill: "#1a2849",
+  fontSize: "1.5rem",
+  fontFamily: "Lato",
+  overflow: "hidden",
+  whiteSpace: "nowrap",
+  textOverflow: "ellipsis",
+};
+
+export const knobIcon = {
+  position: "absolute",
+  left: "50%",
+  top: "30%",
+  transform: "translateX(-50%)",
+  width: "2rem",
+  height: "2rem",
+};
+
+export const knobContainer = {
+  position: "relative",
+  width: "9rem",
+  height: "9rem",
+};

smart-hut/src/components/dashboard/devices/Light.js

@@ -0,0 +1,157 @@
+// vim: set ts=2 sw=2 et tw=80:
+
+/**
+ * Users can add lights in their rooms.
+ * Lights are devices like bulbs, LED strip lights, lamps.
+ * Lights may support an intensity level (from 0% to 100%).
+ * Lights have an internal state that can be changed and it must
+ * be shown accordingly in the SmartHut views (house view and room views).
+ */
+
+import React, { Component } from "react";
+import {
+  iconStyle,
+  StyledDiv,
+  BottomPanel,
+  ThumbText,
+} from "./styleComponents";
+import Settings from "./DeviceSettings";
+import { Image } from "semantic-ui-react";
+import {
+  CircularInput,
+  CircularProgress,
+  CircularThumb,
+} from "react-circular-input";
+import {
+  LightDimmerContainer,
+  LightDimmerStyle,
+  textStyle,
+  nameStyle,
+  KnobProgress,
+  CircularThumbStyle,
+  knobIcon,
+} from "./LightStyle";
+import { call } from "../../../client_server";
+
+export default class Light extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      turnedOn: false,
+      intensity: props.device.intensity,
+    };
+    this.iconOn = "/img/lightOn.svg";
+    this.iconOff = "/img/lightOff.svg";
+
+    this.stateCallback = (e) => {
+      this.setState(
+        Object.assign(this.state, {
+          intensity: e.intensity,
+          turnedOn: e.on,
+        })
+      );
+    };
+
+    call.socketSubscribe(this.props.device.id, this.stateCallback);
+  }
+
+  onClickDevice = () => {
+    this.props.device.on = !this.state.turnedOn;
+    call.deviceUpdate(this.props.device, "regularLight").then((res) => {
+      if (res.status === 200) {
+        this.setState((prevState) => ({ turnedOn: !prevState.turnedOn }));
+      }
+    });
+  };
+
+  getIcon = () => {
+    if (this.state.turnedOn) {
+      return this.iconOn;
+    }
+    return this.iconOff;
+  };
+
+  setIntensity = (newValue) => {
+    this.props.device.intensity =
+      Math.round(newValue * 100) <= 1 ? 1 : Math.round(newValue * 100);
+    call.deviceUpdate(this.props.device, "dimmableLight").then((res) => {
+      if (res.status === 200) {
+        this.setState({
+          intensity:
+            Math.round(newValue * 100) <= 1 ? 1 : Math.round(newValue * 100),
+        });
+      }
+    });
+  };
+
+  get intensity() {
+    return isNaN(this.state.intensity) ? 0 : this.state.intensity;
+  }
+
+  render() {
+    const intensityLightView = (
+      <div style={LightDimmerContainer}>
+        <Settings
+          deviceId={this.props.device.id}
+          edit={this.props.edit}
+          onChangeData={(id, newSettings) =>
+            this.props.onChangeData(id, newSettings)
+          }
+        />
+        <CircularInput
+          style={LightDimmerStyle}
+          value={+(Math.round(this.intensity / 100 + "e+2") + "e-2")}
+          onChange={this.setIntensity}
+        >
+          <text
+            style={textStyle}
+            x={100}
+            y={120}
+            textAnchor="middle"
+            dy="0.3em"
+            fontWeight="bold"
+          >
+            {this.props.device.name} <br /> ({this.props.device.id})
+          </text>
+          <CircularProgress
+            style={{
+              ...KnobProgress,
+              opacity: this.intensity / 100 + 0.3,
+            }}
+          />
+          <CircularThumb style={CircularThumbStyle} />
+          <ThumbText color={"#ffd31d"} />
+        </CircularInput>
+        <Image style={knobIcon} src="/img/intensityLightIcon.svg" />
+      </div>
+    );
+
+    const normalLightView = (
+      <StyledDiv>
+        <Settings
+          deviceId={this.props.device.id}
+          edit={this.props.edit}
+          onChangeData={(id, newSettings) =>
+            this.props.onChangeData(id, newSettings)
+          }
+        />
+        <div onClick={this.props.edit.mode ? () => {} : this.onClickDevice}>
+          <Image src={this.getIcon()} style={iconStyle} />
+          <BottomPanel style={{ backgroundColor: "#ffa41b" }}>
+            <h5 style={nameStyle}>
+              {this.props.device.name} ({this.props.device.id})
+            </h5>
+          </BottomPanel>
+        </div>
+      </StyledDiv>
+    );
+
+    return (
+      <div>
+        {this.props.device.kind === "dimmableLight"
+          ? intensityLightView
+          : normalLightView}
+      </div>
+    );
+  }
+}

smart-hut/src/components/dashboard/devices/LightStyle.js

@@ -0,0 +1,67 @@
+export const valueStyle = {
+  fill: "#3e99ff",
+  fontSize: "2.5rem",
+  fontFamily: "Lato",
+  textShadow: "1px 1px 0.5px rgba(0, 0, 0, .2)",
+};
+
+export const intensityLightStyle = {
+  fill: "#ffd31d",
+  fontSize: "1.2rem",
+  fontFamily: "Lato",
+  textShadow: "1px 1px 0.5px rgba(0, 0, 0, .2)",
+};
+
+export const textStyle = {
+  position: "absolute",
+  fill: "#ffd31d",
+  fontSize: "1.5rem",
+  fontFamily: "Lato",
+  overflow: "hidden",
+  whiteSpace: "nowrap",
+  textOverflow: "ellipsis",
+};
+
+export const nameStyle = {
+  fontSize: "1rem",
+  position: "absolute",
+  top: "30%",
+  left: "50%",
+  transform: "translateX(-50%)",
+  color: "white",
+};
+
+export const LightDimmerStyle = {
+  cursor: "pointer",
+  marginTop: "1rem",
+  width: "9rem",
+  height: "9rem",
+  fill: "#ffd31d",
+};
+
+export const LightDimmerContainer = {
+  position: "relative",
+  width: "9rem",
+  height: "9rem",
+};
+
+export const CircularThumbStyle = {
+  fill: "white",
+  stroke: "#ffd31d",
+  strokeWidth: ".2rem",
+  r: "1.4rem",
+};
+
+export const KnobProgress = {
+  stroke: "#ffd31d",
+  strokeWidth: "3rem",
+};
+
+export const knobIcon = {
+  position: "absolute",
+  left: "50%",
+  top: "30%",
+  transform: "translateX(-50%)",
+  width: "2rem",
+  height: "2rem",
+};

smart-hut/src/components/dashboard/devices/NewDevice.js

@@ -0,0 +1,378 @@
+import React, { Component } from "react";
+import styled from "styled-components";
+import {
+  Button,
+  Dropdown,
+  Form,
+  Icon,
+  Image,
+  Input,
+  Modal,
+} from "semantic-ui-react";
+
+const StyledDiv = styled.div`
+  background-color: #505bda;
+  padding: 3rem;
+  width: 10rem;
+  height: 10rem;
+  border-radius: 100%;
+  border: none;
+  position: relative;
+  box-shadow: 3px 2px 10px 5px #ccc;
+  transition: all 0.3s ease-out;
+  :hover {
+    background-color: #4345d9;
+  }
+  :active {
+    transform: translate(0.3px, 0.8px);
+    box-shadow: 0.5px 0.5px 7px 3.5px #ccc;
+  }
+`;
+
+export default class NewDevice extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      step: 1,
+      openModal: false,
+      motion: false,
+      name: "",
+    };
+    this.baseState = this.state;
+    this.createDevice = this.createDevice.bind(this);
+  }
+
+  handleOpen = () => {
+    this.setState({ openModal: true });
+  };
+  handleClose = () => {
+    this.setState({ openModal: false });
+  };
+
+  resetState = () => {
+    this.setState(this.baseState);
+    this.handleClose();
+  };
+
+  nextStep = () => {
+    this.setState((prevState) => ({ step: prevState.step + 1 }));
+  };
+  previousStep = () => {
+    this.setState((prevState) => ({ step: prevState.step - 1 }));
+  };
+
+  setTypeOfDevice = (e, d) => {
+    if (d.value === "dimmableLight") {
+      this.setState({ typeOfDevice: d.value, intensity: 0 });
+    } else {
+      this.setState({ typeOfDevice: d.value });
+    }
+  };
+
+  setDeviceName = (e, d) => {
+    this.setState({ deviceName: d.value });
+  };
+
+  setTypeOfSensor = (e, d) => {
+    console.log(d.value);
+    if (d.value === "motionSensor") {
+      this.setState({ typeOfSensor: d.value, motion: true });
+    } else {
+      this.setState({ typeOfSensor: d.value });
+    }
+  };
+
+  setLightsDimmerSwitch = (e, d) => {
+    this.setState({ lightsAttached: d.value });
+  };
+
+  createDevice() {
+    // Connect to the backend and create device here.
+    const data = {
+      params: {
+        name: this.state.deviceName,
+      },
+      device: this.state.motion ? "motionSensor" : this.state.typeOfDevice,
+    };
+
+    switch (this.state.typeOfDevice) {
+      case "regularLight":
+        if (this.state.name === "") {
+          data.params["name"] = "Regular Light";
+        }
+        break;
+      case "smartPlug":
+        if (this.state.name === "") {
+          data.params["name"] = "Smart Plug";
+        }
+        break;
+      case "dimmableLight":
+        if (this.state.name === "") {
+          data.params["name"] = "Dimmable Light";
+        }
+        data.params["intensity"] = 0;
+        break;
+      case "sensor":
+        if (this.state.name === "") {
+          data.params["name"] = "Sensor";
+        }
+        if (!this.state.motion) {
+          data.params["sensor"] = this.state.typeOfSensor;
+          data.params["value"] = 0;
+        }
+        break;
+      case "switch":
+        if (this.state.name === "") {
+          data.params["name"] = "Switch";
+        }
+        data.params["lights"] = this.state.lightsAttached;
+        break;
+      case "buttonDimmer":
+        if (this.state.name === "") {
+          data.params["name"] = "Button Dimmer";
+        }
+        data.params["lights"] = this.state.lightsAttached;
+        break;
+      case "knobDimmer":
+        if (this.state.name === "") {
+          data.params["name"] = "Knob Dimmer";
+        }
+        data.params["lights"] = this.state.lightsAttached;
+        break;
+      default:
+        break;
+    }
+    console.log(data);
+    this.props.addDevice(data);
+    this.resetState();
+  }
+
+  render() {
+    const deviceOptions = [
+      {
+        key: "light",
+        text: "Normal Light",
+        value: "regularLight",
+        image: { avatar: true, src: "/img/lightOn.svg" },
+      },
+      {
+        key: "intensity-light",
+        text: "Intensity Light",
+        value: "dimmableLight",
+        image: { avatar: true, src: "/img/intensity-light.svg" },
+      },
+      {
+        key: "smart-plug",
+        text: "Smart Plug",
+        value: "smartPlug",
+        image: { avatar: true, src: "/img/smart-plug.svg" },
+      },
+      {
+        key: "sensor",
+        text: "Sensor",
+        value: "sensor",
+        image: { avatar: true, src: "/img/sensorOn.svg" },
+      },
+      {
+        key: "switch",
+        text: "Switch",
+        value: "switch",
+        image: { avatar: true, src: "/img/switchOn.svg" },
+      },
+      {
+        key: "knobDimmer",
+        text: "Knob Dimmer",
+        value: "knobDimmer",
+        image: { avatar: true, src: "/img/knob.svg" },
+      },
+      {
+        key: "buttonDimmer",
+        text: "Button Dimmer",
+        value: "buttonDimmer",
+        image: { avatar: true, src: "/img/plusMinus.svg" },
+      },
+    ];
+    const sensorOptions = [
+      {
+        key: "temperature",
+        text: "Temperature Sensor",
+        value: "TEMPERATURE",
+        image: { avatar: true, src: "/img/temperature-sensor.svg" },
+      },
+      {
+        key: "humidity",
+        text: "Humidity Sensor",
+        value: "HUMIDITY",
+        image: { avatar: true, src: "/img/humidity-sensor.svg" },
+      },
+      {
+        key: "light",
+        text: "Light Sensor",
+        value: "LIGHT",
+        image: { avatar: true, src: "/img/light-sensor.svg" },
+      },
+      {
+        key: "motion",
+        text: "Motion Sensor",
+        value: "motionSensor",
+        image: { avatar: true, src: "/img/sensorOn.svg" },
+      },
+    ];
+    const availableSwitchDevices = [];
+    const availableDimmerDevices = [];
+    this.props.devices.forEach((d) => {
+      if (
+        d.kind === "regularLight" ||
+        d.kind === "dimmableLight" ||
+        d.kind === "smartPlug"
+      ) {
+        availableSwitchDevices.push({
+          key: d.id,
+          text: d.name,
+          value: d.id,
+        });
+      }
+      if (d.kind === "dimmableLight") {
+        availableDimmerDevices.push({
+          key: d.id,
+          text: d.name,
+          value: d.id,
+        });
+      }
+    });
+    const step1 = (
+      <Dropdown
+        name="typeOfDevice"
+        placeholder="Select a Type of Device"
+        fluid
+        selection
+        onChange={this.setTypeOfDevice}
+        options={deviceOptions}
+      />
+    );
+    const step2 = (typeOfDevice) => {
+      const deviceName = (
+        <div>
+          <Form.Field>
+            <label>Device Name: </label>
+            <Input
+              fluid
+              size={"large"}
+              onChange={this.setDeviceName}
+              focus
+              placeholder="Device Name"
+            />
+          </Form.Field>
+        </div>
+      );
+      const sensorForm = (
+        <Form.Field style={{ marginTop: "1rem" }}>
+          <label>Type of Sensor: </label>
+          <Dropdown
+            name="typeOfDevice"
+            placeholder="Select a Type of Sensor"
+            fluid
+            selection
+            onChange={this.setTypeOfSensor}
+            options={sensorOptions}
+          />
+        </Form.Field>
+      );
+      const switchOptions = (
+        <Form.Field style={{ marginTop: "1rem" }}>
+          <label>Select the lights or smart plugs You Want to Attach: </label>
+          <Dropdown
+            name="typeOfDevice"
+            placeholder="Select Lights"
+            fluid
+            multiple
+            onChange={this.setLightsDimmerSwitch}
+            options={availableSwitchDevices}
+          />
+        </Form.Field>
+      );
+      const dimmerOptions = (
+        <Form.Field style={{ marginTop: "1rem" }}>
+          <label>Select the dimmable lights You Want to Attach: </label>
+          <Dropdown
+            name="typeOfDevice"
+            placeholder="Select Lights"
+            fluid
+            multiple
+            onChange={this.setLightsDimmerSwitch}
+            options={availableDimmerDevices}
+          />
+        </Form.Field>
+      );
+      return (
+        <Form>
+          {deviceName}
+          {this.state.typeOfDevice === "sensor" ? sensorForm : ""}
+          {this.state.typeOfDevice === "switch" ? switchOptions : ""}
+          {this.state.typeOfDevice === "buttonDimmer" ||
+          this.state.typeOfDevice === "knobDimmer"
+            ? dimmerOptions
+            : ""}
+        </Form>
+      );
+    };
+    const steps = [step1, step2()];
+    return (
+      <Modal
+        closeIcon
+        open={this.state.openModal}
+        onClose={this.resetState}
+        trigger={
+          <StyledDiv onClick={this.handleOpen}>
+            <Image src="/img/add.svg" style={{ filter: "invert()" }} />
+          </StyledDiv>
+        }
+        centered={true}
+      >
+        <Modal.Header>Add a New Device</Modal.Header>
+        <Modal.Content>{steps[this.state.step - 1]}</Modal.Content>
+        <Modal.Actions>
+          {this.state.step > 1 ? (
+            <Button
+              onClick={this.previousStep}
+              color="blue"
+              icon
+              labelPosition="left"
+            >
+              <Icon name="left arrow" />
+              Back
+            </Button>
+          ) : (
+            ""
+          )}
+          {this.state.step < steps.length ? (
+            <Button
+              color="blue"
+              onClick={this.nextStep}
+              icon
+              labelPosition="right"
+            >
+              Next
+              <Icon name="right arrow" />
+            </Button>
+          ) : (
+            ""
+          )}
+          {this.state.step === steps.length ? (
+            <Button
+              onClick={this.createDevice}
+              color="blue"
+              icon
+              labelPosition="right"
+            >
+              <Icon name="up arrow" />
+              Finish
+            </Button>
+          ) : (
+            ""
+          )}
+        </Modal.Actions>
+      </Modal>
+    );
+  }
+}

smart-hut/src/components/dashboard/devices/Sensor.js

@@ -0,0 +1,187 @@
+/**
+ * Users can add sensors in their rooms.
+ * Sensors typically measure physical quantities in a room.
+ * You must support temperature sensors, humidity sensors, light sensors (which measure luminosity1).
+ * Sensors have an internal state that cannot be changed by the user.
+ * For this story, make the sensors return a constant value with some small random error.
+ */
+
+/*
+
+  OPTIONAL STATE
+  error: 2.4
+
+  <text style={errorStyle} x={100} y={100} textAnchor="middle" dy="0.6em" fontWeight="bold">
+    &#177;{this.state.error}
+  </text>
+
+
+  errorStyle,
+ */
+
+import React, { Component } from "react";
+import { CircularInput, CircularProgress } from "react-circular-input";
+import {
+  container,
+  sensorText,
+  style,
+  valueStyle,
+  motionSensorInnerCircle,
+  motionSensorOuterCircle,
+  nameMotionStyle,
+  motionSensorIcon,
+  temperatureSensorColors,
+  lightSensorColors,
+  humiditySensorColors,
+  iconSensorStyle,
+} from "./SensorStyle";
+import Settings from "./DeviceSettings";
+import { call } from "../../../client_server";
+import { Image } from "semantic-ui-react";
+
+export default class Sensor extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: 0,
+      motion: false,
+    };
+    this.units = "";
+    this.stateCallback = (e) => {
+      this.setState(Object.assign(this.state, e));
+    };
+
+    this.colors = temperatureSensorColors;
+    this.icon = "temperatureIcon.svg";
+
+    call.socketSubscribe(this.props.device.id, this.stateCallback);
+  }
+
+  componentWillUnmount() {
+    call.socketUnsubscribe(this.props.device.id, this.stateCallback);
+  }
+
+  setName = () => {
+    if (this.props.device.name.length > 15) {
+      return this.props.device.name.slice(0, 12) + "...";
+    }
+    return this.props.device.name;
+  };
+
+  componentDidMount() {
+    if (this.props.device.kind === "sensor") {
+      switch (this.props.device.sensor) {
+        case "TEMPERATURE":
+          this.units = "ºC";
+          this.colors = temperatureSensorColors;
+          this.icon = "temperatureIcon.svg";
+          break;
+        case "HUMIDITY":
+          this.units = "%";
+          this.colors = humiditySensorColors;
+          this.icon = "humidityIcon.svg";
+          break;
+        case "LIGHT":
+          this.units = "lm";
+          this.colors = lightSensorColors;
+          this.icon = "lightSensorIcon.svg";
+          break;
+        default:
+          this.units = "";
+      }
+      this.setState({
+        value: this.props.device.value,
+      });
+    } else {
+      this.setState({
+        detected: this.props.device.detected,
+        motion: true,
+      });
+    }
+  }
+
+  getIcon = () => {
+    if (this.state.detected) {
+      return this.iconOn;
+    }
+    return this.iconOff;
+  };
+
+  render() {
+    const MotionSensor = (props) => {
+      return (
+        <div
+          style={{
+            ...motionSensorOuterCircle,
+            backgroundColor: this.state.detected ? "#505bda" : "#00bdaa",
+          }}
+        >
+          <div
+            style={{
+              ...motionSensorInnerCircle,
+              backgroundColor: this.state.detected ? "#fe346e" : "#00bdaa",
+            }}
+          >
+            <Image style={motionSensorIcon} src="/img/motionSensorIcon.svg" />
+            <span style={nameMotionStyle}>{this.props.device.name}</span>
+          </div>
+        </div>
+      );
+    };
+
+    return (
+      <div style={container}>
+        <Settings
+          deviceId={this.props.device.id}
+          edit={this.props.edit}
+          onChangeData={(id, newSettings) =>
+            this.props.onChangeData(id, newSettings)
+          }
+        />
+        {this.state.motion ? (
+          <MotionSensor />
+        ) : (
+          <React.Fragment>
+            <CircularInput
+              value={
+                this.props.device.sensor === "LIGHT"
+                  ? this.state.value / 2000
+                  : this.state.value / 100
+              }
+              style={style}
+            >
+              <CircularProgress
+                strokeWidth="2rem"
+                stroke={this.colors.progress}
+                fill={this.colors.circle}
+              />
+              <text
+                style={{ ...valueStyle, fill: this.colors.text }}
+                x={100}
+                y={110}
+                textAnchor="middle"
+                dy="0.3em"
+                fontWeight="bold"
+                fill={this.colors.text}
+              >
+                {+(Math.round(this.state.value + "e+2") + "e-2")}
+                {this.units}
+              </text>
+              <text
+                style={{ ...sensorText, fill: this.colors.text }}
+                x={100}
+                y={150}
+                textAnchor="middle"
+                dy="0.4em"
+                fontWeight="bold"
+              >
+                {this.setName()} ({this.props.device.id})
+              </text>
+            </CircularInput>
+            <Image style={iconSensorStyle} src={`/img/${this.icon}`} />
+          </React.Fragment>
+        )}
+      </div>
+    );
+  }
+}

smart-hut/src/components/dashboard/devices/SensorStyle.js

@@ -0,0 +1,105 @@
+export const style = {
+  width: "10rem",
+  height: "10rem",
+  position: "absolute",
+  top: "0",
+  left: "0",
+};
+
+export const container = {
+  width: "10rem",
+  height: "10rem",
+  borderRadius: "100%",
+  border: "none",
+  position: "relative",
+};
+
+export const sensorText = {
+  fill: "#3e99ff",
+  fontSize: "1.2rem",
+  fontFamily: "Lato",
+  overflow: "hidden",
+  whiteSpace: "nowrap",
+  textOverflow: "ellipsis",
+};
+
+export const valueStyle = {
+  fill: "#3e99ff",
+  fontSize: "2.4rem",
+  fontFamily: "Lato",
+};
+
+export const errorStyle = {
+  fill: "#ff4050",
+  fontSize: "1.5rem",
+  fontFamily: "Lato",
+  textShadow: "1px 1px 0.5px rgba(0, 0, 0, .2)",
+};
+
+export const motionSensorInnerCircle = {
+  position: "absolute",
+  top: "50%",
+  left: "50%",
+  transform: "translate(-50%, -50%)",
+  width: "8rem",
+  height: "8rem",
+  borderRadius: "100%",
+  border: "none",
+};
+
+export const motionSensorOuterCircle = {
+  textAlign: "center",
+  cursor: "pointer",
+  position: "relative",
+  width: "10rem",
+  height: "10rem",
+  borderRadius: "100%",
+  border: "none",
+  /*boxShadow: "3px 2px 10px 5px #ccc",*/
+};
+
+export const nameMotionStyle = {
+  position: "absolute",
+  top: "50%",
+  left: "50%",
+  transform: "translateX(-50%)",
+  fontSize: "1.2rem",
+  overflow: "hidden",
+  whiteSpace: "nowrap",
+  textOverflow: "ellipsis",
+};
+
+export const motionSensorIcon = {
+  width: "2rem",
+  height: "2rem",
+  position: "absolute",
+  top: "15%",
+  left: "50%",
+  transform: "translateX(-50%)",
+};
+export const temperatureSensorColors = {
+  circle: "#323232",
+  progress: "#ff1e56",
+  text: "white",
+};
+
+export const lightSensorColors = {
+  circle: "#000839",
+  progress: "#ffa41b",
+  text: "white",
+};
+
+export const humiditySensorColors = {
+  circle: "#005082",
+  progress: "#00a8cc",
+  text: "white",
+};
+
+export const iconSensorStyle = {
+  position: "absolute",
+  top: "20%",
+  left: "50%",
+  transform: "translateX(-50%)",
+  width: "2rem",
+  height: "2rem",
+};

smart-hut/src/components/dashboard/devices/SettingsModal.js

@@ -0,0 +1,111 @@
+import React, { Component, useState } from "react";
+import { Button, Checkbox, Form, Icon, Header, Modal } from "semantic-ui-react";
+
+const DeleteModal = (props) => (
+  <Modal trigger={<Button color="red">Remove</Button>} closeIcon>
+    <Header icon="archive" content="Are you sure ?" />
+    <Modal.Actions>
+      <Button color="red">
+        <Icon name="remove" /> No
+      </Button>
+      <Button onClick={() => props.removeDevice()} color="green">
+        <Icon name="checkmark" /> Yes
+      </Button>
+    </Modal.Actions>
+  </Modal>
+);
+
+const SettingsForm = (props) => {
+  const handleInputChange = (e) => {
+    const { name, value } = e.target;
+    setValues({ ...values, [name]: value });
+  };
+
+  const handleCheckboxChange = (e, d) => {
+    const { name, checked } = d;
+    setValues({ ...values, [name]: checked });
+  };
+
+  const [values, setValues] = useState({ name: "" });
+
+  return (
+    <Form>
+      <Form.Field>
+        <label>New Name: </label>
+        <input
+          autoComplete="off"
+          name="name"
+          onChange={handleInputChange}
+          value={values.name}
+          placeholder="Device name"
+        />
+      </Form.Field>
+
+      {props.type === "smart-plug" ? (
+        <Form.Field>
+          <Checkbox
+            slider
+            name={"reset"}
+            onClick={handleCheckboxChange}
+            label="Reset Energy Consumption"
+          />
+        </Form.Field>
+      ) : (
+        ""
+      )}
+      <Form.Field>
+        <DeleteModal removeDevice={() => props.removeDevice(values)} />
+      </Form.Field>
+      <Button
+        onClick={() => props.saveFunction(values)}
+        color="blue"
+        type="submit"
+      >
+        Save
+      </Button>
+    </Form>
+  );
+};
+
+export default class SettingsModal extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      open: true,
+    };
+  }
+
+  handleClose = () => {
+    this.setState({ open: false });
+  };
+
+  saveSettings = (device) => {
+    // TODO Here there should be all the connections to save the data in the backend
+    console.log("SAVED: ", device);
+    if (device.name.length > 0) {
+      this.props.updateDevice(device);
+    }
+
+    this.props.openModal();
+  };
+
+  render() {
+    const SettingsModal = () => (
+      <Modal
+        open={true}
+        onOpen={this.props.openModal}
+        onClose={this.props.openModal}
+      >
+        <Modal.Header>Settings of {this.props.device.name}</Modal.Header>
+        <Modal.Content>
+          <SettingsForm
+            type={this.props.device.type}
+            removeDevice={this.props.removeDevice}
+            saveFunction={this.saveSettings}
+          />
+        </Modal.Content>
+      </Modal>
+    );
+    return <SettingsModal />;
+  }
+}

smart-hut/src/components/dashboard/devices/SmartPlug.js

@@ -0,0 +1,117 @@
+/**
+ A smart plug is a plug that has a boolean internal state, i.e., that can be turned on or off, either with the
+ SmartHut interface or by a switch.
+ The smart plug also stores the total energy consumed while the plug is active, in terms of kilowatt-hours 2(kWh) .
+ The user can reset this value.
+ **/
+import React, { Component } from "react";
+import {
+  BottomPanel,
+  StyledDiv,
+  editModeIconStyle,
+  editModeStyleLeft,
+} from "./styleComponents";
+import Settings from "./DeviceSettings";
+import { Image } from "semantic-ui-react";
+import {
+  energyConsumedStyle,
+  imageStyle,
+  kwhStyle,
+  nameStyle,
+} from "./SmartPlugStyle";
+import { call } from "../../../client_server";
+
+export default class SmartPlug extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      turnedOn: false,
+      energyConsumed: 0, // kWh
+    };
+    this.iconOn = "/img/smart-plug.svg";
+    this.iconOff = "/img/smart-plug-off.svg";
+
+    this.stateCallback = (e) => {
+      this.setState(
+        Object.assign(this.state, {
+          energyConsumed: (e.totalConsumption / 1000).toFixed(3),
+          turnedOn: e.on,
+        })
+      );
+    };
+
+    call.socketSubscribe(this.props.device.id, this.stateCallback);
+  }
+
+  componentWillUnmount() {
+    call.socketUnsubscribe(this.props.device.id, this.stateCallback);
+  }
+  onClickDevice = () => {
+    this.props.device.on = !this.state.turnedOn;
+    call.deviceUpdate(this.props.device, "smartPlug").then((res) => {
+      if (res.status === 200) {
+        this.setState((prevState) => ({ turnedOn: !prevState.turnedOn }));
+      }
+    });
+  };
+
+  resetSmartPlug = () => {
+    call.smartPlugReset(this.props.device.id).then((res) => {
+      if (res.status === 200) {
+        this.setState({
+          energyConsumed: (res.data.totalConsumption / 1000).toFixed(3),
+        });
+      }
+    });
+  };
+
+  getIcon = () => {
+    if (this.state.turnedOn) {
+      return this.iconOn;
+    }
+    return this.iconOff;
+  };
+
+  componentDidMount() {
+    this.setState({
+      turnedOn: this.props.device.on,
+      energyConsumed: (this.props.device.totalConsumption / 1000).toFixed(3),
+    });
+  }
+
+  render() {
+    return (
+      <StyledDiv onClick={this.props.edit.mode ? () => {} : this.onClickDevice}>
+        <Settings
+          deviceId={this.props.device.id}
+          edit={this.props.edit}
+          onChangeData={(id, newSettings) =>
+            this.props.onChangeData(id, newSettings)
+          }
+        />
+        {this.props.edit.mode ? (
+          <span style={editModeStyleLeft} onClick={this.resetSmartPlug}>
+            <img src="/img/refresh.svg" alt="" style={editModeIconStyle} />
+          </span>
+        ) : (
+          ""
+        )}
+        <Image src={this.getIcon()} style={imageStyle} />
+        <span style={nameStyle}>
+          {this.props.device.name} ({this.props.device.id})
+        </span>
+
+        <BottomPanel
+          style={
+            this.state.turnedOn
+              ? { backgroundColor: "#505bda" }
+              : { backgroundColor: "#1a2849" }
+          }
+        >
+          <span style={energyConsumedStyle}>{this.state.energyConsumed}</span>
+          <span style={kwhStyle}>KWh</span>
+        </BottomPanel>
+      </StyledDiv>
+    );
+  }
+}

smart-hut/src/components/dashboard/devices/SmartPlugStyle.js

@@ -0,0 +1,38 @@
+export const energyConsumedStyle = {
+  color: "white",
+  fontSize: "1.3rem",
+  position: "absolute",
+  top: "20%",
+  left: "50%",
+  transform: "translateX(-50%)",
+};
+
+export const kwhStyle = {
+  color: "white",
+  fontSize: "1rem",
+  position: "absolute",
+  top: "50%",
+  left: "50%",
+  transform: "translateX(-50%)",
+};
+
+export const imageStyle = {
+  width: "2rem",
+  height: "auto",
+  position: "absolute",
+  top: "5%",
+  left: "50%",
+  transform: "translateX(-35%)",
+  filter: "drop-shadow( 1px 1px 0.5px rgba(0, 0, 0, .25))",
+};
+
+export const nameStyle = {
+  color: "black",
+  position: "absolute",
+  top: "30%",
+  left: "50%",
+  transform: "translateX(-50%)",
+  overflow: "hidden",
+  whiteSpace: "nowrap",
+  textOverflow: "ellipsis",
+};