Working on conflicts
This commit is contained in:
christiancp
parent
024e40deca
commit
ab1e911ccd
14 changed files with 381 additions and 107 deletions
14
smart-hut/package-lock.json
generated
14
smart-hut/package-lock.json
generated
|
|
@ -10483,6 +10483,12 @@
|
|||
"resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz",
|
||||
"integrity": "sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw="
|
||||
},
|
||||
"prettier": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.0.1.tgz",
|
||||
"integrity": "sha512-piXGBcY1zoFOG0MvHpNE5reAGseLmaCRifQ/fmfF49BcYkInEs/naD/unxGNAeOKFA5+JxVrPyMvMlpzcd20UA==",
|
||||
"dev": true
|
||||
},
|
||||
"pretty-bytes": {
|
||||
"version": "5.3.0",
|
||||
"resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.3.0.tgz",
|
||||
|
|
@ -10897,6 +10903,14 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"react-device-detect": {
|
||||
"version": "1.11.14",
|
||||
"resolved": "https://registry.npmjs.org/react-device-detect/-/react-device-detect-1.11.14.tgz",
|
||||
"integrity": "sha512-WSjch241xI+rXHVtJaSYxNUT2WAykzfJgMI2Hg9xjNNTlIZdJu/fmWf4iedNH7qzFq+JaJ6fDJu3mrKFLerKBw==",
|
||||
"requires": {
|
||||
"ua-parser-js": "^0.7.20"
|
||||
}
|
||||
},
|
||||
"react-dom": {
|
||||
"version": "16.12.0",
|
||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.12.0.tgz",
|
||||
|
|
|
|||
12
smart-hut/public/img/humidityIcon.svg
Normal file
12
smart-hut/public/img/humidityIcon.svg
Normal file
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 4.7 KiB |
58
smart-hut/public/img/lightSensorIcon.svg
Normal file
58
smart-hut/public/img/lightSensorIcon.svg
Normal file
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 2.9 KiB |
62
smart-hut/public/img/motionSensorIcon.svg
Normal file
62
smart-hut/public/img/motionSensorIcon.svg
Normal file
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 5.6 KiB |
18
smart-hut/public/img/temperatureIcon.svg
Normal file
18
smart-hut/public/img/temperatureIcon.svg
Normal file
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 4.2 KiB |
|
|
@ -9,14 +9,13 @@
|
|||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import { iconStyle, StyledDiv, ThumbText } from "./styleComponents";
|
||||
import { iconStyle, StyledDiv, BottomPanel, ThumbText } from "./styleComponents";
|
||||
import Settings from "./DeviceSettings";
|
||||
import { Image } from "semantic-ui-react";
|
||||
import {
|
||||
CircularInput,
|
||||
CircularProgress,
|
||||
CircularThumb,
|
||||
CircularTrack,
|
||||
} from "react-circular-input";
|
||||
import {
|
||||
LightDimmerContainer,
|
||||
|
|
@ -27,7 +26,9 @@ import {
|
|||
CircularThumbStyle,
|
||||
knobIcon
|
||||
} from "./LightStyle";
|
||||
import { call } from "../../../client_server";
|
||||
import { call } from '../../../client_server';
|
||||
|
||||
|
||||
|
||||
export default class Light extends Component {
|
||||
constructor(props) {
|
||||
|
|
@ -37,33 +38,17 @@ export default class Light extends Component {
|
|||
intensity: props.device.intensity,
|
||||
};
|
||||
this.iconOn = "/img/lightOn.svg";
|
||||
this.iconOff = "/img/lightOff.svg";
|
||||
|
||||
this.stateCallback = (e) => {
|
||||
const update = {};
|
||||
if (e.kind === "dimmableLight") {
|
||||
update.intensity = e.intensity;
|
||||
} else {
|
||||
update.turnedOn = e.on;
|
||||
}
|
||||
|
||||
this.setState(Object.assign(this.state, update));
|
||||
};
|
||||
|
||||
call.socketSubscribe(this.props.device.id, this.stateCallback);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
call.socketUnsubscribe(this.props.device.id, this.stateCallback);
|
||||
this.iconOff = "/img/lightOff.svg"
|
||||
}
|
||||
|
||||
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 }));
|
||||
}
|
||||
});
|
||||
call.deviceUpdate(this.props.device, 'regularLight')
|
||||
.then(res => {
|
||||
if (res.status === 200) {
|
||||
this.setState((prevState) => ({ turnedOn: !prevState.turnedOn }));
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
|
||||
|
|
@ -90,6 +75,7 @@ export default class Light extends Component {
|
|||
};
|
||||
|
||||
|
||||
|
||||
render() {
|
||||
const intensityLightView = (
|
||||
<div style={LightDimmerContainer}>
|
||||
|
|
@ -111,24 +97,24 @@ export default class Light extends Component {
|
|||
</div>
|
||||
);
|
||||
|
||||
|
||||
const normalLightView = (
|
||||
<StyledDiv>
|
||||
<div onClick={this.props.edit.mode ? () => {
|
||||
} : this.onClickDevice}>
|
||||
<Image src={this.getIcon()} style={iconStyle} />
|
||||
<h5 style={nameStyle}>{this.props.device.name}</h5>
|
||||
</div>
|
||||
</StyledDiv>
|
||||
|
||||
);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<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}</h5>
|
||||
</BottomPanel>
|
||||
</div>
|
||||
</StyledDiv>
|
||||
);
|
||||
|
||||
return (
|
||||
<div>
|
||||
{
|
||||
this.props.device.intensity ? (intensityLightView) : (normalLightView)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,4 @@
|
|||
export const style = {
|
||||
width: "10rem",
|
||||
height: "10rem",
|
||||
position: "absolute",
|
||||
top: "0",
|
||||
left: "0",
|
||||
};
|
||||
|
||||
export const valueStyle = {
|
||||
fill: "#3e99ff",
|
||||
fontSize: "2.5rem",
|
||||
|
|
@ -30,10 +24,10 @@ export const textStyle = {
|
|||
export const nameStyle = {
|
||||
fontSize: "1rem",
|
||||
position: "absolute",
|
||||
top: "50%",
|
||||
top: "30%",
|
||||
left: "50%",
|
||||
transform: "translateX(-50%)",
|
||||
color: "black",
|
||||
color: "white",
|
||||
};
|
||||
|
||||
export const LightDimmerStyle = {
|
||||
|
|
|
|||
|
|
@ -147,18 +147,18 @@ export default class NewDevice extends Component {
|
|||
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' },
|
||||
},
|
||||
{
|
||||
key: "knobDimmer",
|
||||
text: "Knob Dimmer",
|
||||
value: "knobDimmer",
|
||||
image: { avatar: true, src: "/img/dimmer.svg" },
|
||||
},
|
||||
];
|
||||
const sensorOptions = [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -25,7 +25,20 @@ import {
|
|||
CircularProgress,
|
||||
CircularTrack,
|
||||
} from "react-circular-input";
|
||||
import { sensorText, style, valueStyle } from "./SensorStyle";
|
||||
import {
|
||||
container,
|
||||
sensorText,
|
||||
style,
|
||||
valueStyle,
|
||||
motionSensorInnerCircle,
|
||||
motionSensorOuterCircle,
|
||||
nameMotionStyle,
|
||||
motionSensorIcon,
|
||||
temperatureSensorColors,
|
||||
lightSensorColors,
|
||||
humiditySensorColors,
|
||||
iconSensorStyle
|
||||
} from "./SensorStyle";
|
||||
import Settings from "./DeviceSettings";
|
||||
import { StyledDiv } from "./styleComponents";
|
||||
import { call } from "../../../client_server";
|
||||
|
|
@ -45,8 +58,8 @@ export default class Sensor extends Component {
|
|||
this.setState(Object.assign(this.state, e));
|
||||
};
|
||||
|
||||
this.iconOn = "/img/lightOn.svg";
|
||||
this.iconOff = "/img/lightOff.svg";
|
||||
this.colors = temperatureSensorColors;
|
||||
this.icon = "temperatureIcon.svg";
|
||||
|
||||
call.socketSubscribe(this.props.device.id, this.stateCallback);
|
||||
}
|
||||
|
|
@ -67,12 +80,18 @@ export default class Sensor extends Component {
|
|||
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 = "";
|
||||
|
|
@ -96,8 +115,26 @@ export default class Sensor extends Component {
|
|||
};
|
||||
|
||||
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 (
|
||||
<StyledDiv>
|
||||
<div style={container}>
|
||||
<Settings
|
||||
deviceId={this.props.device.id}
|
||||
edit={this.props.edit}
|
||||
|
|
@ -106,38 +143,42 @@ export default class Sensor extends Component {
|
|||
}
|
||||
/>
|
||||
{this.state.motion ? (
|
||||
<div onClick={this.props.edit.mode ? () => {} : this.onClickDevice}>
|
||||
<Image src={this.getIcon()} style={iconStyle} />
|
||||
<h5 style={nameStyle}>Motion Sensor</h5>
|
||||
</div>
|
||||
<MotionSensor />
|
||||
) : (
|
||||
<CircularInput value={this.state.value / 100} style={style}>
|
||||
<CircularTrack />
|
||||
<CircularProgress />
|
||||
<text
|
||||
style={valueStyle}
|
||||
x={100}
|
||||
y={80}
|
||||
textAnchor="middle"
|
||||
dy="0.3em"
|
||||
fontWeight="bold"
|
||||
>
|
||||
{+(Math.round(this.state.value + "e+2") + "e-2")}
|
||||
{this.units}
|
||||
</text>
|
||||
<text
|
||||
style={sensorText}
|
||||
x={100}
|
||||
y={150}
|
||||
textAnchor="middle"
|
||||
dy="0.3em"
|
||||
fontWeight="bold"
|
||||
>
|
||||
{this.setName()}
|
||||
</text>
|
||||
</CircularInput>
|
||||
)}
|
||||
</StyledDiv>
|
||||
<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()}
|
||||
</text>
|
||||
</CircularInput>
|
||||
<Image style={iconSensorStyle} src={`/img/${this.icon}`} />
|
||||
</React.Fragment>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,18 +6,24 @@ export const style = {
|
|||
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",
|
||||
textShadow: "1px 1px 0.5px rgba(0, 0, 0, .2)",
|
||||
};
|
||||
|
||||
export const valueStyle = {
|
||||
fill: "#3e99ff",
|
||||
fontSize: "2.5rem",
|
||||
fontSize: "2.4rem",
|
||||
fontFamily: "Lato",
|
||||
textShadow: "1px 1px 0.5px rgba(0, 0, 0, .2)",
|
||||
};
|
||||
|
||||
export const errorStyle = {
|
||||
|
|
@ -26,3 +32,69 @@ export const errorStyle = {
|
|||
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",
|
||||
}
|
||||
|
||||
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",
|
||||
|
||||
}
|
||||
|
|
@ -4,13 +4,14 @@
|
|||
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 { StyledDiv, BottomPanel } from "./styleComponents";
|
||||
import React, { Component } from 'react';
|
||||
import { BottomPanel, StyledDiv } from "./styleComponents";
|
||||
import Settings from "./DeviceSettings";
|
||||
import { Image } from "semantic-ui-react";
|
||||
import { energyConsumedStyle, imageStyle, nameStyle, kwhStyle } from "./SmartPlugStyle";
|
||||
import { energyConsumedStyle, imageStyle, kwhStyle, nameStyle } from "./SmartPlugStyle";
|
||||
import { call } from "../../../client_server";
|
||||
|
||||
|
||||
export default class SmartPlug extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
|
@ -33,6 +34,18 @@ export default class SmartPlug extends Component {
|
|||
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 }));
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
getIcon = () => {
|
||||
if (this.state.turnedOn) {
|
||||
return this.iconOn;
|
||||
|
|
@ -47,12 +60,6 @@ export default class SmartPlug extends Component {
|
|||
});
|
||||
}
|
||||
|
||||
|
||||
componentWillUnmount() {
|
||||
call.socketUnsubscribe(this.props.device.id, this.stateCallback);
|
||||
}
|
||||
|
||||
|
||||
render() {
|
||||
return (
|
||||
<StyledDiv onClick={this.props.edit.mode ? () => {
|
||||
|
|
|
|||
|
|
@ -9,8 +9,7 @@ import React, { Component } from 'react';
|
|||
import { BottomPanel, StyledDiv } from "./styleComponents";
|
||||
import Settings from "./DeviceSettings";
|
||||
import { Image } from "semantic-ui-react";
|
||||
import { imageStyle, nameStyle } from "./SwitchStyle";
|
||||
import { energyConsumedStyle } from "./SmartPlugStyle";
|
||||
import { imageStyle, nameStyle, turnedOnStyle } from "./SwitchStyle";
|
||||
import { call } from "../../../client_server";
|
||||
|
||||
export default class Switch extends Component {
|
||||
|
|
@ -70,9 +69,10 @@ export default class Switch extends Component {
|
|||
<span style={nameStyle}>{this.props.device.name}</span>
|
||||
|
||||
<BottomPanel style={this.state.turnedOn ? { backgroundColor: "#505bda" } : { backgroundColor: "#1a2849" }}>
|
||||
<span style={energyConsumedStyle}>{this.state.turnedOn ? "ON" : "OFF"}</span>
|
||||
<span style={turnedOnStyle}>{this.state.turnedOn ? "ON" : "OFF"}</span>
|
||||
</BottomPanel>
|
||||
</StyledDiv>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,3 +14,14 @@ export const nameStyle = {
|
|||
left: "50%",
|
||||
transform: "translateX(-50%)",
|
||||
};
|
||||
|
||||
|
||||
|
||||
export const turnedOnStyle = {
|
||||
color: "white",
|
||||
fontSize: "1.3rem",
|
||||
position: "absolute",
|
||||
top: "20%",
|
||||
left: "50%",
|
||||
transform: "translateX(-50%)"
|
||||
};
|
||||
|
|
@ -49,13 +49,12 @@ export const editModeIconStyle = {
|
|||
};
|
||||
|
||||
export const iconStyle = {
|
||||
width: "4rem",
|
||||
width: "3.5rem",
|
||||
height: "auto",
|
||||
position: "absolute",
|
||||
top: "20%",
|
||||
top: "10%",
|
||||
left: "50%",
|
||||
transform: "translateX(-50%)",
|
||||
filter: "drop-shadow( 1px 1px 0.5px rgba(0, 0, 0, .25))"
|
||||
};
|
||||
export const nameStyle = {
|
||||
position: "absolute",
|
||||
|
|
|
|||
Loading…
Reference in a new issue