From 7ae34ae0bc7701cc25ac432261a394738a2d3b3b Mon Sep 17 00:00:00 2001
From: MrBullet <sincarerkan@gmail.com>
Date: Fri, 20 Dec 2024 18:08:31 +0300
Subject: [PATCH 1/3] added remaining length section to ui

changed table names in ui and added remaining length in meters.
also changed spool selector's spool names.
---
 .../static/js/SpoolManager.js                 |  4 +++-
 .../SpoolManager_dialog_selectSpool.jinja2    |  9 ++++-----
 .../templates/SpoolManager_sidebar.jinja2     |  4 ++--
 .../templates/SpoolManager_tab.jinja2         | 20 +++++++++++--------
 ...poolManager_tab_spoolSelection_comp.jinja2 |  4 ++--
 5 files changed, 23 insertions(+), 18 deletions(-)

diff --git a/octoprint_SpoolManager/static/js/SpoolManager.js b/octoprint_SpoolManager/static/js/SpoolManager.js
index 5af4189..5fb165b 100644
--- a/octoprint_SpoolManager/static/js/SpoolManager.js
+++ b/octoprint_SpoolManager/static/js/SpoolManager.js
@@ -560,7 +560,9 @@ $(function() {
         }
 
         self.remainingText = function(spoolItem){
-            var remainingInfo = "("+_buildRemainingText(spoolItem) + ")";
+            var remainingWeight = _buildRemainingText(spoolItem);
+            var remainingLength = (Number(self.buildTooltipForSpoolItem(spoolItem, '', 'remainingLength'))/1000).toFixed(2);
+            var remainingInfo = "(" + remainingWeight + ", " + remainingLength + "m)";
             return remainingInfo;
         }
 
diff --git a/octoprint_SpoolManager/templates/SpoolManager_dialog_selectSpool.jinja2 b/octoprint_SpoolManager/templates/SpoolManager_dialog_selectSpool.jinja2
index 83ac29f..b0b2e57 100644
--- a/octoprint_SpoolManager/templates/SpoolManager_dialog_selectSpool.jinja2
+++ b/octoprint_SpoolManager/templates/SpoolManager_dialog_selectSpool.jinja2
@@ -20,9 +20,8 @@
                         <!-- ko if: sidebarSelectSpoolModalSpoolItem().vendor -->
                         (<span data-bind="text: sidebarSelectSpoolModalSpoolItem().vendor"></span>)
                         <!-- /ko -->
-                        <span data-bind="text: $root.remainingText(sidebarSelectSpoolModalSpoolItem()),
-                                         attr: {title: $root.buildTooltipForSpoolItem(sidebarSelectSpoolModalSpoolItem(), 'Remaining weight: ', 'remainingWeight')}"
-                              class="spool-remaining" title="Remaining weight"></span>
+                        <span data-bind="text: $root.remainingText(sidebarSelectSpoolModalSpoolItem())"
+                              class="spool-remaining" title="Remaining weight and length"></span>
                     </span>
                 <!-- /ko -->
                 <!-- ko ifnot: sidebarSelectSpoolModalSpoolItem() -->
@@ -166,8 +165,8 @@
 {#                            <!-- ko if: vendor -->#}
 {#                            (<span data-bind="text: vendor"></span>)#}
 {#                            <!-- /ko -->#}
-{#                            <span data-bind="text: $root.remainingText($data), attr: {title: $root.buildTooltipForSpoolItem($data, 'Remaining weight: ', 'remainingWeight')}"#}
-{#                                  class="spool-remaining" title="Remaining weight"></span>#}
+{#                            <span data-bind="text: $root.remainingText($data)"#}
+{#                                  class="spool-remaining" title="Remaining weight and length"></span>#}
 {#                            <!-- ko if: lastUse || firstUse-->#}
 {#                            (Last/First-Use <span data-bind="text: lastUse"></span> / <span data-bind="text: firstUse"></span>)#}
 {#                            <!-- /ko -->#}
diff --git a/octoprint_SpoolManager/templates/SpoolManager_sidebar.jinja2 b/octoprint_SpoolManager/templates/SpoolManager_sidebar.jinja2
index b068d01..5ae2c69 100644
--- a/octoprint_SpoolManager/templates/SpoolManager_sidebar.jinja2
+++ b/octoprint_SpoolManager/templates/SpoolManager_sidebar.jinja2
@@ -32,8 +32,8 @@
                 <!-- ko if: vendor -->
                 (<span data-bind="text: vendor"></span>)
                 <!-- /ko -->
-                <span data-bind="text: $root.remainingText($data), attr: {title: $root.buildTooltipForSpoolItem($data, 'Remaining weight: ', 'remainingWeight')}"
-                      class="spool-remaining" title="Remaining weight"></span>
+                <span data-bind="text: $root.remainingText($data)"
+                      class="spool-remaining" title="Remaining weight and length"></span>
             </div>
             <div>
                 <div class="btn-group">
diff --git a/octoprint_SpoolManager/templates/SpoolManager_tab.jinja2 b/octoprint_SpoolManager/templates/SpoolManager_tab.jinja2
index b4f8485..8a9f140 100644
--- a/octoprint_SpoolManager/templates/SpoolManager_tab.jinja2
+++ b/octoprint_SpoolManager/templates/SpoolManager_tab.jinja2
@@ -139,7 +139,7 @@
         Name
         Material
         Last/First Ise
-        Weight
+        Remaining
         Used
         Note
         -->
@@ -200,7 +200,7 @@
                             <div class="control-group">
                                 <div class="controls">
                                     <label class="checkbox" style="margin-left:10px">
-                                        <input type="checkbox" data-bind="checked: tableAttributeVisibility.weight"> Weight
+                                        <input type="checkbox" data-bind="checked: tableAttributeVisibility.weight"> Remaining
                                     </label>
                                 </div>
                             </div>
@@ -243,7 +243,7 @@
                     <th style="width: 23%" data-bind="visible: tableAttributeVisibility.displayName">Name</th>
                     <th style="width: 15%" data-bind="visible: tableAttributeVisibility.material">Material</th>
                     <th style="width: 12%;" data-bind="visible: tableAttributeVisibility.lastFirstUse">Last / First use</th>
-                    <th style="text-align: center; width: 15%;" data-bind="visible: tableAttributeVisibility.weight">Weight</th>
+                    <th style="text-align: center; width: 15%;" data-bind="visible: tableAttributeVisibility.weight">Remaining</th>
                     <th style="text-align: center; width: 15%;" data-bind="visible: tableAttributeVisibility.used">Used</th>
                     <th style="width: 15%;" data-bind="visible: tableAttributeVisibility.note">Note</th>
     <!-- TODO remove action column                <th style="width: 9%"></th>
@@ -259,12 +259,16 @@
                         <span style="vertical-align:super" data-bind="text: material"></span>
                     </div></td>
                 <td data-bind="visible: $root.tableAttributeVisibility.lastFirstUse"><span data-bind="text: formatOnlyDate($data, 'lastUse')"></span><br><span data-bind="text: formatOnlyDate($data, 'firstUse')"></span></td>
-                <td data-bind="visible: $root.tableAttributeVisibility.weight" style="text-align: right;"><span data-bind="text: totalWeight, attr: {title: $root.buildTooltipForSpoolItem($data, 'Total weight: ', 'totalWeight')}"></span>g<br/>
-{#                                                                                           <span data-bind="text: usedWeight, attr: {title: $root.buildTooltipForSpoolItem($data, 'Used weight: ', 'usedWeight')}"></span>g<br/>#}
-                                                                                           <span data-bind="text: remainingWeight, attr: {title: $root.buildTooltipForSpoolItem($data, 'Remaining weight: ', 'remainingWeight')}"></span>g<br>
+                <td data-bind="visible: $root.tableAttributeVisibility.weight" style="text-align: right;">
+                    <span data-bind="text: totalWeight, attr: {title: $root.buildTooltipForSpoolItem($data, 'Total weight: ', 'totalWeight')}"></span>g<br/>
+                    <span data-bind="text: remainingWeight, attr: {title: $root.buildTooltipForSpoolItem($data, 'Remaining weight: ', 'remainingWeight')}"></span>g<br>
+                    <span data-bind="text: (Number($root.buildTooltipForSpoolItem($data, '', 'remainingLength'))/1000).toFixed(2), attr: {title: $root.buildTooltipForSpoolItem($data, 'Remaining length: ', 'remainingLength')}"></span>m<br>
+                </td>
+                <td data-bind="visible: $root.tableAttributeVisibility.used" style="text-align: right;">
+                    <span data-bind="text: usedPercentage, attr: {title: $root.buildTooltipForSpoolItem($data, 'Used: ', 'usedPercentage')}"></span>%<br>
+                    <span data-bind="text: usedWeight, attr: {title: $root.buildTooltipForSpoolItem($data, 'Used weight: ', 'usedWeight')}"></span>g<br/>
+                    <span data-bind="text: (Number($root.buildTooltipForSpoolItem($data, '', 'usedLength'))/1000).toFixed(2), attr: {title: $root.buildTooltipForSpoolItem($data, 'Used length: ', 'usedLength')}"></span>m
                 </td>
-                <td data-bind="visible: $root.tableAttributeVisibility.used" style="text-align: right;"><span data-bind="text: usedPercentage, attr: {title: $root.buildTooltipForSpoolItem($data, 'Used weight: ', 'usedPercentage')}"></span>%<br>
-                                                                                                        <span data-bind="text: usedLength, attr: {title: $root.buildTooltipForSpoolItem($data, 'Used length: ', 'usedLength')}"></span>mm</td>
                 <td data-bind="visible: $root.tableAttributeVisibility.note"><span data-bind="html: noteHtml, attr: { title: noteText }"></span></td>
               </tr>
             </tbody>
diff --git a/octoprint_SpoolManager/templates/SpoolManager_tab_spoolSelection_comp.jinja2 b/octoprint_SpoolManager/templates/SpoolManager_tab_spoolSelection_comp.jinja2
index 075e141..11976ff 100644
--- a/octoprint_SpoolManager/templates/SpoolManager_tab_spoolSelection_comp.jinja2
+++ b/octoprint_SpoolManager/templates/SpoolManager_tab_spoolSelection_comp.jinja2
@@ -153,8 +153,8 @@ File includes all Templates that are needed for custom Knockout.js components, s
                             <!-- ko if: vendor -->
                             (<span data-bind="text: vendor"></span>)
                             <!-- /ko -->
-                            <span data-bind="text: $root.remainingText($data), attr: {title: $root.buildTooltipForSpoolItem($data, 'Remaining weight: ', 'remainingWeight')}"
-                                  class="spool-remaining" title="Remaining weight"></span>
+                            <span data-bind="text: $root.remainingText($data)"
+                                  class="spool-remaining" title="Remaining weight and length"></span>
                             <!-- ko if: lastUse || firstUse-->
                             (Last/First-Use <span data-bind="text: lastUse"></span> / <span data-bind="text: firstUse"></span>)
                             <!-- /ko -->

From 737c19f36139503851a992ee49dfa6cd5a1929ac Mon Sep 17 00:00:00 2001
From: MrBullet <sincarerkan@gmail.com>
Date: Fri, 20 Dec 2024 19:56:42 +0300
Subject: [PATCH 2/3] edited tooltip

added tooltip in sidebar to see remaining length in mm
---
 .../static/js/SpoolManager.js                   | 17 ++++++++++++-----
 .../SpoolManager_dialog_selectSpool.jinja2      |  6 ++----
 .../templates/SpoolManager_sidebar.jinja2       |  3 +--
 .../SpoolManager_tab_spoolSelection_comp.jinja2 |  3 +--
 4 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/octoprint_SpoolManager/static/js/SpoolManager.js b/octoprint_SpoolManager/static/js/SpoolManager.js
index 5fb165b..23ce6e6 100644
--- a/octoprint_SpoolManager/static/js/SpoolManager.js
+++ b/octoprint_SpoolManager/static/js/SpoolManager.js
@@ -566,13 +566,20 @@ $(function() {
             return remainingInfo;
         }
 
-        self.buildTooltipForSpoolItem = function(spoolItem, textPrefix, attribute){
-            var value = "";
+        self.buildTooltipForSpoolItem = function(spoolItem, textPrefix, attribute, unit, textPrefix2, attribute2, unit2){
+            var tooltip = "";
+            
+            // İlk özellik için tooltip
             if (spoolItem[attribute]() != null){
-                value = spoolItem[attribute]();
+                tooltip = textPrefix + spoolItem[attribute]() + (unit || "");
             }
-            var toolTip = textPrefix + value;
-            return toolTip;
+            
+            // İkinci özellik varsa ekle
+            if (attribute2 && spoolItem[attribute2]() != null){
+                tooltip += (tooltip ? ", " : "") + textPrefix2 + spoolItem[attribute2]() + (unit2 || "");
+            }
+            
+            return tooltip;
         }
 
         self.getSpoolItemSelectedTool = function(databaseId) {
diff --git a/octoprint_SpoolManager/templates/SpoolManager_dialog_selectSpool.jinja2 b/octoprint_SpoolManager/templates/SpoolManager_dialog_selectSpool.jinja2
index b0b2e57..93f0a56 100644
--- a/octoprint_SpoolManager/templates/SpoolManager_dialog_selectSpool.jinja2
+++ b/octoprint_SpoolManager/templates/SpoolManager_dialog_selectSpool.jinja2
@@ -20,8 +20,7 @@
                         <!-- ko if: sidebarSelectSpoolModalSpoolItem().vendor -->
                         (<span data-bind="text: sidebarSelectSpoolModalSpoolItem().vendor"></span>)
                         <!-- /ko -->
-                        <span data-bind="text: $root.remainingText(sidebarSelectSpoolModalSpoolItem())"
-                              class="spool-remaining" title="Remaining weight and length"></span>
+                        <span data-bind="text: $root.remainingText(sidebarSelectSpoolModalSpoolItem()), attr: {title: $root.buildTooltipForSpoolItem(sidebarSelectSpoolModalSpoolItem(), 'Remaining weight: ', 'remainingWeight', 'g', ' Remaining length: ', 'remainingLength', 'mm')}" class="spool-remaining" title="Remaining weight and length"></span>
                     </span>
                 <!-- /ko -->
                 <!-- ko ifnot: sidebarSelectSpoolModalSpoolItem() -->
@@ -165,8 +164,7 @@
 {#                            <!-- ko if: vendor -->#}
 {#                            (<span data-bind="text: vendor"></span>)#}
 {#                            <!-- /ko -->#}
-{#                            <span data-bind="text: $root.remainingText($data)"#}
-{#                                  class="spool-remaining" title="Remaining weight and length"></span>#}
+{#                            <span data-bind="text: $root.remainingText($data), attr: {title: $root.buildTooltipForSpoolItem($data, 'Remaining weight: ', 'remainingWeight', 'g', ' Remaining length: ', 'remainingLength', 'mm')}" class="spool-remaining" title="Remaining weight and length"></span>#}
 {#                            <!-- ko if: lastUse || firstUse-->#}
 {#                            (Last/First-Use <span data-bind="text: lastUse"></span> / <span data-bind="text: firstUse"></span>)#}
 {#                            <!-- /ko -->#}
diff --git a/octoprint_SpoolManager/templates/SpoolManager_sidebar.jinja2 b/octoprint_SpoolManager/templates/SpoolManager_sidebar.jinja2
index 5ae2c69..a2b02a0 100644
--- a/octoprint_SpoolManager/templates/SpoolManager_sidebar.jinja2
+++ b/octoprint_SpoolManager/templates/SpoolManager_sidebar.jinja2
@@ -32,8 +32,7 @@
                 <!-- ko if: vendor -->
                 (<span data-bind="text: vendor"></span>)
                 <!-- /ko -->
-                <span data-bind="text: $root.remainingText($data)"
-                      class="spool-remaining" title="Remaining weight and length"></span>
+                <span data-bind="text: $root.remainingText($data), attr: {title: $root.buildTooltipForSpoolItem($data, 'Remaining weight: ', 'remainingWeight', 'g', ' Remaining length: ', 'remainingLength', 'mm')}" class="spool-remaining" title="Remaining weight and length"></span>
             </div>
             <div>
                 <div class="btn-group">
diff --git a/octoprint_SpoolManager/templates/SpoolManager_tab_spoolSelection_comp.jinja2 b/octoprint_SpoolManager/templates/SpoolManager_tab_spoolSelection_comp.jinja2
index 11976ff..d4d6c4d 100644
--- a/octoprint_SpoolManager/templates/SpoolManager_tab_spoolSelection_comp.jinja2
+++ b/octoprint_SpoolManager/templates/SpoolManager_tab_spoolSelection_comp.jinja2
@@ -153,8 +153,7 @@ File includes all Templates that are needed for custom Knockout.js components, s
                             <!-- ko if: vendor -->
                             (<span data-bind="text: vendor"></span>)
                             <!-- /ko -->
-                            <span data-bind="text: $root.remainingText($data)"
-                                  class="spool-remaining" title="Remaining weight and length"></span>
+                            <span data-bind="text: $root.remainingText($data), attr: {title: $root.buildTooltipForSpoolItem($data, 'Remaining weight: ', 'remainingWeight', 'g', ' Remaining length: ', 'remainingLength', 'mm')}"  class="spool-remaining" title="Remaining weight and length"></span>
                             <!-- ko if: lastUse || firstUse-->
                             (Last/First-Use <span data-bind="text: lastUse"></span> / <span data-bind="text: firstUse"></span>)
                             <!-- /ko -->

From 3d7caa816ab76d9f77b8e0dc1a5d1ce21286a03d Mon Sep 17 00:00:00 2001
From: MrBullet <sincarerkan@gmail.com>
Date: Sat, 21 Dec 2024 14:47:09 +0300
Subject: [PATCH 3/3] added progress bar to sidebar

%20-%100 blue
%0-%20 red remaining filament bar
---
 .../static/css/SpoolManager.css               | 32 ++++++++++++++++++-
 .../static/js/SpoolManager.js                 | 15 +++++++++
 .../templates/SpoolManager_sidebar.jinja2     |  7 +++-
 3 files changed, 52 insertions(+), 2 deletions(-)

diff --git a/octoprint_SpoolManager/static/css/SpoolManager.css b/octoprint_SpoolManager/static/css/SpoolManager.css
index b894f37..8ede284 100644
--- a/octoprint_SpoolManager/static/css/SpoolManager.css
+++ b/octoprint_SpoolManager/static/css/SpoolManager.css
@@ -1,4 +1,3 @@
-
 /* Small line on top of a div-box */
 .custom-divider {
     border-top: solid 1px;
@@ -184,3 +183,34 @@
 /*#checkboxes label:hover {*/
 /*  background-color: #1e90ff;*/
 /*}*/
+
+/* Spool remaining bar styles */
+.spool-remaining-container {
+    margin-top: 5px;
+    width: 100%;
+}
+
+.spool-remaining-text {
+    font-size: 12px;
+    color: #666;
+    margin-bottom: 2px;
+}
+
+.spool-remaining-bar-container {
+    width: 100%;
+    height: 4px;
+    background-color: #eee;
+    border-radius: 2px;
+    overflow: hidden;
+}
+
+.spool-remaining-bar {
+    height: 100%;
+    background-color: #2196F3;
+    transition: width 0.3s ease;
+}
+
+/* Düşük miktar için kırmızı renk */
+.spool-remaining-bar.low-amount {
+    background-color: #f44336;
+}
diff --git a/octoprint_SpoolManager/static/js/SpoolManager.js b/octoprint_SpoolManager/static/js/SpoolManager.js
index 23ce6e6..d140c39 100644
--- a/octoprint_SpoolManager/static/js/SpoolManager.js
+++ b/octoprint_SpoolManager/static/js/SpoolManager.js
@@ -1197,6 +1197,21 @@ $(function() {
             //}
         }
 
+        self.calculateRemainingPercentage = function(spoolItem) {
+            if (!spoolItem.remainingLength() || !spoolItem.totalLength()) {
+                return {
+                    width: 0,
+                    isLow: true
+                };
+            }
+            var percentage = (Number(spoolItem.remainingLength()) / Number(spoolItem.totalLength())) * 100;
+            percentage = Math.min(Math.max(percentage, 0), 100);
+            return {
+                width: percentage,
+                isLow: percentage < 20
+            };
+        };
+
     }
 
     /* view model class, parameters for constructor, container to bind to
diff --git a/octoprint_SpoolManager/templates/SpoolManager_sidebar.jinja2 b/octoprint_SpoolManager/templates/SpoolManager_sidebar.jinja2
index a2b02a0..57ba555 100644
--- a/octoprint_SpoolManager/templates/SpoolManager_sidebar.jinja2
+++ b/octoprint_SpoolManager/templates/SpoolManager_sidebar.jinja2
@@ -32,7 +32,12 @@
                 <!-- ko if: vendor -->
                 (<span data-bind="text: vendor"></span>)
                 <!-- /ko -->
-                <span data-bind="text: $root.remainingText($data), attr: {title: $root.buildTooltipForSpoolItem($data, 'Remaining weight: ', 'remainingWeight', 'g', ' Remaining length: ', 'remainingLength', 'mm')}" class="spool-remaining" title="Remaining weight and length"></span>
+                <div class="spool-remaining-container">
+                    <div class="spool-remaining-text" data-bind="text: $root.remainingText($data), attr: {title: $root.buildTooltipForSpoolItem($data, 'Remaining weight: ', 'remainingWeight', 'g', ' Remaining length: ', 'remainingLength', 'mm')}"></div>
+                    <div class="spool-remaining-bar-container">
+                        <div class="spool-remaining-bar" data-bind="style: { width: $root.calculateRemainingPercentage($data).width + '%' }, css: { 'low-amount': $root.calculateRemainingPercentage($data).isLow }"></div>
+                    </div>
+                </div>
             </div>
             <div>
                 <div class="btn-group">