From 448a542882efc2562346cb450e1697cce3180c29 Mon Sep 17 00:00:00 2001 From: KevinMidboe Date: Sun, 7 Jun 2020 23:57:11 +0200 Subject: [PATCH] Moved popover to separate file. --- src/site/popover.js | 79 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 79 insertions(+) create mode 100644 src/site/popover.js diff --git a/src/site/popover.js b/src/site/popover.js new file mode 100644 index 0000000..5f77a51 --- /dev/null +++ b/src/site/popover.js @@ -0,0 +1,79 @@ +const newDiv = () => document.createElement('div'); +const newImage = () => document.createElement('img'); +const newButton = () => document.createElement('button'); +const newLink = () => document.createElement('a'); +const newBold = () => document.createElement('b'); +const newSpan = () => document.createElement('span'); + +const containerWithTitleAndMessage = (title, msg) => { + const container = newDiv(); + const bold = newBold(); + const message = newSpan(); + bold.innerText = title + ': '; + message.innerText = msg; + + container.appendChild(bold) + container.appendChild(message) + return container +} + +const escapeKeyClosePopover = (event) => { + if (event.keyCode === 27) + closePopover() +} + +const closePopover = (event=null) => { + if (event == null || event.toElement.id == 'popover' || event.toElement.className.includes('close')) { + document.getElementById('popover').remove() + document.removeEventListener('keydown', escapeKeyClosePopover); + } +}; + +const popover = (id) => { + const outer = newDiv() + const container = newDiv() + let dismissButton = newButton() + const image = newImage() + const downloadLink = newLink() + const downloadButton = newButton() + + outer.id = 'popover' + outer.onclick = closePopover; + container.className = 'container' + dismissButton.className = 'close topLeft'; + dismissButton.innerText = 'X' + dismissButton.onclick = closePopover; + image.src = '/pdf/' + id + downloadLink.download = 'rapport.pdf'; + downloadLink.href = '/pdf/' + id + downloadButton.innerText = 'Download pdf'; + downloadLink.appendChild(downloadButton) + + container.appendChild(dismissButton) + container.appendChild(downloadLink); + container.appendChild(image); + + const centered = newDiv(); + centered.className = 'centered'; + dismissButton = newButton(); + dismissButton.className = 'close' + dismissButton.innerText = 'close'; + centered.appendChild(dismissButton) + container.appendChild(centered); + + outer.appendChild(container) + document.body.appendChild(outer); + + document.addEventListener('keydown', escapeKeyClosePopover) + + fetch('/logs/' + id) + .then(resp => resp.json()) + .then(async (log) => { + container.prepend(containerWithTitleAndMessage('Filename', log.pdfFilename)) + container.prepend(containerWithTitleAndMessage('Status', log.isOk ? 'Ok' : 'Not ok')) + container.prepend(containerWithTitleAndMessage('Date', new Date(log.date).toLocaleString())) + container.prepend(containerWithTitleAndMessage('Message', log.message)) + + downloadLink.download = log.pdfFilename + }) +}