Newer
Older
smart-home-server / webclient / src / js / components / screens / devices / devices-scanning-screen.js
import { sidebarTemplate } from "./devices-funcs.js";
import { deviceSetupFormPopup } from "./device-setup-form-popup.js";

function scanning(sh_api) {
	return {
		alias: "devices-scanning",
		renderer: () => {	
			const sidebar = sidebarTemplate("scanning");

			return `
				<div class="container">
					<div class="row g-6">
						<div class="col sidebar-container">
							${sidebar}
						</div>
						<div class="col devices-container"></div>
					</div>
				</div>
			`;
		},
		initer: scr => {
			sh_api.devices.scanning_all((err, resp, meta) => {
				console.log("sh_api.devices.scanning_all", err, resp);

				if(meta.status_code != 200) {
					return scr.error("Server API ERROR", "");
				}

				const preparedData = [];
				for(let device of resp.data.devices) {
					device = Helper.unification.deviceFieldsUnification(device);

					preparedData.push({
						deviceId: device.device_id,
						deviceName: device.name,
						deviceType: device.type,
						status: `<span class="badge badge-primary">${device.status}</span>`,
						ip: `<code class="code">${device.ip}</code>`,
						mac: `<code class="code">${device.mac}</code>`,
						wifiSignal: device.wifi_signal,
						actions: device.status == "setup" ? `
							<button 
								class="btn btn-secondary btn-small setup-btn" 
								data-device='${JSON.stringify(device)}'
								type="button"
							>Setup</button>
						` : ""
					});
				}

				scr.currentScreen.DOMObject.querySelector(".devices-container").innerHTML = Helper.template.table(
					"Found devices", 
					{
						deviceId: "Device ID",
						deviceName: "Device name", 
						deviceType: "Type", 
						status: "Status", 
						ip: "IP", 
						mac: "Mac",
						wifiSignal: "Signal", 
						actions: "Actions"
					},
					preparedData,
					`<span class="table-meta">Total: <span class="total">${resp.data.devices.length}</span> devices</span>`
				);

				scr.currentScreen.DOMObject.querySelectorAll(".setup-btn").forEach(btn => {
					btn.addEventListener("click", e => {
						const device = JSON.parse(e.currentTarget.dataset.device);
						deviceSetupFormPopup(device, sh_api).show();
					});
				});

				scr.ready();
			});
		}
	};
}

export {
	scanning
}