Add show all/less

public/assets/css/styles.css

@@ -25,6 +25,14 @@ header h1 {
  font-size: 20px;
 }
 
+.left {
+ float: left;
+}
+
+.right {
+ float: right;
+}
+
 .container {
  margin: 0 auto;
  width: 1200px;

public/assets/js/scripts.js

@@ -8,6 +8,7 @@ $(function () {
  function appendContainers(containers) {
  var $sites = $('.sites table tbody');
  var keys = ['Id', 'Image', 'State', 'Status'];
+ var keep = [];
 
  for (var i = 0, l = containers.length; i < l; i++) {
  var container = containers[i];
@@ -16,6 +17,8 @@ $(function () {
  var $tr = $sites.find('tr[data-container-id="' + container.Id + '"]');
 
  if ($tr.size()) {
+ keep.push(container.Id);
+
  for (var key in container) {
  if (keys.indexOf(key) === -1) {
  continue;
@@ -33,6 +36,8 @@ $(function () {
  '<td class="container-url"><a href="//' + url + '" target="_blank">' + url + '</a></td>'
  ];
 
+ keep.push(container.Id);
+
  for (var key in container) {
  if (keys.indexOf(key) === -1) {
  continue;
@@ -52,15 +57,24 @@ $(function () {
  }
  }
 
+ $sites.find('tr').each(function () {
+ var $this = $(this);
+
+ if (keep.indexOf($this.data('container-id')) === -1) {
+ $this.remove();
+ }
+ });
+
  $('.loader').hide();
  }
 
  /**
  * Update containers.
  */
- function updateContainers() {
+ function updateContainers(all) {
+ all = typeof all === 'undefined' ? false : all;
  $('.loader').show();
- $.getJSON('/api/containers', appendContainers);
+ $.getJSON('/api/containers?all=' + all, appendContainers);
  }
  updateContainers();
  setInterval(updateContainers, 300000);
@@ -102,4 +116,15 @@ $(function () {
 
  $.getJSON('/api/containers?action=restart&domain=' + domain, appendContainers);
  });
+
+ // Show all/less.
+ $('.show-all').on('click', function(e) {
+ e.preventDefault();
+
+ var $this = $(this);
+ updateContainers($this.text() === 'Show all');
+
+ var text = $this.attr('data-text');
+ $this.attr('data-text', $this.text()).text(text);
+ });
 });

public/index.html

@@ -19,7 +19,7 @@ <h1>Farmer</h1>
  <div class="sites">
  <h2>Sites <span class="loader" style="display: none"></span></h2>
 
- <p>A list of sites configured with the domain <span class="domain"></span>. It will reload the table every 5 minutes.</p>
+ <p>A list of sites configured with the domain <span class="domain"></span>. It will reload the table every 5 minutes. <a href="#" class="right show-all" data-text="Show less">Show all</a></p>
  <table>
  <thead>
  <tr>