anime_downloader/templates/anime_downloader_ohli24_queue.html

{% extends "base.html" %}
{% block content %}

    <div>
        {{ macros.m_button_group([['reset_btn', '초기화'], ['delete_completed_btn', '완료 목록 삭제'], ['go_ffmpeg_btn', 'Go FFMPEG']]) }}
        {{ macros.m_row_start('0') }}
        {{ macros.m_row_end() }}
        {{ macros.m_hr_head_top() }}
        {{ macros.m_row_start('0') }}
        {{ macros.m_col(1,  macros.m_strong('Idx')) }}
        {{ macros.m_col(2,  macros.m_strong('CreatedTime')) }}
        {{ macros.m_col(4,  macros.m_strong('Filename')) }}
        {{ macros.m_col(3,  macros.m_strong('Status')) }}
        {{ macros.m_col(2,  macros.m_strong('Action')) }}
        {{ macros.m_row_end() }}
        {{ macros.m_hr_head_bottom() }}
        <div id="download_list_div"></div>
    </div> <!--전체-->


        <script src="{{ url_for('.static', filename='js/sjva_ui14.js') }}"></script>
    <script type="text/javascript">
        var package_name = "{{arg['package_name'] }}";
        var sub = "{{arg['sub'] }}";
        var current_data = null;
        {#socket = io.connect(window.location.protocol + "//" + document.domain + ":" + location.port + "/" + package_name + '/' + sub);#}


        $(document).ready(function () {
            console.log(window.location.href)
            var socket = io.connect(window.location.href);
            console.log(socket)
            socket.on('on_start', (data) => {
                console.log('on_start().............')
                console.log(data)
            })
            socket.on('start', function (data) {
                console.log('socket start()')
                on_start();
            });
            socket.on('list_refresh', function (data) {
                on_start()
            });

            socket.on('status', function (data) {
                // console.log(data);
                on_status(data)
            });


        });


        function on_start() {
            $.ajax({
                url: '/' + package_name + '/ajax/' + sub + '/entity_list',
                type: "POST",
                cache: false,
                data: {},
                dataType: "json",
                success: function (data) {
                    console.log("on_start():: ", data)
                    make_download_list(data)
                }
            });
        }


        function on_status(data) {
            console.log(data)
            console.log(data.percent)
            tmp = document.getElementById("progress_" + data.idx)
            if (tmp != null) {
                document.getElementById("progress_" + data.idx).style.width = data.percent + '%';
                document.getElementById("progress_" + data.idx + "_label").innerHTML = data.status_kor + "(" + data.percent + "%)" + ' ' + ((data.current_speed != null) ? data.current_speed : '')
            }
        }

        function make_download_list(data) {
            str = '';
            for (i in data) {
                str += m_row_start();
                str += m_col(1, data[i].entity_id);
                str += m_col(2, data[i].created_time);
                str += m_col(4, (data[i].filename != null) ? data[i].filename : '');

                label = data[i].ffmpeg_status_kor
                if (data[i].ffmpeg_percent != 0) {
                    label += '(' + data[i].ffmpeg_percent + '%)'
                }
                tmp = m_progress('progress_' + data[i].entity_id, data[i].ffmpeg_percent, label)
                str += m_col(3, tmp);
                tmp = m_button('program_cancel_btn', '취소', [{'key': 'id', 'value': data[i].entity_id}]);
                tmp = m_button_group(tmp)
                str += m_col(2, tmp)
                str += m_row_end();
                if (i != data.length - 1) str += m_hr(0);
            }
            document.getElementById("download_list_div").innerHTML = str;
        }

        $("body").on('click', '#program_cancel_btn', function (e) {
            e.preventDefault();
            entity_id = $(this).data('id')
            send_data = {'command': 'cancel', 'entity_id': entity_id}
            queue_command(send_data)
        });

        $("body").on('click', '#reset_btn', function (e) {
            e.preventDefault();
            entity_id = $(this).data('id')
            send_data = {'command': 'reset', 'entity_id': -1}
            queue_command(send_data)
        });

        $("body").on('click', '#delete_completed_btn', function (e) {
            e.preventDefault();
            entity_id = $(this).data('id')
            send_data = {'command': 'delete_completed', 'entity_id': -1}
            queue_command(send_data)
        });

        function queue_command(data) {
            $.ajax({
                url: '/' + package_name + '/ajax/' + sub + '/queue_command',
                type: "POST",
                cache: false,
                data: data,
                dataType: "json",
                success: function (ret) {
                    if (ret.ret == 'notify') {
                        $.notify('<strong>' + ret.log + '</strong>', {type: 'warning'});
                    }
                    on_start();
                }
            });
        }

        $("body").on('click', '#go_ffmpeg_btn', function (e) {
            e.preventDefault();
            $(location).attr('href', '/ffmpeg')
        });

    </script>
    <style>
    #progress_1_label {
        color: #966f93;
        font-weight: 700;
    }
    </style>
{% endblock %}