bazarr/views/movieseditor.html

{% extends '_main.html' %}

{% block title %}Movies Editor - Bazarr{% endblock %}

{% block bcleft %}
    <div id="buttons"></div>
{% endblock bcleft %}

{% block bcright %}

{% endblock bcright %}

{% block body %}
    <table id="movies" class="table table-striped" style="width:100%">
        <thead>
        <tr>
            <th></th>
            <th>Name</th>
            <th>Audio Language</th>
            <th>Languages Profile</th>
        </tr>
        </thead>
    </table>

    <nav id="edit_bar" class="navbar fixed-bottom navbar-dark bg-dark justify-content-end">
        <div class="form-check form-check-inline">
            <div class="form-group" style="margin-bottom: 0px;">
                <label for="languages_select">Languages Profile: </label>
                <select class="selectpicker" id="languages_select" name="languages"></select>
            </div>
        </div>
        <div class="form-check form-check-inline">
            <button type="submit" class="btn btn-info" id="save_button">Save</button>
        </div>
    </nav>
{% endblock body %}

{% block tail %}
    <script>
        $(document).ready(function () {
            $('#movies_nav').addClass("active");

            getEnabledLanguages();

            events.on('event', function (event) {
                var event_json = JSON.parse(event);
                if (event_json.type === 'movies_editor' && event_json.action === 'update') {
                    $.ajax({
                        url: "{{ url_for('api.movieseditor') }}",
                        success: function (data) {
                            if (data.data.length) {
                                $('#movies').DataTable().ajax.reload(null, false);
                                $('[data-toggle="tooltip"]').tooltip({html: true});
                            }
                        }
                    })
                }
            });

            $('.selectpicker').prop('disabled', true);
            $('.selectpicker').selectpicker('refresh');
            $('#save_button').prop('disabled', true);
            $('#save_button').addClass('disabled');
            $('#save_button').css('cursor', 'not-allowed');

            var table = $('#movies').DataTable({
                processing: true,
                serverSide: true,
                language: {
                    zeroRecords: 'No Movies Found',
                    processing: "Loading Movies..."
                },
                searching: false,
                ordering: false,
                lengthChange: true,
                responsive: true,
                paging: false,
                ajax: "{{ url_for('api.movieseditor') }}",
                columnDefs: [{
                    orderable: false,
                    className: 'select-checkbox',
                    targets: 0
                }],
                select: {
                    style: 'multi',
                    selector: 'td:first-child'
                },
                columns: [
                    {defaultContent: ""},
                    {
                        data: null,
                        render: function (data) {
                            return '<a href="' + "{{ url_for( 'movie', no='tempvalue' ) }}".replace("tempvalue", data.radarrId) + '">' + data.title + '</a>'
                        }
                    },
                    {
                        data: 'audio_language',
                        render: function (data) {
                            var audio_languages = '';
                            data.forEach(appendFunc);
                            return audio_languages;

                            function appendFunc(value) {
                                audio_languages = audio_languages + '<span class="badge badge-secondary">' + value.name + '</span> ';
                            }
                        }
                    },
                    {
                        data: "profileId.name",
                        className: "dt-center"
                    }
                ]
            });

            new $.fn.dataTable.Buttons(table, {
                buttons: [
                    {
                        extend: 'selectAll',
                        text: '<div><i class="far fa-check-square align-top text-themecolor text-center font-20" aria-hidden="true"></i></div>\n' +
                            '            <div class="align-bottom text-themecolor small text-center">Select ALL</div>'
                    },
                    {
                        extend: 'selectNone',
                        text: '<div><i class="far fa-square align-top text-themecolor text-center font-20" aria-hidden="true"></i></div>\n' +
                            '            <div class="align-bottom text-themecolor small text-center nowrap">Deselect ALL</div>'
                    }]
            });

            table.buttons().container().appendTo('#buttons');

            var btns = $('.dt-button');
            btns.addClass('btn btn-outline');
            btns.removeClass('dt-button');

            table.on('select', function () {
                $('.selectpicker').prop('disabled', false);
                $('.selectpicker').selectpicker('refresh');
                $('#save_button').prop('disabled', false);
                $('#save_button').removeClass('disabled');
                $('#save_button').css('cursor', 'auto');
            });

            table.on('deselect', function () {
                if (table.rows('.selected').count() === 0) {
                    $('.selectpicker').prop('disabled', true);
                    $('.selectpicker').selectpicker('refresh');
                    $('#save_button').prop('disabled', true);
                    $('#save_button').addClass('disabled');
                    $('#save_button').css('cursor', 'not-allowed');
                }
            });

            $('#save_button').on('click', function (e) {
                e.preventDefault();
                const values = {
                    radarrid: table.rows({selected: true}).ids().toArray(),
                    languages: $('#languages_select').val()
                };

                $.ajax({
                    url: "{{ url_for('api.movieseditsave') }}",
                    method: "POST",
                    data: values,
                    beforeSend: function () {
                        $('.selectpicker').prop('disabled', true);
                        $('.selectpicker').selectpicker('refresh');
                        $('#save_button').prop('disabled', true);
                        $('#save_button').addClass('disabled');
                        $('#save_button').css('cursor', 'wait');
                    },
                    success: function () {
                        table.rows().deselect();
                        $('#languages_select').selectpicker('val', 'None');
                    }
                });
            });
        });

        function getEnabledLanguages() {
            $.ajax({
                url: "{{ url_for('api.languagesprofiles') }}",
                success: function (data) {
                    $('#languages_select').append('<option value="None">None</option>');
                    $.each(data['data'], function (i, item) {
                        $('#languages_select').append('<option value="' + item.profileId + '">' + item.name + '</option>');
                    });
                    $("#languages_select").selectpicker("refresh");
                }
            });
        }
    </script>
{% endblock tail %}