bazarr/views/episodes.html

{% extends '_main.html' %}

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

{% block head %}
	<style>
		#seriesFanart {
			background-repeat: no-repeat;
			background-size: cover;
			background-position: top center;
			box-sizing: initial;
			margin-left: -32px;
			margin-top: -30px;
			padding: 2em;
		}

		#seriesDetails {
			padding: 30px;
			background: rgba(0, 0, 0, 0.7);
			color: white;
			margin: -32px;
		}

		#seriesPoster {
			width: 250px;
		}

		h1 {
			color: white;
		}

		span {
			margin-right: 0.5em;
		}
	</style>
{% endblock head %}

{% block bcleft %}
    <div class="">
        <button class="btn btn-outline">
            <i class="fas fa-sync align-top text-themecolor text-center font-20" aria-hidden="true"></i>
            <span class="align-bottom text-themecolor small text-center">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 %}
	<div class="container-fluid" id="seriesFanart">
		<div class="row justify-content-md-center" id="seriesDetails">
			<div class="col-sm-auto" id="seriesPosterColumn">
				<img id="seriesPoster" src="">
			</div>
			<div class="col">
				<div class="container-fluid">
					<div class="row">
						<h1><span id="seriesTitle"></span></h1>
						<i class="far fa-clone" id="seriesAlternateTitles" data-toggle="tooltip" data-placement="right"></i>
					</div>
					<div class="row">
						<h5><span id="seriesAudioLanguage" class="badge badge-secondary"></span></h5>
						<h5><span id="seriesMappedPath" class="badge badge-secondary"></span></h5>
						<h5><span id="seriesFileCount" class="badge badge-secondary"></span></h5>
					</div>
					<div class="row">
						<h5><span id="seriesSubtitlesLanguages"></span></h5>
					</div>
					<div class="row">
						<h5><span id="seriesHearingImpaired" class="badge badge-secondary"></span></h5>
						<h5><span id="seriesForced" class="badge badge-secondary"></span></h5>
					</div>
					<div class="row">
						<span id="seriesDescription"></span>
					</div>
				</div>
			</div>
		</div>
	</div>
    <div class="container-fluid">
        <!-- Bread crumb and right sidebar toggle -->
        <!-- ============================================================== -->
		<table id="episodes" class="table table-striped" style="width:100%">
            <thead>
            <tr>
                <th></th>
                <th>Episode</th>
                <th>Title</th>
                <th>Existing Subtitles</th>
                <th>Missing Subtitles</th>
                <th>Manual Search</th>
                <th>Manual Upload</th>
            </tr>
            </thead>
        </table>
    </div>
{% endblock body %}

{% block tail %}
    <script>
        $(document).ready(function () {
        	$.ajax({
				url: "{{ url_for('api.series') }}?id={{id}}",
				})
			  	.done(function( data ) {
					seriesDetails = data.data[0];
					$('#seriesFanart').css('background-image', "url('{{ url_for('image_proxy', url='MediaCover/'+id+'/fanart.jpg') }}')");
					$('#seriesPoster').attr("src","{{ url_for('image_proxy', url='MediaCover/'+id+'/poster-250.jpg') }}");
					$('#seriesTitle').text(seriesDetails['title']);

					if (seriesDetails['alternateTitles'].length > 0) {
						$('#seriesAlternateTitles').attr("title", "Alternative Titles:<br>"+seriesDetails['alternateTitles']);
						$('#seriesAlternateTitles').tooltip({html:true});
					} else {
						$('#seriesAlternateTitles').hide();
					}

					$('#seriesAudioLanguage').text(seriesDetails['audio_language'].name);
					$('#seriesMappedPath').text(seriesDetails['mapped_path']);
					$('#seriesFileCount').text(seriesDetails['episodeFileCount']+' files');

					var languages = '';
					if (seriesDetails['languages'] !== 'None') {
						seriesDetails['languages'].forEach(appendFunc);
					}

					function appendFunc(value) {
						languages = languages + '<span class="badge badge-secondary" data-toggle="tooltip" data-placement="right" title="' + value.name + '">' + value.code2 + '</span> ';
					}

					$('#seriesSubtitlesLanguages').html(languages);
					$('#seriesHearingImpaired').text('Hearing-Impaired: '+seriesDetails['hearing_impaired']);
					$('#seriesForced').text('Forced: '+seriesDetails['forced']);
					$('#seriesDescription').text(seriesDetails['overview']);
			  	});

            var table = $('#episodes').DataTable({
                "processing": false,
                "serverSide": true,
                "searching": false,
                "ordering": false,
                "lengthChange": false,
                "responsive": true,
				"pageLength": 250,
                "ajax": "{{ url_for('api.episodes') }}?id={{id}}",
                "columns": [
                    {"data": "monitored",
                        "render": function (data, type, row) {
                            if (data === 'False') {
                                return '<i class="far fa-bookmark" data-toggle="tooltip" data-placement="right" title="Episode unmonitored in Sonarr"></i>';
                            } else if (data === 'True') {
                                return '<i class="fas fa-bookmark" data-toggle="tooltip" data-placement="right" title="Episode monitored in Sonarr"></i>';
                            }
                        }
					},
                    {"data": "episode"},
                    {"data": "title"},
                    {"data": null,
                        "render": function (data) {
                            if (data.subtitles !== 'None') {
                                var languages = '';
                                data.subtitles.forEach(appendFunc);
                                return languages;
                            } else {
                                return null;
                            }

                            function appendFunc(value) {
                            	if (value[1] === null) {
									languages = languages + '<span class="badge badge-secondary" data-toggle="tooltip" data-placement="right" title="' + value[0].name + '">' + value[0].code2 + '</span> ';
								} else {
                            		languages = languages + '<a href="" class="remove_subtitles badge badge-secondary" data-toggle="tooltip" data-placement="right" title="' + value[0].name + '" data-episodePath="'+data.path+'" data-language="'+value[0].code3+'" data-subtitlesPath="'+value[1]+'" data-sonarrEpisodeId='+data.sonarrEpisodeId+'>' + value[0].code2 + ' <i class="far fa-trash-alt"></i></a> ';
								}
                            }
                        }
					},
                    {"data": "missing_subtitles",
                        "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": "title"},
                    {"data": "title"}
                ]
            });

            $('#episodes').on('click', '.remove_subtitles', function(e){
            	e.preventDefault()
				const values = {
					episodePath: $(this).attr("data-episodePath"),
					language: $(this).attr("data-language"),
					subtitlesPath: $(this).attr("data-subtitlesPath"),
					sonarrSeriesId: seriesDetails['sonarrSeriesId'],
					sonarrEpisodeId: $(this).attr("data-sonarrEpisodeId"),
					tvdbid: seriesDetails['tvdbId']
				};
				var cell = $(this).closest('td');
				$.ajax({
					url: "{{ url_for('remove_subtitles') }}",
					type: "POST",
					dataType: "json",
					data: values,
					beforeSend: function() {
						cell.html('<div class="spinner-border spinner-border-sm" role="status"><span class="sr-only">Loading...</span></div>');
					},
					complete: function() {
						$('#episodes').DataTable().ajax.reload(null, false);
					}
				});
			});
        });


    </script>
{% endblock tail %}