enviPy-bayer/templates/collections/objects_list.html

{% extends "framework.html" %}
{% load static %}
{% block content %}

  {% if object_type != 'package' %}
    <div>
      <div id="load-all-error" style="display: none;">
        <div class="alert alert-danger" role="alert">
          <span
            class="glyphicon glyphicon-exclamation-sign"
            aria-hidden="true"
          ></span>
          <span class="sr-only">Error:</span>
          Getting objects failed!
        </div>
      </div>

      <input
        type="text"
        id="object-search"
        class="form-control"
        placeholder="Search by name"
        style="display: none;"
      />
      <p></p>
    </div>
  {% endif %}

  {% block action_modals %}
    {% if object_type == 'package' %}
      {% include "modals/collections/new_package_modal.html" %}
      {% include "modals/collections/import_package_modal.html" %}
      {% include "modals/collections/import_legacy_package_modal.html" %}
    {% elif object_type == 'compound' %}
      {% include "modals/collections/new_compound_modal.html" %}
    {% elif object_type == 'rule' %}
      {% include "modals/collections/new_rule_modal.html" %}
    {% elif object_type == 'reaction' %}
      {% include "modals/collections/new_reaction_modal.html" %}
    {% elif object_type == 'pathway' %}
      {# {% include "modals/collections/new_pathway_modal.html" %} #}
    {% elif object_type == 'node' %}
      {% include "modals/collections/new_node_modal.html" %}
    {% elif object_type == 'edge' %}
      {% include "modals/collections/new_edge_modal.html" %}
    {% elif object_type == 'scenario' %}
      {% include "modals/collections/new_scenario_modal.html" %}
    {% elif object_type == 'model' %}
      {% include "modals/collections/new_model_modal.html" %}
    {% elif object_type == 'setting' %}
      {#{% include "modals/collections/new_setting_modal.html" %}#}
    {% elif object_type == 'user' %}
      <div></div>
    {% elif object_type == 'group' %}
      {% include "modals/collections/new_group_modal.html" %}
    {% endif %}
  {% endblock action_modals %}

  <div class="panel-group" id="reviewListAccordion">
    <div class="panel panel-default">
      <div
        class="panel-heading"
        id="headingPanel"
        style="font-size:2rem;height: 46px"
      >
        {% if object_type == 'package' %}
          Packages
        {% elif object_type == 'compound' %}
          Compounds
        {% elif object_type == 'structure' %}
          Compound structures
        {% elif object_type == 'rule' %}
          Rules
        {% elif object_type == 'reaction' %}
          Reactions
        {% elif object_type == 'pathway' %}
          Pathways
        {% elif object_type == 'node' %}
          Nodes
        {% elif object_type == 'edge' %}
          Edges
        {% elif object_type == 'scenario' %}
          Scenarios
        {% elif object_type == 'model' %}
          Model
        {% elif object_type == 'setting' %}
          Settings
        {% elif object_type == 'user' %}
          Users
        {% elif object_type == 'group' %}
          Groups
        {% endif %}
        <div
          id="actionsButton"
          style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;display: none;"
          class="dropdown"
        >
          <a
            href="#"
            class="dropdown-toggle"
            data-toggle="dropdown"
            role="button"
            aria-haspopup="true"
            aria-expanded="false"
            ><span class="glyphicon glyphicon-wrench"></span> Actions
            <span class="caret"></span><span style="padding-right:1em"></span
          ></a>
          <ul id="actionsList" class="dropdown-menu">
            {% block actions %}
              {% if object_type == 'package' %}
                {% include "actions/collections/package.html" %}
              {% elif object_type == 'compound' %}
                {% include "actions/collections/compound.html" %}
              {% elif object_type == 'structure' %}
                {% include "actions/collections/compound_structure.html" %}
              {% elif object_type == 'rule' %}
                {% include "actions/collections/rule.html" %}
              {% elif object_type == 'reaction' %}
                {% include "actions/collections/reaction.html" %}
              {% elif object_type == 'setting' %}
                {% include "actions/collections/setting.html" %}
              {% elif object_type == 'scenario' %}
                {% include "actions/collections/scenario.html" %}
              {% elif object_type == 'model' %}
                {% include "actions/collections/model.html" %}
              {% elif object_type == 'pathway' %}
                {% include "actions/collections/pathway.html" %}
              {% elif object_type == 'node' %}
                {% include "actions/collections/node.html" %}
              {% elif object_type == 'edge' %}
                {% include "actions/collections/edge.html" %}
              {% elif object_type == 'group' %}
                {% include "actions/collections/group.html" %}
              {% endif %}
            {% endblock %}
          </ul>
        </div>
      </div>
      <div class="panel-body">
        <!-- Set Text above links -->
        {% if object_type == 'package' %}
          <p>
            A package contains pathways, rules, etc. and can reflect specific
            experimental conditions.
            <a
              target="_blank"
              href="https://wiki.envipath.org/index.php/packages"
              role="button"
              >Learn more &gt;&gt;</a
            >
          </p>
        {% elif object_type == 'compound' %}
          <p>
            A compound stores the structure of a molecule and can include
            meta-information.
            <a
              target="_blank"
              href="https://wiki.envipath.org/index.php/compounds"
              role="button"
              >Learn more &gt;&gt;</a
            >
          </p>
        {% elif object_type == 'structure' %}
          <p>
            The structures stored in this compound
            <a
              target="_blank"
              href="https://wiki.envipath.org/index.php/compounds"
              role="button"
              >Learn more &gt;&gt;</a
            >
          </p>
        {% elif object_type == 'rule' %}
          <p>
            A rule describes a biotransformation reaction template that is
            defined as SMIRKS.
            <a
              target="_blank"
              href="https://wiki.envipath.org/index.php/Rules"
              role="button"
              >Learn more &gt;&gt;</a
            >
          </p>
        {% elif object_type == 'reaction' %}
          <p>
            A reaction is a specific biotransformation from educt compounds to
            product compounds.
            <a
              target="_blank"
              href="https://wiki.envipath.org/index.php/reactions"
              role="button"
              >Learn more &gt;&gt;</a
            >
          </p>
        {% elif object_type == 'pathway' %}
          <p>
            A pathway displays the (predicted) biodegradation of a compound as
            graph.
            <a
              target="_blank"
              href="https://wiki.envipath.org/index.php/pathways"
              role="button"
              >Learn more &gt;&gt;</a
            >
          </p>
        {% elif object_type == 'node' %}
          <p>
            Nodes represent the (predicted) compounds in a graph.
            <a
              target="_blank"
              href="https://wiki.envipath.org/index.php/nodes"
              role="button"
              >Learn more &gt;&gt;</a
            >
          </p>
        {% elif object_type == 'edge' %}
          <p>
            Edges represent the links between Nodes in a graph
            <a
              target="_blank"
              href="https://wiki.envipath.org/index.php/edges"
              role="button"
              >Learn more &gt;&gt;</a
            >
          </p>
        {% elif object_type == 'scenario' %}
          <p>
            A scenario contains meta-information that can be attached to other
            data (compounds, rules, ..).
            <a
              target="_blank"
              href="https://wiki.envipath.org/index.php/scenarios"
              role="button"
              >Learn more &gt;&gt;</a
            >
          </p>
        {% elif object_type == 'model' %}
          <p>
            A model applies machine learning to limit the combinatorial
            explosion.
            <a
              target="_blank"
              href="https://wiki.envipath.org/index.php/relative_reasoning"
              role="button"
              >Learn more &gt;&gt;</a
            >
          </p>
        {% elif object_type == 'setting' %}
          <p>
            A setting includes configuration parameters for pathway predictions.
            <a
              target="_blank"
              href="https://wiki.envipath.org/index.php/settings"
              role="button"
              >Learn more &gt;&gt;</a
            >
          </p>
        {% elif object_type == 'user' %}
          <p>
            Register now to create own packages and to submit and manage your
            data.
            <a
              target="_blank"
              href="https://wiki.envipath.org/index.php/users"
              role="button"
              >Learn more &gt;&gt;</a
            >
          </p>
        {% elif object_type == 'group' %}
          <p>
            Users can team up in groups to share packages.
            <a
              target="_blank"
              href="https://wiki.envipath.org/index.php/groups"
              role="button"
              >Learn more &gt;&gt;</a
            >
          </p>
        {% endif %}

        <!-- If theres nothing to show extend the text above -->
        {% if reviewed_objects and unreviewed_objects %}
          {% if reviewed_objects|length == 0 and unreviewed_objects|length == 0 %}
            <p>
              Nothing found. There are two possible reasons: <br /><br />1.
              There is no content yet.<br />2. You have no reading
              permissions.<br /><br />Please be sure you have at least reading
              permissions.
            </p>
          {% endif %}
        {% endif %}
      </div>
      {% if reviewed_objects %}
        {% if reviewed_objects|length > 0 %}
          <div
            class="panel panel-default panel-heading list-group-item"
            style="background-color:silver"
          >
            <h4 class="panel-title">
              <a
                id="ReviewedLink"
                data-toggle="collapse"
                data-parent="#reviewListAccordion"
                href="#Reviewed"
                >Reviewed</a
              >
            </h4>
          </div>
          <div id="Reviewed" class="panel-collapse in collapse">
            <div class="panel-body list-group-item" id="ReviewedContent">
              {% if object_type == 'package' %}
                {% for obj in reviewed_objects %}
                  <a class="list-group-item" href="{{ obj.url }}"
                    >{{ obj.name|safe }}
                    <span
                      class="glyphicon glyphicon-star"
                      aria-hidden="true"
                      style="float:right"
                      data-toggle="tooltip"
                      data-placement="top"
                      title=""
                      data-original-title="Reviewed"
                    >
                    </span>
                  </a>
                {% endfor %}
              {% else %}
                {% for obj in reviewed_objects|slice:":50" %}
                  <a class="list-group-item" href="{{ obj.url }}"
                    >{{ obj.name|safe }}{# <i>({{ obj.package.name }})</i> #}
                    <span
                      class="glyphicon glyphicon-star"
                      aria-hidden="true"
                      style="float:right"
                      data-toggle="tooltip"
                      data-placement="top"
                      title=""
                      data-original-title="Reviewed"
                    >
                    </span>
                  </a>
                {% endfor %}
              {% endif %}
            </div>
          </div>
        {% endif %}
      {% endif %}
      {% if unreviewed_objects %}
        <div
          class="panel panel-default panel-heading list-group-item"
          style="background-color:silver"
        >
          <h4 class="panel-title">
            <a
              id="UnreviewedLink"
              data-toggle="collapse"
              data-parent="#unReviewListAccordion"
              href="#Unreviewed"
              >Unreviewed</a
            >
          </h4>
        </div>
        <div
          id="Unreviewed"
          class="panel-collapse {% if reviewed_objects|length == 0 or object_type == 'package' %}in{% endif %} collapse"
        >
          <div class="panel-body list-group-item" id="UnreviewedContent">
            {% if object_type == 'package' %}
              {% for obj in unreviewed_objects %}
                <a class="list-group-item" href="{{ obj.url }}"
                  >{{ obj.name|safe }}</a
                >
              {% endfor %}
            {% else %}
              {% for obj in unreviewed_objects|slice:":50" %}
                <a class="list-group-item" href="{{ obj.url }}"
                  >{{ obj.name|safe }}</a
                >
              {% endfor %}
            {% endif %}
          </div>
        </div>
      {% endif %}
      {% if objects %}
        <!-- Unreviewable objects such as User / Group / Setting -->
        <ul class="list-group">
          {% for obj in objects %}
            {% if object_type == 'user' %}
              <a class="list-group-item" href="{{ obj.url }}"
                >{{ obj.username|safe }}</a
              >
            {% else %}
              <a class="list-group-item" href="{{ obj.url }}"
                >{{ obj.name|safe }}</a
              >
            {% endif %}
          {% endfor %}
        </ul>
      {% endif %}
    </div>
    <style>
      .spinner-widget {
        position: fixed; /* stays in place on scroll */
        bottom: 20px; /* distance from bottom */
        right: 20px; /* distance from right */
        z-index: 9999; /* above most elements */
        width: 60px; /* adjust to gif size */
        height: 60px;
      }

      .spinner-widget img {
        width: 100%;
        height: auto;
      }
    </style>

    <div id="load-all-loading" class="spinner-widget" style="display: none">
      <img
        id="loading-gif"
        src="{% static '/images/wait.gif' %}"
        alt="Loading..."
      />
    </div>
  </div>
  {# prettier-ignore-start #}
    <script>
        $(function () {

            $('#object-search').show();

            {% if object_type != 'package' and object_type != 'user' and object_type != 'group' %}
                {% if reviewed_objects|length > 50 or unreviewed_objects|length > 50 %}
                    $('#load-all-loading').show()

                    setTimeout(function () {
                        $('#load-all-error').hide();

                        $.getJSON('?all=true', function (resp) {
                            $('#ReviewedContent').empty();
                            $('#UnreviewedContent').empty();

                            for (o in resp.objects) {
                                obj = resp.objects[o];
                                if (obj.reviewed) {
                                    $('#ReviewedContent').append('<a class="list-group-item" href="' + obj.url + '">' + obj.name + ' <span class="glyphicon glyphicon-star" aria-hidden="true" style="float:right" data-toggle="tooltip" data-placement="top" title="" data-original-title="Reviewed"></span></a>');
                                } else {
                                    $('#UnreviewedContent').append('<a class="list-group-item" href="' + obj.url + '">' + obj.name + '</a>');
                                }
                            }

                            $('#load-all-loading').hide();
                            $('#load-remaining').hide();
                        }).fail(function (resp) {
                            $('#load-all-loading').hide();
                            $('#load-all-error').show();
                        });

                    }, 2500);
                {% endif %}
            {% endif %}

            $('#modal-form-delete-submit').on('click', function (e) {
                e.preventDefault();
                $('#modal-form-delete').submit();
            });

            $('#object-search').on('keyup', function () {
                let query = $(this).val().toLowerCase();
                $('a.list-group-item').each(function () {
                    let text = $(this).text().toLowerCase();
                    $(this).toggle(text.indexOf(query) !== -1);
                });
            });

        });
    </script>
    {# prettier-ignore-end #}
{% endblock content %}