mirror of
https://github.com/inventree/InvenTree
synced 2024-08-30 18:33:04 +00:00
Refactored index page
- Looks MUCH nicer now!
This commit is contained in:
Oliver
parent
6a3c9ead17
commit
0f10936e65
@ -88,11 +88,13 @@ src="{% static 'img/blank_image.png' %}"
|
||||
{% if build.target_date %}
|
||||
<tr>
|
||||
<td><span class='fas fa-calendar-alt'></span></td>
|
||||
<td>{% trans "Target Date" %}</td>
|
||||
<td>
|
||||
{% trans "Target Date" %}
|
||||
</td>
|
||||
<td>
|
||||
{{ build.target_date }}
|
||||
{% if build.is_overdue %}
|
||||
<span title='{% blocktrans with target=build.target_date %}This build was due on {{target}}{% endblocktrans %}' class='badge rounded-pill bg-danger'>{% trans "Overdue" %}</span>
|
||||
<span title='{% blocktrans with target=build.target_date %}This build was due on {{target}}{% endblocktrans %}' class='badge badge-right rounded-pill bg-danger'>{% trans "Overdue" %}</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@ -9,56 +9,14 @@
|
||||
|
||||
|
||||
{% block sidebar %}
|
||||
<!-- Part Entries -->
|
||||
{% include "sidebar_header.html" with text="Parts" icon="fa-shapes" %}
|
||||
{% include "sidebar_item.html" with label='starred-parts' text="Starred Parts" icon="fa-star" badge=True %}
|
||||
{% include "sidebar_item.html" with label='latest-parts' text="Latest Parts" icon="fa-newspaper" badge=True %}
|
||||
{% include "sidebar_item.html" with label='bom-validation' text="BOM Requires Attention" icon="fa-times-circle" badge=True %}
|
||||
|
||||
<!-- Stock Entries -->
|
||||
{% include "sidebar_header.html" with text="Stock" icon="fa-boxes" %}
|
||||
{% include "sidebar_item.html" with label='recently-updated-stock' text="Recently Updates" icon="fa-clock" badge=True %}
|
||||
{% include "sidebar_item.html" with label='low-stock' text="Low Stock" icon="fa-shopping-cart" badge=True %}
|
||||
{% include "sidebar_item.html" with label='depleted-stock' text="Depleted Stock" icon="fa-times badge=True" %}
|
||||
{% include "sidebar_item.html" with label='stock-to-build' text="Need to Build" icon="fa-bullhorn" badge=True %}
|
||||
{% include "sidebar_item.html" with label='expired-stock' text="Expired Stock" icon="fa-calendar-times" badge=True %}
|
||||
{% include "sidebar_item.html" with label='stale-stock' text="Stale Stock" icon="fa-stopwatch" badge=True %}
|
||||
|
||||
<!-- Build Orders -->
|
||||
{% include "sidebar_header.html" with text="Build Orders" icon="fa-tools" %}
|
||||
{% include "sidebar_item.html" with label='build-pending' text="In Progress" icon="fa-cogs" badge=True %}
|
||||
{% include "sidebar_item.html" with label='build-overdue' text="Overdue" icon="fa-calendar-times" badge=True %}
|
||||
|
||||
<!-- Purchase Orders -->
|
||||
{% include "sidebar_header.html" with text="Purchase Orders" icon="fa-shopping-cart" %}
|
||||
{% include "sidebar_item.html" with label='po-outstanding' text="Outstanding" icon="fa-sign-in-alt" badge=True %}
|
||||
{% include "sidebar_item.html" with label='po-overdue' text="Overdue" icon="fa-calendar-times" badge=True %}
|
||||
|
||||
<!-- Sales Orders -->
|
||||
{% include "sidebar_header.html" with text="Sales Orders" icon="fa-truck" %}
|
||||
{% include "sidebar_item.html" with label='so-outstanding' text="Outstanding" icon="fa-sign-out-alt" badge=True %}
|
||||
{% include "sidebar_item.html" with label='so-overdue' text="Overdue" icon="fa-calendar-times" badge=True %}
|
||||
|
||||
<!-- Sidebar data is filled dynamically for the index page-->
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<h3>{% inventree_title %} </h3>
|
||||
<hr>
|
||||
|
||||
<div class='col-sm-3' id='item-panel'>
|
||||
<div class='panel'>
|
||||
<ul class='list-group' id='action-item-list'>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class='col-sm-9' id='details-panel'>
|
||||
<ul class='list-group' id='detail-item-list'>
|
||||
<li class='list-group-item panel'>
|
||||
<div class='container'>
|
||||
<img class='index-bg' src='{% static "img/inventree.png" %}'>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div class='container-fluid' id='detail-panels'>
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
@ -68,67 +26,51 @@
|
||||
{{ block.super }}
|
||||
|
||||
function addHeaderTitle(title) {
|
||||
// Add a header block to the action list
|
||||
$("#action-item-list").append(
|
||||
`<li class='list-group-item'><strong>${title}</strong></li>`
|
||||
);
|
||||
|
||||
addSidebarHeader({
|
||||
text: title,
|
||||
});
|
||||
}
|
||||
|
||||
function addHeaderAction(label, title, icon, options) {
|
||||
// Add an action block to the action list
|
||||
$("#action-item-list").append(
|
||||
`<li class='list-group-item' id='action-${label}'>
|
||||
<a href='#'>
|
||||
<span class='fas ${icon}'></span>
|
||||
${title}
|
||||
</a>
|
||||
<span class='badge rounded-pill bg-dark' id='badge-${label}'>
|
||||
<span class='fas fa-spin fa-spinner'></span>
|
||||
</span>
|
||||
</li>`
|
||||
);
|
||||
|
||||
// Construct a "badge" to add to the sidebar item
|
||||
var badge = `
|
||||
<span id='sidebar-badge-${label}' class='sidebar-item-badge badge rounded-pill badge-right bg-dark'>
|
||||
<span class='fas fa-spin fa-spinner'></span>
|
||||
</span>
|
||||
`;
|
||||
|
||||
addSidebarItem({
|
||||
label: label,
|
||||
text: title,
|
||||
icon: icon,
|
||||
content_after: badge
|
||||
});
|
||||
|
||||
// Add a detail item to the detail item-panel
|
||||
$("#detail-item-list").append(
|
||||
`<li class='list-group-item panel' id='detail-${label}'>
|
||||
<h4>${title}</h4>
|
||||
<table class='table table-condensed table-striped' id='table-${label}'></table>
|
||||
</li>`
|
||||
$("#detail-panels").append(
|
||||
`<div class='panel panel-inventree panel-hidden' id='panel-${label}'>
|
||||
<div class='panel-heading'>
|
||||
<h4>${title}</h4>
|
||||
</div>
|
||||
<div class='panel-content'>
|
||||
<table class='table table-condensed table-striped' id='table-${label}'></table>
|
||||
</div>
|
||||
</div>`
|
||||
);
|
||||
|
||||
$(`#detail-${label}`).hide();
|
||||
|
||||
$(`#action-${label}`).click(function() {
|
||||
|
||||
// Hide all child elements
|
||||
$('#detail-item-list').children('li').each(function() {
|
||||
$(this).hide();
|
||||
});
|
||||
|
||||
// Show the one we want
|
||||
$(`#detail-${label}`).fadeIn();
|
||||
|
||||
// Remove css class from all action items
|
||||
$("#action-item-list").children('li').each(function() {
|
||||
$(this).removeClass('index-action-selected');
|
||||
});
|
||||
|
||||
// Add css class to the action we are interested in
|
||||
$(`#action-${label}`).addClass('index-action-selected');
|
||||
});
|
||||
|
||||
// Connect a callback to the table
|
||||
$(`#table-${label}`).on('load-success.bs.table', function() {
|
||||
var count = $(`#table-${label}`).bootstrapTable('getData').length;
|
||||
|
||||
$(`#badge-${label}`).html(count);
|
||||
var badge = $(`#sidebar-badge-${label}`);
|
||||
|
||||
$(`#badge-${label}`).removeClass('bg-dark');
|
||||
badge.html(count);
|
||||
|
||||
if (count > 0) {
|
||||
$(`#badge-${label}`).addClass('bg-primary');
|
||||
} else {
|
||||
$(`#badge-${label}`).addClass('bg-warning');
|
||||
badge.removeClass('bg-dark');
|
||||
badge.addClass('bg-primary');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@ -73,7 +73,7 @@
|
||||
<div class='col-auto px-1 sidebar-wrapper'>
|
||||
<div id='sidebar' class='collapse collapse-horizontal show border-end' style='display: none;'>
|
||||
<div id='sidebar-nav' class='list-group text-sm-start'>
|
||||
<ul class='list-group sidebar-list-group'>
|
||||
<ul id='sidebar-list-group' class='list-group sidebar-list-group'>
|
||||
{% block sidebar %}
|
||||
<!-- Sidebar goes here -->
|
||||
{% endblock %}
|
||||
|
||||
@ -2,6 +2,10 @@
|
||||
*/
|
||||
|
||||
/* exported
|
||||
activatePanel,
|
||||
addSidebarHeader,
|
||||
addSidebarItem,
|
||||
addSidebarLink,
|
||||
enableSidebar,
|
||||
onPanelLoad,
|
||||
*/
|
||||
@ -92,6 +96,8 @@ function enableSidebar(label, options={}) {
|
||||
// Find the matching panel element to display
|
||||
var panel_name = el.attr('id').replace('select-', '');
|
||||
|
||||
console.log("activating panel:", panel_name);
|
||||
|
||||
activatePanel(label, panel_name, options);
|
||||
});
|
||||
|
||||
@ -166,3 +172,41 @@ function setSidebarState(label, state) {
|
||||
// Save the state of this sidebar
|
||||
localStorage.setItem(`inventree-menu-state-${label}`, state);
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Dynamically construct and insert a sidebar item into the sidebar at runtime.
|
||||
* This mirrors the templated code in "sidebar_item.html"
|
||||
*/
|
||||
function addSidebarItem(options={}) {
|
||||
|
||||
var html = `
|
||||
<a href='#' id='select-${options.label}' title='${options.text}' class='list-group-item sidebar-list-group-item border-end-0 d-inline-block text-truncate sidebar-selector' data-bs-parent='#sidebar'>
|
||||
<i class='bi bi-bootstrap'></i>
|
||||
${options.content_before || ''}
|
||||
<span class='sidebar-item-icon fas ${options.icon}'></span>
|
||||
<span class='sidebar-item-text' style='display: none;'>${options.text}</span>
|
||||
${options.content_after || ''}
|
||||
</a>
|
||||
`;
|
||||
|
||||
$('#sidebar-list-group').append(html);
|
||||
}
|
||||
|
||||
/*
|
||||
* Dynamicall construct and insert a sidebar header into the sidebar at runtime
|
||||
* This mirrors the templated code in "sidebar_header.html"
|
||||
*/
|
||||
function addSidebarHeader(options={}) {
|
||||
|
||||
var html = `
|
||||
<span title='${options.text}' class="list-group-item sidebar-list-group-item border-end-0 d-inline-block text-truncate" data-bs-parent="#sidebar">
|
||||
<h6>
|
||||
<i class="bi bi-bootstrap"></i>
|
||||
<span class='sidebar-item-text' style='display: none;'>${options.text}</span>
|
||||
</h6>
|
||||
</span>
|
||||
`;
|
||||
|
||||
$('#sidebar-list-group').append(html);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user