<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
        <title>Analysis Information Leak framework Dashboard</title>
    
        <!-- Core CSS -->
        <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
        <link href="{{ url_for('static', filename='font-awesome/css/font-awesome.css') }}" rel="stylesheet">
        <link href="{{ url_for('static', filename='css/sb-admin-2.css') }}" rel="stylesheet">
        <link href="{{ url_for('static', filename='css/dygraph_gallery.css') }}" rel="stylesheet" type="text/css" />
        <!-- JS -->
        <script type="text/javascript" src="{{ url_for('static', filename='js/dygraph-combined.js') }}"></script>
        <script language="javascript" src="{{ url_for('static', filename='js/jquery.js')}}"></script>
        <script src="{{ url_for('static', filename='js/jquery.flot.js') }}"></script>
        <script src="{{ url_for('static', filename='js/jquery.flot.pie.js') }}"></script>
        <script src="{{ url_for('static', filename='js/jquery.flot.time.js') }}"></script>
        <script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
        <script src="{{ url_for('static', filename='js/jquery.dataTables.min.js') }}"></script>
        <script src="{{ url_for('static', filename='js/dataTables.bootstrap.js') }}"></script>
        <script src="{{ url_for('static', filename='js/jquery.flot.js') }}"></script>
        <script src="{{ url_for('static', filename='js/jquery.flot.time.js') }}"></script>
        <script src="{{ url_for('static', filename='js/jquery.flot.stack.js') }}"></script>
    
        <style>
          .btn-link {
              color: #000000
          }
        </style>
    
    </head>
    <body>
        <!-- Modal -->
        <div id="mymodal" class="modal fade" role="dialog">
          <div class="modal-dialog modal-lg">
        
            <!-- Modal content-->
            <div id="mymodalcontent" class="modal-content">
              <div id="mymodalbody" class="modal-body" max-width="8500px">
                <p>Loading paste information...</p>
                <img id="loading-gif-modal" src="{{url_for('static', filename='image/loading.gif') }}" height="26" width="26" style="margin: 4px;">
              </div>
              <div class="modal-footer">
                <a id="button_show_plot" target="_blank" href=""><button type="button" class="btn btn-info">Plot term</button></a>
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              </div>
            </div>
          </div>
        </div>
        {% include 'navbar.html' %}
    
        <div id="page-wrapper">
            <div class="row">
              <div class="col-lg-12">
              <h1 class="page-header" data-page="page-termsfrequency" >Credential seeker</h1>
              </div>
				  <!-- /.col-lg-12 -->
    <!-- Panel OPTIONS -->
    <div class="row">
        <div class="col-lg-12">
            <div class="row">
                <div class="col-lg-12">
                    <div id="panel-today" class="panel panel-success">
                        <div class="panel-heading">
                            <strong>Credential seeker</strong>
                        </div>
                        <div class="panel-body">

                            <label><input type="checkbox" id="extensive" style="margin-bottom: 10px;"><strong>Extensive search (takes time)</strong></input></label>
                            <div class="form-group input-group" style="margin-bottom: 30px;">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-screenshot"></span></span>
                                <input id="seekInput" class="form-control" placeholder="Credential to seek." type="text" style="max-width: 400px;">
                                <button id="followTermBtn" class="btn btn-success btn-interaction" style="margin-left: 10px;" data-section="seek" data-action="seek"> Seek</button>
                                <span id="nodata" class="alert alert-info" style="margin-left: 10px; display: none; padding: 6px;">No data</span>
                            </div>

                            <table class="table table-striped table-bordered table-hover" id="myTable">
                                <thead>
                                     <tr>
                                        <th style="max-width: 800px;">Username</th>
                                        <th>Similarity</th>
                                        <th># concerned paste(s)</th>
                                        <th>Action</th>
                                     </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        <!-- /.panel-body -->
                    </div>
                </div>
                <!-- /.panel -->
            </div>
            <!-- /.panel -->
        </div>
    </div>

</div>
<!-- /.row -->
</div>
            <!-- /#page-wrapper -->

            <script>
                $(document).ready(function(){
                    activePage = $('h1.page-header').attr('data-page');
                    $("#"+activePage).addClass("active");

                    $('[data-toggle="tooltip"]').tooltip();
                    table_track = $('#myTable').DataTable({ "order": [[ 1, "dec" ]] });
            
                    table_track.on( 'draw.dt', function () {
                        perform_binding();
                    });

                    $("#seekInput").keyup(function(event){
                        if(event.keyCode == 13){
                            $("#followTermBtn").click();
                            $("#seekInput").val("");
                        }
                    });

                    perform_binding();

                    $("#mymodal").on('hidden.bs.modal', function () {
                        $("#mymodalbody").html("<p>Loading paste information...</p>");
                        var loading_gif = "<img id='loading-gif-modal' class='img-center' src=\"{{url_for('static', filename='image/loading.gif') }}\" height='26' width='26' style='margin: 4px;'>";
                        $("#mymodalbody").append(loading_gif); // Show the loading GIF
                    });
                });
            </script>

            <script>
                function perform_binding() {
                    $(".btn-interaction").unbind("click.interaction");
                    $(".btn-interaction").bind("click.interaction", perform_operation);
                }

                function perform_modal_binding() {
                    // On click, get html content from url and update the corresponding modal
                    $("[data-toggle='modal']").on("click.openmodal", function (event) {
                        event.preventDefault();
                        var the_modal=$(this);
                        var url = "{{ url_for('terms.credentials_management_query_paste')  }}?cred=" + encodeURIComponent($(this).attr('data-term'));
                        $.ajax({
                            type: 'POST',
                            url: url, 
                            dataType: "json",
                            data: JSON.stringify({ 'allPath': JSON.parse($(this).attr('data-path')) }),
                            contentType : "application/json"
                        }).done(function (data) {
                            if (data.length != 0) {
                                var html_to_add = "";
                                html_to_add += "<table id=\"modal-table\" class=\"table table-striped\">";
                                html_to_add += "<thead>";
                                  html_to_add += "<tr>";
                                    html_to_add += "<th>Source</th>";
                                    html_to_add += "<th>Date</th>";
                                    html_to_add += "<th>Encoding</th>";
                                    html_to_add += "<th>Size (Kb)</th>";
                                    html_to_add += "<th># lines</th>";
                                    html_to_add += "<th>Max length</th>";
                                    html_to_add += "<th>Preview</th>";
                                  html_to_add += "</tr>";
                                html_to_add += "</thead>";
                                html_to_add += "<tbody>";
                                for (i=0; i<data.length; i++) {
                                    curr_data = data[i];
                                        html_to_add += "<tr>";
                                            html_to_add += "<td>"+curr_data.source+"</td>";
                                            html_to_add += "<td>"+curr_data.date+"</td>";
                                            html_to_add += "<td>"+curr_data.encoding+"</td>";
                                            html_to_add += "<td>"+curr_data.size+"</td>";
                                            html_to_add += "<td>"+curr_data.lineinfo[0]+"</td>";
                                            html_to_add += "<td>"+curr_data.lineinfo[1]+"</td>";
                                            html_to_add += "<td><div class=\"row\"><button class=\"btn btn-xs btn-default\" data-toggle=\"popover\" data-placement=\"left\" data-content=\""+curr_data.content.replace(/\"/g, "\'")+"\">Preview content</button><a target=\"_blank\" href=\"{{ url_for('showsavedpastes.showsavedpaste') }}?paste="+curr_data.path+"&num=0\">  <button type=\"button\" class=\"btn btn-xs btn-info\">Show Paste</button></a></div></td>";

                                        html_to_add += "</tr>";
                                }
                                html_to_add += "</tbody>";
                                html_to_add += "</table>";
                                $("#mymodalbody").html(html_to_add);
                                $("[data-toggle=popover]").popover();
	                        $('#modal-table').DataTable();
                            } else {
                                $("#mymodalbody").html("No paste containing this term has been received yet.");
                            }
                        }
                    )});
                }
                
                function perform_operation(){
                    var curr_section = $(this).attr('data-section');
                    var curr_action = $(this).attr('data-action'); 
                    if (curr_action == "add") {
                        var curr_term = $('#'+curr_section+'Input').val();
                    } else if (curr_action == "seek") {
                        var curr_term = $('#'+curr_section+'Input').val();
                    } else {
                        var curr_term = $(this).attr('data-content');
                    }
                    var data_to_send = { section: curr_section, action:curr_action, term: curr_term, extensive: $("#extensive").is(":checked")};
                
                    if (curr_term != "") {
                        //console.log(data_to_send);
                        $.get("{{ url_for('terms.cred_management_action') }}", data_to_send, function(data, status){
                            if(status == "success") {
                                var json = data;
                
                                if(json.action == "add") {
                                    //not used for the moment

                                } else if (json.action == "seek") {
                                    table_track.clear().draw();
                                    var rep = json.data;
                                    //var action_button = "<button class=\"btn-link btn-interaction\" data-toggle=\"tooltip\" data-placement=\"left\" title=\"Track this term\" data-content=\"" + json.term + "\" data-section=\"followTerm\" data-action=\"add\">";
                                    var action_button = "";
                                    if (rep.usr.length == 0) {
                                        $( "#nodata" ).removeClass('alert-info').addClass('alert-danger');
                                        $( "#nodata" ).text("No data");
                                        $( "#nodata" ).fadeIn( "fast", function() {
                                            setTimeout(function() {
                                                $( "#nodata" ).fadeOut("fast");
                                            }, 2000);
                                        });
                                    } else {
                                        for(i=0; i < rep.usr.length; i++) {
                                            $( "#nodata" ).removeClass('alert-danger').addClass('alert-info');
                                            $( "#nodata" ).text(curr_term);
                                            $( "#nodata" ).fadeIn( "fast");
                                            toAdd = "</button><span data-toggle=\"modal\" data-target=\"#mymodal\" data-term=\""+rep.usr[i]+"\" data-path=\"["+rep.path[i]+"]\" ><button class=\"btn-link\" data-toggle=\"tooltip\" data-placement=\"right\" title=\"Show concerned paste(s)\"><span class=\"glyphicon glyphicon-info-sign\"></span></button></span>";
                                            table_track.row.add( [ 
                                                    rep.usr[i], 
                                                    rep.simil[i], 
                                                    rep.numPaste[i], 
                                                    toAdd+action_button ] ).draw( false );
                                        }
                                        perform_binding();
                                        perform_modal_binding();
                                    }
                                }                
                            }
                        });
                    }
                }
            </script>

        </body>

</html>
