Newer
Older
smart-home-server / webclient / src / js / components / screens / scripts / scripts-action-popup.js
export function actionDetailsPopup(script, sh_api) {
	console.log("actionDetailsPopup", script);

	return Modals.create("action-script-popup", {
		title: `${script.name}`,
		body: modal => {
			const state = (script.state == "enabled") 
				? "<span class='badge badge-success'>Enabled</span>"
				: "<span class='badge badge-warning'>Disabled</span>"
			return `
				<div class="block">
					<div class="row g-4">
						<div class="col script-info w-100">
							<h4 class="alias"><i class="ph ph-link-simple-break normalize"></i> <code>${script.alias}</code></h4>
							<div class="description mt-3">${script.description}</div>
							<div class="state mt-10">${state}</div>
							<div class="filename mt-4"><i class="ph ph-file-code normalize"></i> ${script.filename}</div>
							<div class="author mt-4 text-muted"><i class="ph ph-user normalize"></i> By ${script.author}</div>
						</div>
						<div class="col script-code w-200">
							<div class="script-code-view">
								<pre><code class="language-php code-viewer fs-xs">${script.code}</code></pre>
							</div>
						</div>
					</div>
				</div>
			`;
		},
		actions: modal => {
			const btnCancel = Helper.template.createElement("button", {
				class: "btn btn-primary"
			}, "Close");

			const btnChangeState = Helper.template.createElement("button", {
				class: script.state == "enabled" ? "btn btn-warning" : "btn btn-success",
				"data-value": script.state == "enabled" ? "disable" : "enable"
			}, script.state == "enabled" ? `Disable` : "Enable");


			const btnRun = Helper.template.createElement("button", {
				class: "btn btn-secondary with-icon"
			}, `<i class="ph ph-play"></i> Run`);

			btnCancel.addEventListener("click", e => {
				modal.close();
			});

			btnChangeState.addEventListener("click", e => {
				const btn = e.currentTarget;
				if(btn.getAttribute("disabled")) {
					return ;
				}

				const methName = btn.dataset.value == "enable"
					? "action_enable"
					: "action_disable"

				// const script = scr.currentScreen.DOMObject.provideSciptsData[btn.dataset.alias] ?? {};

				Helper.states.btnLoadingState(btn, true);
				sh_api.scripts[methName](script.alias, (err, data, meta) => {
					Helper.states.btnLoadingState(btn, false);
					modal.close();

					if(data) {
						setTimeout(() => Screens.reinit(), 250);
						Toasts.createSuccess(
							`Request Success`,
							`State of <b>${script.alias}</b> was changed`
						).show();
					} else {
						Toasts.createError(
							"Request failed",
							`Regular script state not changed`
						).show();
					}

				});
			});

			return [ btnCancel, btnChangeState, btnRun ];
		},
		onready: modal => {
			hljs.highlightElement(modal.querySelector(".code-viewer"));
		}
	});
}