From bdc911c415fe6c276720f6cdd1928d4cf8750bc7 Mon Sep 17 00:00:00 2001
From: "Michal Dziekonski (mdz)" <michal.dziekonski+github@gmail.com>
Date: Thu, 24 Oct 2024 02:36:40 +0200
Subject: [PATCH] feat: Improve info formatting in the Sidebar (GH-52) (#70)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Michał Dziekoński <michal.dziekonski+github@gmail.com>
---
 octoprint_Spoolman/static/css/Spoolman.css    |   7 ++
 .../static/js/common/formatting.js            |  11 +-
 .../templates/Spoolman_sidebar.jinja2         | 118 +++++++++++-------
 3 files changed, 89 insertions(+), 47 deletions(-)

diff --git a/octoprint_Spoolman/static/css/Spoolman.css b/octoprint_Spoolman/static/css/Spoolman.css
index a0f5e02..5710d44 100644
--- a/octoprint_Spoolman/static/css/Spoolman.css
+++ b/octoprint_Spoolman/static/css/Spoolman.css
@@ -15,6 +15,13 @@
     white-space: pre-wrap;
     overflow-wrap: anywhere;
 }
+.sidebar-spool-info {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+
+    overflow-wrap: anywhere;
+}
 
 .tool-row {
     display: flex;
diff --git a/octoprint_Spoolman/static/js/common/formatting.js b/octoprint_Spoolman/static/js/common/formatting.js
index ec52763..2caa688 100644
--- a/octoprint_Spoolman/static/js/common/formatting.js
+++ b/octoprint_Spoolman/static/js/common/formatting.js
@@ -2,11 +2,12 @@
 /**
  * @param {number} weight
  * @param {{
-*  constants: Record<string, unknown>
+*  constants: Record<string, unknown>;
+*  precision?: number
 * }} params
 */
 const toWeight = (weight, params) => {
-    return `${weight.toFixed(1)}${params.constants['weight_unit']}`;
+    return `${weight.toFixed(params.precision ?? 1)}${params.constants['weight_unit']}`;
 };
 
 /**
@@ -53,6 +54,12 @@ const toSpoolForDisplay = (spool, params) => {
                 ),
             },
         },
+        initial_weight: {
+            displayValue: toWeight((spool.filament.weight ?? 0), {
+                ...params,
+                precision: 0,
+            })
+        },
         used_weight: {
             displayValue: spool.used_weight.toFixed(1),
         },
diff --git a/octoprint_Spoolman/templates/Spoolman_sidebar.jinja2 b/octoprint_Spoolman/templates/Spoolman_sidebar.jinja2
index 6f86cae..8d7ee45 100644
--- a/octoprint_Spoolman/templates/Spoolman_sidebar.jinja2
+++ b/octoprint_Spoolman/templates/Spoolman_sidebar.jinja2
@@ -68,19 +68,26 @@
             <div class="tool-row">
                 <!-- ko ifnot: $data.spoolId && $data.spoolData && $data.spoolDisplayData -->
                     <div style="display: flex;">
-                        <!-- ko if: $parent.templateData.selectedSpoolsByToolIdx().length > 1 -->
-                            <div class="tool-idx" style="margin-right: 0.25em;">
-                                <b>Tool #<span data-bind="text: $index()"></span>:</b>
-                            </div>
-                        <!-- /ko -->
-
-                        <div class="spool-label">
-                            <!-- ko if: $data.spoolId -->
-                                <i class="text-error">Unknown spool selected</i>
-                            <!-- /ko -->
-                            <!-- ko ifnot: $data.spoolId -->
-                                <i class="muted">No spool selected</i>
+                        <div>
+                            <span
+                                class="color-preview"
+                                style="flex-shrink: 0;"
+                            ></span>
+                        </div>
+                        <div class="sidebar-spool-info">
+                            <!-- ko if: $parent.templateData.selectedSpoolsByToolIdx().length > 1 -->
+                                <div>
+                                    <b>Tool #<span data-bind="text: $index()"></span>:</b>
+                                </div>
                             <!-- /ko -->
+                            <div>
+                                <!-- ko if: $data.spoolId -->
+                                    <i class="text-error">Unknown spool selected</i>
+                                <!-- /ko -->
+                                <!-- ko ifnot: $data.spoolId -->
+                                    <i class="muted">No spool selected</i>
+                                <!-- /ko -->
+                            </div>
                         </div>
                     </div>
                     <div style="display: flex; flex-shrink: 0;">
@@ -107,48 +114,69 @@
 
                 <!-- ko if: $data.spoolData && $data.spoolDisplayData -->
                     <div style="display: flex;">
-                        <!-- ko if: $parent.templateData.selectedSpoolsByToolIdx().length > 1 -->
-                            <div class="tool-idx" style="margin-right: 0.25em;">
-                                <b>Tool #<span data-bind="text: $index()"></span>:</b>
-                            </div>
-                        <!-- /ko -->
-
                         <div>
                             <span
                                 class="color-preview"
                                 style="flex-shrink: 0;"
                                 data-bind="
                                     style: { [$data.spoolDisplayData.filament.color.cssProperty]: $data.spoolDisplayData.filament.color.cssValue },
-                                    attr: { title: $data.spoolDisplayData.filament.name.displayValue }
+                                    attr: { title: 'Name: ' + $data.spoolDisplayData.filament.name.displayValue }
                                 "
                             ></span>
                         </div>
-                        <div class="spool-label">
-                            <span>[<span data-bind="
-                                text: $data.spoolDisplayData.filament.material.displayShort,
-                                attr: { title: $data.spoolDisplayData.filament.material.displayValue }
-                            "></span>]</span>
-                            <span data-bind="
-                                text: $data.spoolDisplayData.filament.name.displayValue,
-                                attr: { title: $data.spoolDisplayData.filament.name.displayValue }
-                            "></span>
-                            <i>(<span data-bind="
-                                text: $data.spoolDisplayData.filament.vendor.name.displayValue,
-                                attr: { title: $data.spoolDisplayData.filament.vendor.name.displayValue }
-                            "></span>)</i>
-                            <span><span data-bind="
-                                text: $data.spoolDisplayData.remaining_weight.displayValue,
-                                attr: {title: 'Remaining weight'},
-                                class: ($data.spoolDisplayData.remaining_weight.isValid) ? '' : 'text-error'
-                            "></span></span>
-                            <span data-bind="visible: $parent.templateData.optionalFieldVisibility.spoolID"><span data-bind="
-                                text: $data.spoolId,
-                                attr: { title: 'ID: ' + $data.spoolId }    
-                            "></span></span>
-                            <span data-bind="visible: $parent.templateData.optionalFieldVisibility.lotNumber"><span data-bind="
-                                text: $data.spoolDisplayData.lot.displayShort,
-                                attr: { title: 'Lot #: ' + $data.spoolDisplayData.lot.displayValue }
-                            "></span></span>
+                        <div class="sidebar-spool-info">
+                            <!-- ko if: $parent.templateData.selectedSpoolsByToolIdx().length > 1 -->
+                                <div>
+                                    <b>Tool #<span data-bind="text: $index()"></span>:</b>
+                                </div>
+                            <!-- /ko -->
+                            <div>
+                                <span>[<span data-bind="
+                                    text: $data.spoolDisplayData.filament.material.displayShort,
+                                    attr: { title: 'Material: ' + $data.spoolDisplayData.filament.material.displayValue }
+                                "></span>]</span>
+                                <span data-bind="
+                                    text: $data.spoolDisplayData.filament.name.displayValue,
+                                    attr: { title: 'Name: ' + $data.spoolDisplayData.filament.name.displayValue }
+                                "></span>
+                                <i>(<span data-bind="
+                                    text: $data.spoolDisplayData.filament.vendor.name.displayValue,
+                                    attr: { title: 'Manufacturer: ' + $data.spoolDisplayData.filament.vendor.name.displayValue }
+                                "></span>)</i>
+                            </div>
+                            <div>
+                                <span>
+                                    <span data-bind="
+                                        text: $data.spoolDisplayData.remaining_weight.displayValue,
+                                        attr: {title: 'Remaining weight: ' + $data.spoolDisplayData.remaining_weight.displayValue },
+                                        class: ($data.spoolDisplayData.remaining_weight.isValid) ? '' : 'text-error'
+                                    "></span>
+                                </span>
+                                <span data-bind="visible: $data.spoolDisplayData.remaining_weight.isValid">
+                                    / <span data-bind="
+                                        text: $data.spoolDisplayData.initial_weight.displayValue,
+                                        attr: {title: 'Initial weight: ' + $data.spoolDisplayData.initial_weight.displayValue},
+                                    "></span>
+                                </span>
+                            </div>
+                            <div
+                                class="muted"
+                                data-bind="visible: ($parent.templateData.optionalFieldVisibility.spoolID() || $parent.templateData.optionalFieldVisibility.lotNumber())"
+                            >
+                                <span data-bind="visible: $parent.templateData.optionalFieldVisibility.spoolID">
+                                    <span data-bind="attr: { title: 'ID: ' + $data.spoolId }">
+                                        #<span data-bind="text: $data.spoolId"></span>
+                                    </span>
+                                </span>
+                                <span
+                                    data-bind="visible: ($parent.templateData.optionalFieldVisibility.spoolID() && $parent.templateData.optionalFieldVisibility.lotNumber())"
+                                >|</span>
+                                <span data-bind="visible: $parent.templateData.optionalFieldVisibility.lotNumber">
+                                    <span data-bind="attr: { title: 'Lot #: ' + $data.spoolDisplayData.lot.displayValue }">
+                                        Lot <span data-bind="text: $data.spoolDisplayData.lot.displayShort"></span>
+                                    </span>
+                                </span>
+                            </div>
                         </div>
                     </div>
                     <div style="display: flex; flex-shrink: 0;">