<!DOCTYPE html>
<!--[if lt IE 7]>
<html class="lt-ie9 lt-ie8 lt-ie7" lang="en" dir="ltr"><![endif]-->
<!--[if IE 7]>
<html class="lt-ie9 lt-ie8" lang="en" dir="ltr"><![endif]-->
<!--[if IE 8]>
<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#">
<!--<![endif]-->

<head>
    <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>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></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>
        .container {
            max-width: 960px;
        }
    </style>
</head>

<body class="bg-light">
    <div class="container-fluid">
            <div class="py-5 text-center">
                <h1>ELIXIR biovalidator</h1>
                <p class="lead">
                    ElIXIR biovalidator is an extended JSON Schema validator supporting use cases related to life sciences.
                    The biovalidator is based on popular JavaScript library AJV.
                </p>
            </div>
            <div class="mb-3 d-flex justify-content-center">
                <button class="btn btn-outline-secondary mx-1 w-25" id="load">Load sample data</button>
                <button class="btn btn-primary mx-1 w-25" type="submit" id="validate">Validate</button>
            </div>


                <form>

                    <div class="row">
                    <div class="col-lg-6">
                        <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>
                    <div class="col-lg-6">
                        <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>
                    </div>
                </form>

            <div class="row">
                <div class="col-lg-12">
                    <label class="form-label">Validation results:</label>
                    <div class="card">
                        <div class="card-body">
                            <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>
            </div>

        <footer class="my-5 text-muted text-center text-small">
            <p class="mb-1">Apache License 2.0</p>
        </footer>
    </div>
</body>
<script>

    function error_report(response) {
        for (let i = 0; i < response.length; i++) {
            const dataPath = response[i].dataPath.substr(1);
            const errors = response[i].errors;
            let errorStr = "";
            for (let j = 0; j < errors.length; j++) {
                if (errorStr.length === 0) {
                    errorStr = errorStr.concat("<ul>")
                }
                errorStr = errorStr.concat("<li>" + errors[j] + "</li>")
            }
            if (errorStr.length > 0) {
                errorStr = errorStr.concat("</ul>")
            }

            $("#cList").append("<li>" +
                dataPath + errorStr +
                "</li>");
        }
    }

    $(document).ready(function () {

        $("#results").val("")

        $("#load").click(function (evt) {
            evt.preventDefault();
            let schema = {
                "$schema": "http://json-schema.org/draft-07/schema#",
                "type": "object",
                "properties": {
                    "alias": {
                        "description": "A sample unique identifier in a submission.",
                        "type": "string"
                    },
                    "taxonId": {
                        "description": "The taxonomy id for the sample species.",
                        "type": "integer"
                    },
                    "taxon": {
                        "description": "The taxonomy name for the sample species.",
                        "type": "string"
                    },
                    "releaseDate": {
                        "description": "Date from which this sample is released publicly.",
                        "type": "string",
                        "format": "date"
                    },
                    "disease": {
                        "description": "The disease for the sample species.",
                        "type": "string"
                    },
                    "disease_id": {
                        "description": "The ontology id for the disease sample species.",
                        "type": "string",
                        "graphRestriction": {
                            "ontologies": ["obo:mondo", "obo:efo"],
                            "classes": ["MONDO:0000001", "PATO:0000461"],
                            "includeSelf": true
                        }
                    }
                },
                "required": ["alias", "taxonId"]
            };
            let data = {
                "alias": "MA456",
                "taxonId": 9606,
                "disease": "glioblastoma",
                "disease_id": "MONDO:0018177"
            };
            $("#input").val(JSON.stringify(schema, null, 2));
            $("#input2").val(JSON.stringify(data, null, 2));
        });

        $("#validate").click(function (event) {
            event.preventDefault();
        }).bind("click", function (e) {

            var schema;
            var instance;
            var input = document.getElementById("input");
            var input2 = document.getElementById("input2");
            $("#results").empty();
            $("#valid").hide();
            input.classList.remove("is-invalid");
            input2.classList.remove("is-invalid");

            try {
                schema = JSON.parse($("#input").val());
            } catch (e) {
                $("#failed").show();
                input.classList.add('is-invalid')
                $('#results').append("<p>Unable to parse the JSON in the input fields.</p>");
            }
            try {
                instance = JSON.parse($("#input2").val());
            } catch (e) {
                $("#failed").show();
                input2.classList.add('is-invalid')
                $('#results').append("<p>Unable to parse the JSON in the input fields.</p>");
            }

            if (schema && instance) {
                var submit = {
                    "schema": schema,
                    "data": instance
                };

                $.ajax({
                    type: "POST",
                    url: 'validate',
                    data: JSON.stringify(submit),
                    success: function (response) {

                        if (response.length === 0) {
                            $("#valid").show();
                            $("#failed").hide();
                            $("#results").empty();
                        } else {
                            $("#valid").hide();
                            $("#failed").show();
                            $('#results').append("<ul id='cList'></ul>");
                            error_report(response);
                        }
                    },
                    contentType: 'application/json'
                });
            }
        });
    });
</script>

</html>
