Seperate the messy template to little modules

shogun-toolbox · May 30, 2013 · 367ba23 · 367ba23
1 parent 083c75b
commit 367ba23
Show file tree

Hide file tree

Showing 9 changed files with 86 additions and 123 deletions.
diff --git a/demo/clustering.py b/demo/clustering.py
@@ -7,7 +7,8 @@
 import json
 
 def entrance(request):
-    return render_to_response("clustering/index.html", context_instance=RequestContext(request))
+    properties = { 'title': 'Clustering Demo' }
+    return render_to_response("clustering/index.html", properties, context_instance=RequestContext(request))
 
 def cluster(request):
     try:

diff --git a/demo/gp.py b/demo/gp.py
@@ -9,7 +9,8 @@
 import json
 
 def entrance(request):
-    return render_to_response("gp/index.html", context_instance = RequestContext(request))
+    properties = { 'title': 'Gaussian Process Regression Demo' }
+    return render_to_response("gp/index.html", properties, context_instance = RequestContext(request))
 
 def create_toy_data(request):
     xmin = -5

diff --git a/demo/kernel_matrix.py b/demo/kernel_matrix.py
@@ -8,7 +8,10 @@
 import json
 
 def entrance(request):
-    return render_to_response("kernel_matrix/index.html", context_instance = RequestContext(request))
+    properties = { 'title': 'Kernel Matrix Visualization' }
+    return render_to_response("kernel_matrix/index.html",
+                              properties,
+                              context_instance = RequestContext(request))
 
 def create_toy_data(request):
     xmin = -5

diff --git a/demo/svr.py b/demo/svr.py
@@ -7,7 +7,8 @@
 import json
 
 def entrance(request):
-    return render_to_response("svr/index.html",context_instance=RequestContext(request))
+    properties = { 'title': 'Supported Vector Regression Demo' }
+    return render_to_response("svr/index.html", properties, context_instance=RequestContext(request))
 
 def point(request):
     try:

diff --git a/templates/clustering/index.html b/templates/clustering/index.html
@@ -1,10 +1,5 @@
-<!DOCTYPE html>
-<html>
-    <head>
-      <title>
-        Clustering-Demo
-      </title>
-
+{% extends "default.html" %}
+{% block stylesheet %}
       <style>
         body {
           font: 10px sans-serif;
@@ -39,21 +34,10 @@
         .grid path {
               stroke-width: 0;
         }
-
       </style>
-      <script src="/static/js/d3.min.js"></script>
-      <script src="/static/js/jquery-1.9.1.min.js"></script>
-      <meta charset="utf-8">
-      <meta name="viewport" content="width=device-width,initial-scale=1.0">
-      <link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
-      <script src="/static/bootstrap/js/bootstrap.min.js"></script>
-    </head>
-    <body id="main">
-      <div class="page-header"><h2>&nbsp;Clustering Demo <small>based on Shogun-Toolbox</small></h2></div>
-      <div class="row">
-      <div class="span9" style="display:inline;"></div>
-      <div class="span3" style="display:inline;">
-      <form name="argument">
+{% endblock %}
+{% block arguments %}
+      <form name="arguments">
           <label> Distance </label>
           <select name="distance_name" class="span3">
                 <option value="eucl" selected>Euclidean Distance</option>
@@ -67,9 +51,8 @@
         <button type="button" class="btn btn-small btn-primary" onclick="clear_canvas();">Clear</button>
         </div>
       </form>
-      </div>
-      </div>
-
+{% endblock %}
+{% block javascript %}
       <script>
         var positive_dots = {"points" : []};
         var negative_dots = {"points" : []};
@@ -224,8 +207,8 @@
                       beforeSend: function(){$("#clust").attr('disabled', true);},
                       data: {positive: JSON.stringify(positive_dots),
                              negative: JSON.stringify(negative_dots),
-                             number_of_clusters: document.argument.number_of_clusters.value,
-                             distance_name: document.argument.distance_name.value,
+                             number_of_clusters: document.arguments.number_of_clusters.value,
+                             distance_name: document.arguments.distance_name.value,
                              csrfmiddlewaretoken: '{{ csrf_token }}'},
                       success: function(data){
                                   svg.selectAll(".line").remove();
@@ -273,5 +256,4 @@
 
 
         </script>
-    </body>
-</html>
+{% endblock %}
diff --git a/templates/default.html b/templates/default.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+    <head>
+      <title>{{ title }}</title>
+      {% block stylesheet %} {% endblock %}
+      <script src="/static/js/d3.min.js"></script>
+      <script src="/static/js/jquery-1.9.1.min.js"></script>
+      <meta charset="utf-8">
+      <meta name="viewport" content="width=device-width,initial-scale=1.0">
+      <link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
+      <script src="/static/bootstrap/js/bootstrap.min.js"></script>
+    </head>
+    <body id="main">
+      <div class="page-header"><h2>&nbsp;{{ title }} <small>based on Shogun-Toolbox</small></h2></div>
+      <div class="row">
+        <!-- canvas -->
+        <div class="span9" style="display:inline;"></div>
+        <!-- arguments -->
+        <div class="span3" style="display:inline;">
+          {% block arguments %} {% endblock %}
+        </div>
+      </div>
+      {% block javascript %} {% endblock %}
+    </body>
+</html>
diff --git a/templates/gp/index.html b/templates/gp/index.html
@@ -1,10 +1,5 @@
-<!DOCTYPE html>
-<html>
-    <head>
-      <title>
-        Gaussian Process Regression Demo
-      </title>
-
+{% extends "default.html" %}
+{% block stylesheet %}
       <style>
         body {
           font: 10px sans-serif;
@@ -40,19 +35,9 @@
               stroke-width: 0;
         }
       </style>
-      <script src="/static/js/d3.min.js"></script>
-      <script src="/static/js/jquery-1.9.1.min.js"></script>
-      <meta charset="utf-8">
-      <meta name="viewport" content="width=device-width,initial-scale=1.0">
-      <link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
-      <script src="/static/bootstrap/js/bootstrap.min.js"></script>
-    </head>
-    <body id="main">
-      <div class="page-header"><h2>&nbsp;Gaussian Process Regression Demo <small>based on Shogun-Toolbox</small></h2></div>
-      <div class="row">
-      <div class="span9" style="display:inline;"></div>
-      <div class="span3" style="display:inline;">
-      <form name="argument">
+{% endblock %}
+{% block arguments %}
+      <form name="arguments">
           <label> Sine Freq.  </label>
           <input style="width:800" type="text" value="2.0" name="frequency" onkeyup="value=value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'')"></br>
           <label> Amplitude </label>
@@ -67,9 +52,8 @@
         <button type="button" class="btn btn-small btn-primary"  onclick="clear_map();">Clear</button>
         </div>
       </form>
-      </div>
-      </div>
-
+{% endblock %}
+{% block javascript %}
       <script>
         toy_data = [];
         var margin = {top: 20, right: 20, bottom: 30, left: 40},
@@ -181,9 +165,9 @@
                        type: "POST",
                        dataType: 'text',
                        data: {csrfmiddlewaretoken: '{{ csrf_token }}',
-                              amplitude: document.argument.amplitude.value ,
-                              frequency: document.argument.frequency.value,
-                              noise_level: document.argument.noise_level.value},
+                              amplitude: document.arguments.amplitude.value ,
+                              frequency: document.arguments.frequency.value,
+                              noise_level: document.arguments.noise_level.value},
                        beforeSend: function(){$("#id_create").attr('disabled',true);},
                        success: function(data){
                                    json = $.parseJSON(data)['data'];
@@ -218,8 +202,8 @@
                       dataType: 'text',
                       data: {csrfmiddlewaretoken: '{{ csrf_token }}',
                              toy_data: JSON.stringify(toy_data),
-                             noise_level: document.argument.noise_level.value,
-                             kernel_width: document.argument.kernel_width.value},
+                             noise_level: document.arguments.noise_level.value,
+                             kernel_width: document.arguments.kernel_width.value},
                       beforeSend: function(){$("#id_train").attr('disabled', true);},
                       success: function(data){
                                  json = $.parseJSON(data);
@@ -254,5 +238,4 @@
 
 
         </script>
-    </body>
-</html>
+{% endblock %}
diff --git a/templates/kernel_matrix/index.html b/templates/kernel_matrix/index.html
@@ -1,9 +1,5 @@
-  <!DOCTYPE html>
-  <html>
-      <head>
-        <title>
-          Kernel Matrix Visualizaion
-        </title>
+{% extends "default.html" %}
+{% block stylesheet %}
         <style>
           body {
             font: 10px sans-serif;
@@ -47,19 +43,9 @@
             height:20px;
           }
         </style>
-        <script src="/static/js/d3.min.js"></script>
-        <script src="/static/js/jquery-1.9.1.min.js"></script>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width,initial-scale=1.0">
-        <link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
-        <script src="/static/bootstrap/js/bootstrap.min.js"></script>
-      </head>
-      <body id="main">
-        <div class="page-header"><h2>&nbsp;Kernel Matrix Visualization <small>based on Shogun-Toolbox</small></h2></div>
-        <div class="row">
-          <div class="span9"></div>
-          <div class="span3">
-            <form name="argument">
+{% endblock %}
+{% block arguments %}
+            <form name="arguments">
               <label> Sine Freq.  </label>
               <input style="width:800" type="text" value="1.0" name="frequency" class="span3" onkeyup="value=value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'')"></br>
               <label> Amplitude </label>
@@ -84,9 +70,8 @@
               <label>legend</label>
               <div id="legend"></div>
             </form>
-          </div>
-        </div>
-
+{% endblock %}           
+{% block javascript %}
         <script>
           toy_data = [];
           var margin = {top: 20, right: 20, bottom: 30, left: 40},
@@ -179,9 +164,9 @@
                          type: "POST",
                          dataType: 'text',
                          data: {csrfmiddlewaretoken: '{{ csrf_token }}',
-                                amplitude: document.argument.amplitude.value ,
-                                frequency: document.argument.frequency.value,
-                                noise_level: document.argument.noise_level.value},
+                                amplitude: document.arguments.amplitude.value ,
+                                frequency: document.arguments.frequency.value,
+                                noise_level: document.arguments.noise_level.value},
                          beforeSend:function(){
                                     $("#generate").attr('disabled', true);
                                 },
@@ -217,9 +202,9 @@
                         data: {
                                 csrfmiddlewaretoken: '{{ csrf_token }}',
                                 toy_data: JSON.stringify(toy_data),
-                                kernel_width: document.argument.kernel_width.value,
-                                kernel: document.argument.kernel.value,
-                                degree: document.argument.degree.value
+                                kernel_width: document.arguments.kernel_width.value,
+                                kernel: document.arguments.kernel.value,
+                                degree: document.arguments.degree.value
                               },
                         beforeSend:function(){
                                 $("#drawing").attr('disabled', true);
@@ -268,5 +253,4 @@
 
           $('#legend').html("<span id='lower' style='float:left; color:white;'>" + Math.round(color.domain()[0]) + "</span><span id='upper' style='float:right; color:white;'>" + Math.round(color.domain()[1]) + "</span>") ;
           </script>
-      </body>
-  </html>
+{% endblock %}
diff --git a/templates/svr/index.html b/templates/svr/index.html
@@ -1,10 +1,5 @@
-<!DOCTYPE html>
-<html>
-    <head>
-      <title>
-        Support Vector Regression Demo
-      </title>
-
+{% extends "default.html" %}
+{% block stylesheet %} 
       <style>
         body {
           font: 10px sans-serif;
@@ -39,20 +34,10 @@
         .grid path{
               stroke-width: 0;
         }
-      </style>
-      <script src="/static/js/d3.min.js"></script>
-      <script src="/static/js/jquery-1.9.1.min.js"></script>
-      <meta charset="utf-8">
-      <meta name="viewport" content="width=device-width,initial-scale=1.0">
-      <link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
-      <script src="/static/bootstrap/js/bootstrap.min.js"></script>
-    </head>
-    <body id="main">
-      <div class="page-header"><h2>&nbsp;Support Vector Regression Demo <small>based on Shogun-Toolbox</small></h2></div>
-      <div class="row">
-      <div class="span9" style="display:inline;"></div>
-      <div class="span3" style="display:inline;">
-      <form name="argument">
+        </style>
+{% endblock %}
+{% block arguments %}
+      <form name="arguments">
           <label> Kernel Function </label>
           <select name="kernel" class="span3">
                 <option value="gaus" selected>GaussianKernel</option>
@@ -72,9 +57,8 @@
         <button type="button" class="btn btn-small btn-primary" onclick="clear_map();">Clear</button>
         </div>
       </form>
-      </div>
-      </div>
-
+{% endblock %}
+{% block javascript %}
       <script>
         var new_points = {"points" : []};
         var margin = {top: 20, right: 20, bottom: 30, left: 40},
@@ -252,11 +236,11 @@
                       dataType: 'text',
                       data: {csrfmiddlewaretoken: '{{ csrf_token }}',
                              data: JSON.stringify(new_points),
-                             C: document.argument.C.value,
-                             tube: document.argument.tube.value,
-                             kernel: document.argument.kernel.value,
-                             sigma: document.argument.sigma.value,
-                             d: document.argument.d.value},
+                             C: document.arguments.C.value,
+                             tube: document.arguments.tube.value,
+                             kernel: document.arguments.kernel.value,
+                             sigma: document.arguments.sigma.value,
+                             d: document.arguments.d.value},
                       beforeSend: function(){
                              $("#regress").attr('disabled', true);
                              },
@@ -290,5 +274,4 @@
              }
         }
         </script>
-    </body>
-</html>
+{% endblock %}