From f32ef4cc0b3ecedd82bc517f83127a416e994fd6 Mon Sep 17 00:00:00 2001
From: aeschi <56318362+aeschi@users.noreply.github.com>
Date: Mon, 23 Sep 2024 12:12:08 +0200
Subject: [PATCH] feat: added label name to connected cube side (#48)

* feat: added label name to connected cube side

* feat: add fixed with to cube container
---
 index.css  |  30 +++++-
 index.html | 269 ++++++++++++++++++++++++++++-------------------------
 2 files changed, 171 insertions(+), 128 deletions(-)

diff --git a/index.css b/index.css
index 6c4fa60..a7e9762 100644
--- a/index.css
+++ b/index.css
@@ -9,18 +9,19 @@ body {
 }
 
 main {
-	max-width: 400px;
+	max-width: 90vw;
 	min-width: 350px;
 }
 
 button {
 	margin-top: 2rem;
-	width: 100%;
+	width: 200px;
 	background-color: #121212;
 	color: white;
 	border: none;
 	padding: 0.5rem 1rem;
 	cursor: pointer;
+	align-self: center;
 }
 
 button:hover {
@@ -28,7 +29,7 @@ button:hover {
 }
 
 input[type="text"] {
-	width: 80%;
+	width: 90%;
 	padding: 10px 20px;
 	margin: 8px 0;
 	display: inline-block;
@@ -75,3 +76,26 @@ h3 {
 	align-items: center;
 	justify-content: space-between;
 }
+
+.focus-group-container {
+	display: flex;
+	flex-wrap: wrap;
+	width: 100%;
+	gap: 4rem;
+}
+
+label {
+	font-weight: bold;
+}
+
+form {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+}
+
+.group-a,
+.group-b,
+.group-c {
+	width: 280px;
+}
diff --git a/index.html b/index.html
index dad7fe1..8fb4bca 100644
--- a/index.html
+++ b/index.html
@@ -25,123 +25,130 @@ <h1>Ideenwürfel</h1>
 				klicken.
 			</div>
 			<form id="form">
-				<h3 class="focus-group">Würfel A: Fokus Gruppe</h3>
-				<div id="status-A" style="padding-bottom: 10px"></div>
-
-				<!--A1-->
-				<div class="label-block">
-					<label for="A1">Label A1</label>
-					<input type="text" name="A1" id="A1" />
-				</div>
-
-				<!--A2-->
-				<div class="label-block">
-					<label for="A2">Label A2</label>
-					<input type="text" name="A2" id="A2" />
-				</div>
-
-				<!--A3-->
-				<div class="label-block">
-					<label for="A3">Label A3</label>
-					<input type="text" name="A3" id="A3" />
-				</div>
-
-				<!--A4-->
-				<div class="label-block">
-					<label for="A4">Label A4</label>
-					<input type="text" name="A4" id="A4" />
-				</div>
-
-				<!--A5-->
-				<div class="label-block">
-					<label for="A5">Label A5</label>
-					<input type="text" name="A5" id="A5" />
-				</div>
-
-				<!--A6-->
-				<div class="label-block">
-					<label for="A6">Label A6</label>
-					<input type="text" name="A6" id="A6" />
-				</div>
-
-				<h3 class="topic">Würfel B: Thema</h3>
-				<div id="status-B" style="padding-bottom: 10px"></div>
-
-				<!--B1-->
-				<div class="label-block">
-					<label for="B1">Label B1</label>
-					<input type="text" name="B1" id="B1" />
-				</div>
-
-				<!--B2-->
-				<div class="label-block">
-					<label for="B2">Label B2</label>
-					<input type="text" name="B2" id="B2" />
-				</div>
-
-				<!--B3-->
-				<div class="label-block">
-					<label for="B3">Label B3</label>
-					<input type="text" name="B3" id="B3" />
-				</div>
-
-				<!--B4-->
-				<div class="label-block">
-					<label for="B4">Label B4</label>
-					<input type="text" name="B4" id="B4" />
-				</div>
-
-				<!--B5-->
-				<div class="label-block">
-					<label for="B5">Label B5</label>
-					<input type="text" name="B5" id="B5" />
-				</div>
-
-				<!--B6-->
-				<div class="label-block">
-					<label for="B6">Label B6</label>
-					<input type="text" name="B6" id="B6" />
-				</div>
-
-				<h3 class="medium">Würfel C: Medium</h3>
-				<div id="status-C" style="padding-bottom: 10px"></div>
-
-				<!--C1-->
-				<div class="label-block">
-					<label for="C1">Label C1</label>
-					<input type="text" name="C1" id="C1" />
+				<div class="focus-group-container">
+					<div class="group-a">
+						<h3 class="focus-group">Würfel A: Fokus Gruppe</h3>
+						<div id="status-A" style="padding-bottom: 10px"></div>
+
+						<!--A1-->
+						<div class="label-block">
+							<label for="A1">A1</label>
+							<input type="text" name="A1" id="A1" />
+						</div>
+
+						<!--A2-->
+						<div class="label-block">
+							<label for="A2">A2</label>
+							<input type="text" name="A2" id="A2" />
+						</div>
+
+						<!--A3-->
+						<div class="label-block">
+							<label for="A3">A3</label>
+							<input type="text" name="A3" id="A3" />
+						</div>
+
+						<!--A4-->
+						<div class="label-block">
+							<label for="A4">A4</label>
+							<input type="text" name="A4" id="A4" />
+						</div>
+
+						<!--A5-->
+						<div class="label-block">
+							<label for="A5">A5</label>
+							<input type="text" name="A5" id="A5" />
+						</div>
+
+						<!--A6-->
+						<div class="label-block">
+							<label for="A6">A6</label>
+							<input type="text" name="A6" id="A6" />
+						</div>
+					</div>
+
+					<div class="group-b">
+						<h3 class="topic">Würfel B: Thema</h3>
+						<div id="status-B" style="padding-bottom: 10px"></div>
+
+						<!--B1-->
+						<div class="label-block">
+							<label for="B1">B1</label>
+							<input type="text" name="B1" id="B1" />
+						</div>
+
+						<!--B2-->
+						<div class="label-block">
+							<label for="B2">B2</label>
+							<input type="text" name="B2" id="B2" />
+						</div>
+
+						<!--B3-->
+						<div class="label-block">
+							<label for="B3">B3</label>
+							<input type="text" name="B3" id="B3" />
+						</div>
+
+						<!--B4-->
+						<div class="label-block">
+							<label for="B4">B4</label>
+							<input type="text" name="B4" id="B4" />
+						</div>
+
+						<!--B5-->
+						<div class="label-block">
+							<label for="B5">B5</label>
+							<input type="text" name="B5" id="B5" />
+						</div>
+
+						<!--B6-->
+						<div class="label-block">
+							<label for="B6">B6</label>
+							<input type="text" name="B6" id="B6" />
+						</div>
+					</div>
+
+					<div class="group-c">
+						<h3 class="medium">Würfel C: Medium</h3>
+						<div id="status-C" style="padding-bottom: 10px"></div>
+
+						<!--C1-->
+						<div class="label-block">
+							<label for="C1">C1</label>
+							<input type="text" name="C1" id="C1" />
+						</div>
+
+						<!--C2-->
+						<div class="label-block">
+							<label for="C2">C2</label>
+							<input type="text" name="C2" id="C2" />
+						</div>
+
+						<!--C3-->
+						<div class="label-block">
+							<label for="C3">C3</label>
+							<input type="text" name="C3" id="C3" />
+						</div>
+
+						<!--C4-->
+						<div class="label-block">
+							<label for="C4">C4</label>
+							<input type="text" name="C4" id="C4" />
+						</div>
+
+						<!--C5-->
+						<div class="label-block">
+							<label for="C5">C5</label>
+							<input type="text" name="C5" id="C5" />
+						</div>
+
+						<!--C6-->
+						<div class="label-block">
+							<label for="C6">C6</label>
+							<input type="text" name="C6" id="C6" />
+						</div>
+					</div>
 				</div>
-
-				<!--C2-->
-				<div class="label-block">
-					<label for="C2">Label C2</label>
-					<input type="text" name="C2" id="C2" />
-				</div>
-
-				<!--C3-->
-				<div class="label-block">
-					<label for="C3">Label C3</label>
-					<input type="text" name="C3" id="C3" />
-				</div>
-
-				<!--C4-->
-				<div class="label-block">
-					<label for="C4">Label C4</label>
-					<input type="text" name="C4" id="C4" />
-				</div>
-
-				<!--C5-->
-				<div class="label-block">
-					<label for="C5">Label C5</label>
-					<input type="text" name="C5" id="C5" />
-				</div>
-
-				<!--C6-->
-				<div class="label-block">
-					<label for="C6">Label C6</label>
-					<input type="text" name="C6" id="C6" />
-				</div>
-
 				<button type="submit">Speichern</button>
 			</form>
 		</main>
@@ -221,8 +228,6 @@ <h3 class="medium">Würfel C: Medium</h3>
 				labels[input.id] = input.value;
 			}
 
-			console.log(labels);
-
 			fetch("http://localhost:8000/labels", {
 				body: JSON.stringify({ labels }),
 				method: "PUT",
@@ -245,6 +250,8 @@ <h3 class="medium">Würfel C: Medium</h3>
 			.catch((error) => console.error(error));
 	</script>
 	<script type="text/javascript">
+		let savedLabels = {};
+
 		let webSocket = null;
 
 		function connect() {
@@ -262,7 +269,6 @@ <h3 class="medium">Würfel C: Medium</h3>
 			webSocket.addEventListener("open", () =>
 				console.log("Connected via WebSocket"),
 			);
-
 			webSocket.addEventListener("close", () => {
 				console.log("Disconnected from WebSocket");
 				setTimeout(() => initialize(), 5000);
@@ -270,7 +276,14 @@ <h3 class="medium">Würfel C: Medium</h3>
 
 			webSocket.addEventListener("message", (event) => {
 				const { dices } = JSON.parse(event.data);
-				updateStatus(dices);
+
+				fetch("http://localhost:8000/labels")
+					.then((response) => response.json())
+					.then(({ labels }) => {
+						savedLabels = labels;
+					})
+					.then(() => updateStatus(dices))
+					.catch((error) => console.error(error));
 			});
 		}
 
@@ -278,25 +291,31 @@ <h3 class="medium">Würfel C: Medium</h3>
 			for (const [key, dice] of Object.entries(dices)) {
 				const statusDiv = document.getElementById(`status-${key}`);
 				statusDiv.innerHTML = "";
-				statusDiv.appendChild(createConnectionStatusElement(key, dice));
+				statusDiv.appendChild(
+					createConnectionStatusElement(
+						key,
+						dice,
+						savedLabels[`${key + dice.side}`],
+					),
+				);
 			}
 		}
 
-		function createConnectionStatusElement(key, dice) {
+		function createConnectionStatusElement(key, dice, label) {
 			switch (dice.status) {
 				case "connected":
-					return cloneConnectedTemplate(key, dice.side);
+					return cloneConnectedTemplate(key, dice.side, label);
 				default:
 					return cloneDisconnectedTemplate();
 			}
 		}
 
-		function cloneConnectedTemplate(key, side) {
+		function cloneConnectedTemplate(key, side, label) {
 			const connectedTemplate = document.getElementById("connected");
 			const clone = connectedTemplate.content.cloneNode(true);
 
 			const statusText = clone.getElementById("status-connected-text");
-			statusText.innerHTML = `Verbunden, ${side !== null ? `Würfelseite oben: <b>${key}${side}</b>` : "einmal Würfeln bitte!"}`;
+			statusText.innerHTML = `Verbunden, ${side !== null ? `Würfelseite oben: <br/> <b>${key}${side}:</b> ${label}` : "einmal Würfeln bitte!"}`;
 
 			return clone;
 		}