Grotti 2.10.0: Orca-Senden, Slice-Ordner, ED-Strom, Hygiene.

Slice-Watch mit Ordnern/Filtern, Orca-Nachbearbeitung, Cockpit-Verlauf
mit ED, Zeitzone im Browser. Tasten-Grenze und README-API angeglichen,
toter Code entfernt, Requirements gepinnt.

web/static/api.js

@@ -89,7 +89,126 @@ function clockOf(iso) {
   if (!iso) return "";
   const at = new Date(iso);
   if (Number.isNaN(at.getTime())) return "";
-  return at.toLocaleTimeString("de-DE", { hour: "2-digit", minute: "2-digit" });
+  return at.toLocaleTimeString("de-DE", { hour: "2-digit", minute: "2-digit", timeZone: appTimeZone() });
+}
+
+const TZ_KEY = "grotti-timezone";
+
+function appTimeZone() {
+  try {
+    const value = localStorage.getItem(TZ_KEY);
+    if (value && value !== "auto") return value;
+  } catch (error) { /* Browser */ }
+  return undefined;
+}
+
+function formatDateTime(iso, opts) {
+  if (!iso) return "—";
+  const at = new Date(iso);
+  if (Number.isNaN(at.getTime())) return "—";
+  const options = {
+    day: "2-digit",
+    month: "2-digit",
+    year: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+    timeZone: appTimeZone(),
+    ...(opts || {}),
+  };
+  return at.toLocaleString("de-DE", options);
+}
+
+function formatDateRange(startIso, endIso) {
+  const start = startIso ? new Date(startIso) : null;
+  const end = endIso ? new Date(endIso) : null;
+  if (start && Number.isNaN(start.getTime())) return "—";
+  if (!start && !end) return "—";
+  if (start && !end) return formatDateTime(startIso) + " → …";
+  if (!start && end) return "… → " + formatDateTime(endIso);
+  const sameDay = start.toDateString() === end.toDateString();
+  const left = formatDateTime(startIso);
+  if (sameDay) {
+    const right = end.toLocaleTimeString("de-DE", {
+      hour: "2-digit",
+      minute: "2-digit",
+      timeZone: appTimeZone(),
+    });
+    return left + " – " + right;
+  }
+  return left + " – " + formatDateTime(endIso);
+}
+
+function tempChartHtml(samples) {
+  if (!samples || samples.length < 2) {
+    return '<p class="tiny">Noch zu wenig Proben für den Verlauf.</p>';
+  }
+  const times = samples.map((s) => new Date(s.sampled_at).getTime());
+  const t0 = times[0];
+  const t1 = times[times.length - 1];
+  const span = Math.max(1, t1 - t0);
+  const temps = samples.flatMap((s) => [s.nozzle, s.bed, s.chamber, s.nozzle_target, s.bed_target].filter((v) => v != null));
+  const minT = Math.min(...temps, 0);
+  const maxT = Math.max(...temps, 100);
+  const hasEd = samples.some((s) => s.nozzle_power != null || s.bed_power != null);
+  const w = 640;
+  const h = 210;
+  const padL = 44;
+  const padR = hasEd ? 44 : 28;
+  const padT = 22;
+  const padB = 30;
+  const x = (ms) => padL + ((ms - t0) / span) * (w - padL - padR);
+  const yT = (v) => padT + (1 - (Number(v) - minT) / Math.max(1, maxT - minT)) * (h - padT - padB);
+  const yEd = (v) => padT + (1 - Math.max(0, Math.min(1, Number(v) || 0))) * (h - padT - padB);
+
+  function poly(key, color, dashed, scaleEd) {
+    const pts = [];
+    samples.forEach((s, i) => {
+      const v = s[key];
+      if (v == null) return;
+      const yy = scaleEd ? yEd(Number(v)) : yT(v);
+      pts.push(`${x(times[i]).toFixed(1)},${yy.toFixed(1)}`);
+    });
+    if (pts.length < 2) return "";
+    const dash = dashed ? ' stroke-dasharray="5 4"' : "";
+    return `<polyline fill="none" stroke="${color}" stroke-width="${dashed ? 1.2 : 1.7}"${dash} points="${pts.join(" ")}" />`;
+  }
+
+  const tickCount = Math.min(5, samples.length);
+  const timeTicks = [];
+  for (let i = 0; i < tickCount; i++) {
+    const ms = t0 + (span * i) / Math.max(1, tickCount - 1);
+    const label = new Date(ms).toLocaleTimeString("de-DE", {
+      hour: "2-digit",
+      minute: "2-digit",
+      timeZone: appTimeZone(),
+    });
+    timeTicks.push(`<text x="${x(ms).toFixed(1)}" y="${h - 6}" text-anchor="middle" class="chart-label">${escapeHtml(label)}</text>`);
+  }
+  const midY = (padT + h - padB) / 2;
+
+  return `<svg class="temp-chart" viewBox="0 0 ${w} ${h}" role="img" aria-label="Temperatur links in °C, Einschaltdauer rechts in Prozent">
+    ${poly("nozzle_target", "#fdba74", true, false)}
+    ${poly("bed_target", "#93c5fd", true, false)}
+    ${poly("nozzle", "#ea580c", false, false)}
+    ${poly("bed", "#2563eb", false, false)}
+    ${poly("chamber", "#16a34a", false, false)}
+    ${hasEd ? poly("nozzle_power", "#c084fc", false, true) : ""}
+    ${hasEd ? poly("bed_power", "#22d3ee", false, true) : ""}
+    <text x="10" y="${midY}" class="chart-axis" transform="rotate(-90 10 ${midY})">Temp °C</text>
+    <text x="${padL}" y="14" class="chart-label">${Math.round(maxT)}</text>
+    <text x="${padL}" y="${h - padB + 2}" class="chart-label">${Math.round(minT)}</text>
+    ${hasEd ? `<text x="${w - 10}" y="${midY}" class="chart-axis" text-anchor="middle" transform="rotate(90 ${w - 10} ${midY})">ED %</text>` : ""}
+    ${hasEd ? `<text x="${w - padR}" y="14" text-anchor="end" class="chart-label">100</text>` : ""}
+    ${hasEd ? `<text x="${w - padR}" y="${h - padB + 2}" text-anchor="end" class="chart-label">0</text>` : ""}
+    ${timeTicks.join("")}
+  </svg>
+  <p class="tiny chart-legend">
+    <span class="leg nozzle">Düse</span>
+    <span class="leg bed">Bett</span>
+    <span class="leg chamber">Kammer</span>
+    ${hasEd ? '<span class="leg ed-n">ED Düse</span><span class="leg ed-b">ED Bett</span>' : ""}
+    · links °C · rechts % · gestrichelt ≈ Soll
+  </p>`;
 }
 
 function showNote(id, error, ok) {