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-primary" 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]);
                                    $('[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,
                "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' ) }}' + 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": [
                    'selectAll',
                    'selectNone'
                ]
            } );

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

            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 %}