wmdeit_kaform/kaform.js

225 lines
4.5 KiB
JavaScript

var nextRowId=1;
function renumberTableRows(){
var row_no=1;
var table = document.getElementById("tabbody");
for (var i = 0, row; row = table.rows[i]; i++) {
row.cells[0].innerHTML=row_no++;
}
}
function deleteTableRow(rowId){
var target = document.getElementById("upload-target"+rowId);
var children = target.children;
// delete all uploaded elements
for (var i = 0; i < children.length; i++) {
var tmp = children[i].getAttribute("data-id");
$K.ajax.post({
url: 'delete.php',
data: 'id='+tmp,
before: function(xhr) {},
success: function(response) {},
error: function(response) {}
});
}
// delete the row from table
var element = document.getElementById("trow"+rowId);
element.parentNode.removeChild(element);
renumberTableRows();
// alert(rowId);
}
function addTableRow(){
var $node = $K.dom('#tabbody');
// create a new table row with id
var element = document.createElement('tr');
element.setAttribute("id", "trow"+nextRowId);
var e="";
// add column for position no
e += '<td></td>';
// add coluemn for description
e += `<td><textarea name="desc[${nextRowId}]" rows="2"></textarea> </td>`;
// add column for date
e += `<td><input name="date[${nextRowId}]" type="date"/></td>`;
// add column for num
e += `<td><input name="amount[${nextRowId}]" type="num"/></td>`;
// add column for file upload
e+= `
<td data-kube="">
<div class="form-item">
<div class="upload"
data-kube="upload"
data-type="file" data-multiple="true"
data-target="#upload-target${nextRowId}"
data-url="upload.php?row=${nextRowId}" data-url-remove="delete.php"
data-progress="true">
</div>
<div id="upload-target${nextRowId}" class="upload-target"></div>
</div>
</td>
`;
// add delete bnutton
e +=
`<td><span
onclick="deleteTableRow(${nextRowId})"
class="close is-large">
</span></td>`;
$node.append(element);
element.innerHTML=(e);
renumberTableRows();
nextRowId++;
}
function submitTable(){
alert("submit");
var obj;
var table = document.getElementById("tabbody");
for (var i = 0, row; row = table.rows[i]; i++) {
console.log(row.cells[1]);
// var n = row.cells[1].value;
// alert(n);
}
}
$K.add('module','kaform', {
init: function(app,context){
this.app = app;
// getting context and the module element
this.context = context;
this.$element = context.getElement();
},
hello: function(){
alert ("hello function of kaform");
},
start: function()
{
/*this.$element.on('keydown.kube.editable', this._hui.bind(this));
this.$element.on('paste.kube.editable', this._hui.bind(this));
this.$element.on('blur.kube.editable', this._hui.bind(this));
*/
// alert(this.$element);
// this.$element.on('click', this.addRow.bind(this));
this._build();
},
addRow: function()
{
var $node = $K.dom('#tabbody');
// create a new table row with id
var element = document.createElement('tr');
element.setAttribute("id", "trow"+nextRowId);
var e="";
// add column for position no
e += '<td></td>';
// add coluemn for description
e += '<td><textarea rows="2"></textarea> </td>';
// add column for date
e += '<td style="overflow:visible;"><input type="date"/></td>';
// add column for num
e += '<td style="overflow:visible;"><input type="num"/></td>';
// add column for file upload
e+= `
<td data-kube="">
<form action="">
<div class="form-item">
<div class="upload"
data-kube="upload"
data-type="file" data-multiple="true"
data-target="#upload-target${nextRowId}"
data-url="upload.php" data-url-remove="delete.php"
data-progress="true">
</div>
<div id="upload-target${nextRowId}" class="upload-target"></div>
</div>
</form>
</td>
`;
// add delete bnutton
e +=
`<td><span
onclick="deleteTableRow('trow${nextTableRow}'"
class="close is-large">
</span></td>`;
$node.append(element);
element.innerHTML=(e);
renumberTableRows();
nextRowId++;
},
// private
_build: function()
{
},
onmessage: {
alert: {
closed: function(sender)
{
alert(sender);
// caught
}
}
}
});
// startup is here
$K.init({
observer: true
});
// on startup clear session on server
$K.ajax.get({
url: 'clear.php',
data: '', // or key=value object
before: function(xhr) {},
success: function(response) {},
error: function(response) {}
});
// add on table row
addTableRow();