iotmanager/IoTManagerWeb
1
0
Fork 0
mirror of https://github.com/IoTManagerProject/IoTManagerWeb.git synced 2026-03-26 23:12:34 +03:00
Code Issues Packages Projects Releases Wiki Activity

добавлена кнопка перезагрузки

Browse Source
This commit is contained in:
Dmitry Borisenko
2022-02-08 16:47:26 +01:00
parent 274832dc2e
commit b0d66cb776
4 changed files with 90 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
src/App.svelte
View File

@@ -6,7 +6,7 @@
router.mode.hash(); router.mode.hash();
import Alarm from "./components/Alarm.svelte"; import Alarm from "./components/Alarm.svelte";
//import Progress from "./components/Progress.svelte"; import Progress from "./components/Progress.svelte";
import Modal from "./components/Modal.svelte"; import Modal from "./components/Modal.svelte";
import DashboardPage from "./pages/Dashboard.svelte"; import DashboardPage from "./pages/Dashboard.svelte";
@@ -24,13 +24,14 @@
let debug = true; let debug = true;
let LOG_MAX_MESSAGES = 10; let LOG_MAX_MESSAGES = 10;
let reconnectTimeout = 30000; let reconnectTimeout = 30000;
let rebootingTimeout = 20000;
let opened = false; let opened = false;
let preventMove = false; let preventMove = false;
//****************************************************variable section**********************************************************/ //****************************************************variable section**********************************************************/
//******************************************************************************************************************************/ //******************************************************************************************************************************/
//let myip = document.location.hostname; let myip = document.location.hostname;
let myip = "192.168.88.235"; //let myip = "192.168.88.235";
//Flags //Flags
let showInput = false; let showInput = false;
@@ -62,6 +63,9 @@
let settingsJsonFlag = false; let settingsJsonFlag = false;
let settingsJsonParced = false; let settingsJsonParced = false;
let errorsJson = {};
let errorsJsonParced = false;
let ssidJson = {}; let ssidJson = {};
let ssidJsonParced = false; let ssidJsonParced = false;
@@ -130,9 +134,11 @@
sendCurrentPageName(); sendCurrentPageName();
} }
//отправляем запрос данных для данной страницы и запрос данных для всех страниц - /all
function sendCurrentPageName() { function sendCurrentPageName() {
if (selectedWs !== undefined) { if (selectedWs !== undefined) {
wsSendMsg(selectedWs, currentPageName); wsSendMsg(selectedWs, currentPageName);
wsSendMsg(selectedWs, "/all");
} }
} }
@@ -232,7 +238,7 @@
let statusJson = JSON.parse(data); let statusJson = JSON.parse(data);
udatelayoutJson(statusJson); udatelayoutJson(statusJson);
wigetsUpdate(); wigetsUpdate();
if (debug) console.log("[i]", "statusJson parced: ", statusJson); if (debug) console.log("✔", "statusJson parced");
} }
} }
//сборщик paramsJson сообщений====================================== //сборщик paramsJson сообщений======================================
@@ -241,7 +247,7 @@
let paramsJson = JSON.parse(data); let paramsJson = JSON.parse(data);
//udatelayoutJson(statusJson); //udatelayoutJson(statusJson);
//wigetsUpdate(); //wigetsUpdate();
if (debug) console.log("[i]", "paramsJson parced: ", paramsJson); if (debug) console.log("✔", "paramsJson parced");
} }
} }
//сборщик ssidJson сообщений====================================== //сборщик ssidJson сообщений======================================
@@ -251,7 +257,7 @@
delete ssidJson.ssid; delete ssidJson.ssid;
ssidJson = ssidJson; ssidJson = ssidJson;
ssidJsonParced = true; ssidJsonParced = true;
if (debug) console.log("[i]", "ssidJson parced"); if (debug) console.log("✔", "ssidJson parced");
} }
} }
//сборщик deviceList сообщений====================================== //сборщик deviceList сообщений======================================
@@ -265,7 +271,18 @@
deviceList = deviceList; deviceList = deviceList;
whenDeviceListWasUpdated(); whenDeviceListWasUpdated();
connectToAllDevices(); connectToAllDevices();
if (debug) console.log("[i]", "incDeviceList json parced", incDeviceList); if (debug) console.log("✔", "incDeviceList json parced");
}
}
//сборщик errorsJson сообщений======================================
if (data.includes("errors")) {
if (IsJsonParse(data)) {
errorsJson = JSON.parse(data);
delete errorsJson.errors;
errorsJson = errorsJson;
errorsJsonParced = true;
handleErrors();
if (debug) console.log("✔", "errorsJson json parced");
} }
} }
//сборщик configJson пакетов======================================== //сборщик configJson пакетов========================================
@@ -285,7 +302,7 @@
configJson = JSON.parse(configJsonResult); configJson = JSON.parse(configJsonResult);
configJson = configJson; configJson = configJson;
configJsonParced = true; configJsonParced = true;
if (debug) console.log("[ii]", "configJson parced!"); if (debug) console.log("✔", "configJson parced");
} }
}; };
} }
@@ -306,7 +323,7 @@
widgetsJson = JSON.parse(widgetsJsonResult); widgetsJson = JSON.parse(widgetsJsonResult);
widgetsJson = widgetsJson; widgetsJson = widgetsJson;
widgetsJsonParced = true; widgetsJsonParced = true;
if (debug) console.log("[ii]", "widgetsJson parced!"); if (debug) console.log("✔", "widgetsJson parced");
} }
}; };
} }
@@ -327,7 +344,7 @@
itemsJson = JSON.parse(itemsJsonResult); itemsJson = JSON.parse(itemsJsonResult);
itemsJson = itemsJson; itemsJson = itemsJson;
itemsJsonParced = true; itemsJsonParced = true;
if (debug) console.log("[ii]", "itemsJson parced!"); if (debug) console.log("✔", "itemsJson parced");
} }
}; };
} }
@@ -349,7 +366,7 @@
layoutJson = layoutJson; layoutJson = layoutJson;
wigetsUpdate(); wigetsUpdate();
layoutJsonParced = true; layoutJsonParced = true;
if (debug) console.log("[ii]", "layoutJson parced!"); if (debug) console.log("✔", "layoutJson parced");
} }
}; };
} }
@@ -372,7 +389,7 @@
wigetsUpdate(); wigetsUpdate();
settingsJsonParced = true; settingsJsonParced = true;
updateThisDeviceInList(); updateThisDeviceInList();
if (debug) console.log("[ii]", "settingsJson parced!"); if (debug) console.log("✔", "settingsJson parced");
} }
}; };
} }
@@ -406,6 +423,7 @@
} }
function saveSettings() { function saveSettings() {
console.log("[i]", settingsJson);
wsSendMsg(selectedWs, "/cennoc" + JSON.stringify(settingsJson)); wsSendMsg(selectedWs, "/cennoc" + JSON.stringify(settingsJson));
clearData(); clearData();
sendCurrentPageName(); sendCurrentPageName();
@@ -464,6 +482,8 @@
settingsJson = {}; settingsJson = {};
settingsJsonBlob.clear(); settingsJsonBlob.clear();
errorsJson = {};
configJsonParced = false; configJsonParced = false;
widgetsJsonParced = false; widgetsJsonParced = false;
itemsJsonParced = false; itemsJsonParced = false;
@@ -749,6 +769,29 @@
wsSendMsg(selectedWs, "/scan"); wsSendMsg(selectedWs, "/scan");
} }
let wsClientsError = false;
function handleErrors() {
if (errorsJson.wscle === 1) {
wsClientsError = true;
}
}
let rebootingInProgress = false;
const myTimeout = undefined;
function rebootEsp() {
if (debug) console.log("[i]", "reboot...");
wsSendMsg(selectedWs, "/reboot");
rebootingInProgress = true;
myTimeout = setTimeout(rebootingTask, rebootingTimeout);
}
function rebootingTask() {
clearTimeout(myTimeout);
connectToAllDevices();
rebootingInProgress = false;
}
//*******************************************************initialisation********************************************************************/ //*******************************************************initialisation********************************************************************/
onMount(async () => { onMount(async () => {
console.log("[i]", "mounted"); console.log("[i]", "mounted");
@@ -760,11 +803,15 @@
</script> </script>
<div class="flex flex-col h-screen bg-gray-50"> <div class="flex flex-col h-screen bg-gray-50">
<Modal show={showModalFlag} /> {#if wsClientsError}
<Modal header={"Ошибка"} text={"Слишком много клиентов было открыто. Допускается не более четырех. Для исчезновения ошибки перезагрузите устройство"} />
{/if}
{#if rebootingInProgress}
<Progress />
{/if}
<header class="h-10 w-full bg-gray-100 overflow-auto shadow-md"> <header class="h-10 w-full bg-gray-100 overflow-auto shadow-md">
<div class="flex content-center items-center justify-end"> <div class="flex content-center items-center justify-end">
<div class="px-15 py-1 z-50 "> <div class="px-15 py-1">
<select class="border border-indigo-500 border-4" bind:value={selectedWs} on:change={() => devicesDropdownChange()}> <select class="border border-indigo-500 border-4" bind:value={selectedWs} on:change={() => devicesDropdownChange()}>
{#each deviceList as device} {#each deviceList as device}
<option value={device.ws}> <option value={device.ws}>
@@ -823,7 +870,7 @@
<ConfigPage configJson={configJson} widgetsJson={widgetsJson} itemsJson={itemsJson} saveConfig={() => saveConfig()} /> <ConfigPage configJson={configJson} widgetsJson={widgetsJson} itemsJson={itemsJson} saveConfig={() => saveConfig()} />
</Route> </Route>
<Route path="/connection"> <Route path="/connection">
<ConnectionPage settingsJson={settingsJson} ssidJson={ssidJson} ssidDropdownClick={() => ssidDropdownClick()} saveSettings={() => saveSettings()} /> <ConnectionPage settingsJson={settingsJson} errorsJson={errorsJson} ssidJson={ssidJson} rebootEsp={() => rebootEsp()} ssidDropdownClick={() => ssidDropdownClick()} saveSettings={() => saveSettings()} />
</Route> </Route>
<Route path="/utilities"> <Route path="/utilities">
<UtilitiesPage /> <UtilitiesPage />
@@ -858,7 +905,7 @@
@apply grid grid-cols-1 justify-items-center; @apply grid grid-cols-1 justify-items-center;
} }
.grd-2col1 { .grd-2col1 {
@apply grid gap-4 grid-cols-1 sm:grid-cols-1 lg:grid-cols-2 xl:grid-cols-2 2xl:grid-cols-2 justify-items-center; @apply grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-2 2xl:grid-cols-2 justify-items-center;
} }
.grd-2col2 { .grd-2col2 {
@apply grid gap-4 grid-cols-2 justify-items-center; @apply grid gap-4 grid-cols-2 justify-items-center;
@@ -924,14 +971,14 @@
} }
/*====================================================buttons=====================================================*/ /*====================================================buttons=====================================================*/
.btn-lg { .btn-lg {
@apply flex justify-center break-words content-center bg-blue-100 hover:bg-blue-200 text-gray-500 font-bold text-xxs sm:text-base md:text-base lg:text-base xl:text-base 2xl:text-base h-4 sm:h-8 md:h-8 lg:h-8 xl:h-8 2xl:h-8 w-full mt-0 border border-gray-300 rounded; @apply flex justify-center break-words content-center bg-blue-100 hover:bg-blue-200 text-gray-500 font-bold text-sm sm:text-base md:text-base lg:text-base xl:text-base 2xl:text-base h-6 sm:h-8 md:h-8 lg:h-8 xl:h-8 2xl:h-8 w-full mt-0 border border-gray-300 rounded;
} }
.btn-tbl { .btn-tbl {
@apply flex justify-center content-center text-gray-500 font-bold w-6 h-auto border border-gray-300; @apply flex justify-center content-center text-gray-500 font-bold w-6 h-auto border border-gray-300;
} }
/*====================================================select=====================================================*/ /*====================================================select=====================================================*/
.slct-lg { .slct-lg {
@apply flex w-full justify-center break-words content-center bg-blue-100 hover:bg-blue-200 text-gray-500 font-bold text-xxs sm:text-base md:text-base lg:text-base xl:text-base 2xl:text-base h-4 sm:h-8 md:h-8 lg:h-8 xl:h-8 2xl:h-8 mb-0 border border-gray-300 rounded; @apply flex w-full justify-center break-words content-center bg-blue-100 hover:bg-blue-200 text-gray-500 font-bold text-sm sm:text-base md:text-base lg:text-base xl:text-base 2xl:text-base h-6 sm:h-8 md:h-8 lg:h-8 xl:h-8 2xl:h-8 mb-0 border border-gray-300 rounded;
} }
} }

9
src/components/Modal.svelte
View File

@@ -1,7 +1,8 @@
<script> <script>
export let show; export let show = true;
export let header = "header"; export let header = "header";
export let text = "text"; export let text = "text";
let onlyCloseButton = true;
</script> </script>
<div class="modal"> <div class="modal">
@@ -24,8 +25,10 @@
</div> </div>
</div> </div>
<div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"> <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
<button type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"> Deactivate </button> {#if !onlyCloseButton}
<button on:click={() => (show = false)} type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"> Cancel </button> <button type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"> Deactivate </button>
{/if}
<button on:click={() => (show = false)} type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">Закрыть</button>
</div> </div>
</div> </div>
</div> </div>

12
src/components/Progress.svelte
View File

@@ -1,5 +1,11 @@
<div class="flex h-screen justify-center items-center"> <script>
<div class="m-auto"> </script>
<div style="border-top-color:transparent" class="w-20 h-20 border-4 border-blue-400 border-solid rounded-full animate-spin" />
<div class="z-50">
<div class="fixed inset-0 bg-gray-200 bg-opacity-75 transition-opacity" aria-hidden="true" />
<div class="flex h-screen justify-center items-center">
<div class="m-auto">
<div style="border-top-color:transparent" class="w-20 h-20 border-4 border-blue-400 border-solid rounded-full animate-spin" />
</div>
</div> </div>
</div> </div>

11
src/pages/Connection.svelte
View File

@@ -3,9 +3,11 @@
import Alarm from "../components/Alarm.svelte"; import Alarm from "../components/Alarm.svelte";
export let settingsJson; export let settingsJson;
export let errorsJson;
export let ssidJson; export let ssidJson;
export let ssidDropdownClick = () => {}; export let ssidDropdownClick = () => {};
export let saveSettings = () => {}; export let saveSettings = () => {};
export let rebootEsp = () => {};
</script> </script>
<div class="grd-2col1"> <div class="grd-2col1">
@@ -56,12 +58,12 @@
<input bind:value={settingsJson.routerpass} class="ipt-rnd text-left focus:border-indigo-500" type="text" /> <input bind:value={settingsJson.routerpass} class="ipt-rnd text-left focus:border-indigo-500" type="text" />
</div> </div>
</div> </div>
{#if settingsJson.pass_status === 1} {#if errorsJson.passer === 1}
<div class="grd-1col1"> <div class="grd-1col1">
<Alarm title="Введен неправильный пароль" /> <Alarm title="Введен неправильный пароль" />
</div> </div>
{/if} {/if}
<button class="btn-lg" on:click={() => saveSettings()}>{"Сохранить и перезагрузить"}</button> <button class="btn-lg" on:click={() => saveSettings()}>{"Сохранить"}</button>
</Card> </Card>
<Card title="Подключение к MQTT брокеру"> <Card title="Подключение к MQTT брокеру">
<div class="crd-itm-psn"> <div class="crd-itm-psn">
@@ -107,3 +109,8 @@
<button class="btn-lg" on:click={() => saveSettings()}>{"Сохранить и проверить подключение"}</button> <button class="btn-lg" on:click={() => saveSettings()}>{"Сохранить и проверить подключение"}</button>
</Card> </Card>
</div> </div>
<div class="grd-1col1">
<Card title="Дополнительные опции">
<button class="btn-lg" on:click={() => rebootEsp()}>{"Перезагрузить устройство"}</button>
</Card>
</div>