ui fixes

5 files changed, 52 insertions, 29 deletions

diff --git a/kvmd/kvmd/msd.py b/kvmd/kvmd/msd.py
index 0746a6f6..5b2fa592 100644
--- a/kvmd/kvmd/msd.py
+++ b/kvmd/kvmd/msd.py
@@ -222,9 +222,14 @@ class MassStorageDevice:  # pylint: disable=too-many-instance-attributes
         if info:
             info["hw"] = (info["hw"]._asdict() if info["hw"] else None)
             info["image"] = (info["image"]._asdict() if info["image"] else None)
+
+        connected_to: Optional[str] = None
+        if self._device_path:
+            connected_to = ("kvm" if self.__device_info else "server")
+
         return {
             "in_operate": bool(self._device_path),
-            "connected_to": ("kvm" if self.__device_info else "server"),
+            "connected_to": connected_to,
             "busy": bool(self.__device_file),
             "written": self.__written,
             "info": info,
diff --git a/kvmd/web/css/main.css b/kvmd/web/css/main.css
index 71e0eefd..ad5bca2d 100644
--- a/kvmd/web/css/main.css
+++ b/kvmd/web/css/main.css
@@ -213,9 +213,9 @@ table#msd-info {
 	font-size: 14px;
 }
 table#msd-info
+td#msd-status,
 td#msd-current-image-name,
 td#msd-current-image-size,
-td#msd-storage-device,
 td#msd-storage-size,
 td#msd-new-image-name,
 td#msd-new-image-size {
diff --git a/kvmd/web/index.html b/kvmd/web/index.html
index 3af08b90..e286673c 100644
--- a/kvmd/web/index.html
+++ b/kvmd/web/index.html
@@ -31,7 +31,7 @@
 					System ↴
 				</a>
 				<div class="ctl-dropdown-content">
-					<button disabled id="stream-reset-button" onclick="stream.clickResetButton(this);">&bull; Reset stream</button>
+					<button disabled id="stream-reset-button" onclick="stream.clickResetButton();">&bull; Reset stream</button>
 				</div>
 			</div>
 		</li>
@@ -83,6 +83,26 @@
 						<hr>
 					</div>
 
+					<div id="msd-another-another-user-uploads" style="display:none">
+						<div class="ctl-dropdown-content-text">
+							<table>
+								<tr>
+									<td><img src="svg/info.svg" /></td>
+									<td><b>Another user uploads an image</b></td>
+								</tr>
+							</table>
+						</div>
+						<hr>
+					</div>
+
+					<table id="msd-info">
+						<tr>
+							<td>Status: </td>
+							<td id="msd-status"></td>
+						</tr>
+					</table>
+					<hr>
+
 					<table id="msd-info">
 						<tr>
 							<td>Image name:</td>
@@ -95,21 +115,13 @@
 							<td>Storage size:</td>
 							<td id="msd-storage-size"></td>
 						</tr>
-						<tr>
-							<td>KVM Device:</td>
-							<td id="msd-storage-device"></td>
-						</tr>
 					</table>
 					<hr>
 
-
-
 					<input type="file" id="msd-select-new-image-file" style="display:none;" onchange="msd.selectNewImageFile(this)" />
-					<button disabled id="msd-select-new-image-button" class="first" onclick="document.getElementById('msd-select-new-image-file').click();">&bull; Upload new image</button><button disabled id="msd-upload-new-image-button" class="second-half-first" onclick="msd.clickButton(this);">&bull; Start</button><button disabled id="msd-abort-uploading-button" class="second-half-second" onclick="msd.clickButton(this);">&bull; Abort</button>
+					<button disabled id="msd-select-new-image-button" class="first" onclick="document.getElementById('msd-select-new-image-file').click();">&bull; Upload new image <b>&#8680;</button><button disabled id="msd-upload-new-image-button" class="second-half-first" onclick="msd.clickButton(this);">&bull; Start</button><button disabled id="msd-abort-uploading-button" class="second-half-second" onclick="msd.clickButton(this);">&bull; Abort</button>
 					<hr>
 
-
-
 					<div id="msd-new-image" style="display:none">
 						<table id="msd-info">
 							<tr>
@@ -128,10 +140,6 @@
 							</div>
 						</div>
 						<hr>
-						<!--<div class="ctl-dropdown-content-text">
-							<img src="svg/info.svg" /><b>You can't switch Mass Storage Device while uploading</b><br>
-						</div>
-						<hr>-->
 					</div>
 
 					<button disabled id="msd-switch-to-kvm-button" class="first-bottom" onclick="msd.clickButton(this);">&bull; Switch drive to KVM</button><button disabled id="msd-switch-to-server-button" class="second-bottom" onclick="msd.clickButton(this);">&bull; Switch drive to Server</button>
diff --git a/kvmd/web/js/msd.js b/kvmd/web/js/msd.js
index 073d3069..61a70789 100644
--- a/kvmd/web/js/msd.js
+++ b/kvmd/web/js/msd.js
@@ -17,7 +17,6 @@ var msd = new function() {
 
 	this.setState = function(state) {
 		__state = state;
-		console.log(state);
 		__applyState();
 	};
 
@@ -41,7 +40,6 @@ var msd = new function() {
 			__upload_http = null;
 			$("msd-progress").setAttribute("data-label", "Aborted");
 			$("msd-progress-value").style.width = "0%";
-			msd.loadInitialState();
 
 		} else if (el_button.id === "msd-switch-to-kvm-button" || el_button.id === "msd-switch-to-server-button") {
 			var to = (el_button.id === "msd-switch-to-kvm-button" ? "kvm" : "server");
@@ -76,20 +74,35 @@ var msd = new function() {
 
 	var __applyState = function() {
 		if (__state.connected_to === "server") {
+			$("msd-another-another-user-uploads").style.display = "none";
 			$("msd-led").className = "led-on";
+			$("msd-status").innerHTML = "Connected to Server";
+			$("msd-another-another-user-uploads").style.display = "none";
 		} else if (__state.busy) {
+			if (!__upload_http) {
+				$("msd-another-another-user-uploads").style.display = "block";
+			}
 			$("msd-led").className = "led-msd-writing";
+			$("msd-status").innerHTML = "Uploading new image";
 		} else {
+			$("msd-another-another-user-uploads").style.display = "none";
 			$("msd-led").className = "led-off";
+			if (__state.in_operate) {
+				$("msd-status").innerHTML = "Connected to KVM";
+			} else {
+				$("msd-status").innerHTML = "Unavailable";
+			}
 		}
 
 		$("msd-not-in-operate").style.display = (__state.in_operate ? "none" : "block");
-		$("msd-current-image-broken").style.display = ((__state.info.image && !__state.info.image.complete) ? "block" : "none");
+		$("msd-current-image-broken").style.display = (
+			__state.in_operate && __state.info.image &&
+			!__state.info.image.complete && !__state.busy ? "block" : "none"
+		);
 
-		$("msd-current-image-name").innerHTML = (__state.info.image ? __state.info.image.name : "None");
-		$("msd-current-image-size").innerHTML = (__state.info.image ? __formatSize(__state.info.image.size) : "None");
+		$("msd-current-image-name").innerHTML = (__state.in_operate && __state.info.image ? __state.info.image.name : "None");
+		$("msd-current-image-size").innerHTML = (__state.in_operate && __state.info.image ? __formatSize(__state.info.image.size) : "None");
 		$("msd-storage-size").innerHTML = (__state.in_operate ? __formatSize(__state.info.size) : "Unavailable");
-		$("msd-storage-device").innerHTML = (__state.in_operate ? __state.info.real : "Missing");
 
 		$("msd-switch-to-kvm-button").disabled = (!__state.in_operate || __state.connected_to === "kvm" || __state.busy);
 		$("msd-switch-to-server-button").disabled = (!__state.in_operate || __state.connected_to === "server" || __state.busy);
diff --git a/kvmd/web/js/stream.js b/kvmd/web/js/stream.js
index 6dad610a..288762be 100644
--- a/kvmd/web/js/stream.js
+++ b/kvmd/web/js/stream.js
@@ -12,29 +12,26 @@ var stream = new function() {
 					__prev_state = false;
 					$("stream-image").className = "stream-image-inactive";
 					$("stream-led").className = "led-off";
+					$("stream-reset-button").disabled = true;
 				} else if (!__prev_state) {
 					__refreshImage();
 					__prev_state = true;
 					$("stream-image").className = "stream-image-active";
 					$("stream-led").className = "led-on";
+					$("stream-reset-button").disabled = false;
 				}
 			}
 		});
 		setTimeout(stream.startPoller, 2000);
 	};
 
-//	this.setActive = function(active) {
-//		$("stream-image").className = (active ? "stream-image-active" : "stream-image-inactive");
-//	};
-
-	this.clickResetButton = function(el_button) {
-		el_button.disabled = true;
+	this.clickResetButton = function() {
+		$("stream-reset-button").disabled = true;
 		var http = tools.makeRequest("POST", "/kvmd/streamer/reset", function() {
 			if (http.readyState === 4) {
 				if (http.status !== 200) {
 					alert("Can't reset stream:", http.responseText);
 				}
-				el_button.disabled = false;
 			}
 		});
 	};