populate themes settings pane

3 files changed, 185 insertions, 6 deletions

diff --git a/data/assets/js/admin/tabs/themes.js b/data/assets/js/admin/tabs/themes.js
new file mode 100644
index 0000000..26170b0
--- /dev/null
+++ b/data/assets/js/admin/tabs/themes.js
@@ -0,0 +1,121 @@
+jQuery(function($) {
+  "use strict";
+
+  var TEMPLATES = new LuigiTemplate.Cache({
+    theme: [
+      "<a ",
+        "href='#' ",
+        "class='list-group-item' ",
+        "title='View details for \"%{theme_name|h}\".' ",
+        "data-theme_id='%{theme_id|h}' ",
+        "data-q='%{q|h}' ",
+      ">",
+        "<i class='fa fa-fw fa-eye'></i>",
+        " ",
+        "%{theme_name|h} (%{theme_version|h}, %{theme_date|h})",
+      "</a>",
+    ],
+
+    loading: [
+      "<span class='list-group-item disabled'>",
+        "<i class='fa fa-spinner fa-spin'></i>",
+        " ",
+        "Loading...",
+      "</span>",
+    ],
+
+    error: [
+      "<span class='list-group-item list-group-item-danger disabled'>",
+        "<i class='fa fa-exclamation-triangle'></i>",
+        " ",
+        "Error: %{error|h}",
+      "</span>",
+    ],
+  });
+
+  function filter() {
+    var qs = $('#themes-q').val().replace(/^\s+|\s+$/g, '').toLowerCase().split(/\s+/);
+
+    if (qs.length > 0) {
+      // hide all themes
+      $('#themes .list-group-item').addClass('hidden');
+
+      // show matching themes
+      $($.grep($('#themes .list-group-item'), function(el) {
+        var eq = $(el).data('q');
+
+        return ($.grep(qs, function(q) {
+          return eq.indexOf(q) !== -1;
+        }).length == qs.length);
+      })).removeClass('hidden');
+    } else {
+      // show all themes
+      $('#themes .list-group-item').removeClass('hidden');
+    }
+  }
+
+  function reload() {
+    var btn = $('#themes-reload'),
+        list = $('#themes');
+
+    // show loading
+    btn.toggleClass('disabled').find('.loading').toggleClass('hidden');
+    list.html(TEMPLATES.run('loading'));
+
+    send('theme/list').always(function() {
+      btn.toggleClass('disabled').find('.loading').toggleClass('hidden');
+      list.html('');
+    }).fail(function(r) {
+      var error = r.responseText;
+
+      try {
+        var data = $.parseJSON(r.responseText);
+        if (data.error)
+          error = data.error;
+      } catch (e) {}
+
+      list.html(TEMPLATES.run('error', {
+        error: error
+      }));
+    }).done(function(r) {
+      list.html($.map(r, function(row) {
+        var active = (row.is_active == '1');
+
+        return TEMPLATES.run('theme', $.extend({}, row, {
+          q: [row.theme_id, row.theme_name, row.theme_version, row.theme_date].join('  ').toLowerCase(),
+        }));
+      }).join(''));
+
+      // refresh filters
+      filter();
+    });
+
+    // stop event
+    return false;
+  }
+
+  $('#themes-q').on('search-update', function() {
+    filter();
+  });
+
+  $('#themes').on('click', 'a.list-group-item', function() {
+    var theme_id = $(this).data('theme_id');
+
+    // update highlight
+    $('#themes .active').removeClass('active');
+    $(this).addClass('active');
+
+    // TODO: show theme details dialog
+    // $('#theme-edit-dialog').data('theme_id', theme_id).modal('show');
+
+    // stop event
+    return false;
+  });
+
+  $('#themes-reload').click(reload);
+
+  // load themes
+  $('#settings-tab-themes').on('show.bs.tab', function() {
+    reload();
+  });
+});
diff --git a/src/guff/views/pages/admin.cr b/src/guff/views/pages/admin.cr
index f2296a8..16d3eb0 100644
--- a/src/guff/views/pages/admin.cr
+++ b/src/guff/views/pages/admin.cr
@@ -20,9 +20,10 @@ class Guff::Views::Pages::Admin < Guff::Views::HTMLView
     assets/ckeditor-4.5.8-custom/ckeditor.js
     assets/js/search-field.js
     assets/js/dropdown.js
-    assets/js/admin/tabs/users.js
     assets/js/admin/tabs/posts.js
     assets/js/admin/tabs/files.js
+    assets/js/admin/tabs/users.js
+    assets/js/admin/tabs/themes.js
     assets/js/admin/dialogs/user-add.js
     assets/js/admin/dialogs/user-edit.js
     assets/js/admin/dialogs/post-edit.js
diff --git a/src/views/panes/settings/themes.ecr b/src/views/panes/settings/themes.ecr
index a88f24e..9aabffe 100644
--- a/src/views/panes/settings/themes.ecr
+++ b/src/views/panes/settings/themes.ecr
@@ -5,12 +5,69 @@
 >
   <div class='panel panel-default'>
     <div class='panel-heading'>
+      <div class='btn-toolbar'>
+        <div class='btn-group btn-group-sm'>
+          <a
+            href='#'
+            class='btn btn-primary disabled'
+            title='Upload new theme.'
+            data-toggle='modal'
+            data-target='#theme-add-dialog'
+          >
+            <i class='fa fa-plus-circle'></i>
+            Add Theme
+          </a><!-- btn -->
+        </div><!-- btn-group -->
+
+        <div class='btn-group btn-group-sm pull-right'>
+          <a
+            href='#'
+            class='btn btn-default search-toggle'
+            title='Toggle search field.'
+          >
+            <i class='fa fa-fw fa-search'></i>
+          </a><!-- btn-->
+        </div><!-- btn-group -->
+
+        <div class='btn-group btn-group-sm pull-right'>
+          <a
+            href='#'
+            id='themes-reload'
+            class='btn btn-default'
+            title='Reload themes.'
+          >
+            <span class='loading'>
+              <i class='fa fa-fw fa-refresh'></i>
+            </span>
+
+            <span class='loading hidden'>
+              <i class='fa fa-fw fa-spinner fa-spin'></i>
+            </span>
+          </a><!-- #reload -->
+        </div><!-- btn-group -->
+      </div><!-- btn-toolbar -->
+    </div><!-- panel-heading -->
+
+    <div class='panel-heading hidden search-toggle'>
+      <div class='input-group input-group-sm'>
+        <span class='input-group-addon'>
+          <i class='fa fa-search'></i>
+        </span>
+
+        <input
+          type='text'
+          id='themes-q'
+          class='form-control'
+          title='Enter search terms'
+        />
+      </div><!-- input-group -->
     </div><!-- panel-heading -->
 
-    <div id='themes' class='panel-body'>
-      <p>
-        TODO: themes
-      </p>
-    </div><!-- panel-body -->
+    <div id='themes' class='list-group'>
+      <span class='list-group-item disabled'>
+        <i class='fa fa-spinner fa-spin'></i>
+        Loading...
+      </span><!-- list-group-item -->
+    </div><!-- list-group -->
   </div><!-- panel -->
 </div><!-- tab-pane -->