<!DOCTYPE HTML> <%@ include file="/jsp/init.jsp" %> <html> <head> <base href="../"> <title><spring:message code="SITE.TITLE"/></title> <meta http-equiv="Content-type" content="text/html; charset=utf-8"/> <link rel="icon" href="${pageContext.request.contextPath}/images/favicon.ico" type="image/x-icon"/> <link rel="shortcut icon" href="${pageContext.request.contextPath}/images/favicon.ico" type="image/x-icon"/> <link rel="stylesheet/less" type="text/css" href="css/mymaps.less"/> <script src="js/less.js" type="text/javascript"></script> <!--jQuery DataTables--> <script type="text/javascript" language="javascript" src="js/jquery.js"></script> <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/jquery.dataTables.plugins.js"></script> <script type="text/javascript" charset="utf-8"> $(function() { var jQueryDataTable = $('#mindmapListTable').dataTable({ bProcessing : true, sAjaxSource : "../service/maps", sAjaxDataProp: 'mindmapsInfo', aoColumns: [ { sTitle : '<input type="checkbox" id="selectAll"/>', sWidth : "15px", sClass : "select center", bSortable : false, bSearchable : false, fnRender : function(obj) { return '<input type="checkbox" id="' + obj.aData.id + '"/>'; } }, { sClass : "columName", sTitle : "Name", bUseRendered : false, mDataProp: "title" }, { sTitle : "Description", mDataProp : "description" }, { sTitle : "Owner", mDataProp :"creator" }, { bSearchable : false, sTitle : "Last Modified", bUseRendered: false, sType: "numeric", mDataProp: "lastModificationDate", fnRender : function(obj) { return obj.aData.lastModificationDate + ", " + obj.aData.lastModifierUser; } }, { sTitle: "Details", sClass: "center", sWidth : "15px", bSortable : false, bSearchable : false, fnRender : function(obj) { return '<span class="ui-icon ui-icon-circle-triangle-e" style="margin: 0 auto;"></span>'; } } ], "bAutoWidth" : false, "oLanguage" : { "sSearch" : "Search", "sInfo" : "Page _END_ of _TOTAL_" }, bStateSave:true }); $('#mindmapListTable_filter').appendTo("#toolbar"); $("#mindmapListTable_length").appendTo("#buttons"); $('input:checkbox[id="selectAll"]').click(function() { $("#mindmapListTable").dataTableExt.selectAllMaps(); }); }); </script> <!--Tags--> <script type="text/javascript" charset="utf-8"> var tags = ['ThinkMapping', 'Akostic', 'Clients', 'Favoris']; $(function() { for (i in tags) { var outerDiv = $('<div class="tag">' + tags[i] + '</div>'); var icon = $('<span class="ui-icon ui-icon-folder-collapsed"></span>'); outerDiv.append(icon); $("#tags-list").append(outerDiv); } $("#tags-actions button").button({ icons: { primary: "ui-icon-plusthick" } }); $("#tags-list .tag").each(function(index) { $(this).click(function() { console.log("ddfsfds"); }) }) }); </script> <!--Buttons--> <script type="text/javascript" charset="utf-8"> $(function() { $("#buttons .show-tags").button({ icons: { primary: "ui-icon-folder-open" } }).click(function() { if ($("#tags").css("opacity") == 0) { $("#tags").css("opacity", 1); $("#mindmapListTable").animate({ width: "77%" }, 1000); } else { $("#mindmapListTable").animate({ width: "100%" }, 1000, function() { $("#tags").css("opacity", 0); }); } }); $("#buttons .share").button({ icons: { primary: "ui-icon-transferthick-e-w" } }).click(function() { var selectedMaps = $('#mindmapListTable').dataTableExt.getSelectedMapsIds(); var html2 = $('#share-dialog-modal p span').html(selectedMaps.toString()); if (selectedMaps.length > 0) { $("#share-dialog-modal").dialog({ height: 140, modal: true, buttons: { "Delete": function() { $(this).dialog("close"); }, Cancel: function() { $(this).dialog("close"); } } }); } }); $("#buttons .newMap").button({ icons: { primary: "ui-icon-circle-plus" } }).click(function() { // Clean previous dialog content ... $("#new-dialog-modal div[id='errorMessage']").text("").removeClass("ui-state-highlight"); $("#new-dialog-modal").dialog({ modal: true, buttons: { "Create": function() { var formData = {}; $('#new-dialog-modal input').each(function(index, elem) { formData[elem.name] = elem.value; }); jQuery.ajax("../service/maps", { async:false, dataType: 'json', data: JSON.stringify(formData), type: 'POST', contentType:"application/json; charset=utf-8", success : function(data, textStatus, jqXHR) { var mapId = jqXHR.getResponseHeader("ResourceId"); window.location = "c/editor.htm?action=open&mapId=" + mapId; }, error: function(jqXHR, textStatus, errorThrown) { if (jqXHR.status == 400) { var errors = JSON.parse(jqXHR.responseText); // Clean previous marks .... $('#new-dialog-modal input').each(function(index, elem) { $(elem).removeClass("ui-state-error"); }); // Mark fields with errors ... var fieldErrors = errors.fieldErrors; if (fieldErrors) { for (var fieldName in fieldErrors) { // Mark the field ... var message = fieldErrors[fieldName]; var inputField = $("#new-dialog-modal input[name='" + fieldName + "']"); $(inputField).addClass("ui-state-error"); $("#new-dialog-modal div[id='errorMessage']").text(message).addClass("ui-state-highlight"); } } } else { alert("Unexpected error removing maps. Refresh before continue."); } } }); }, Cancel:function() { $(this).dialog("close"); } } }); }); $("#buttons .importMap").button({ icons: { primary: "ui-icon-trash" } }); $("#buttons .moreActions").button({ icons: { primary: "ui-icon-triangle-1-s" } }); $("#buttons .delete").button({ icons: { primary: "ui-icon-trash" } }).click(function() { var mapIds = $('#mindmapListTable').dataTableExt.getSelectedMapsIds(); if (mapIds.length > 0) { var html2 = $('#delete-dialog-modal p span'); $("#delete-dialog-modal").dialog({ height: 140, modal: true, buttons: { "Delete": function() { $('#mindmapListTable').dataTableExt.removeSelectedRows(); $(this).dialog("close"); }, Cancel: function() { $(this).dialog("close"); } } }); } }); }) ; </script> </head> <body> <div class="content"> <jsp:include page="header.jsp"> <jsp:param name="removeSignin" value="false"/> <jsp:param name="showLogout" value="true"/> </jsp:include> <div id="mindmapListContainer"> <div id="toolbar" class="toolbar"> </div> <div id="buttons"> <div id="delete-dialog-modal" title="Delete maps" style="display: none"> <p>Are you sure you want to delete maps <span></span> ?</p> </div> <div id="new-dialog-modal" title="Add new map" style="display: none"> <div id="errorMessage"></div> <table> <tr> <td class="formLabel"> <span class="fieldRequired">*</span> <label for="title"><spring:message code="NAME"/>:</label> </td> <td> <input name="title" id="title" tabindex="1" type="text" required="true"/> </td> </tr> <tr> <td class="formLabel"> <label for="description"><spring:message code="DESCRIPTION"/>:</label> </td> <td> <input name="description" id="description" tabindex="2"/> </td> </tr> </table> </div> <div id="share-dialog-modal" title="Share maps" style="display: none"> <p>Are you sure you want to share maps <span></span> ?</p> </div> <button class="newMap">New</button> <button class="delete">Delete</button> <button class="importMap">Import</button> <button class="moreActions">More</button> </div> <div> <div id="tags"> <h2>Mes dossiers:</h2> <div id="tags-list"></div> <div id="tags-actions"> <button>Nouveau Dossier</button> </div> </div> <div id="map-table"> <table class="display" id="mindmapListTable"> </table> </div> </div> </div> </div> <jsp:include page="footer.jsp"/> </body> </html>