diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css index 532da48..087b0ff 100644 --- a/public/stylesheets/style.css +++ b/public/stylesheets/style.css @@ -169,6 +169,7 @@ h2 { color: white; transition: all 0.4s; margin-left: 0; + } @@ -276,4 +277,30 @@ h2 { .hide { visibility: hidden; transition: visibility 0.8s; +} + +.tooltip { + position: relative; + display: inline-block; +} + +.tooltip .tooltiptext { + visibility: hidden; + width: 100px; + background-color: #214B74; + color: #fff; + text-align: center; + border-radius: 8px; + padding: 5px 0; + + /* Position the tooltip */ + position: absolute; + z-index: 1; + bottom: 45%; + left: 50%; + margin-left: -60px; +} + +.tooltip:hover .tooltiptext { + visibility: visible; } \ No newline at end of file diff --git a/src/ContainerHelper.ts b/src/ContainerHelper.ts index 8c50f3d..43876ab 100644 --- a/src/ContainerHelper.ts +++ b/src/ContainerHelper.ts @@ -58,8 +58,7 @@ export class ContainerHelper { log("Containers measured!"); resolve(); - let payload = new WebSocketPayload(WebSocketEvent.CONTAINERS, (await Container.find())); - await WebSocketHandler.send(payload); + await WebSocketHandler.sendContainers(); }); } } \ No newline at end of file diff --git a/src/WebSocketHandler.ts b/src/WebSocketHandler.ts index 892268d..bc3856d 100644 --- a/src/WebSocketHandler.ts +++ b/src/WebSocketHandler.ts @@ -98,7 +98,7 @@ export class WebSocketHandler { static sendContainers() { return new Promise(async resolve => { - let payload = new WebSocketPayload(WebSocketEvent.CONTAINERS, (await Container.find())); + let payload = new WebSocketPayload(WebSocketEvent.CONTAINERS, (await Container.find().populate("content"))); WebSocketHandler.send(payload).then(resolve); }) } diff --git a/src/web/WebHandler.ts b/src/web/WebHandler.ts index 70e410a..6198c23 100644 --- a/src/web/WebHandler.ts +++ b/src/web/WebHandler.ts @@ -7,7 +7,6 @@ import {RequestType} from "../RequestType"; import {IJob} from "../database/IJob"; import {Modal} from "./Modal"; import {ButtonType} from "./ButtonType"; -import {Fill} from "./Fill"; export class WebHandler { private static _currentPane: Pane; diff --git a/src/web/main.ts b/src/web/main.ts index 7eacf6f..ca37179 100644 --- a/src/web/main.ts +++ b/src/web/main.ts @@ -42,10 +42,14 @@ document.addEventListener("DOMContentLoaded", async () => { let container: IContainer; let bottomContainers = document.getElementById("menuContainers") as HTMLDivElement; bottomContainers.innerHTML = ""; - for (container of payload.data) { + let containers = payload.data as IContainer[]; + containers = containers.reverse(); + + for (container of containers) { let containerDiv = document.createElement("div") as HTMLDivElement; containerDiv.classList.add("container"); + let span = document.createElement("span") as HTMLSpanElement; let pcnt = Math.round(container.filled * 100 / container.volume); if (!container.content) @@ -68,7 +72,10 @@ document.addEventListener("DOMContentLoaded", async () => { containerDiv.style.backgroundColor = "#5b5b9b"; } - containerDiv.append(span); + containerDiv.innerHTML = `
${span.innerText} + ${container.content?.name} +
`; + //containerDiv.append(span); bottomContainers.append(containerDiv); }