docsPrinting.html

<!DOCTYPE html>
<html>
<style>
#notification {
  position: fixed;
  bottom: 20px;
  left: 20px;
  width: 200px;
  padding: 20px;
  border-radius: 5px;
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
.hidden {
  display: none;
}
</style>
  <body>
	<form>
	<h4>
	Printing documents...<br>
	</h4>
	<div id="notification" class="hidden">
		<p id="message"></p>
		<button id="close-button" onClick="closeNotification()" class="hidden">
		  Close
		</button> 
		<button id="restart-button" onClick="restartApp()" class="hidden">
		  Restart
		</button>
	</div>
	<script>
			const electron = require('electron');
			const {ipcRenderer} = electron;
			const form = document.querySelector('form');

			form.addEventListener('submit', submitForm);
	
			function submitForm(e){
				e.preventDefault();
				ipcRenderer.send('print-continue');
			}

			const notification = document.getElementById('notification');
			const message = document.getElementById('message');
			const restartButton = document.getElementById('restart-button');
			ipcRenderer.on('update_available', () => {
  				ipcRenderer.removeAllListeners('update_available');
  				message.innerText = 'A new update is available. Downloading now...';
  				notification.classList.remove('hidden');
			});
			ipcRenderer.on('update_not_available', () => {
  				ipcRenderer.removeAllListeners('update_not_available');
				console.log ('Sofware is up-to-date');
  				message.innerText = 'Your software is up to date.';
  				notification.classList.remove('hidden');
			});
			ipcRenderer.on('update_downloaded', () => {
  				ipcRenderer.removeAllListeners('update_downloaded');
  				message.innerText = 'Update Downloaded. It will be installed on restart. Restart now?';
  				restartButton.classList.remove('hidden');
  				notification.classList.remove('hidden');
			});

			function closeNotification() {
  				notification.classList.add('hidden');
			}
			function restartApp() {
  				ipcRenderer.send('restart_app');
			}
		</script>
	</form>
  </body>
</html>