formatting fixes

2025-11-10 21:19:13 +01:00
parent cd3db4fb86
commit 6c3d301027
6 changed files with 268 additions and 169 deletions
@@ -433,7 +433,8 @@
      }

      function onChildChange(event) {
-        selectedChildId = event.target.value === "all" ? null : parseInt(event.target.value);
+        selectedChildId =
+          event.target.value === "all" ? null : parseInt(event.target.value);
        displayDiaperChanges(allDiaperChanges);
      }

@@ -455,31 +456,34 @@
          const peePieData = preparePeePieChartData(diaperChanges);

          // Build child dropdown options
-          const childOptions = allChildren.map(child => 
-            `<option value="${child.id}" ${selectedChildId === child.id ? 'selected' : ''}>${child.name}</option>`
-          ).join('');
+          const childOptions = allChildren
+            .map(
+              (child) =>
+                `<option value="${child.id}" ${selectedChildId === child.id ? "selected" : ""}>${child.name}</option>`,
+            )
+            .join("");

          content.innerHTML = `
            <div class="controls">
              <label for="childFilter">Child:</label>
              <select id="childFilter" onchange="onChildChange(event)">
-                <option value="all" ${selectedChildId === null ? 'selected' : ''}>All Children</option>
+                <option value="all" ${selectedChildId === null ? "selected" : ""}>All Children</option>
                ${childOptions}
              </select>

              <label for="daysRange">Time Range:</label>
              <select id="daysRange" onchange="onDaysRangeChange(event)">
-                <option value="1" ${currentDaysRange === 1 ? 'selected' : ''}>Last 24 Hours</option>
-                <option value="3" ${currentDaysRange === 3 ? 'selected' : ''}>Last 3 Days</option>
-                <option value="7" ${currentDaysRange === 7 ? 'selected' : ''}>Last 7 Days</option>
-                <option value="14" ${currentDaysRange === 14 ? 'selected' : ''}>Last 14 Days</option>
-                <option value="30" ${currentDaysRange === 30 ? 'selected' : ''}>Last 30 Days</option>
-                <option value="90" ${currentDaysRange === 90 ? 'selected' : ''}>Last 90 Days</option>
+                <option value="1" ${currentDaysRange === 1 ? "selected" : ""}>Last 24 Hours</option>
+                <option value="3" ${currentDaysRange === 3 ? "selected" : ""}>Last 3 Days</option>
+                <option value="7" ${currentDaysRange === 7 ? "selected" : ""}>Last 7 Days</option>
+                <option value="14" ${currentDaysRange === 14 ? "selected" : ""}>Last 14 Days</option>
+                <option value="30" ${currentDaysRange === 30 ? "selected" : ""}>Last 30 Days</option>
+                <option value="90" ${currentDaysRange === 90 ? "selected" : ""}>Last 90 Days</option>
              </select>
            </div>

            <div class="chart-container">
-              <h2>Diaper Changes Per Day (Last ${currentDaysRange} Day${currentDaysRange !== 1 ? 's' : ''})</h2>
+              <h2>Diaper Changes Per Day (Last ${currentDaysRange} Day${currentDaysRange !== 1 ? "s" : ""})</h2>
              <div class="chart-wrapper">
                <canvas id="diaperChart"></canvas>
              </div>
@@ -506,7 +510,7 @@
          renderBarChart(barChartData);
          renderPoopPieChart(poopPieData);
          renderPeePieChart(peePieData);
-          
+
          // Render diaper change list
          renderDiaperList(diaperChanges);
        }
@@ -526,7 +530,9 @@

        // Filter by selected child if applicable
        if (selectedChildId !== null) {
-          filteredChanges = filteredChanges.filter((dc) => dc.child_id === selectedChildId);
+          filteredChanges = filteredChanges.filter(
+            (dc) => dc.child_id === selectedChildId,
+          );
        }

        // Sort by most recent first
@@ -534,50 +540,62 @@
          return new Date(b.change_time) - new Date(a.change_time);
        });

-        const listHtml = filteredChanges.map((dc) => {
-          const changeTime = new Date(dc.change_time);
-          
-          const dateStr = changeTime.toLocaleDateString("en-US", {
-            month: "short",
-            day: "numeric",
-            year: "numeric",
-          });
-          
-          const timeStr = changeTime.toLocaleTimeString("en-US", {
-            hour: "numeric",
-            minute: "2-digit",
-          });
+        const listHtml = filteredChanges
+          .map((dc) => {
+            const changeTime = new Date(dc.change_time);

-          // Build badges for poop and pee
-          let badges = [];
-          if (dc.poop_amount || dc.poop_color) {
-            const poopInfo = [dc.poop_amount, dc.poop_color].filter(Boolean).join(", ");
-            badges.push(`<span class="diaper-badge poop">💩 ${poopInfo}</span>`);
-          }
-          if (dc.pee_amount || dc.pee_color) {
-            const peeInfo = [dc.pee_amount, dc.pee_color].filter(Boolean).join(", ");
-            badges.push(`<span class="diaper-badge pee">💧 ${peeInfo}</span>`);
-          }
-          if (badges.length === 0) {
-            badges.push('<span class="diaper-badge" style="background: #f0f0f0; color: #666;">Clean diaper</span>');
-          }
+            const dateStr = changeTime.toLocaleDateString("en-US", {
+              month: "short",
+              day: "numeric",
+              year: "numeric",
+            });

-          // Get child name
-          const child = allChildren.find(c => c.id === dc.child_id);
-          const childName = child ? child.name : "Unknown";
+            const timeStr = changeTime.toLocaleTimeString("en-US", {
+              hour: "numeric",
+              minute: "2-digit",
+            });

-          return `
+            // Build badges for poop and pee
+            let badges = [];
+            if (dc.poop_amount || dc.poop_color) {
+              const poopInfo = [dc.poop_amount, dc.poop_color]
+                .filter(Boolean)
+                .join(", ");
+              badges.push(
+                `<span class="diaper-badge poop">💩 ${poopInfo}</span>`,
+              );
+            }
+            if (dc.pee_amount || dc.pee_color) {
+              const peeInfo = [dc.pee_amount, dc.pee_color]
+                .filter(Boolean)
+                .join(", ");
+              badges.push(
+                `<span class="diaper-badge pee">💧 ${peeInfo}</span>`,
+              );
+            }
+            if (badges.length === 0) {
+              badges.push(
+                '<span class="diaper-badge" style="background: #f0f0f0; color: #666;">Clean diaper</span>',
+              );
+            }
+
+            // Get child name
+            const child = allChildren.find((c) => c.id === dc.child_id);
+            const childName = child ? child.name : "Unknown";
+
+            return `
            <div class="diaper-item">
              <div class="diaper-info-left">
-                <div class="diaper-time">${dateStr} at ${timeStr}${selectedChildId === null ? ` - ${childName}` : ''}</div>
+                <div class="diaper-time">${dateStr} at ${timeStr}${selectedChildId === null ? ` - ${childName}` : ""}</div>
                <div class="diaper-details">
-                  ${badges.join('')}
+                  ${badges.join("")}
                </div>
              </div>
              <button class="edit-button" onclick="editDiaperChange(${dc.id})">Edit</button>
            </div>
          `;
-        }).join("");
+          })
+          .join("");

        const listContainer = `
          <div class="diapers-list">
@@ -592,7 +610,7 @@
        `;

        const content = document.getElementById("content");
-        content.insertAdjacentHTML('beforeend', listContainer);
+        content.insertAdjacentHTML("beforeend", listContainer);
      }

      function editDiaperChange(diaperChangeId) {
@@ -617,7 +635,9 @@

        // Filter by selected child if applicable
        if (selectedChildId !== null) {
-          recentChanges = recentChanges.filter((dc) => dc.child_id === selectedChildId);
+          recentChanges = recentChanges.filter(
+            (dc) => dc.child_id === selectedChildId,
+          );
        }

        // Count poop amounts
@@ -670,7 +690,9 @@

        // Filter by selected child if applicable
        if (selectedChildId !== null) {
-          recentChanges = recentChanges.filter((dc) => dc.child_id === selectedChildId);
+          recentChanges = recentChanges.filter(
+            (dc) => dc.child_id === selectedChildId,
+          );
        }

        // Count pee amounts
@@ -718,7 +740,9 @@
        // Filter by selected child if applicable
        let filteredChanges = diaperChanges;
        if (selectedChildId !== null) {
-          filteredChanges = diaperChanges.filter((dc) => dc.child_id === selectedChildId);
+          filteredChanges = diaperChanges.filter(
+            (dc) => dc.child_id === selectedChildId,
+          );
        }

        // Create days based on currentDaysRange (including today)
@@ -742,8 +766,12 @@
            return changeDate >= date && changeDate < nextDay;
          });

-          const poopCount = dayChanges.filter(dc => dc.poop_amount !== null).length;
-          const peeCount = dayChanges.filter(dc => dc.pee_amount !== null).length;
+          const poopCount = dayChanges.filter(
+            (dc) => dc.poop_amount !== null,
+          ).length;
+          const peeCount = dayChanges.filter(
+            (dc) => dc.pee_amount !== null,
+          ).length;

          poopData.push(poopCount);
          peeData.push(peeCount);
@@ -754,7 +782,7 @@

      function renderBarChart(chartData) {
        const ctx = document.getElementById("diaperChart").getContext("2d");
-        
+
        new Chart(ctx, {
          type: "bar",
          data: {
@@ -847,21 +875,33 @@

      function renderPoopPieChart(chartData) {
        const ctx = document.getElementById("poopPieChart").getContext("2d");
-        
+
        const colors = {
-          "Light": { bg: "rgba(139, 69, 19, 0.5)", border: "rgba(139, 69, 19, 1)" },
-          "Medium": { bg: "rgba(139, 69, 19, 0.7)", border: "rgba(139, 69, 19, 1)" },
-          "Heavy": { bg: "rgba(139, 69, 19, 0.9)", border: "rgba(139, 69, 19, 1)" },
-          "No Poop": { bg: "rgba(200, 200, 200, 0.5)", border: "rgba(200, 200, 200, 1)" },
+          Light: {
+            bg: "rgba(139, 69, 19, 0.5)",
+            border: "rgba(139, 69, 19, 1)",
+          },
+          Medium: {
+            bg: "rgba(139, 69, 19, 0.7)",
+            border: "rgba(139, 69, 19, 1)",
+          },
+          Heavy: {
+            bg: "rgba(139, 69, 19, 0.9)",
+            border: "rgba(139, 69, 19, 1)",
+          },
+          "No Poop": {
+            bg: "rgba(200, 200, 200, 0.5)",
+            border: "rgba(200, 200, 200, 1)",
+          },
        };

        const backgroundColors = chartData.labels.map(
-          (label) => colors[label]?.bg || "rgba(200, 200, 200, 0.5)"
+          (label) => colors[label]?.bg || "rgba(200, 200, 200, 0.5)",
        );
        const borderColors = chartData.labels.map(
-          (label) => colors[label]?.border || "rgba(200, 200, 200, 1)"
+          (label) => colors[label]?.border || "rgba(200, 200, 200, 1)",
        );
-        
+
        new Chart(ctx, {
          type: "pie",
          data: {
@@ -900,8 +940,12 @@
                callbacks: {
                  label: function (context) {
                    const count = context.parsed;
-                    const total = context.dataset.data.reduce((a, b) => a + b, 0);
-                    const percentage = total > 0 ? ((count / total) * 100).toFixed(1) : 0;
+                    const total = context.dataset.data.reduce(
+                      (a, b) => a + b,
+                      0,
+                    );
+                    const percentage =
+                      total > 0 ? ((count / total) * 100).toFixed(1) : 0;
                    return `${context.label}: ${count} (${percentage}%)`;
                  },
                },
@@ -913,21 +957,33 @@

      function renderPeePieChart(chartData) {
        const ctx = document.getElementById("peePieChart").getContext("2d");
-        
+
        const colors = {
-          "Light": { bg: "rgba(255, 215, 0, 0.5)", border: "rgba(255, 215, 0, 1)" },
-          "Medium": { bg: "rgba(255, 215, 0, 0.7)", border: "rgba(255, 215, 0, 1)" },
-          "Heavy": { bg: "rgba(255, 215, 0, 0.9)", border: "rgba(255, 215, 0, 1)" },
-          "No Pee": { bg: "rgba(200, 200, 200, 0.5)", border: "rgba(200, 200, 200, 1)" },
+          Light: {
+            bg: "rgba(255, 215, 0, 0.5)",
+            border: "rgba(255, 215, 0, 1)",
+          },
+          Medium: {
+            bg: "rgba(255, 215, 0, 0.7)",
+            border: "rgba(255, 215, 0, 1)",
+          },
+          Heavy: {
+            bg: "rgba(255, 215, 0, 0.9)",
+            border: "rgba(255, 215, 0, 1)",
+          },
+          "No Pee": {
+            bg: "rgba(200, 200, 200, 0.5)",
+            border: "rgba(200, 200, 200, 1)",
+          },
        };

        const backgroundColors = chartData.labels.map(
-          (label) => colors[label]?.bg || "rgba(200, 200, 200, 0.5)"
+          (label) => colors[label]?.bg || "rgba(200, 200, 200, 0.5)",
        );
        const borderColors = chartData.labels.map(
-          (label) => colors[label]?.border || "rgba(200, 200, 200, 1)"
+          (label) => colors[label]?.border || "rgba(200, 200, 200, 1)",
        );
-        
+
        new Chart(ctx, {
          type: "pie",
          data: {
@@ -966,8 +1022,12 @@
                callbacks: {
                  label: function (context) {
                    const count = context.parsed;
-                    const total = context.dataset.data.reduce((a, b) => a + b, 0);
-                    const percentage = total > 0 ? ((count / total) * 100).toFixed(1) : 0;
+                    const total = context.dataset.data.reduce(
+                      (a, b) => a + b,
+                      0,
+                    );
+                    const percentage =
+                      total > 0 ? ((count / total) * 100).toFixed(1) : 0;
                    return `${context.label}: ${count} (${percentage}%)`;
                  },
                },