update

Took 16 minutes

public/stylesheets/style.css

@@ -169,6 +169,7 @@ h2 {
     color: white;
     transition: all 0.4s;
     margin-left: 0;
+
 }
 
 
@@ -277,3 +278,29 @@ h2 {
     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;
+}

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

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

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;

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 = `<div class="tooltip">${span.innerText}
+  <span class="tooltiptext">${container.content?.name}</span>
+</div>`;
+            //containerDiv.append(span);
 
             bottomContainers.append(containerDiv);
         }