\u041b\u0430\u0434\u043d\u043e, \u0441\u0435\u0441\u0441\u0438\u0438 \u043f\u043e\u0447\u0438\u043d\u0438\u043b. \u0422\u0435\u043f\u0435\u0440\u044c \u0445\u043e\u0447\u0443 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0441\u0442\u0430\u0442\u0443\u0441\u044b \u0432\u0441\u0435\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432. \u0423 \u043c\u0435\u043d\u044f \u0438\u0445 11 \u0448\u0442\u0443\u043a.<\/p>\n\n\n\n
\u0421\u043c\u043e\u0442\u0440\u044e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e \u042f\u043d\u0434\u0435\u043a\u0441\u0430: \u0435\u0441\u0442\u044c \u043c\u0430\u0441\u0441\u043e\u0432\u044b\u0439 \u0437\u0430\u043f\u0440\u043e\u0441 \/user\/devices\/query, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u043e\u043b\u0436\u0435\u043d \u0432\u0435\u0440\u043d\u0443\u0442\u044c \u0441\u0442\u0430\u0442\u0443\u0441\u044b \u0432\u0441\u0435\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432 \u0441\u0440\u0430\u0437\u0443. \u041e\u0442\u043b\u0438\u0447\u043d\u043e, \u0434\u0435\u043b\u0430\u044e \u043e\u0434\u0438\u043d \u0437\u0430\u043f\u0440\u043e\u0441. \u041d\u043e!<\/p>\n\n\n\n
\u042f\u043d\u0434\u0435\u043a\u0441 \u0438\u043d\u043e\u0433\u0434\u0430 \u043d\u0435 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0441\u0442\u0430\u0442\u0443\u0441\u044b \u0434\u043b\u044f \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432. \u041e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0435\u0441\u043b\u0438 \u043e\u043d\u0438 \u043d\u0435\u0434\u0430\u0432\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u044b \u0438\u043b\u0438 \u0443\u0448\u043b\u0438 \u0432 \u043e\u0444\u0444\u043b\u0430\u0439\u043d. \u0414\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f \u0433\u043e\u0432\u043e\u0440\u0438\u0442: \u201c\u0417\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0439\u0442\u0435 \u0442\u0430\u043a\u0438\u0435 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u0447\u0435\u0440\u0435\u0437 \/devices\/{id}\u201d. \u041e\u043a\u0435\u0439, \u0434\u0435\u043b\u0430\u044e \u0446\u0438\u043a\u043b:<\/p>\n\n\n
\nforeach ($devices as $dev) { \n $status = apiRequest("\/devices\/{$dev['id']}");\n}\n<\/pre><\/div>\n\n\n\u0417\u0430\u043f\u0443\u0441\u043a\u0430\u044e. \u0416\u0434\u0443. \u0416\u0434\u0443. \u0416\u0434\u0443. 15 \u0441\u0435\u043a\u0443\u043d\u0434 \u0433\u0440\u0443\u0437\u0438\u0442\u0441\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430. \u0411\u0435\u0441\u0438\u0442. \u041f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u044f \u0434\u0435\u043b\u0430\u044e 11 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e. \u041a\u0430\u0436\u0434\u044b\u0439 \u0436\u0434\u0435\u0442, \u043f\u043e\u043a\u0430 \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u0442\u0441\u044f \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0439.<\/p>\n\n\n\n
\u0420\u0435\u0448\u0435\u043d\u0438\u0435: <\/strong>curl_multi_init. \u042d\u0442\u043e \u0442\u0430\u043a\u0430\u044f \u0448\u0442\u0443\u043a\u0430 \u0432 PHP, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e HTTP-\u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u043e. \u041d\u0430\u043f\u0438\u0441\u0430\u043b \u0444\u0443\u043d\u043a\u0446\u0438\u044e:<\/p>\n\n\n\nfunction apiRequestParallel($urls, $headers) { \n $mh = curl_multi_init(); \n foreach ($urls as $url) { \n $ch = curl_init($url); \/\/ ... \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 ... \n curl_multi_add_handle($mh, $ch); \n } \n $running = null; \n do { curl_multi_exec($mh, $running); } while ($running > 0); \/\/ \u0421\u043e\u0431\u0438\u0440\u0430\u0435\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \n}\n<\/pre><\/div>\n\n\n\u0412\u043c\u0435\u0441\u0442\u043e 15 \u0441\u0435\u043a\u0443\u043d\u0434 \u2014 2 \u0441\u0435\u043a\u0443\u043d\u0434\u044b. \u041f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0432\u0441\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u043b\u0435\u0442\u044f\u0442 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e.<\/p>\n\n\n\n
<\/span>\u0413\u0440\u0430\u0431\u043b\u044f \u0442\u0440\u0435\u0442\u044c\u044f: \u201cCannot read properties of null\u201d<\/span><\/h3>\n\n\n\n\u0421\u0434\u0435\u043b\u0430\u043b \u043a\u0440\u0430\u0441\u0438\u0432\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0441 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0430\u043c\u0438 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432. \u0412\u0441\u0451 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u0440\u0430\u0434\u0443\u044e\u0441\u044c.<\/p>\n\n\n\n
\u041f\u043e\u0442\u043e\u043c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e \u043d\u043e\u0432\u043e\u0435 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u043e. \u041e\u0442\u043a\u0440\u044b\u0432\u0430\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u2014 \u0431\u0435\u043b\u044b\u0439 \u044d\u043a\u0440\u0430\u043d. \u0412 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u043e\u0448\u0438\u0431\u043a\u0430:<\/p>\n\n\n\n
Cannot read properties of null (reading \u2018value\u2019)<\/em>.<\/p>\n\n\n\n\u0421\u043c\u043e\u0442\u0440\u044e \u043a\u043e\u0434 JavaScript:<\/p>\n\n\n
\nconst isOn = onCap.state.value;\n<\/pre><\/div>\n\n\n\u0427\u0442\u043e \u043d\u0435 \u0442\u0430\u043a-\u0442\u043e?<\/p>\n\n\n\n
\u0410 \u0442\u043e, \u0447\u0442\u043e API \u042f\u043d\u0434\u0435\u043a\u0441\u0430 \u0438\u043d\u043e\u0433\u0434\u0430 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 null \u0432\u043c\u0435\u0441\u0442\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430 state. \u041e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0434\u043b\u044f \u043d\u043e\u0432\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432 \u0438\u043b\u0438 \u0442\u0435\u0445, \u0447\u0442\u043e \u0443\u0448\u043b\u0438 \u0432 \u043e\u0444\u0444\u043b\u0430\u0439\u043d.<\/p>\n\n\n\n
\u042f-\u0442\u043e \u0434\u0443\u043c\u0430\u043b, \u0447\u0442\u043e API \u0432\u0441\u0435\u0433\u0434\u0430 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435. \u0410 \u043e\u043d, \u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f, \u043c\u043e\u0436\u0435\u0442 \u0438 null \u043f\u043e\u0434\u043a\u0438\u043d\u0443\u0442\u044c.<\/p>\n\n\n\n
\u0420\u0435\u0448\u0435\u043d\u0438\u0435: <\/strong>Optional Chaining \u0432 JavaScript.<\/p>\n\n\n\nconst capState = onCap?.state || {}; \nconst isOn = capState.value || false;\n<\/pre><\/div>\n\n\n\u0422\u0435\u043f\u0435\u0440\u044c \u0435\u0441\u043b\u0438 state \u0440\u0430\u0432\u0435\u043d null, \u043a\u043e\u0434 \u043d\u0435 \u043f\u0430\u0434\u0430\u0435\u0442, \u0430 \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u201c\u0421\u0442\u0430\u0442\u0443\u0441 \u043d\u0435\u0438\u0437\u0432\u0435\u0441\u0442\u0435\u043d\u201d. \u0418 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043d\u0435 \u043b\u043e\u043c\u0430\u0435\u0442\u0441\u044f.<\/p>\n\n\n\n
\u0417\u0430\u043e\u0434\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u043b \u043a\u0440\u0430\u0441\u0438\u0432\u044b\u0435 \u0431\u0435\u0439\u0434\u0436\u0438: \u201c\u041d\u0435 \u0432 \u0441\u0435\u0442\u0438\u201d, \u201c\u0423\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0435\u201d, \u201c\u0421\u0442\u0430\u0442\u0443\u0441 \u043d\u0435\u0438\u0437\u0432\u0435\u0441\u0442\u0435\u043d\u201d. \u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0441\u0440\u0430\u0437\u0443 \u0432\u0438\u0434\u0438\u0442, \u0447\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442, \u0430 \u043d\u0435 \u0433\u0430\u0434\u0430\u0435\u0442, \u043f\u043e\u0447\u0435\u043c\u0443 \u0440\u043e\u0437\u0435\u0442\u043a\u0430 \u043d\u0435 \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f.<\/p>\n\n\n\n
<\/span>\u0413\u0440\u0430\u0431\u043b\u044f \u0447\u0435\u0442\u0432\u0435\u0440\u0442\u0430\u044f: \u201c\u042f \u043d\u0430\u0436\u0430\u043b \u043a\u043d\u043e\u043f\u043a\u0443, \u0430 \u043e\u043d\u043e \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442!\u201d<\/span><\/h3>\n\n\n\n\u0421\u0430\u043c\u0430\u044f \u0431\u0435\u0441\u044f\u0447\u0430\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430. \u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c (\u0442\u043e \u0435\u0441\u0442\u044c \u044f) \u043d\u0430\u0436\u0438\u043c\u0430\u0435\u0442 \u201c\u0412\u043a\u043b\u044e\u0447\u0438\u0442\u044c\u201d. \u0412\u0438\u0434\u0438\u0442 \u0441\u043f\u0438\u043d\u043d\u0435\u0440 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438. \u0416\u0434\u0435\u0442 2 \u0441\u0435\u043a\u0443\u043d\u0434\u044b.<\/p>\n\n\n\n
\u041f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0442\u0435\u043b\u044c \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u0432 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u201c\u0412\u044b\u043a\u043b\u044e\u0447\u0435\u043d\u043e\u201d. \u0427\u0442\u043e \u0437\u0430? \u042f \u0436\u0435 \u0432\u043a\u043b\u044e\u0447\u0438\u043b!<\/p>\n\n\n\n
\u0421\u043c\u043e\u0442\u0440\u044e \u043b\u043e\u0433\u0438. \u041a\u043e\u043c\u0430\u043d\u0434\u0430 \u0443\u0448\u043b\u0430 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440 \u042f\u043d\u0434\u0435\u043a\u0441\u0430. \u0421\u0435\u0440\u0432\u0435\u0440 \u043e\u0442\u0432\u0435\u0442\u0438\u043b 202 Accepted (\u0442\u043e \u0435\u0441\u0442\u044c \u201c\u043f\u0440\u0438\u043d\u044f\u043b, \u0441\u0435\u0439\u0447\u0430\u0441 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c\u201d). \u041d\u043e \u043a\u043e\u0433\u0434\u0430 \u044f \u0441\u0440\u0430\u0437\u0443 \u043f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u044e \u0441\u0442\u0430\u0442\u0443\u0441 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430, \u042f\u043d\u0434\u0435\u043a\u0441 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0441\u0442\u0430\u0440\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u2014 \u201c\u0432\u044b\u043a\u043b\u044e\u0447\u0435\u043d\u043e\u201d.<\/p>\n\n\n\n
\u041f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043e\u0431\u043b\u0430\u043a\u0443 \u043d\u0443\u0436\u043d\u043e \u0432\u0440\u0435\u043c\u044f, \u0447\u0442\u043e\u0431\u044b:<\/p>\n\n\n\n
1) \u041e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u043a\u043e\u043c\u0430\u043d\u0434\u0443 \u043d\u0430 \u0444\u0438\u0437\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u0440\u043e\u0437\u0435\u0442\u043a\u0443;<\/p>\n\n\n\n
2) \u0420\u043e\u0437\u0435\u0442\u043a\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u0449\u0435\u043b\u043a\u043d\u0443\u0442\u044c \u0440\u0435\u043b\u0435;<\/p>\n\n\n\n
3) \u0420\u043e\u0437\u0435\u0442\u043a\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u043e\u0442\u0447\u0438\u0442\u0430\u0442\u044c\u0441\u044f \u0432 \u043e\u0431\u043b\u0430\u043a\u043e \u043e\u0431 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0441\u0442\u0430\u0442\u0443\u0441\u0430;<\/p>\n\n\n\n
4) \u041e\u0431\u043b\u0430\u043a\u043e \u0434\u043e\u043b\u0436\u043d\u043e \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u0441\u0432\u043e\u0439 \u043a\u044d\u0448.<\/p>\n\n\n\n
\u0410 \u044f \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u044e \u0441\u0442\u0430\u0442\u0443\u0441 \u0447\u0435\u0440\u0435\u0437 \u0441\u0435\u043a\u0443\u043d\u0434\u0443 \u043f\u043e\u0441\u043b\u0435 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u043a\u043e\u043c\u0430\u043d\u0434\u044b.<\/p>\n\n\n\n
\u0415\u0441\u0442\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u043e\u0431\u043b\u0430\u043a\u043e \u0435\u0449\u0435 \u043d\u0435 \u0432 \u043a\u0443\u0440\u0441\u0435.<\/p>\n\n\n\n
\u0420\u0435\u0448\u0435\u043d\u0438\u0435: <\/strong>Optimistic UI (\u043e\u043f\u0442\u0438\u043c\u0438\u0441\u0442\u0438\u0447\u043d\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441).<\/p>\n\n\n\n\u041d\u0435 \u0436\u0434\u0435\u043c \u043e\u0442\u0432\u0435\u0442\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0430, \u0447\u0442\u043e\u0431\u044b \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443.<\/p>\n\n\n\n
\u0414\u0435\u043b\u0430\u0435\u043c \u0442\u0430\u043a:<\/p>\n\n\n\n
1) \u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0430\u0436\u0430\u043b \u201c\u0412\u043a\u043b\u044e\u0447\u0438\u0442\u044c\u201d;<\/p>\n\n\n\n
2) JavaScript \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u043e \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0442\u0443\u043c\u0431\u043b\u0435\u0440 \u0432 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u201c\u0412\u043a\u043b\u044e\u0447\u0435\u043d\u043e\u201d;<\/p>\n\n\n\n
3) \u041f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0442\u043e\u0441\u0442 \u201c\u041e\u0442\u043f\u0440\u0430\u0432\u043a\u0430 \u043a\u043e\u043c\u0430\u043d\u0434\u044b\u2026\u201d;<\/p>\n\n\n\n
4) \u041e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c \u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440;<\/p>\n\n\n\n
5) \u0415\u0441\u043b\u0438 \u0441\u0435\u0440\u0432\u0435\u0440 \u043e\u0442\u0432\u0435\u0442\u0438\u043b 200\/202 \u2014 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u201c\u0412\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u043e\u201d \u0438 \u0441\u0442\u0430\u0432\u0438\u043c setTimeout \u043d\u0430 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u0447\u0435\u0440\u0435\u0437 5 \u0441\u0435\u043a\u0443\u043d\u0434 (\u043a\u043e\u0433\u0434\u0430 \u043e\u0431\u043b\u0430\u043a\u043e \u0442\u043e\u0447\u043d\u043e \u043f\u0440\u043e\u0441\u043d\u0435\u0442\u0441\u044f);<\/p>\n\n\n\n
6) \u0415\u0441\u043b\u0438 \u0441\u0435\u0440\u0432\u0435\u0440 \u0432\u0435\u0440\u043d\u0443\u043b \u043e\u0448\u0438\u0431\u043a\u0443 \u2014 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u043e \u043e\u0442\u043a\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0442\u0435\u043b\u044c \u043e\u0431\u0440\u0430\u0442\u043d\u043e \u0438 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0442\u0435\u043a\u0441\u0442 \u043e\u0448\u0438\u0431\u043a\u0438.<\/p>\n\n\n\n
\u0414\u043b\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u044d\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043a\u0430\u043a \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u044b\u0439 \u043e\u0442\u043a\u043b\u0438\u043a. \u041a\u0430\u043a \u0432 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u0445. \u0410 \u201c\u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c\u201d \u043c\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u0445\u0438\u0442\u0440\u043e \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c.<\/p>\n\n\n\n
<\/span>\u0427\u0442\u043e \u0432 \u0438\u0442\u043e\u0433\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c<\/span><\/h3>\n\n\n\n\u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u0432\u0441\u0435\u0445 \u044d\u0442\u0438\u0445 \u0438\u0442\u0435\u0440\u0430\u0446\u0438\u0439 \u0443 \u043c\u0435\u043d\u044f \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0441\u044f \u043e\u0434\u0438\u043d \u0444\u0430\u0439\u043b, \u043a\u043e\u0442\u043e\u0440\u044b\u0439:<\/p>\n\n\n\n
1) \u0414\u0435\u043b\u0430\u0435\u0442 OAuth-\u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u044e \u042f\u043d\u0434\u0435\u043a\u0441\u0430<\/p>\n\n\n\n
2) \u041f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043a\u0440\u0430\u0441\u0438\u0432\u044b\u0439 \u0434\u0430\u0448\u0431\u043e\u0440\u0434 \u0441 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0430\u043c\u0438 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432<\/p>\n\n\n\n
3) \u041f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u043a\u043b\u044e\u0447\u0430\u0442\u044c\/\u0432\u044b\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0440\u043e\u0437\u0435\u0442\u043a\u0438, \u043c\u0435\u043d\u044f\u0442\u044c \u044f\u0440\u043a\u043e\u0441\u0442\u044c \u043b\u0430\u043c\u043f, \u0442\u0435\u043c\u043f\u0435\u0440\u0430\u0442\u0443\u0440\u0443 \u043e\u0431\u043e\u0433\u0440\u0435\u0432\u0430\u0442\u0435\u043b\u0435\u0439<\/p>\n\n\n\n
4) \u041a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u043e\u0444\u0444\u043b\u0430\u0439\u043d-\u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430 \u0438 \u043a\u0440\u0438\u0432\u044b\u0435 \u043e\u0442\u0432\u0435\u0442\u044b API \u0420\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0431\u044b\u0441\u0442\u0440\u043e \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u044b\u043c \u0437\u0430\u043f\u0440\u043e\u0441\u0430\u043c<\/p>\n\n\n\n
5) \u041d\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043d\u0438 Webpack, \u043d\u0438 Node.js, \u043d\u0438 \u0431\u0430\u0437 \u0434\u0430\u043d\u043d\u044b\u0445 \u0412\u0441\u0451 \u044d\u0442\u043e \u043d\u0430 \u0447\u0438\u0441\u0442\u043e\u043c PHP + \u043d\u0435\u043c\u043d\u043e\u0433\u043e JavaScript + Tailwind CSS \u0447\u0435\u0440\u0435\u0437 CDN.<\/p>\n\n\n\n
\u041a\u043e\u0434 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0441\u044f \u043e\u043a\u043e\u043b\u043e 400 \u0441\u0442\u0440\u043e\u043a. \u0414\u043b\u044f \u043a\u043e\u0433\u043e-\u0442\u043e \u044d\u0442\u043e \u043c\u043d\u043e\u0433\u043e, \u0434\u043b\u044f \u043a\u043e\u0433\u043e-\u0442\u043e \u043c\u0430\u043b\u043e. \u041d\u043e \u0433\u043b\u0430\u0432\u043d\u043e\u0435 \u2014 \u043e\u043d \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0438 \u0440\u0435\u0448\u0430\u0435\u0442 \u0440\u0435\u0430\u043b\u044c\u043d\u0443\u044e \u0437\u0430\u0434\u0430\u0447\u0443, \u0430 \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u201c\u0434\u0435\u0440\u0433\u0430\u0435\u0442 \u044d\u043d\u0434\u043f\u043e\u0438\u043d\u0442\u201d.<\/p>\n\n\n
\n<?php\n\/**\n * Technofeya Home: Smart Dashboard (v9.6 - Null-Safe)\n * \u0418\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0430 \u043e\u0448\u0438\u0431\u043a\u0430 "Cannot read properties of null" \u043f\u0440\u0438 \u043f\u0430\u0440\u0441\u0438\u043d\u0433\u0435 \u043e\u0442\u0432\u0435\u0442\u0430 API\n *\/\nsession_start();\n\n\/\/ ==================== \u041d\u0410\u0421\u0422\u0420\u041e\u0419\u041a\u0418 ====================\n$CLIENT_ID = 'sgsjhjdhj';\n$CLIENT_SECRET = 'tyjdtuksykdtuk';\n$REDIRECT_URI = 'https:\/\/oauth.yandex.ru\/verification_code';\n$API_BASE = 'https:\/\/api.iot.yandex.net\/v1.0';\n\/\/ ===================================================\n\nfunction apiRequest($url, $method = 'GET', $data = null, $headers = []) {\n $ch = curl_init($url);\n curl_setopt_array($ch, [\n CURLOPT_RETURNTRANSFER => true,\n CURLOPT_HTTPHEADER => $headers,\n CURLOPT_TIMEOUT => 10,\n CURLOPT_SSL_VERIFYPEER => true,\n CURLOPT_FOLLOWLOCATION => true,\n ]);\n\n if ($method === 'POST') {\n curl_setopt($ch, CURLOPT_POST, true);\n if (!empty($data)) {\n if (strpos($url, 'oauth.yandex.ru') !== false) {\n curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($data));\n } else {\n $headers = array_filter($headers, fn($h) => strpos($h, 'Content-Type') === false);\n $headers[] = 'Content-Type: application\/json';\n curl_setopt($ch, CURLOPT_POSTFIELDS, is_array($data) ? json_encode($data) : $data);\n curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);\n }\n }\n }\n\n $response = curl_exec($ch);\n $httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);\n curl_close($ch);\n\n $decoded = json_decode($response, true);\n return ['code' => $httpCode, 'body' => $decoded ?: ['raw_response' => $response]];\n}\n\nfunction apiRequestParallel($urls, $headers) {\n $mh = curl_multi_init();\n $curlArray = [];\n \n foreach ($urls as $key => $url) {\n $ch = curl_init($url);\n curl_setopt_array($ch, [\n CURLOPT_RETURNTRANSFER => true,\n CURLOPT_HTTPHEADER => $headers,\n CURLOPT_TIMEOUT => 10,\n CURLOPT_SSL_VERIFYPEER => true,\n ]);\n curl_multi_add_handle($mh, $ch);\n $curlArray[$key] = $ch;\n }\n \n $running = null;\n do { curl_multi_exec($mh, $running); } while ($running > 0);\n \n $results = [];\n foreach ($curlArray as $key => $ch) {\n $response = curl_multi_getcontent($ch);\n $httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);\n $decoded = json_decode($response, true);\n $results[$key] = ['code' => $httpCode, 'body' => $decoded ?: ['raw_response' => $response]];\n curl_multi_remove_handle($mh, $ch);\n }\n curl_multi_close($mh);\n return $results;\n}\n\n\/\/ ==================== API ROUTER ====================\nif (isset($_GET['api']) && isset($_SESSION['yandex_token'])) {\n header('Content-Type: application\/json');\n $token = $_SESSION['yandex_token'];\n session_write_close();\n $iotHeaders = ["Authorization: Bearer {$token}"];\n\n if ($_GET['api'] === 'devices') {\n $infoRes = apiRequest("{$API_BASE}\/user\/info", 'GET', null, $iotHeaders);\n if ($infoRes['code'] !== 200 || !isset($infoRes['body']['devices'])) {\n echo json_encode(['error' => '\u041d\u0435 \u0443\u0434\u0430\u043b\u043e\u0441\u044c \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0441\u043f\u0438\u0441\u043e\u043a \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432', 'details' => $infoRes['body']]);\n exit;\n }\n \n $devices = $infoRes['body']['devices'];\n $deviceIds = array_map(fn($d) => ['id' => $d['id']], $devices);\n \n $queryRes = apiRequest("{$API_BASE}\/user\/devices\/query", 'POST', ['devices' => $deviceIds], $iotHeaders);\n $states = [];\n \n if ($queryRes['code'] === 200 && isset($queryRes['body']['devices'])) {\n foreach ($queryRes['body']['devices'] as $devState) {\n $states[$devState['id']] = $devState['capabilities'] ?? [];\n }\n }\n \n $missing = array_filter($devices, fn($d) => !isset($states[$d['id']]));\n if (count($missing) > 0) {\n $urls = array_map(fn($d) => "{$API_BASE}\/devices\/{$d['id']}", $missing);\n $parallelRes = apiRequestParallel($urls, $iotHeaders);\n \n foreach ($parallelRes as $key => $res) {\n if ($res['code'] === 200 && isset($res['body']['capabilities'])) {\n $devId = $missing[$key]['id'];\n $states[$devId] = $res['body']['capabilities'];\n $devices[array_search($devId, array_column($devices, 'id'))]['device_state'] = $res['body']['state'] ?? 'unknown';\n }\n }\n }\n \n foreach ($devices as &$dev) {\n $dev['current_state'] = $states[$dev['id']] ?? [];\n if (!isset($dev['device_state'])) {\n $dev['device_state'] = 'unknown';\n }\n }\n \n echo json_encode(['success' => true, 'devices' => $devices]);\n exit;\n }\n\n if ($_GET['api'] === 'action') {\n $rawInput = file_get_contents('php:\/\/input');\n $input = json_decode($rawInput, true) ?: $_POST;\n\n if (empty($input) || !isset($input['devices'])) {\n echo json_encode(['success' => false, 'error' => '\u041f\u0443\u0441\u0442\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435']);\n exit;\n }\n\n $res = apiRequest("{$API_BASE}\/devices\/actions", 'POST', $input, $iotHeaders);\n if ($res['code'] === 200 || $res['code'] === 202) {\n echo json_encode(['success' => true]);\n } else {\n echo json_encode(['success' => false, 'error' => "HTTP {$res['code']}", 'details' => $res['body']]);\n }\n exit;\n }\n}\n\n\/\/ ==================== \u0410\u0412\u0422\u041e\u0420\u0418\u0417\u0410\u0426\u0418\u042f ====================\nif (isset($_POST['manual_code']) && !isset($_SESSION['yandex_token'])) {\n $res = apiRequest('https:\/\/oauth.yandex.ru\/token', 'POST', [\n 'grant_type' => 'authorization_code', 'code' => trim($_POST['manual_code']),\n 'client_id' => $CLIENT_ID, 'client_secret' => $CLIENT_SECRET, 'redirect_uri' => $REDIRECT_URI\n ]);\n\n if ($res['code'] == 200 && isset($res['body']['access_token'])) {\n $_SESSION['yandex_token'] = $res['body']['access_token'];\n $userInfo = apiRequest('https:\/\/login.yandex.ru\/info?format=json', 'GET', null, ['Authorization: OAuth ' . $_SESSION['yandex_token']]);\n $_SESSION['yandex_user'] = $userInfo['body']['login'] ?? 'User';\n header('Location: ' . strtok($_SERVER["REQUEST_URI"], '?'));\n exit;\n }\n $authError = "\u041e\u0448\u0438\u0431\u043a\u0430: " . json_encode($res['body']);\n}\n\nif (!isset($_SESSION['yandex_token'])) {\n $authUrl = "https:\/\/oauth.yandex.ru\/authorize?response_type=code&client_id={$CLIENT_ID}&redirect_uri=" . urlencode($REDIRECT_URI);\n die("<!DOCTYPE html><html><head><meta charset='utf-8'><title>\u0412\u0445\u043e\u0434<\/title>\n <style>body{font-family:system-ui;max-width:400px;margin:100px auto;padding:20px;text-align:center;background:#f5f5f7}\n .card{background:#fff;padding:30px;border-radius:16px;box-shadow:0 4px 20px rgba(0,0,0,0.08)}\n .btn{display:block;width:100%;padding:14px;background:#fc0;color:#000;border:none;border-radius:10px;font-weight:bold;font-size:16px;cursor:pointer;margin:15px 0;text-decoration:none}\n input{width:100%;padding:12px;border:1px solid #ddd;border-radius:10px;margin:10px 0;box-sizing:border-box;text-align:center}<\/style><\/head>\n <body><div class='card'><h2>\ud83d\udd0c Technofeya Home<\/h2>\n " . (isset($authError) ? "<p style='color:red;font-size:14px'>$authError<\/p>" : "") . "\n <p style='font-size:14px;color:#666'>1. \u041d\u0430\u0436\u043c\u0438\u0442\u0435 \u043a\u043d\u043e\u043f\u043a\u0443 \u043d\u0438\u0436\u0435.<br>2. \u0420\u0430\u0437\u0440\u0435\u0448\u0438\u0442\u0435 \u0434\u043e\u0441\u0442\u0443\u043f.<br>3. \u0421\u043a\u043e\u043f\u0438\u0440\u0443\u0439\u0442\u0435 \u043a\u043e\u0434 \u0438 \u0432\u0441\u0442\u0430\u0432\u044c\u0442\u0435 \u0435\u0433\u043e \u0441\u044e\u0434\u0430.<\/p>\n <a href='$authUrl' target='_blank' class='btn'>\ud83d\udd11 \u041f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043a\u043e\u0434 \u043e\u0442 \u042f\u043d\u0434\u0435\u043a\u0441\u0430<\/a>\n <form method='POST'><input type='text' name='manual_code' placeholder='\u0412\u0441\u0442\u0430\u0432\u044c\u0442\u0435 \u043a\u043e\u0434' required><button class='btn' style='background:#007aff;color:#fff'>\u0412\u043e\u0439\u0442\u0438<\/button><\/form><\/div><\/body><\/html>");\n}\n?>\n<!DOCTYPE html>\n<html lang="ru">\n<head>\n <meta charset="UTF-8">\n <meta name="viewport" content="width=device-width, initial-scale=1.0">\n <title>Technofeya Home Dashboard<\/title>\n <script src="https:\/\/cdn.tailwindcss.com"><\/script>\n <style>\n .toggle-checkbox:checked { right: 0; border-color: #34c759; }\n .toggle-checkbox:checked + .toggle-label { background-color: #34c759; }\n .glass-panel { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }\n .loader { border: 3px solid #f3f3f3; border-top: 3px solid #007aff; border-radius: 50%; width: 24px; height: 24px; animation: spin 1s linear infinite; }\n @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }\n <\/style>\n<\/head>\n<body class="bg-gray-100 text-gray-800 font-sans min-h-screen">\n\n <header class="glass-panel sticky top-0 z-50 border-b border-gray-200 shadow-sm">\n <div class="max-w-4xl mx-auto px-4 py-4 flex justify-between items-center">\n <h1 class="text-xl font-bold flex items-center gap-2">\ud83d\udd0c Technofeya Home <span class="text-xs font-normal text-gray-500 bg-gray-200 px-2 py-1 rounded-full">v9.6<\/span><\/h1>\n <div class="flex items-center gap-3">\n <span class="text-sm text-gray-600 hidden sm:inline">\ud83d\udc64 <?= htmlspecialchars($_SESSION['yandex_user']) ?><\/span>\n <button onclick="window.location.href='?action=logout'" class="text-sm text-red-500 hover:text-red-700 font-medium border border-red-200 px-3 py-1 rounded-lg hover:bg-red-50 transition">\u0412\u044b\u0439\u0442\u0438<\/button>\n <\/div>\n <\/div>\n <\/header>\n\n <main class="max-w-4xl mx-auto px-4 py-8">\n <div class="flex justify-between items-center mb-6">\n <h2 class="text-2xl font-semibold">\u041c\u043e\u0438 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430<\/h2>\n <button onclick="loadDevices()" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg flex items-center gap-2 transition shadow-sm">\n <span id="refresh-icon">\ud83d\udd04<\/span> \u041e\u0431\u043d\u043e\u0432\u0438\u0442\u044c\n <\/button>\n <\/div>\n <div id="devices-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">\n <div class="col-span-full text-center py-20 text-gray-500">\n <div class="loader mx-auto mb-4"><\/div>\n \u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432...\n <\/div>\n <\/div>\n <\/main>\n\n <div id="toast" class="fixed bottom-5 right-5 bg-gray-800 text-white px-6 py-3 rounded-lg shadow-xl transform translate-y-20 opacity-0 transition-all duration-300 z-50 max-w-sm break-words"><\/div>\n\n <script>\n async function loadDevices() {\n const grid = document.getElementById('devices-grid');\n const btn = document.getElementById('refresh-icon');\n btn.classList.add('animate-spin');\n \n try {\n const res = await fetch('?api=devices');\n const data = await res.json();\n \n if (data.error) {\n grid.innerHTML = `<div class="col-span-full bg-red-100 text-red-700 p-4 rounded-lg border border-red-200">${data.error}<\/div>`;\n return;\n }\n\n grid.innerHTML = '';\n if (!data.devices || data.devices.length === 0) {\n grid.innerHTML = `<div class="col-span-full text-center text-gray-500 py-10">\u0423\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430 \u043d\u0435 \u043d\u0430\u0439\u0434\u0435\u043d\u044b.<\/div>`;\n return;\n }\n\n data.devices.forEach(dev => grid.appendChild(createDeviceCard(dev)));\n showToast('\u0421\u043f\u0438\u0441\u043e\u043a \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d');\n } catch (e) {\n grid.innerHTML = `<div class="col-span-full bg-red-100 text-red-700 p-4 rounded-lg">\u041e\u0448\u0438\u0431\u043a\u0430 \u0441\u0435\u0442\u0438: ${e.message}<\/div>`;\n } finally {\n btn.classList.remove('animate-spin');\n }\n }\n\n function createDeviceCard(dev) {\n const state = dev.current_state || [];\n const onCap = state.find(c => c.type === 'devices.capabilities.on_off');\n \n \/\/ === \u0418\u0421\u041f\u0420\u0410\u0412\u041b\u0415\u041d\u0418\u0415: \u0411\u0415\u0417\u041e\u041f\u0410\u0421\u041d\u041e\u0415 \u0418\u0417\u0412\u041b\u0415\u0427\u0415\u041d\u0418\u0415 \u0414\u0410\u041d\u041d\u042b\u0425 (Null-Safe) ===\n const capState = onCap?.state || {}; \n const isRetrievable = onCap ? onCap.retrievable : false;\n const isOn = isRetrievable ? !!capState.value : false;\n const lastUpdated = isRetrievable && capState.last_updated ? capState.last_updated : 0;\n const isStale = lastUpdated > 0 && (Date.now() \/ 1000 - lastUpdated) > 3600; \n \n const deviceState = dev.device_state || 'unknown';\n const isOffline = deviceState === 'offline';\n\n let statusBadge = '';\n if (isOffline) {\n statusBadge = `<span class="text-[10px] bg-gray-200 text-gray-600 px-2 py-0.5 rounded-full">\ud83d\udce1 \u041d\u0435 \u0432 \u0441\u0435\u0442\u0438<\/span>`;\n } else if (isStale) {\n statusBadge = `<span class="text-[10px] bg-yellow-100 text-yellow-700 px-2 py-0.5 rounded-full" title="\u0421\u0442\u0430\u0442\u0443\u0441 \u043d\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u043b\u0441\u044f \u0431\u043e\u043b\u0435\u0435 \u0447\u0430\u0441\u0430">\u26a0\ufe0f \u0423\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0435<\/span>`;\n } else if (!isRetrievable) {\n statusBadge = `<span class="text-[10px] bg-blue-100 text-blue-700 px-2 py-0.5 rounded-full" title="\u0423\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u043e \u043d\u0435 \u0441\u043e\u043e\u0431\u0449\u0430\u0435\u0442 \u0441\u0432\u043e\u0439 \u0441\u0442\u0430\u0442\u0443\u0441">\u2753 \u0421\u0442\u0430\u0442\u0443\u0441 \u043d\u0435\u0438\u0437\u0432\u0435\u0441\u0442\u0435\u043d<\/span>`;\n }\n\n let extraControls = '';\n const rangeCap = state.find(c => c.type === 'devices.capabilities.range');\n \/\/ === \u0418\u0421\u041f\u0420\u0410\u0412\u041b\u0415\u041d\u0418\u0415: \u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 rangeCap?.state \u043f\u0435\u0440\u0435\u0434 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c ===\n if (rangeCap && rangeCap.retrievable && rangeCap?.state) {\n const val = rangeCap.state.value;\n const min = rangeCap.parameters?.range?.min || 1;\n const max = rangeCap.parameters?.range?.max || 100;\n const instance = rangeCap.state.instance;\n const label = instance === 'brightness' ? '\u042f\u0440\u043a\u043e\u0441\u0442\u044c' : (instance === 'temperature' ? '\u0422\u0435\u043c\u043f\u0435\u0440\u0430\u0442\u0443\u0440\u0430' : '\u0423\u0440\u043e\u0432\u0435\u043d\u044c');\n \n extraControls += `\n <div class="mt-4 pt-4 border-t border-gray-100">\n <div class="flex justify-between text-xs text-gray-500 mb-1">\n <span>${label}<\/span>\n <span id="val-${dev.id}-${instance}" class="font-bold text-blue-600">${val}<\/span>\n <\/div>\n <input type="range" min="${min}" max="${max}" value="${val}" \n class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-blue-500"\n onchange="sendRangeAction('${dev.id}', '${instance}', this.value)" ${isOffline ? 'disabled' : ''}>\n <\/div>\n `;\n }\n\n const card = document.createElement('div');\n card.id = `card-${dev.id}`;\n card.className = `glass-panel rounded-2xl p-5 shadow-sm border border-white\/60 hover:shadow-md transition relative overflow-hidden ${isOffline ? 'opacity-75' : ''}`;\n card.innerHTML = `\n <div class="absolute top-0 right-0 w-24 h-24 bg-gradient-to-br from-blue-50 to-transparent rounded-bl-full -mr-4 -mt-4"><\/div>\n <div class="relative z-10">\n <div class="flex justify-between items-start mb-2">\n <div>\n <h3 class="font-bold text-lg text-gray-800 leading-tight flex items-center gap-2">\n ${dev.name}\n ${statusBadge}\n <\/h3>\n <p class="text-[10px] text-gray-400 mt-1 font-mono truncate w-40" title="${dev.id}">${dev.id}<\/p>\n <\/div>\n <div id="status-${dev.id}" class="status-indicator w-3 h-3 rounded-full mt-1.5 ${isOn ? 'bg-green-500 shadow-[0_0_8px_rgba(34,197,94,0.6)]' : 'bg-gray-300'}"><\/div>\n <\/div>\n \n <div class="flex items-center justify-between mt-4">\n <span id="text-${dev.id}" class="text-sm font-medium ${isOn ? 'text-green-600' : 'text-gray-400'}">\n ${isOn ? '\u0412\u043a\u043b\u044e\u0447\u0435\u043d\u043e' : (isRetrievable ? '\u0412\u044b\u043a\u043b\u044e\u0447\u0435\u043d\u043e' : '\u0421\u0442\u0430\u0442\u0443\u0441 \u043d\u0435\u0438\u0437\u0432\u0435\u0441\u0442\u0435\u043d')}\n <\/span>\n \n <label class="relative inline-flex items-center cursor-pointer ${isOffline ? 'opacity-50 cursor-not-allowed' : ''}">\n <input type="checkbox" id="toggle-${dev.id}" class="sr-only toggle-checkbox" ${isOn ? 'checked' : ''} \n onchange="sendOnOffAction('${dev.id}', this.checked)" ${isOffline ? 'disabled' : ''}>\n <div class="w-11 h-6 bg-gray-200 rounded-full toggle-label transition-colors duration-300"><\/div>\n <div id="knob-${dev.id}" class="absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition-transform duration-300 transform ${isOn ? 'translate-x-5' : 'translate-x-0'} shadow-sm"><\/div>\n <\/label>\n <\/div>\n ${extraControls}\n <\/div>\n `;\n return card;\n }\n\n function updateDeviceUI(deviceId, isOn) {\n const status = document.getElementById(`status-${deviceId}`);\n const text = document.getElementById(`text-${deviceId}`);\n const toggle = document.getElementById(`toggle-${deviceId}`);\n const knob = document.getElementById(`knob-${deviceId}`);\n \n if (status) status.className = `status-indicator w-3 h-3 rounded-full mt-1.5 ${isOn ? 'bg-green-500 shadow-[0_0_8px_rgba(34,197,94,0.6)]' : 'bg-gray-300'}`;\n if (text) {\n text.className = `text-sm font-medium ${isOn ? 'text-green-600' : 'text-gray-400'}`;\n text.textContent = isOn ? '\u0412\u043a\u043b\u044e\u0447\u0435\u043d\u043e' : '\u0412\u044b\u043a\u043b\u044e\u0447\u0435\u043d\u043e';\n }\n if (toggle) toggle.checked = isOn;\n if (knob) knob.className = `absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition-transform duration-300 transform ${isOn ? 'translate-x-5' : 'translate-x-0'} shadow-sm`;\n }\n\n async function sendAction(deviceId, payload, optimisticUpdate = null) {\n showToast('\u23f3 \u041e\u0442\u043f\u0440\u0430\u0432\u043a\u0430 \u043a\u043e\u043c\u0430\u043d\u0434\u044b...', 'info');\n if (optimisticUpdate !== null) updateDeviceUI(deviceId, optimisticUpdate);\n \n try {\n const res = await fetch('?api=action', {\n method: 'POST',\n headers: {'Content-Type': 'application\/json'},\n body: JSON.stringify({devices: [{id: deviceId, actions: [payload]}]})\n });\n const data = await res.json();\n \n if (data.success) {\n showToast('\u041a\u043e\u043c\u0430\u043d\u0434\u0430 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0430');\n setTimeout(loadDevices, 5000);\n } else {\n showToast((data.error || '\u041e\u0448\u0438\u0431\u043a\u0430') + (data.details ? ': ' + JSON.stringify(data.details) : ''), 'error');\n if (optimisticUpdate !== null) updateDeviceUI(deviceId, !optimisticUpdate);\n }\n } catch (e) {\n showToast('\u041e\u0448\u0438\u0431\u043a\u0430 \u0441\u0435\u0442\u0438: ' + e.message, 'error');\n if (optimisticUpdate !== null) updateDeviceUI(deviceId, !optimisticUpdate);\n }\n }\n\n function sendOnOffAction(deviceId, isOn) {\n sendAction(deviceId, {type: 'devices.capabilities.on_off', state: {instance: 'on', value: isOn}}, isOn);\n }\n\n function sendRangeAction(deviceId, instance, value) {\n const el = document.getElementById(`val-${deviceId}-${instance}`);\n if (el) el.innerText = value;\n sendAction(deviceId, {type: 'devices.capabilities.range', state: {instance: instance, value: parseInt(value)}});\n }\n\n function showToast(msg, type = 'success') {\n const toast = document.getElementById('toast');\n toast.innerText = msg;\n toast.className = `fixed bottom-5 right-5 px-6 py-3 rounded-lg shadow-xl transform transition-all duration-300 z-50 text-white text-sm ${type === 'error' ? 'bg-red-500' : (type === 'info' ? 'bg-gray-600' : 'bg-green-600')}`;\n toast.style.transform = 'translateY(0)';\n toast.style.opacity = '1';\n setTimeout(() => {\n toast.style.transform = 'translateY(20px)';\n toast.style.opacity = '0';\n }, 4000);\n }\n\n document.addEventListener('DOMContentLoaded', loadDevices);\n <\/script>\n<\/body>\n<\/html>\n<\/pre><\/div>\n\n\n\u0414\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u0434 \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0447\u0435\u0440\u0435\u0437 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043d\u0430 \u043c\u043e\u0435\u043c \u0445\u043e\u043b\u043e\u0434\u0438\u043b\u044c\u043d\u0438\u043a\u0435 \u0442\u0435\u043f\u0435\u0440\u044c \u0431\u0435\u0437 \u043e\u0448\u0438\u0431\u043e\u043a \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n\n\n\n![\"\u0423\u043f\u0440\u0430\u0432\u043b\u044f\u044e](\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/287\/5dd\/08e\/2875dd08eb4d2e1a8b46f85bfc6de4df.png\" "\\"\u0423\u043f\u0440\u0430\u0432\u043b\u044f\u044e")
\u0423\u043f\u0440\u0430\u0432\u043b\u044f\u044e \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438 \u0443\u043c\u043d\u043e\u0433\u043e \u0434\u043e\u043c\u0430 \u042f\u043d\u0434\u0435\u043a\u0441\u0430 \u0447\u0435\u0440\u0435\u0437 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 PHP-\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441<\/figcaption><\/figure>\n\n\n\n\u0418 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438, \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043b\u044e\u0431\u0443\u044e \u043b\u043e\u0433\u0438\u043a\u0443 \u0432\u043d\u0435 \u043b\u0438\u043d\u0435\u0439\u043d\u043e\u0441\u0442\u0438 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0435\u0432 \u042f\u043d\u0434\u0435\u043a\u0441\u0430 \u044f \u043c\u043e\u0433\u0443 \u043f\u0440\u043e\u043f\u0438\u0441\u0430\u0442\u044c \u043f\u0430\u0440\u043e\u0439 \u0441\u0442\u0440\u043e\u0447\u0435\u043a \u043a\u043e\u0434\u0430. \u0421\u043f\u0430\u0441\u0438\u0431\u043e \u0437\u0430 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435!<\/p>\n","protected":false},"excerpt":{"rendered":"
\u041f\u0440\u0438\u0432\u0435\u0442. \u0421\u0440\u0430\u0437\u0443 \u0441\u043a\u0430\u0436\u0443: \u044f \u043f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a, \u043d\u043e \u043f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u043e\u0448\u0438\u0431\u043a\u0430\u043c\u0438 \u0435\u0449\u0435 \u0441 \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0438\u0442\u0435\u0442\u0430 \u0443 \u043c\u0435\u043d\u044f \u0432\u044b\u043b\u0435\u0442\u0430\u043b\u043e \u0441\u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0448\u0438\u0431\u043e\u043a, \u0447\u0442\u043e \u0438\u0445 \u043f\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0443 \u0431\u044b\u043b\u043e \u0440\u0435\u0448\u0438\u0442\u044c \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u043d\u043e \u0438 \u043f\u043e \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0443 \u0434\u0430\u0436\u0435 \u043e\u0434\u043d\u043e\u0439 \u043e\u0448\u0438\u0431\u043a\u0438 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u043b\u043e\u0441\u044c \u0437\u0430\u0441\u0438\u0436\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0435 \u043d\u0430 \u043e\u0434\u0438\u043d \u0432\u0435\u0447\u0435\u0440 \u0432\u043c\u0435\u0441\u0442\u043e \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0433\u0443\u043b\u044f\u0442\u044c, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440. \u041f\u043e \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u0435 \u044f \u0432\u043e\u043e\u0431\u0449\u0435 \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u0431\u044b\u043b \u0434\u0430\u043b\u0435\u043a \u043e\u0442 IT. \u0418, […]<\/p>\n","protected":false},"author":1,"featured_media":1107,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"dsgo_overlay_header":false,"dsgo_overlay_header_text_color":"","dsgo_overlay_skip_top_bar":false,"_designsetgo_exclude_llms":false,"footnotes":""},"categories":[1,12,104],"tags":[368,370,372,369,284,371,253,37,367],"class_list":["post-1106","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-1","category-12","category-104","tag-esphome","tag-home-assistant","tag-php","tag-smart-home","tag-284","tag--php","tag-253","tag-37","tag-367"],"aioseo_notices":[],"tf_views":0,"tf_read_time":24,"_links":{"self":[{"href":"https:\/\/news.tfeya.ru\/index.php?rest_route=\/wp\/v2\/posts\/1106","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/news.tfeya.ru\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/news.tfeya.ru\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/news.tfeya.ru\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/news.tfeya.ru\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1106"}],"version-history":[{"count":1,"href":"https:\/\/news.tfeya.ru\/index.php?rest_route=\/wp\/v2\/posts\/1106\/revisions"}],"predecessor-version":[{"id":1108,"href":"https:\/\/news.tfeya.ru\/index.php?rest_route=\/wp\/v2\/posts\/1106\/revisions\/1108"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/news.tfeya.ru\/index.php?rest_route=\/wp\/v2\/media\/1107"}],"wp:attachment":[{"href":"https:\/\/news.tfeya.ru\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1106"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/news.tfeya.ru\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1106"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/news.tfeya.ru\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1106"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"\u0414\u0430\u0442\u0447\u0438\u043a](\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/743\/7e5\/da1\/7437e5da18cf626a3299c6c4aec2a752.png\" "\\"\u0414\u0430\u0442\u0447\u0438\u043a")
![\"\u0411\u0430\u0434\u044c\u044f](\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/4a3\/ab0\/ec1\/4a3ab0ec15d94eab7b653d13e404f434.jpg\" "\\"\u0411\u0430\u0434\u044c\u044f")
![\"Sensorbox](\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/a53\/b7a\/6b5\/a53b7a6b5cab7b99e98aaa71c8f69109.jpg\" "\\"Sensorbox")
![\"\u0414\u0438\u0441\u043f\u043b\u0435\u0439](\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/e39\/a25\/467\/e39a2546786cafd43d86fa2942986bca.jpg\" "\\"\u0414\u0438\u0441\u043f\u043b\u0435\u0439")