release11-tools-mocked-services/src/main/resources/static/js/paggination.js

var state = {
  'querySet': [{
    "clientUUID": "436c4774-038f-4540-9c18-2691ca9b53d4",
    "mockedResponseId": 1908998,
    "mediaType": "application/xml",
    "messageBody": "body",
    "httpHeaders": null,
    "httpStatus": 200
  }],

  'page': 1,
  'rows': 10,
  'window': 5,
}

var myList, data, previousSort;
state.querySet = listForPagination;
buildTable();

var pubhost = location.hostname;
document.getElementById("pubhost").innerHTML = location.hostname;

document.querySelector('#btn-list-1').addEventListener('click', function() {
  var x = document.getElementById("list-wrapper");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
  });


for (let i = 3; i >= 0; i--) {
  document.querySelector('#btn-sort-' + i).addEventListener('click', function() {
    addButtonListeners(i);
  })
}

function addButtonListeners(i) {
  var buttons = document.querySelectorAll('.btn-sort');
  for (var j = buttons.length - 1; j >= 0; j--) {
    buttons[j].classList.remove('activeButton');
  }
  document.querySelector('#btn-sort-' + i).classList.add('activeButton');
  buildTable();
}

function pagination(querySet, page, rows) {
  var trimStart = (page - 1) * rows
  var trimEnd = trimStart + rows
  var trimmedData = querySet.slice(trimStart, trimEnd)
  var pages = Math.ceil(querySet.length / rows);
  if(pages === 0){pages = 1}
  return {
    'querySet': trimmedData,
    'pages': pages,
  }
}

function pageButtons(pages) {
  var wrapper = document.getElementById('pagination-wrapper');
  wrapper.innerHTML = ``;
  var maxLeft = (state.page - Math.floor(state.window / 2));
  var maxRight = (state.page + Math.ceil(state.window / 2));
  if (maxLeft < 1) {
    maxLeft = 1;
    maxRight = state.window;
  }

  if (maxRight > pages) {
    maxLeft = pages - (state.window - 1);

    if (maxLeft < 1) {
      maxLeft = 1;
    }
    maxRight = pages;
  }

  for (var page = maxLeft; page <= maxRight; page++) {
    if (page === state.page) {
      wrapper.innerHTML += `<button value=${page} class="page btn btn-sm btn-info" name="allMessagesClicked">${page}</button>`
    } else {
      wrapper.innerHTML += `<button value=${page} class="page btn btn-sm btn-info">${page}</button>`
    }
  }

  if (state.page != 1) {
    wrapper.innerHTML = `<button value=${1} class="page btn btn-sm btn-info">&#171; First</button>` + wrapper.innerHTML
  }

  if (state.page != pages) {
    wrapper.innerHTML += `<button value=${pages} class="page btn btn-sm btn-info">Last &#187;</button>`
  }

  $('.page').on('click', function() {
    $('#table-body').empty();

    state.page = Number($(this).val());

    buildPage();
  });


}

function showTable() {
  var table = $('#table-body')
  table.empty();
  for (var i = 1; i <= myList.length; i++) {
    var j = i + (state.page - 1) * 10;
    if (i % 2 === 0) {
      var row = `<tr bgcolor="#b3ffff">
                    <td>` + j + `</td>
                    <td>${myList[i-1].mockedResponseId}</td>
                    <td>${myList[i-1].mediaType}</td>
                    <td>${myList[i-1].httpStatus}</td>
                    <td>
                      <button type="submit" name="updateMessage" value="${myList[i-1].mockedResponseId}">
                      <img src="/img/update-button.png" style="width: 20px;"/>
                      </button>
                    </td>
                    <td>
                      <button type="submit" name="removeMessage" value="${myList[i-1].mockedResponseId}">
                      <img src="/img/icons8-cancel-64.png" style="width: 20px;"/>
                      </button>
                    </td>
                    `
    } else {
      var row = `<tr bgcolor="#e6ffff">
                    <td>` + j + `</td>
                    <td>${myList[i-1].mockedResponseId}</td>
                    <td>${myList[i-1].mediaType}</td>
                    <td>${myList[i-1].httpStatus}</td>
                    <td>
                      <button type="submit" name="updateMessage" value="${myList[i-1].mockedResponseId}">
                      <img src="/img/update-button.png" style="width: 20px;"/>
                      </button>
                    </td>
                    <td>
                      <button type="submit" name="removeMessage" value="${myList[i-1].mockedResponseId}">
                      <img src="/img/icons8-cancel-64.png" style="width: 20px;"/>
                      </button>
                    </td>
                    `
    }
    table.append(row);
  }
    for (var i = myList.length + 1; i <= state.rows; i++) {
    var j = i + (state.page - 1) * 10;
   if (i % 2 === 0) {
        var row = `<tr bgcolor="#b3ffff">
                      <td>` + j + `</td>
                      <td></td>
                      <td></td>
                      <td></td>
                      `
      } else {
        var row = `<tr bgcolor="#e6ffff">
                      <td>` + j + `</td>
                      <td></td>
                      <td></td>
                      <td></td>
                      `
      }
      table.append(row)
    }
  pageButtons(data.pages);
}

function sortTable() {
console.log("sortTable");
  var sortBy = document.querySelector('.activeButton').textContent;
  console.log(sortBy);
  switch (sortBy) {
    case "MessageId":
      if (previousSort === "MessageId") {
        state.querySet.sort((a, b) => (a.mockedResponseId > b.mockedResponseId) ? -1 : ((b.mockedResponseId > a.mockedResponseId) ? 1 : 0));
      } else {
        state.querySet.sort((a, b) => (a.mockedResponseId > b.mockedResponseId) ? 1 : ((b.mockedResponseId > a.mockedResponseId) ? -1 : 0));
      }
      break;
    case "Media Type":
      if (previousSort === "Media Type") {
        state.querySet.sort((a, b) => (a.mediaType > b.mediaType) ? -1 : ((b.mediaType > a.mediaType) ? 1 : 0));
      } else {
        state.querySet.sort((a, b) => (a.mediaType > b.mediaType) ? 1 : ((b.mediaType > a.mediaType) ? -1 : 0));
      }
      break;
    case "Http Status":
      if (previousSort === "Http Status") {
        state.querySet.sort((a, b) => (a.httpStatus > b.httpStatus) ? -1 : ((b.httpStatus > a.httpStatus) ? 1 : 0));
      } else {
        state.querySet.sort((a, b) => (a.httpStatus > b.httpStatus) ? 1 : ((b.httpStatus > a.httpStatus) ? -1 : 0));
      }
      break;
  }
  if (previousSort === sortBy) {
    previousSort = ""
  } else previousSort = sortBy;
  myList = state.querySet;
    console.log(myList);
}

function prepareTable() {
  data = pagination(state.querySet, state.page, state.rows);
  myList = data.querySet;
}

function buildTable() {
console.log("buildTable");
  sortTable();
  prepareTable();
  showTable();
}

function buildPage(){
     prepareTable();
     showTable();
}