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();
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 DashboardPage from "./pages/Dashboard.svelte";
@@ -24,13 +24,14 @@
let debug = true;
let LOG_MAX_MESSAGES = 10;
let reconnectTimeout = 30000;
let rebootingTimeout = 20000;
let opened = false;
let preventMove = false;
//****************************************************variable section**********************************************************/
//******************************************************************************************************************************/
//let myip = document.location.hostname;
let myip = "192.168.88.235";
let myip = document.location.hostname;
//let myip = "192.168.88.235";
//Flags
let showInput = false;
@@ -62,6 +63,9 @@
let settingsJsonFlag = false;
let settingsJsonParced = false;
let errorsJson = {};
let errorsJsonParced = false;
let ssidJson = {};
let ssidJsonParced = false;
@@ -130,9 +134,11 @@
sendCurrentPageName();
}
//отправляем запрос данных для данной страницы и запрос данных для всех страниц - /all
function sendCurrentPageName() {
if (selectedWs !== undefined) {
wsSendMsg(selectedWs, currentPageName);
wsSendMsg(selectedWs, "/all");
}
}
@@ -232,7 +238,7 @@
let statusJson = JSON.parse(data);
udatelayoutJson(statusJson);
wigetsUpdate();
if (debug) console.log("[i]", "statusJson parced: ", statusJson);
if (debug) console.log("✔", "statusJson parced");
}
}
//сборщик paramsJson сообщений======================================
@@ -241,7 +247,7 @@
let paramsJson = JSON.parse(data);
//udatelayoutJson(statusJson);
//wigetsUpdate();
if (debug) console.log("[i]", "paramsJson parced: ", paramsJson);
if (debug) console.log("✔", "paramsJson parced");
}
}
//сборщик ssidJson сообщений======================================
@@ -251,7 +257,7 @@
delete ssidJson.ssid;
ssidJson = ssidJson;
ssidJsonParced = true;
if (debug) console.log("[i]", "ssidJson parced");
if (debug) console.log("✔", "ssidJson parced");
}
}
//сборщик deviceList сообщений======================================
@@ -265,7 +271,18 @@
deviceList = deviceList;
whenDeviceListWasUpdated();
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 пакетов========================================
@@ -285,7 +302,7 @@
configJson = JSON.parse(configJsonResult);
configJson = configJson;
configJsonParced = true;
if (debug) console.log("[ii]", "configJson parced!");
if (debug) console.log("✔", "configJson parced");
}
};
}
@@ -306,7 +323,7 @@
widgetsJson = JSON.parse(widgetsJsonResult);
widgetsJson = widgetsJson;
widgetsJsonParced = true;
if (debug) console.log("[ii]", "widgetsJson parced!");
if (debug) console.log("✔", "widgetsJson parced");
}
};
}
@@ -327,7 +344,7 @@
itemsJson = JSON.parse(itemsJsonResult);
itemsJson = itemsJson;
itemsJsonParced = true;
if (debug) console.log("[ii]", "itemsJson parced!");
if (debug) console.log("✔", "itemsJson parced");
}
};
}
@@ -349,7 +366,7 @@
layoutJson = layoutJson;
wigetsUpdate();
layoutJsonParced = true;
if (debug) console.log("[ii]", "layoutJson parced!");
if (debug) console.log("✔", "layoutJson parced");
}
};
}
@@ -372,7 +389,7 @@
wigetsUpdate();
settingsJsonParced = true;
updateThisDeviceInList();
if (debug) console.log("[ii]", "settingsJson parced!");
if (debug) console.log("✔", "settingsJson parced");
}
};
}
@@ -406,6 +423,7 @@
}
function saveSettings() {
console.log("[i]", settingsJson);
wsSendMsg(selectedWs, "/cennoc" + JSON.stringify(settingsJson));
clearData();
sendCurrentPageName();
@@ -464,6 +482,8 @@
settingsJson = {};
settingsJsonBlob.clear();
errorsJson = {};
configJsonParced = false;
widgetsJsonParced = false;
itemsJsonParced = false;
@@ -749,6 +769,29 @@
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********************************************************************/
onMount(async () => {
console.log("[i]", "mounted");
@@ -760,11 +803,15 @@
</script>
<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">
<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()}>
{#each deviceList as device}
<option value={device.ws}>
@@ -823,7 +870,7 @@
<ConfigPage configJson={configJson} widgetsJson={widgetsJson} itemsJson={itemsJson} saveConfig={() => saveConfig()} />
</Route>
<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 path="/utilities">
<UtilitiesPage />
@@ -858,7 +905,7 @@
@apply grid grid-cols-1 justify-items-center;
}
.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 {
@apply grid gap-4 grid-cols-2 justify-items-center;
@@ -924,14 +971,14 @@
}
/*====================================================buttons=====================================================*/
.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 {
@apply flex justify-center content-center text-gray-500 font-bold w-6 h-auto border border-gray-300;
}
/*====================================================select=====================================================*/
.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;
}
}

7
src/components/Modal.svelte
View File

@@ -1,7 +1,8 @@
<script>
export let show;
export let show = true;
export let header = "header";
export let text = "text";
let onlyCloseButton = true;
</script>
<div class="modal">
@@ -24,8 +25,10 @@
</div>
</div>
<div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
{#if !onlyCloseButton}
<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>
<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>
{/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>

8
src/components/Progress.svelte
View File

@@ -1,5 +1,11 @@
<div class="flex h-screen justify-center items-center">
<script>
</script>
<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>

11
src/pages/Connection.svelte
View File

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