Skip to content

Commit

Permalink
feat: Improve info formatting in the Sidebar (GH-52) (#70)
Browse files Browse the repository at this point in the history 
Signed-off-by: Michał Dziekoński <[email protected]>
  • Loading branch information
@mdziekon
mdziekon authored Oct 24, 2024
1 parent c46f9d5 commit bdc911c
Show file tree
Hide file tree
Showing 3 changed files with 89 additions and 47 deletions.
7 changes: 7 additions & 0 deletions octoprint_Spoolman/static/css/Spoolman.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
11 changes: 9 additions & 2 deletions octoprint_Spoolman/static/js/common/formatting.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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']}`;
};

/**
Expand Down Expand Up @@ -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),
},
Expand Down
118 changes: 73 additions & 45 deletions octoprint_Spoolman/templates/Spoolman_sidebar.jinja2
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;">
Expand All @@ -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;">
Expand Down

0 comments on commit bdc911c

Please sign in to comment.