From 1b58bda714d52e82ff57cb5d8b78a03c6b95c7be Mon Sep 17 00:00:00 2001
From: Nikola Tasic <ntasic7@gmail.com>
Date: Sun, 19 Jan 2025 15:34:21 +0100
Subject: [PATCH] Moonraker - added print time, filename, and disabled showing
 layer data when none is available

Added print time block that is available from print_stats endpoint.
Added a check whether current and total layer info is available. It is
not returned by the api if it is not explicitly configured in the
slicer. Most of the time that is not a default setting.
Added a filename display that shows the current file that is being
printed. Similar layout as in jellyfin widget.
---
 public/locales/en/common.json       |  1 +
 src/widgets/moonraker/component.jsx | 25 +++++++++++++++++--------
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/public/locales/en/common.json b/public/locales/en/common.json
index 1d738089..38215277 100644
--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@@ -625,6 +625,7 @@
         "wanDownload": "WAN Download"
     },
     "moonraker": {
+        "time": "Time",
         "printer_state": "Printer State",
         "print_status": "Print Status",
         "print_progress": "Progress",
diff --git a/src/widgets/moonraker/component.jsx b/src/widgets/moonraker/component.jsx
index 78332135..0a07daf8 100644
--- a/src/widgets/moonraker/component.jsx
+++ b/src/widgets/moonraker/component.jsx
@@ -35,16 +35,25 @@ export default function Component({ service }) {
   }
 
   const printStatsInfo = printStats.result.status.print_stats.info ?? {};
+  const totalDurationSeconds = printStats.result.status.print_stats.total_duration ?? 0;
+  const fileName = printStats.result.status.print_stats.filename;
   const { current_layer: currentLayer = "-", total_layer: totalLayer = "-" } = printStatsInfo;
 
   return (
-    <Container service={service}>
-      <Block label="moonraker.layers" value={`${currentLayer} / ${totalLayer}`} />
-      <Block
-        label="moonraker.print_progress"
-        value={t("common.percent", { value: displayStatus.result.status.display_status.progress * 100 })}
-      />
-      <Block label="moonraker.print_status" value={printStats.result.status.print_stats.state} />
-    </Container>
+    <>
+      <Container service={service}>
+        {/* current_layer and total_layer variables are not available if not exposed by the slicer */}
+        {currentLayer && totalLayer ? <Block label="moonraker.layers" value={`${currentLayer} / ${totalLayer}`} /> : null}
+        <Block label="moonraker.print_progress" value={t("common.percent", { value: displayStatus.result.status.display_status.progress * 100 })} />
+        {totalDurationSeconds > 0 ? <Block label="moonraker.time" value={t("common.duration", {value: totalDurationSeconds})} /> : null }
+        <Block label="moonraker.print_status" value={printStats.result.status.print_stats.state} />
+      </Container>
+      {fileName ? <div className="flex flex-col pb-1 mx-1">
+        <div
+          className="text-theme-700 dark:text-theme-200 text-xs relative h-5 w-full rounded-md bg-theme-200/50 dark:bg-theme-900/20 mt-1">
+          <span className="absolute left-2 text-xs mt-[2px] w-full truncate pr-3">{fileName}</span>
+        </div>
+      </div> : null }
+    </>
   );
 }