Added a simple dmp ui editor.

This commit is contained in:
Nikolaos Laskaris 2017-09-21 14:08:40 +03:00
parent 8873fa9ff3
commit 2e3b3cb1ad
6 changed files with 486 additions and 10 deletions

View File

@ -17,11 +17,6 @@
<attribute name="maven.pomderived" value="true"/>
</attributes>
</classpathentry>
<classpathentry excluding="**" kind="src" output="target/test-classes" path="src/test/resources">
<attributes>
<attribute name="maven.pomderived" value="true"/>
</attributes>
</classpathentry>
<classpathentry kind="con" path="org.eclipse.m2e.MAVEN2_CLASSPATH_CONTAINER">
<attributes>
<attribute name="maven.pomderived" value="true"/>

View File

@ -198,10 +198,20 @@ public class BackendInterface {
@RequestMapping(method = RequestMethod.POST, value = { "/setDMPByForm" }, consumes = MediaType.APPLICATION_FORM_URLENCODED_VALUE, produces="text/plain")
public @ResponseBody ResponseEntity<Object> setDMPByForm(@RequestBody MultiValueMap<String,String> formData) {
//create the whole dmp structure by the form fields
DMP dmp = Transformers.createDMPfromMap(formData);
return setDMP(dmp);
}
@RequestMapping(method = RequestMethod.POST, value = { "/editDMPByForm" }, consumes = MediaType.APPLICATION_FORM_URLENCODED_VALUE, produces="text/plain")
public @ResponseBody ResponseEntity<Object> editDMPByForm(@RequestBody MultiValueMap<String,String> formData) {
//get previous DMP by id, replace fields, and update
DMP dmp = dMPDao.read(UUID.fromString(formData.getFirst("dmp-id")));
dmp.getDataset().getProfile().setDefinition(formData.getFirst("DatasetProfile.definition"));
dmp.getDataset().getProfile().getRuleset().setDefinition(formData.getFirst("DatasetProfileRuleset.definition"));
dmp.getDataset().getProfile().getViewstyle().setDefinition(formData.getFirst("DatasetProfileViewStyle.definition"));
return setDMP(dmp);
}

View File

@ -21,6 +21,9 @@
<script src="resources/js/jquery.json-viewer.js"></script>
<link rel="stylesheet" type="text/css" href="resources/css/jquery.json-viewer.css">
<!-- lib 4 pretty-printing xml and json -->
<script src="resources/js/vkbeautify.0.99.00.js"></script>
<!-- Nice BS notifications -->
<script src="resources/js/bootstrap-notify.min.js"></script>
@ -32,8 +35,8 @@
</head>
<body>
<div class="col-sm-8">
<h3>Digital Management Plans - Backend administration</h3>
@ -78,11 +81,21 @@
<span class="glyphicon glyphicon-search"></span>
</button>
<button class="btn btn-default" onclick="clickedEdit('${dmp.project.id}')">
<!--
<c:set var="currency" value="USD" scope="session" />
-->
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#edit-dmp-modal-container" onclick="clickedEdit(${fn:escapeXml(dmp)})">
<span class="glyphicon glyphicon-pencil"></span>
</button>
<button class="btn btn-default" onclick="clickedDelete('${dmp.project.id}')">
<!--
<button class="btn btn-default" onclick="clickedEdit('${dmp.id}')">
<span class="glyphicon glyphicon-pencil"></span>
</button>
-->
<button class="btn btn-default" onclick="clickedDelete('${dmp.id}')">
<span class="glyphicon glyphicon-trash"></span>
</button>
@ -364,5 +377,58 @@
</div>
<!-- Modal -->
<div class="modal fade" id="edit-dmp-modal-container" tabindex="-1" role="dialog" aria-labelledby="edit-dmp-modal-container" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="edit-dmp-modal">Edit DMP</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<form id="edit-dmp-form"class="form-inline" method="POST" action="../rest/editDMPByForm">
<input type="hidden" form="edit-dmp-form" class="form-control" id="dmp-id" name="dmp-id" value="">
<div class="form-group">
<label for="definition">DatasetProfile Definition:</label>
<textarea rows="12" cols="60" form="edit-dmp-form" class="form-control" id="dp-definition" name="DatasetProfile.definition"></textarea>
</div>
<div class="form-group">
<label for="definition">DatasetProfileRuleset Definition:</label>
<textarea rows="12" cols="60" form="edit-dmp-form" class="form-control" id="dpr-definition" name="DatasetProfileRuleset.definition"></textarea>
</div>
<div class="form-group">
<label for="definition">DatasetProfileViewStyle Definition:</label>
<textarea rows="12" cols="60" form="edit-dmp-form" class="form-control" id="dpv-definition" name="DatasetProfileViewStyle.definition"></textarea>
</div>
<button type="submit" class="btn btn-primary">Update</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
</form>
</div>
<div class="modal-footer">
<!--
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
-->
</div>
</div>
</div>
</div>
</body>
</html>

View File

@ -7,6 +7,14 @@ div.form-group{
.modal-edit-form {
width: 80%;
margin: auto;
/*
background-color: yellow;
*/
}
/*

View File

@ -23,7 +23,7 @@ function clickedDelete(id){
}
function clickedEdit(id){
function clickedEdit_Disabled(id){
console.log(id);
$.notify({
title: "<strong><b>Editing is disabled</b></strong><br>",
@ -31,6 +31,45 @@ function clickedEdit(id){
});
}
function clickedEdit(dmp) {
console.log(dmp);
var titles = ["DatasetProfileRuleset", "DatasetProfileViewStyle", "DatasetProfile"];
$('#edit-dmp-modal-container').find('.modal-title').html("Edit DMP: "+dmp.id);
var form = $('#edit-dmp-form');
form.find("#dmp-id").val(dmp.id); //set the current id on the hidden form element
if((dmp.dataset != null) && (dmp.dataset.profile != null)){
form.find('#dp-definition').val(vkbeautify.xml(dmp.dataset.profile.definition));
if(dmp.dataset.profile.ruleset != 'undefined')
form.find('#dpr-definition').val(vkbeautify.xml(dmp.dataset.profile.ruleset.definition));
if(dmp.dataset.profile.viewstyle != 'undefined')
form.find('#dpv-definition').val(vkbeautify.xml(dmp.dataset.profile.viewstyle.definition));
}
//var listGroup = $(document.createElement('div'));
//listGroup.addClass("list-group");
//listGroup.append( "<a href='#' class='list-group-item list-group-item-action'>DatasetProfileRuleset</a>" );
//console.log(listGroup);
//$('#edit-dmp-modal-container').find('.modal-body').html("");
//$('#edit-dmp-modal-container').find('.modal-body').append(listGroup);
}
function loadTile(data){

View File

@ -0,0 +1,358 @@
/**
* vkBeautify - javascript plugin to pretty-print or minify text in XML, JSON, CSS and SQL formats.
*
* Version - 0.99.00.beta
* Copyright (c) 2012 Vadim Kiryukhin
* vkiryukhin @ gmail.com
* http://www.eslinstructor.net/vkbeautify/
*
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
* Pretty print
*
* vkbeautify.xml(text [,indent_pattern]);
* vkbeautify.json(text [,indent_pattern]);
* vkbeautify.css(text [,indent_pattern]);
* vkbeautify.sql(text [,indent_pattern]);
*
* @text - String; text to beatufy;
* @indent_pattern - Integer | String;
* Integer: number of white spaces;
* String: character string to visualize indentation ( can also be a set of white spaces )
* Minify
*
* vkbeautify.xmlmin(text [,preserve_comments]);
* vkbeautify.jsonmin(text);
* vkbeautify.cssmin(text [,preserve_comments]);
* vkbeautify.sqlmin(text);
*
* @text - String; text to minify;
* @preserve_comments - Bool; [optional];
* Set this flag to true to prevent removing comments from @text ( minxml and mincss functions only. )
*
* Examples:
* vkbeautify.xml(text); // pretty print XML
* vkbeautify.json(text, 4 ); // pretty print JSON
* vkbeautify.css(text, '. . . .'); // pretty print CSS
* vkbeautify.sql(text, '----'); // pretty print SQL
*
* vkbeautify.xmlmin(text, true);// minify XML, preserve comments
* vkbeautify.jsonmin(text);// minify JSON
* vkbeautify.cssmin(text);// minify CSS, remove comments ( default )
* vkbeautify.sqlmin(text);// minify SQL
*
*/
(function() {
function createShiftArr(step) {
var space = ' ';
if ( isNaN(parseInt(step)) ) { // argument is string
space = step;
} else { // argument is integer
switch(step) {
case 1: space = ' '; break;
case 2: space = ' '; break;
case 3: space = ' '; break;
case 4: space = ' '; break;
case 5: space = ' '; break;
case 6: space = ' '; break;
case 7: space = ' '; break;
case 8: space = ' '; break;
case 9: space = ' '; break;
case 10: space = ' '; break;
case 11: space = ' '; break;
case 12: space = ' '; break;
}
}
var shift = ['\n']; // array of shifts
for(ix=0;ix<100;ix++){
shift.push(shift[ix]+space);
}
return shift;
}
function vkbeautify(){
this.step = ' '; // 4 spaces
this.shift = createShiftArr(this.step);
};
vkbeautify.prototype.xml = function(text,step) {
var ar = text.replace(/>\s{0,}</g,"><")
.replace(/</g,"~::~<")
.replace(/\s*xmlns\:/g,"~::~xmlns:")
.replace(/\s*xmlns\=/g,"~::~xmlns=")
.split('~::~'),
len = ar.length,
inComment = false,
deep = 0,
str = '',
ix = 0,
shift = step ? createShiftArr(step) : this.shift;
for(ix=0;ix<len;ix++) {
// start comment or <![CDATA[...]]> or <!DOCTYPE //
if(ar[ix].search(/<!/) > -1) {
str += shift[deep]+ar[ix];
inComment = true;
// end comment or <![CDATA[...]]> //
if(ar[ix].search(/-->/) > -1 || ar[ix].search(/\]>/) > -1 || ar[ix].search(/!DOCTYPE/) > -1 ) {
inComment = false;
}
} else
// end comment or <![CDATA[...]]> //
if(ar[ix].search(/-->/) > -1 || ar[ix].search(/\]>/) > -1) {
str += ar[ix];
inComment = false;
} else
// <elm></elm> //
if( /^<\w/.exec(ar[ix-1]) && /^<\/\w/.exec(ar[ix]) &&
/^<[\w:\-\.\,]+/.exec(ar[ix-1]) == /^<\/[\w:\-\.\,]+/.exec(ar[ix])[0].replace('/','')) {
str += ar[ix];
if(!inComment) deep--;
} else
// <elm> //
if(ar[ix].search(/<\w/) > -1 && ar[ix].search(/<\//) == -1 && ar[ix].search(/\/>/) == -1 ) {
str = !inComment ? str += shift[deep++]+ar[ix] : str += ar[ix];
} else
// <elm>...</elm> //
if(ar[ix].search(/<\w/) > -1 && ar[ix].search(/<\//) > -1) {
str = !inComment ? str += shift[deep]+ar[ix] : str += ar[ix];
} else
// </elm> //
if(ar[ix].search(/<\//) > -1) {
str = !inComment ? str += shift[--deep]+ar[ix] : str += ar[ix];
} else
// <elm/> //
if(ar[ix].search(/\/>/) > -1 ) {
str = !inComment ? str += shift[deep]+ar[ix] : str += ar[ix];
} else
// <? xml ... ?> //
if(ar[ix].search(/<\?/) > -1) {
str += shift[deep]+ar[ix];
} else
// xmlns //
if( ar[ix].search(/xmlns\:/) > -1 || ar[ix].search(/xmlns\=/) > -1) {
str += shift[deep]+ar[ix];
}
else {
str += ar[ix];
}
}
return (str[0] == '\n') ? str.slice(1) : str;
}
vkbeautify.prototype.json = function(text,step) {
var step = step ? step : this.step;
if (typeof JSON === 'undefined' ) return text;
if ( typeof text === "string" ) return JSON.stringify(JSON.parse(text), null, step);
if ( typeof text === "object" ) return JSON.stringify(text, null, step);
return text; // text is not string nor object
}
vkbeautify.prototype.css = function(text, step) {
var ar = text.replace(/\s{1,}/g,' ')
.replace(/\{/g,"{~::~")
.replace(/\}/g,"~::~}~::~")
.replace(/\;/g,";~::~")
.replace(/\/\*/g,"~::~/*")
.replace(/\*\//g,"*/~::~")
.replace(/~::~\s{0,}~::~/g,"~::~")
.split('~::~'),
len = ar.length,
deep = 0,
str = '',
ix = 0,
shift = step ? createShiftArr(step) : this.shift;
for(ix=0;ix<len;ix++) {
if( /\{/.exec(ar[ix])) {
str += shift[deep++]+ar[ix];
} else
if( /\}/.exec(ar[ix])) {
str += shift[--deep]+ar[ix];
} else
if( /\*\\/.exec(ar[ix])) {
str += shift[deep]+ar[ix];
}
else {
str += shift[deep]+ar[ix];
}
}
return str.replace(/^\n{1,}/,'');
}
//----------------------------------------------------------------------------
function isSubquery(str, parenthesisLevel) {
return parenthesisLevel - (str.replace(/\(/g,'').length - str.replace(/\)/g,'').length )
}
function split_sql(str, tab) {
return str.replace(/\s{1,}/g," ")
.replace(/ AND /ig,"~::~"+tab+tab+"AND ")
.replace(/ BETWEEN /ig,"~::~"+tab+"BETWEEN ")
.replace(/ CASE /ig,"~::~"+tab+"CASE ")
.replace(/ ELSE /ig,"~::~"+tab+"ELSE ")
.replace(/ END /ig,"~::~"+tab+"END ")
.replace(/ FROM /ig,"~::~FROM ")
.replace(/ GROUP\s{1,}BY/ig,"~::~GROUP BY ")
.replace(/ HAVING /ig,"~::~HAVING ")
//.replace(/ SET /ig," SET~::~")
.replace(/ IN /ig," IN ")
.replace(/ JOIN /ig,"~::~JOIN ")
.replace(/ CROSS~::~{1,}JOIN /ig,"~::~CROSS JOIN ")
.replace(/ INNER~::~{1,}JOIN /ig,"~::~INNER JOIN ")
.replace(/ LEFT~::~{1,}JOIN /ig,"~::~LEFT JOIN ")
.replace(/ RIGHT~::~{1,}JOIN /ig,"~::~RIGHT JOIN ")
.replace(/ ON /ig,"~::~"+tab+"ON ")
.replace(/ OR /ig,"~::~"+tab+tab+"OR ")
.replace(/ ORDER\s{1,}BY/ig,"~::~ORDER BY ")
.replace(/ OVER /ig,"~::~"+tab+"OVER ")
.replace(/\(\s{0,}SELECT /ig,"~::~(SELECT ")
.replace(/\)\s{0,}SELECT /ig,")~::~SELECT ")
.replace(/ THEN /ig," THEN~::~"+tab+"")
.replace(/ UNION /ig,"~::~UNION~::~")
.replace(/ USING /ig,"~::~USING ")
.replace(/ WHEN /ig,"~::~"+tab+"WHEN ")
.replace(/ WHERE /ig,"~::~WHERE ")
.replace(/ WITH /ig,"~::~WITH ")
//.replace(/\,\s{0,}\(/ig,",~::~( ")
//.replace(/\,/ig,",~::~"+tab+tab+"")
.replace(/ ALL /ig," ALL ")
.replace(/ AS /ig," AS ")
.replace(/ ASC /ig," ASC ")
.replace(/ DESC /ig," DESC ")
.replace(/ DISTINCT /ig," DISTINCT ")
.replace(/ EXISTS /ig," EXISTS ")
.replace(/ NOT /ig," NOT ")
.replace(/ NULL /ig," NULL ")
.replace(/ LIKE /ig," LIKE ")
.replace(/\s{0,}SELECT /ig,"SELECT ")
.replace(/\s{0,}UPDATE /ig,"UPDATE ")
.replace(/ SET /ig," SET ")
.replace(/~::~{1,}/g,"~::~")
.split('~::~');
}
vkbeautify.prototype.sql = function(text,step) {
var ar_by_quote = text.replace(/\s{1,}/g," ")
.replace(/\'/ig,"~::~\'")
.split('~::~'),
len = ar_by_quote.length,
ar = [],
deep = 0,
tab = this.step,//+this.step,
inComment = true,
inQuote = false,
parenthesisLevel = 0,
str = '',
ix = 0,
shift = step ? createShiftArr(step) : this.shift;;
for(ix=0;ix<len;ix++) {
if(ix%2) {
ar = ar.concat(ar_by_quote[ix]);
} else {
ar = ar.concat(split_sql(ar_by_quote[ix], tab) );
}
}
len = ar.length;
for(ix=0;ix<len;ix++) {
parenthesisLevel = isSubquery(ar[ix], parenthesisLevel);
if( /\s{0,}\s{0,}SELECT\s{0,}/.exec(ar[ix])) {
ar[ix] = ar[ix].replace(/\,/g,",\n"+tab+tab+"")
}
if( /\s{0,}\s{0,}SET\s{0,}/.exec(ar[ix])) {
ar[ix] = ar[ix].replace(/\,/g,",\n"+tab+tab+"")
}
if( /\s{0,}\(\s{0,}SELECT\s{0,}/.exec(ar[ix])) {
deep++;
str += shift[deep]+ar[ix];
} else
if( /\'/.exec(ar[ix]) ) {
if(parenthesisLevel<1 && deep) {
deep--;
}
str += ar[ix];
}
else {
str += shift[deep]+ar[ix];
if(parenthesisLevel<1 && deep) {
deep--;
}
}
var junk = 0;
}
str = str.replace(/^\n{1,}/,'').replace(/\n{1,}/g,"\n");
return str;
}
vkbeautify.prototype.xmlmin = function(text, preserveComments) {
var str = preserveComments ? text
: text.replace(/\<![ \r\n\t]*(--([^\-]|[\r\n]|-[^\-])*--[ \r\n\t]*)\>/g,"")
.replace(/[ \r\n\t]{1,}xmlns/g, ' xmlns');
return str.replace(/>\s{0,}</g,"><");
}
vkbeautify.prototype.jsonmin = function(text) {
if (typeof JSON === 'undefined' ) return text;
return JSON.stringify(JSON.parse(text), null, 0);
}
vkbeautify.prototype.cssmin = function(text, preserveComments) {
var str = preserveComments ? text
: text.replace(/\/\*([^*]|[\r\n]|(\*+([^*/]|[\r\n])))*\*+\//g,"") ;
return str.replace(/\s{1,}/g,' ')
.replace(/\{\s{1,}/g,"{")
.replace(/\}\s{1,}/g,"}")
.replace(/\;\s{1,}/g,";")
.replace(/\/\*\s{1,}/g,"/*")
.replace(/\*\/\s{1,}/g,"*/");
}
vkbeautify.prototype.sqlmin = function(text) {
return text.replace(/\s{1,}/g," ").replace(/\s{1,}\(/,"(").replace(/\s{1,}\)/,")");
}
window.vkbeautify = new vkbeautify();
})();