Skip to content

Commit

Permalink
GH-38 | Lazy loaded spools spinner (#42)
Browse files Browse the repository at this point in the history 
* GH-38 | Improve overall layout of Spool selector

* GH-38 | Add spinner to the Select spool modal

* GH-38 | Display a message when no spools are to be shown

* GH-38 | When loading spools, set the loading flag
  • Loading branch information
@mdziekon
mdziekon authored Jul 15, 2023
1 parent b709b7e commit 78090af
Show file tree
Hide file tree
Showing 5 changed files with 117 additions and 82 deletions.
1 change: 1 addition & 0 deletions octoprint_SpoolManager/static/js/SpoolManager-SpoolSelectionTableComp.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,7 @@ function SpoolSelectionTableComp() {
self.allColors = params.allColorsKOArray;

self.selectSpoolFunction = params.selectSpoolFunction;
self.isLoadingSpoolsSelectorData = params.isLoadingSpoolsSelectorData;

////////////////////////////////////////////////////////////////////// internal field variables

Expand Down
13 changes: 12 additions & 1 deletion octoprint_SpoolManager/static/js/SpoolManager.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,8 @@ $(function() {

let hasInitializedSpoolsSelector = false;

self.isLoadingSpoolsSelectorData = ko.observable(false);

//////////////////////////////////////////////////////////////////////////////////////////////// HELPER FUNCTION
const handleSpoolDialogClose = (params) => {
const {
Expand Down Expand Up @@ -539,7 +541,7 @@ $(function() {
self.selectSpoolForSidebar(toolIndex, null);
}

const loadSpoolSelectorData = async function () {
const _loadSpoolSelectorDataCore = async function () {
const fetchSpoolsQueryParams = {
filterName: "all",
from: 0,
Expand Down Expand Up @@ -574,6 +576,15 @@ $(function() {
});
self.allSpoolsForSidebar(allSpoolItems);
};
const loadSpoolSelectorData = async function () {
self.isLoadingSpoolsSelectorData(true);

const result = await _loadSpoolSelectorDataCore();

self.isLoadingSpoolsSelectorData(false);

return result;
};

const updateAvailableSpoolSlots = () => {
const currentProfileData = self.settingsViewModel.printerProfiles.currentProfileData();
Expand Down
3 changes: 2 additions & 1 deletion octoprint_SpoolManager/templates/SpoolManager_dialog_editSpool.jinja2
View file
Original file line number Diff line number Diff line change
Expand Up @@ -601,7 +601,8 @@
allMaterialsKOArray: spoolDialog.allMaterials,
allVendorsKOArray: spoolDialog.allVendors,
allColorsKOArray: spoolDialog.allColors,
selectSpoolFunction: spoolDialog.copySpoolItemFromTemplate
selectSpoolFunction: spoolDialog.copySpoolItemFromTemplate,
isLoadingSpoolsSelectorData: ko.observable(false)
"></spm-select-spool-table>
</div>
<div class="modal-footer">
Expand Down
5 changes: 3 additions & 2 deletions octoprint_SpoolManager/templates/SpoolManager_dialog_selectSpool.jinja2
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,13 +30,14 @@
<!-- /ko -->

</div>
<hr/>
<hr style="margin: 10px 0;"/>

<spm-select-spool-table params="allSpoolsKOArray: allSpoolsForSidebar,
allMaterialsKOArray: spoolDialog.allMaterials,
allVendorsKOArray: spoolDialog.allVendors,
allColorsKOArray: spoolDialog.allColors,
selectSpoolFunction: sidebarSelectSpoolFromDialog
selectSpoolFunction: sidebarSelectSpoolFromDialog,
isLoadingSpoolsSelectorData: isLoadingSpoolsSelectorData
"></spm-select-spool-table>
</div>
</div>
Expand Down
177 changes: 99 additions & 78 deletions octoprint_SpoolManager/templates/SpoolManager_tab_spoolSelection_comp.jinja2
View file
Original file line number Diff line number Diff line change
@@ -1,30 +1,36 @@
<span id="spm-select-spool-table" style="display: none">
<div>
<span class="filter pull-left">
<div style="display: flex; justify-content: space-between;">
<div class="filter">
<div style="margin-top:5px; margin-right:40px" class="pull-right search-query-with-clear active-clear" data-bind="css: {'active-clear': filterSelectionQuery}">
<input type="search" class="input-block search-query" data-bind="value: filterSelectionQuery, valueUpdate: 'input'" placeholder="Filter...">
<span class="search-clear" data-bind="click: clearFilterSelectionQuery"><i class="fas fa-times"></i></span>
</div>
</span>
<span >
</div>
<div>
<div>
<label class="checkbox">
<input style="vertical-align:baseline" type="checkbox"
data-bind="checked: hideEmptySpools">
<input
style="vertical-align: baseline"
type="checkbox"
data-bind="checked: hideEmptySpools"
/>
Hide empty spools
</label>
</div>
<div >
<label class="checkbox">
<input style="vertical-align:baseline" type="checkbox"
data-bind="checked: hideInActiveSpools">
<input
style="vertical-align: baseline"
type="checkbox"
data-bind="checked: hideInActiveSpools"
/>
Hide inactive spools
</label>
</div>
</span>
</div>
</div>
<div>
<span class="pull-left">
<div style="display: flex; justify-content: space-between;">
<div>
<small>
Sort by:
<a href="#" data-bind="click: function() { sortSpoolArray('displayName'); }">Name <span data-bind="visible: currentSortField()=='displayName'">(<span data-bind="text: currentSortOder"></span>)</span></a> |
Expand All @@ -33,93 +39,108 @@
<a href="#" data-bind="click: function() { sortSpoolArray('remaining'); }">Remaining <span data-bind="visible: currentSortField()=='remaining'">(<span data-bind="text: currentSortOder"></span>)</span></a> |
<a href="#" data-bind="click: function() { sortSpoolArray('material'); }">Material <span data-bind="visible: currentSortField()=='material'">(<span data-bind="text: currentSortOder"></span>)</span></a>
</small>
</span>
<span class="pull-right">
<small>
Show/Total: <b><span data-bind="text: totalShown"></span> / <span data-bind="text: allSpools().length"></span></b>
</small>
</span>
</div>
</div>

<div class="pull-left">
<small>
Filter:
{# Material - Filter #}
<span class="dropdown tabdrop">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">Material (<span data-bind="text: buildFilterLabel('material')" ></span>)
<b class="caret"></b></a>
<ul class="dropdown-menu keep-open pre-scrollable" style="padding-left:10px" >
<li>
<div class="checkbox">
<label>
<input type="checkbox" data-bind="checked:showAllMaterialsForFilter , click:doFilterSelectAll($data, 'material')"><i>select/deselect all</i>
</label>
</div>
</li>
<span data-bind="foreach: allMaterials">
<li data-bind="visible: $data != ''">
<div style="display: flex; justify-content: space-between;">
<div>
<small>
Filter:
{# Material - Filter #}
<span class="dropdown tabdrop">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">Material (<span data-bind="text: buildFilterLabel('material')" ></span>)
<b class="caret"></b></a>
<ul class="dropdown-menu keep-open pre-scrollable" style="padding-left:10px" >
<li>
<div class="checkbox">
<label>
<input type="checkbox" data-bind="checkedValue: $data, checked: $parent.selectedMaterialsForFilter"><span data-bind="text: $data"></span>
<input type="checkbox" data-bind="checked:showAllMaterialsForFilter , click:doFilterSelectAll($data, 'material')"><i>select/deselect all</i>
</label>
</div>
</li>
</span>
</ul>
</span>
{# Vendor - Filter #}
<span class="dropdown tabdrop">
| <a href="#" data-toggle="dropdown" class="dropdown-toggle">Vendor (<span data-bind="text: buildFilterLabel('vendor')" ></span>)
<b class="caret"></b></a>
<ul class="dropdown-menu keep-open pre-scrollable" style="padding-left:10px" >
<li>
<div class="checkbox">
<label>
<input type="checkbox" data-bind="checked:showAllVendorsForFilter , click:doFilterSelectAll($data, 'vendor')"><i>select/deselect all</i>
</label>
</div>
</li>
<span data-bind="foreach: allVendors">
<li data-bind="visible: $data != ''">
<span data-bind="foreach: allMaterials">
<li data-bind="visible: $data != ''">
<div class="checkbox">
<label>
<input type="checkbox" data-bind="checkedValue: $data, checked: $parent.selectedMaterialsForFilter"><span data-bind="text: $data"></span>
</label>
</div>
</li>
</span>
</ul>
</span>
{# Vendor - Filter #}
<span class="dropdown tabdrop">
| <a href="#" data-toggle="dropdown" class="dropdown-toggle">Vendor (<span data-bind="text: buildFilterLabel('vendor')" ></span>)
<b class="caret"></b></a>
<ul class="dropdown-menu keep-open pre-scrollable" style="padding-left:10px" >
<li>
<div class="checkbox">
<label>
<input type="checkbox" data-bind="checkedValue: $data, checked: $parent.selectedVendorsForFilter"><span data-bind="text: $data"></span>
<input type="checkbox" data-bind="checked:showAllVendorsForFilter , click:doFilterSelectAll($data, 'vendor')"><i>select/deselect all</i>
</label>
</div>
</li>
</span>
</ul>
</span>
{# Color - Filter #}
<span class="dropdown tabdrop">
| <a href="#" data-toggle="dropdown" class="dropdown-toggle">Color (<span data-bind="text: buildFilterLabel('color')" ></span>)
<b class="caret"></b></a>

<ul class="dropdown-menu keep-open pre-scrollable" style="padding-left:10px" >
<li>
<div class="checkbox">
<label>
<input type="checkbox" data-bind="checked:showAllColorsForFilter , click:doFilterSelectAll($data, 'color')"><i>select/deselect all</i>
</label>
</div>
</li>
<span data-bind="foreach: allVendors">
<li data-bind="visible: $data != ''">
<div class="checkbox">
<label>
<input type="checkbox" data-bind="checkedValue: $data, checked: $parent.selectedVendorsForFilter"><span data-bind="text: $data"></span>
</label>
</div>
</li>
</span>
</ul>
</span>
{# Color - Filter #}
<span class="dropdown tabdrop">
| <a href="#" data-toggle="dropdown" class="dropdown-toggle">Color (<span data-bind="text: buildFilterLabel('color')" ></span>)
<b class="caret"></b></a>

<span data-bind="foreach: allColors">
<li data-bind="visible: $data.colorCode != ''">
<ul class="dropdown-menu keep-open pre-scrollable" style="padding-left:10px" >
<li>
<div class="checkbox">
<label>
<input type="checkbox" data-bind="checkedValue: $data.colorId, checked: $parent.selectedColorsForFilter"></input><span class="color-preview" data-bind="style: {'background-color': $data.color}, attr: { title: $data.colorName }" ></span><span data-bind="text: $data.colorName"></span>
<input type="checkbox" data-bind="checked:showAllColorsForFilter , click:doFilterSelectAll($data, 'color')"><i>select/deselect all</i>
</label>
</div>
</li>
</span>
</ul>
</span>
</small>

<span data-bind="foreach: allColors">
<li data-bind="visible: $data.colorCode != ''">
<div class="checkbox">
<label>
<input type="checkbox" data-bind="checkedValue: $data.colorId, checked: $parent.selectedColorsForFilter"></input><span class="color-preview" data-bind="style: {'background-color': $data.color}, attr: { title: $data.colorName }" ></span><span data-bind="text: $data.colorName"></span>
</label>
</div>
</li>
</span>
</ul>
</span>
</small>
</div>
<div>
<small>
Shown / Total: <b><span data-bind="text: totalShown"></span> / <span data-bind="text: allSpools().length"></span></b>
</small>
</div>
</div>
{# Spool Table #}

<hr style="margin: 10px 0;"/>

<div>
<table class="table table-hover table-bordered">
<div data-bind="visible: isLoadingSpoolsSelectorData" style="margin: 16px; text-align: center;">
<i class='fa fa-2xl fa-spinner fa-spin' ></i>
</div>

<div data-bind="visible: !isLoadingSpoolsSelectorData() && allSpools().length == 0" style="margin: 16px; text-align: center;">
<small class="muted">No spools to display...</small>
</div>

<table
data-bind="visible: !isLoadingSpoolsSelectorData() && allSpools().length > 0"
class="table table-hover table-bordered"
>
<tbody data-bind="foreach: allSpools">
<tr class="entry clickable" data-bind="click: $parent.selectSpoolFunction.bind($data),
visible: isFilteredForSelection() == false">
Expand Down

0 comments on commit 78090af

Please sign in to comment.