bazarr/views/settingslanguages.html
Louis Vézina 5831c415b6 WIP
2020-05-09 16:50:14 -04:00

323 lines
16 KiB
HTML

{% extends '_main.html' %}
{% block title %}Languages - Bazarr{% endblock %}
{% block page_head %}
<style>
.warning {
color: red;
}
</style>
{% endblock page_head %}
{% block bcleft %}
<div class="">
<button class="btn btn-outline" id="save_button">
<div>
<span class="fa-stack">
<i class="fas fa-save fa-stack-2x align-top text-themecolor text-center font-20" aria-hidden="true"></i>
<i id="save_button_checkmark" class="fas fa-check fa-stack-2x" style="color:green;"></i>
</span>
</div>
<div class="align-bottom text-themecolor small text-center">Save</div>
</button>
</div>
{% endblock bcleft %}
{% block bcright %}
{% endblock bcright %}
{% block body %}
<div class="container-fluid" style="padding-top: 3em;">
<form class="form" name="settings_form" id="settings_form">
<h4>Subtitles languages</h4>
<hr/>
<div class="row">
<div class="col-sm-3 text-right">
<b>Single Language</b>
</div>
<div class="form-group col-sm-8">
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="settings-general-single_language" name="settings-general-single_language">
<span class="custom-control-label" for="settings-general-single_language"></span>
</label>
<label>Download a single Subtitles file without adding the language code to the filename.</label>
<label class="warning">We don't recommend enabling this option unless absolutely required (ie: media player not supporting language code in subtitles filename). Results may vary.</label>
</div>
</div>
<br>
<div class="row">
<div class="col-sm-3 text-right">
<b>Enabled Languages</b>
</div>
<div class="form-group col-sm-8 pl-sm-0">
<select class="selectpicker" id="enabled_languages" name="enabled_languages" data-live-search="true" multiple></select>
</div>
</div>
<br>
<h4>Default Settings</h4>
<hr>
<div class="row">
<div class="col-sm-3 text-right">
<b>Series Default Settings</b>
</div>
<div class="form-group col-sm-8">
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="settings-general-serie_default_enabled" name="settings-general-serie_default_enabled">
<span class="custom-control-label" for="settings-general-serie_default_enabled"></span>
</label>
<label>Apply only to Series added to Bazarr after enabling this option.</label>
</div>
</div>
<div id="series_default_div">
<div class="row">
<div class="col-sm-4 text-right">
<b>Languages</b>
</div>
<div class="form-group col-sm-8 pl-sm-0">
<select class="selectpicker" id="settings-general-serie_default_language" name="settings-general-serie_default_language" multiple></select>
</div>
</div>
<div class="row">
<div class="col-sm-4 text-right">
<b>Hearing-Impaired</b>
</div>
<div class="form-group col-sm-1">
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="settings-general-serie_default_hi" name="settings-general-serie_default_hi">
<span class="custom-control-label" for="settings-general-serie_default_hi"></span>
</label>
</div>
</div>
<div class="row">
<div class="col-sm-4 text-right">
<b>Forced</b>
</div>
<div class="form-group col-sm-8 pl-sm-0">
<select class="selectpicker" id="settings-general-serie_default_forced" name="settings-general-serie_default_forced">
<option value="False">False</option>
<option value="True">True</option>
<option value="Both">Both</option>
</select>
</div>
</div>
<br>
</div>
<br>
<div class="row">
<div class="col-sm-3 text-right">
<b>Movies Default Settings</b>
</div>
<div class="form-group col-sm-8">
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="settings-general-movie_default_enabled" name="settings-general-movie_default_enabled">
<span class="custom-control-label" for="settings-general-movie_default_enabled"></span>
</label>
<label>Apply only to Movies added to Bazarr after enabling this option.</label>
</div>
</div>
<div id="movies_default_div">
<div class="row">
<div class="col-sm-4 text-right">
<b>Languages</b>
</div>
<div class="form-group col-sm-8 pl-sm-0">
<select class="selectpicker" id="settings-general-movie_default_language" name="settings-general-movie_default_language" multiple></select>
</div>
</div>
<div class="row">
<div class="col-sm-4 text-right">
<b>Hearing-Impaired</b>
</div>
<div class="form-group col-sm-1">
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="settings-general-movie_default_hi" name="settings-general-movie_default_hi">
<span class="custom-control-label" for="settings-general-movie_default_hi"></span>
</label>
</div>
</div>
<div class="row">
<div class="col-sm-4 text-right">
<b>Forced</b>
</div>
<div class="form-group col-sm-8 pl-sm-0">
<select class="selectpicker" id="settings-general-movie_default_forced" name="settings-general-movie_default_forced">
<option value="False">False</option>
<option value="True">True</option>
<option value="Both">Both</option>
</select>
</div>
</div>
<br>
</div>
</form>
</div>
{% endblock body %}
{% block tail %}
<script>
$(document).ready(function () {
getLanguages();
// Show warning if there's unsaved changes in the settings_form
var form_changed = false;
$(window).on('beforeunload', function() {
if (form_changed) {
return "";
}
});
// Hide checkmark over save button
$('#save_button_checkmark').hide();
$('#save_button').prop('disabled', true).css('cursor', 'not-allowed');
// Listen to selection change on enabled_languages select and keep series and movies default language select synced
$('#enabled_languages').on('changed.bs.select', function(event, clickedIndex, isSelected, previousValue) {
actual = $("#enabled_languages option:selected").map(function() {
return $(this).val();
}).get();
if (previousValue) {
var added = actual.filter(x => !previousValue.includes(x));
var removed = previousValue.filter(x => !actual.includes(x));
if (added.length > 0) {
$('#settings-general-serie_default_language').append('<option value="' + added[0] + '">' + $("#enabled_languages option[value="+added[0]+"]").text() + '</option>');
$('#settings-general-movie_default_language').append('<option value="' + added[0] + '">' + $("#enabled_languages option[value="+added[0]+"]").text() + '</option>');
}
if (removed.length > 0) {
$("#settings-general-serie_default_language option[value="+removed[0]+"]").remove();
$("#settings-general-movie_default_language option[value="+removed[0]+"]").remove();
}
} else {
$(actual).each( function(i, item) {
if ($('#settings-general-serie_default_language option[value='+item+']').length < 1) {
$('#settings-general-serie_default_language').append('<option value="' + item + '">' + $("#enabled_languages option[value="+item+"]").text() + '</option>');
$('#settings-general-movie_default_language').append('<option value="' + item + '">' + $("#enabled_languages option[value="+item+"]").text() + '</option>');
}
});
}
$('#settings-general-serie_default_language').selectpicker('val', {{settings.general.serie_default_language|safe}});
$('#settings-general-movie_default_language').selectpicker('val', {{settings.general.movie_default_language|safe}});
$("#settings-general-serie_default_language").selectpicker("refresh");
$("#settings-general-movie_default_language").selectpicker("refresh");
})
// Set Select input values
$('#settings-general-serie_default_forced').val('{{settings.general.serie_default_forced}}').trigger('change');
$('#settings-general-movie_default_forced').val('{{settings.general.movie_default_forced}}').trigger('change');
$('.selectpicker').selectpicker('refresh')
// Listen to single language checkbox change to adapt languages menus
$('#settings-general-single_language').on('change', function() {
if ($(this).prop('checked')) {
$('#settings-general-serie_default_language').selectpicker({maxOptions:1}).selectpicker('refresh');
$('#settings-general-movie_default_language').selectpicker({maxOptions:1}).selectpicker('refresh');
$('#settings-general-serie_default_language').selectpicker('val', $('#settings-general-serie_default_language').val()[0]);
$('#settings-general-movie_default_language').selectpicker('val', $('#settings-general-movie_default_language').val()[0]);
} else {
$('#settings-general-serie_default_language').selectpicker({maxOptions:false}).selectpicker('refresh');
$('#settings-general-movie_default_language').selectpicker({maxOptions:false}).selectpicker('refresh');
}
});
// Hide *_div on default-enabled change
$('#settings-general-serie_default_enabled').on('change', function() {
if ($(this).prop('checked')) {
$('#series_default_div').show();
} else {
$('#series_default_div').hide();
}
});
$('#settings-general-movie_default_enabled').on('change', function() {
if ($(this).prop('checked')) {
$('#movies_default_div').show();
} else {
$('#movies_default_div').hide();
}
});
// Set Checkbox input values
$('#settings-general-single_language').prop('checked', {{'true' if settings.general.getboolean('single_language') else 'false'}}).trigger('change');
$('#settings-general-serie_default_enabled').prop('checked', {{'true' if settings.general.getboolean('serie_default_enabled') else 'false'}}).trigger('change');
$('#settings-general-serie_default_hi').prop('checked', {{'true' if settings.general.getboolean('serie_default_hi') else 'false'}}).trigger('change');
$('#settings-general-movie_default_enabled').prop('checked', {{'true' if settings.general.getboolean('movie_default_enabled') else 'false'}}).trigger('change');
$('#settings-general-movie_default_hi').prop('checked', {{'true' if settings.general.getboolean('movie_default_hi') else 'false'}}).trigger('change');
$('#save_button').on('click', function() {
var formdata = new FormData(document.getElementById("settings_form"));
// Make sure empty default languages select are send (bug in bootstrap-select)
if (formdata.get('settings-general-serie_default_language') == null) {
formdata.append('settings-general-serie_default_language', null)
}
if (formdata.get('settings-general-movie_default_language') == null) {
formdata.append('settings-general-movie_default_language', null)
}
// Make sure all checkbox input are sent with true/false value
$('input[type=checkbox]').each(function () {
formdata.set($(this).prop('id'), $(this).prop('checked'));
});
$.ajax({
url: "{{ url_for('api.savesettings') }}",
data: formdata,
processData: false,
contentType: false,
type: 'POST',
complete: function () {
$('#save_button_checkmark').show();
form_changed = false;
$('#save_button').prop('disabled', true).css('cursor', 'not-allowed');
setTimeout(
function()
{
$('#save_button_checkmark').hide();
}, 2000);
}
});
});
function getLanguages() {
$.ajax({
url: "{{ url_for('api.languages') }}?enabled=false",
success: function (data) {
$('#enabled_languages').empty();
$.each(data, function (i, item) {
$('#enabled_languages').append('<option value="' + item.code2 + '">' + item.name + '</option>');
});
getEnabledLanguages();
$("#enabled_languages").selectpicker("refresh");
}
});
}
function getEnabledLanguages() {
$.ajax({
url: "{{ url_for('api.languages') }}?enabled=true",
success: function (data) {
let optArr = [];
$.each(data, function (i, item) {
optArr.push(item.code2);
});
$('#enabled_languages').selectpicker('val', optArr);
}
});
}
// monitor changes to the settings_form
setTimeout(
function()
{
$('#settings_form').on('change', function() {
form_changed = true;
$('#save_button').prop('disabled', false).css('cursor', 'auto');
})
}, 1000);
});
</script>
{% endblock tail %}