Addressed change requests on pull requests:

- Changed back to innerText on output
- replaced global var report and extracted info for download from div
- put another check on the download button to insure that the report can only be downloaded once data is available
This commit is contained in:
marvindoering 2021-02-21 16:57:39 +01:00
parent 590e4cde16
commit aef5a50cf8
2 changed files with 42 additions and 18 deletions

View file

@ -16,6 +16,9 @@ View [validator configuration](/server/config) or <a href="/server/health" targe
<input type="button" id="submit" value="Validate" onclick="return validate();"> <input type="button" id="submit" value="Validate" onclick="return validate();">
<input type="button" id="dwn-btn" value="Download Report" onclick="return download();" disabled> <input type="button" id="dwn-btn" value="Download Report" onclick="return download();" disabled>
</div> </div>
</br>
<div id="good_status" style="color:#008000"></div>
<div id="bad_status" style="color:#800000"></div>
<div id="result"></div> <div id="result"></div>
</form> </form>
</div> </div>

View file

@ -40,13 +40,19 @@
<body> <body>
<script type="text/javascript"> <script type="text/javascript">
var report;
var validate = function validate() { var validate = function validate() {
const input = document.getElementById('file'); const input = document.getElementById('file');
const output = document.getElementById('result'); const output_bad_status = document.getElementById('bad_status');
const output_good_status = document.getElementById('good_status');
const output_result = document.getElementById('result');
const download = document.getElementById('dwn-btn'); const download = document.getElementById('dwn-btn');
// Reset all variables
output_bad_status.innerText = "";
output_good_status.innerText = "";
download.disabled = true;
output_result.innerText = "";
var headers = new Headers(); var headers = new Headers();
headers.append('Content-Type', 'application/xml'); headers.append('Content-Type', 'application/xml');
@ -58,29 +64,44 @@
}; };
fetch('/', requestOptions) fetch('/', requestOptions)
.then(response => response.text()) .then(response => {
.then(result => { let status = response.status + " " + response.statusText;
output.innerHTML = result; if(response.status === 200) {
report = result; output_good_status.innerText = status;
download.disabled = false; } else {
output_bad_status.innerText = status;
}
response.text().then(result => {
output_result.innerText = result;
download.disabled = false;
})
response.text().catch(error => output_result.innerText = error);
}) })
.catch(error => output.innerText = result);
return false; return false;
}; };
var download = function download() { let download = function download() {
var filename = "report.html"; const result = document.getElementById('result');
const filename = "report.html";
const element = document.createElement('a');
var element = document.createElement('a'); // Check if there is a report to download
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(report)); if(result.innerText !== "") {
element.setAttribute('download', filename); // Extraction of HTML Result from div-box "result"
let html_result = new DOMParser().parseFromString(result.innerText, "text/html");
// Eliminate the abundance
html_result = html_result.documentElement.innerHTML.replace(/<rep:report (.+)><rep:explanation>/, "");
element.style.display = 'none'; element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(html_result));
document.body.appendChild(element); element.setAttribute('download', filename);
element.click(); element.style.display = 'none';
document.body.appendChild(element);
document.body.removeChild(element); element.click();
document.body.removeChild(element);
}
}; };
</script> </script>