KenyOS · January 19, 2022 14:35
diff --git a/printable-voucher-gen.html b/printable-voucher-gen.html
 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8" /> 
 <title>Printable pfSense Voucher Generator</title>
 <style type="text/css">
    @page {
            size: A4 landscape;
    }
    body {
            font-family: verdana, arial, sans-serif ;
            font-size: 12px ;
            }
    #maintable {
        border-spacing: 15px;
        display: none;
    }
    td.voucher  {
            border-top: 1px dotted #999999 ;
            border-bottom: 1px dotted #999999 ;
            border-left: 1px dotted  #999999;
            border-right: 1px dotted  #999999;
            padding: 20px 20px 10px 10px;
            text-align: left ;
            background-image: url("https://github.com/KenyOS/pfsense-captive-portal/raw/master/captiveportal-logo.png");
            background-position: right top;
            background-size: 175px 60px;
            background-repeat: no-repeat;
            background-origin: content-box;
    }
    tr.voucher {
            page-break-inside: avoid;
       }
    #tpl {
        display: none;
    }
 @media print {
    #generator {
        display: none;
    }
    @page {
            size: A4 landscape;
            
    }
 }
 </style>
 </head>

 <body>
 <div id="generator">
 <h1>Printable pfSense Voucher Generator</h1>
 <p><strong>Use in Chrome, not Firefox!!!1!!!11</strong> -- the print function is much more handy</p>
 <h2>How does it work?</h2>
 <ul>
 <li>Get a new voucher roll: pfsense->Services->Edit->Vouchers and download the .csv-Datei
 <li>Paste the coucher-codes without the  #-headline into the text area. But you may leave the " quotes and spaces around the codes.
 <li>Click Generate
 <li>Print it right from the browser in <strong>A4 Landscape</strong>, using <strong>no header/footer</strong> but <strong>background images</strong>. Everything unnecessary will be automagically hidden in the print.
 </ul>

 <form id="form">
 <textarea id="vouchers" rows="40">
 " voucher1"
 " voucher2"
 " voucher3"

 </textarea>
 <button type="button" id="button">Generate</button>
 <button type="button" id="print" disabled>Print</button>
 </form>
 <p>
    The stock picture is <a href="https://www.freepik.com/free-vector/nice-collection-of-real-estate-logos_1978041.htm">Designed by Freepik</a>
 </p>

 </div>
 <div id="tpl">
       <h1>WiFi - Acesso Visitante</h1>
       <table>
        <tr><th>SSID:</th><td>Techmeter</td></tr>
        <tr><th>Voucher:</th><td id="code">FIXME</td></tr>
       </table>
       <p>
       Esse Voucher &eacute; v&aacute;lido por <strong>1 dia</strong> ap&oacute;s o seu uso inicial.<br /> Conecte ao Wifi e tente abrir qualquer website para inserir o voucher no campo &quot;Vouchers&quot; em nosso portal Techmeter. <br /> Qualquer d&uacute;vida fique &agrave; vontade para contatar o Administrador.
       </p>
   </div>

 <table id="maintable">
 <tbody id=table>
 </tbody>
 </table>

 <script>
 document.getElementById("print").addEventListener('click',printEm);
 document.getElementById("button").addEventListener('click',buildEm);
 document.getElementById("vouchers").addEventListener('focus',clearEm);

 function clearEm() {
    var vouchers=document.getElementById("vouchers");
    if(!vouchers.value.search("\" voucher1")) {
        vouchers.value="";
    }
 }

 function printEm() {
    window.print();
 }

 function buildEm() {
    var vouchers=document.getElementById("vouchers").value.trim().split('\n');

    if (vouchers.length%2) {
        alert("Es muss eine gerade Anzahl an Voucher-Codes sein!");
        return 0;
    }

    var tpl=document.getElementById("tpl");
    var code=document.getElementById("code");
    var table=document.getElementById("table");
    var tr;


    document.getElementById("maintable").style.display="none";
    document.getElementById("table").innerHTML="";

    for(var i=0;i<vouchers.length;i++) {
        if(!(i%2)) {
            tr=document.createElement("tr");
            tr.className="voucher";
        }

        // pfsense prints the voucher codes as something like
        //   " aaaaaaaaaa"
        // into the csv -> account for this!
        code.innerHTML=vouchers[i].replace(/"/g,'').trim();

        var foo = tpl.cloneNode(true);
        foo.style.display="block";
        foo.removeAttribute("id");
        var td=document.createElement("td");
        td.className="voucher";
        td.appendChild(foo);
        tr.appendChild(td);

        if((i%2)) {
            table.appendChild(tr);
        }

    }
    document.getElementById("maintable").style.display="block";
    document.getElementById("print").disabled = false;
 }

 </script>

 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>Printable pfSense Voucher Generator</title>
	<style type="text/css">
	@page {
	size: A4 landscape;
	}
	body {
	font-family: verdana, arial, sans-serif ;
	font-size: 12px ;
	}
	#maintable {
	border-spacing: 15px;
	display: none;
	}
	td.voucher {
	border-top: 1px dotted #999999 ;
	border-bottom: 1px dotted #999999 ;
	border-left: 1px dotted #999999;
	border-right: 1px dotted #999999;
	padding: 20px 20px 10px 10px;
	text-align: left ;
	background-image: url("https://github.com/KenyOS/pfsense-captive-portal/raw/master/captiveportal-logo.png");
	background-position: right top;
	background-size: 175px 60px;
	background-repeat: no-repeat;
	background-origin: content-box;
	}
	tr.voucher {
	page-break-inside: avoid;
	}
	#tpl {
	display: none;
	}
	@media print {
	#generator {
	display: none;
	}
	@page {
	size: A4 landscape;

	}
	}
	</style>
	</head>

	<body>
	<div id="generator">
	<h1>Printable pfSense Voucher Generator</h1>
	<p><strong>Use in Chrome, not Firefox!!!1!!!11</strong> -- the print function is much more handy</p>
	<h2>How does it work?</h2>
	<ul>
	<li>Get a new voucher roll: pfsense->Services->Edit->Vouchers and download the .csv-Datei
	<li>Paste the coucher-codes without the #-headline into the text area. But you may leave the " quotes and spaces around the codes.
	<li>Click Generate
	<li>Print it right from the browser in <strong>A4 Landscape</strong>, using <strong>no header/footer</strong> but <strong>background images</strong>. Everything unnecessary will be automagically hidden in the print.
	</ul>

	<form id="form">
	<textarea id="vouchers" rows="40">
	" voucher1"
	" voucher2"
	" voucher3"

	</textarea>
	<button type="button" id="button">Generate</button>
	<button type="button" id="print" disabled>Print</button>
	</form>
	<p>
	The stock picture is <a href="https://www.freepik.com/free-vector/nice-collection-of-real-estate-logos_1978041.htm">Designed by Freepik</a>
	</p>

	</div>
	<div id="tpl">
	<h1>WiFi - Acesso Visitante</h1>
	<table>
	<tr><th>SSID:</th><td>Techmeter</td></tr>
	<tr><th>Voucher:</th><td id="code">FIXME</td></tr>
	</table>
	<p>
	Esse Voucher é válido por <strong>1 dia</strong> após o seu uso inicial.<br /> Conecte ao Wifi e tente abrir qualquer website para inserir o voucher no campo "Vouchers" em nosso portal Techmeter. <br /> Qualquer dúvida fique à vontade para contatar o Administrador.
	</p>
	</div>

	<table id="maintable">
	<tbody id=table>
	</tbody>
	</table>

	<script>
	document.getElementById("print").addEventListener('click',printEm);
	document.getElementById("button").addEventListener('click',buildEm);
	document.getElementById("vouchers").addEventListener('focus',clearEm);

	function clearEm() {
	var vouchers=document.getElementById("vouchers");
	if(!vouchers.value.search("\" voucher1")) {
	vouchers.value="";
	}
	}

	function printEm() {
	window.print();
	}

	function buildEm() {
	var vouchers=document.getElementById("vouchers").value.trim().split('\n');

	if (vouchers.length%2) {
	alert("Es muss eine gerade Anzahl an Voucher-Codes sein!");
	return 0;
	}

	var tpl=document.getElementById("tpl");
	var code=document.getElementById("code");
	var table=document.getElementById("table");
	var tr;


	document.getElementById("maintable").style.display="none";
	document.getElementById("table").innerHTML="";

	for(var i=0;i<vouchers.length;i++) {
	if(!(i%2)) {
	tr=document.createElement("tr");
	tr.className="voucher";
	}

	// pfsense prints the voucher codes as something like
	// " aaaaaaaaaa"
	// into the csv -> account for this!
	code.innerHTML=vouchers[i].replace(/"/g,'').trim();

	var foo = tpl.cloneNode(true);
	foo.style.display="block";
	foo.removeAttribute("id");
	var td=document.createElement("td");
	td.className="voucher";
	td.appendChild(foo);
	tr.appendChild(td);

	if((i%2)) {
	table.appendChild(tr);
	}

	}
	document.getElementById("maintable").style.display="block";
	document.getElementById("print").disabled = false;
	}

	</script>

	</body>
	</html>