bazarr/views/series.html

{% extends '_main.html' %}

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

{% block bcleft %}
    <div class="d-flex">
        <button class="btn btn-outline">
            <i class="fas fa-sync align-top text-themecolor text-center" aria-hidden="true"></i>
            <span class="align-bottom">Update</span>
        </button>
    </div>
{% endblock bcleft %}

{% block bcright %}
    <div class="d-flex m-t-5 justify-content-end">
        <h5 class="m-t-0 text-themecolor">Some page settings</h5>
    </div>
{% endblock bcright %}

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

{% endblock body %}

{% block tail %}
    <script>
        $(document).ready(function () {
            var table = $('#series').DataTable({
                "dom":
                    "<'row'<'col-sm-12'tr>>" +
                    "<'row'<'col-sm-5'i><'col-sm-7'p>>",
                "processing": false,
                "serverSide": true,
                "searching": false,
                "ordering": false,
                "lengthChange": true,
                "responsive": true,
                "pageLength": {{ settings.general.page_size }},
                "ajax": "{{ url_for('api.series') }}",
                "columns": [
                    {"data": null,
                        "render": function (data) {
                            return '<a href="{{ url_for( 'episodes' ) }}' + data.sonarrSeriesId + '">' + data.title + '</a>'
                        }
                    },
                    {
                        "data": null,
                        "className": "dt-center",
                        "responsivePriority": 1,
                        "render": function (data) {
                            if (data.exist === false) {
                                return '<i class="fas fa-exclamation-triangle" data-toggle="tooltip" data-placement="right" title="This path doesn\'t seem to be valid: ' + data.mapped_path + '"></i>';
                            } else if (data.exist === true) {
                                return '<i class="fas fa-check" data-toggle="tooltip" data-placement="right" title="This path seems to be valid: ' + data.mapped_path + '"></i>';
                            }
                        }
                    },
                    {"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",
                        "render": function (data) {
                            if (data === 'False') {
                                return '<i class="far fa-square"></i>';
                            } else if (data === 'True') {
                                return '<i class="far fa-check-square"></i>';
                            }
                        }
                    },
                    {
                        "data": "forced",
                        "className": "dt-center",
                        "render": function (data) {
                            if (data === 'False') {
                                return '<i class="far fa-square"></i>';
                            } else if (data === 'True') {
                                return '<i class="far fa-check-square"></i>';
                            }
                        }
                    },
                    {
                        "data": null,
                        "responsivePriority": 2,
                        "render": function (data) {
                            var total = data.episodeFileCount;
                            var completed = data.episodeFileCount - data.episodeMissingCount;
                            var completed_style = '';
                            var completed_text = '';
                            if (completed / total * 100 > 0 && data.languages !== 'None') {
                                completed_style = ' style="width: ' + completed / total * 100 + '%;"';
                                completed_text = completed + '/' + total;
                            }
                            return '<div class="progress"><div class="progress-bar" role="progressbar"' + completed_style + ' aria-valuenow="' + completed + '" aria-valuemin="0" aria-valuemax="' + total + '">' + completed_text + '</div></div>'
                        }
                    }
                ]
            });

            $('#series').on('draw.dt', function () {
                $('[data-toggle="tooltip"]').tooltip();
            });
        });
    </script>
{% endblock tail %}