Adding and deleting table rows works now. Also there is error checing for entered values.

This commit is contained in:
7u83 2020-02-25 08:07:29 +00:00
parent 6840a0d0c3
commit 7e252ae4e5
2 changed files with 103 additions and 24 deletions

View file

@ -162,8 +162,10 @@
<div class="is-row"> <div class="is-row">
<div class="is-col is-70"> <div class="is-col is-70">
<fieldset> <fieldset id="fieldset2">
<legend>2. Erfasse deine Ausgaben</legend> <legend>2. Erfasse deine Ausgaben</legend>
<div class="is-row"> <div class="is-row">
<div class="is-col is-70"> <div class="is-col is-70">
<div class="is-row"> <div class="is-row">

123
kaform.js
View file

@ -1,9 +1,6 @@
var nextRowId=1; var currentRowId=1;
function getNextRowId() {
return nextRowId;
}
function renumberTableRows(){ function renumberTableRows(){
var row_no=1; var row_no=1;
@ -13,15 +10,32 @@ function renumberTableRows(){
} }
} }
function isFloat(val) {
var floatRegex = /^-?\d+(?:[.,]\d*?)?$/;
if (!floatRegex.test(val))
return false;
val = parseFloat(val);
if (isNaN(val))
return false;
return true;
}
function deleteTableRow(rowId){ function deleteTableRow(rowId){
alert (rowId);
var target = document.getElementById("upload-target"+rowId); var target = document.getElementById("upload-target"+rowId);
var children = target.children; // this.message = app.message;
var children = target.children;
// delete all uploaded elements // delete all uploaded elements
for (var i = 0; i < children.length; i++) { /* for (var i = 0; i < children.length; i++) {
var tmp = children[i].getAttribute("data-id"); var tmp = children[i].getAttribute("data-id");
alert ("DEL");
alert (tmp);
$K.ajax.post({ $K.ajax.post({
url: 'delete.php', url: 'delete.php',
data: 'id='+tmp, data: 'id='+tmp,
@ -30,29 +44,91 @@ function deleteTableRow(rowId){
error: function(response) {} error: function(response) {}
}); });
} }
*/
// delete the row from table // delete the row from table
var element = document.getElementById("trow"+rowId); var element = document.getElementById("trow"+rowId);
element.parentNode.removeChild(element); element.parentNode.removeChild(element);
renumberTableRows(); renumberTableRows();
// alert(rowId); // alert(rowId);
} }
function showAlert(text) {
$K.app.message.show( { message: `${text}`, position: 'centered', type: 'is-error' });
return;
}
function reset2()
{
document.getElementById("a_type").value="";
document.getElementById("a_description").value="";
document.getElementById("a_amount").value="";
setUploadField();
}
function addTableRow(){ function addTableRow(){
var $node = $K.dom('#tabbody'); var $node = $K.dom('#tabbody');
// create a new table row with id // create a new table row with id
var element = document.createElement('tr'); var element = document.createElement('tr');
element.setAttribute("id", "trow"+nextRowId); element.setAttribute("id", "trow"+currentRowId);
var a_type = document.getElementById("a_type").value; var a_type = document.getElementById("a_type").value;
if (!a_type.trim().length ) {
document.getElementById("a_type").focus();
showAlert("Bitte gib eine Auslagenart an!");
return;
}
var a_date = document.getElementById("a_date").value; var a_date = document.getElementById("a_date").value;
if (!a_date.trim().length){
document.getElementById("a_date").focus();
showAlert("Bitte gib ein g&uuml;ltiges Datum an!");
return;
}
var a_description = document.getElementById("a_description").value; var a_description = document.getElementById("a_description").value;
if (!a_description.trim().length){
document.getElementById("a_description").focus();
showAlert("Bitte gib eine Beschreibung ein!");
return;
}
var a_amount = document.getElementById("a_amount").value; var a_amount = document.getElementById("a_amount").value;
if (!isFloat(a_amount)){
document.getElementById("a_amount").focus();
showAlert("Bitte gib einen g&uuml;ltigen Betrag ein!");
return;
}
var a_currency = document.getElementById("a_currency").value; var a_currency = document.getElementById("a_currency").value;
if (!a_currency.trim().length){
document.getElementById("a_currency").focus();
showAlert("Bitte gib eine W&auml;hrung an!");
return;
}
var target = document.getElementById("upload-target"+currentRowId);
var children = target.children;
if (!children.length){
showAlert("Bitte lade mindestens einen Beleg hoch!");
return;
}
/* a_type = "Hello";*/ /* a_type = "Hello";*/
@ -93,15 +169,16 @@ function addTableRow(){
// add delete bnutton // add delete bnutton
e += e +=
`<td><span `<td><span
onclick="deleteTableRow(${nextRowId})" onclick="deleteTableRow(${currentRowId})"
class="close is-large"> class="close is-large">
</span></td>`; </span></td>`;
$node.append(element); $node.append(element);
element.innerHTML=(e); element.innerHTML=(e);
renumberTableRows(); // renumberTableRows();
nextRowId++; currentRowId++;
reset2();
} }
@ -111,15 +188,12 @@ function setUploadField()
var uf =`<div class="upload" var uf =`<div class="upload"
data-kube="upload" data-kube="upload"
data-type="file" data-multiple="true" data-type="file" data-multiple="true"
data-target="#upload-target${nextRowId}" data-target="#upload-target${currentRowId}"
data-url="upload.php?row=${nextRowId}" data-url-remove="delete.php" data-url="upload.php?row=${currentRowId}" data-url-remove="delete.php"
data-progress="true">Beleg hochladen data-progress="true">Beleg hochladen
</div> </div>
<div id="upload-target${nextRowId}" class="upload-target small"></div> <div id="upload-target${currentRowId}" class="upload-target small"></div>
</div> </div>
`; `;
document.getElementById("uploadfield").innerHTML=uf; document.getElementById("uploadfield").innerHTML=uf;
} }
@ -128,6 +202,7 @@ $K.add('module', 'kaform', {
init: function(app, context) init: function(app, context)
{ {
this.app = app; this.app = app;
this.message = app.message;
}, },
// catch event // catch event
onmessage: { onmessage: {
@ -135,7 +210,8 @@ $K.add('module', 'kaform', {
opened: function(sender) opened: function(sender)
{ {
console.log('Tab box is ',sender.getActiveBox()); console.log('Tab box is ',sender.getActiveBox());
} this.message.show({ message: 'My message' });
}
} }
}, },
@ -164,5 +240,6 @@ setUploadField();
// add on table row // add on table row
//addTableRow(); //addTableRow();