InvenTree/InvenTree/build/templates/build/index.html

{% extends "page_base.html" %}

{% load inventree_extras %}
{% load static %}
{% load i18n %}

{% block page_title %}
{% inventree_title %} | {% trans "Build Orders" %} 
{% endblock %}

{% block heading %}
{% trans "Build Orders" %}
{% endblock %}

{% block actions %}
{% if roles.build.add %}
<button type='button' class="btn btn-success" id='new-build'>
    <span class='fas fa-tools'></span> {% trans "New Build Order" %}
</button>
{% endif %}
{% endblock %}

{% block page_info %}

<div class='panel-content'>
    <div id='button-toolbar'>
        <div class='button-toolbar container-fluid' style='float: right;'>
            <div class='btn-group' role='group'>
                
                <div class='btn-group' role='group'>
                    <!-- Print actions -->
                    <button id='build-print-options' class='btn btn-primary dropdown-toggle' data-bs-toggle='dropdown'>
                        <span class='fas fa-print'></span> <span class='caret'></span>
                    </button>
                    <ul class='dropdown-menu'>
                        <li><a class='dropdown-item' href='#' id='multi-build-print' title='{% trans "Print Build Orders" %}'>
                            <span class='fas fa-file-pdf'></span> {% trans "Print Build Orders" %}
                        </a></li>
                    </ul>
                </div>
                <!-- Buttons to switch between list and calendar views -->
                <button class='btn btn-outline-secondary' type='button' id='view-calendar' title='{% trans "Display calendar view" %}'>
                    <span class='fas fa-calendar-alt'></span>
                </button>
                <button class='btn btn-outline-secondary' type='button' id='view-list' title='{% trans "Display list view" %}'>
                    <span class='fas fa-th-list'></span>
                </button>
                <div class='filter-list' id='filter-list-build'>
                    <!-- An empty div in which the filter list will be constructed -->
                </div>
            </div>
        </div>
    </div>
    
    <table class='table table-striped table-condensed' id='build-table' data-toolbar='#button-toolbar'>
    </table>
    
    <div id='build-order-calendar'></div>
</div>
    
{% endblock %}

{% block js_load %}
{{ block.super }}

<script type='text/javascript'>
    function loadOrderEvents(calendar) {

        var start = startDate(calendar);
        var end = endDate(calendar);

        clearEvents(calendar);

        // Request build orders from the server within specified date range
        inventreeGet(
            '{% url "api-build-list" %}',
            {
                min_date: start,
                max_date: end,
                part_detail: true,
            },
            {
                success: function(response) {
                    var prefix = global_settings.BUILDORDER_REFERENCE_PREFIX;

                    for (var idx = 0; idx < response.length; idx++) {

                        var order = response[idx];

                        var date = order.creation_date;

                        if (order.completion_date) {
                            date = order.completion_date;
                        } else if (order.target_date) {
                            date = order.target_date;
                        }

                        var title = `${prefix}${order.reference}`; //- ${order.quantity} x ${order.part_detail.name}`;

                        var color = '#4c68f5';

                        if (order.completed) {
                            color = '#25c234';
                        } else if (order.overdue) {
                            color = '#c22525';
                        }

                        var event = {
                            title: title,
                            start: date,
                            end: date,
                            url: `/build/${order.pk}/`,
                            backgroundColor: color,
                        };

                        calendar.addEvent(event);
                    }
                }
            }
        );
    }

    var calendar = null;

    document.addEventListener('DOMContentLoaded', function() {
        var el = document.getElementById('build-order-calendar');

        calendar = new FullCalendar.Calendar(el, {
            initialView: 'dayGridMonth',
            nowIndicator: true,
            aspectRatio: 2.5,
            locale: '{{request.LANGUAGE_CODE}}',
            datesSet: function() {
                loadOrderEvents(calendar);
            }
        });

        calendar.render();
    });

</script>
{% endblock %}

{% block js_ready %}
{{ block.super }}

$('#build-order-calendar').hide();
$('#view-list').hide();

$('#view-calendar').click(function() {
    // Hide the list view, show the calendar view
    $("#build-table").hide();
    $("#view-calendar").hide();
    $(".fixed-table-pagination").hide();
    $(".columns-right").hide();
    $(".search").hide();

    $("#build-order-calendar").show();
    $("#view-list").show();

    calendar.render();
});

$("#view-list").click(function() {
    // Hide the calendar view, show the list view
    $("#build-order-calendar").hide();
    $("#view-list").hide();

    $(".fixed-table-pagination").show();
    $(".columns-right").show();
    $(".search").show();
    $("#build-table").show();
    $("#view-calendar").show();
});

$("#collapse-item-active").collapse().show();

$("#new-build").click(function() {
    newBuildOrder();
});

loadBuildTable($("#build-table"), {
    url: "{% url 'api-build-list' %}",
});

$('#multi-build-print').click(function() {
    var rows = $("#build-table").bootstrapTable('getSelections');

    var build_ids = [];

    rows.forEach(function(row) {
        build_ids.push(row.pk);
    });

    printBuildReports(build_ids);
});

{% endblock %}