Added basic modal dialog

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

@@ -90,3 +90,7 @@ body {
 
 
 /* ----------------------------- Buttons -------------------------------- */
+#buttons {
+    margin-left: 100% - @table-width;
+    margin-bottom: @base-margin;
+}

wise-webapp/src/main/webapp/html/js/es_date.js

@@ -1,25 +0,0 @@
-jQuery.fn.dataTableExt.oSort['es_date-asc']  = function(a,b) {
-    var ukDatea = a.split('/');
-    var ukDateb = b.split('/');
-
-    var x = (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
-    var y = (ukDateb[2] + ukDateb[1] + ukDateb[0]) * 1;
-
-    return ((x < y) ? -1 : ((x > y) ?  1 : 0));
-};
-
-jQuery.fn.dataTableExt.oSort['es_date-desc'] = function(a,b) {
-    var ukDatea = a.split('/');
-    var ukDateb = b.split('/');
-
-    var x = (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
-    var y = (ukDateb[2] + ukDateb[1] + ukDateb[0]) * 1;
-
-    return ((x < y) ? 1 : ((x > y) ?  -1 : 0));
-};/**
- * Created by IntelliJ IDEA.
- * User: belbo
- * Date: 10/11/11
- * Time: 11:33 AM
- * To change this template use File | Settings | File Templates.
- */

wise-webapp/src/main/webapp/html/js/jquery.dataTables.plugins.js

@@ -0,0 +1,43 @@
+jQuery.fn.dataTableExt.oSort['es_date-asc']  = function(a,b) {
+    var esDatea = a.split('/');
+    var esDateb = b.split('/');
+
+    var x = (esDatea[2] + esDatea[1] + esDatea[0]) * 1;
+    var y = (esDateb[2] + esDateb[1] + esDateb[0]) * 1;
+
+    return ((x < y) ? -1 : ((x > y) ?  1 : 0));
+};
+
+jQuery.fn.dataTableExt.oSort['es_date-desc'] = function(a,b) {
+    var esDatea = a.split('/');
+    var esDateb = b.split('/');
+
+    var x = (esDatea[2] + esDatea[1] + esDatea[0]) * 1;
+    var y = (esDateb[2] + esDateb[1] + esDateb[0]) * 1;
+
+    return ((x < y) ? 1 : ((x > y) ?  -1 : 0));
+};
+
+jQuery.fn.dataTableExt.selectAllMaps = function() {
+    var total = $('.select input:checkbox[id!="selectAll"]').size();
+    var selected = $('.select input:checked[id!="selectAll"]').size();
+    if (selected < total) {
+        $('.select input:!checked[id!="selectAll"]').each(function(index) {
+            $(this).prop("checked", true);
+        });
+    }
+    else {
+        $('.select input:!checked[id!="selectAll"]').each(function(index) {
+            $(this).prop("checked", false);
+        });
+    }
+}
+
+jQuery.fn.dataTableExt.getSelectedMaps = function() {
+    var ids = [];
+    $('.select input:checked[id!="selectAll"]').each(function(index) {
+        ids.push($(this).attr("id"));
+    });
+
+    return ids;
+}

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

@@ -16,20 +16,21 @@
     <script type="text/javascript" language="javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
     <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" language="javascript" src="js/es_date.js"></script>
+    <script type="text/javascript" language="javascript" src="js/jquery.dataTables.plugins.js"></script>
     <script type="text/javascript" charset="utf-8">
         $(function() {
             $('#map-table').html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="maps"></table>' );
-            $('#maps').dataTable( {
+            var table = $('#maps').dataTable( {
                 "bProcessing" : true,
                 "sAjaxSource" : "json_source.txt",
                 "aoColumns": [
                     {
-                        "sTitle" : '<input type="checkbox"/>',
+                        "sTitle" : '<input type="checkbox" id="selectAll"/>',
-                        "sClass" : "center", "sWidth" : "15px",
+                        "sClass" : "center select", "sWidth" : "15px",
                         "bSortable" : false, "bSearchable" : false,
                         "fnRender" : function(obj) {
-                            return obj.aData[0];
+                            var id = obj.aData[0];
+                            return '<input type="checkbox" id="'+id+'"/>';
                         }
                     },
                     {
@@ -43,7 +44,7 @@
                     {
                         "sTitle" : "date",
                         "sType" : "es_date",
-                        "bVisible" : false,
+                        "bVisible" : false, "bSearchable" : false,
                         "fnRender" :function(obj) {
                             return obj.aData[4];
                         }
@@ -61,7 +62,7 @@
                         "sWidth" : "15px",
                         "bSortable" : false, "bSearchable" : false,
                         "fnRender" : function(obj) {
-                            return ">";
+                            return '<span class="ui-icon ui-icon-triangle-1-e" style="margin: 0 auto;"></span>';
                         }
                     }
 
@@ -73,6 +74,10 @@
             });
 
             $('#maps_filter').appendTo("#toolbar");
+
+            $('input:checkbox[id="selectAll"]').click(function() {
+                $("#maps").dataTableExt.selectAllMaps();
+            });
         });
 
 
@@ -93,15 +98,11 @@
 
             $("#tags-list").html(html);
             $("#tags-list button" ).button({
-                icons: {
+                icons: { primary: "ui-icon-folder-collapsed" }
-                    primary: "ui-icon-folder-collapsed"
-                }
             });
 
             $("#tags-actions button" ).button({
-                icons: {
+                icons: { primary: "ui-icon-plus" }
-                    primary: "ui-icon-plus"
-                }
             });
         });
     </script>
@@ -114,6 +115,40 @@
             })
         });
     </script>
+
+    <!--Buttons-->
+    <script type="text/javascript" charset="utf-8">
+        $(function() {
+            $("#buttons .show-tags").button({
+                icons: { primary: "ui-icon-folder-open" }
+            });
+            $("#buttons .share").button({
+                icons: { primary: "ui-icon-transferthick-e-w" }
+            });
+
+            $("#buttons .delete").button({
+                icons: { primary: "ui-icon-trash" }
+            }).click(function() {
+                        var selectedMaps = $('#maps').dataTableExt.getSelectedMaps();
+                        console.log("Delete maps: " +selectedMaps);
+                        var html2 = $('#delete-dialog-modal p span').html(selectedMaps.toString());
+                        console.log(html2);
+
+                        $( "#delete-dialog-modal" ).dialog({
+                            height: 140,
+                            modal: true,
+                            buttons: {
+                                "Delete": function() {
+                                    $( this ).dialog( "close" );
+                                },
+                                Cancel: function() {
+                                    $( this ).dialog( "close" );
+                                }
+                            }
+                        });
+                    });
+        })
+    </script>
 </head>
 
 <body>
@@ -122,10 +157,13 @@
 
     </div>
 
-    <div id="map-table-actions">
+    <div id="buttons">
-        <button>Organiser</button>
+        <div id="delete-dialog-modal" title="Delete maps" style="display: none">
-        <button>Partager</button>
+            <p>Are you sure you want to delete maps <span></span> ?</p>
-        <button>Supprimer</button>
+        </div>
+        <button class="show-tags">Organiser</button>
+        <button class="share">Partager</button>
+        <button class="delete">Supprimer</button>
     </div>
 
     <div>