|
|
@@ -0,0 +1,144 @@
|
|
|
+<!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">×</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>
|
