Skip to content

Commit

Permalink
feat: added label name to connected cube side (#48)
Browse files Browse the repository at this point in the history 
* feat: added label name to connected cube side

* feat: add fixed with to cube container
  • Loading branch information
@aeschi
aeschi authored Sep 23, 2024
1 parent 1b9df5d commit f32ef4c
Show file tree
Hide file tree
Showing 2 changed files with 171 additions and 128 deletions.
30 changes: 27 additions & 3 deletions index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,26 +9,27 @@ 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 {
background-color: #565656;
}

input[type="text"] {
width: 80%;
width: 90%;
padding: 10px 20px;
margin: 8px 0;
display: inline-block;
Expand Down Expand Up @@ -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;
}
269 changes: 144 additions & 125 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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",
Expand All @@ -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() {
Expand All @@ -262,41 +269,53 @@ <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);
});

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));
});
}

function updateStatus(dices) {
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;
}
Expand Down

0 comments on commit f32ef4c

Please sign in to comment.