Fixing dashboard.html

panoramix/templates/panoramix/dashboard.html → panoramix/assets/html/dashboard.html

@@ -1,17 +1,14 @@
-{% extends "panoramix/base.html" %}
+{% extends "refactor/basic.html" %}
 
 {% block head_css %}
     {{ super() }}
-    {% for css in dashboard.css_files %}
-        <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") }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename="assets/vendor/gridster/jquery.gridster.min.css") }}">
     <style id="user_style" type="text/css">
       {{ dashboard.css }}
     </style>
 {% endblock %}
 
-{% block content_fluid %}
+{% block body %}
 <div class="dashboard">
 
 <!-- Modal -->
@@ -32,6 +29,7 @@ <h4 class="modal-title" id="myModalLabel">Dashboard CSS</h4>
           {% endfor %}
         </select><br>
         <textarea id="dash_css" rows="30" cols="60">{{ dashboard.css }}</textarea>
+        <input type="hidden" id="dashboard_id" value="{{ dashboard.id }}" />
       </div>
       <div class="modal-footer">
         <button type="button" class="btn btn-default" data-dismiss="modal">
@@ -126,17 +124,6 @@ <h2>
 </div>
 {% endblock %}
 
-{% block tail %}
-    {{ super() }}
-    {% for js in dashboard.js_files %}
-        <script src="{{ url_for('static', filename=js) }}"></script>
-    {% endfor %}
-    <script src="/static/lib/gridster/jquery.gridster.with-extras.min.js"></script>
-    <script src="/static/lib/ace/ace.js"></script>
-    <script>
-      $(document).ready(function() {
-        px.initDashboardView();
-        var dashboard = px.Dashboard({{ dashboard.id }});
-      });
-    </script>
+{% block tail_js %}
+  <script src="/static/assets/javascripts/dist/dashboard.entry.js"></script>
 {% endblock %}

panoramix/assets/javascripts/dashboard.js

@@ -0,0 +1,154 @@
+var $ = window.$ = require('jquery');
+var jQuery = window.jQuery = $;
+var px = require('./modules/panoramix.js');
+var d3 = require('d3');
+require('bootstrap');
+
+var ace = require('brace');
+require('brace/mode/css');
+require('brace/theme/crimson_editor');
+
+require('select2');
+require('./../node_modules/gridster/dist/jquery.gridster.min.js');
+
+var dashboard;
+
+var Dashboard = function(id){
+  var dash = {
+    slices: [],
+    filters: {},
+    id: id,
+    addFilter: function(slice_id, filters) {
+      this.filters[slice_id] = filters;
+      this.refreshExcept(slice_id);
+    },
+    readFilters: function() {
+      // Returns a list of human readable active filters
+      return JSON.stringify(this.filters, null, 4);
+    },
+    refreshExcept: function(slice_id) {
+      this.slices.forEach(function(slice){
+        if(slice.data.slice_id != slice_id){
+          slice.render();
+        }
+      });
+    },
+    clearFilter: function(slice_id) {
+      delete this.filters[slice_id];
+      this.refreshExcept(slice_id);
+    },
+    getSlice: function(slice_id) {
+      for(var i=0; i<this.slices.length; i++){
+        if (this.slices[i].data.slice_id == slice_id)
+          return this.slices[i];
+      }
+    }
+  }
+  $('.dashboard li.widget').each(function() {
+    var data = $(this).data('slice');
+    var slice = px.Slice(data, dash);
+    $(this).find('a.refresh').click(function(){
+      slice.render();
+    });
+    dash.slices.push(slice);
+    slice.render();
+  });
+  dashboard = dash;
+  return dash;
+}
+
+function initDashboardView() {
+  var gridster = $(".gridster ul").gridster({
+    widget_margins: [5, 5],
+    widget_base_dimensions: [100, 100],
+    draggable: {
+      handle: '.drag',
+    },
+    resize: {
+      enabled: true,
+      stop: function(e, ui, element) {
+        var slice_data = $(element).data('slice');
+        dashboard.getSlice(slice_data.slice_id).resize();
+      }
+    },
+    serialize_params: function(_w, wgd) {
+      return {
+        slice_id: $(_w).attr('slice_id'),
+        col: wgd.col,
+        row: wgd.row,
+        size_x: wgd.size_x,
+        size_y: wgd.size_y
+      };
+    },
+  }).data('gridster');
+  $("div.gridster").css('visibility', 'visible');
+  $("#savedash").click(function() {
+    var expanded_slices = {};
+    $.each($(".slice_info"), function(i, d){
+      var widget = $(this).parents('.widget');
+      var slice_description = widget.find('.slice_description');
+      if(slice_description.is(":visible"))
+        expanded_slices[$(d).attr('slice_id')] = true;
+    });
+    var data = {
+        positions: gridster.serialize(),
+        css: editor.getValue(),
+        expanded_slices: expanded_slices,
+    };
+    $.ajax({
+      type: "POST",
+      url: '/panoramix/save_dash/' + dashboard.id + '/',
+      data: {'data': JSON.stringify(data)},
+      success: function() {alert("Saved!")},
+      error: function() {alert("Error :(")},
+    });
+  });
+
+  var editor = ace.edit("dash_css");
+  editor.$blockScrolling = Infinity
+
+  editor.setTheme("ace/theme/crimson_editor");
+  editor.setOptions({
+      minLines: 16,
+      maxLines: Infinity,
+  });
+  editor.getSession().setMode("ace/mode/css");
+
+  $(".select2").select2({dropdownAutoWidth : true});
+  $("#css_template").on("change", function() {
+    var css = $(this).find('option:selected').data('css');
+    editor.setValue(css);
+    $('#dash_css').val(css);
+    $("#user_style").html(css);
+  });
+  $('#filters').click( function(){
+    alert(dashboard.readFilters());
+  });
+  $("a.closeslice").click(function() {
+    var li = $(this).parents("li");
+    gridster.remove_widget(li);
+  });
+  $(".slice_info").click(function(){
+    var widget = $(this).parents('.widget');
+    var slice_description = widget.find('.slice_description');
+    slice_description.slideToggle(500, function(){
+      widget.find('.refresh').click();
+    });
+  });
+  $("table.slice_header").mouseover(function() {
+    $(this).find("td.icons nobr").show();
+  });
+  $("table.slice_header").mouseout(function() {
+    $(this).find("td.icons nobr").hide();
+  });
+  editor.on("change", function(){
+    var css = editor.getValue();
+    $('#dash_css').val(css);
+    $("#user_style").html(css);
+  });
+}
+
+$(document).ready(function() {
+  initDashboardView();
+  var dashboard = Dashboard($('#dashboard_id').val());
+});