Skip to content
GitLab
Commit ad2e1dbb authored by Jerome Mariette's avatar Jerome Mariette
Browse files

a start to handsontable

parent baaae987
Hide whitespace changes
Inline Side-by-side
docs/example1.html
View file @ ad2e1dbb
......@@ -16,6 +16,9 @@
<link href="css/theme.css" rel="stylesheet">
<!-- jflow css -->
<link href="../src/css/handsontable.full.min.css" rel="stylesheet">
<link href="../src/css/cytoscape.js-panzoom.css" rel="stylesheet" type="text/css">
<link href="../src/css/font-awesome.css" rel="stylesheet" type="text/css">
<link href="../src/css/datepicker.css" rel="stylesheet">
<link href="../src/css/jflow.css" rel="stylesheet">
......@@ -63,7 +66,7 @@
</div>
<div class="container theme-showcase" role="main">
<!-- Jumbotron -->
<div class="jumbotron">
<h1>Hello Jflow!</h1>
......@@ -151,8 +154,7 @@
<script src="../src/js/jquery.fileupload-validate.js"></script>
<script src='../src/js/cytoscape.js' type='text/javascript'></script>
<script src='../src/js/cytoscape.js-panzoom.js' type='text/javascript'></script>
<link href="../src/css/cytoscape.js-panzoom.css" rel="stylesheet" type="text/css">
<link href="../src/css/font-awesome.css" rel="stylesheet" type="text/css">
<script src='../src/js/handsontable.full.min.js' type='text/javascript'></script>
<script src='../src/js/jflow-activewf.js' type='text/javascript'></script>
<script src='../src/js/jflow-availablewf.js' type='text/javascript'></script>
......@@ -164,7 +166,7 @@
<script type='text/javascript'>
$(document).ready(function(){
/**
* Use the plugins
*/
......
docs/example2.html
View file @ ad2e1dbb
......@@ -16,6 +16,9 @@
<link href="css/theme.css" rel="stylesheet">
<!-- jflow css -->
<link href="../src/css/handsontable.full.min.css" rel="stylesheet">
<link href="../src/css/cytoscape.js-panzoom.css" rel="stylesheet" type="text/css">
<link href="../src/css/font-awesome.css" rel="stylesheet" type="text/css">
<link href="../src/css/datepicker.css" rel="stylesheet">
<link href="../src/css/jflow.css" rel="stylesheet">
......@@ -64,7 +67,7 @@
<div class="container theme-showcase" role="main">
<p>TODO</p>
<div id="wfform"></div>
<hr>
<footer>
......@@ -89,6 +92,8 @@
<script src="../src/js/jquery.fileupload-process.js"></script>
<script src="../src/js/jquery.fileupload-validate.js"></script>
<script src='../src/js/cytoscape.js' type='text/javascript'></script>
<script src='../src/js/cytoscape.js-panzoom.js' type='text/javascript'></script>
<script src='../src/js/handsontable.full.min.js' type='text/javascript'></script>
<script src='../src/js/jflow-activewf.js' type='text/javascript'></script>
<script src='../src/js/jflow-availablewf.js' type='text/javascript'></script>
......@@ -99,7 +104,11 @@
<script type='text/javascript'>
$(document).ready(function(){ });
$(document).ready(function(){
$('#wfform').wfform({
workflowClass: "Alignment"
});
});
</script>
......
src/css/handsontable.full.min.css 0 → 100644
View file @ ad2e1dbb
/*!
* Handsontable 0.12.0
* Handsontable is a JavaScript library for editable tables with basic copy-paste compatibility with Excel and Google Docs
*
* Copyright 2012-2014 Marcin Warpechowski
* Licensed under the MIT license.
* http://handsontable.com/
*
* Date: Thu Nov 27 2014 12:23:10 GMT+0100 (CET)
*/.handsontable{position:relative}.handsontable .hide{display:none}.handsontable .relative{position:relative}.handsontable.htAutoColumnSize{visibility:hidden;left:0;position:absolute;top:0}.handsontable div,.handsontable table,.handsontable tbody,.handsontable td,.handsontable th,.handsontable thead{box-sizing:content-box;-webkit-box-sizing:content-box;-moz-box-sizing:content-box}.handsontable table.htCore{border-collapse:separate;border-spacing:0;margin:0;border-width:0;table-layout:fixed;width:0;outline-width:0;max-width:none;max-height:none}.handsontable col,.handsontable col.rowHeader{width:50px}.handsontable td,.handsontable th{border-right:1px solid #CCC;border-bottom:1px solid #CCC;height:22px;empty-cells:show;line-height:21px;padding:0 4px;background-color:#FFF;vertical-align:top;overflow:hidden;outline-width:0;white-space:pre-line}.handsontable td.htInvalid{background-color:#ff4c42!important}.handsontable td.htNoWrap{white-space:nowrap}.handsontable th:last-child{border-right:1px solid #CCC;border-bottom:1px solid #CCC}.handsontable th.htNoFrame,.handsontable th:first-child.htNoFrame,.handsontable tr:first-child th.htNoFrame{border-left-width:0;background-color:#fff;border-color:#FFF}.handsontable .htNoFrame+td,.handsontable .htNoFrame+th,.handsontable td:first-child,.handsontable th:first-child{border-left:1px solid #CCC}.handsontable tr:first-child td,.handsontable tr:first-child th{border-top:1px solid #CCC}.handsontable thead tr.lastChild th,.handsontable thead tr:last-child th{border-bottom-width:0}.handsontable th{background-color:#EEE;color:#222;text-align:center;font-weight:400;white-space:nowrap}.handsontable thead th{padding:0}.handsontable th.active{background-color:#CCC}.handsontable thead th .relative{padding:2px 4px}.handsontable .manualColumnMover{position:fixed;left:0;top:0;background-color:transparent;width:5px;height:25px;z-index:999;cursor:move}.handsontable .manualRowMover{position:fixed;left:-4px;top:0;background-color:transparent;height:5px;width:50px;z-index:999;cursor:move}.handsontable .manualColumnMoverGuide,.handsontable .manualRowMoverGuide{position:fixed;left:0;top:0;background-color:#CCC;width:25px;height:25px;opacity:.7;display:none}.handsontable .manualColumnMoverGuide.active,.handsontable .manualRowMoverGuide.active{display:block}.handsontable .manualColumnMover.active,.handsontable .manualColumnMover:hover,.handsontable .manualRowMover.active,.handsontable .manualRowMover:hover{background-color:#88F}.handsontable .manualColumnResizer{position:fixed;top:0;cursor:col-resize;z-index:110;width:5px;height:25px}.handsontable .manualRowResizer{position:fixed;left:0;cursor:row-resize;z-index:110;height:5px;width:50px}.handsontable .manualColumnResizer.active,.handsontable .manualColumnResizer:hover,.handsontable .manualRowResizer.active,.handsontable .manualRowResizer:hover{background-color:#AAB}.handsontable .manualColumnResizerGuide{position:fixed;right:0;top:0;background-color:#AAB;display:none;width:0;border-right:1px dashed #777;margin-left:5px}.handsontable .manualRowResizerGuide{position:fixed;left:0;bottom:0;background-color:#AAB;display:none;height:0;border-bottom:1px dashed #777;margin-top:5px}.handsontable .manualColumnResizerGuide.active,.handsontable .manualRowResizerGuide.active{display:block}.handsontable .columnSorting:hover{text-decoration:underline;cursor:pointer}.handsontable .wtBorder{position:absolute;font-size:0}.handsontable .wtBorder.hidden{display:none!important}.handsontable td.area{background-color:#EEF4FF}.handsontable .wtBorder.corner{font-size:0;cursor:crosshair}.handsontable .htBorder.htFillBorder{background:red;width:1px;height:1px}.handsontableInput{border:2px solid #5292F7;outline-width:0;margin:0;padding:1px 4px 0 2px;font-family:inherit;line-height:inherit;font-size:inherit;-webkit-box-shadow:1px 2px 5px rgba(0,0,0,.4);box-shadow:1px 2px 5px rgba(0,0,0,.4);resize:none;display:inline-block;color:#000;border-radius:0;background-color:#FFF}.handsontableInputHolder{position:absolute;top:0;left:0;z-index:100}.htSelectEditor{-webkit-appearance:menulist-button!important;position:absolute}.handsontable .htDimmed{color:#777}.handsontable .htSubmenu :after{content:'▶';color:#777;position:absolute;right:5px}.handsontable .htLeft{text-align:left}.handsontable .htCenter{text-align:center}.handsontable .htRight{text-align:right}.handsontable .htJustify{text-align:justify}.handsontable .htTop{vertical-align:top}.handsontable .htMiddle{vertical-align:middle}.handsontable .htBottom{vertical-align:bottom}.handsontable .htPlaceholder{color:#999}.handsontable .htAutocompleteArrow{float:right;font-size:10px;color:#EEE;cursor:default;width:16px;text-align:center}.handsontable td .htAutocompleteArrow:hover{color:#777}.handsontable .htCheckboxRendererInput.noValue{opacity:.5}.handsontable .htNumeric{text-align:right}.htCommentCell{position:relative}.htCommentCell:after{content:'';position:absolute;top:0;right:0;border-left:6px solid transparent;border-top:6px solid red}.handsontable .handsontable .wtHider{padding:0 0 5px}.handsontable .handsontable table{-webkit-box-shadow:1px 2px 5px rgba(0,0,0,.4);box-shadow:1px 2px 5px rgba(0,0,0,.4)}.handsontable .autocompleteEditor.handsontable{padding-right:17px}.handsontable .autocompleteEditor.handsontable.htMacScroll{padding-right:15px}.handsontable.listbox{margin:0}.handsontable.listbox .ht_master table{border:1px solid #ccc;border-collapse:separate;background:#fff}.handsontable.listbox td,.handsontable.listbox th,.handsontable.listbox tr:first-child td,.handsontable.listbox tr:first-child th,.handsontable.listbox tr:last-child th{border-width:0}.handsontable.listbox td,.handsontable.listbox th{white-space:nowrap;text-overflow:ellipsis}.handsontable.listbox td.htDimmed{cursor:default;color:inherit;font-style:inherit}.handsontable.listbox .wtBorder{visibility:hidden}.handsontable.listbox tr td.current,.handsontable.listbox tr:hover td{background:#eee}.htContextMenu{display:none;position:absolute;z-index:1060}.htContextMenu .ht_clone_corner,.htContextMenu .ht_clone_debug,.htContextMenu .ht_clone_left,.htContextMenu .ht_clone_top{display:none}.ht_clone_top{z-index:101}.ht_clone_left{z-index:102}.ht_clone_corner,.ht_clone_debug{z-index:103}.htContextMenu table.htCore{outline:#bbb solid 1px}.htContextMenu .wtBorder{visibility:hidden}.htContextMenu table tbody tr td{background:#fff;border-width:0;padding:4px 6px 0;cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.htContextMenu table tbody tr td:first-child{border:0}.htContextMenu table tbody tr td.htDimmed{font-style:normal;color:#323232}.htContextMenu table tbody tr td.current,.htContextMenu table tbody tr td.zeroclipboard-is-hover{background:#e9e9e9}.htContextMenu table tbody tr td.htSeparator{border-top:1px solid #bbb;height:0;padding:0}.htContextMenu table tbody tr td.htDisabled{color:#999}.htContextMenu table tbody tr td.htDisabled:hover{background:#fff;color:#999;cursor:default}.htContextMenu table tbody tr td div{padding-left:10px}.htContextMenu table tbody tr td div span.selected{margin-top:-2px;position:absolute;left:4px}.handsontable td.htSearchResult{background:#fcedd9;color:#583707}.htBordered{border-width:1px}.htBordered.htTopBorderSolid{border-top-style:solid;border-top-color:#000}.htBordered.htRightBorderSolid{border-right-style:solid;border-right-color:#000}.htBordered.htBottomBorderSolid{border-bottom-style:solid;border-bottom-color:#000}.htBordered.htLeftBorderSolid{border-left-style:solid;border-left-color:#000}.htCommentTextArea{background-color:#FFFACD;box-shadow:1px 1px 2px #bbb;font-family:Arial;-webkit-box-shadow:1px 1px 2px #bbb;-moz-box-shadow:1px 1px 2px #bbb}.handsontable colgroup col.rowHeader.htGroupCol{width:25px!important}.handsontable colgroup col.rowHeader.htGroupColClosest{width:30px!important}.handsontable .htGroupIndicatorContainer{background:#fff;border:0;padding-bottom:0;vertical-align:bottom;position:relative}.handsontable thead .htGroupIndicatorContainer{vertical-align:top;border-bottom:0}.handsontable tbody tr th:nth-last-child(2){border-right:1px solid #CCC}.handsontable thead tr:nth-last-child(2) th{border-bottom:1px solid #CCC;padding-bottom:5px}.ht_clone_corner thead tr th:nth-last-child(2){border-right:1px solid #CCC}.htVerticalGroup{height:100%}.htHorizontalGroup{width:100%;height:100%}.htVerticalGroup:not(.htCollapseButton):after{content:"";height:100%;width:1px;display:block;background:#ccc;margin-left:5px}.htHorizontalGroup:not(.htCollapseButton):after{content:"";width:100%;height:1px;display:block;background:#ccc;margin-top:20%}.htCollapseButton{width:10px;height:10px;line-height:10px;text-align:center;border-radius:5px;border:1px solid #f3f3f3;-webkit-box-shadow:1px 1px 3px rgba(0,0,0,.4);box-shadow:1px 1px 3px rgba(0,0,0,.4);cursor:pointer;margin-bottom:3px;position:relative}.htCollapseButton:after{content:"";height:300%;width:1px;display:block;background:#ccc;margin-left:4px;position:absolute;bottom:10px}thead .htCollapseButton{right:5px;position:absolute;top:5px;background:#fff}thead .htCollapseButton:after{height:1px;width:700%;right:10px;top:4px}.handsontable tr th .htGroupStart:after{background:0 0;border-left:1px solid #ccc;border-top:1px solid #ccc;width:5px;position:relative;top:50%}.handsontable thead tr th .htGroupStart:after{background:0 0;border-left:1px solid #ccc;border-top:1px solid #ccc;height:5px;width:50%;position:relative;top:0;left:50%}.handsontable .htGroupLevelTrigger{-webkit-box-shadow:1px 1px 3px rgba(0,0,0,.4);box-shadow:1px 1px 3px rgba(0,0,0,.4);width:15px;height:15px;margin:4px auto;padding:0;line-height:15px;cursor:pointer}.handsontable tr th .htExpandButton{position:absolute;width:10px;height:10px;line-height:10px;text-align:center;border-radius:5px;border:1px solid #f3f3f3;-webkit-box-shadow:1px 1px 3px rgba(0,0,0,.4);box-shadow:1px 1px 3px rgba(0,0,0,.4);cursor:pointer;top:0;display:none}.handsontable thead tr th .htExpandButton{top:5px}.handsontable tr th .htExpandButton.clickable{display:block}.handsontable col.hidden{width:0!important}.handsontable tr.hidden,.handsontable tr.hidden td,.handsontable tr.hidden th,.wtDebugHidden{display:none}.wtDebugVisible{display:block;-webkit-animation-duration:.5s;-webkit-animation-name:wtFadeInFromNone;animation-duration:.5s;animation-name:wtFadeInFromNone}@keyframes wtFadeInFromNone{0%{display:none;opacity:0}1%{display:block;opacity:0}100%{display:block;opacity:1}}@-webkit-keyframes wtFadeInFromNone{0%{display:none;opacity:0}1%{display:block;opacity:0}100%{display:block;opacity:1}}
\ No newline at end of file
src/css/jflow.css
View file @ ad2e1dbb
......@@ -19,6 +19,10 @@
* This copyright notice MUST APPEAR in all copies of the script!
***************************************************************/
.handsontable .handsontableInput {
box-sizing: content-box;
}
.floatingBarsG{
position:relative;
width:16px;
......
src/js/handsontable.full.min.js 0 → 100644
View file @ ad2e1dbb
This source diff could not be displayed because it is too large. You can view the blob instead.
src/js/jflow-wfform.js
View file @ ad2e1dbb
......@@ -445,15 +445,17 @@ jQuery.validator.addMethod("mparam", function(value, element, params) {
var id = $(this).attr("id").split("date_")[1];
$("#"+id).focusout();
});
// for exclude-required first check if there is no exclusion group with a required option
var excludereq = new Array();
var excludereq = new Array(),
params_per_name = {};
for (var i in $this.workflow.parameters) {
if ($this.workflow.parameters[i].group.indexOf("exclude-") != -1 && $this.workflow.parameters[i].required) {
if (excludereq.indexOf($this.workflow.parameters[i].group) == -1) {
excludereq.push($this.workflow.parameters[i].group);
}
}
params_per_name[$this.workflow.parameters[i].name] = $this.workflow.parameters[i];
}
for (var i in $this.workflow.parameters) {
// if it's a multiple parameter add its sub parameters as rules
......@@ -466,6 +468,43 @@ jQuery.validator.addMethod("mparam", function(value, element, params) {
}
}
$("#workflow_form").validate({ rules: rules });
// for multiple and append values, use the handsontable
$("[id^=handsontable_]").each(function(){
var id_parts = $(this).attr("id").split("handsontable_"),
param_name = id_parts.slice(1, id_parts.length),
dataSchema = {},
colHeaders = new Array(),
columns = new Array(),
data = {};
for (var i in params_per_name[param_name].sub_parameters) {
dataSchema[params_per_name[param_name].sub_parameters[i].name] = null;
data[params_per_name[param_name].sub_parameters[i].name] = params_per_name[param_name].sub_parameters[i]["default"];
colHeaders.push(params_per_name[param_name].sub_parameters[i].display_name);
if (params_per_name[param_name].sub_parameters[i].type == "int") {
columns.push({data: params_per_name[param_name].sub_parameters[i].name, type:"numeric"});
} else if (params_per_name[param_name].sub_parameters[i].type == "bool") {
columns.push({data: params_per_name[param_name].sub_parameters[i].name, type:"checkbox"});
} else if (params_per_name[param_name].sub_parameters[i].type == "date") {
// TODO this should not be a text but a date, so fare tere is a bug with jquery.datepicker and bootstrap.datepicker
columns.push({data: params_per_name[param_name].sub_parameters[i].name, type:"text"});
} else if (params_per_name[param_name].sub_parameters[i].choices != null) {
columns.push({data: params_per_name[param_name].sub_parameters[i].name, type:"dropdown", source:params_per_name[param_name].sub_parameters[i].choices});
} else {
columns.push({data: params_per_name[param_name].sub_parameters[i].name, type:"text"});
}
}
$(this).handsontable({
data: data,
dataSchema: dataSchema,
colHeaders: colHeaders,
contextMenu: true,
minSpareRows: 1,
columns: columns,
colWidths: [500, 400]
});
});
if ($this.options.displayRunButton) {
$("#wfform_run_btn").click(function() { $this.run(); })
}
......@@ -511,7 +550,7 @@ jQuery.validator.addMethod("mparam", function(value, element, params) {
var size = param.type.split(SIZE_LIMIT_SPLITER)[1];
crule["maxfilesize"] = [this.getNbOctet(size), size];
// if it is not a known type, check from the custom ones, using the validate_field address
} else {
} else if (param.type != "str") {
crule["remote"] = {
url: server_url + '/validate_field?callback=?',
type: "post",
......@@ -670,21 +709,29 @@ jQuery.validator.addMethod("mparam", function(value, element, params) {
' <div class="col-sm-10">',
// if it's a multiple type
' {{if param.type == "MultipleParameters"}}',
' <blockquote style="font-size:14px;">',
' {{each(spindex, sub_param) param.sub_parameters}}',
' <div class="param-field">',
' {{if sub_param.type == "bool"}}',
' {{html getParameterDisplay(sub_param, parameterTemplate, sub_param.display_name)}}',
' {{else}}',
' <div class="input-group">',
' <span class="input-group-addon">${sub_param.display_name}</span>',
' {{html getParameterDisplay(sub_param, parameterTemplate)}}',
// if it's an append and multiple type
' {{if param.action == "MiltipleAppendAction"}}',
' <blockquote style="font-size:14px;">',
' <div id="handsontable_${param.name}"> </div>',
' </blockquote>',
// if it's a single and multiple type
' {{else}}',
' <blockquote style="font-size:14px;">',
' {{each(spindex, sub_param) param.sub_parameters}}',
' <div class="param-field">',
' {{if sub_param.type == "bool"}}',
' {{html getParameterDisplay(sub_param, parameterTemplate, sub_param.display_name)}}',
' {{else}}',
' <div class="input-group">',
' <span class="input-group-addon">${sub_param.display_name}</span>',
' {{html getParameterDisplay(sub_param, parameterTemplate)}}',
' </div>',
' {{/if}}',
' <span class="help-block">${sub_param.help}</span> <br />',
' </div>',
' {{/if}}',
' <span class="help-block">${sub_param.help}</span> <br />',
' </div>',
' {{/each}}',
' </blockquote>',
' {{/each}}',
' </blockquote>',
' {{/if}}',
' {{else}}',
' {{html getParameterDisplay(param, parameterTemplate)}}',
' <span class="help-block">${param.help}</span>',
......@@ -701,14 +748,16 @@ jQuery.validator.addMethod("mparam", function(value, element, params) {
' <input name="workflow_class" value="${workflow.class}" type="hidden">',
// add buttons if requested
'{{if display_reset_button || display_run_button}}',
' <div class="btn-group">',
' {{if display_reset_button}}',
' <button id="wfform_reset_btn" type="button" class="btn btn-default"><span class="glyphicon glyphicon-refresh"></span> Reset</button>',
' {{/if}}',
' {{if display_run_button}}',
' <button id="wfform_run_btn" type="button" class="btn btn-primary"><span class="glyphicon glyphicon-cog"></span> Run</button>',
' {{/if}}',
' </div>',
' <div class="row"> <div class="col-md-3 col-md-offset-9">',
' <div class="btn-group">',
' {{if display_reset_button}}',
' <button id="wfform_reset_btn" type="button" class="btn btn-default"><span class="glyphicon glyphicon-refresh"></span> Reset</button>',
' {{/if}}',
' {{if display_run_button}}',
' <button id="wfform_run_btn" type="button" class="btn btn-primary"><span class="glyphicon glyphicon-cog"></span> Run</button>',
' {{/if}}',
' </div>',
' </div> </div>',
'{{/if}}',
'</fieldset>',
'</form>',
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment