From 01fee4992bdc1a464a68ef10f7faf68bbba05a38 Mon Sep 17 00:00:00 2001
From: Devaev Maxim <mdevaev@gmail.com>
Date: Sat, 11 Jul 2020 01:58:07 +0300
Subject: [PATCH] refactoring

---
 web/kvm/index.html      | 14 +++++++-------
 web/share/css/main.css  |  4 ++++
 web/share/js/kvm/atx.js |  2 +-
 web/share/js/kvm/msd.js | 24 ++++++++++++------------
 web/share/js/kvm/wol.js |  2 +-
 web/share/js/tools.js   |  8 ++++++++
 6 files changed, 33 insertions(+), 21 deletions(-)

diff --git a/web/kvm/index.html b/web/kvm/index.html
index c244756b..77db8726 100644
--- a/web/kvm/index.html
+++ b/web/kvm/index.html
@@ -155,7 +155,7 @@
 				Mass Storage &#8628;
 			</a>
 			<div data-dont-hide-menu id="msd-menu" class="menu-item-content">
-				<div id="msd-message-offline" class="msd-message">
+				<div id="msd-message-offline" class="hidden">
 					<div class="menu-item-content-text">
 						<table>
 							<tr>
@@ -166,7 +166,7 @@
 					</div>
 					<hr>
 				</div>
-				<div id="msd-message-image-broken" class="msd-message">
+				<div id="msd-message-image-broken" class="hidden">
 					<div class="menu-item-content-text">
 						<table>
 							<tr>
@@ -177,7 +177,7 @@
 					</div>
 					<hr>
 				</div>
-				<div id="msd-message-too-big-for-cdrom" class="msd-message">
+				<div id="msd-message-too-big-for-cdrom" class="hidden">
 					<div class="menu-item-content-text">
 						<table>
 							<tr>
@@ -188,7 +188,7 @@
 					</div>
 					<hr>
 				</div>
-				<div id="msd-message-out-of-storage" class="msd-message">
+				<div id="msd-message-out-of-storage" class="hidden">
 					<div class="menu-item-content-text">
 						<table>
 							<tr>
@@ -199,7 +199,7 @@
 					</div>
 					<hr>
 				</div>
-				<div id="msd-message-another-user-uploads" class="msd-message">
+				<div id="msd-message-another-user-uploads" class="hidden">
 					<div class="menu-item-content-text">
 						<table>
 							<tr>
@@ -265,7 +265,7 @@
 					<hr>
 				</div>
 
-				<input type="file" id="msd-select-new-image-file" class="msd-message" />
+				<input type="file" id="msd-select-new-image-file" class="hidden" />
 				<div class="menu-item-content-buttons buttons-row">
 					<button disabled id="msd-select-new-image-button" class="row50">Upload new image</button>
 					<button disabled id="msd-upload-new-image-button" class="row25">Start</button>
@@ -273,7 +273,7 @@
 				</div>
 				<hr>
 
-				<div id="msd-submenu-new-image" class="msd-message">
+				<div id="msd-submenu-new-image" class="hidden">
 					<table class="menu-item-content-kv">
 						<tr>
 							<td>New image:</td>
diff --git a/web/share/css/main.css b/web/share/css/main.css
index 834e5ddd..ce6fdb15 100644
--- a/web/share/css/main.css
+++ b/web/share/css/main.css
@@ -243,3 +243,7 @@ ul.footer li a {
 .feature-disabled {
 	display: none;
 }
+
+.hidden {
+	display: none;
+}
diff --git a/web/share/js/kvm/atx.js b/web/share/js/kvm/atx.js
index fae7fc9f..7c10a496 100644
--- a/web/share/js/kvm/atx.js
+++ b/web/share/js/kvm/atx.js
@@ -45,7 +45,7 @@ export function Atx() {
 
 	self.setState = function(state) {
 		if (state) {
-			$("atx-dropdown").classList.toggle("feature-disabled", !state.enabled);
+			tools.setFeatureEnabled($("atx-dropdown"), state.enabled);
 		}
 
 		$("atx-power-led").className = ((state && state.leds.power) ? "led-green" : "led-gray");
diff --git a/web/share/js/kvm/msd.js b/web/share/js/kvm/msd.js
index 63c37631..144e5c70 100644
--- a/web/share/js/kvm/msd.js
+++ b/web/share/js/kvm/msd.js
@@ -183,8 +183,8 @@ export function Msd() {
 	var __applyState = function() {
 		if (__state) {
 			__toggleMsdFeatures();
-			$("msd-dropdown").classList.toggle("feature-disabled", !__state.enabled);
-			$("msd-reset-button").classList.toggle("feature-disabled", !__state.enabled);
+			tools.setFeatureEnabled($("msd-dropdown"), __state.enabled);
+			tools.setFeatureEnabled($("msd-reset-button"), __state.enabled);
 
 			__showMessageOffline(!__state.online);
 			__showMessageImageBroken(__state.online && __state.drive.image && !__state.drive.image.complete && !__state.storage.uploading);
@@ -236,7 +236,7 @@ export function Msd() {
 
 			wm.switchEnabled($("msd-reset-button"), (__state.enabled && !__state.busy));
 
-			$("msd-submenu-new-image").style.display = (__image_file ? "block" : "none");
+			tools.setHiddenVisible($("msd-submenu-new-image"), __image_file);
 			$("msd-new-image-name").innerHTML = (__image_file ? __image_file.name : "");
 			$("msd-new-image-size").innerHTML = (__image_file ? tools.formatSize(__image_file.size) : "");
 			if (!__upload_http) {
@@ -274,7 +274,7 @@ export function Msd() {
 			wm.switchEnabled($("msd-reset-button"), false);
 
 			$("msd-select-new-image-file").value = "";
-			$("msd-submenu-new-image").style.display = "none";
+			tools.setHiddenVisible($("msd-submenu-new-image"), false);
 			$("msd-new-image-name").innerHTML = "";
 			$("msd-new-image-size").innerHTML = "";
 			tools.setProgressPercent($("msd-uploading-progress"), "", 0);
@@ -283,34 +283,34 @@ export function Msd() {
 
 	var __toggleMsdFeatures = function() {
 		for (let el of $$$(".msd-single-storage")) {
-			el.classList.toggle("feature-disabled", __state.features.multi);
+			tools.setFeatureEnabled(el, !__state.features.multi);
 		}
 		for (let el of $$$(".msd-multi-storage")) {
-			el.classList.toggle("feature-disabled", !__state.features.multi);
+			tools.setFeatureEnabled(el, __state.features.multi);
 		}
 		for (let el of $$$(".msd-cdrom-emulation")) {
-			el.classList.toggle("feature-disabled", !__state.features.cdrom);
+			tools.setFeatureEnabled(el, __state.features.cdrom);
 		}
 	};
 
 	var __showMessageOffline = function(visible) {
-		$("msd-message-offline").style.display = (visible ? "block" : "none");
+		tools.setHiddenVisible($("msd-message-offline"), visible);
 	};
 
 	var __showMessageImageBroken = function(visible) {
-		$("msd-message-image-broken").style.display = (visible ? "block" : "none");
+		tools.setHiddenVisible($("msd-message-image-broken"), visible);
 	};
 
 	var __showMessageTooBigForCdrom = function(visible) {
-		$("msd-message-too-big-for-cdrom").style.display = (visible ? "block" : "none");
+		tools.setHiddenVisible($("msd-message-too-big-for-cdrom"), visible);
 	};
 
 	var __showMessageOutOfStorage = function(visible) {
-		$("msd-message-out-of-storage").style.display = (visible ? "block" : "none");
+		tools.setHiddenVisible($("msd-message-out-of-storage"), visible);
 	};
 
 	var __showMessageAnotherUserUploads = function(visible) {
-		$("msd-message-another-user-uploads").style.display = (visible ? "block" : "none");
+		tools.setHiddenVisible($("msd-message-another-user-uploads"), visible);
 	};
 
 	var __setStatus = function(led_cls, msg) {
diff --git a/web/share/js/kvm/wol.js b/web/share/js/kvm/wol.js
index 574fc371..4833646c 100644
--- a/web/share/js/kvm/wol.js
+++ b/web/share/js/kvm/wol.js
@@ -42,7 +42,7 @@ export function WakeOnLan() {
 
 	self.setState = function(state) {
 		if (state) {
-			$("wol").classList.toggle("feature-disabled", !state.enabled);
+			tools.setFeatureEnabled($("wol"), state.enabled);
 			__target = state.target;
 		}
 		wm.switchEnabled($("wol-wakeup-button"), (state && state.enabled));
diff --git a/web/share/js/tools.js b/web/share/js/tools.js
index 63524a6a..e9de1187 100644
--- a/web/share/js/tools.js
+++ b/web/share/js/tools.js
@@ -139,6 +139,14 @@ export var tools = new function() {
 		$(`${el.id}-value`).style.width = `${percent}%`;
 	};
 
+	this.setHiddenVisible = function(el, visible) {
+		el.classList.toggle("hidden", !visible);
+	};
+
+	this.setFeatureEnabled = function(el, enabled) {
+		el.classList.toggle("feature-disabled", !enabled);
+	};
+
 	/************************************************************************/
 
 	let __debug = (new URL(window.location.href)).searchParams.get("debug");