Radarr/NzbDrone.Web/Views/Settings/DownloadClient.cshtml

@using NzbDrone.Web.Helpers;
@model NzbDrone.Web.Models.DownloadClientSettingsModel

@{
    Layout = "_SettingsLayout.cshtml";
}

<style>
    .downloadClient
    {
        overflow: auto;
    }
    
    .downloadClient h4
    {
        font-weight: bold;
        margin-bottom: 0px;
        padding-left: 5px;
        padding-top: 3px;
    }
    
    #save_button
    {
        margin-top: 10px;
    }
    
    #downloadClient-top
    {
        overflow: auto;
    }
</style>
<div id="stylized">
    @using (Html.BeginForm("SaveDownloadClient", "Settings", FormMethod.Post, new { id = "DownloadClientForm", name = "DownloadClientForm", @class = "settingsForm" }))
    {
        <div id="downloadClient-top" class="settingsForm">
            <label class="labelClass">@Html.LabelFor(m => m.DownloadClient)
                <span class="small">@Html.DescriptionFor(m => m.DownloadClient)</span>
            </label>
            @Html.DropDownListFor(m => m.DownloadClient, Model.DownloadClientSelectList, new { @class = "inputClass selectClass" })
            <label class="labelClass">@Html.LabelFor(m => m.DownloadClientDropDirectory)
                <span class="small">@Html.DescriptionFor(m => m.DownloadClientDropDirectory)</span>
                <span class="small">@Html.ValidationMessageFor(m => m.DownloadClientDropDirectory)</span>
            </label>
            @Html.TextBoxFor(m => m.DownloadClientDropDirectory, new { @class = "inputClass folderLookup" })
        </div>
        
        <div class="jquery-accordion" id="downloadClientAccordion">
            <h3><a href="#">Sabnzbd</a></h3>
            @{Html.RenderPartial("Sabnzbd", Model);}
            
            <h3><a href="#">Blackhole</a></h3>
            @{Html.RenderPartial("Blackhole", Model);}
            
            <h3><a href="#">Pneumatic</a></h3>
            @{Html.RenderPartial("Pneumatic", Model);}
        </div>
            
        <button type="submit" class="save_button" disabled="disabled">
            Save</button>
    }
</div>
<div id="result" class="hiddenResult">
</div>

<script type="text/javascript">
    $(document).ready(function () {
        $('#downloadClientAccordion').accordion("activate", false);

        //Allow unobstrusive validation of the AJAX loaded form
        $.validator.unobtrusive.parse('#DownloadClientForm');

        //Validator Settings
        var settings = $.data($('#DownloadClientForm')[0], 'validator').settings;
        settings.ignore = [];
        settings.focusInvalid = false;
        settings.onfocusout = function (element) { $(element).valid(); };

        var oldHighlight = settings.highlight;
        var oldUnhighlight = settings.unhighlight;

        settings.highlight = function (element, errorClass, validClass) {
            oldHighlight(element, errorClass, validClass);
            $(element).parents('div.ui-accordion-content').prev('h3.ui-accordion-header').addClass('validation-error');
        };
        settings.unhighlight = function (element, errorClass, validClass) {
            oldUnhighlight(element, errorClass, validClass);

            var container = $(element).parents('div.ui-accordion-content');
            if ($(container).children('.' + errorClass).length == 0)
                $(container).prev('h3.ui-accordion-header').removeClass('validation-error');
        };
    });

    $(document).on('change', '#DownloadClient', function () {
        $("#DownloadClientForm").validate().form();

        var container = $('div.ui-accordion-content');
        if ($(container).children('.input-validation-error').length == 0)
            $(container).prev('h3.ui-accordion-header').removeClass('validation-error');
    });

    var autoConfigureSabUrl = '@Url.Action("AutoConfigureSab", "Settings")';

    function autoConfigureSab() {
        $.ajax({
            type: "GET",
            url: autoConfigureSabUrl,
            error: function (req, status, error) {
                alert("Sorry! We could not autoconfigure SABnzbd for you");
            },
            success: autoConfigureSuccess
        });

        function autoConfigureSuccess(data) {
            $('#SabHost').val(data.Host);
            $('#SabPort').val(data.Port);
            $('#SabApiKey').val(data.ApiKey);
        }
    }
    var sabCategoryUrl = '../Command/GetSabnzbdCategories';

    $('#SabTvCategory').focus(function () {
        var host = $('#SabHost').val();
        var port = $('#SabPort').val();
        var apiKey = $('#SabApiKey').val();
        var username = $('#SabUsername').val();
        var password = $('#SabPassword').val();

        $.ajax({
            type: "POST",
            url: sabCategoryUrl,
            data: jQuery.param({ host: host, port: port, apiKey: apiKey, username: username, password: password }),
            error: function (req, status, error) {
                $.each($('#SabTvCategory option'), function () {
                    $(this).remove();
                });

                $('#SabTvCategory').append($('<option />').val('tv').text('Please check your SABnzbd Settings'));
            },
            success: function (data, textStatus, jqXHR) {
                //Get the current value
                var currentlySelected = $('#SabTvCategory').val();

                //Remove all existing options
                $.each($('#SabTvCategory option'), function () {
                    $(this).remove();
                });

                //Add the new ones
                $.each(data.categories, function () {
                    $('#SabTvCategory').append($('<option />').val(this.toString()).text(this.toString()));
                });

                //Attempt to reset to the preiously selected value (change to lower-case)
                $("#SabTvCategory").val(currentlySelected.toLowerCase());
            }
        });
    });
</script>