code/default/launcher/web_ui/config_applist.html - master - githubmirror/XX-Net

code/default/launcher/web_ui/config_applist.html
117 строк4 KB
XX-Net.dev
4.7.8, Improve the Android config UI layout.
15 мар 2022, 06:28
15 мар 2022, 06:28611bd36
<div class="row-fluid">
    <div class="config_label">
        <label for="proxy_by_app">{{ _( "Proxy by APP" ) }} </label>
    </div> <!-- .span4 -->
    <div class="config_switch">
        <input id="proxy_by_app" type="checkbox" data-toggle="switch"/>
    </div> <!-- .span8 -->
</div> <!-- .row-fluid -->

<div id="loading_animation">
    <img src="img/loading-buffering.gif">
</div>

<p class="tip">* {{ _( "Select which APP should be proxied. You need to restart VPN after change this." ) }}</p>

<div id="app_config" style="display: none">
    <div class="row-fluid">
        <div class="config_label">
            <label for="select_all">{{ _( "Select All" ) }} </label>
        </div> <!-- .span4 -->
        <div class="config_switch">
            <input id="select_all" type="checkbox" data-toggle="switch"/>
        </div> <!-- .span8 -->
    </div> <!-- .row-fluid -->

    <hr>
    <div id="installed-app-list">
    </div>
</div>

<div class="row-fluid">
    <div class="span12">
        <button class="btn btn-primary btn-block" id="save_app_config">{{ _( "Save" ) }}</button>
    </div> <!-- .span12 -->
</div> <!-- .row-fluid -->

<script type="text/javascript">

    $('#proxy_by_app').change(function () {
        var isChecked = $(this).is(':checked');
        if (isChecked) {
            $('#app_config').slideDown();
        } else {
            $('#app_config').slideUp();
        }
    });


    $('#select_all').change(function () {
        var isChecked = $(this).is(':checked');
        if (isChecked) {
            enabled_app_list = [];
            $('.app_item').each(function(i, obj) {
                obj.checked = true;
                obj.parentElement.classList.remove("switch-off");
                obj.parentElement.classList.add("switch-on");
            });

        } else {
            $('.app_item').each(function(i, obj) {
                obj.checked = false;
                obj.parentElement.classList.remove("switch-on");
                obj.parentElement.classList.add("switch-off");
            });
        }
    });

    $(function () {
        $("#installed-app-list").load('/installed_app', function() {
            $('[data-toggle=switch]').wrap('<div class="switch" />').parent().bootstrapSwitch();

            if ($("#proxy_by_app_config").attr( "checked" ) == "checked") {
                $('#proxy_by_app').parent().removeClass("switch-off");
                $('#proxy_by_app').parent().addClass("switch-on");
                $('#proxy_by_app').attr('checked','checked');

                $('#app_config').slideDown();
            }
            $("#loading_animation").hide();
        });
    });

    $("#save_app_config").click( function() {
        var enabled_app_list = [];
        var apps = $('.app_item');
        for (var i=0; i<apps.length; i++) {
            var obj = apps[i];
            if (obj.checked) {
                enabled_app_list.push(obj.id);
                console.log(obj.id);
            }
        }

        var config = {
            'proxy_by_app': $('#proxy_by_app').is(':checked'),
            'enabled_app_list': enabled_app_list
        };

        $.ajax({
            type: 'POST',
            url: '/set_proxy_applist',
            data: config,
            dataType: 'JSON',
            success: function (result) {
                if (result['res'] == 'success') {
                    tip('{{ _( "Settings saved successfully, Please restart VPN." ) }}', 'success');
                } else {
                    tip('{{ _( "Failed saving settings: " ) }}'+ result['reason'], 'error');
                }
            },
            error: function () {
                tip('{{ _( "Failed saving settings." ) }}', 'error');
            }
        });
    });

</script>