Adding ability to style a dashboard with CSS

panoramix/migrations/versions/5a7bad26f2a7_.py

@@ -0,0 +1,24 @@
+"""empty message
+
+Revision ID: 5a7bad26f2a7
+Revises: 4e6a06bad7a8
+Create Date: 2015-10-05 10:32:15.850753
+
+"""
+
+# revision identifiers, used by Alembic.
+revision = '5a7bad26f2a7'
+down_revision = '4e6a06bad7a8'
+
+from alembic import op
+import sqlalchemy as sa
+from sqlalchemy.dialects import mysql
+
+def upgrade():
+    op.add_column('dashboards', sa.Column('css', sa.Text(), nullable=True))
+    op.add_column('dashboards', sa.Column('description', sa.Text(), nullable=True))
+
+
+def downgrade():
+    op.drop_column('dashboards', 'description')
+    op.drop_column('dashboards', 'css')

panoramix/models.py

@@ -128,6 +128,8 @@ class Dashboard(Model, AuditMixinNullable):
     id = Column(Integer, primary_key=True)
     dashboard_title = Column(String(500))
     position_json = Column(Text)
+    description = Column(Text)
+    css = Column(Text)
     slices = relationship(
         'Slice', secondary=dashboard_slices, backref='dashboards')
 

panoramix/static/panoramix.js

@@ -118,7 +118,7 @@ function initializeDatasourceView() {
   });
 }
 
-function initializeDashboardView() {
+function initializeDashboardView(dashboard_id) {
   var gridster = $(".gridster ul").gridster({
     widget_margins: [5, 5],
     widget_base_dimensions: [100, 100],
@@ -143,12 +143,17 @@ function initializeDashboardView() {
   }).data('gridster');
   $("div.gridster").css('visibility', 'visible');
   $("#savedash").click(function() {
-    var data = gridster.serialize();
+    var data = {
+        positions: gridster.serialize(),
+        css: $("#dash_css").val()
+    };
+    console.log(data);
     $.ajax({
       type: "POST",
-      url: '/panoramix/save_dash/{{ dashboard.id }}/',
-      data: {data: JSON.stringify(data)},
-      success: function() {},
+      url: '/panoramix/save_dash/' + dashboard_id + '/',
+      data: {'data': JSON.stringify(data)},
+      success: function() {alert("Saved!")},
+      error: function() {alert("Error :(")},
     });
   });
   $("a.closewidget").click(function() {
@@ -161,4 +166,8 @@ function initializeDashboardView() {
   $("table.widget_header").mouseout(function() {
     $(this).find("td.icons nobr").hide();
   });
+  $("#dash_css").on("keyup", function(){
+    css = $(this).val();
+    $("#user_style").html(css);
+  });
 }

panoramix/templates/panoramix/dashboard.html

@@ -6,6 +6,9 @@
         <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename=css) }}">
     {% endfor %}
     <link rel="stylesheet" href="{{ url_for('static', filename="lib/gridster/jquery.gridster.min.css") }}">
+    <style id="user_style" type="text/css">
+      {{ dashboard.css }}
+    </style>
     {% for slice in dashboard.slices %}
       {% set viz = slice.viz %}
       {% import viz.template as viz_macros %}
@@ -15,17 +18,51 @@
 
 {% block content_fluid %}
 <div class="dashboard">
+
+<!-- Modal -->
+<div class="modal fade" id="css_modal" tabindex="-1" role="dialog">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+        <h4 class="modal-title" id="myModalLabel">Dashboard CSS</h4>
+      </div>
+      <div class="modal-body">
+        <textarea id="dash_css" rows="30" cols="60">
+          {%- if dashboard.css %}
+            {{- dashboard.css }}
+          {% else %}
+/*
+body {
+    background: #F00;
+}
+*/
+          {% endif %}
+        </textarea>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-default" data-dismiss="modal">
+          Close
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+
 <div class="title">
     <div class="text-middle">
       <h2>
         {{ dashboard.dashboard_title }}
         <div class="btn-group pull-right" role="group" >
+          <button type="button" id="css" class="btn btn-default" data-toggle="modal" data-target="#css_modal">
+            <i class="fa fa-code"></i>
+          </button>
           <a id="editdash" class="btn btn-default" href="/dashboardmodelview/edit/{{ dashboard.id }}">
-                <i class="fa fa-edit"></i>
-            </a>
-            <button type="button" id="savedash" class="btn btn-default">
-              <i class="fa fa-save"></i>
-            </button>
+              <i class="fa fa-edit"></i>
+          </a>
+          <button type="button" id="savedash" class="btn btn-default">
+            <i class="fa fa-save"></i>
+          </button>
         </div>
       </h2>
     </div>
@@ -80,7 +117,9 @@
     {% endfor %}
     <script src="/static/lib/gridster/jquery.gridster.with-extras.min.js"></script>
     <script>
-      $(document).ready(initializeDashboardView);
+      $(document).ready(function(){
+        initializeDashboardView({{ dashboard.id }});
+      });
     </script>
     {% for slice in dashboard.slices %}
       {% set viz = slice.viz %}

panoramix/views.py

@@ -185,7 +185,7 @@ appbuilder.add_view(
 class DashboardModelView(PanoramixModelView, DeleteMixin):
     datamodel = SQLAInterface(models.Dashboard)
     list_columns = ['dashboard_link', 'created_by']
-    edit_columns = ['dashboard_title', 'slices', 'position_json']
+    edit_columns = ['dashboard_title', 'slices', 'position_json', 'css']
     add_columns = edit_columns
 
 
@@ -339,12 +339,14 @@ class Panoramix(BaseView):
     @expose("/save_dash/<dashboard_id>/", methods=['GET', 'POST'])
     def save_dash(self, dashboard_id):
         data = json.loads(request.form.get('data'))
-        slice_ids = [int(d['slice_id']) for d in data]
+        positions = data['positions']
+        slice_ids = [int(d['slice_id']) for d in positions]
         session = db.session()
         Dash = models.Dashboard
         dash = session.query(Dash).filter_by(id=dashboard_id).first()
         dash.slices = [o for o in dash.slices if o.id in slice_ids]
-        dash.position_json = json.dumps(data, indent=4)
+        dash.position_json = json.dumps(data['positions'], indent=4)
+        dash.css = data['css']
         session.merge(dash)
         session.commit()
         session.close()