forked from tohe/wmdeit_kaform
				
			Adding and deleting table rows works now. Also there is error checing for entered values.
This commit is contained in:
		
							parent
							
								
									6840a0d0c3
								
							
						
					
					
						commit
						7e252ae4e5
					
				
							
								
								
									
										4
									
								
								ka.html
								
								
								
								
							
							
						
						
									
										4
									
								
								ka.html
								
								
								
								
							| 
						 | 
				
			
			@ -162,8 +162,10 @@
 | 
			
		|||
 | 
			
		||||
		<div class="is-row">
 | 
			
		||||
		<div class="is-col is-70">
 | 
			
		||||
			<fieldset>
 | 
			
		||||
			<fieldset id="fieldset2">
 | 
			
		||||
				<legend>2. Erfasse deine Ausgaben</legend>
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
				<div class="is-row">
 | 
			
		||||
					<div class="is-col is-70">
 | 
			
		||||
						<div class="is-row">
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
							
								
								
									
										121
									
								
								kaform.js
								
								
								
								
							
							
						
						
									
										121
									
								
								kaform.js
								
								
								
								
							| 
						 | 
				
			
			@ -1,9 +1,6 @@
 | 
			
		|||
 | 
			
		||||
var nextRowId=1;
 | 
			
		||||
var currentRowId=1;
 | 
			
		||||
 | 
			
		||||
function getNextRowId() {
 | 
			
		||||
	return nextRowId;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
function renumberTableRows(){
 | 
			
		||||
    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){
 | 
			
		||||
 | 
			
		||||
	alert (rowId);
 | 
			
		||||
    var target = document.getElementById("upload-target"+rowId);
 | 
			
		||||
    var children = target.children;
 | 
			
		||||
//            this.message = app.message;    
 | 
			
		||||
   var children = target.children;
 | 
			
		||||
 | 
			
		||||
    // 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");
 | 
			
		||||
	    alert ("DEL");
 | 
			
		||||
	    alert (tmp);
 | 
			
		||||
	$K.ajax.post({
 | 
			
		||||
	    url: 'delete.php',
 | 
			
		||||
	    data: 'id='+tmp,
 | 
			
		||||
| 
						 | 
				
			
			@ -30,29 +44,91 @@ function deleteTableRow(rowId){
 | 
			
		|||
	    error: function(response) {}
 | 
			
		||||
	});
 | 
			
		||||
    }
 | 
			
		||||
    
 | 
			
		||||
  */  
 | 
			
		||||
 | 
			
		||||
    // delete the row from table
 | 
			
		||||
    var element = document.getElementById("trow"+rowId);
 | 
			
		||||
 | 
			
		||||
    element.parentNode.removeChild(element);
 | 
			
		||||
    renumberTableRows();
 | 
			
		||||
//    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(){
 | 
			
		||||
 | 
			
		||||
    var $node = $K.dom('#tabbody');
 | 
			
		||||
    // create a new table row with id
 | 
			
		||||
    var element = document.createElement('tr');
 | 
			
		||||
    element.setAttribute("id", "trow"+nextRowId);
 | 
			
		||||
	var $node = $K.dom('#tabbody');
 | 
			
		||||
	// create a new table row with id
 | 
			
		||||
	var element = document.createElement('tr');
 | 
			
		||||
	element.setAttribute("id", "trow"+currentRowId);
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
	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; 
 | 
			
		||||
	if (!a_date.trim().length){
 | 
			
		||||
		document.getElementById("a_date").focus();
 | 
			
		||||
		showAlert("Bitte gib ein gültiges Datum an!");
 | 
			
		||||
		return;
 | 
			
		||||
	}
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
	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; 
 | 
			
		||||
	if (!isFloat(a_amount)){
 | 
			
		||||
		document.getElementById("a_amount").focus(); 
 | 
			
		||||
		showAlert("Bitte gib einen gültigen Betrag ein!");
 | 
			
		||||
		return;
 | 
			
		||||
	}
 | 
			
		||||
		
 | 
			
		||||
 | 
			
		||||
	var a_currency = document.getElementById("a_currency").value; 
 | 
			
		||||
	if (!a_currency.trim().length){
 | 
			
		||||
		document.getElementById("a_currency").focus();
 | 
			
		||||
		showAlert("Bitte gib eine Wä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";*/
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			@ -93,15 +169,16 @@ function addTableRow(){
 | 
			
		|||
    // add delete bnutton
 | 
			
		||||
    e +=
 | 
			
		||||
	`<td><span
 | 
			
		||||
    onclick="deleteTableRow(${nextRowId})"
 | 
			
		||||
    onclick="deleteTableRow(${currentRowId})"
 | 
			
		||||
    class="close is-large">
 | 
			
		||||
	</span></td>`;
 | 
			
		||||
    
 | 
			
		||||
    
 | 
			
		||||
    $node.append(element);
 | 
			
		||||
    element.innerHTML=(e);
 | 
			
		||||
    renumberTableRows();
 | 
			
		||||
    nextRowId++;
 | 
			
		||||
//    renumberTableRows();
 | 
			
		||||
    currentRowId++;
 | 
			
		||||
	reset2();
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			@ -111,15 +188,12 @@ function setUploadField()
 | 
			
		|||
	var uf =`<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-target="#upload-target${currentRowId}"
 | 
			
		||||
		data-url="upload.php?row=${currentRowId}" data-url-remove="delete.php"
 | 
			
		||||
		data-progress="true">Beleg hochladen 
 | 
			
		||||
		</div>
 | 
			
		||||
		<div id="upload-target${nextRowId}" class="upload-target small"></div>
 | 
			
		||||
		<div id="upload-target${currentRowId}" class="upload-target small"></div>
 | 
			
		||||
		</div>
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
		`;
 | 
			
		||||
	document.getElementById("uploadfield").innerHTML=uf; 
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			@ -128,6 +202,7 @@ $K.add('module', 'kaform', {
 | 
			
		|||
	init: function(app, context)
 | 
			
		||||
        {
 | 
			
		||||
            this.app = app;
 | 
			
		||||
            this.message = app.message;		
 | 
			
		||||
        },
 | 
			
		||||
	// catch event
 | 
			
		||||
        onmessage: {
 | 
			
		||||
| 
						 | 
				
			
			@ -135,7 +210,8 @@ $K.add('module', 'kaform', {
 | 
			
		|||
                opened: function(sender)
 | 
			
		||||
                {
 | 
			
		||||
                    console.log('Tab box is ',sender.getActiveBox());
 | 
			
		||||
                }
 | 
			
		||||
		  this.message.show({ message: 'My message' });
 | 
			
		||||
		}
 | 
			
		||||
            }
 | 
			
		||||
        },
 | 
			
		||||
	
 | 
			
		||||
| 
						 | 
				
			
			@ -164,5 +240,6 @@ setUploadField();
 | 
			
		|||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
// add on table row
 | 
			
		||||
//addTableRow();
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
		Reference in New Issue