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-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
								
								
								
								
							
							
						
						
									
										123
									
								
								kaform.js
								
								
								
								
							|  | @ -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ü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ü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ä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();
 | ||||||
|  |  | ||||||
		Loading…
	
		Reference in New Issue