Add device feature finished
This commit is contained in:
christiancp
parent
99f1e16927
commit
edf1706986
9 changed files with 227 additions and 91 deletions
1
smart-hut/public/img/dimmer.svg
Normal file
1
smart-hut/public/img/dimmer.svg
Normal file
|
|
@ -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>
|
||||||
|
After Width: | Height: | Size: 3.4 KiB |
1
smart-hut/public/img/humidity-sensor.svg
Normal file
1
smart-hut/public/img/humidity-sensor.svg
Normal file
|
|
@ -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>
|
||||||
|
After Width: | Height: | Size: 2.7 KiB |
1
smart-hut/public/img/intensity-light.svg
Normal file
1
smart-hut/public/img/intensity-light.svg
Normal file
|
|
@ -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>
|
||||||
|
After Width: | Height: | Size: 3 KiB |
1
smart-hut/public/img/light-sensor.svg
Normal file
1
smart-hut/public/img/light-sensor.svg
Normal file
|
|
@ -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>
|
||||||
|
After Width: | Height: | Size: 4.3 KiB |
14
smart-hut/public/img/temperature-sensor.svg
Normal file
14
smart-hut/public/img/temperature-sensor.svg
Normal file
|
|
@ -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>
|
||||||
|
After Width: | Height: | Size: 3 KiB |
|
|
@ -98,7 +98,8 @@ class App extends Component {
|
||||||
</Route>
|
</Route>
|
||||||
<Route path="/signup" exact component={Signup} />
|
<Route path="/signup" exact component={Signup} />
|
||||||
<Route path="/dashboard" >
|
<Route path="/dashboard" >
|
||||||
{this.state.loggedIn ? <Dashboard tkn={this.state.token} logout={this.logout} /> : <Redirect to="/login" />}
|
{/* ToDO change this back */}
|
||||||
|
{!this.state.loggedIn ? <Dashboard tkn={this.state.token} logout={this.logout} /> : <Redirect to="/login" />}
|
||||||
</Route>
|
</Route>
|
||||||
<Route path="/forgot-password" >
|
<Route path="/forgot-password" >
|
||||||
<ForgotPass />
|
<ForgotPass />
|
||||||
|
|
|
||||||
|
|
@ -74,7 +74,6 @@ class Panel extends Component {
|
||||||
|
|
||||||
editModeController = (e) => {
|
editModeController = (e) => {
|
||||||
this.setState((prevState) => ({editMode: !prevState.editMode}));
|
this.setState((prevState) => ({editMode: !prevState.editMode}));
|
||||||
console.log("CAMBIADO", this.state.editMode)
|
|
||||||
};
|
};
|
||||||
|
|
||||||
changeDeviceData = (deviceId, newSettings) => {
|
changeDeviceData = (deviceId, newSettings) => {
|
||||||
|
|
@ -132,7 +131,7 @@ class Panel extends Component {
|
||||||
<Switch onChangeData={this.changeDeviceData} device={devices[6]} edit={edit}/>
|
<Switch onChangeData={this.changeDeviceData} device={devices[6]} edit={edit}/>
|
||||||
</Grid.Column>
|
</Grid.Column>
|
||||||
<Grid.Column>
|
<Grid.Column>
|
||||||
<NewDevice/>
|
<NewDevice devices={devices}/>
|
||||||
</Grid.Column>
|
</Grid.Column>
|
||||||
</Grid>
|
</Grid>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,6 @@
|
||||||
import React, {Component} from 'react';
|
import React, {Component} from 'react';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import {Button, Dropdown, Form, Image} from "semantic-ui-react";
|
import {Button, Dropdown, Form, Icon, Image, Input, Modal} from "semantic-ui-react";
|
||||||
import {addDeviceFormStyle} from "./styleComponents";
|
|
||||||
import {deviceList} from "./TypesOfDevices";
|
|
||||||
|
|
||||||
const StyledDiv = styled.div`
|
const StyledDiv = styled.div`
|
||||||
background-color : #ff4050;
|
background-color : #ff4050;
|
||||||
|
|
@ -19,90 +17,208 @@ const StyledDiv = styled.div`
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
class NewDeviceForm extends Component {
|
|
||||||
constructor(props) {
|
|
||||||
super(props);
|
|
||||||
}
|
|
||||||
|
|
||||||
formSelector = (option) => {
|
|
||||||
switch (option) {
|
|
||||||
case "Light":
|
|
||||||
return <LightForm/>;
|
|
||||||
case "Sensor":
|
|
||||||
return "This is a sensor form";
|
|
||||||
default:
|
|
||||||
return "This is a default text"
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
render() {
|
|
||||||
let options = [];
|
|
||||||
deviceList.forEach((e, i) => {
|
|
||||||
options.push({key: i, text: e, value: e})
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Form style={addDeviceFormStyle}>
|
|
||||||
<Form.Field>
|
|
||||||
<label style={{color: "white"}}>Select the type of device</label>
|
|
||||||
<Dropdown clearable options={options} selection/>
|
|
||||||
</Form.Field>
|
|
||||||
|
|
||||||
<Button type='submit' onClick={this.saveChanges}>Save</Button>
|
|
||||||
</Form>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
class LightForm extends Component {
|
|
||||||
constructor(props) {
|
|
||||||
super(props);
|
|
||||||
this.state = {}
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
let options = [
|
|
||||||
{
|
|
||||||
key: 1,
|
|
||||||
value: "common",
|
|
||||||
text: "Normal Light"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 1,
|
|
||||||
value: "intensity",
|
|
||||||
text: "Supports intensity level"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
return (
|
|
||||||
<Form.Field>
|
|
||||||
<label style={{color: "white"}}>Type of light</label>
|
|
||||||
<Dropdown clearable options={options} selection/>
|
|
||||||
</Form.Field>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
export default class NewDevice extends Component {
|
export default class NewDevice extends Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
this.state = {
|
this.state = {
|
||||||
openForm: false
|
step: 1,
|
||||||
}
|
openModal : false
|
||||||
|
};
|
||||||
|
this.baseState = this.state
|
||||||
}
|
}
|
||||||
|
|
||||||
onClickDevice = (event) => {
|
handleOpen = () => {this.setState({openModal : true})};
|
||||||
this.setState((prevState) => ({openForm: !prevState.openForm}));
|
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) => {
|
||||||
|
this.setState({typeOfDevice: d.value});
|
||||||
|
};
|
||||||
|
|
||||||
|
setDeviceName = (e, d) => {
|
||||||
|
this.setState({deviceName: d.value});
|
||||||
|
};
|
||||||
|
|
||||||
|
setTypeOfSensor = (e, d) => {
|
||||||
|
this.setState({typeOfSensor: d.value});
|
||||||
|
};
|
||||||
|
|
||||||
|
setLightsDimmerSwitch = (e, d) => {
|
||||||
|
this.setState({lightsAttached : d.value});
|
||||||
|
};
|
||||||
|
|
||||||
|
createDevice = () => {
|
||||||
|
// Connect to the backend and create device here.
|
||||||
|
this.resetState();
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
const deviceOptions = [
|
||||||
|
{
|
||||||
|
key: 'light',
|
||||||
|
text: 'Normal Light',
|
||||||
|
value: 'light',
|
||||||
|
image: {avatar: true, src: '/img/lightOn.svg'},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'intensity-light',
|
||||||
|
text: 'Intensity Light',
|
||||||
|
value: 'intensity-light',
|
||||||
|
image: {avatar: true, src: '/img/intensity-light.svg'},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'smart-plug',
|
||||||
|
text: 'Smart Plug',
|
||||||
|
value: 'smart-plug',
|
||||||
|
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: 'dimmer',
|
||||||
|
text: 'Dimmer',
|
||||||
|
value: 'dimmer',
|
||||||
|
image: {avatar: true, src: '/img/dimmer.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: "motion",
|
||||||
|
image: {avatar: true, src: '/img/sensorOn.svg'},
|
||||||
|
}
|
||||||
|
];
|
||||||
|
const availableLights = [];
|
||||||
|
this.props.devices.forEach(d => {
|
||||||
|
availableLights.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 switchDimmerOptions = (<Form.Field style={{marginTop : "1rem"}}>
|
||||||
|
<label>Select the Lights You Want to Attach: </label>
|
||||||
|
<Dropdown
|
||||||
|
name="typeOfDevice"
|
||||||
|
placeholder='Select Lights'
|
||||||
|
fluid
|
||||||
|
multiple
|
||||||
|
onChange={this.setLightsDimmerSwitch}
|
||||||
|
options={availableLights}
|
||||||
|
/>
|
||||||
|
</Form.Field>);
|
||||||
return (
|
return (
|
||||||
<StyledDiv onClick={this.onClickDevice}>
|
<Form>
|
||||||
|
{deviceName}
|
||||||
|
{this.state.typeOfDevice === "sensor" ? (sensorForm) : ""}
|
||||||
|
{this.state.typeOfDevice === "switch" || this.state.typeOfDevice === "dimmer" ?
|
||||||
|
(switchDimmerOptions) : ""
|
||||||
|
}
|
||||||
|
</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()"}}/>
|
<Image src="/img/add.svg" style={{filter: "invert()"}}/>
|
||||||
{this.state.openForm ? (
|
</StyledDiv>} centered={true}>
|
||||||
<NewDeviceForm/>
|
<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>
|
||||||
) : ""}
|
) : ""}
|
||||||
</StyledDiv>
|
{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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -61,10 +61,12 @@ export default class Dashboard extends Component{
|
||||||
return(
|
return(
|
||||||
<div style={{height : "110vh", background: '#1b1c1d'}}>
|
<div style={{height : "110vh", background: '#1b1c1d'}}>
|
||||||
<Grid >
|
<Grid >
|
||||||
|
|
||||||
<Grid.Row color='black'>
|
<Grid.Row color='black'>
|
||||||
|
{/*TODO change this back
|
||||||
<Grid.Column>
|
<Grid.Column>
|
||||||
<MyHeader />
|
<MyHeader />
|
||||||
</Grid.Column>
|
</Grid.Column>*/}
|
||||||
</Grid.Row>
|
</Grid.Row>
|
||||||
<Grid.Row color='black'>
|
<Grid.Row color='black'>
|
||||||
<Grid.Column width={3}>
|
<Grid.Column width={3}>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue