Merge 80f2fb2 into 63ecbeb

ckanext/visualize/controllers/admin.py

@@ -1,7 +1,66 @@
+import json
+
 from ckan.controllers.admin import AdminController
 from ckan.lib.base import render
+from ckan.common import request
+from ckan import logic
+import ckan.lib.helpers as h
+from ckan.plugins import toolkit
+from ckan.common import config
+
+DEFAULT_COLORS = [
+    '#332288',
+    '#117733',
+    '#44aa99',
+    '#88ccee',
+    '#ddcc77',
+    '#cc6677',
+    '#aa4499',
+    '#882255',
+    '#dd4444'
+]
 
 
 class AdminController(AdminController):
+    ctrl = 'ckanext.visualize.controllers.admin:AdminController'
+
     def visualize_data(self):
-        return render('admin/visualize_data.html')
+        data = request.POST
+        if request.method == 'POST' and 'save' in data:
+            data_dict = dict(data)
+            del data_dict['save']
+            colors = []
+
+            for i, v in enumerate(data_dict):
+                color = {}
+                keyName = 'color_{0}'.format(i + 1)
+                color[keyName] = data_dict.get(keyName)
+                colors.append(color)
+
+            data_dict = {
+                'visualize_colors': json.dumps(colors)
+            }
+            data = toolkit.get_action(
+                'config_option_update')({}, data_dict)
+            h.flash_success(toolkit._('Successfully updated.'))
+            h.redirect_to(controller=self.ctrl, action='visualize_data')
+
+        # Initially set the colors from the default color palette.
+        if not config.get('visualize_colors'):
+            visualize_colors = []
+            for i, default_color in enumerate(DEFAULT_COLORS):
+                color = {}
+                keyName = 'color_{0}'.format(i + 1)
+                color[keyName] = default_color
+                visualize_colors.append(color)
+        else:
+            visualize_colors = json.loads(config.get('visualize_colors'))
+
+        vars = {
+            'data': {
+                'visualize_colors': visualize_colors
+            },
+            'errors': {}
+        }
+
+        return render('admin/visualize_data.html', extra_vars=vars)

ckanext/visualize/fanstatic/css/main.css

@@ -138,6 +138,54 @@
   border-radius: 4px;
 }
 
+#color-pallet {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.color-group .control-label {
+  margin-bottom: 1rem;
+}
+
+.item-color {
+  margin: 1rem 1rem 1rem 0;
+  background: none;
+  border: none;
+  width: 12.7rem;
+}
+
+input[type='color']::-webkit-color-swatch-wrapper {
+  padding: 0;
+}
+input[type='color']::-webkit-color-swatch {
+  border: none;
+}
+.form-group.item-color {
+  margin: 0;
+}
+.form-group.item-color .control-label {
+  display: none;
+}
+
+.form-group.item-color input[type='color'] {
+  border: none;
+  box-shadow: none;
+  padding-left: 0;
+}
+.color-actions {
+  margin-top: 2rem;
+}
+.btn.btn-default.color-remove {
+  position: absolute;
+  padding: 0;
+  border: none;
+  color: white;
+  background: rgba(0, 0, 0, 0.02);
+  bottom: 0.7rem;
+  right: 1.3rem;
+  z-index: 999;
+}
+
 /* Responsive Design */
 
 @media (max-width: 576px) {

ckanext/visualize/fanstatic/js/modules/visualize-colors-settings-add.js

@@ -0,0 +1,35 @@
+/* This CKAN module handles adding a color from the admin settings. */
+
+ckan.module('visualize-colors-settings-add', function($) {
+  return {
+    initialize: function() {
+      var colorPallet = $('#color-pallet');
+      var inputGroup = [
+        '<div class="input-group">',
+        '<div class="form-group item-color">',
+        '<label class="control-label" for="color_$id$">Color #$id$</label>',
+        '<div class="controls">',
+        '<input id="color_$id$" type="color" name="color_$id$" value="#000000" placeholder="" class="form-control">',
+        '</div>',
+        '</div>',
+        '<div class="input-group-btn">',
+        '<button class="btn btn-default color-remove" type="button">',
+        '<i class="fa fa-times"></i>',
+        '</button>',
+        '</div>',
+        '</div>'
+      ].join('');
+      var colorsContainer = $('#color-pallet');
+
+      this.el.on('click', function(e) {
+        colorsContainer.append(
+          inputGroup.replace(
+            new RegExp('\\$id\\$', 'g'),
+            String(colorsContainer.children().length + 1)
+          )
+        );
+        window.ckan.module.initializeElement(colorPallet[0]);
+      });
+    }
+  };
+});

ckanext/visualize/fanstatic/js/modules/visualize-colors-settings-remove.js

@@ -0,0 +1,29 @@
+/* This CKAN module handles removing a color from the admin settings. */
+
+ckan.module('visualize-colors-settings-remove', function($) {
+  return {
+    initialize: function() {
+      var colorRemoveButton = this.el.find('.color-remove');
+      $(colorRemoveButton).on(
+        'click',
+        function(e) {
+          $(e.currentTarget)
+            .closest('.input-group')
+            .remove();
+          this.normalizeInputs();
+        }.bind(this)
+      );
+    },
+    normalizeInputs: function() {
+      $.each(this.el.children(), function(i, inputGroup) {
+        var label = $(inputGroup).find('.control-label');
+        label.attr('for', 'color_' + (i + 1));
+        label.text('Color #' + (i + 1));
+
+        var input = $(inputGroup).find('input[type="color"]');
+        input.attr('id', 'color_' + (i + 1));
+        input.attr('name', 'color_' + (i + 1));
+      });
+    }
+  };
+});

ckanext/visualize/fanstatic/js/modules/visualize-colors-settings-reset.js

@@ -0,0 +1,46 @@
+/* This CKAN module handles resetting colors to default from the admin settings. */
+
+ckan.module('visualize-colors-settings-reset', function($) {
+  return {
+    initialize: function() {
+      var DEFAULT_COLORS = [
+        '#332288',
+        '#117733',
+        '#44aa99',
+        '#88ccee',
+        '#ddcc77',
+        '#cc6677',
+        '#aa4499',
+        '#882255',
+        '#dd4444'
+      ];
+      var inputGroup = [
+        '<div class="input-group">',
+        '<div class="form-group item-color">',
+        '<label class="control-label" for="color_$id$">Color #$id$</label>',
+        '<div class="controls">',
+        '<input id="color_$id$" type="color" name="color_$id$" value="$color$" placeholder="" class="form-control">',
+        '</div>',
+        '</div>',
+        '<div class="input-group-btn">',
+        '<button class="btn btn-default color-remove" type="button">',
+        '<i class="fa fa-times"></i>',
+        '</button>',
+        '</div>',
+        '</div>'
+      ].join('');
+      var colorsContainer = $('#color-pallet');
+      this.el.on('click', function(e) {
+        colorsContainer.html('');
+
+        DEFAULT_COLORS.forEach(function(color, i) {
+          colorsContainer.append(
+            inputGroup
+              .replace(new RegExp('\\$id\\$', 'g'), i + 1)
+              .replace(new RegExp('\\$color\\$', 'g'), color)
+          );
+        });
+      });
+    }
+  };
+});

ckanext/visualize/plugin.py

@@ -20,6 +20,12 @@ def update_config(self, config_):
         toolkit.add_public_directory(config_, 'public')
         toolkit.add_resource('fanstatic', 'visualize')
 
+    def update_config_schema(self, schema):
+        not_empty = toolkit.get_validator('not_empty')
+        schema.update({'visualize_colors': [not_empty, unicode]})
+
+        return schema
+
     # IResourceView
 
     def info(self):

ckanext/visualize/templates/admin/visualize_data.html

@@ -1,28 +1,55 @@
+{% resource 'visualize/js/modules/visualize-colors-settings-add.js' %}
+{% resource 'visualize/js/modules/visualize-colors-settings-remove.js' %}
+{% resource 'visualize/js/modules/visualize-colors-settings-reset.js' %}
+
 {% extends 'admin/base.html' %}
 
 {% import 'macros/form.html' as form %}
 
 {% set action_url = h.url_for('ckanadmin_visualize_data') %}
 
 {% block primary_content_inner %}
-    <form method="post" action="{{ action_url }}" class="form-horizontal col-sm-12">
-        <div>Form elements go here</div>
-        <div class="form-actions">
-            <button type="submit" class="btn btn-primary" name="save">{{ _('Update') }}</button>
+<form method="post" action="{{ action_url }}" class="form-horizontal">
+  <div class="color-group">
+    <label class="control-label" for="color-pallet">Chart Colors</label>
+    <div id="color-pallet" data-module="visualize-colors-settings-remove">
+      {% for color in data.visualize_colors %}
+        <div class="input-group">
+          {{ form.input('color_' ~ loop.index, type='color', label=_('Color #' ~ loop.index), value=color['color_' ~ loop.index], classes=['item-color']) }}
+          <div class="input-group-btn">
+            <button class="btn btn-default color-remove" type="button">
+              <i class="fa fa-times"></i>
+            </button>
+          </div>
         </div>
-    </form>
+      {% endfor %}
+    </div>
+  </div>
+  <div class="form-actions color-actions">
+    <button type="button" class="btn btn-default pull-left" data-module="visualize-colors-settings-add"><i
+        class="fa fa-paint-brush"></i>{{ _('Add') }}</button>
+    <button type="button" class="btn btn-default pull-right" data-module="visualize-colors-settings-reset"><i
+        class="fa fa-sliders"></i>{{ _(' Set Default') }}</button>
+  </div>
+  <hr>
+  <div class="form-actions">
+    <button type="submit" class="btn btn-danger pull-left" name="reset">{{ _('Reset') }}</button>
+    <button type="submit" class="btn btn-primary" name="save">{{ _('Save') }}</button>
+  </div>
+</form>
+
 {% endblock %}
 
 {% block secondary_content %}
-  <div class="module module-narrow module-shallow">
-    <h2 class="module-heading">
-      <i class="fa fa-info-circle"></i>
-      {{ _('Visualize options') }}
-    </h2>
-    <div class="module-content">
-      {% block admin_form_help %}
-        <span>Help tips for options go here</span>
-      {% endblock %}
-    </div>
+<div class="module module-narrow module-shallow">
+  <h2 class="module-heading">
+    <i class="fa fa-info-circle"></i>
+    {{ _('Visualize options') }}
+  </h2>
+  <div class="module-content">
+    {% block admin_form_help %}
+    <span>Help tips for options go here</span>
+    {% endblock %}
   </div>
+</div>
 {% endblock %}

ckanext/visualize/templates/snippets/visualize_view_show.html

@@ -11,7 +11,6 @@
     data-module-resource-id = "{{ resource_id }}"
     data-module-resource-view = "{{ h.dump_json(resource_view) }}">
     <div class="row">
-        <div class="col-md-12">
             <nav class="main-nav navbar">
                 <div class="col-md-2 figure-wrapper">
                     <figure>
@@ -60,13 +59,9 @@ <h5 class="section-heading">Data Types<em>For Intelligent Chart Selection, drag
                     </ul>
                 </section>
             </nav>
-        </div>
+
     </div>
-
-    <div class="col-md-12">
         <section class="chart-container">
             <canvas id="barChart"></canvas>
         </section>
-    </div>
-
 </section>

ckanext/visualize/tests/test_controllers.py

@@ -144,3 +144,33 @@ def test_visualize_data_endpoint(self):
         response = app.get(url=route, extra_environ=env)
 
         assert 'Visualize' in response.body
+
+    @helpers.change_config('visualize_colors', '{"color_1":"#fff"}')
+    def test_visualize_data_endpoint_predefined_color(self):
+        app = self._get_test_app()
+        user = factories.Sysadmin()
+        env = {'REMOTE_USER': user.get('name').encode('ascii')}
+        controller =\
+            'ckanext.visualize.controllers.admin:AdminController'
+        action = 'visualize_data'
+        route = url_for(controller=controller, action=action)
+        response = app.get(url=route, extra_environ=env)
+
+        assert 'Visualize' in response.body
+
+    def test_visualize_data_endpoint_post(self):
+        app = self._get_test_app()
+        user = factories.Sysadmin()
+        env = {'REMOTE_USER': user.get('name').encode('ascii')}
+        controller =\
+            'ckanext.visualize.controllers.admin:AdminController'
+        action = 'visualize_data'
+        route = url_for(controller=controller, action=action)
+        params = {
+            'save': True,
+            'color_1': '#332288',
+            'color_2': '#117733',
+        }
+        response = app.post(url=route, extra_environ=env, params=params)
+
+        assert '302 Found' in response.body

ckanext/visualize/tests/test_view.py

@@ -84,3 +84,6 @@ def test_setup_template_variables(self):
 
     def test_view_template(self):
         assert self.plugin.view_template({}, {}) == 'visualize_view.html'
+
+    def test_update_config_schema(self):
+        assert 'visualize_colors' in self.plugin.update_config_schema({})