dagarcos
/
dbcds_s6_2


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
							<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="favicon.ico">

    <title>Fraud API client</title>

    <!-- Bootstrap core CSS -->
    <link href="dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="dist/css/album.css" rel="stylesheet">
  </head>

  <body>

    <header>
      <div class="navbar navbar-dark bg-dark box-shadow">
        <div class="container d-flex justify-content-between">
          <a href="#" class="navbar-brand d-flex align-items-center">
            <strong>Fraud API client</strong>
          </a>
          <span class="btn btn-primary" id="new_doc" style="float:right;top:0;">New document</span>
          <span class="btn btn-warning" id="clear_btn" style="float:right;top:0;">Clear</span>
        </div>
      </div>
    </header>

    <main role="main">
      <div class="album py-5 bg-light">
        <div class="container">       
          <div class="row" id="notification_container">

          </div>
        </div>
      </div>


    </main>


    <div class="modal modal-lg fade" id="fraud_check_modal" tabindex="-1" role="dialog" aria-labelledby="fraud_check" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Send document to fraud check</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label>Document name</label>
                        <input type="text" class="form-control" placeholder="example.pdf" id="doc_name">
                    </div>
                    <div class="form-group">
                        <label>Owner email</label>
                        <input type="email" class="form-control" placeholder="owner@email.com" id="doc_owner">
                    </div>
                    <div class="form-group">
                        <label>Content</label>
                        <textarea class="form-control" rows="5" id="doc_content">Text goes here...</textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <span class="btn btn-primary" onclick="send_document();" data-dismiss="modal">Send</span>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>  
        </div>
      </div>
    </div>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="assets/js/vendor/jquery-slim.min.js"></script>
    <script src="assets/js/vendor/popper.min.js"></script>
    <script src="dist/js/bootstrap.min.js"></script>
    <script src="assets/js/vendor/holder.min.js"></script>

    <script>

        $(document).ready(function(){
            $('#new_doc').click(function(){$("#fraud_check_modal").modal().show();});
            $('#clear_btn').click(function(){clear_notifications();});
            
            get_notifications();
            setInterval(get_notifications, 1000);
        });
        
        function get_notifications(){
            $.get('http://127.0.0.1:8080/api/v1/notifications', function(data) {
                $('#notification_container').html('');
                data.forEach((item, i) => {
                    $(notification_assembler(item)).appendTo($('#notification_container'));
                });
            });
        }
        
          
        function notification_assembler(item){
            return $.parseHTML(`<div class="col-md-4">
                                <div class="card mb-4 box-shadow ${item.fraud ? 'alert alert-danger' : 'alert alert-success'}">
                                <span class="card-text">${item.date}</span>
                                <span class="card-text">${item.fraud ? '<span>Fraud detected in document:</span>' : '<span>No fraud detected in document:</span>'}</span>
                                <div class="card-body">
                                <strong class="card-text">${item.document.name}</strong><br>
                                <span class="card-text">${item.document.owner}</span>
                                </div>
                                <span>${item.document.content.slice(0,270)}...</span>    
                            </div>
                            </div>`);
        }
        
        function send_document(){           
            $.ajax({
                contentType: 'application/json',
                data: JSON.stringify({name:$('#doc_name').val(), content:$('#doc_content').val(), owner:$('#doc_owner').val()}),
                dataType: 'json',
                type: 'POST',
                url: 'http://127.0.0.1:8080/api/v1/documents'
            });
            $("#fraud_check_modal").modal().hide();
        }
        
        function clear_notifications(){           
            $.ajax({
                url: 'http://127.0.0.1:8080/api/v1/notifications',
                type: 'DELETE'
            });
        }

         
    </script>

  </body>
</html>