Added toggle for part details

Added persistence for page refresh or new part page
This commit is contained in:
eeintech 2021-07-30 14:55:12 -04:00
parent 20b21a2b71
commit 634e5e0da6

View File

@ -210,14 +210,34 @@
</div>
</div>
<!-- Table -->
<p>
<!-- Details show/hide button -->
<button id="toggle-part-details" class="btn btn-primary" data-toggle="collapse" data-target="#collapsible-part-details" value="show">
</button>
</p>
<div class="collapse" id="collapsible-part-details">
<div class="card card-body">
<!-- Details Table -->
<table class="table table-striped">
<col width='25'>
{% if part.description %}
{% if part.IPN %}
<tr>
<td><span class='fas fa-tag'></span></td>
<td>{% trans "IPN" %}</td>
<td>{{ part.IPN }}{% include "clip.html"%}</td>
</tr>
{% endif %}
<tr>
<td><span class='fas fa-shapes'></span></td>
<td>{% trans "Name" %}</td>
<td>{{ part.name }}{% include "clip.html"%}</td>
</tr>
<tr>
<td><span class='fas fa-info-circle'></span></td>
<td>{% trans "Description" %}</td>
<td>{{ part.description }}{% include "clip.html"%}</td>
{% endif %}
</tr>
{% if part.revision %}
<tr>
<td><span class='fas fa-code-branch'></span></td>
@ -272,6 +292,10 @@
{% endif %}
</table>
</div>
</div>
</div>
{% block page_content %}
{% endblock %}
@ -478,4 +502,42 @@
});
{% endif %}
$("#toggle-part-details").click(function() {
if (this.value == 'show') {
this.innerHTML = '<span class="fas fa-chevron-up"></span> {% trans "Hide Part Details" %}';
this.value = 'hide';
// Store state of part details section
localStorage.setItem("part-details-show", true);
} else {
this.innerHTML = '<span class="fas fa-chevron-down"></span> {% trans "Show Part Details" %}';
this.value = 'show';
// Store state of part details section
localStorage.setItem("part-details-show", false);
}
});
// Load part details section
window.onload = function() {
details_show = localStorage.getItem("part-details-show")
if (details_show === 'true') {
console.log(details_show)
// Get collapsible details section
details = document.getElementById('collapsible-part-details');
// Add "show" class
details.classList.add("in");
// Get toggle
toggle = document.getElementById('toggle-part-details');
// Change state of toggle
toggle.innerHTML = '<span class="fas fa-chevron-up"></span> {% trans "Hide Part Details" %}';
toggle.value = 'hide';
} else {
// Get toggle
toggle = document.getElementById('toggle-part-details');
// Change state of toggle
toggle.innerHTML = '<span class="fas fa-chevron-down"></span> {% trans "Show Part Details" %}';
toggle.value = 'show';
}
}
{% endblock %}