Commit fd4ec43c authored by bedroesb's avatar bedroesb
Browse files

start updating to bootstrap

parent 6ed04886
......@@ -7,100 +7,81 @@
<html class="lt-ie9" lang="en" dir="ltr"><![endif]-->
<!--[if gt IE 8]><!-->
<html dir="ltr" lang="en"
prefix="content: http://purl.org/rss/1.0/modules/content/ dc: http://purl.org/dc/terms/ foaf: http://xmlns.com/foaf/0.1/ og: http://ogp.me/ns# rdfs: http://www.w3.org/2000/01/rdf-schema# sioc: http://rdfs.org/sioc/ns# sioct: http://rdfs.org/sioc/types# skos: http://www.w3.org/2004/02/skos/core# xsd: http://www.w3.org/2001/XMLSchema#">
prefix="content: http://purl.org/rss/1.0/modules/content/ dc: http://purl.org/dc/terms/ foaf: http://xmlns.com/foaf/0.1/ og: http://ogp.me/ns# rdfs: http://www.w3.org/2000/01/rdf-schema# sioc: http://rdfs.org/sioc/ns# sioct: http://rdfs.org/sioc/types# skos: http://www.w3.org/2004/02/skos/core# xsd: http://www.w3.org/2001/XMLSchema#">
<!--<![endif]-->
<head>
<meta charset="utf-8"/>
<link href="/home" rel="canonical"/>
<meta content="width=device-width, initial-scale=1.0, user-scalable=yes" name="viewport"/>
<meta content="width" name="MobileOptimized"/>
<meta content="1" name="HandheldFriendly"/>
<meta content="yes" name="apple-mobile-web-app-capable"/>
<meta charset="utf-8" />
<link href="/home" rel="canonical" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<meta content="width" name="MobileOptimized" />
<meta content="1" name="HandheldFriendly" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<title>Bio-validator</title>
<link href="//fonts.googleapis.com/css?family=Lato:400,400italic,700" media="all" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--[if lt IE 9]>
<link type="text/css" rel="stylesheet"
href="https://www.elixir-europe.org/sites/default/files/css/css_3N1IuVi0VQRKfmilefgd9bEoo0mqJAzbLCyAwn1HFaE.css"
media="screen"/>
<![endif]-->
<script src="https://www.elixir-europe.org/sites/default/files/js/js_gZMBtDw_x_asFO_93fRFp1i1Py4R0zzduUcn0P06zeY.js"
type="text/javascript"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.min.js"
integrity="sha384-lpyLfhYuitXl2zRZ5Bn2fqnhNAKOAaM/0Kr9laMspuaMiZfGmfwRNFh8HlMy49eQ"
crossorigin="anonymous"></script>
<style>
.row {
display: flex;
flex-direction: row;
}
.left {
flex: 1;
}
.right {
flex: 1;
.container {
max-width: 960px;
}
</style>
</head>
<body>
<div id="page-wrapper">
<section id="main-content">
<h1>Bio-validator Service</h1>
<p>
This page allows you to validate JSON against a JSON schema using the
Bio-validator. The validator is based on AJV and includes
custom keyword extensions that are relevant for life science data validation.
</p>
</section>
<section class="row">
<div class="left">
<div class="bloc_left">
<form>
<div>
<span><a href="#" id="load">Load sample data</a></span>
<div style="display: inline;">
<button id="validate" value="Validate">Validate</button>
<body class="bg-light">
<div class="container ">
<main>
<div class="py-5 text-center">
<h1>Bio-validator Service</h1>
<p class="lead">
This page allows you to validate JSON against a JSON schema using the
Bio-validator. The validator is based on AJV and includes
custom keyword extensions that are relevant for life science data validation.
</p>
</div>
<div class="row g-5">
<div class="col-lg-7">
<form class="needs-validation">
<div class="mb-3">
<button class="btn btn-outline-secondary" id="load">Load sample data</button>
<button class="btn btn-primary" type="submit" id="validate">Validate</button>
</div>
<div class="horiz">
<label for="input">Schema:</label>
<span class="error starthidden" id="input-invalid"
style="display: none;">Invalid JSON parse error, <a
href="#" id="input-link"></a></span>
<div class="mb-3">
<label class="form-label" for="input">Schema:</label>
<textarea class="form-control" id="input" name="input"
placeholder="Enter your JSON schema or a URL to your schema here..." rows="12"
required></textarea>
<div class="invalid-feedback">
Please enter a valid schema in the textarea.
</div>
</div>
<textarea cols="60" id="input" name="input"
placeholder="Enter your JSON schema or a URL to your schema here..."
rows="20"></textarea>
<div class="horiz">
<label for="input2">Data:</label>
<span class="error starthidden" id="input2-invalid"
style="display: none;">Invalid JSON parse error, <a
href="#" id="input2-link"></a></span>
<div class="mb-3">
<label class="form-label" for="input2">Data:</label>
<div class="input-group has-validation"></div>
<textarea class="form-control" id="input2" name="input2"
placeholder="Enter JSON instance to validate against the schema..." rows="12"
required></textarea>
<div class="invalid-feedback">
Please enter valid data in the textarea.
</div>
</div>
<textarea class="half" cols="60" id="input2" name="input2"
placeholder="Enter JSON instance to validate against the schema..."
rows="20"></textarea>
</div>
</form>
</div>
</div>
<div class="right" style="margin-left: 2%">
<div>
<div>
<div class="horiz" style="text-align: left;">
<span style="font-weight: bold; ">Validation results:</span>
<br/>
<span id="failed" style="display: none;color : red;">INVALID</span>
<span id="valid" style="display: none;color : green;">VALID</span>
<div id="results"></div>
</div>
</form>
</div>
<div class="col-lg-5">
<h4>Validation results:</h4>
<span id="failed" style="display: none;color : red;">INVALID</span>
<span id="valid" style="display: none;color : green;">VALID</span>
<div id="results"></div>
</div>
</div>
</div>
</section>
</div>
</main>
<footer class="my-5 text-muted text-center text-small">
<p class="mb-1">Apache License 2.0</p>
</footer>
</div>
</body>
<script>
......@@ -119,9 +100,9 @@
errorStr = errorStr.concat("</ul>")
}
$("#cList").append("<li><span style=\"colour: #ff0000;\">" +
$("#cList").append("<li>" +
dataPath + errorStr +
"</span></li>");
"</li>");
}
}
......@@ -187,14 +168,24 @@
var schema;
var instance;
var input = document.getElementById("input");
var input2 = document.getElementById("input2");
try {
schema = JSON.parse($("#input").val());
} catch (e) {
$("#valid").hide();
$("#failed").show();
$("#results").empty();
input.classList.add('is-invalid')
}
try {
instance = JSON.parse($("#input2").val());
} catch (e) {
$("#valid").hide();
$("#failed").show();
$("#results").empty();
input2.classList.add('is-invalid')
}
if (schema && instance) {
......@@ -226,4 +217,5 @@
});
});
</script>
</html>
</html>
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment