ammar/syncrow-web
1
0
Fork 0
mirror of https://github.com/SyncrowIOT/web.git synced 2025-07-09 22:57:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

added circular border

Browse Source
This commit is contained in:
hannathkadher
2024-10-09 16:04:05 +04:00
parent e09dc966e0
commit b87bbb9a62
13 changed files with 437 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
assets/icons/1_Gang_switch_icon.svg Normal file
View File

@ -0,0 +1,11 @@
<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="1Gang switch">
<path id="Vector" d="M47.5178 49.0692L44.2102 50H26.1635H24.9999H23.8364H1.55138C0.694554 50 0 49.3054 0 48.4486V1.55138C0 0.694554 0.694554 0 1.55138 0H23.8353H25.1532H26.1929H44.2819L47.8281 1.55138C48.6849 1.55138 49.3794 2.24594 49.3794 3.10277L49.0692 47.5178C49.0692 48.3746 48.3746 49.0692 47.5178 49.0692Z" fill="#E9E9E9"/>
<g id="Group">
<path id="Vector_2" d="M48.4486 0H43.7944C44.6513 0 45.3458 0.694554 45.3458 1.55138V48.4486C45.3458 49.3054 44.6513 50 43.7944 50H48.4486C49.3054 50 50 49.3054 50 48.4486V1.55138C50 0.694554 49.3054 0 48.4486 0Z" fill="#D1D1D1"/>
</g>
<g id="Group_2">
<path id="Vector_3" opacity="0.6" d="M26.7188 39.7899V41.6516C26.7188 42.5084 26.1941 43.203 25.5469 43.203H20.3906C19.7434 43.203 19.2188 42.5084 19.2188 41.6516V39.7899C19.2188 38.9331 19.7434 38.2385 20.3906 38.2385H25.5469C26.1941 38.2385 26.7188 38.9331 26.7188 39.7899Z" fill="#023DFE" fill-opacity="0.5"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

7
assets/icons/2_Gang_Switch_icon.svg Normal file
View File

@ -0,0 +1,7 @@
<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M47.5178 49.0692L44.2102 50H26.1635H24.9999H23.8364H1.55138C0.694554 50 0 49.3054 0 48.4486V1.55138C0 0.694554 0.694554 0 1.55138 0H23.8353H25.1532H26.1929H44.2819L47.8281 1.55138C48.6849 1.55138 49.3794 2.24594 49.3794 3.10277L49.0692 47.5178C49.0692 48.3746 48.3746 49.0692 47.5178 49.0692Z" fill="#E9E9E9"/>
<path d="M48.4487 0H43.7946C44.6514 0 45.3459 0.694554 45.3459 1.55138V48.4486C45.3459 49.3054 44.6514 50 43.7946 50H48.4487C49.3055 50 50.0001 49.3054 50.0001 48.4486V1.55138C50.0001 0.694554 49.3055 0 48.4487 0Z" fill="#D1D1D1"/>
<path opacity="0.6" d="M15.0356 39.7899V41.6516C15.0356 42.5084 14.511 43.203 13.8638 43.203H8.70752C8.06029 43.203 7.53564 42.5084 7.53564 41.6516V39.7899C7.53564 38.9331 8.06029 38.2385 8.70752 38.2385H13.8638C14.511 38.2385 15.0356 38.9331 15.0356 39.7899Z" fill="#023DFE" fill-opacity="0.5"/>
<path opacity="0.6" d="M32.5356 39.7899V41.6516C32.5356 42.5084 33.0603 43.203 33.7075 43.203H38.8638C39.511 43.203 40.0356 42.5084 40.0356 41.6516V39.7899C40.0356 38.9331 39.511 38.2385 38.8638 38.2385H33.7075C33.0603 38.2385 32.5356 38.9331 32.5356 39.7899Z" fill="#023DFE" fill-opacity="0.5"/>
<path d="M23.8367 0H26.1637V50H23.8367V0Z" fill="#D1D1D1"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

9
assets/icons/3_Gang_switch_icon.svg Normal file
View File

@ -0,0 +1,9 @@
<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M47.5178 49.0692L44.2102 50H26.1635H24.9999H23.8364H1.55138C0.694554 50 0 49.3054 0 48.4486V1.55138C0 0.694554 0.694554 0 1.55138 0H23.8353H25.1532H26.1929H44.2819L47.8281 1.55138C48.6849 1.55138 49.3794 2.24594 49.3794 3.10277L49.0692 47.5178C49.0692 48.3746 48.3746 49.0692 47.5178 49.0692Z" fill="#E9E9E9"/>
<path d="M48.4487 0H43.7946C44.6514 0 45.3459 0.694554 45.3459 1.55138V48.4486C45.3459 49.3054 44.6514 50 43.7946 50H48.4487C49.3055 50 50.0001 49.3054 50.0001 48.4486V1.55138C50.0001 0.694554 49.3055 0 48.4487 0Z" fill="#D1D1D1"/>
<path opacity="0.6" d="M10.8008 39.7899V41.6516C10.8008 42.5084 10.2761 43.203 9.62891 43.203H4.47266C3.82543 43.203 3.30078 42.5084 3.30078 41.6516V39.7899C3.30078 38.9331 3.82543 38.2385 4.47266 38.2385H9.62891C10.2761 38.2385 10.8008 38.9331 10.8008 39.7899Z" fill="#023DFE" fill-opacity="0.5"/>
<path opacity="0.6" d="M34.5508 39.7899V41.6516C34.5508 42.5084 35.0754 43.203 35.7227 43.203H40.8789C41.5261 43.203 42.0508 42.5084 42.0508 41.6516V39.7899C42.0508 38.9331 41.5261 38.2385 40.8789 38.2385H35.7227C35.0754 38.2385 34.5508 38.9331 34.5508 39.7899Z" fill="#023DFE" fill-opacity="0.5"/>
<path opacity="0.6" d="M18.8281 39.7899V41.6516C18.8281 42.5084 19.3528 43.203 20 43.203H25.1562C25.8035 43.203 26.3281 42.5084 26.3281 41.6516V39.7899C26.3281 38.9331 25.8035 38.2385 25.1562 38.2385H20C19.3528 38.2385 18.8281 38.9331 18.8281 39.7899Z" fill="#023DFE" fill-opacity="0.5"/>
<path d="M28.9062 0H31.2333V50H28.9062V0Z" fill="#D1D1D1"/>
<path d="M13.9648 0H16.2919V50H13.9648V0Z" fill="#D1D1D1"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

3
assets/icons/add_icon.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="Vector" d="M11.4453 4.94531H7.55469V1.05469C7.55469 0.472195 7.08249 0 6.5 0C5.91751 0 5.44531 0.472195 5.44531 1.05469V4.94531H1.55469C0.972195 4.94531 0.5 5.41751 0.5 6C0.5 6.58249 0.972195 7.05469 1.55469 7.05469H5.44531V10.9453C5.44531 11.5278 5.91751 12 6.5 12C7.08249 12 7.55469 11.5278 7.55469 10.9453V7.05469H11.4453C12.0278 7.05469 12.5 6.58249 12.5 6C12.5 5.41751 12.0278 4.94531 11.4453 4.94531Z" fill="#023DFE" fill-opacity="0.7"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 557 B

28
assets/icons/door_lock.svg Normal file
View File

@ -0,0 +1,28 @@
<svg width="38" height="50" viewBox="0 0 38 50" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Door Lock">
<path id="Vector" d="M20.9677 0H1.6129C0.722121 0 0 0.722121 0 1.6129V48.3871C0 49.2779 0.722121 50 1.6129 50H20.9677C21.8585 50 22.5806 49.2779 22.5806 48.3871V1.6129C22.5806 0.722121 21.8585 0 20.9677 0Z" fill="#7A838B"/>
<path id="Vector_2" d="M8.87097 47.5806C7.15989 47.5806 5.5189 46.9009 4.30899 45.691C3.09908 44.4811 2.41935 42.8401 2.41935 41.129V0H1.6129C1.18513 0 0.774887 0.16993 0.472409 0.472408C0.169931 0.774886 0 1.18513 0 1.6129V48.3871C0 48.8149 0.169931 49.2251 0.472409 49.5276C0.774887 49.8301 1.18513 50 1.6129 50H20.9677C21.3955 50 21.8058 49.8301 22.1082 49.5276C22.4107 49.2251 22.5806 48.8149 22.5806 48.3871V47.5806H8.87097Z" fill="#5D6972"/>
<path id="Vector_3" d="M7.25808 46.7742C10.3758 46.7742 12.9032 44.2468 12.9032 41.129C12.9032 38.0113 10.3758 35.4839 7.25808 35.4839C4.14034 35.4839 1.61292 38.0113 1.61292 41.129C1.61292 44.2468 4.14034 46.7742 7.25808 46.7742Z" fill="#5D6972"/>
<path id="Vector_4" d="M8.87099 45.1612C11.9887 45.1612 14.5162 42.6337 14.5162 39.516C14.5162 36.3983 11.9887 33.8708 8.87099 33.8708C5.75325 33.8708 3.22583 36.3983 3.22583 39.516C3.22583 42.6337 5.75325 45.1612 8.87099 45.1612Z" fill="#D6E4E8"/>
<path id="Vector_5" d="M33.871 36.2903H9.67747C7.8959 36.2903 6.45166 37.7345 6.45166 39.5161C6.45166 41.2977 7.8959 42.7419 9.67747 42.7419H33.871C35.6526 42.7419 37.0968 41.2977 37.0968 39.5161C37.0968 37.7345 35.6526 36.2903 33.871 36.2903Z" fill="#D6E4E8"/>
<path id="Vector_6" d="M36.2901 40.3224H12.0966C11.6109 40.3258 11.1309 40.2187 10.6927 40.0093C10.2545 39.7999 9.86966 39.4936 9.56729 39.1135C9.26492 38.7334 9.05293 38.2896 8.94735 37.8156C8.84178 37.3415 8.84538 36.8497 8.95788 36.3772C8.19061 36.5591 7.51654 37.0157 7.06305 37.6608C6.60956 38.3059 6.40805 39.0947 6.49661 39.8783C6.58517 40.6618 6.95767 41.3858 7.5437 41.9134C8.12974 42.441 8.88872 42.7357 9.67723 42.7417H33.8708C34.6003 42.7404 35.3078 42.4918 35.8778 42.0366C36.4479 41.5814 36.8468 40.9464 37.0095 40.2353C36.7738 40.2914 36.5324 40.3206 36.2901 40.3224Z" fill="#BACED3"/>
<g id="Group">
<path id="Vector_7" d="M4.83873 8.06443C5.72952 8.06443 6.45164 7.34231 6.45164 6.45153C6.45164 5.56074 5.72952 4.83862 4.83873 4.83862C3.94795 4.83862 3.22583 5.56074 3.22583 6.45153C3.22583 7.34231 3.94795 8.06443 4.83873 8.06443Z" fill="#62B5E8"/>
<path id="Vector_8" d="M11.2905 8.06443C12.1813 8.06443 12.9034 7.34231 12.9034 6.45153C12.9034 5.56074 12.1813 4.83862 11.2905 4.83862C10.3997 4.83862 9.67761 5.56074 9.67761 6.45153C9.67761 7.34231 10.3997 8.06443 11.2905 8.06443Z" fill="#62B5E8"/>
<path id="Vector_9" d="M17.7422 8.06443C18.633 8.06443 19.3551 7.34231 19.3551 6.45153C19.3551 5.56074 18.633 4.83862 17.7422 4.83862C16.8514 4.83862 16.1293 5.56074 16.1293 6.45153C16.1293 7.34231 16.8514 8.06443 17.7422 8.06443Z" fill="#62B5E8"/>
<path id="Vector_10" d="M4.83898 14.5161C5.72976 14.5161 6.45188 13.794 6.45188 12.9032C6.45188 12.0124 5.72976 11.2903 4.83898 11.2903C3.9482 11.2903 3.22607 12.0124 3.22607 12.9032C3.22607 13.794 3.9482 14.5161 4.83898 14.5161Z" fill="#62B5E8"/>
<path id="Vector_11" d="M11.2905 14.5161C12.1813 14.5161 12.9034 13.794 12.9034 12.9032C12.9034 12.0124 12.1813 11.2903 11.2905 11.2903C10.3997 11.2903 9.67761 12.0124 9.67761 12.9032C9.67761 13.794 10.3997 14.5161 11.2905 14.5161Z" fill="#62B5E8"/>
<path id="Vector_12" d="M17.7422 14.5161C18.633 14.5161 19.3551 13.794 19.3551 12.9032C19.3551 12.0124 18.633 11.2903 17.7422 11.2903C16.8514 11.2903 16.1293 12.0124 16.1293 12.9032C16.1293 13.794 16.8514 14.5161 17.7422 14.5161Z" fill="#62B5E8"/>
<path id="Vector_13" d="M4.83898 20.9677C5.72976 20.9677 6.45188 20.2456 6.45188 19.3548C6.45188 18.4641 5.72976 17.7419 4.83898 17.7419C3.9482 17.7419 3.22607 18.4641 3.22607 19.3548C3.22607 20.2456 3.9482 20.9677 4.83898 20.9677Z" fill="#62B5E8"/>
<path id="Vector_14" d="M11.2905 20.9677C12.1813 20.9677 12.9034 20.2456 12.9034 19.3548C12.9034 18.4641 12.1813 17.7419 11.2905 17.7419C10.3997 17.7419 9.67761 18.4641 9.67761 19.3548C9.67761 20.2456 10.3997 20.9677 11.2905 20.9677Z" fill="#62B5E8"/>
<path id="Vector_15" d="M17.7422 20.9677C18.633 20.9677 19.3551 20.2456 19.3551 19.3548C19.3551 18.4641 18.633 17.7419 17.7422 17.7419C16.8514 17.7419 16.1293 18.4641 16.1293 19.3548C16.1293 20.2456 16.8514 20.9677 17.7422 20.9677Z" fill="#62B5E8"/>
</g>
<path id="Vector_16" d="M4.83875 25.8064H14.5162V32.258H4.83875V25.8064Z" fill="#5D6972"/>
<path id="Vector_17" d="M6.45166 24.1936H16.1291V30.6452H6.45166V24.1936Z" fill="#D6E4E8"/>
<path id="Vector_18" d="M8.06456 25.8065V24.1936H6.45166V30.6452H16.1291V29.0323H11.2904C10.4348 29.0323 9.61434 28.6925 9.00938 28.0875C8.40442 27.4825 8.06456 26.662 8.06456 25.8065Z" fill="#BACED3"/>
<path id="Vector_19" d="M29.0322 33.0644C29.923 33.0644 30.6451 32.3423 30.6451 31.4515C30.6451 30.5607 29.923 29.8386 29.0322 29.8386C28.1414 29.8386 27.4193 30.5607 27.4193 31.4515C27.4193 32.3423 28.1414 33.0644 29.0322 33.0644Z" fill="#6DBC53"/>
<path id="Vector_20" d="M35.242 26.3225C35.3174 26.248 35.3774 26.1594 35.4185 26.0618C35.4597 25.9641 35.4812 25.8593 35.4818 25.7533C35.4824 25.6473 35.4621 25.5422 35.422 25.4441C35.382 25.346 35.323 25.2567 35.2485 25.1814C34.4359 24.3576 33.4677 23.7034 32.4002 23.257C31.3326 22.8105 30.187 22.5806 29.0299 22.5806C27.8728 22.5806 26.7272 22.8105 25.6597 23.257C24.5921 23.7034 23.624 24.3576 22.8114 25.1814C22.7369 25.2567 22.6779 25.3459 22.6379 25.444C22.5979 25.5421 22.5776 25.6471 22.5781 25.753C22.5787 25.8589 22.6001 25.9637 22.6412 26.0614C22.6822 26.159 22.7421 26.2476 22.8174 26.3221C22.8927 26.3966 22.9819 26.4556 23.08 26.4956C23.1781 26.5356 23.2831 26.5559 23.389 26.5553C23.495 26.5548 23.5997 26.5334 23.6974 26.4923C23.795 26.4512 23.8836 26.3914 23.9581 26.3161C24.6207 25.6438 25.4102 25.11 26.2809 24.7456C27.1516 24.3813 28.0861 24.1936 29.0299 24.1936C29.9738 24.1936 30.9082 24.3813 31.7789 24.7456C32.6496 25.11 33.4392 25.6438 34.1017 26.3161C34.2521 26.4681 34.4567 26.5542 34.6705 26.5554C34.8844 26.5566 35.0899 26.4728 35.242 26.3225Z" fill="#6DBC53"/>
<path id="Vector_21" d="M20.3871 23.9453C20.4604 24.0217 20.5481 24.0829 20.6451 24.1254C20.7421 24.168 20.8465 24.191 20.9524 24.1932C21.0583 24.1953 21.1636 24.1766 21.2622 24.1381C21.3609 24.0996 21.451 24.042 21.5274 23.9687C23.5515 22.0423 26.2388 20.9679 29.0331 20.9679C31.8273 20.9679 34.5146 22.0423 36.5387 23.9687C36.6141 24.0464 36.7044 24.1082 36.8043 24.1504C36.9041 24.1925 37.0114 24.214 37.1197 24.2138C37.2281 24.2135 37.3353 24.1914 37.4349 24.1488C37.5345 24.1061 37.6245 24.0439 37.6995 23.9657C37.7746 23.8876 37.8331 23.7951 37.8715 23.6938C37.91 23.5925 37.9277 23.4845 37.9236 23.3762C37.9194 23.268 37.8934 23.1617 37.8473 23.0636C37.8011 22.9656 37.7356 22.8779 37.6548 22.8058C35.3304 20.5915 32.2433 19.3564 29.0331 19.3564C25.8228 19.3564 22.7357 20.5915 20.4113 22.8058C20.2571 22.9537 20.1679 23.1568 20.1634 23.3705C20.1589 23.5842 20.2393 23.7909 20.3871 23.9453Z" fill="#6DBC53"/>
<path id="Vector_22" d="M32.2583 28.8364C32.4158 28.8365 32.5699 28.7904 32.7015 28.7039C32.8331 28.6174 32.9366 28.4942 32.999 28.3496C33.0614 28.205 33.0802 28.0453 33.0529 27.8902C33.0256 27.7351 32.9534 27.5913 32.8454 27.4767C32.3597 26.9501 31.7701 26.5298 31.1138 26.2423C30.4576 25.9548 29.7489 25.8064 29.0325 25.8064C28.316 25.8064 27.6074 25.9548 26.9511 26.2423C26.2949 26.5298 25.7053 26.9501 25.2196 27.4767C25.0729 27.6324 24.994 27.84 25.0004 28.0539C25.0067 28.2677 25.0978 28.4703 25.2535 28.617C25.4092 28.7638 25.6168 28.8426 25.8306 28.8363C26.0445 28.8299 26.2471 28.7389 26.3938 28.5832C26.7286 28.2165 27.1362 27.9236 27.5905 27.7233C28.0448 27.5229 28.5359 27.4194 29.0325 27.4194C29.529 27.4194 30.0201 27.5229 30.4745 27.7233C30.9288 27.9236 31.3364 28.2165 31.6712 28.5832C31.7466 28.6632 31.8376 28.7269 31.9386 28.7704C32.0395 28.814 32.1483 28.8364 32.2583 28.8364Z" fill="#6DBC53"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 7.8 KiB

19
assets/icons/presence_sensor.svg Normal file
View File

@ -0,0 +1,19 @@
<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M29.8828 33.7891H20.1172C17.9599 33.7891 16.2109 32.0401 16.2109 29.8828V20.1172C16.2109 17.9599 17.9599 16.2109 20.1172 16.2109H29.8828C32.0401 16.2109 33.7891 17.9599 33.7891 20.1172V29.8828C33.7891 32.0401 32.0401 33.7891 29.8828 33.7891Z" fill="#7E8596"/>
<path d="M25 29.8828V20.1172C25 17.9599 26.7489 16.2109 28.9062 16.2109H20.1172C17.9599 16.2109 16.2109 17.9599 16.2109 20.1172V29.8828C16.2109 32.0401 17.9599 33.7891 20.1172 33.7891H28.9062C26.7489 33.7891 25 32.0401 25 29.8828Z" fill="#636978"/>
<path d="M25 21.0938L23.0469 25L25 28.9062H28.9062V21.0938H25Z" fill="#FFF04A"/>
<path d="M21.0938 21.0938H25V28.9062H21.0938V21.0938Z" fill="#FFDA45"/>
<path d="M35.7065 5.89941C35.5191 5.89941 35.3316 5.82793 35.1886 5.68496C32.4671 2.96357 28.8489 1.46484 25.0002 1.46484C21.1516 1.46484 17.5333 2.96357 14.8117 5.68496C14.5256 5.9709 14.0619 5.971 13.7759 5.68486C13.4899 5.39883 13.4899 4.93506 13.7759 4.64912C16.7742 1.65107 20.7603 0 25.0002 0C29.2401 0 33.2262 1.65107 36.2245 4.64902C36.5105 4.93516 36.5105 5.39883 36.2245 5.68477C36.0814 5.82793 35.8939 5.89941 35.7065 5.89941Z" fill="#87C7FF"/>
<path d="M32.138 9.46831C31.9506 9.46831 31.7631 9.39683 31.6201 9.25386C29.8518 7.48569 27.5009 6.51196 25.0004 6.51196C22.4998 6.51196 20.1488 7.48579 18.3806 9.25386C18.0946 9.53989 17.6308 9.53979 17.3449 9.25376C17.0589 8.96772 17.0589 8.50395 17.3449 8.21802C19.3897 6.17329 22.1086 5.04712 25.0005 5.04712C27.8923 5.04712 30.611 6.17319 32.6558 8.21802C32.942 8.50405 32.942 8.96782 32.6559 9.25376C32.5129 9.39683 32.3254 9.46831 32.138 9.46831Z" fill="#87C7FF"/>
<path d="M28.5688 13.0374C28.3813 13.0374 28.1938 12.9659 28.0508 12.8229C26.3687 11.1406 23.6313 11.1406 21.9491 12.8229C21.6631 13.1089 21.1993 13.1089 20.9134 12.8229C20.6273 12.5368 20.6273 12.0731 20.9134 11.7871C23.1668 9.53386 26.8333 9.53386 29.0867 11.7871C29.3728 12.0732 29.3728 12.5369 29.0867 12.8229C28.9437 12.9659 28.7562 13.0374 28.5688 13.0374Z" fill="#87C7FF"/>
<path d="M25 50C20.7601 50 16.7741 48.349 13.7759 45.351C13.4899 45.0649 13.4899 44.6012 13.7759 44.3153C14.062 44.0291 14.5257 44.0292 14.8117 44.3152C17.5332 47.0364 21.1514 48.5352 25 48.5352C28.8487 48.5352 32.467 47.0365 35.1886 44.3151C35.4747 44.029 35.9384 44.0291 36.2244 44.3152C36.5103 44.6012 36.5104 45.065 36.2243 45.3509C33.2261 48.349 29.24 50 25 50Z" fill="#87C7FF"/>
<path d="M23.5511 44.8503C23.5166 44.8503 23.4817 44.8479 23.4466 44.8429C21.1254 44.511 19.0154 43.4526 17.3449 41.7821C17.0589 41.496 17.0589 41.0323 17.3449 40.7463C17.6309 40.4602 18.0947 40.4603 18.3806 40.7462C19.8254 42.1909 21.6488 43.1061 23.6539 43.3928C24.0544 43.4501 24.3325 43.8211 24.2753 44.2215C24.223 44.5866 23.9097 44.8503 23.5511 44.8503Z" fill="#87C7FF"/>
<path d="M26.4494 44.8505C26.0908 44.8505 25.7775 44.5871 25.7252 44.2217C25.668 43.8212 25.9462 43.4503 26.3466 43.393C28.3517 43.1063 30.1751 42.1911 31.6198 40.7464C31.9059 40.4605 32.3696 40.4605 32.6556 40.7464C32.9416 41.0326 32.9416 41.4962 32.6556 41.7823C30.9852 43.4526 28.8752 44.5111 26.5539 44.8431C26.5189 44.848 26.4838 44.8505 26.4494 44.8505Z" fill="#87C7FF"/>
<path d="M25.0001 39.9032C23.5201 39.9032 22.0401 39.3398 20.9134 38.2132C20.6273 37.9271 20.6273 37.4634 20.9134 37.1773C21.1994 36.8914 21.6632 36.8914 21.9491 37.1773C23.6314 38.8597 26.3687 38.8597 28.0508 37.1773C28.3369 36.8914 28.8006 36.8914 29.0866 37.1773C29.3727 37.4635 29.3727 37.9271 29.0866 38.2132C27.9601 39.3399 26.4801 39.9032 25.0001 39.9032Z" fill="#87C7FF"/>
<path d="M44.8326 36.4387C44.6452 36.4387 44.4577 36.3673 44.3147 36.2243C44.0286 35.9382 44.0286 35.4745 44.3146 35.1885C47.036 32.467 48.5347 28.8487 48.5347 25.0001C48.5347 21.1514 47.036 17.5331 44.3146 14.8115C44.0286 14.5255 44.0286 14.0617 44.3147 13.7758C44.6007 13.4898 45.0645 13.4897 45.3505 13.7759C48.3485 16.774 49.9996 20.7601 49.9996 25.0001C49.9996 29.2399 48.3485 33.226 45.3506 36.2243C45.2075 36.3672 45.02 36.4387 44.8326 36.4387Z" fill="#87C7FF"/>
<path d="M41.2641 32.87C41.0767 32.87 40.8892 32.7985 40.7462 32.6555C40.4601 32.3695 40.4601 31.9057 40.7461 31.6198C42.5142 29.8515 43.488 27.5006 43.488 25.0001C43.488 22.4996 42.5142 20.1486 40.7461 18.3803C40.4601 18.0943 40.4601 17.6305 40.7462 17.3446C41.0323 17.0586 41.496 17.0587 41.782 17.3447C43.8267 19.3895 44.9529 22.1083 44.9529 25.0002C44.9529 27.8921 43.8268 30.6107 41.782 32.6556C41.639 32.7984 41.4515 32.87 41.2641 32.87Z" fill="#87C7FF"/>
<path d="M37.6954 29.3014C37.508 29.3014 37.3205 29.2299 37.1774 29.0869C36.8914 28.8008 36.8914 28.3371 37.1774 28.0511C38.8597 26.3688 38.8597 23.6316 37.1774 21.9495C36.8914 21.6634 36.8914 21.1997 37.1774 20.9137C37.4635 20.6277 37.9272 20.6277 38.2133 20.9137C40.4666 23.1671 40.4666 26.8336 38.2133 29.087C38.0703 29.2299 37.8828 29.3014 37.6954 29.3014Z" fill="#87C7FF"/>
<path d="M5.16709 36.4386C4.97959 36.4386 4.79219 36.3671 4.64922 36.224C1.65107 33.2258 0 29.2397 0 24.9997C0 20.7599 1.65107 16.7738 4.64902 13.7756C4.93506 13.4895 5.39883 13.4896 5.68477 13.7755C5.9708 14.0615 5.9708 14.5253 5.68477 14.8113C2.96357 17.5328 1.46484 21.1512 1.46484 24.9997C1.46484 28.8484 2.96357 32.4667 5.68496 35.1883C5.971 35.4743 5.971 35.9381 5.68496 36.224C5.54199 36.367 5.35449 36.4386 5.16709 36.4386Z" fill="#87C7FF"/>
<path d="M8.73577 32.8702C8.54836 32.8702 8.36086 32.7987 8.2179 32.6556C6.17307 30.6108 5.047 27.892 5.047 25.0001C5.047 22.1083 6.17307 19.3895 8.2179 17.3446C8.50393 17.0586 8.9677 17.0586 9.25364 17.3446C9.53967 17.6307 9.53967 18.0944 9.25364 18.3804C7.48557 20.1486 6.51184 22.4996 6.51184 25.0001C6.51184 27.5006 7.48557 29.8516 9.25374 31.6199C9.53977 31.9059 9.53977 32.3697 9.25374 32.6556C9.11067 32.7986 8.92317 32.8702 8.73577 32.8702Z" fill="#87C7FF"/>
<path d="M12.3041 29.3012C12.1167 29.3012 11.9292 29.2297 11.7863 29.0868C9.53284 26.8333 9.53284 23.1668 11.7863 20.9134C12.0723 20.6275 12.5361 20.6275 12.822 20.9134C13.108 21.1996 13.108 21.6632 12.822 21.9493C11.1398 23.6315 11.1398 26.3687 12.822 28.0508C13.108 28.337 13.108 28.8006 12.822 29.0867C12.679 29.2297 12.4915 29.3012 12.3041 29.3012Z" fill="#87C7FF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.1 KiB

19
assets/icons/smart_gateway_icon.svg Normal file
View File

@ -0,0 +1,19 @@
<svg width="50" height="47" viewBox="0 0 50 47" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.42188 46.875C6.61221 46.875 5.95703 46.2198 5.95703 45.4102V42.4805C5.95703 41.6708 6.61221 41.0156 7.42188 41.0156C8.23154 41.0156 8.88672 41.6708 8.88672 42.4805V45.4102C8.88672 46.2198 8.23154 46.875 7.42188 46.875Z" fill="#5C6699"/>
<path d="M42.5781 46.875C41.7685 46.875 41.1133 46.2198 41.1133 45.4102V42.4805C41.1133 41.6708 41.7685 41.0156 42.5781 41.0156C43.3878 41.0156 44.043 41.6708 44.043 42.4805V45.4102C44.043 46.2198 43.3878 46.875 42.5781 46.875Z" fill="#404A80"/>
<path d="M9.0036 28.4083L0.214533 7.9005C-0.103045 7.15802 0.240314 6.29689 0.984162 5.97785C1.71942 5.66027 2.58631 5.99933 2.90965 6.74748L11.6987 27.2553C12.0163 27.9978 11.6729 28.8589 10.9291 29.1779C10.2014 29.4922 9.33045 29.1652 9.0036 28.4083Z" fill="#5C6699"/>
<path d="M39.0701 29.1782C38.3263 28.8591 37.9829 27.998 38.3005 27.2555L47.0895 6.7477C47.4129 5.99956 48.274 5.65766 49.015 5.97807C49.7589 6.29711 50.1022 7.15825 49.7847 7.90073L40.9956 28.4085C40.6686 29.1657 39.7975 29.4923 39.0701 29.1782Z" fill="#404A80"/>
<path d="M45.6055 43.9453H4.39453C1.97129 43.9453 0 41.974 0 39.5508V30.7617C0 28.3385 1.97129 26.3672 4.39453 26.3672H45.6055C48.0287 26.3672 50 28.3385 50 30.7617V39.5508C50 41.974 48.0287 43.9453 45.6055 43.9453Z" fill="#C1DCFF"/>
<path d="M45.6055 26.3672H25V43.9453H45.6055C48.0287 43.9453 50 41.974 50 39.5508V30.7617C50 28.3385 48.0287 26.3672 45.6055 26.3672Z" fill="#D5E8FE"/>
<path d="M26.0295 20.9384C25.8692 20.7782 25.5202 20.5078 24.9995 20.5078C24.4788 20.5078 24.1298 20.7782 23.9695 20.9384C23.3973 21.5105 22.4703 21.5105 21.8981 20.9384C21.326 20.3662 21.326 19.4392 21.8981 18.867C22.3788 18.385 23.423 17.5781 24.9995 17.5781C26.576 17.5781 27.6202 18.385 28.1009 18.867C28.673 19.4392 28.673 20.3662 28.1009 20.9384C27.5287 21.5105 26.6016 21.5106 26.0295 20.9384Z" fill="#80BFFF"/>
<path d="M38.4667 8.51445C34.8676 4.9124 30.084 2.92969 24.9999 2.92969C19.9158 2.92969 15.1322 4.9124 11.5331 8.51445C10.9609 9.08662 10.0339 9.08662 9.46172 8.51445C8.88955 7.94229 8.88955 7.01523 9.46172 6.44307C13.6159 2.28887 19.1319 0 24.9999 0C30.8679 0 36.3839 2.28887 40.5381 6.44307C41.1103 7.01523 41.1103 7.94229 40.5381 8.51445C39.9659 9.08662 39.039 9.08662 38.4667 8.51445Z" fill="#80BFFF"/>
<path d="M34.3209 12.6558C31.829 10.1624 28.5187 8.78906 24.9997 8.78906C21.4806 8.78906 18.1704 10.1624 15.6785 12.6558C15.1063 13.2279 14.1793 13.2279 13.6071 12.6558C13.0349 12.0836 13.0349 11.1565 13.6071 10.5844C16.6512 7.5374 20.6996 5.85938 24.9997 5.85938C29.2998 5.85938 33.3481 7.5374 36.3923 10.5844C36.9644 11.1565 36.9644 12.0836 36.3923 12.6558C35.8201 13.2279 34.8931 13.2279 34.3209 12.6558Z" fill="#80BFFF"/>
<path d="M30.1752 16.7972C27.4057 14.0249 22.5934 14.0249 19.824 16.7972C19.2518 17.3694 18.3248 17.3694 17.7526 16.7972C17.1804 16.2264 17.1804 15.298 17.7526 14.7259C21.6264 10.8492 28.3727 10.8492 32.2466 14.7259C32.8187 15.298 32.8187 16.2264 32.2466 16.7972C31.6744 17.3694 30.7474 17.3694 30.1752 16.7972Z" fill="#80BFFF"/>
<path d="M30.8594 38.0859C30.0497 38.0859 29.3945 37.4308 29.3945 36.6211V33.6914C29.3945 32.8817 30.0497 32.2266 30.8594 32.2266C31.669 32.2266 32.3242 32.8817 32.3242 33.6914V36.6211C32.3242 37.4308 31.669 38.0859 30.8594 38.0859Z" fill="#6699FF"/>
<path d="M36.7188 38.0859C35.9091 38.0859 35.2539 37.4308 35.2539 36.6211V33.6914C35.2539 32.8817 35.9091 32.2266 36.7188 32.2266C37.5284 32.2266 38.1836 32.8817 38.1836 33.6914V36.6211C38.1836 37.4308 37.5284 38.0859 36.7188 38.0859Z" fill="#6699FF"/>
<path d="M42.5781 38.0859C41.7685 38.0859 41.1133 37.4308 41.1133 36.6211V33.6914C41.1133 32.8817 41.7685 32.2266 42.5781 32.2266C43.3878 32.2266 44.043 32.8817 44.043 33.6914V36.6211C44.043 37.4308 43.3878 38.0859 42.5781 38.0859Z" fill="#6699FF"/>
<path d="M26.03 20.9384C26.6021 21.5105 27.5291 21.5106 28.1014 20.9384C28.6735 20.3662 28.6735 19.4392 28.1014 18.867C27.6207 18.385 26.5765 17.5781 25 17.5781V20.5078C25.5207 20.5078 25.8697 20.7782 26.03 20.9384Z" fill="#6699FF"/>
<path d="M30.1756 16.7973C30.7478 17.3694 31.6747 17.3695 32.247 16.7973C32.8191 16.2265 32.8191 15.298 32.247 14.7259C30.31 12.7875 27.6551 11.8184 25 11.8184V14.718C26.8954 14.718 28.7908 15.4111 30.1756 16.7973Z" fill="#6699FF"/>
<path d="M34.3212 12.6558C34.8934 13.2279 35.8203 13.228 36.3926 12.6558C36.9647 12.0836 36.9647 11.1565 36.3926 10.5844C33.3484 7.5374 29.3001 5.85938 25 5.85938V8.78906C28.519 8.78906 31.8293 10.1624 34.3212 12.6558Z" fill="#6699FF"/>
<path d="M38.4668 8.51445C39.039 9.08662 39.9659 9.08672 40.5382 8.51445C41.1104 7.94229 41.1104 7.01523 40.5382 6.44307C36.384 2.28887 30.868 0 25 0V2.92969C30.0841 2.92969 34.8677 4.9124 38.4668 8.51445Z" fill="#6699FF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.7 KiB

23
assets/icons/smart_light_icon.svg Normal file
View File

@ -0,0 +1,23 @@
<svg width="44" height="50" viewBox="0 0 44 50" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Light">
<path id="Vector" d="M27.5001 38.2292C28.1251 36.1459 29.3751 34.2709 31.0418 32.8125C34.1668 30.2083 36.146 26.25 36.146 21.875C36.146 13.75 29.3752 7.08328 21.0418 7.49998C13.6459 7.81248 7.60419 14.0625 7.39589 21.4583C7.29169 26.0417 9.27089 30.1042 12.5001 32.8125C14.2709 34.2708 15.5209 36.1458 16.1459 38.2292H27.5001Z" fill="#FFD15C"/>
<path id="Vector_2" d="M20.4166 38.4376H21.3541L17.1874 22.9168C17.2916 22.9168 17.3957 22.9168 17.4999 22.9168C18.0207 22.9168 18.5416 22.7085 18.9582 22.2918C19.1665 22.0835 19.3749 21.9793 19.6874 21.9793C19.9999 21.9793 20.2082 22.0835 20.4166 22.2918C21.1458 23.1251 22.3958 23.1251 23.1249 22.2918C23.3332 22.0835 23.5416 21.9793 23.8541 21.9793C24.0624 21.9793 24.3749 22.0835 24.5833 22.2918C25 22.7085 25.4166 22.9168 26.0416 22.9168C26.1458 22.9168 26.2499 22.9168 26.3541 22.9168L22.2916 38.4376H23.2291L27.4999 22.1876C27.4999 21.9793 27.4999 21.7709 27.2916 21.6668C27.0833 21.5626 26.8749 21.6668 26.7708 21.771C26.5625 21.9793 26.3541 22.0835 26.1458 22.0835C25.8333 22.0835 25.625 21.9793 25.3125 21.771C24.8958 21.3543 24.4792 21.146 23.9583 21.146C23.4374 21.146 23.0208 21.3543 22.6041 21.771C22.1874 22.1877 21.5624 22.1877 21.1458 21.771C20.8333 21.3543 20.3125 21.146 19.7916 21.146C19.2708 21.146 18.7499 21.3543 18.4374 21.771C18.2291 21.9793 17.9166 22.0835 17.6041 22.0835C17.3958 22.0835 17.0833 21.9793 16.9791 21.771C16.8749 21.6668 16.6666 21.5627 16.4583 21.6668C16.25 21.771 16.1458 21.9793 16.25 22.1876L20.4166 38.4376Z" fill="white"/>
<g id="Group">
<path id="Vector_3" d="M18.5416 47.8125C19.0625 49.0625 20.3125 50 21.7708 50C23.2291 50 24.4791 49.0625 25 47.8125H18.5416Z" fill="#344A5E"/>
<path id="Vector_4" d="M25.6252 47.9167H18.021C16.9793 47.9167 16.146 47.0834 16.146 46.0417V38.125H27.5002V46.0417C27.5002 47.0833 26.6668 47.9167 25.6252 47.9167Z" fill="#344A5E"/>
</g>
<g id="Group_2">
<path id="Vector_5" d="M27.3958 42.0831H16.1458C15.5208 42.0831 15 41.5623 15 40.9373C15 40.3123 15.5208 39.7915 16.1458 39.7915H27.3958C28.0208 39.7915 28.5416 40.3123 28.5416 40.9373C28.5416 41.5623 28.0208 42.0831 27.3958 42.0831Z" fill="#415A6B"/>
<path id="Vector_6" d="M27.3958 45.7291H16.1458C15.5208 45.7291 15 45.2083 15 44.5833C15 43.9583 15.5208 43.4375 16.1458 43.4375H27.3958C28.0208 43.4375 28.5416 43.9583 28.5416 44.5833C28.5416 45.2082 28.0208 45.7291 27.3958 45.7291Z" fill="#415A6B"/>
</g>
<g id="Group_3">
<path id="Vector_7" d="M21.7711 0C21.2503 0 20.7294 0.416699 20.7294 1.0417V4.5834C20.7294 5.1042 21.1461 5.6251 21.7711 5.6251C22.3961 5.6251 22.8128 5.2084 22.8128 4.5834V1.0417C22.8128 0.416699 22.2919 0 21.7711 0Z" fill="#FFD15C"/>
<path id="Vector_8" d="M7.81266 6.35403C7.39596 5.93733 6.77096 5.93733 6.35436 6.35403C5.93776 6.77073 5.93766 7.39573 6.35436 7.81233L8.85436 10.3123C9.27106 10.729 9.89606 10.729 10.3127 10.3123C10.7293 9.89563 10.7294 9.27063 10.3127 8.85403L7.81266 6.35403Z" fill="#FFD15C"/>
<path id="Vector_9" d="M4.5834 20.729H1.0417C0.520898 20.729 0 21.1457 0 21.7707C0 22.2915 0.416699 22.8124 1.0417 22.8124H4.5834C5.1042 22.8124 5.6251 22.3957 5.6251 21.7707C5.6251 21.2498 5.1042 20.729 4.5834 20.729Z" fill="#FFD15C"/>
<path id="Vector_10" d="M8.85439 33.229L6.35439 35.729C5.9377 36.1457 5.9377 36.7707 6.35439 37.1873C6.77109 37.6039 7.39609 37.604 7.8127 37.1873L10.3127 34.6873C10.7294 34.2706 10.7294 33.6456 10.3127 33.229C9.896 32.8124 9.27109 32.8123 8.85439 33.229Z" fill="#FFD15C"/>
<path id="Vector_11" d="M34.6878 33.229C34.2711 32.8123 33.6461 32.8123 33.2294 33.229C32.8127 33.6457 32.8127 34.2707 33.2294 34.6873L35.7294 37.1873C36.1461 37.604 36.7711 37.604 37.1877 37.1873C37.6043 36.7706 37.6044 36.1456 37.1877 35.729L34.6878 33.229Z" fill="#FFD15C"/>
<path id="Vector_12" d="M42.5003 20.729H38.9586C38.4378 20.729 37.9169 21.1457 37.9169 21.7707C37.9169 22.2915 38.3336 22.8124 38.9586 22.8124H42.5003C43.0211 22.8124 43.542 22.3957 43.542 21.7707C43.5419 21.2498 43.1253 20.729 42.5003 20.729Z" fill="#FFD15C"/>
<path id="Vector_13" d="M35.7294 6.35399L33.2294 8.85399C32.8127 9.27069 32.8127 9.89569 33.2294 10.3123C33.6461 10.729 34.2711 10.729 34.6877 10.3123L37.1877 7.81229C37.6044 7.39559 37.6044 6.77059 37.1877 6.35399C36.771 5.93739 36.1461 5.93729 35.7294 6.35399Z" fill="#FFD15C"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

21
assets/icons/smart_thermostat_icon.svg Normal file
View File

@ -0,0 +1,21 @@
<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Group 299">
<circle id="Ellipse 17" cx="40" cy="40" r="38.5" fill="#F4F4F4" stroke="#E5E5E5" stroke-width="3"/>
<g id="AC">
<path id="Vector" d="M61.4857 25H18.5143C16.5765 25 15 26.5765 15 28.5143V44.1424C15 46.0802 16.5765 47.6567 18.5143 47.6567H61.4857C63.4235 47.6567 65 46.0802 65 44.1424V28.5143C64.9999 26.5766 63.4234 25 61.4857 25Z" fill="#E0E0E0"/>
<path id="Vector_2" d="M61.4857 44.4872H18.5143C16.5765 44.4872 15 42.9107 15 40.9729V44.1424C15 46.0803 16.5765 47.6568 18.5143 47.6568H61.4857C63.4235 47.6568 65 46.0803 65 44.1424V40.9729C64.9999 42.9107 63.4234 44.4872 61.4857 44.4872Z" fill="#C4C4C4"/>
<path id="Vector_3" d="M58.9941 40.6726H21.0057C20.6004 40.6726 20.2717 41.0011 20.2717 41.4066V46.9229C20.2717 47.3284 20.6004 47.6569 21.0057 47.6569H58.9941C59.3995 47.6569 59.7281 47.3284 59.7281 46.9229V41.4066C59.7281 41.0011 59.3995 40.6726 58.9941 40.6726Z" fill="#66BAEA"/>
<path id="Vector_4" d="M20.2717 44.2803V46.9226C20.2717 47.3281 20.6004 47.6566 21.0057 47.6566H58.9941C59.3995 47.6566 59.7281 47.3281 59.7281 46.9226V44.2803H20.2717Z" fill="#3AAAE4"/>
<path id="Vector_5" d="M59.7281 43.4307H20.2717V44.8986H59.7281V43.4307Z" fill="#67676B"/>
<path id="Vector_6" d="M58.9943 30.968H56.8236C56.4182 30.968 56.0896 30.6394 56.0896 30.234C56.0896 29.8285 56.4182 29.5 56.8236 29.5H58.9943C59.3997 29.5 59.7283 29.8285 59.7283 30.234C59.7283 30.6393 59.3997 30.968 58.9943 30.968Z" fill="#AAAAAA"/>
<path id="Vector_7" d="M53.4741 30.968H39.5816C39.1763 30.968 38.8477 30.6394 38.8477 30.234C38.8477 29.8285 39.1763 29.5 39.5816 29.5H53.4741C53.8795 29.5 54.2081 29.8285 54.2081 30.234C54.2081 30.6393 53.8795 30.968 53.4741 30.968Z" fill="#AAAAAA"/>
<g id="Group">
<path id="Vector_8" d="M26.4393 55.3316C26.2097 55.3316 25.9835 55.2242 25.8403 55.0228C25.6056 54.6924 25.683 54.2341 26.0134 53.9993C28.0496 52.5521 28.0731 50.3762 28.0731 50.3543C28.0731 49.9489 28.4017 49.6204 28.8071 49.6204C29.2125 49.6204 29.5411 49.9489 29.5411 50.3543C29.5411 50.4743 29.5107 53.3146 26.8638 55.1959C26.7348 55.2875 26.5864 55.3316 26.4393 55.3316Z" fill="#66BAEA"/>
<path id="Vector_9" d="M34.0626 55.3315C33.6572 55.3315 33.3286 55.003 33.3286 54.5976V50.3543C33.3286 49.9489 33.6572 49.6204 34.0626 49.6204C34.468 49.6204 34.7966 49.9489 34.7966 50.3543V54.5976C34.7966 55.0029 34.468 55.3315 34.0626 55.3315Z" fill="#66BAEA"/>
<path id="Vector_10" d="M40.2069 55.3315C39.8015 55.3315 39.4729 55.003 39.4729 54.5976V50.3543C39.4729 49.9489 39.8015 49.6204 40.2069 49.6204C40.6122 49.6204 40.9409 49.9489 40.9409 50.3543V54.5976C40.9409 55.0029 40.6122 55.3315 40.2069 55.3315Z" fill="#66BAEA"/>
<path id="Vector_11" d="M53.5611 55.3317C53.4141 55.3317 53.2655 55.2876 53.1365 55.1959C50.4897 53.3146 50.4592 50.4743 50.4592 50.3543C50.4592 49.9489 50.7879 49.6204 51.1932 49.6204C51.5975 49.6204 51.9254 49.9471 51.9272 50.351C51.9284 50.4487 51.9782 52.5716 53.987 53.9993C54.3173 54.2341 54.3949 54.6924 54.16 55.0228C54.0169 55.2242 53.7907 55.3316 53.5611 55.3317Z" fill="#66BAEA"/>
<path id="Vector_12" d="M45.9381 55.3315C45.5327 55.3315 45.2041 55.003 45.2041 54.5976V50.3543C45.2041 49.9489 45.5327 49.6204 45.9381 49.6204C46.3434 49.6204 46.6721 49.9489 46.6721 50.3543V54.5976C46.6721 55.0029 46.3434 55.3315 45.9381 55.3315Z" fill="#66BAEA"/>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

22
lib/pages/device_managment/all_devices/models/device_type_model.dart Normal file
View File

@ -0,0 +1,22 @@
class DeviceTypeModel {
final String name;
final String icon;
DeviceTypeModel({required this.name, required this.icon});
// Factory method for creating a new DeviceTypeModel from JSON
factory DeviceTypeModel.fromJson(Map<String, dynamic> json) {
return DeviceTypeModel(
name: json['name'],
icon: json['icon'],
);
}
// Convert this model to JSON format
Map<String, dynamic> toJson() {
return {
'name': name,
'icon': icon,
};
}
}

184
lib/pages/spaces_management/view/dialogs/create_space_dialog.dart
View File

@ -2,11 +2,11 @@ import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:syncrow_web/pages/common/buttons/cancel_button.dart';
import 'package:syncrow_web/pages/common/buttons/default_button.dart';
import 'package:syncrow_web/pages/spaces_management/widgets/add_device_type_widget.dart';
import 'package:syncrow_web/utils/color_manager.dart';
import 'package:syncrow_web/utils/constants/assets.dart';
class CreateSpaceDialog extends StatefulWidget {
// Add the onCreateSpace parameter as a required field
final Function(String, String) onCreateSpace;
const CreateSpaceDialog({super.key, required this.onCreateSpace});
@ -16,8 +16,8 @@ class CreateSpaceDialog extends StatefulWidget {
}
class CreateSpaceDialogState extends State<CreateSpaceDialog> {
String selectedIcon = Assets.location; // Initially selected icon
String enteredName = ''; // Store entered space name
String selectedIcon = Assets.location;
String enteredName = '';
@override
Widget build(BuildContext context) {
@ -25,7 +25,7 @@ class CreateSpaceDialogState extends State<CreateSpaceDialog> {
title: const Text('Create New Space'),
backgroundColor: ColorsManager.whiteColors,
content: SizedBox(
width: 600, // Set width for the dialog
width: 600,
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
@ -44,7 +44,7 @@ class CreateSpaceDialogState extends State<CreateSpaceDialog> {
),
),
SvgPicture.asset(
selectedIcon, // Display the selected icon here
selectedIcon,
width: 60,
height: 60,
),
@ -52,8 +52,7 @@ class CreateSpaceDialogState extends State<CreateSpaceDialog> {
top: 2,
left: 2,
child: InkWell(
onTap: () =>
_showIconSelectionDialog(), // Open the icon selection dialog
onTap: () => _showIconSelectionDialog(),
child: Container(
width: 20,
height: 20,
@ -70,40 +69,121 @@ class CreateSpaceDialogState extends State<CreateSpaceDialog> {
),
const SizedBox(width: 16),
Expanded(
child: TextField(
onChanged: (value) {
enteredName = value; // Capture entered name
},
style: TextStyle(
color: ColorsManager.blackColor,
),
decoration: InputDecoration(
hintText: 'Please enter the name',
hintStyle: const TextStyle(
fontSize: 14, // Set your desired font size
color: ColorsManager.lightGrayColor
, // Optional: Change the color of the hint text
fontWeight:
FontWeight.w400, // Optional: Adjust the font weight
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Name input field
TextField(
onChanged: (value) {
enteredName = value;
},
style: const TextStyle(color: Colors.black),
decoration: InputDecoration(
hintText: 'Please enter the name',
hintStyle: const TextStyle(
fontSize: 14,
color: ColorsManager.lightGrayColor,
fontWeight: FontWeight.w400),
filled: true,
fillColor: const Color(0xFFF5F6F7),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: const BorderSide(
color: Color(
0xFFF5F6F7), // Light gray color when enabled (not focused)
width: 1.5,
),
),
// Set border when focused
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: const BorderSide(
color: Color(
0xFFF5F6F7), // Primary color when focused
width: 1.5,
),
),
// Set border for disabled state
disabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: const BorderSide(
color: Color(
0xFFF5F6F7), // Light gray for disabled state
width: 1.5,
),
),
// Set border for error state
errorBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: const BorderSide(
color: Color(
0xFFF5F6F7), // Red border when there's an error
width: 1.5,
),
),
// Border for focused error state
focusedErrorBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: const BorderSide(
color: Color(
0xFFF5F6F7), // Red border when there's an error and it's focused
width: 1.5,
),
),
),
),
filled: true,
fillColor: const Color(0xFFF5F6F7),
border: OutlineInputBorder(
borderSide: const BorderSide(color: Color(0xFFF5F6F7)),
borderRadius: BorderRadius.circular(10),
const SizedBox(height: 16),
// Add Devices or Space Model Button
ElevatedButton(
onPressed: () {
showDialog(
context: context,
builder: (context) => AddDeviceWidget(),
);
// Logic to assign devices or select a model
},
style: ElevatedButton.styleFrom(
backgroundColor: ColorsManager.textFieldGreyColor,
padding: const EdgeInsets.symmetric(
horizontal: 16, vertical: 20),
shape: RoundedRectangleBorder(
side: const BorderSide(
// Add border side here
color: Color(
0xFFE5E5E5), // Define your desired border color
width: 2.0, // Define border width
),
borderRadius: BorderRadius.circular(20)),
),
child: Row(
mainAxisSize: MainAxisSize
.min, // Adjust the button size to fit the content
children: [
SvgPicture.asset(
Assets
.addIcon, // Replace with your actual icon path
width: 20, // Set the size of the icon
height: 20,
),
const SizedBox(
width:
8), // Add spacing between the icon and text
const Text(
'Add devices / Assign a space model',
style: TextStyle(
color: Colors.black,
fontSize: 16,
fontFamily: 'Aftika',
fontWeight: FontWeight.w400,
height:
1.5, // Adjust line height for better spacing
),
),
const SizedBox(width: 8),
],
),
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Color(0xFFF5F6F7),
width: 1), // Default border
borderRadius: BorderRadius.circular(10),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide:
BorderSide(color: Color(0xFFF5F6F7), width: 1),
),
),
],
),
),
],
@ -126,9 +206,9 @@ class CreateSpaceDialogState extends State<CreateSpaceDialog> {
child: DefaultButton(
onPressed: () {
if (enteredName.isNotEmpty) {
widget.onCreateSpace(
enteredName, selectedIcon); // Pass name and icon back
Navigator.of(context).pop(); // Close dialog
widget.onCreateSpace(enteredName,
selectedIcon); // Pass the name and icon back
Navigator.of(context).pop(); // Close the dialog
}
},
child: const Text('OK'),
@ -142,7 +222,6 @@ class CreateSpaceDialogState extends State<CreateSpaceDialog> {
);
}
// Icon selection dialog
void _showIconSelectionDialog() {
showDialog(
context: context,
@ -151,8 +230,8 @@ class CreateSpaceDialogState extends State<CreateSpaceDialog> {
title: const Text('Select Icon'),
backgroundColor: Colors.white,
content: Container(
width: 500, // Width of the icon selection dialog
height: 200, // Height of the dialog
width: 500,
height: 200,
padding: const EdgeInsets.all(18),
decoration: BoxDecoration(
color: const Color(0xFFF5F6F7),
@ -160,24 +239,22 @@ class CreateSpaceDialogState extends State<CreateSpaceDialog> {
),
child: GridView.builder(
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 7, // Number of icons per row
crossAxisSpacing: 10, // Space between icons horizontally
mainAxisSpacing: 22, // Space between icons vertically
crossAxisCount: 7,
crossAxisSpacing: 10,
mainAxisSpacing: 22,
),
itemCount: _iconList.length,
itemBuilder: (BuildContext context, int index) {
return GestureDetector(
onTap: () {
setState(() {
selectedIcon =
_iconList[index]; // Update the selected icon
selectedIcon = _iconList[index];
});
Navigator.of(context)
.pop(); // Close the icon selection dialog
Navigator.of(context).pop();
},
child: SvgPicture.asset(
_iconList[index],
width: 50, // Adjust size as needed
width: 50,
height: 50,
),
);
@ -189,7 +266,6 @@ class CreateSpaceDialogState extends State<CreateSpaceDialog> {
);
}
// Icon list containing SVG asset paths
final List<String> _iconList = [
Assets.location,
Assets.villa,

135
lib/pages/spaces_management/widgets/add_device_type_widget.dart Normal file
View File

@ -0,0 +1,135 @@
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:syncrow_web/pages/device_managment/all_devices/models/device_type_model.dart';
import 'package:syncrow_web/utils/color_manager.dart';
import 'package:syncrow_web/utils/constants/assets.dart';
class AddDeviceWidget extends StatefulWidget {
const AddDeviceWidget({Key? key}) : super(key: key);
@override
_AddDeviceWidgetState createState() => _AddDeviceWidgetState();
}
// Create a static list of DeviceTypeModel
final List<DeviceTypeModel> staticDeviceTypes = [
DeviceTypeModel(name: 'Smart Light', icon: Assets.smartLightIcon),
DeviceTypeModel(name: 'Presence Sensor', icon: Assets.presenceSensor),
DeviceTypeModel(name: '3 Gang Smart switch', icon: Assets.Gang3SwitchIcon),
DeviceTypeModel(name: '2 Gang Smart switch', icon: Assets.Gang2SwitchIcon),
DeviceTypeModel(name: '1 Gang Smart switch', icon: Assets.Gang1SwitchIcon),
DeviceTypeModel(name: 'Smart Door Lock', icon: Assets.DoorLockIcon),
DeviceTypeModel(name: 'Smart Gateway', icon: Assets.SmartGatewayIcon)
];
class _AddDeviceWidgetState extends State<AddDeviceWidget> {
@override
Widget build(BuildContext context) {
return AlertDialog(
title: const Text('Add Devices'),
backgroundColor: ColorsManager.whiteColors,
content: Container(
width: 800, // Set width for the dialog
height: 600, // Set height for the dialog
color: Color(0xFFF4F4F4),
child: Column(
children: [
const SizedBox(height: 16.0),
Expanded(
child: GridView.builder(
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3, // Adjust number of items per row
mainAxisSpacing: 10,
crossAxisSpacing: 10,
childAspectRatio: 1.5,
),
itemCount: staticDeviceTypes.length,
itemBuilder: (context, index) {
final deviceType = staticDeviceTypes[index];
return _buildDeviceTypeTile(deviceType);
},
),
),
],
),
),
actions: [
TextButton(
onPressed: () => Navigator.of(context).pop(),
child: const Text('Cancel'),
),
TextButton(
onPressed: () {
// Logic to save or confirm selected devices
Navigator.of(context).pop();
},
child: const Text('OK'),
),
],
);
}
Widget _buildDeviceTypeTile(DeviceTypeModel deviceType) {
return SizedBox(
width: 90, // Set desired width
height: 120, // Set desired height
child: Card(
elevation: 2,
color: ColorsManager.whiteColors,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
child: Padding(
padding: const EdgeInsets.all(12.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: 60, // Width for the circular container
height: 60, // Height for the circular container
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
color: ColorsManager.textFieldGreyColor, // Border color
width: 2, // Border width
),
color: ColorsManager.textFieldGreyColor,
),
child: Center(
child: SvgPicture.asset(
deviceType.icon,
width: 40,
height: 40,
),
),
),
const SizedBox(height: 8),
Text(
deviceType.name,
style: const TextStyle(
fontSize: 14,
fontWeight: FontWeight.w500,
),
),
const SizedBox(height: 8),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
IconButton(
onPressed: () {
setState(() {});
},
icon: const Icon(Icons.remove_circle_outline),
),
IconButton(
onPressed: () {},
icon: const Icon(Icons.add_circle_outline),
),
],
),
],
),
),
));
}
}

10
lib/utils/constants/assets.dart
View File

@ -162,4 +162,14 @@ class Assets {
static const String textFieldSearch =
'assets/icons/textfield_search_icon.svg';
static const String roundedAddIcon = 'assets/icons/rounded_add_icon.svg';
static const String addIcon = 'assets/icons/add_icon.svg';
static const String smartThermostatIcon =
'assets/icons/smart_thermostat_icon.svg';
static const String smartLightIcon = 'assets/icons/smart_light_icon.svg';
static const String presenceSensor = 'assets/icons/presence_sensor.svg';
static const String Gang3SwitchIcon = 'assets/icons/3_Gang_switch_icon.svg';
static const String Gang2SwitchIcon = 'assets/icons/2_Gang_Switch_icon.svg';
static const String Gang1SwitchIcon = 'assets/icons/1_Gang_switch_icon.svg';
static const String DoorLockIcon = 'assets/icons/door_lock.svg';
static const String SmartGatewayIcon = 'assets/icons/smart_gateway_icon.svg';
}