<!DOCTYPE HTML>
<%@ include file="/jsp/init.jsp" %>
<html>
<head>
<base href="${pageContext.request.contextPath}/"/>
<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" language="javascript" src="js/jquery.timeago.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",
fnRender : function(obj) {
return '<a href="c/map/' + obj.aData.id + '/edit.htm">' + obj.aData.title + '</a>';
}
},
{
sTitle : "Description",
mDataProp : "description"
},
{
sTitle : "Owner",
mDataProp :"creator"
},
{
bSearchable : false,
sTitle : "Last Modified",
bUseRendered: false,
sType: "date",
mDataProp: "lastModificationTime",
fnRender : function(obj) {
var time = obj.aData.lastModificationTime;
return '<abbr class="timeago" title="' + time + '">' + jQuery.timeago(time) + '</abbr>' + ' ' + '<span style="color: #777;font-size: 75%;padding-left: 5px;">' + obj.aData.lastModifierUser + '</span>';
}
},
{
sTitle: "Details",
sClass: "center",
sWidth : "15px",
bSortable : false,
bSearchable : false,
fnRender : function(obj) {
return '<a href="c/map/' + obj.aData.id + '/details.htm"><span class="ui-icon ui-icon-circle-triangle-e" style="margin: 0 auto;"></span></a>';
}
}
],
"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() {
$("#new-dialog-modal").dialogForm({
modal: true,
acceptButtonLabel : "Create",
cancelButtonLabel : "Cancel",
redirect: "c/map/{header.resourceId}/edit.htm",
url : "../service/maps"
});
});
$("#buttons .duplicateMap").button({
icons: { primary: "ui-icon-copy" }
}).click(function() {
// Map to be cloned ...
var tableElem = $('#mindmapListTable');
var rows = tableElem.dataTableExt.getSelectedRows();
if (rows.length > 0) {
// Obtain map name ...
var rowData = tableElem.dataTable().fnGetData(rows[0]);
$('#duplicateMessage').text("Duplicate '" + rowData.title + "'");
// Obtains map id ...
var mapId = rowData.id;
// Initialize dialog ...
$("#duplicate-dialog-modal").dialogForm({
modal: true,
acceptButtonLabel : "Duplicate",
cancelButtonLabel : "Cancel",
redirect: "c/map/{header.resourceId}/edit.htm",
url : "../service/maps/" + mapId
});
}
});
$("#buttons .renameMap").button({
icons: { primary: "ui-icon-gear" }
}).click(function() {
// Map to be cloned ...
var tableElem = $('#mindmapListTable');
var rows = tableElem.dataTableExt.getSelectedRows();
if (rows.length > 0) {
// Obtain map name ...
var dataTable = tableElem.dataTable();
var rowData = dataTable.fnGetData(rows[0]);
// Fill dialog with default values ...
var mapId = rowData.id;
$("#rename-dialog-modal input[name='title']").attr('value', rowData.title);
$("#rename-dialog-modal input[name='description']").attr('value', rowData.description);
// Initialize dialog ...
$("#rename-dialog-modal").dialogForm({
modal: true,
type: 'PUT',
acceptButtonLabel : "Rename",
cancelButtonLabel : "Cancel",
postUpdate: function(reqBodyData) {
// Remove old entry ...
dataTable.fnDeleteRow(rowData);
// Add a new one...
rowData.title = reqBodyData.title;
rowData.description = reqBodyData.description;
dataTable.fnAddData(rowData);
},
url : "../service/maps/" + mapId
});
}
});
$("#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");
}
}
});
}
});
$("#buttons .importMap").button({
icons: { primary: "ui-icon-trash" }
}).click(function() {
window.open('c/map/import.htm');
});
$("#buttons .printMap").button({
icons: { primary: "ui-icon-print" }
}).click(function() {
var mapIds = $('#mindmapListTable').dataTableExt.getSelectedMapsIds();
if (mapIds.length > 0) {
window.open('c/map/' + mapIds[0] + '/print.htm');
}
});
$("#buttons .publishMap").button({
icons: { primary: "ui-icon-print" }
}).click(function() {
});
$("#buttons .shareMap").button({
icons: { primary: "ui-icon-print" }
}).click(function() {
});
$("#buttons .tagMap").button({
icons: { primary: "ui-icon-print" }
}).click(function() {
});
});
// Register time update functions ....
setTimeout(function() {
jQuery("abbr.timeago").timeago()
}, 50000);
</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">
<button class="newMap">New</button>
<button class="importMap">Import</button>
<button class="duplicateMap">Duplicate</button>
<button class="delete">Delete</button>
<button class="renameMap">Rename</button>
<button class="printMap">Print</button>
<button class="publishMap">Publish</button>
<button class="shareMap">Collaborate</button>
<button class="tagMap">Tag</button>
</div>
<div>
<div id="delete-dialog-modal" title="Delete maps" style="display: none">
<p>Are you sure you want to delete maps <span></span> ?</p>
</div>
<!-- New map dialog -->
<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="newTitle"><spring:message code="NAME"/>:</label>
</td>
<td>
<input name="title" id="newTitle" type="text" required="true"
placeholder="Name used to identify your map"/>
</td>
</tr>
<tr>
<td class="formLabel">
<label for="newDec"><spring:message code="DESCRIPTION"/>:</label>
</td>
<td>
<input name="description" id="newDec" type="text"
placeholder="Some description for your map"/>
</td>
</tr>
</table>
</div>
<!-- Duplicate map dialog -->
<div id="duplicate-dialog-modal" title="Copy Map" style="display: none">
<div id="duplicateMessage"></div>
<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" 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" type="text"
placeholder="Some description for your map"/>
</td>
</tr>
</table>
</div>
<!-- Duplicate map dialog -->
<div id="rename-dialog-modal" title="Rename" style="display: none">
<div id="errorMessage"></div>
<table>
<tr>
<td class="formLabel">
<span class="fieldRequired">*</span>
<label for="renTitle"><spring:message code="NAME"/>:</label>
</td>
<td>
<input name="title" id="renTitle" required="true"/>
</td>
</tr>
<tr>
<td class="formLabel">
<label for="renDescription"><spring:message code="DESCRIPTION"/>:</label>
</td>
<td>
<input name="description" id="renDescription"/>
</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>
</div>
<div>
<div id="map-table">
<table class="display" id="mindmapListTable">
</table>
</div>
</div>
</div>
</div>
<jsp:include page="footer.jsp"/>
</body>
</html>