enviPy-bayer/templates/index/index.html

{% extends "framework.html" %}
{% load static %}
{% block content %}
    <!-- TODO rename ids as well as remove pathways if modal is closed!-->
    <div class="modal fade" tabindex="-1" id="foundMatching" role="dialog" aria-labelledby="foundModal"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">&times;</span>
                        <span class="sr-only">Close</span>
                    </button>
                    <h4 class="modal-title" id="newPackMod">Found Pathway in Database</h4>
                </div>
                <div class="modal-body">
                    <p>We found at least one pathway in the database with the given root
                        compound. Do you want to open any of the existing pathways or
                        predict a new one? To open an existing pathway, simply click
                        on the pathway, to predict a new one, click Predict. The predicted
                        pathway might differ from the ones in the database due to the
                        settings used in the prediction.</p>
                    <div id="foundPathways"></div>
                </div>
                <div class="modal-footer">
                    <a id="modal-predict" class="btn btn-primary" href="#">Predict</a>
                    <button type="button" id="cancel-predict" class="btn btn-default" data-dismiss="modal">Cancel
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-8">
            <div class="jumbotron">
                <h1>
                    <img id="image-logo-long" class="img-responsive" alt="enviPath" width="1000ex"
                         src='{% static "/images/logo-long.svg" %}'/>
                </h1>
                <p>enviPath is a database and prediction system for the microbial
                    biotransformation of organic environmental contaminants. The
                    database provides the possibility to store and view experimentally
                    observed biotransformation pathways. The pathway prediction system
                    provides different relative reasoning models to predict likely biotransformation
                    pathways and products. You can try it out below.
                </p>
                <p>
                    <a class="btn" style="background-color:#222222;color:#9d9d9d" role="button" target="_blank"
                       href="https://wiki.envipath.org/index.php/Main_Page">Learn more &gt;&gt;</a>
                </p>
            </div>

        </div>
        <div id="loading"></div>
        <div class="col-xs-4">
            <d-topics-list discourse-url="https://community.envipath.org" per-page="10" category="10"
                           template="complete"></d-topics-list>
        </div>
    </div>
    <div class="row">
        <form id="index-form" action="{{ meta.current_package.url }}/pathway" method="POST">
            {% csrf_token %}
            <div class="input-group" id="index-form-bar">
                <div class="input-group-btn">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                            aria-expanded="false">
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" role="menu">
                        <li>
                            <iframe id="index-form-ketcher" src="{% static '/js/ketcher2/ketcher.html' %}" width="100%"
                                    height="510"></iframe>
                        </li>
                    </ul>
                </div>
                <input type="text" class="form-control" id='index-form-text-input'
                       placeholder="Enter a SMILES to predict a Pathway or type something to search">
                <div class="input-group-btn">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                            aria-haspopup="true"
                            aria-expanded="false" id="action-button">Predict <span class="caret"></span></button>
                    <ul class="dropdown-menu">
                        <li><a id="dropdown-predict">Predict</a></li>
                        <li><a id="dropdown-search">Search</a></li>
                    </ul>
                    <button class="btn" style="background-color:#222222;color:#9d9d9d" type="button" id="run-button">Go!
                    </button>
                </div>
            </div>
            <input type="hidden" id="index-form-smiles" name="smiles" value="smiles">
            <input type="hidden" id="index-form-predict" name="predict" value="predict">
        </form>
    </div>
    <p></p>
    <script language="javascript">
        var currentPackage = "{{ meta.current_package.url }}";

        function goButtonClicked() {
            $(this).prop("disabled", true);

            var action = $('#action-button').text().trim();

            var textSmiles = $('#index-form-text-input').val().trim();

            if (textSmiles === '') {
                return;
            }

            var ketcherSmiles = getKetcher('index-form-ketcher').getSmiles().trim();

            if (action !== 'Search' && ketcherSmiles !== '' && textSmiles !== ketcherSmiles) {
                console.log("Ketcher and TextInput differ!");
            }

            if (action === 'Search') {
                var par = {};
                par['search'] = textSmiles;
                par['mode'] = 'text';
                var queryString = $.param(par, true);
                window.location.href = "/search?" + queryString;
            } else {
                $('#index-form-smiles').val(textSmiles);
                $('#index-form').submit();
            }
        }

        function actionDropdownClicked() {
            var suffix = ' <span class="caret"></span>';
            var dropdownVal = $(this).text();

            if (dropdownVal === 'Search') {
                $("#index-form").attr("action", '/search');
                $("#index-form").attr("method", 'GET');
            } else {
                $("#index-form").attr("action", currentPackage + "/pathway");
            }

            $('#action-button').html(dropdownVal + suffix);
        }

        function ketcherToTextInput() {
            $('#index-form-text-input').val(this.ketcher.getSmiles());
        }

        $(function () {

            $('#index-form').on("keydown", function (e) {
                if (e.key === "Enter") {
                    e.preventDefault();
                    goButtonClicked();
                }
            });

            // Code that should be executed once DOM is ready goes here
            $('#dropdown-predict').on('click', actionDropdownClicked);
            $('#dropdown-search').on('click', actionDropdownClicked);

            $('#run-button').on('click', goButtonClicked);

            // Update Ketcher Width
            var fullWidth = $('#index-form-bar').width();
            $('#index-form-ketcher').width(fullWidth);

            // add a listener that gets triggered whenever the structure in ketcher has changed
            $('#index-form-ketcher').on('load', function () {
                const checkKetcherReady = () => {
                    win = this.contentWindow
                    if (win.ketcher && 'editor' in win.ketcher) {
                        win.ketcher.editor.event.change.handlers.push({
                            once: false,
                            priority: 0,
                            f: ketcherToTextInput,
                            ketcher: win.ketcher
                        });
                    } else {
                        setTimeout(checkKetcherReady, 100);
                    }
                };

                checkKetcherReady();
            });

        });
    </script>
{% endblock content %}