forked from aebrahim/cobra_sbml_validator
-
Notifications
You must be signed in to change notification settings - Fork 0
/
validator_form.html
109 lines (94 loc) · 4.16 KB
/
validator_form.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!doctype html>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>COBRA SBML validator</title>
<!--dropzone-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.2.0/min/dropzone.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.2.0/min/dropzone.min.js"></script>
<!--bootstrap-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style>
div.row {
margin-top: 1em;
padding: 0.5em;
border-radius: 0.5em;
}
</style>
<script>
function update_result(file, response) {
result_list_div = document.getElementById("results");
result_div = result_list_div.appendChild(document.createElement("div"));
result_div.className = "row";
results = response; // results = JSON.parse(response); (for text/html)
// build the result str
result_str = "<strong>" + file.name + "</strong> - ";
if (results.errors.length == 0 && results.warnings.length == 0) {
result_div.className += " bg-success";
result_str += "No errors<br>"
file.previewElement.querySelector(".dz-success-mark").style.opacity = 1;
}
else {
result_str += results.errors.length + " error";
if (results.errors.length > 1 || results.errors.length == 0) result_str += "s";
if (results.warnings.length > 0) {
result_str += " and " + results.warnings.length + " warning";
if (results.warnings.length > 1) result_str += "s";
}
// update the error message on the dropzone preview
msg = file.previewElement.querySelector(".dz-error-message").getElementsByTagName("span")[0];
msg.innerHTML = result_str;
// color as error (or warning if no errors)
if (results.errors.length > 0) {
file.previewElement.classList.remove("dz-success");
file.previewElement.classList.add("dz-error");
result_div.className += " bg-danger";
}
else {
result_div.className += " bg-warning";
}
// display the rest of the errors in the result_list
result_str += "<br>";
for (var i = 0; i < results.errors.length; i++) {
result_str += "Error: " + results.errors[i] + "<br>";
}
for (var i = 0; i < results.warnings.length; i++) {
result_str += "Warning: " + results.warnings[i] + "<br>";
}
}
if ('objective' in results)
result_str += "objective value: " + results.objective;
// add result str to result_div
span = result_div.appendChild(document.createElement("span"));
span.innerHTML = result_str;
}
function onUploadFail(file, errorMsg, was_xhr) {
result_list_div = document.getElementById("results");
result_div = result_list_div.appendChild(document.createElement("div"));
result_div.className = "row bg-danger";
result_str = "<strong>" + file.name + "</strong> - ";
result_str += "Invalid file<br>" + errorMsg;
result_div.innerHTML = result_str;
}
Dropzone.options.uploader = {
uploadMultiple: false,
maxFilesize: 25,
init: function () {
this.on("success", update_result);
this.on("error", onUploadFail);
},
};
</script>
<body>
<h1>Validate COBRA models in SBML or JSON</h1>
<div id="dropzone" class="container">
<form action="upload" class="dropzone" id="uploader">
<div class="dz-message">Drop SBML/JSON files here or click to upload. Compressed (gz and bz2) files are also accepted.</div>
</form>
</div>
<div id="results" class="container"></div>
<!-- github ribbon -->
<a href="https://github.com/aebrahim/cobra_sbml_validator">
<img style="position: absolute; top: 0; right: 0; border;" src="https://camo.githubusercontent.com/a6677b08c955af8400f44c6298f40e7d19cc5b2d/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677261795f3664366436642e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png">
</a>
</body>