Table data now taken from a JSON source

wise-webapp/src/main/webapp/html/css/styles.less

@@ -32,7 +32,7 @@ body {
     margin: 0 auto;
     width: @body-width;
     position: relative;
-    padding: 10px;
+    padding: @base-padding;
 }
 
 .rounded-corners (@radius: 5px) {
@@ -51,10 +51,8 @@ body {
     width: @tags-width;
     padding: @tags-padding;
     float: left;
-    border: @tags-border-size solid @base-color * 3;
+    border: @tags-border-size solid @base-color * 5;
     border-right: none;
-    position: relative;
-    top: 52px;
 
     h2 {
         font-size: @base-font-size * 1.5;
@@ -79,12 +77,16 @@ body {
 #map-table {
     width: @table-width;
     display: inline-block;
+    border: @base-border-size solid @base-color * 5;
 }
 
 /* ----------------------------- Toolbar -------------------------------- */
 
 #toolbar {
-    width: 100%;
-    height: 20px;
-    border: @tags-border-size solid @base-color * 3;
+    border: @tags-border-size solid @base-color * 11;
+    padding: @base-padding;
+    margin-bottom: @base-margin * 2;
 }
+
+
+/* ----------------------------- Buttons -------------------------------- */

wise-webapp/src/main/webapp/html/css/table.less

@@ -34,8 +34,6 @@
 }
 
 .dataTables_filter {
-	width: 50%;
-	float: right;
 	text-align: right;
     margin-bottom: 10px;
 }

wise-webapp/src/main/webapp/html/json_source.txt

@@ -0,0 +1,15 @@
+{ "aaData": [
+    ["1", "Fonctionnel plateforme", "moi", "14/06/2011", "moi"],
+    ["2", "Comportement topic", "moi, Olivier, Nicolas", "14/06/2011", "Olivier"],
+    ["3", "TM Blog", "moi", "14/06/2011", "moi"],
+    ["4", "Bloom", "moi", "13/06/2011", "moi"],
+    ["5", "Morning Mr. Magpie", "moi, Martin", "10/06/2011", "Martin"],
+    ["6", "Little By Little", "moi, Sophie", "1/06/2011", "Sophie"],
+    ["7", "Feral", "moi", "14/05/2011", "moi"],
+    ["8", "Lotus Flower", "moi, Sophie, Olivier", "13/05/2011", "Olivier"],
+    ["9", "Codex", "moi", "30/04/2011", "moi"],
+    ["10", "Give Up The Ghost", "moi, Olivier", "30/04/2011", "moi"],
+    ["11", "Separator", "moi, Olivier, Nicolas, Sophie", "02/04/2011", "Olivier"],
+    ["12", "Supercollider", "moi, Olivier", "02/04/2011", "Olivier"],
+    ["13", "The Butcher", "moi", "01/04/2011", "moi"]
+]}

wise-webapp/src/main/webapp/html/workspace.html

@@ -17,39 +17,50 @@
     <link href="css/ui-lightness/jquery-ui-1.8.16.custom.css" rel="stylesheet">
     <script type="text/javascript" language="javascript" src="js/jquery.dataTables.js"></script>
     <script type="text/javascript" charset="utf-8">
-        /* Data set - can contain whatever information you want */
-        var mapSet = [
-            ['Fonctionnel plateforme', 'moi', '14/06/2011 moi', '>'],
-            ['Comportement topic', 'moi, Olivier, Nicolas', '14/06/2011 Olivier', '>'],
-            ['TM Blog', 'moi', '14/06/2011 moi', '>'],
-            ['Bloom', 'moi', '13/06/2011 moi', '>'],
-            ['Morning Mr. Magpie', 'moi, Martin', '10/06/2011 Martin', '>'],
-            ['Little By Little', 'moi, Sophie', '1/06/2011 Sophie', '>'],
-            ['Feral', 'moi', '14/05/2011 moi', '>'],
-            ['Lotus Flower', 'moi, Sophie, Olivier', '13/05/2011 Olivier', '>'],
-            ['Codex', 'moi', '30/04/2011 moi', '>'],
-            ['Give Up The Ghost', 'moi, Olivier', '30/04/2011 moi', '>'],
-            ['Separator', 'moi, Olivier, Nicolas, Sophie', '02/04/2011 Olivier', '>'],
-            ['Supercollider', 'moi, Olivier', '02/04/2011 Olivier', '>'],
-            ['The Butcher', 'moi', '01/04/2011 moi', '>']
-        ];
-
         $(function() {
             $('#map-table').html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="maps"></table>' );
             $('#maps').dataTable( {
-                "aaData": mapSet,
+                "bProcessing" : true,
+                "sAjaxSource" : "json_source.txt",
                 "aoColumns": [
+                    {
+                        "sTitle" : '<input type="checkbox"/>',
+                        "sClass" : "center",
+                        "sWidth" : "15px",
+                        "bSortable" : false,
+                        "fnRender" : function(obj) {
+                            return obj.aData[0];
+                        }
+                    },
                     { "sTitle": "Titre" },
                     { "sTitle": "Utillisateurs" },
-                    { "sTitle": "Derniere modification" },
-                    { "sTitle": "Details", "sClass": "center" }
+                    {
+                        "sTitle": "Derniere modification",
+                        "fnRender" : function(obj) {
+                            return obj.aData[3] + " " + obj.aData[4];
+                        }
+                    },
+                    {
+                        "sTitle": "Details",
+                        "sClass": "center",
+                        "sWidth" : "15px",
+                        "bSortable" : false,
+                        "fnRender" : function(obj) {
+                            return ">";
+                        }
+                    }
+
                 ],
                 "bAutoWidth" : false,
                 "bLengthChange": false,
-                "bInfo": false
-
+                "bInfo": false,
+                "bPaginate": false
             });
+
+            $('#maps_filter').appendTo("#toolbar");
         });
+
+
     </script>
 
     <!--Tags-->
@@ -77,11 +88,28 @@
             });
         });
     </script>
+
+    <!--Toolbar-->
+    <script type="text/javascript" charset="utf-8">
+        $(function() {
+            $("#show-tags").click(function() {
+
+            })
+        });
+    </script>
 </head>
 
 <body>
 <div id="wrapper">
-    <!--<div id="toolbar" class="toolbar"></div>-->
+    <div id="toolbar" class="toolbar">
+
+    </div>
+
+    <div id="map-table-actions">
+        <button>Organiser</button>
+        <button>Partager</button>
+        <button>Supprimer</button>
+    </div>
 
     <div>
         <div id="tags">