dagarcos
/
dbcds_s8_2


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226
							<!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>Reactive 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>Reactive API client</strong>
          </a>
          <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" style="height:40px;padding-bottom:0px !important;padding-top:25px !important;margin-top:0px;">
        <div class="" style="height:40px;margin-left:100px;">       
          <div class="row" id="menu" style="max-height:40px;">
            <span class="btn btn-primary" id="new_doc" style="height:40px;margin-right:25px;">New document</span>
            <span class="btn btn-primary" id="get_elements" style="height:40px;margin-right:25px;">Retrieve All</span>
            <div class="input-group mb-1" style="height:40px;margin-right:25px;width:auto;">
                <span class="btn btn-primary" id="get_doc">Retrieve by id</span>
                <div class="input-group-append">
                    <input class="input-group-text" id="get_num_doc" type="text" size="3" style="width: 80px;"> </span>
                </div>
            </div>
            <div class="input-group mb-1" style="height:40px;margin-right:25px;width:auto;">
                <span class="btn btn-primary" id="get_doc_author">Retrieve by author</span>
                <div class="input-group-append">
                    <input class="input-group-text" id="get_author" type="text" style="width: 300px;"> </span>
                </div>
            </div>
            <div class="input-group mb-1" style="height:40px;margin-right:25px;width:auto;">
                <span class="btn btn-primary" id="get_doc_publisher">Retrieve by publisher</span>
                <div class="input-group-append">
                    <input class="input-group-text" id="get_publisher" type="text" style="width: 300px;"> </span>
                </div>
            </div>
          </div>
        </div>
      </div>
      <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="new_modal" tabindex="-1" role="dialog" aria-labelledby="#new_modal" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add a new document</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>Title</label>
                        <input type="text" class="form-control" placeholder="" id="doc_title">
                    </div>
                    <div class="form-group">
                        <label>Publisher</label>
                        <input type="email" class="form-control" placeholder="" id="doc_publisher">
                    </div>
                    <div class="form-group">
                        <label>Author</label>
                        <input type="email" class="form-control" placeholder="" id="doc_author">
                    </div>
                    <div class="form-group">
                        <label>Content</label>
                       <textarea class="form-control" rows="5" id="doc_content"></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>

        var base_url = 'http://127.0.0.1:8080/api/v1/news';
        
        $(document).ready(function(){
            $('#new_doc').click(function(){$("#new_modal").modal().show();});
            $('#clear_btn').click(function(){clear();});
            $('#get_doc').click(function(){get_document($('#get_num_doc').val())});
            $('#get_num_doc').keypress(function(event){
                var keycode = (event.keyCode ? event.keyCode : event.which);
                if(keycode == '13'){ get_document($('#get_num_doc').val()); }
            });
            $('#get_elements').click(function(){get_documents()});
            $('#get_doc_author').click(function(){filter_documents('author', $('#get_author').val())});
            $('#get_author').keypress(function(event){
                var keycode = (event.keyCode ? event.keyCode : event.which);
                if(keycode == '13'){ filter_documents('author', $('#get_author').val()); }
            });
            $('#get_doc_publisher').click(function(){filter_documents('publisher', $('#get_publisher').val())});
            $('#get_publisher').keypress(function(event){
                var keycode = (event.keyCode ? event.keyCode : event.which);
                if(keycode == '13'){ filter_documents('publisher', $('#get_publisher').val()); }
            });
            
        });
        
        function get_document(id){
            fetch(base_url+'/'+id) 
                .then(r => r.json())
                .then(d => {
                    $(assembler(d)).appendTo($('#notification_container'));
                })
                .catch(err=>{});
        }
        
        function filter_documents(t, x){
            clear();
            var evtSource = new EventSource(base_url+'/'+t+'/'+encodeURIComponent(x));
            evtSource.onmessage = function (event) {
                if(!event){ evtSource.close(); console.log("[I] Filter event closed");}
                $(assembler(JSON.parse(event.data))).appendTo($('#notification_container'));
            }
            evtSource.onerror = function(event) {
                evtSource.close();
            }
        }
        
        function get_documents(){
            clear();
            var evtSource = new EventSource(base_url);
            evtSource.onmessage = function (event) {
                $(assembler(JSON.parse(event.data))).appendTo($('#notification_container'));
            }
            evtSource.onerror = function(event) {
                evtSource.close();
            }
        }
               
        function assembler(item){
            return $.parseHTML(`<div class="col-md-4" style="padding:10px;" id="video_${item.id}">
                                <div class="card mb-4 box-shadow" style="padding:10px;">
                                  <span class="card-text btn-secondary" style="width:55px;border-radius:3%;margin-right:10px;text-align:center;">${item.id}</span>
                                  <br>
                                  <strong class="card-text">${item.title}</strong>
                                  <div class="card-body">
                                    <span class="card-text"><small>${item.date_add}</small></span><br>
                                    <span class="card-text"><small>Publisher: ${item.publisher}</small></span><br>
                                    <span class="card-text"><small>Author: ${item.author}</small></span>
                                  </div>
                                <span>${item.content}...</span>    
                                <div class="d-flex justify-content-between align-items-center">
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-sm btn-outline-secondary" onclick="remove('${item.id}');">Remove</button>
                                    </div>
                                </div>
                            </div>
                            </div>`);
        }
        
        function send_document(){              
            const options = {
                method: "POST",
                headers: new Headers({'content-type': 'application/json'}),
                body: JSON.stringify({title:$('#doc_title').val(), publisher:$('#doc_publisher').val(), author:$('#doc_author').val(), content:$('#doc_content').val()})
            };
            
            fetch(base_url, options)
                .then(r => r.json())
                .then(d => {get_document(d.id);})
                .catch(err => {console.log(err);});
            
            $("#new_modal").modal().hide();
        }
        
        function remove(id){ 
            const options = {
                method: "DELETE",
            };
            
            fetch(base_url+'/'+id, options)
                .then(r => {$('#video_'+id).remove();})
                .catch(err => {console.log(err);});
        }
        
        function clear(){
            $('#notification_container').html('');
        }
        
    </script>

  </body>
</html>