ocramz/server-sent-events.html

## server-sent-events.html
<!DOCTYPE html>
<html>
<head>
{{>head}}
    {{#user}}
    <title>Back {{name}} checkout | satsbacker</title>
    {{/user}}
</head>
<body>
    {{>header}}
    <div class="hero">
        <h1>Back <b>{{user.name}}</b> at <b>{{invoice.amount}}</b> {{config.site.amount_type}} per month</h1>
    </div>
    <div class="container smooth" id="main">
        <div class="row">
            <div class="four columns">
                <label for="expiry">Expires At</label>
            </div>
            <div class="eight columns">
                <p><span class="timestamp">{{invoice.expires_at}}</span></p>
            </div>
        </div>
        <div class="row">
            <div class="four columns">
                <label for="description">Description</label>
            </div>
            <div class="eight columns">
                <p>{{invoice.description}}</p>
            </div>
        </div>
        <div class="row">
            <div class="one-half column card-pay">
                <label for="invoice">Payment Request</label>
                <div class="qrpayreq qrcode"></div>
                <input onclick="this.setSelectionRange(0, this.value.length)"
                       class="u-full-width payreq"
                       type="text"
                       readonly
                       value="{{invoice.payreq}}"></input>

            </div>
            <div class="one-half column card-pay">
                <label for="peer">Connect</label>
                <p>You can use this to open an initial payment channel if you haven't already</p>
                <div class="qrpeer qrcode"></div>
                <input onclick="this.setSelectionRange(0, this.value.length)"
                       class="u-full-width peer"
                       type="text"
                       readonly
                       value="{{config.peer}}"></input>
            </div>
        </div>
        <div class="row">
            <div class="four columns">
                <label for="id">Invoice Id</label>
            </div>
            <div class="eight columns">
                <p>{{invoice.id}}</p>
            </div>
        </div>
        <div class="row">
            <div class="four columns">
                <label id="status" for="status">Status</label>
            </div>
            <div class="eight columns">
                <p>Waiting for payment...</p>
            </div>
        </div>
    </div>
    <div class="container smooth hide" id="pay-success">
        <label for="id">Invoice Id</label>
        <p>{{invoice.id}}</p>
        <p class="paid">Payment Received!</p>
        <p>Thank you for supporting satsbacker development!</p>
    </div>
</body>
<script type="text/javascript" src="/js/qrcode-svg.js"></script>
<script>
 function formatDate(d) {
     var hours = d.getHours();
     var mins = d.getMinutes();
     return d.toLocaleDateString() + " " + hours + ":" + mins;
 }

 (function(){
     document.querySelectorAll(".timestamp").forEach(function(ts) {
         console.log(ts.innerHTML);
         ts.innerHTML = formatDate(new Date(+ts.innerHTML * 1000));
     });

     var es = new EventSource('/payment-stream/{{invoice.id}}')

     var container = document.getElementById("main");
     var successContainer = document.getElementById("pay-success");

     es.addEventListener('paid', msg => {
         successContainer.classList.remove("hide");
         container.classList.add("hide");
         es.close();
     })

     var payreq = document.querySelector("input.payreq").value;
     var peer = document.querySelector("input.peer").value;

     var payElem = document.querySelector(".qrpayreq");
     var peerElem = document.querySelector(".qrpeer");

     var size = 256;
     var padding = 4;
     var col = "#000000";
     var bg  = "#ffffff";
     var ecl = "L";

     var payqr = new QRCode({
         content: payreq,
         padding: padding,
         width: size,
         height: size,
         color: col,
         background: bg,
         ecl: ecl,
     });

     var peerqr = new QRCode({
         content: peer,
         padding: padding,
         width: size,

         color: col,
         background: bg,
         ecl: ecl,
     });

     var paysvg = payqr.svg();
     var peersvg = peerqr.svg();


     peerElem.innerHTML = peersvg;
     payElem.innerHTML = paysvg;
 })();
</script>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	{{>head}}
	{{#user}}
	<title>Back {{name}} checkout \| satsbacker</title>
	{{/user}}
	</head>
	<body>
	{{>header}}
	<div class="hero">
	<h1>Back <b>{{user.name}}</b> at <b>{{invoice.amount}}</b> {{config.site.amount_type}} per month</h1>
	</div>
	<div class="container smooth" id="main">
	<div class="row">
	<div class="four columns">
	<label for="expiry">Expires At</label>
	</div>
	<div class="eight columns">
	<p><span class="timestamp">{{invoice.expires_at}}</span></p>
	</div>
	</div>
	<div class="row">
	<div class="four columns">
	<label for="description">Description</label>
	</div>
	<div class="eight columns">
	<p>{{invoice.description}}</p>
	</div>
	</div>
	<div class="row">
	<div class="one-half column card-pay">
	<label for="invoice">Payment Request</label>
	<div class="qrpayreq qrcode"></div>
	<input onclick="this.setSelectionRange(0, this.value.length)"
	class="u-full-width payreq"
	type="text"
	readonly
	value="{{invoice.payreq}}"></input>

	</div>
	<div class="one-half column card-pay">
	<label for="peer">Connect</label>
	<p>You can use this to open an initial payment channel if you haven't already</p>
	<div class="qrpeer qrcode"></div>
	<input onclick="this.setSelectionRange(0, this.value.length)"
	class="u-full-width peer"
	type="text"
	readonly
	value="{{config.peer}}"></input>
	</div>
	</div>
	<div class="row">
	<div class="four columns">
	<label for="id">Invoice Id</label>
	</div>
	<div class="eight columns">
	<p>{{invoice.id}}</p>
	</div>
	</div>
	<div class="row">
	<div class="four columns">
	<label id="status" for="status">Status</label>
	</div>
	<div class="eight columns">
	<p>Waiting for payment...</p>
	</div>
	</div>
	</div>
	<div class="container smooth hide" id="pay-success">
	<label for="id">Invoice Id</label>
	<p>{{invoice.id}}</p>
	<p class="paid">Payment Received!</p>
	<p>Thank you for supporting satsbacker development!</p>
	</div>
	</body>
	<script type="text/javascript" src="/js/qrcode-svg.js"></script>
	<script>
	function formatDate(d) {
	var hours = d.getHours();
	var mins = d.getMinutes();
	return d.toLocaleDateString() + " " + hours + ":" + mins;
	}

	(function(){
	document.querySelectorAll(".timestamp").forEach(function(ts) {
	console.log(ts.innerHTML);
	ts.innerHTML = formatDate(new Date(+ts.innerHTML * 1000));
	});

	var es = new EventSource('/payment-stream/{{invoice.id}}')

	var container = document.getElementById("main");
	var successContainer = document.getElementById("pay-success");

	es.addEventListener('paid', msg => {
	successContainer.classList.remove("hide");
	container.classList.add("hide");
	es.close();
	})

	var payreq = document.querySelector("input.payreq").value;
	var peer = document.querySelector("input.peer").value;

	var payElem = document.querySelector(".qrpayreq");
	var peerElem = document.querySelector(".qrpeer");

	var size = 256;
	var padding = 4;
	var col = "#000000";
	var bg = "#ffffff";
	var ecl = "L";

	var payqr = new QRCode({
	content: payreq,
	padding: padding,
	width: size,
	height: size,
	color: col,
	background: bg,
	ecl: ecl,
	});

	var peerqr = new QRCode({
	content: peer,
	padding: padding,
	width: size,

	color: col,
	background: bg,
	ecl: ecl,
	});

	var paysvg = payqr.svg();
	var peersvg = peerqr.svg();


	peerElem.innerHTML = peersvg;
	payElem.innerHTML = paysvg;
	})();
	</script>
	</html>