{% extends 'base_software.html' %}

{% from 'host/common.html' import edit_field %}

{% block head %}

<script src="/static/jquery/js/select_server_repo.js"></script>
<script src="/static/jquery/js/select_files.js"></script>

<script>

$(function() {
    var browse_spinner = $('#browse-spinner');
    browse_spinner.hide();

    var select_server_repo = $('#select-server').SelectServerRepo();
    select_server_repo.initialize_servers_by_region(0);

    $('.wizard-card').bootstrapWizard({
        'tabClass': 'nav nav-pills',
        'nextSelector': '.btn-next',
        'previousSelector': '.btn-previous',

        onInit : function(tab, navigation, index){

            //check number of tabs and fill the entire row
            var $total = navigation.find('li').length;
            $width = 100/$total;

            $display_width = $(document).width();
            if($display_width < 600 && $total > 3){
                $width = 50;
            }

            navigation.find('li').css('width',$width + '%');

        },
        onNext: function(tab, navigation, index){
            if(index == 1){
                var selected = file_selector.get_selected_items();
                tar_contents_table.api().ajax.url("/tools/api/get_tar_contents?files[]=" + selected).load();
            }
        },
        onTabClick : function(tab, navigation, index){
            // Disable the possibility to click on tabs
            return false;
        },
        onTabShow: function(tab, navigation, index) {
            var $total = navigation.find('li').length;
            var $current = index+1;

            var wizard = navigation.closest('.wizard-card');

            // If it's the last tab then hide the last button and show the finish instead
            if($current >= $total) {
                $(wizard).find('.btn-next').hide();
                $(wizard).find('.btn-finish').show();
            } else {
                $(wizard).find('.btn-next').show();
                $(wizard).find('.btn-finish').hide();
            }
        }
    });

    var tar_contents_table = $("#tar-contents-datatable").dataTable({
        "order": [
            [ 2, "asc" ]
        ],
        "pageLength": 100,
        "scrollY": 250,
        "columnDefs": [{
            "sortable": false,
            "targets": 0,
            "data" : 'file',
            "render": function ( data, type, row ) {
                return '<center><input type="checkbox" value="' + data + '" class="check"></center>';
            }
        }, {
            "targets": 1,
            "data" : 'filename'
        }, {
            "targets": 2,
            "data": 'source_tar'
        } ]
    });

    $('#on-finish-submit').on('click', function(e) {
        browse_spinner.show();

        var new_tar_name = $('#new_tar_name').val();
        var acceptable_string = get_acceptable_string(new_tar_name).trim();
        var job_id;

        if (acceptable_string != new_tar_name) {
            var message = get_acceptable_string_message('Filename', new_tar_name, acceptable_string);
            bootbox.confirm(message, function(result) {
                if (result) {
                    $('#new_tar_name').val(acceptable_string.trim());
                }
            });
            browse_spinner.hide();
            return false;
        } else if (new_tar_name.trim() == '') {
            bootbox.alert("New Tar File Name has not been specified.");
            browse_spinner.hide();
            return false;
        }

        if (select_server_repo.get_server_id() == -1) {
            bootbox.alert('Server repository has not been specified.');
            browse_spinner.hide();
            return false;
        }

        $(window).bind('beforeunload', function(){
            return 'You will not be able to see the progress, including completion or failure messages, once you have left this page.';
        });

        var tar_contents = [];
        $('.check').each(function(index) {
            if (this.checked) {
                tar_contents.push($(this).val());
            }
        });

        var additional_packages = sp_file_selector.get_selected_items();
        var source_tars = file_selector.get_selected_items();

        $.ajax({
            url: "/tools/api/create_tar_job",
            dataType: 'json',
            type: "POST",
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify({
                source_tars: source_tars,
                tar_contents: tar_contents,
                additional_packages: additional_packages,
                server_id: select_server_repo.get_server_id(),
                server_directory: select_server_repo.get_server_directory(),
                new_tar_name: new_tar_name
            }),
            success: function(data) {
                progressSpan = $('#progress span');
                //progressSpan.html('Job Submitted.');
                if (data.status == 'OK') {
                    job_id = data.job_id;
                    update_progress(job_id);
                } else {
                    bootbox.alert('<img src="/static/error.png">&nbsp;Following errors were encountered: <br><br>' + comma2br(data.status));
                }
            },

            error: function(XMLHttpRequest, textStatus, errorThrown) {
                browse_spinner.hide();
                alert(errorThrown);
            }
        });

        return false;
    });


    $('#tar-contents-check-all').click(function () {
        toggle_check_all(tar_contents_table, this);
    });

    function toggle_check_all(data_table, this_instance) {
        var filtered_rows = data_table.$('tr', {"filter": "applied"});
        for (var i = 0; i < filtered_rows.length; i++) {
          $(filtered_rows[i]).find('.check').prop('checked', this_instance.checked);
        }
    }

    function update_progress(job_id){
        $.ajax({
            url: "/tools/api/get_progress",
            dataType: 'json',
            data: {
                job_id: job_id
            },
            success: function(data) {
                progressSpan = $('#progress span');
                if(data.progress != "completed" && data.progress != "failed"){
                    if(data.progress != null){
                        progressSpan.html(data.progress);
                    }
                    setTimeout(function(){update_progress(job_id);}, 10000);
                } else if (data.progress == "failed"){
                      browse_spinner.hide();
                      progressSpan.html('');
                      $(window).unbind('beforeunload');
                      bootbox.alert("Tar creation has encountered an error and failed.", function() {
                          window.location = "{{ url_for('tools.create_tar_file') }}";
                      });
                } else {
                      browse_spinner.hide();
                      progressSpan.html('');
                      $(window).unbind('beforeunload');
                      bootbox.alert("Tar creation has been successful!", function() {
                          window.location = "{{ url_for('tools.create_tar_file') }}";
                      });
                }
            }
        });
    }
});

</script>

<style>
    .nav-pills>li>a {
        border-radius: 0px;
    }
</style>

{% endblock %}

{% block main %}
<form id="form" class="form-horizontal">
<div class="row">
    <div class="col-sm-8 col-sm-offset-2">
        <!--      Wizard container        -->
        <div id="wizard-dialog" class="wizard-container">
            <div class="card wizard-card wizard-border csm-blue" id="wizard">
                <form class="form-horizontal" method="post">
                    <div class="wizard-header">
                        <h3>
                            Create Tar File <br>
                        </h3>
                    </div>
                    <ul>
                        <li><a href="#tar_file_list" data-toggle="tab">RELEASE SOFTWARE</a></li>
                        <li><a href="#tar_contents_list" data-toggle="tab">TAR CONTENTS</a></li>
                        <li><a href="#additional_files_list" data-toggle="tab">ADDITIONAL FILES</a></li>
                        <li><a href="#select_server_tab" data-toggle="tab">SERVER REPOSITORY</a></li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane" id="tar_file_list">
                            <div class="col-sm-12">
                                <div class="form-group row">
                                    <h4 class="info-text">Select from the available Release Software files in csm_data/repository to extract their contents.</h4>
                                    <select id="file-selector" name="file-selector" multiple="multiple" data-title="Tar-Files" data-json=false></select>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane" id="tar_contents_list">
                            <div class="col-sm-12">
                                <h4 class="info-text">The following are the contents from the selected tar files. Select which files should be included.</h4>
                            <table cellspacing="0" class="display table" id="tar-contents-datatable">
                                <thead>
                                  <tr>
                                    <th>
                                        <center><input type='checkbox' id='tar-contents-check-all'></center>
                                    </th>
                                    <th>File Name</th>
                                    <th>Source Tar</th>
                                  </tr>
                                </thead>
                              </table>
                              </div>
                        </div>
                        <div class="tab-pane" id="additional_files_list">
                            <div class="col-sm-12">
                                <div class="form-group row">
                                    <h4 class="info-text">Select any additional files from csm_data/repository that should be included.</h4>
                                    <select id="sp-file-selector" name="sp-file-selector" multiple="multiple" data-title="Files" data-json=false></select>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane" id="select_server_tab">
                            <div class="col-sm-12">
                                <h4 class="info-text">Select the destination server repository for uploading the new tar file.</h4>
                                {{ edit_field(form.new_tar_name, class="form-control") }}
                                <div><div id="select-server" data-name="select-server"></div></div>
                            </div>
                            <div id="progress" align="center" margin-top="3cm">
                                <img id="browse-spinner" src="{{ url_for('static', filename='spinner.gif') }}">
                                <span style="font-weight:700;color:green"></span>
                            </div>
                        </div>
                    </div>
                    <div class="wizard-footer">
                        <div class="pull-right">
                            <input type='button' class='btn btn-next btn-fill btn-primary btn-wd btn-sm' name='next' value='Next' />
                            <input id='on-finish-submit' data-dismiss="modal" type='button' class='btn btn-finish btn-fill btn-primary btn-wd btn-sm' name='finish' value='Finish' />
                        </div>
                        <div class="pull-left">
                            <input type='button' class='btn btn-previous btn-fill btn-default btn-wd btn-sm' name='previous' value='Previous' />
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </form>
            </div>
        </div>
        <!-- wizard container -->
    </div>
</div>
</form>

{% endblock %}