Template source: interaction/interactionselection.html

{% extends "common/selection.html" %}
{% load static %}

{% block addon_css %}
    <style type="text/css">
      ul.structure_select {
        max-height: 50vh;
        overflow: scroll;
      }
    </style>
{% endblock %}
{% block addon_js %}
    <script>
        $(document).ready(function() {
            $(function(){
              // bind change event to select
              $('#preloaded_xtals').on('change', function(){
                selectedPDBAction($(this).val());
              });
            });
        });

        function selectedPDBAction(pdb) {
          var url = window.location.href;

          if (url.substr(-1) == '#') url = url.substr(0, url.length - 2);
          if (url.substr(-1) == '/') url = url.substr(0, url.length - 2);

          url = url.split('/');
          url.pop();
          url = url.join('/') + "/interaction/" + pdb; // set selected PDB
          window.location = url; // redirect

          toggleButtonClass('selection-button');
          $("#selection-targets").html("<p><span class='selection-heading-text'>Selected targets</span></p>" + pdb);
        }

        function submitupload() {
            $("#errormsg").remove();
            var pdbid = $('#form').find('input#id_pdbname').val() ;
            var filename = $('input[type=file]').val().split('\\').pop();
              if (pdbid) {
                $("#selection-targets").html("<p><span class='selection-heading-text'>Selected targets</span></p>PDB code: "+pdbid);
                document.getElementById("form").submit();
              } else if (filename) {
                $("#selection-targets").html("<p><span class='selection-heading-text'>Selected targets</span></p>File: "+filename);
                document.getElementById("form").submit();
              } else {
                $("#form").parent('div').parent('div').parent('div').after('<div id="errormsg" class="col-md-12 panel panel-primary">' +
                    '<div class="panel-body">' +
                    'Please make a selection' +
                    '</div>' +
                    '</div>');
                toggleButtonClass('selection-button');
              }
        };
    </script>
    <script src="{% static 'home/js/selection.js' %}"></script>

{% endblock %}

{% block middle_column %}


            <div class="col-md-12 panel panel-primary">
                <div class="panel-body">
                    <h4>Structure select</h4>
                    <div>
                      <div class="dropdown" id='preloaded_xtals'>
                        <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Select from list<span class="caret"></span></button>
                        <ul class="dropdown-menu" role="menu">
                          {% for group in structure_groups %}
                            <li class="dropdown-submenu">
                              <a tabindex="-1" href="#">PDB-code: {{ group }}xxx</a>
                              <ul class="dropdown-menu structure_select">
                                {% for structure in structures %}
                                  {%  if structure.structure_ligand_pair__structure__pdb_code__index|first == group %}
                                    <li><a href="#" onClick="selectedPDBAction('{{structure.structure_ligand_pair__structure__pdb_code__index}}');">{{structure.structure_ligand_pair__structure__pdb_code__index}} ({{structure.structure_ligand_pair__structure__protein_conformation__protein__parent__entry_name}})</a></li>
                                  {% endif %}
                                {% endfor %}
                              </ul>
                            </li>
                          {% endfor %}
                        </ul>
                      </div>
                    </div>
                </div>
            </div>

{% comment %}
            {# DEPRECATED - see multi-level dropdown above #}
            <div class="col-md-12 panel panel-primary">
                <div class="panel-body">
                    <h4>Run a new calculation</h4>
                    <div>
                        Enter a PDB code to analyse:
                            <form action="calculate" id="form" method="post" enctype="multipart/form-data">
                        {% csrf_token %}
                            <label for="pdbname">PDB code</label>
                            {{ form.pdbname }} <br> or
                            <p>{{ form.file.label_tag }}  </p> {{ form.file }}
                        </form>
                    </div>
                </div>
            </div>
{% endcomment %}

{% endblock %}