Add "helpers.js" for common functions

InvenTree/templates/js/translated/helpers.js

@@ -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>';
+}

InvenTree/templates/js/translated/table_filters.js

@@ -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();
 

InvenTree/templates/js/translated/tables.js

@@ -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;