Make results pretty

static/result.html.tmpl

@@ -59,9 +59,42 @@
     <div class="calendar" id="calendar"></div>
     <script>
 
+        function getColorBetween(upperColor, num, upperBound) {
+            // Parse the upperColor into RGB values
+            const parseColor = (color) => {
+              const bigint = parseInt(color.slice(1), 16);
+              return {
+                r: (bigint >> 16) & 255,
+                g: (bigint >> 8) & 255,
+                b: bigint & 255
+              };
+            };
+          
+            const upperRGB = parseColor(upperColor);
+            const whiteRGB = { r: 255, g: 255, b: 255 };
+          
+            // Clamp the number to the range [0, upperBound]
+            const clampedNum = Math.max(0, Math.min(num, upperBound));
+          
+            // Calculate the weight (proportion of `num` relative to `upperBound`)
+            const weight = clampedNum / upperBound;
+          
+            // Interpolate between white and upperColor
+            const interpolatedRGB = {
+              r: Math.round(whiteRGB.r + weight * (upperRGB.r - whiteRGB.r)),
+              g: Math.round(whiteRGB.g + weight * (upperRGB.g - whiteRGB.g)),
+              b: Math.round(whiteRGB.b + weight * (upperRGB.b - whiteRGB.b))
+            };
+          
+            // Convert the result back to a hex color
+            const toHex = (val) => val.toString(16).padStart(2, "0");
+            return `#${toHex(interpolatedRGB.r)}${toHex(interpolatedRGB.g)}${toHex(interpolatedRGB.b)}`;
+        }
+
         function createResultView(result) {
             const daysOfWeek = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
             const calendar = document.getElementById("calendar");
+            const maxVotes = result.votes.flat().reduce((max, obj) => Math.max(max, obj.votes), 0);
 
             for (let day = 0; day < 7; day++) {
                 const dayColumn = document.createElement("div");
@@ -75,9 +108,43 @@
                 for (let hour = 0; hour < 24; hour++) {
                     const hourBlock = document.createElement("div");
                     hourBlock.classList.add("hour-block");
-                    hourBlock.textContent = `${hour}:00\n${result.votes[day][hour].votes}\n${result.votes[day][hour].usernames}`;
+                    hourBlock.textContent = `${hour}:00`;
+
+                    const tooltip = document.createElement("div");
+                    tooltip.textContent = result.votes[day][hour].usernames;
+                    tooltip.style.position = "absolute";
+                    tooltip.style.padding = "5px";
+                    tooltip.style.backgroundColor = "black";
+                    tooltip.style.color = "white";
+                    tooltip.style.borderRadius = "4px";
+                    tooltip.style.fontSize = "12px";
+                    tooltip.style.visibility = "visible";
+                    tooltip.style.whiteSpace = "nowrap";
+                    tooltip.style.zIndex = "1000";
+                    document.body.appendChild(tooltip);
 
                     dayColumn.appendChild(hourBlock);
+
+                    hourBlock.addEventListener("mouseover", (event) => {
+                      tooltip.style.left = `${event.pageX + 10}px`; // Position near the cursor
+                      tooltip.style.top = `${event.pageY + 10}px`;
+                      tooltip.style.visibility = result.votes[day][hour].usernames.length > 0 ? "visible" : "hidden";
+                    });
+
+                    // Move tooltip with mouse
+                    hourBlock.addEventListener("mousemove", (event) => {
+                      tooltip.style.left = `${event.pageX + 10}px`;
+                      tooltip.style.top = `${event.pageY + 10}px`;
+                    });
+
+                    // Hide tooltip on mouseout
+                    hourBlock.addEventListener("mouseout", () => {
+                      tooltip.style.visibility = "hidden";
+                    });
+
+                    hourBlock.style.backgroundColor =
+                        getColorBetween("#87CEEB", result.votes[day][hour].votes, maxVotes)
+                
                 }
 
                 calendar.appendChild(dayColumn);