forked from tohe/wmdeit_kaform
				
			
		
			
	
	
		
			498 lines
		
	
	
		
			25 KiB
		
	
	
	
		
			Plaintext
		
	
	
	
		
		
			
		
	
	
			498 lines
		
	
	
		
			25 KiB
		
	
	
	
		
			Plaintext
		
	
	
	
|  | <!doctype html> | ||
|  | <html> | ||
|  | <head> | ||
|  | 	<meta charset="utf-8"/> | ||
|  | 	<meta name="viewport" content="width=device-width, initial-scale=1.0"/> | ||
|  | 	<title>Kostenerstattungsantrag Wikimedia Deutschland e.V.</title> | ||
|  | 	<link rel="stylesheet" href="kostenerstattung.css"> | ||
|  | 	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> | ||
|  | 	<script src="polyfiller.js"></script> | ||
|  | 	<script src="iban.js/iban.js"></script> | ||
|  | 	<script> | ||
|  | 		var eintraege = 0; | ||
|  | 
 | ||
|  | 		function neuerIndex() | ||
|  | 		{ | ||
|  | 			var aufstellung = document.getElementById('Aufstellung'), | ||
|  | 				eintraege = document.querySelectorAll('#Aufstellung tbody tr'); | ||
|  | 			for(var n = 0; n < eintraege.length; n++) | ||
|  | 			{ | ||
|  | 				eintraege[n].querySelector('legend').textContent = n+1+'. Position'; | ||
|  | 			} | ||
|  | 		} | ||
|  | 
 | ||
|  | 		function checkIban() | ||
|  | 		{ | ||
|  | 			iban = document.getElementById('iban'); | ||
|  | 			if( document.getElementById('eu').checked ) { | ||
|  | 				 | ||
|  | 				if(IBAN.isValid(iban.value)) | ||
|  | 				{ | ||
|  | 					if(iban.classList.contains('invalid')) iban.classList.remove('invalid'); | ||
|  | 					iban.classList.add('valid'); | ||
|  | 				} | ||
|  | 				else | ||
|  | 				{ | ||
|  | 					if(iban.classList.contains('valid')) iban.classList.remove('valid'); | ||
|  | 					iban.classList.add('invalid'); | ||
|  | 				} | ||
|  | 			} else { | ||
|  | 				if(iban.classList.contains('invalid')) iban.classList.remove('invalid'); | ||
|  | 				if(iban.classList.contains('valid')) iban.classList.remove('valid'); | ||
|  | 			} | ||
|  | 		} | ||
|  | 
 | ||
|  | 		function neueZeileGebraucht() | ||
|  | 		{ | ||
|  | 			var eintraege = document.querySelectorAll('#Aufstellung tbody tr'); | ||
|  | 			if(2 === eintraege.length)  | ||
|  | 			{ | ||
|  | 				addLine(); | ||
|  | 				return true; | ||
|  | 			} | ||
|  | 
 | ||
|  | 			var datum = document.getElementById('Datum['+(eintraege.length-1)+']'), | ||
|  | 				betrag = document.getElementById('Betrag['+(eintraege.length-1)+']'); | ||
|  | 
 | ||
|  | 			if("" !== datum.value || "0.00" !== betrag.value) addLine(); | ||
|  | 		} | ||
|  | 
 | ||
|  | 		function aktualisiereSumme() | ||
|  | 		{ | ||
|  | 			var aufstellung = document.getElementById('Aufstellung'), | ||
|  | 				eintraege = document.querySelectorAll('#Aufstellung tbody tr'), | ||
|  | 				summe = 0-parseFloat(document.getElementById('vorschuss').value); | ||
|  | 			for(var e = 1; e < eintraege.length-1; e++) | ||
|  | 			{ | ||
|  | //				console.log('aktualisiereSumme/Summe: '+summe); | ||
|  | //				console.log('aktualisiereSumme/eintraege[e].id: '+eintraege[e].id); | ||
|  | 				var id = parseInt(eintraege[e].id.match(/(\d+)/)[0]); | ||
|  | 				summe += parseFloat(document.getElementById('Betrag['+id+']').querySelector('input').value); | ||
|  | 			} | ||
|  | 			document.getElementById('Summe').textContent = summe.toLocaleString(false, { minimumFractionDigits: 2, useGrouping: true } ); | ||
|  | //			document.getElementById('Summe').textContent = summe.toFixed(2).toLocaleString(); | ||
|  | 		} | ||
|  | 
 | ||
|  | 		function checkForUpdates() | ||
|  | 		{ | ||
|  | //			neueZeileGebraucht(); | ||
|  | 			aktualisiereSumme(); | ||
|  | 		} | ||
|  | 
 | ||
|  | 		function erstellePosition(p) | ||
|  | 		{ | ||
|  | 			var vorlage = document.getElementById('neuerEintrag'), | ||
|  | 				neuerEintrag, inputs, labels, spans, textareas, tds; | ||
|  | 
 | ||
|  | 			neuerEintrag = document.importNode(vorlage.content, true); | ||
|  | 			neuerEintrag.querySelector('tr').id='Reihe['+p+']'; | ||
|  | 			tds = neuerEintrag.querySelectorAll('td'); | ||
|  | 			tds[0].id = 'Position['+p+']'; | ||
|  | 			tds[1].id = 'Beschreibung['+p+']'; | ||
|  | 			tds[2].id = 'Belegdatum['+p+']'; | ||
|  | 			tds[3].id = 'Betrag['+p+']'; | ||
|  | 			tds[4].id = 'Delete['+p+']'; | ||
|  | 			tds[0].textContent = p; | ||
|  | 			tds[4].querySelector('button').onclick = delLine; | ||
|  | 			tds[4].querySelector('button').ontouch = delLine; | ||
|  | 			tds[3].querySelector('input').onchange = checkForUpdates; | ||
|  | 			spans = neuerEintrag.querySelectorAll('span'); | ||
|  | 			return neuerEintrag; | ||
|  | 		} | ||
|  | 
 | ||
|  | 		function fadeIn(element) | ||
|  | 		{ | ||
|  | 			console.log('Fading in'); | ||
|  | 			var op = 0.1;  // initial opacity | ||
|  | 			element.style.opacity = 0; | ||
|  | 			element.style.filter = 'alpha(opacity=0)'; | ||
|  | 			element.style.display = 'table-row'; | ||
|  | 			var timer = setInterval(function () | ||
|  | 			{ | ||
|  | 				element.style.opacity = op; | ||
|  | 				element.style.filter = 'alpha(opacity=' + op * 100 + ")"; | ||
|  | 				op += op * 0.1; | ||
|  | 				if (op >= 1) | ||
|  | 				{ | ||
|  | 					clearInterval(timer); | ||
|  | 					element.style.opacity = 1; | ||
|  | 					element.style.filter = 'alpha(opacity=100)'; | ||
|  | 				} | ||
|  | 			}, 10); | ||
|  | 		} | ||
|  | 		function fadeOut(element) | ||
|  | 		{ | ||
|  | 			console.log('Fading out'); | ||
|  | 			var op = 1;  // initial opacity | ||
|  | 			var timer = setInterval(function () | ||
|  | 			{ | ||
|  | 				if (op <= 0.1) | ||
|  | 				{ | ||
|  | 					clearInterval(timer); | ||
|  | 					element.style.display = 'none'; | ||
|  | 				} | ||
|  | 				element.style.opacity = op; | ||
|  | 				element.style.filter = 'alpha(opacity=' + op * 100 + ")"; | ||
|  | 				op -= 0.05; | ||
|  | 			}, 25); | ||
|  | 		} | ||
|  | 
 | ||
|  | 		function removeAfterTimeout(element) | ||
|  | 		{ | ||
|  | 			console.log('Removing '+element.id); | ||
|  | 			var eintraege = document.querySelectorAll('#Aufstellung tbody tr'), | ||
|  | 				aufstellung = document.getElementById('Aufstellung'), | ||
|  | 				currentId = parseInt(element.id.match(/(\d+)/)[0]); | ||
|  | 			element.parentNode.removeChild(document.getElementById('Reihe['+currentId+']')); | ||
|  | //			console.log('removeAfterTimeout/currentId: '+currentId); | ||
|  | //			console.log('removeAfterTimeout/eintraege.length: '+eintraege.length); | ||
|  | 			if((currentId+1) < (eintraege.length)) | ||
|  | 			{ | ||
|  | 				// if there are more entries after the one supposed to be deleted, change their index values to match their new position | ||
|  | 				for(var i = currentId+1; i < eintraege.length-1; i++) | ||
|  | 				{ | ||
|  | //					console.log('removeAfterTimeout/i: '+i); | ||
|  | 					var regex = new RegExp(/\d+/), | ||
|  | 						newIdx = i-1, | ||
|  | 						pos = document.getElementById('Reihe['+i+']'); | ||
|  | //					console.log('removeAfterTimeout/newIdx: '+newIdx); | ||
|  | //					console.log('removeAfterTimeout/pos.id before: '+pos.id); | ||
|  | 					pos.id=pos.id.replace(regex,newIdx); | ||
|  | //					console.log('removeAfterTimeout/pos.id after: '+pos.id); | ||
|  | 					for(var n = 0; n < pos.childNodes.length; n++) | ||
|  | 					{ | ||
|  | 						if(1 == pos.childNodes[n].nodeType) | ||
|  | 						{ | ||
|  | 							pos.childNodes[n].id=pos.childNodes[n].id.replace(/\d/,newIdx); | ||
|  | 						} | ||
|  | 					} | ||
|  | 					document.getElementById('Position['+newIdx+']').textContent = newIdx; | ||
|  | 				} | ||
|  | 			} | ||
|  | 			checkForUpdates(); | ||
|  | 		} | ||
|  | 
 | ||
|  | 		function delLine() | ||
|  | 		{ | ||
|  | 			var eintraege = document.querySelectorAll('#Aufstellung tbody tr'), | ||
|  | 				aufstellung = document.getElementById('Aufstellung'); | ||
|  | 			var current = this.parentNode.parentNode; | ||
|  | 			console.log(current); | ||
|  | 			fadeOut(current); | ||
|  | 			setTimeout(removeAfterTimeout, 1100, current); | ||
|  | 		} | ||
|  | 
 | ||
|  | 		function addLine() | ||
|  | 		{ | ||
|  | 			var eintraege = document.querySelectorAll('#Aufstellung tbody tr'), | ||
|  | 				aufstellung = document.getElementById('Aufstellung').querySelector('tbody'); | ||
|  | 
 | ||
|  | 			var neu = erstellePosition(eintraege.length-1); | ||
|  | 			aufstellung.insertBefore(neu,document.getElementById('more')); | ||
|  | //			var eingefuegt = aufstellung.querySelector('fieldset:last-of-type'); | ||
|  | 			var eingefuegt = aufstellung.querySelector('tr:nth-last-of-type(2)'); | ||
|  | //			neuerIndex(); | ||
|  | 			console.log('Adding '+eingefuegt.id); | ||
|  | 			fadeIn(eingefuegt); | ||
|  | 		} | ||
|  | 
 | ||
|  | 		function splitDateString(date) { return date.match(/(\d{4})-(\d{2})-(\d{2})/); } | ||
|  | 		function splitTimeString(time) { return time.match(/(\d{2}):(\d{2})/); } | ||
|  | 
 | ||
|  | 		function restoreFromCookie() | ||
|  | 		{ | ||
|  | 			var c = document.cookie.match(new RegExp('Kostenerstattung' + '=([^;]+)')); | ||
|  | 			console.log(c); | ||
|  | 			if(c) { | ||
|  | 				c && (c = JSON.parse(c[1])); | ||
|  | 				document.getElementById('projekt').value = c.projekt; | ||
|  | 				document.getElementById('ansprech').value = c.ansprech; | ||
|  | 				document.getElementById('real').value = c.real; | ||
|  | 				document.getElementById('email').value = c.email; | ||
|  | 				document.getElementById('phone').value = c.phone; | ||
|  | 				document.getElementById('iban').value = c.iban; | ||
|  | 				document.getElementById('bic').value = c.bic; | ||
|  | 				document.getElementById('bank').value = c.bank; | ||
|  | 			} | ||
|  | 		} | ||
|  | 
 | ||
|  | 		function storeToCookie() | ||
|  | 		{ | ||
|  | 			var c = | ||
|  | 			{ | ||
|  | 				'projekt': document.getElementById('projekt').value, | ||
|  | 				'ansprech': document.getElementById('ansprech').value, | ||
|  | 				'real': document.getElementById('real').value, | ||
|  | 				'email': document.getElementById('email').value, | ||
|  | 				'phone': document.getElementById('phone').value, | ||
|  | 				'iban': document.getElementById('iban').value, | ||
|  | 				'bic': document.getElementById('bic').value, | ||
|  | 				'bank': document.getElementById('bank').value, | ||
|  | 			}; | ||
|  | 			document.cookie = 'Kostenerstattung='+JSON.stringify(c)+'; domain='+window.location.host.toString()+'; path=/extern; expires='+(new Date().getTime()+1000*60*60*24*365); | ||
|  | 		} | ||
|  | 
 | ||
|  | 		function init() { | ||
|  | 			document.getElementById("printDE_top").addEventListener('click', function() { window.print(); }, true); | ||
|  | 			document.getElementById("printEN_top").addEventListener('click', function() { window.print(); }, true); | ||
|  | 			document.getElementById("printDE_top").addEventListener('touch', function() { window.print(); }, true); | ||
|  | 			document.getElementById("printEN_top").addEventListener('touch', function() { window.print(); }, true); | ||
|  | 			document.getElementById("printDE_bottom").addEventListener('click', function() { window.print(); }, true); | ||
|  | 			document.getElementById("printEN_bottom").addEventListener('click', function() { window.print(); }, true); | ||
|  | 			document.getElementById("printDE_bottom").addEventListener('touch', function() { window.print(); }, true); | ||
|  | 			document.getElementById("printEN_bottom").addEventListener('touch', function() { window.print(); }, true); | ||
|  | 			document.getElementById('vorschuss').addEventListener('change', aktualisiereSumme); | ||
|  | 			document.getElementById('iban').addEventListener('change', checkIban); | ||
|  | /*			document.getElementById('save').addEventListener('click', storeToCookie); | ||
|  | 			document.getElementById('save').addEventListener('touch', storeToCookie);*/ | ||
|  | 			document.getElementById('addbutton_de').addEventListener('click', addLine); | ||
|  | 			document.getElementById('addbutton_de').addEventListener('touch', addLine); | ||
|  | 			document.getElementById('addbutton_en').addEventListener('click', addLine); | ||
|  | 			document.getElementById('addbutton_en').addEventListener('touch', addLine); | ||
|  | //			if(document.cookie) restoreFromCookie(); | ||
|  | 		} | ||
|  | 
 | ||
|  | 		function init2() | ||
|  | 		{ | ||
|  | 			webshims.setOptions('forms-ext', {types: 'date'}); | ||
|  | 			webshims.polyfill('forms forms-ext'); | ||
|  | 			addLine(); | ||
|  | 			aktualisiereSumme(); | ||
|  | 		} | ||
|  | 
 | ||
|  | 		window.addEventListener('DOMContentLoaded',init); | ||
|  | 		window.addEventListener('load',init2); | ||
|  | 
 | ||
|  | 	</script> | ||
|  | </head> | ||
|  | 
 | ||
|  | <body> | ||
|  | 	<input class="screen radiobutton" type="radio" id="en" name="lang" value="en" checked><label class="screen" for="en">English</label> | ||
|  | 	<input class="screen radiobutton" type="radio" id="de" name="lang" value="de"><label class="screen" for="de">Deutsch</label> | ||
|  | 	<header> | ||
|  | 		<img style="float: right;" src="logo_web.png" alt="logo"> | ||
|  | 		<h1 lang="de">Antrag auf Kostenerstattung</h1> | ||
|  | 		<h1 lang="en">Reimbursement Claims</h1> | ||
|  | 		<p  lang="de">Bitte beachte beim Ausfüllen die <a href="https://languwww.wikimedia.de/wiki/Gesch%C3%A4ftsordnung#Reisekostenordnung">Reisekostenordnung</a>.</p> | ||
|  | 	</header> | ||
|  | 	<div id="printcontainerDE_top" lang="de"><input type="button" value="🖶  Antrag drucken" id="printDE_top" disabled></div> | ||
|  | 	<div id="printcontainerEN_top" lang="en"><input type="button" value="🖶 Print" id="printEN_top" disabled></div> | ||
|  | 	<main> | ||
|  | 	<fieldset> | ||
|  | 		<legend lang="de">Bitte fülle die allgemeinen Daten für die Erstattung aus.</legend> | ||
|  | 		<legend lang="en">Please fill in the general data for reimbursement.</legend> | ||
|  | 		<fieldset class="iblock"> | ||
|  | 		<legend lang="de">Dein Projekt / Zweck der Reise</legend> | ||
|  | 		<legend lang="en">Your project / purpose of travel</legend> | ||
|  | 		<input required type="input" size="32" id="projekt" name="Projekt" placeholder="Projekt xy" /> | ||
|  | 		</fieldset> | ||
|  | 		<fieldset class="iblock"> | ||
|  | 		<legend lang="de">Deine Ansprechperson bei Wikimedia</legend> | ||
|  | 		<legend lang="en">Your contact person at Wikimedia</legend> | ||
|  | 		<input required type="input" size="32" id="ansprech" name="Ansprechperson" placeholder="John Doe" /> | ||
|  | 		</fieldset> | ||
|  | 		<hr /> | ||
|  | 		<fieldset class="iblock"> | ||
|  | 			<legend lang="de">Deine Kontaktdaten</legend> | ||
|  | 			<legend lang="en">Contact details</legend> | ||
|  | <!--		<p>Eine Angabe reicht bereits</p>--> | ||
|  | 			<label for="real" lang="de">Dein Realname</label> | ||
|  | 			<label for="real" lang="en">Full legal name</label> | ||
|  | 			<input required type="input" size="32" id="real" name="Realname" placeholder="Corinna Commonsuser" /> | ||
|  | 			<label for="email" lang="de">E-Mail-Adresse</label> | ||
|  | 			<label for="email" lang="en">Email address</label> | ||
|  | 			<input required type="email" size="32" id="email" name="Emailadresse" placeholder="name@example.org" /> | ||
|  | 			<label for="phone" lang="de">Telefonnummer</label> | ||
|  | 			<label for="phone" lang="en">Phone number</label> | ||
|  | 			<input required type="tel" size="32" id="phone" name="Telefonnummer" placeholder="0123-456789" /> | ||
|  | 		</fieldset> | ||
|  | 		<fieldset class="iblock" id="bankdetails"> | ||
|  | 			<legend lang="de">Auszahlungsweg</legend> | ||
|  | 			<legend lang="en">Payout method</legend> | ||
|  | <!--			<span style="white-space: pre;"><input class="screen" type="radio" id="eu" name="bank" value="EU" checked><label class="screen" for="eu" lang="de">EU-Banküberweisung</label><label class="screen" for="eu" lang="en">EU bank transfer</label></span> | ||
|  | 			<span style="white-space: pre;"><input class="screen" type="radio" id="noneu" name="bank" value="Non-EU"><label class="screen" for="noneu" lang="en">Non EU bank transfer</label><label class="screen" for="noneu" lang="de">Non-EU-Banküberweisung</label></span> | ||
|  | 			<span style="white-space: pre;"><input class="screen" type="radio" id="paypal" name="bank" value="PayPal"><label class="screen" for="paypal">PayPal</label></span> | ||
|  | 			<span style="white-space: pre;"><input class="screen" type="radio" id="bar" name="bank" value="Bar"><label class="screen" for="bar" lang="de">Bargeld</label><label class="screen" for="bar" lang="en">Cash</label></span>--> | ||
|  | 			<input class="screen" type="radio" id="eu" name="bank" value="EU" checked><label class="screen radio" for="eu" lang="de">EU-Banküberweisung</label><label class="screen radio" for="eu" lang="en">EU bank transfer</label> | ||
|  | 			<input class="screen" type="radio" id="noneu" name="bank" value="Non-EU"><label class="screen radio" for="noneu" lang="de">Non-EU-Banküberweisung</label><label class="screen radio" for="noneu" lang="en">Non EU bank transfer</label> | ||
|  | 			<input class="screen" type="radio" id="paypal" name="bank" value="PayPal"><label class="screen radio" for="paypal">PayPal</label> | ||
|  | 			<input class="screen" type="radio" id="bar" name="bank" value="Bar"><label class="screen radio" for="bar" lang="de">Bargeld</label><label class="screen radio" for="bar" lang="en">Cash</label> | ||
|  | 			<label class="EU nonEU" for="owner" lang="de">Kontoinhaber</label><label class="EU nonEU" for="owner" lang="en">Bank account owner</label><input class="EU nonEU" type="input" size="32" id="ownerDe" name="Owner" placeholder="wenn abweichend vom Realnamen" lang="de" /><input class="EU nonEU" type="input" size="32" id="ownerEn" name="Owner" placeholder="if different from full legal name" lang="en" /> | ||
|  | 			<label class="EU nonEU" for="iban" lang="de">IBAN</label><label class="EU nonEU" for="iban" lang="en">Bank account number</label><input class="EU nonEU" type="input" size="32" id="iban" name="IBAN" placeholder="DE0123…" /> | ||
|  | 			<label class="EU nonEU" for="bic">BIC / SWIFT</label><input class="EU nonEU" type="input" size="32" id="bic" name="BIC" placeholder="LBMU…" /> | ||
|  | 			<label class="EU nonEU" for="bank" lang="de">Name der Bank</label><label class="EU nonEU" for="bank" lang="en">Name of bank</label><input class="EU nonEU" type="input" size="32" id="bank" name="Bankname" placeholder="Banky McBankface" /> | ||
|  | 			<label class="nonEU" for="bankaddress" lang="en">Bank address</label><textarea lang="en" class="nonEU" id="bankaddress" style="resize:both;" cols="32" rows="4" placeholder="Street and house number | ||
|  | Postal code and city | ||
|  | Country"></textarea> | ||
|  | 			<label class="nonEU" for="address" lang="en">Your address</label><textarea lang="en" class="nonEU" id="address" style="resize:both;" cols="32" rows="4" placeholder="Street and house number | ||
|  | Postal code and city | ||
|  | Country"></textarea> | ||
|  | 			<label class="EU nonEU" for="comments" lang="en">Further comments</label><textarea lang="en" class="EU nonEU" id="comments" style="resize:both;" cols="32" rows="4" placeholder="e.g. intermediary bank, | ||
|  | reasons for differing account owner"></textarea> | ||
|  | 
 | ||
|  | 			<label class="nonEU" for="bankaddress" lang="de">Bankanschrift</label><textarea lang="de" class="nonEU" id="bankaddress" style="resize:both;" cols="32" rows="4" placeholder="Straße und Hausnummer | ||
|  | Postleitzahl und Ort | ||
|  | Land"></textarea> | ||
|  | 			<label class="nonEU" for="address" lang="de">Deine Anschrift</label><textarea lang="de" class="nonEU" id="address" style="resize:both;" cols="32" rows="4" placeholder="Straße und Hausnummer | ||
|  | Postleitzahl und Ort | ||
|  | Land"></textarea> | ||
|  | 			<label class="EU nonEU" for="comments" lang="de">Weitere Anmerkungen</label><textarea lang="de" class="EU nonEU" id="comments" style="resize:both;" cols="32" rows="4" placeholder="z.B. intermdiäre Bank, | ||
|  | Grund für abweichende Kontoinhaberin"></textarea> | ||
|  | 
 | ||
|  | 			<label class="paypal" for="accountnumber">PayPal account</label><input class="paypal" type="input" size="32" id="paypal" placeholder="paypal@example.com" /> | ||
|  | 		</fieldset> | ||
|  | <!--		<div id="datacontainer"><input type="button" value="💾 Diese Angaben für eine spätere Verwendung auf diesem Rechner sichern (Cookie). / Save these specifications for later use on this computer (cookie)." id="save"></div>--> | ||
|  | 
 | ||
|  | 	</fieldset> | ||
|  | 	<fieldset id="Aufstellung_alt"> | ||
|  | 		<legend class="screen" lang="de">Bitte trage deine einzelnen Kostenpositionen ein.</legend> | ||
|  | 		<legend class="screen" lang="en">Please enter your cost items.</legend> | ||
|  | 		<p class="screen" lang="de">Bitte trage nur eine Ausgabe pro Zeile ein, lege den Originalbeleg dem Antrag bei und kennzeichne den Beleg mit der entsprechenden Zeilennummer. | ||
|  | 		Aus der Beschreibung soll zu ersehen sein, ob es sich um Transport, Dienstleistung, Materialien, Verpflegung oder ähnliches handelt. | ||
|  | 		 | ||
|  | 		<p class="screen" lang="en">Please enter only one expense per line, provide original receipt with your claim and tag the receipt with the appropriate line number. | ||
|  | 		The description of the expense should refer to the kind of expense, e.g. travel, service, materials, food or similar.</p> | ||
|  | 		<table id="Aufstellung"> | ||
|  | 			<thead><tr id="aufstellungheader" style="font-size:80%;"> | ||
|  | 				<th id="spalte0">Pos.</th> | ||
|  | 				<th id="spalte1"><span lang="de">Beschreibung</span><span lang="en">Description</span></th> | ||
|  | 				<th id="spalte2"><span lang="de">Belegdatum</span><span lang="en">Date</span></th> | ||
|  | 				<th id="spalte3"><span lang="de">Betrag</span><span lang="en">Sum</span> | ||
|  | 				<input list="waehrungen" name="waehrung" id="waehrung" placeholder="EUR, or enter currency code"> | ||
|  | 				<datalist id="waehrungen"> | ||
|  | 					<option value="USD">United States Dollars</option> | ||
|  | 					<option value="EUR" selected="selected">Euro</option> | ||
|  | 					<option value="GBP">United Kingdom Pounds</option> | ||
|  | 					<option value="DZD">Algeria Dinars</option> | ||
|  | 					<option value="ARP">Argentina Pesos</option> | ||
|  | 					<option value="AUD">Australia Dollars</option> | ||
|  | 					<option value="BSD">Bahamas Dollars</option> | ||
|  | 					<option value="BBD">Barbados Dollars</option> | ||
|  | 					<option value="BMD">Bermuda Dollars</option> | ||
|  | 					<option value="BRR">Brazil Real</option> | ||
|  | 					<option value="BGL">Bulgaria Lev</option> | ||
|  | 					<option value="CAD">Canada Dollars</option> | ||
|  | 					<option value="CLP">Chile Pesos</option> | ||
|  | 					<option value="CNY">China Yuan Renmimbi</option> | ||
|  | 					<option value="CSK">Czech Republic Koruna</option> | ||
|  | 					<option value="DKK">Denmark Kroner</option> | ||
|  | 					<option value="XCD">Eastern Caribbean Dollars</option> | ||
|  | 					<option value="EGP">Egypt Pounds</option> | ||
|  | 					<option value="FJD">Fiji Dollars</option> | ||
|  | 					<option value="HKD">Hong Kong Dollars</option> | ||
|  | 					<option value="HUF">Hungary Forint</option> | ||
|  | 					<option value="ISK">Iceland Krona</option> | ||
|  | 					<option value="INR">India Rupees</option> | ||
|  | 					<option value="IDR">Indonesia Rupiah</option> | ||
|  | 					<option value="ILS">Israel New Shekels</option> | ||
|  | 					<option value="JMD">Jamaica Dollars</option> | ||
|  | 					<option value="JPY">Japan Yen</option> | ||
|  | 					<option value="JOD">Jordan Dinar</option> | ||
|  | 					<option value="KRW">Korea (South) Won</option> | ||
|  | 					<option value="LBP">Lebanon Pounds</option> | ||
|  | 					<option value="MYR">Malaysia Ringgit</option> | ||
|  | 					<option value="MXP">Mexico Pesos</option> | ||
|  | 					<option value="NZD">New Zealand Dollars</option> | ||
|  | 					<option value="NOK">Norway Kroner</option> | ||
|  | 					<option value="PKR">Pakistan Rupees</option> | ||
|  | 					<option value="PHP">Philippines Pesos</option> | ||
|  | 					<option value="PLZ">Poland Zloty</option> | ||
|  | 					<option value="ROL">Romania Leu</option> | ||
|  | 					<option value="RUR">Russia Rubles</option> | ||
|  | 					<option value="SAR">Saudi Arabia Riyal</option> | ||
|  | 					<option value="SGD">Singapore Dollars</option> | ||
|  | 					<option value="ZAR">South Africa Rand</option> | ||
|  | 					<option value="KRW">South Korea Won</option> | ||
|  | 					<option value="SDD">Sudan Dinar</option> | ||
|  | 					<option value="SEK">Sweden Krona</option> | ||
|  | 					<option value="CHF">Switzerland Francs</option> | ||
|  | 					<option value="TWD">Taiwan Dollars</option> | ||
|  | 					<option value="THB">Thailand Baht</option> | ||
|  | 					<option value="TTD">Trinidad and Tobago Dollars</option> | ||
|  | 					<option value="TRL">Turkey Lira</option> | ||
|  | 					<option value="VEB">Venezuela Bolivar</option> | ||
|  | 					<option value="ZMK">Zambia Kwacha</option> | ||
|  | 				</datalist> | ||
|  | 				</th> | ||
|  | 				<th id="spalte4" class="delete"></th> | ||
|  | 			</tr></thead> | ||
|  | 			<tbody> | ||
|  | 			<tr id="Reihe[0]"> | ||
|  | 				<td id="Position[0]" style="text-align: right;">0</td> | ||
|  | 				<td id="Beschreibung[0]"><textarea style="resize:none;" cols="45" rows="1" readonly lang="de">Vorschuss (falls zutreffend)</textarea><textarea style="resize:none;" cols="45" rows="1" readonly lang="en">Advance payment (if applicable)</textarea></td> | ||
|  | 				<td id="Belegdatum[0]"><input type="date" style="visibility:hidden;"></td> | ||
|  | 				<td id="Betrag[0]" style="text-align:right;"><input required type="number" step="0.01" value="0.00" min="0.00" max="10000.00" id="vorschuss" name="Vorschuss" style="font-size:120%; text-align: right;" /></td> | ||
|  | 				<td class="delete" id="delete[0]"></td> | ||
|  | 			</tr> | ||
|  | 			<tr class="screen" id="more"><td colspan="4"><input type="button" id="addbutton_de" style="width:100%;" value="Ausgabe hinzufügen +" lang="de" /><input type="button" id="addbutton_en" style="width:100%;" value="Add expense +" lang="en" /></td></tr> | ||
|  | 			</tbody> | ||
|  | 			<tfoot> | ||
|  | 			<tr id="Reihe[Summe]"> | ||
|  | 				<td colspan="3" style="text-align: right;"><span lang="de">Summe</span><span lang="en">Total</span></td> | ||
|  | 				<td style="text-align: right;"><span class="geld" id="Summe" style="margin-left: 2em; font-weight:bold; color:black; width:8em;"></span></td> | ||
|  | 			</tr> | ||
|  | 			</tfoot> | ||
|  | 		</table> | ||
|  | 	</fieldset> | ||
|  | 	<fieldset> | ||
|  | 		<legend lang="de">Datum der Antragstellung</legend> | ||
|  | 		<legend lang="en">Date of claim</legend> | ||
|  | 		<input type="date"> | ||
|  | 	</fieldset> | ||
|  | 	<fieldset> | ||
|  | 		<legend lang="de">Pflichtangabe: Hiermit bestätige ich die Vollständig- und Richtigkeit meiner Angaben.</legend> | ||
|  | 		<legend lang="en">Mandatory declaration: Herewith I confirm the completeness and correctness of my data.</legend> | ||
|  | 		<input type="checkbox" id="check" name="checkbox" onchange="document.getElementById('printDE_bottom').disabled = !this.checked;  | ||
|  | 																	document.getElementById('printEN_bottom').disabled = !this.checked;	 | ||
|  | 																	document.getElementById('printDE_top').disabled = !this.checked; | ||
|  | 																	document.getElementById('printEN_top').disabled = !this.checked;"> | ||
|  | 
 | ||
|  | 	</fieldset> | ||
|  | 	<h2 id="faq" class="screen">Frequently asked questions (FAQ)</h2> | ||
|  | 	<!--<input class="screen" type="radio" id="en" name="lang" value="en" checked><label class="screen" for="en">English</label> | ||
|  | 	<input class="screen" type="radio" id="de" name="lang" value="de"><label class="screen" for="de">Deutsch</label>--> | ||
|  | 	<dl lang="en" class="screen"> | ||
|  | 		<dt>My claims are not in Euro. What now?</dt> | ||
|  | 		<dd>When claiming expenses please select in which currency you want your expense reimbursed. Use the | ||
|  | 		<a href="https://sdw.ecb.europa.eu/curConverter.do?node=9693519">converter of the European Central Bank</a>. | ||
|  | 		Convert per line (not the sum!) using the exchange rate valid at the date of expense. If you don't provide a | ||
|  | 		currency, we'll assume you want to get reimbursed using Euro.</dd> | ||
|  | 	</dl> | ||
|  | 	<dl lang="de" class="screen"> | ||
|  | 		<dt>Meine Ausgabe sind nicht in Euro. Was soll ich machen?</dt> | ||
|  | 		<dd>Wenn du Ausgaben erstattet haben willst, rechne die Ausgaben zeilenweise (nicht nur den Gesamtbetrag!) mit dem | ||
|  | 		<a href="https://sdw.ecb.europa.eu/curConverter.do?node=9693519">Währungsumrechner der Europäischen Zentralbank</a> | ||
|  | 		in die Währung um, in der du deine Kosten erstattet haben willst. Gibst du keine Währung an, nehmen wir an, dass | ||
|  | 		die Erstattung in Euro erfolgen soll.</dd> | ||
|  | 	</dl> | ||
|  | 	<div style="width: 100%; text-align:right; padding-right: 50px; font-weight:bold; font-size:90%;"></div> | ||
|  | 	</main> | ||
|  | 	<div id="printcontainerDE_bottom" lang="de"><input type="button" value="🖶  Antrag drucken" id="printDE_bottom" disabled></div> | ||
|  | 	<div id="printcontainerEN_bottom" lang="en"><input type="button" value="🖶  Print" id="printEN_bottom" disabled></div> | ||
|  | 	<template id="neuerEintrag"> | ||
|  | 		<tr style="display: none"> | ||
|  | 			<td style="text-align: right;"></td> | ||
|  | 			<td><textarea style="resize:both;" cols="45" rows="2" placeholder="Please enter a description of this expense here."></textarea></td> | ||
|  | 			<td><input type="date"></td> | ||
|  | 			<td style="text-align:right;"><input type="number" min="0.00" max="10000.00" step="0.01" value="0.00" style="text-align: right;"></td> | ||
|  | 			<td class="delete"><button class="delbutton">-</button></td> | ||
|  | 		</tr> | ||
|  | 	</template> | ||
|  | 	<footer> | ||
|  | 		<a href="mailto:info@wikimedia.de">Kontakt / contact</a> | ||
|  | 		<p>© 2016 by Wikimedia Deutschland e.V.</p> | ||
|  | 		<address>Wikimedia Deutschland<br> | ||
|  | Gesellschaft zur Förderung Freien Wissens e.V.<br> | ||
|  | Postfach 61 03 49<br> | ||
|  | 10925 Berlin<br><br> | ||
|  | 
 | ||
|  | http://wikimedia.de<br> | ||
|  | Tel: +49 30/21 91 58 26-0<br> | ||
|  | Fax: +49 30/21 91 58 26-9<br> | ||
|  | E-Mail: info@wikimedia.de<br><br> | ||
|  | 
 | ||
|  | </address> | ||
|  | 	</footer> | ||
|  | </body> | ||
|  | </html> |