KenyOS/printable-voucher-gen.html

## 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>