From 3dc2eaca6d94da7e4cbf451a03ea5e218425f7d6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maxi=20Quo=C3=9F?= <maxi@quoss.org>
Date: Thu, 26 Jan 2023 20:03:22 +0100
Subject: [PATCH] simplify power button

---
 README.md                                 |  8 ++--
 frontend/src/components/DeviceCard.svelte | 51 ++++++++++++-----------
 2 files changed, 30 insertions(+), 29 deletions(-)

diff --git a/README.md b/README.md
index 2101d857..8f2fbce6 100644
--- a/README.md
+++ b/README.md
@@ -30,8 +30,8 @@ Open up [http://localhost:5173/](http://localhost:5173/)
 
 - frontend
 
-  - [x] add rest of settings page
-  - [x] form for adding new devices
+  - [x] ~~add rest of settings page~~
+  - [x] ~~form for adding new devices~~
   - [ ] add per device settings
   - [x] ~~theme toggle button~~
   - [x] ~~add device ports to cards~~
@@ -40,11 +40,11 @@ Open up [http://localhost:5173/](http://localhost:5173/)
 
   - [x] ~~make sure ping works~~
   - [ ] make sure arp works
-  - [x] make sure wake works
+  - [x] ~~make sure wake works~~
   - [ ] remove nmap?
   - [ ] add shutdown command
   - [ ] add scheduled wake
-  - [x] [#34 Add support for WOL passwords](https://github.com/seriousm4x/UpSnap/issues/34)
+  - [x] [~~#34 Add support for WOL passwords~~](https://github.com/seriousm4x/UpSnap/issues/34)
   - [x] [~~#33 Seemingly High Ram usage~~](https://github.com/seriousm4x/UpSnap/issues/33)
   - [x] [~~#32 API available?~~](https://github.com/seriousm4x/UpSnap/issues/32)
 
diff --git a/frontend/src/components/DeviceCard.svelte b/frontend/src/components/DeviceCard.svelte
index ce7c1599..6d5af769 100644
--- a/frontend/src/components/DeviceCard.svelte
+++ b/frontend/src/components/DeviceCard.svelte
@@ -30,36 +30,37 @@
 		<div class="card-body">
 			<div class="row">
 				<div class="col-auto me-auto">
-					<span
-						class:text-danger={device.status == 'offline' ? true : false}
-						class:text-success={device.status == 'online' ? true : false}
-						on:click={device.status == 'offline'
-							? () => wake()
-							: device.status == 'online'
-							? () => shutdown()
-							: ''}
-						on:keydown={device.status == 'offline'
-							? () => wake()
-							: device.status == 'online'
-							? () => shutdown()
-							: ''}
-					>
-						{#if device.status === 'pending'}
-							<div
-								class="spinner-border text-warning"
-								style="width: 23px;height: 23px;"
-								role="status"
-							>
-								<span class="visually-hidden">Loading...</span>
-							</div>
-						{:else}
+					{#if device.status === 'offline'}
+						<span class="text-danger" on:click={() => wake()} on:keydown={() => wake()}>
 							<div role="button">
 								<Fa icon={faPowerOff} class="fs-4 power-hover" />
 							</div>
+						</span>
+					{:else if device.status === 'online'}
+						{#if device.shutdown_cmd !== ''}
+							<span class="text-success" on:click={() => shutdown()} on:keydown={() => shutdown()}>
+								<div role="button">
+									<Fa icon={faPowerOff} class="fs-4 power-hover" />
+								</div>
+							</span>
+						{:else}
+							<span class="text-success">
+								<div>
+									<Fa icon={faPowerOff} class="fs-4" />
+								</div>
+							</span>
 						{/if}
-					</span>
+					{:else if device.status === 'pending'}
+						<div
+							class="spinner-border text-warning"
+							style="width: 23px;height: 23px;"
+							role="status"
+						>
+							<span class="visually-hidden">Loading...</span>
+						</div>
+					{/if}
 				</div>
-				<div class="col-auto">
+				<div class="col-auto fs-5">
 					<Fa icon={faEllipsisVertical} />
 				</div>
 			</div>