More information in spool tab and spool selector, progress bar indicator for sidebar

[MrBullet]

changed table names in ui and added remaining length in meters. also changed spool selector's spool names to add remaining length.

only changed 5 files
octoprint_SpoolManager\static\css\SpoolManager.css
octoprint_SpoolManager\static\js\SpoolManager.js
octoprint_SpoolManager\templates\SpoolManager_dialog_selectSpool.jinja2
octoprint_SpoolManager\templates\SpoolManager_sidebar.jinja2
octoprint_SpoolManager\templates\SpoolManager_tab.jinja2
octoprint_SpoolManager\templates\SpoolManager_tab_spoolSelection_comp.jinja2

[WildRikku]

Hey, thanks for your pull request. I am currently on vacation and will review it afterwards.

[MrBullet]

Hey, thanks for your pull request. I am currently on vacation and will review it afterwards.

You're welcome! Enjoy your vacation, and take your time reviewing the pull request. Feel free to reach out if you need any clarifications or adjustments when you're back.

[WildRikku]

I checked out your pull request and I like the idea of displaying more information. I also appreciate the change to meters. However, in the spool tab, the column "Remaining" is now no longer consistent: It shows the total and the remaining weight, but its title is "Remaining".

I would suggest adding a "Total" column instead which would show total weight and length. The total weight would then be removed from the "Remaining" column and could be replaced by the remaining percentage.

This would result in consistent columns:

• "Total": Total weight and length
• "Remaining": Remaining percentage, weight and length
• "Used": Used percentage, weight and length

[penguintamer]

What if the Remaining column is formatted as remaining / total?

Suggested change

	<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: remainingWeight, attr: {title: $root.buildTooltipForSpoolItem($data, 'Remaining weight: ', 'remainingWeight')}"></span>g /
	<span data-bind="text: totalWeight, attr: {title: $root.buildTooltipForSpoolItem($data, 'Total weight: ', 'totalWeight')}"></span>g<br/>