iotmanager/IoTManagerWeb
1
0
Fork 0
mirror of https://github.com/IoTManagerProject/IoTManagerWeb.git synced 2026-03-30 11:59:21 +03:00
Code Issues Packages Projects Releases Wiki Activity

453

Browse Source
This commit is contained in:
IoT Manager
2023-10-10 16:14:19 +02:00
parent 9181cf6201
commit 7f7ef1a696
3 changed files with 228 additions and 188 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
src/App.svelte
View File

@@ -52,7 +52,7 @@
let preventMove = false; let preventMove = false;
let screenSize; let screenSize;
const blobDebug = false; const blobDebug = false;
const devMode = true; const devMode = false;
let percent; let percent;
@@ -115,6 +115,10 @@
let paramsJson = {}; let paramsJson = {};
let userdata = null; let userdata = null;
let allmodeinfo = null;
let profile = null;
let serverOnline = false;
let parsed = { let parsed = {
itemsJson: false, itemsJson: false,
@@ -207,11 +211,14 @@
}); });
if (res.ok) { if (res.ok) {
userdata = await res.json(); userdata = await res.json();
serverOnline = true;
} else { } else {
console.log("error", res.statusText); console.log("error", res.statusText);
serverOnline = true;
} }
} catch (e) { } catch (e) {
console.log("error", e); console.log("error", e);
serverOnline = false;
} }
}; };
@@ -608,9 +615,67 @@
clearParcedFlags(); clearParcedFlags();
if (debug) console.log("✔✔", "profile page parced"); if (debug) console.log("✔✔", "profile page parced");
pageReady.profile = true; pageReady.profile = true;
await getModInfo();
await getProfile();
} }
} }
const getModInfo = async () => {
try {
let res = await fetch("https://portal.iotmanager.org/compiler/allmodinfo", {
mode: "cors",
method: "GET",
});
if (res.ok) {
allmodeinfo = await res.json();
allmodeinfo = allmodeinfo.message;
} else {
console.log("error", res.statusText);
}
} catch (e) {
console.log("error", e);
}
};
const getProfile = async () => {
try {
const JWT = Cookies.get("token_iotm2");
let res = await fetch("https://portal.iotmanager.org/compiler/profile", {
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${JWT}`,
},
mode: "cors",
method: "GET",
});
if (res.ok) {
profile = await res.json();
profile = profile.message;
await markProfileAsPerThisDevProfile();
} else {
console.log("error", res.statusText);
}
} catch (e) {
console.log("error", e);
}
};
const markProfileAsPerThisDevProfile = async () => {
for (const [compilerCategory, compilerCategoryModules] of Object.entries(profile.modules)) {
let devCategoryModules = myProfileJson.modules[compilerCategory];
compilerCategoryModules.forEach((compilerModule) => {
compilerModule.active = false;
if (devCategoryModules) {
devCategoryModules.forEach((devModule) => {
if (devModule.path === compilerModule.path) {
compilerModule.active = devModule.active;
}
});
}
});
}
};
async function initDevList() { async function initDevList() {
if (firstDevListRequest) { if (firstDevListRequest) {
//при первом запросе листа устройств запишем его целеком //при первом запросе листа устройств запишем его целеком
@@ -1307,10 +1372,10 @@
</Route> </Route>
<Route path="/profile"> <Route path="/profile">
<Profile show={pageReady.profile} myProfileJson={myProfileJson} userdata={userdata} updateBuild={(path) => updateBuild(path)} /> <Profile show={pageReady.profile} myProfileJson={myProfileJson} userdata={userdata} updateBuild={(path) => updateBuild(path)} allmodeinfo={allmodeinfo} profile={profile} serverOnline={serverOnline} />
</Route> </Route>
<Route path="/login"> <Route path="/login">
<Login show={true} /> <Login show={true} serverOnline={serverOnline} />
</Route> </Route>
{/if} {/if}
</div> </div>

51
src/pages/Login.svelte
View File

@@ -5,6 +5,7 @@
import { router } from "tinro"; import { router } from "tinro";
import Cookies from "js-cookie"; import Cookies from "js-cookie";
export let show = true; export let show = true;
export let serverOnline;
let user = {}; let user = {};
let errors = []; let errors = [];
@@ -42,28 +43,36 @@
</script> </script>
{#if show} {#if show}
<div class="flex h-screen m-2 md:m-4 lg:m-8 items-start justify-center"> {#if serverOnline}
<div class="w-full max-w-lg"> <div class="flex h-screen m-2 md:m-4 lg:m-8 items-start justify-center">
<form class="bg-white shadow-2xl rounded-xl px-8 pt-6 pb-8 mb-4"> <div class="w-full max-w-lg">
<div class="mb-4"> <form class="bg-white shadow-2xl rounded-xl px-8 pt-6 pb-8 mb-4">
<label class="block text-gray-700 text-sm font-bold mb-2" for="username"> <div class="mb-4">
{$t("login.email")} <label class="block text-gray-700 text-sm font-bold mb-2" for="username">
</label> {$t("login.email")}
<input bind:value={user.username} class="shadow appearance-none border rounded w-full h-10 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="username" type="text" placeholder={"someone@example.com"} /> </label>
</div> <input bind:value={user.username} class="shadow appearance-none border rounded w-full h-10 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="username" type="text" placeholder={"someone@example.com"} />
<div class="mb-6"> </div>
<label class="block text-gray-700 text-sm font-bold mb-2" for="password"> <div class="mb-6">
{$t("login.pass")} <label class="block text-gray-700 text-sm font-bold mb-2" for="password">
</label> {$t("login.pass")}
<input bind:value={user.password} class="shadow appearance-none border rounded w-full h-10 px-3 text-gray-700 mb-0 leading-tight focus:outline-none focus:shadow-outline" id="password" type="password" placeholder="**********" /> </label>
</div> <input bind:value={user.password} class="shadow appearance-none border rounded w-full h-10 px-3 text-gray-700 mb-0 leading-tight focus:outline-none focus:shadow-outline" id="password" type="password" placeholder="**********" />
{#each errors as e, i} </div>
<p class="text-red-500 p-0 m-0 font-bold text-xs italic">{$t(e.msg)}</p> {#each errors as e, i}
{/each} <p class="text-red-500 p-0 m-0 font-bold text-xs italic">{$t(e.msg)}</p>
<button class="btn-lg mt-6" on:click={() => login(user)}>{$t("login.login")}</button> {/each}
</form> <button class="btn-lg mt-6" on:click={() => login(user)}>{$t("login.login")}</button>
</form>
</div>
</div> </div>
</div> {:else}
<div class="my-4">
<div class="grd-1col1">
<Card title="Сервер недоступен" />
</div>
</div>
{/if}
{:else} {:else}
<Alarm title="Загрузка..." /> <Alarm title="Загрузка..." />
{/if} {/if}

294
src/pages/Profile.svelte
View File

@@ -7,18 +7,19 @@
import Cookies from "js-cookie"; import Cookies from "js-cookie";
export let show; export let show;
export let myProfileJson; export let myProfileJson;
export let allmodeinfo;
export let profile;
export let serverOnline;
export let userdata; export let userdata;
export let updateBuild = (path) => {}; export let updateBuild = (path) => {};
import CrossIcon from "../svg/Cross.svelte"; import CrossIcon from "../svg/Cross.svelte";
let errors = []; let errors = [];
let allmodeinfo = null;
let userBuilds = null; let userBuilds = null;
let profile = null;
var updateInterval; var updateInterval;
onMount(async () => { onMount(async () => {
await getProfile();
await getModInfo();
await getUserBuilds(); await getUserBuilds();
}); });
@@ -30,14 +31,16 @@
}; };
function checkStatus(userBuilds) { function checkStatus(userBuilds) {
if (userBuilds[0].processed) { if (userBuilds.length) {
clearInterval(updateInterval); if (userBuilds[0].processed) {
console.log("no interval - all task done"); clearInterval(updateInterval);
} else { console.log("no interval - all task done");
console.log("non completed task exist!"); } else {
if (!updateInterval) { console.log("non completed task exist!");
console.log("interval checking started"); if (!updateInterval) {
updateInterval = setInterval(periodicTask, 10000); console.log("interval checking started");
updateInterval = setInterval(periodicTask, 10000);
}
} }
} }
} }
@@ -46,23 +49,6 @@
await getUserBuilds(); await getUserBuilds();
}; };
const getModInfo = async () => {
try {
let res = await fetch("https://portal.iotmanager.org/compiler/allmodinfo", {
mode: "cors",
method: "GET",
});
if (res.ok) {
allmodeinfo = await res.json();
allmodeinfo = allmodeinfo.message;
} else {
console.log("error", res.statusText);
}
} catch (e) {
console.log("error", e);
}
};
const getUserBuilds = async () => { const getUserBuilds = async () => {
try { try {
const JWT = Cookies.get("token_iotm2"); const JWT = Cookies.get("token_iotm2");
@@ -85,28 +71,6 @@
} }
}; };
const getProfile = async () => {
try {
const JWT = Cookies.get("token_iotm2");
let res = await fetch("https://portal.iotmanager.org/compiler/profile", {
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${JWT}`,
},
mode: "cors",
method: "GET",
});
if (res.ok) {
profile = await res.json();
profile = profile.message;
} else {
console.log("error", res.statusText);
}
} catch (e) {
console.log("error", e);
}
};
const delBuild = async (ord) => { const delBuild = async (ord) => {
try { try {
const JWT = Cookies.get("token_iotm2"); const JWT = Cookies.get("token_iotm2");
@@ -129,9 +93,9 @@
}; };
const placeOrder = async () => { const placeOrder = async () => {
delete myProfileJson["_id"]; delete profile["_id"];
//добавим в тело имя пользователя //добавим в тело имя пользователя
myProfileJson.username = userdata.username; profile.username = userdata.username;
const JWT = Cookies.get("token_iotm2"); const JWT = Cookies.get("token_iotm2");
try { try {
let res = await fetch("https://portal.iotmanager.org/compiler/order", { let res = await fetch("https://portal.iotmanager.org/compiler/order", {
@@ -141,7 +105,7 @@
"Content-Type": "application/json", "Content-Type": "application/json",
Authorization: `Bearer ${JWT}`, Authorization: `Bearer ${JWT}`,
}, },
body: JSON.stringify(myProfileJson), body: JSON.stringify(profile),
}); });
const content = await res.json(); const content = await res.json();
if (res.ok) { if (res.ok) {
@@ -166,129 +130,131 @@
</script> </script>
{#if show} {#if show}
{#if allmodeinfo && myProfileJson && profile} {#if serverOnline}
<div class="my-4"> {#if allmodeinfo && myProfileJson && profile}
<div class="grd-1col1"> <div class="my-4">
<Card title=""> <div class="grd-1col1">
<div class="grid grid-cols-2"> <Card title="">
<p class="text-center text-gray-500 font-bold">{myProfileJson.projectProp.platformio.default_envs}</p> <div class="grid grid-cols-2">
<p class="text-center text-gray-500 font-bold">{userdata.username}</p> <p class="text-center text-gray-500 font-bold">{myProfileJson.projectProp.platformio.default_envs}</p>
</div> <p class="text-center text-gray-500 font-bold">{userdata.username}</p>
<div class="grid my-4 grid-cols-2 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-8 xl:grid-cols-12 2xl:grid-cols-12 gap-4"> </div>
<!--{#each Object.entries(allmodeinfo) as [key, param]} <div class="grid my-4 grid-cols-2 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-8 xl:grid-cols-12 2xl:grid-cols-12 gap-4">
<!--{#each Object.entries(allmodeinfo) as [key, param]}
<div> <div>
<p class="cursor-pointer select-none text-black text-xs font-medium mr-2 px-0.5 py-0.5 rounded text-center">{key.substring(key.lastIndexOf("/") + 1, key.length)}</p> <p class="cursor-pointer select-none text-black text-xs font-medium mr-2 px-0.5 py-0.5 rounded text-center">{key.substring(key.lastIndexOf("/") + 1, key.length)}</p>
</div> </div>
{/each}--> {/each}-->
{#each profile.modules.virtual_elments as m, i} {#each profile.modules.virtual_elments as m, i}
{#if allmodeinfo[m.path]?.usedLibs[profile.projectProp.platformio.default_envs]} {#if allmodeinfo[m.path]?.usedLibs[profile.projectProp.platformio.default_envs]}
<div> <div>
<!-- svelte-ignore a11y-click-events-have-key-events --> <!-- svelte-ignore a11y-click-events-have-key-events -->
<p on:click={() => (m.active = !m.active)} class="{m.active ? 'bg-green-100' : ''} cursor-pointer select-none text-black text-xs font-medium mr-2 px-0.5 py-0.5 rounded text-center">{m.path.substring(m.path.lastIndexOf("/") + 1, m.path.length)}</p> <p on:click={() => (m.active = !m.active)} class="{m.active ? 'bg-green-100' : ''} cursor-pointer select-none text-black text-xs font-medium mr-2 px-0.5 py-0.5 rounded text-center">{m.path.substring(m.path.lastIndexOf("/") + 1, m.path.length)}</p>
</div> </div>
{/if} {/if}
{/each}
{#each profile.modules.sensors as m, i}
{#if allmodeinfo[m.path]?.usedLibs[profile.projectProp.platformio.default_envs]}
<div>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<p on:click={() => (m.active = !m.active)} class="{m.active ? 'bg-green-100' : ''} cursor-pointer select-none text-black text-xs font-medium mr-2 px-0.5 py-0.5 rounded text-center">{m.path.substring(m.path.lastIndexOf("/") + 1, m.path.length)}</p>
</div>
{/if}
{/each}
{#each profile.modules.executive_devices as m, i}
{#if allmodeinfo[m.path]?.usedLibs[profile.projectProp.platformio.default_envs]}
<div>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<p on:click={() => (m.active = !m.active)} class="{m.active ? 'bg-green-100' : ''} cursor-pointer select-none text-black text-xs font-medium mr-2 px-0.5 py-0.5 rounded text-center">{m.path.substring(m.path.lastIndexOf("/") + 1, m.path.length)}</p>
</div>
{/if}
{/each}
{#each profile.modules.screens as m, i}
{#if allmodeinfo[m.path]?.usedLibs[profile.projectProp.platformio.default_envs]}
<div>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<p on:click={() => (m.active = !m.active)} class="{m.active ? 'bg-green-100' : ''} cursor-pointer select-none text-black text-xs font-medium mr-2 px-0.5 py-0.5 rounded text-center">{m.path.substring(m.path.lastIndexOf("/") + 1, m.path.length)}</p>
</div>
{/if}
{/each}
</div>
{#each errors as e, i}
<p class="text-red-500 p-0 m-0 font-bold text-xs italic">{$t(e.msg)}</p>
{/each} {/each}
{#each profile.modules.sensors as m, i} <button class="btn-lg mt-4" on:click={() => placeOrder()}>{$t("profile.update")}</button>
{#if allmodeinfo[m.path]?.usedLibs[profile.projectProp.platformio.default_envs]} {#if userBuilds}
<div> <table class="tbl mt-6 mb-0">
<!-- svelte-ignore a11y-click-events-have-key-events --> <thead class="bg-gray-100">
<p on:click={() => (m.active = !m.active)} class="{m.active ? 'bg-green-100' : ''} cursor-pointer select-none text-black text-xs font-medium mr-2 px-0.5 py-0.5 rounded text-center">{m.path.substring(m.path.lastIndexOf("/") + 1, m.path.length)}</p> <tr class="txt-sz txt-pad">
</div> <th class="tbl-hd">Название</th>
{/if} <th class="tbl-hd">Версия</th>
{/each} <th class="tbl-hd">Время</th>
{#each profile.modules.executive_devices as m, i}
{#if allmodeinfo[m.path]?.usedLibs[profile.projectProp.platformio.default_envs]}
<div>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<p on:click={() => (m.active = !m.active)} class="{m.active ? 'bg-green-100' : ''} cursor-pointer select-none text-black text-xs font-medium mr-2 px-0.5 py-0.5 rounded text-center">{m.path.substring(m.path.lastIndexOf("/") + 1, m.path.length)}</p>
</div>
{/if}
{/each}
{#each profile.modules.screens as m, i}
{#if allmodeinfo[m.path]?.usedLibs[profile.projectProp.platformio.default_envs]}
<div>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<p on:click={() => (m.active = !m.active)} class="{m.active ? 'bg-green-100' : ''} cursor-pointer select-none text-black text-xs font-medium mr-2 px-0.5 py-0.5 rounded text-center">{m.path.substring(m.path.lastIndexOf("/") + 1, m.path.length)}</p>
</div>
{/if}
{/each}
</div>
{#each errors as e, i}
<p class="text-red-500 p-0 m-0 font-bold text-xs italic">{$t(e.msg)}</p>
{/each}
<button class="btn-lg mt-4" on:click={() => placeOrder()}>{$t("profile.update")}</button>
{#if userBuilds}
<table class="tbl mt-6 mb-0">
<thead class="bg-gray-100">
<tr class="txt-sz txt-pad">
<th class="tbl-hd">Название</th>
<th class="tbl-hd">Версия</th>
<th class="tbl-hd">Время</th>
<th class="tbl-hd">Подготовка</th> <th class="tbl-hd">Подготовка</th>
<th class="tbl-hd">Сборка build</th> <th class="tbl-hd">Сборка build</th>
<th class="tbl-hd">Сборка fs</th> <th class="tbl-hd">Сборка fs</th>
<th class="tbl-hd" /> <th class="tbl-hd" />
<th class="tbl-hd w-7" /> <th class="tbl-hd w-7" />
</tr> </tr>
</thead> </thead>
<tbody class="bg-white"> <tbody class="bg-white">
{#each userBuilds as build, i} {#each userBuilds as build, i}
{#if build.projectProp.platformio.default_envs === myProfileJson.projectProp.platformio.default_envs} {#if build.projectProp.platformio.default_envs === myProfileJson.projectProp.platformio.default_envs}
<tr class="txt-sz txt-pad"> <tr class="txt-sz txt-pad">
<td class="tbl-bdy-lg ipt-lg w-full">{build.projectProp.platformio.default_envs}</td> <td class="tbl-bdy-lg ipt-lg w-full">{build.projectProp.platformio.default_envs}</td>
<td class="tbl-bdy-lg ipt-lg w-full">{build.ver}</td> <td class="tbl-bdy-lg ipt-lg w-full">{build.ver}</td>
<td class="tbl-bdy-lg ipt-lg w-full">{new Date(build.dateAdded).toLocaleString("ru", { timeZone: "Europe/Vienna" })}</td> <td class="tbl-bdy-lg ipt-lg w-full">{new Date(build.dateAdded).toLocaleString("ru", { timeZone: "Europe/Vienna" })}</td>
{#if build.status.preparation === 0 && build.status.build === 0 && build.status.fs === 0} {#if build.status.preparation === 0 && build.status.build === 0 && build.status.fs === 0}
<td class="tbl-bdy-lg ipt-lg w-full">
<p class="text-green-500 font-bold truncate">{"Ожидание очереди..."}</p>
</td>
<td class="tbl-bdy-lg ipt-lg w-full" />
<td class="tbl-bdy-lg ipt-lg w-full" />
<td class="tbl-bdy-lg ipt-lg w-full" />
{:else}
<td class="tbl-bdy-lg ipt-lg w-full">
<div onClick={() => showLog(build, "py.txt")}>
{st[build.status.preparation]}
</div>
</td>
<td class="tbl-bdy-lg ipt-lg w-full">
<div onClick={() => showLog(build, "build.txt")}>
{st[build.status.build]}
</div>
</td>
<td class="tbl-bdy-lg ipt-lg w-full">
<div onClick={() => showLog(build, "fs.txt")}>{st[build.status.fs]}</div>
</td>
{#if build.status.build === 2 && build.status.preparation === 2 && build.status.fs === 2}
<!-- svelte-ignore a11y-click-events-have-key-events -->
<td on:click={() => updateBuild("http://portal.iotmanager.org/compiler/userdata/builds/" + build.orderId)} class="tbl-bdy-lg ipt-lg w-full cursor-pointer select-none bg-green-100 hover:bg-green-200">
<p class="w-fill">Установить</p>
</td>
{:else}
<td class="tbl-bdy-lg ipt-lg w-full" />
{/if}
{#if build.processed}
<td class="tbl-bdy-lg ipt-lg w-full"> <td class="tbl-bdy-lg ipt-lg w-full">
<CrossIcon click={() => delBuild(build)} /> <p class="text-green-500 font-bold truncate">{"Ожидание очереди..."}</p>
</td> </td>
{:else}
<td class="tbl-bdy-lg ipt-lg w-full" /> <td class="tbl-bdy-lg ipt-lg w-full" />
<td class="tbl-bdy-lg ipt-lg w-full" />
<td class="tbl-bdy-lg ipt-lg w-full" />
{:else}
<td class="tbl-bdy-lg ipt-lg w-full">
<div onClick={() => showLog(build, "py.txt")}>
{st[build.status.preparation]}
</div>
</td>
<td class="tbl-bdy-lg ipt-lg w-full">
<div onClick={() => showLog(build, "build.txt")}>
{st[build.status.build]}
</div>
</td>
<td class="tbl-bdy-lg ipt-lg w-full">
<div onClick={() => showLog(build, "fs.txt")}>{st[build.status.fs]}</div>
</td>
{#if build.status.build === 2 && build.status.preparation === 2 && build.status.fs === 2}
<!-- svelte-ignore a11y-click-events-have-key-events -->
<td on:click={() => updateBuild("http://portal.iotmanager.org/compiler/userdata/builds/" + build.orderId)} class="tbl-bdy-lg ipt-lg w-full cursor-pointer select-none bg-green-100 hover:bg-green-200">
<p class="w-fill">Установить</p>
</td>
{:else}
<td class="tbl-bdy-lg ipt-lg w-full" />
{/if}
{#if build.processed}
<td class="tbl-bdy-lg ipt-lg w-full">
<CrossIcon click={() => delBuild(build)} />
</td>
{:else}
<td class="tbl-bdy-lg ipt-lg w-full" />
{/if}
{/if} {/if}
{/if} </tr>
</tr> {/if}
{/if} {/each}
{/each} </tbody>
</tbody> </table>
</table> {/if}
{/if} <button class="btn-lg mt-6" on:click={() => exit()}>{$t("profile.exit")}</button>
<button class="btn-lg mt-6" on:click={() => exit()}>{$t("profile.exit")}</button> </Card>
</Card> </div>
</div> </div>
</div> {/if}
{:else} {:else}
<div class="my-4"> <div class="my-4">
<div class="grd-1col1"> <div class="grd-1col1">