bazarr/views/serieseditor.html

{% extends '_main.html' %}

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

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

{% block bcright %}

{% endblock bcright %}

{% block body %}
    <table id="series" class="table table-striped" style="width:100%">
        <thead>
        <tr>
            <th></th>
            <th>Name</th>
            <th>Audio Language</th>
            <th>Subtitles Languages</th>
            <th>Hearing-Impaired</th>
            <th>Forced</th>
        </tr>
        </thead>
    </table>

    <nav class="navbar fixed-bottom navbar-dark bg-dark" style="margin-left: 240px;">
        <div class="form-check form-check-inline">
            <div class="form-group" style="margin-bottom: 0px;">
                <label for="languages_select">Language(s): </label>
                <select class="selectpicker" id="languages_select" name="languages" title="No change" multiple></select>
            </div>
        </div>
        <div class="form-check form-check-inline">
            <div class="form-group" style="margin-bottom: 0px;">
                <label for="hi_select">Hearing-Impaired: </label>
                <select class="selectpicker show-tick" id="hi_select" name="hi" title="No change" multiple>
                    <option value="False">False</option>
                    <option value="True">True</option>
                </select>
            </div>
        </div>
        <div class="form-check form-check-inline">
            <div class="form-group" style="margin-bottom: 0px;">
                <label for="forced_select">Forced: </label>
                <select class="selectpicker show-tick" id="forced_select" name="forced" title="No change" multiple>
                    <option value="False">False</option>
                    <option value="True">True</option>
                    <option value="Both">Both</option>
                </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 () {
            $('#series_nav').addClass("active");

            getEnabledLanguages();

            events.on('event', function (event) {
                var event_json = JSON.parse(event);
                if (event_json.type === 'series' && event_json.action === 'insert') {
                    $.ajax({
                        url: "{{ url_for('api.series') }}?seriesid=" + event_json.series,
                        success: function (data) {
                            if (data.data.length) {
                                $('#series').DataTable().rows.add(data.data);
                                $('#series').DataTable().columns.adjust().draw(false);
                                $('[data-toggle="tooltip"]').tooltip({html: true});
                            }
                        }
                    })
                } else if (event_json.type === 'series' && event_json.action === 'update') {
                    var rowId = $('#series').DataTable().row('#row_' + event_json.series);
                    if (rowId.length) {
                        $.ajax({
                            url: "{{ url_for('api.series') }}?seriesid=" + event_json.series,
                            success: function (data) {
                                if (data.data.length) {
                                    $('#series').DataTable().row(rowId).data(data.data[0]).draw('page');
                                    $('[data-toggle="tooltip"]').tooltip({html: true});
                                }
                            }
                        })
                    }
                } else if (event_json.type === 'series' && event_json.action === 'delete') {
                    var rowId = $('#series').DataTable().row('#row_' + event_json.series);
                    if (rowId.length) {
                        $('#series').DataTable().row(rowId).remove();
                        $('#series').DataTable().columns.adjust().draw(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 = $('#series').DataTable({
                processing: true,
                serverSide: true,
                language: {
                    zeroRecords: 'No Series Found',
                    processing: "Loading Series..."
                },
                searching: false,
                ordering: false,
                lengthChange: true,
                responsive: true,
                paging: false,
                ajax: "{{ url_for('api.series') }}",
                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( 'episodes', no='tempvalue' ) }}".replace("tempvalue", data.sonarrSeriesId) + '">' + data.title + '</a>'
                        }
                    },
                    {data: "audio_language.name"},
                    {
                        data: "languages",
                        render: function (data) {
                            if (data !== 'None') {
                                var languages = '';
                                data.forEach(appendFunc);
                                return languages;
                            } else {
                                return null;
                            }

                            function appendFunc(value) {
                                languages = languages + '<span class="badge badge-secondary" data-toggle="tooltip" data-placement="right" title="' + value.name + '">' + value.code2 + '</span> ';
                            }
                        }
                    },
                    {data: "hearing_impaired", className: "dt-center"},
                    {data: "forced", 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');
                }
            });

            if ('{{settings.general.single_language}}' === 'True') {
                $('#languages_select').selectpicker({maxOptions: 1});
            }
            $('#hi_select').selectpicker({maxOptions: 1});
            $('#forced_select').selectpicker({maxOptions: 1});

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

                $.ajax({
                    url: "{{ url_for('api.serieseditsave') }}",
                    method: "POST",
                    data: JSON.stringify(values),
                    contentType: 'application/json',
                    success: function () {
                        table.rows().deselect();
                        $('#languages_select').selectpicker('val', '');
                        $('#hi_select').selectpicker('val', '');
                        $('#forced_select').selectpicker('val', '');
                    }
                });
            });
        });

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