dagarcos
/
dbcds_s4_2


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183
							<!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>Hateoas Videos 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>Videos API</strong>
          </a>
        </div>
      </div>
    </header>

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

          </div>
          <nav aria-label="Page navigation example">
              <ul class="pagination">
                <li class="page-item" id="btn_first" in_href="" onclick="get_video_page(this);"><span class="page-link"><<</span></li>
                <li class="page-item" id="btn_prev" in_href="" onclick="get_video_page(this);"><span class="page-link"><</span></li>
                <li class="page-item" id="btn_curr" in_href="" onclick="get_video_page(this);"><span class="page-link" href="#" id="current_page">1</span></li>
                <li class="page-item" id="btn_next" in_href="" onclick="get_video_page(this);"><span class="page-link">></span></li>
                <li class="page-item" id="btn_last" in_href="" onclick="get_video_page(this);"><span class="page-link">>></span></li>
              </ul>
         </nav>
        </div>
      </div>


    </main>


    <div class="modal modal-lg fade" id="authors_modal" tabindex="-1" role="dialog" aria-labelledby="authors_modal_label" aria-hidden="true">
      <div class="modal-dialog" role="document" id="authors_modal_content">
      </div>
    </div>

    <div class="modal  modal-lgfade" id="comments_modal" tabindex="-1" role="dialog" aria-labelledby="comments_modal_label" aria-hidden="true">
      <div class="modal-dialog" role="document" id="comments_modal_content">
      </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(){
            $.get('http://127.0.0.1:8080/api/v1/videos?page=0&size=6', function(data) {
                $('#box_container').html('');
                console.log(data._links);
                data._embedded.videoList.forEach((item, i) => {
                      $(video_assembler(item)).appendTo($('#box_container'));
                });
                if('first' in data._links){$('#btn_first').attr('in_href', data._links.first.href);}
                if('prev' in data._links){$('#btn_prev').attr('in_href', data._links.prev.href);}
                if('next' in data._links){$('#btn_next').attr('in_href', data._links.next.href);}
                if('last' in data._links){$('#btn_last').attr('in_href', data._links.last.href);}
                $('#btn_self').attr('in_href', data._links.self.href);
                $('#current_page').html(data.page.number+1);
              });
        });

          function get_video_page(obj){
              $.get($(obj).attr('in_href'), function(data) {
                  $('#box_container').html('');
                  data._embedded.videoList.forEach((item, i) => {
                        $(video_assembler(item)).appendTo($('#box_container'));
                  });
                  if('first' in data._links){$('#btn_first').attr('in_href', data._links.first.href);}
                  if('prev' in data._links){$('#btn_prev').attr('in_href', data._links.prev.href);}
                  if('next' in data._links){$('#btn_next').attr('in_href', data._links.next.href);}
                  if('last' in data._links){$('#btn_last').attr('in_href', data._links.last.href);}
                  $('#btn_self').attr('in_href', data._links.self.href);
                  $('#current_page').html(data.page.number+1);
                });
          }

          function video_assembler(item){
              return $.parseHTML(`<div class="col-md-4">
                                <div class="card mb-4 box-shadow">
                                  <img class="card-img-top" data-src="holder.js/100px225?theme=thumb&amp;bg=55595c&amp;fg=eceeef&amp;text=Thumbnail" alt="Thumbnail [100%x225]" style="height: 100px; width: 100%; display: block;" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22348%22%20height%3D%22225%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20348%20225%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_18650818d5c%20text%20%7B%20fill%3A%23eceeef%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A17pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_18650818d5c%22%3E%3Crect%20width%3D%22348%22%20height%3D%22225%22%20fill%3D%22%2355595c%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22116.7265625%22%20y%3D%22120.3%22%3EThumbnail%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" data-holder-rendered="true">
                                  <div class="card-body">
                                    <strong class="card-text">${item.title}</strong>
                                    <p class="card-text">${item.description}</p>
                                    <small class="text-muted">${item.addedDate}</small><br>
                                    <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_video('${item._links.self.href}');">Remove</button>
                                        <button type="button" class="btn btn-sm btn-outline-secondary" onclick="get_author('${item._links.user.href}');" data-toggle="modal" data-target="#authors_modal">Author</button>
                                        <button type="button" class="btn btn-sm btn-outline-secondary" onclick="get_comments('${item._links.all_comments.href}');" data-toggle="modal" data-target="#comments_modal">Comments</button>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>`);
          }

          function remove_video(url){
              $.ajax({
                url: url,
                type: 'DELETE',
                success: function(d) {
                    get_videos();
                }
            });
          }

          function get_author(url){
              $.get(url, function(item) {
                  $('#authors_modal_content').html('');
                  $($.parseHTML(`<div class="modal-content">
                                    <div class="modal-header">
                                      <h5 class="modal-title">Author info</h5>
                                      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                      </button>
                                    </div>
                                    <div class="modal-body">
                                      <p>${item.firstname} ${item.lastname}</p>
                                      <p>${item.email}</p>
                                      <p>${item.profession}</p>
                                    </div>
                                    <div class="modal-footer">
                                      <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                    </div>
                                  </div>`)).appendTo($('#authors_modal_content'));
              });
          }

          function get_comments(url){
              $.get(url, function(data) {
                  var m_0 = `<div class="modal-content">
                                    <div class="modal-header">
                                      <h5 class="modal-title">Comments</h5>
                                      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                      </button>
                                    </div>
                                    <div class="modal-body">`;
                  var m_1 = "";
                  var m_2 = `</div>
                              <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                              </div>
                            </div>`;
                  data.forEach((item, i) => {
                      m_1 += `<p>Comment: ${item.id}</p><p><small class="text-muted">${item.addedDate}</small></p><p style="line-break:anywhere;">${item.comment}</p><br><hr><br>`;
                  });
                  $('#comments_modal_content').html('');
                  $($.parseHTML(m_0+m_1+m_2)).appendTo($('#comments_modal_content'));
            });
          }

    </script>

  </body>
</html>