mirror of
https://github.com/inventree/InvenTree
synced 2024-08-30 18:33:04 +00:00
Add "helpers.js" for common functions
This commit is contained in:
Oliver Walters
parent
140a2092c8
commit
24ca1c5641
@ -111,6 +111,7 @@ translated_javascript_urls = [
|
||||
url(r'^company.js', DynamicJsView.as_view(template_name='js/translated/company.js'), name='company.js'),
|
||||
url(r'^filters.js', DynamicJsView.as_view(template_name='js/translated/filters.js'), name='filters.js'),
|
||||
url(r'^forms.js', DynamicJsView.as_view(template_name='js/translated/forms.js'), name='forms.js'),
|
||||
url(r'^helpers.js', DynamicJsView.as_view(template_name='js/translated/helpers.js'), name='helpers.js'),
|
||||
url(r'^label.js', DynamicJsView.as_view(template_name='js/translated/label.js'), name='label.js'),
|
||||
url(r'^model_renderers.js', DynamicJsView.as_view(template_name='js/translated/model_renderers.js'), name='model_renderers.js'),
|
||||
url(r'^modals.js', DynamicJsView.as_view(template_name='js/translated/modals.js'), name='modals.js'),
|
||||
|
||||
@ -160,6 +160,7 @@
|
||||
<script type='text/javascript' src="{% i18n_static 'company.js' %}"></script>
|
||||
<script type='text/javascript' src="{% i18n_static 'filters.js' %}"></script>
|
||||
<script type='text/javascript' src="{% i18n_static 'forms.js' %}"></script>
|
||||
<script type='text/javascript' src="{% i18n_static 'helpers.js' %}"></script>
|
||||
<script type='text/javascript' src="{% i18n_static 'label.js' %}"></script>
|
||||
<script type='text/javascript' src="{% i18n_static 'modals.js' %}"></script>
|
||||
<script type='text/javascript' src="{% i18n_static 'model_renderers.js' %}"></script>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{% load inventree_extras %}
|
||||
|
||||
export function attachClipboard(selector, containerselector, textElement) {
|
||||
function attachClipboard(selector, containerselector, textElement) {
|
||||
// set container
|
||||
if (containerselector){
|
||||
containerselector = document.getElementById(containerselector);
|
||||
@ -28,7 +28,7 @@ export function attachClipboard(selector, containerselector, textElement) {
|
||||
}
|
||||
|
||||
|
||||
export function inventreeDocReady() {
|
||||
function inventreeDocReady() {
|
||||
/* Run this function when the HTML document is loaded.
|
||||
* This will be called for every page that extends "base.html"
|
||||
*/
|
||||
@ -132,7 +132,7 @@ export function inventreeDocReady() {
|
||||
});
|
||||
}
|
||||
|
||||
export function isFileTransfer(transfer) {
|
||||
function isFileTransfer(transfer) {
|
||||
/* Determine if a transfer (e.g. drag-and-drop) is a file transfer
|
||||
*/
|
||||
|
||||
@ -140,106 +140,7 @@ export function isFileTransfer(transfer) {
|
||||
}
|
||||
|
||||
|
||||
export function makeIconBadge(icon, title) {
|
||||
// Construct an 'icon badge' which floats to the right of an object
|
||||
|
||||
var html = `<span class='fas ${icon} label-right' title='${title}'></span>`;
|
||||
|
||||
return html;
|
||||
}
|
||||
|
||||
|
||||
export function makeIconButton(icon, cls, pk, title, options={}) {
|
||||
// Construct an 'icon button' using the fontawesome set
|
||||
|
||||
var classes = `btn btn-default btn-glyph ${cls}`;
|
||||
|
||||
var id = `${cls}-${pk}`;
|
||||
|
||||
var html = '';
|
||||
|
||||
var extraProps = '';
|
||||
|
||||
if (options.disabled) {
|
||||
extraProps += "disabled='true' ";
|
||||
}
|
||||
|
||||
html += `<button pk='${pk}' id='${id}' class='${classes}' title='${title}' ${extraProps}>`;
|
||||
html += `<span class='fas ${icon}'></span>`;
|
||||
html += `</button>`;
|
||||
|
||||
return html;
|
||||
}
|
||||
|
||||
export function makeProgressBar(value, maximum, opts={}) {
|
||||
/*
|
||||
* Render a progessbar!
|
||||
*
|
||||
* @param value is the current value of the progress bar
|
||||
* @param maximum is the maximum value of the progress bar
|
||||
*/
|
||||
|
||||
var options = opts || {};
|
||||
|
||||
value = parseFloat(value);
|
||||
|
||||
var percent = 100;
|
||||
|
||||
// Prevent div-by-zero or null value
|
||||
if (maximum && maximum > 0) {
|
||||
maximum = parseFloat(maximum);
|
||||
percent = parseInt(value / maximum * 100);
|
||||
}
|
||||
|
||||
if (percent > 100) {
|
||||
percent = 100;
|
||||
}
|
||||
|
||||
var extraclass = '';
|
||||
|
||||
if (value > maximum) {
|
||||
extraclass='progress-bar-over';
|
||||
} else if (value < maximum) {
|
||||
extraclass = 'progress-bar-under';
|
||||
}
|
||||
|
||||
var style = options.style || '';
|
||||
|
||||
var text = '';
|
||||
|
||||
if (style == 'percent') {
|
||||
// Display e.g. "50%"
|
||||
|
||||
text = `${percent}%`;
|
||||
} else if (style == 'max') {
|
||||
// Display just the maximum value
|
||||
text = `${maximum}`;
|
||||
} else if (style == 'value') {
|
||||
// Display just the current value
|
||||
text = `${value}`;
|
||||
} else if (style == 'blank') {
|
||||
// No display!
|
||||
text = '';
|
||||
} else {
|
||||
/* Default style
|
||||
* Display e.g. "5 / 10"
|
||||
*/
|
||||
|
||||
text = `${value} / ${maximum}`;
|
||||
}
|
||||
|
||||
var id = options.id || 'progress-bar';
|
||||
|
||||
return `
|
||||
<div id='${id}' class='progress'>
|
||||
<div class='progress-bar ${extraclass}' role='progressbar' aria-valuenow='${percent}' aria-valuemin='0' aria-valuemax='100' style='width:${percent}%'></div>
|
||||
<div class='progress-value'>${text}</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
|
||||
export function enableDragAndDrop(element, url, options) {
|
||||
function enableDragAndDrop(element, url, options) {
|
||||
/* Enable drag-and-drop file uploading for a given element.
|
||||
|
||||
Params:
|
||||
@ -296,26 +197,8 @@ export function enableDragAndDrop(element, url, options) {
|
||||
});
|
||||
}
|
||||
|
||||
export function imageHoverIcon(url) {
|
||||
/* Render a small thumbnail icon for an image.
|
||||
* On mouseover, display a full-size version of the image
|
||||
*/
|
||||
|
||||
if (!url) {
|
||||
url = '/static/img/blank_image.png';
|
||||
}
|
||||
|
||||
var html = `
|
||||
<a class='hover-icon'>
|
||||
<img class='hover-img-thumb' src='` + url + `'>
|
||||
<img class='hover-img-large' src='` + url + `'>
|
||||
</a>
|
||||
`;
|
||||
|
||||
return html;
|
||||
}
|
||||
|
||||
export function inventreeSave(name, value) {
|
||||
function inventreeSave(name, value) {
|
||||
/*
|
||||
* Save a key:value pair to local storage
|
||||
*/
|
||||
@ -324,7 +207,7 @@ export function inventreeSave(name, value) {
|
||||
localStorage.setItem(key, value);
|
||||
}
|
||||
|
||||
export function inventreeLoad(name, defaultValue) {
|
||||
function inventreeLoad(name, defaultValue) {
|
||||
/*
|
||||
* Retrieve a key:value pair from local storage
|
||||
*/
|
||||
|
||||
@ -2,16 +2,14 @@
|
||||
// InvenTree settings
|
||||
|
||||
{% user_settings request.user as USER_SETTINGS %}
|
||||
|
||||
export const user_settings = {
|
||||
const user_settings = {
|
||||
{% for key, value in USER_SETTINGS.items %}
|
||||
{{ key }}: {% primitive_to_javascript value %},
|
||||
{% endfor %}
|
||||
};
|
||||
|
||||
{% global_settings as GLOBAL_SETTINGS %}
|
||||
|
||||
export const global_settings = {
|
||||
const global_settings = {
|
||||
{% for key, value in GLOBAL_SETTINGS.items %}
|
||||
{{ key }}: {% primitive_to_javascript value %},
|
||||
{% endfor %}
|
||||
|
||||
158
InvenTree/templates/js/translated/helpers.js
Normal file
158
InvenTree/templates/js/translated/helpers.js
Normal file
@ -0,0 +1,158 @@
|
||||
/*
|
||||
* A set of simple helper functions
|
||||
*/
|
||||
|
||||
|
||||
function blankImage() {
|
||||
return `/static/img/blank_image.png`;
|
||||
}
|
||||
|
||||
/* Render a small thumbnail icon for an image.
|
||||
* On mouseover, display a full-size version of the image
|
||||
*/
|
||||
function imageHoverIcon(url) {
|
||||
|
||||
if (!url) {
|
||||
url = blankImage();
|
||||
}
|
||||
|
||||
var html = `
|
||||
<a class='hover-icon'>
|
||||
<img class='hover-img-thumb' src='{url}'>
|
||||
<img class='hover-img-large' src='{url}'>
|
||||
</a>
|
||||
`;
|
||||
|
||||
return html;
|
||||
}
|
||||
|
||||
|
||||
// Render a select2 thumbnail image
|
||||
function select2Thumbnail(image) {
|
||||
if (!image) {
|
||||
image = blankImage();
|
||||
}
|
||||
|
||||
return `<img src='${image}' class='select2-thumbnail'>`;
|
||||
}
|
||||
|
||||
|
||||
function makeIconBadge(icon, title) {
|
||||
// Construct an 'icon badge' which floats to the right of an object
|
||||
|
||||
var html = `<span class='fas ${icon} label-right' title='${title}'></span>`;
|
||||
|
||||
return html;
|
||||
}
|
||||
|
||||
|
||||
function makeIconButton(icon, cls, pk, title, options={}) {
|
||||
// Construct an 'icon button' using the fontawesome set
|
||||
|
||||
var classes = `btn btn-default btn-glyph ${cls}`;
|
||||
|
||||
var id = `${cls}-${pk}`;
|
||||
|
||||
var html = '';
|
||||
|
||||
var extraProps = '';
|
||||
|
||||
if (options.disabled) {
|
||||
extraProps += "disabled='true' ";
|
||||
}
|
||||
|
||||
html += `<button pk='${pk}' id='${id}' class='${classes}' title='${title}' ${extraProps}>`;
|
||||
html += `<span class='fas ${icon}'></span>`;
|
||||
html += `</button>`;
|
||||
|
||||
return html;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Render a progessbar!
|
||||
*
|
||||
* @param value is the current value of the progress bar
|
||||
* @param maximum is the maximum value of the progress bar
|
||||
*/
|
||||
function makeProgressBar(value, maximum, opts={}) {
|
||||
|
||||
var options = opts || {};
|
||||
|
||||
value = parseFloat(value);
|
||||
|
||||
var percent = 100;
|
||||
|
||||
// Prevent div-by-zero or null value
|
||||
if (maximum && maximum > 0) {
|
||||
maximum = parseFloat(maximum);
|
||||
percent = parseInt(value / maximum * 100);
|
||||
}
|
||||
|
||||
if (percent > 100) {
|
||||
percent = 100;
|
||||
}
|
||||
|
||||
var extraclass = '';
|
||||
|
||||
if (value > maximum) {
|
||||
extraclass='progress-bar-over';
|
||||
} else if (value < maximum) {
|
||||
extraclass = 'progress-bar-under';
|
||||
}
|
||||
|
||||
var style = options.style || '';
|
||||
|
||||
var text = '';
|
||||
|
||||
if (style == 'percent') {
|
||||
// Display e.g. "50%"
|
||||
|
||||
text = `${percent}%`;
|
||||
} else if (style == 'max') {
|
||||
// Display just the maximum value
|
||||
text = `${maximum}`;
|
||||
} else if (style == 'value') {
|
||||
// Display just the current value
|
||||
text = `${value}`;
|
||||
} else if (style == 'blank') {
|
||||
// No display!
|
||||
text = '';
|
||||
} else {
|
||||
/* Default style
|
||||
* Display e.g. "5 / 10"
|
||||
*/
|
||||
|
||||
text = `${value} / ${maximum}`;
|
||||
}
|
||||
|
||||
var id = options.id || 'progress-bar';
|
||||
|
||||
return `
|
||||
<div id='${id}' class='progress'>
|
||||
<div class='progress-bar ${extraclass}' role='progressbar' aria-valuenow='${percent}' aria-valuemin='0' aria-valuemax='100' style='width:${percent}%'></div>
|
||||
<div class='progress-value'>${text}</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
|
||||
function renderLink(text, url, options={}) {
|
||||
if (url === null || url === undefined || url === '') {
|
||||
return text;
|
||||
}
|
||||
|
||||
var max_length = options.max_length || -1;
|
||||
|
||||
// Shorten the displayed length if required
|
||||
if ((max_length > 0) && (text.length > max_length)) {
|
||||
var slice_length = (max_length - 3) / 2;
|
||||
|
||||
var text_start = text.slice(0, slice_length);
|
||||
var text_end = text.slice(-slice_length);
|
||||
|
||||
text = `${text_start}...${text_end}`;
|
||||
}
|
||||
|
||||
return '<a href="' + url + '">' + text + '</a>';
|
||||
}
|
||||
@ -11,7 +11,7 @@ import { global_settings } from '{% url "settings.js" %}';
|
||||
{% include "status_codes.html" with label='salesOrder' options=SalesOrderStatus.list %}
|
||||
|
||||
|
||||
export function getAvailableTableFilters(tableKey) {
|
||||
function getAvailableTableFilters(tableKey) {
|
||||
|
||||
tableKey = tableKey.toLowerCase();
|
||||
|
||||
|
||||
@ -3,22 +3,22 @@
|
||||
import { inventreeLoad, inventreeSave } from '{% url "inventree.js" %}';
|
||||
|
||||
|
||||
export function reloadtable(table) {
|
||||
function reloadtable(table) {
|
||||
$(table).bootstrapTable('refresh');
|
||||
}
|
||||
|
||||
|
||||
export function editButton(url, text='{% trans "Edit" %}') {
|
||||
function editButton(url, text='{% trans "Edit" %}') {
|
||||
return "<button class='btn btn-success edit-button btn-sm' type='button' url='" + url + "'>" + text + "</button>";
|
||||
}
|
||||
|
||||
|
||||
export function deleteButton(url, text='{% trans "Delete" %}') {
|
||||
function deleteButton(url, text='{% trans "Delete" %}') {
|
||||
return "<button class='btn btn-danger delete-button btn-sm' type='button' url='" + url + "'>" + text + "</button>";
|
||||
}
|
||||
|
||||
|
||||
export function renderLink(text, url, options={}) {
|
||||
function renderLink(text, url, options={}) {
|
||||
if (url === null || url === undefined || url === '') {
|
||||
return text;
|
||||
}
|
||||
@ -39,14 +39,14 @@ export function renderLink(text, url, options={}) {
|
||||
}
|
||||
|
||||
|
||||
export function enableButtons(elements, enabled) {
|
||||
function enableButtons(elements, enabled) {
|
||||
for (let item of elements) {
|
||||
$(item).prop('disabled', !enabled);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export function linkButtonsToSelection(table, buttons) {
|
||||
function linkButtonsToSelection(table, buttons) {
|
||||
/* Link a bootstrap-table object to one or more buttons.
|
||||
* The buttons will only be enabled if there is at least one row selected
|
||||
*/
|
||||
@ -74,7 +74,7 @@ function isNumeric(n) {
|
||||
* Reload a table which has already been made into a bootstrap table.
|
||||
* New filters can be optionally provided, to change the query params.
|
||||
*/
|
||||
export function reloadTableFilters(table, filters) {
|
||||
function reloadTableFilters(table, filters) {
|
||||
|
||||
// Simply perform a refresh
|
||||
if (filters == null) {
|
||||
@ -263,7 +263,7 @@ $.fn.inventreeTable = function(options) {
|
||||
}
|
||||
}
|
||||
|
||||
export function customGroupSorter(sortName, sortOrder, sortData) {
|
||||
function customGroupSorter(sortName, sortOrder, sortData) {
|
||||
|
||||
var order = sortOrder === 'desc' ? -1 : 1;
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user