<!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>