SQL-MisterMagoo · March 19, 2020 19:30
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
 	<meta charset="utf-8" />
 	<meta name="viewport" content="width=device-width" />
 	<title>Blazor Loading</title>
 	<base href="/" />
 	<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
 	<link href="css/site.css" rel="stylesheet" />
 </head>
 <body onload="myload()">
 	<script>
 		// keep a handle on the original browser console.error
 		const mmerr = console.error;
 		const xhrsend = window.XMLHttpRequest.prototype.send;

 		// hook up our custom error function and mono monitor
 		function myload() {
 			console.error = showError;
 			window.XMLHttpRequest.prototype.send = newXhrSend;
 		}

 		function newXhrSend(data) {
 			this.addEventListener("progress", monitorXHR);
 			this.addEventListener("loadend", endXHR);
 			return xhrsend.apply(this, arguments);
 		}

 		// custom error function so we can display to the user
 		function showError(e) {

 			// the "file_list" will be removed by Blazor if it runs
 			// so if this is missing we can stop monitoring errors

 			if (document.querySelector('#file_list')) {

 				// show the error message div
 				let errdiv = document.querySelector("#errordiv");
 				errdiv.classList.remove("d-none");

 				// add the error to the list
 				let errdesc = document.querySelector("#errordescription");
 				errdesc.innerHTML += '<li class="list-group-item alert-danger">' + e + '</li>';

 			} else {
 				// call the original error function and reset it - our app should be running
 				mmerr(e);
 				console.error = mmerr;
 			}
 		}

 		function monitorXHR(e) {
 			try {
 				const fileList = document.querySelector('#file_list');

 				if (fileList) {
 					// We only need to monitor files if the file_list is there
 					const url = e.currentTarget.responseURL;
 					var filename = url.substring(url.lastIndexOf('/') + 1);
 					const pr = fileList.querySelector("li[name='" + filename + "'] > progress");
 					if (pr) {
 						pr.value = e.loaded;
 						return;
 					}
 					var item = document.createElement("li");
 					item.setAttribute("name", filename);
 					item.classList.add("d-flex", "w-100", "p-1");
 					let previous = localStorage.getItem(filename);
 					if (!previous) {
 						previous = 4450000;
 					}
 					item.innerHTML = "<span> " + filename + " </span><progress class='flex-grow-1 ml-1' min='0' max='"+previous+"' value='" + e.loaded + "'></progress>";
 					fileList.appendChild(item);
 				}
 			} catch (e) {
 				console.error(e);
 			}
 		}

 		function endXHR(e) {
 			const url = e.currentTarget.responseURL;
 			var filename = url.substring(url.lastIndexOf('/') + 1);
 			localStorage.setItem(filename, e.loaded);
 		}
 	</script>
 	<app>
 		<div class="content vw-100">
 			<div id="errordiv" class="d-none w-100">
 				<div class="container">
 					<!-- Jumbotron -->
 					<div class="jumbotron">
 						<h1><span class="glyphicon glyphicon-fire red"></span> Error</h1>
 						<p class="lead">This application is returning an internal error.</p>
 						<a href="javascript:document.location.reload(true);" class="btn btn-default btn-lg text-center"><span class="green">Try This Page Again</span></a>
 					</div>
 				</div>
 				<div class="container-fluid">
 					<div class="row">
 						<h2>What happened?</h2>
 						<div class="col">
 							<ul id="errordescription" class="list-group"></ul>
 						</div>
 					</div>
 					<div class="row">
 						<div class="col">
 							<h2>What can I do?</h2>
 							<p class="lead">If you're a site visitor</p>
 							<p> Nothing you can do at the moment. If you need immediate assistance, please send us a tweet instead. We apologize for any inconvenience.</p>
 							<p class="lead">If you're the site owner</p>
 							<p>This error can only be fixed by the developer, please contact @mistermag00 on Twitter.</p>
 						</div>
 					</div>
 				</div>
 			</div>
 			<ul id="file_list" class="list-group-flush w-75">
 				<li class="list-group-item">Loading...</li>
 			</ul>
 		</div>
 	</app>
 	<script src="_framework/blazor.webassembly.js"></script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width" />
	<title>Blazor Loading</title>
	<base href="/" />
	<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
	<link href="css/site.css" rel="stylesheet" />
	</head>
	<body onload="myload()">
	<script>
	// keep a handle on the original browser console.error
	const mmerr = console.error;
	const xhrsend = window.XMLHttpRequest.prototype.send;

	// hook up our custom error function and mono monitor
	function myload() {
	console.error = showError;
	window.XMLHttpRequest.prototype.send = newXhrSend;
	}

	function newXhrSend(data) {
	this.addEventListener("progress", monitorXHR);
	this.addEventListener("loadend", endXHR);
	return xhrsend.apply(this, arguments);
	}

	// custom error function so we can display to the user
	function showError(e) {

	// the "file_list" will be removed by Blazor if it runs
	// so if this is missing we can stop monitoring errors

	if (document.querySelector('#file_list')) {

	// show the error message div
	let errdiv = document.querySelector("#errordiv");
	errdiv.classList.remove("d-none");

	// add the error to the list
	let errdesc = document.querySelector("#errordescription");
	errdesc.innerHTML += '<li class="list-group-item alert-danger">' + e + '</li>';

	} else {
	// call the original error function and reset it - our app should be running
	mmerr(e);
	console.error = mmerr;
	}
	}

	function monitorXHR(e) {
	try {
	const fileList = document.querySelector('#file_list');

	if (fileList) {
	// We only need to monitor files if the file_list is there
	const url = e.currentTarget.responseURL;
	var filename = url.substring(url.lastIndexOf('/') + 1);
	const pr = fileList.querySelector("li[name='" + filename + "'] > progress");
	if (pr) {
	pr.value = e.loaded;
	return;
	}
	var item = document.createElement("li");
	item.setAttribute("name", filename);
	item.classList.add("d-flex", "w-100", "p-1");
	let previous = localStorage.getItem(filename);
	if (!previous) {
	previous = 4450000;
	}
	item.innerHTML = "<span> " + filename + " </span><progress class='flex-grow-1 ml-1' min='0' max='"+previous+"' value='" + e.loaded + "'></progress>";
	fileList.appendChild(item);
	}
	} catch (e) {
	console.error(e);
	}
	}

	function endXHR(e) {
	const url = e.currentTarget.responseURL;
	var filename = url.substring(url.lastIndexOf('/') + 1);
	localStorage.setItem(filename, e.loaded);
	}
	</script>
	<app>
	<div class="content vw-100">
	<div id="errordiv" class="d-none w-100">
	<div class="container">
	<!-- Jumbotron -->
	<div class="jumbotron">
	<h1><span class="glyphicon glyphicon-fire red"></span> Error</h1>
	<p class="lead">This application is returning an internal error.</p>
	<a href="javascript:document.location.reload(true);" class="btn btn-default btn-lg text-center"><span class="green">Try This Page Again</span></a>
	</div>
	</div>
	<div class="container-fluid">
	<div class="row">
	<h2>What happened?</h2>
	<div class="col">
	<ul id="errordescription" class="list-group"></ul>
	</div>
	</div>
	<div class="row">
	<div class="col">
	<h2>What can I do?</h2>
	<p class="lead">If you're a site visitor</p>
	<p> Nothing you can do at the moment. If you need immediate assistance, please send us a tweet instead. We apologize for any inconvenience.</p>
	<p class="lead">If you're the site owner</p>
	<p>This error can only be fixed by the developer, please contact @mistermag00 on Twitter.</p>
	</div>
	</div>
	</div>
	</div>
	<ul id="file_list" class="list-group-flush w-75">
	<li class="list-group-item">Loading...</li>
	</ul>
	</div>
	</app>
	<script src="_framework/blazor.webassembly.js"></script>
	</body>
	</html>