forked from enviPath/enviPy
Merge branch 'develop' into enhancement/licenses
This commit is contained in:
@ -1,3 +1,4 @@
|
||||
|
||||
<div class="modal fade" tabindex="-1" id="new_model_modal" role="dialog" aria-labelledby="new_model_modal"
|
||||
aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg">
|
||||
@ -47,14 +48,14 @@
|
||||
<option disabled>Reviewed Packages</option>
|
||||
{% for obj in meta.readable_packages %}
|
||||
{% if obj.reviewed %}
|
||||
<option value="{{ obj.url }}">{{ obj.name }}</option>
|
||||
<option value="{{ obj.url }}">{{ obj.name|safe }}</option>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
<option disabled>Unreviewed Packages</option>
|
||||
{% for obj in meta.readable_packages %}
|
||||
{% if not obj.reviewed %}
|
||||
<option value="{{ obj.url }}">{{ obj.name }}</option>
|
||||
<option value="{{ obj.url }}">{{ obj.name|safe }}</option>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</select>
|
||||
@ -68,14 +69,14 @@
|
||||
<option disabled>Reviewed Packages</option>
|
||||
{% for obj in meta.readable_packages %}
|
||||
{% if obj.reviewed %}
|
||||
<option value="{{ obj.url }}">{{ obj.name }}</option>
|
||||
<option value="{{ obj.url }}">{{ obj.name|safe }}</option>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
<option disabled>Unreviewed Packages</option>
|
||||
{% for obj in meta.readable_packages %}
|
||||
{% if not obj.reviewed %}
|
||||
<option value="{{ obj.url }}">{{ obj.name }}</option>
|
||||
<option value="{{ obj.url }}">{{ obj.name|safe }}</option>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</select>
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
|
||||
{% load static %}
|
||||
<div class="modal fade" tabindex="-1" id="new_pathway_modal" role="dialog" aria-labelledby="new_pathway_modal"
|
||||
aria-hidden="true" style="overflow-y: auto;">
|
||||
@ -111,7 +112,7 @@
|
||||
|
||||
<select id="settingSelect" name="settingSelect" class="form-control">
|
||||
{% for setting in available_settings %}
|
||||
<option value="{{ setting.id }}">{{ setting.name }}</option>
|
||||
<option value="{{ setting.id }}">{{ setting.name|safe }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<p></p>
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
|
||||
{% load static %}
|
||||
|
||||
<div id="new_prediction_setting_modal" class="modal" tabindex="-1">
|
||||
@ -40,14 +41,14 @@
|
||||
<option disabled>Reviewed Packages</option>
|
||||
{% for obj in meta.readable_packages %}
|
||||
{% if obj.reviewed %}
|
||||
<option value="{{ obj.url }}">{{ obj.name }}</option>
|
||||
<option value="{{ obj.url }}">{{ obj.name|safe }}</option>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
<option disabled>Unreviewed Packages</option>
|
||||
{% for obj in meta.readable_packages %}
|
||||
{% if not obj.reviewed %}
|
||||
<option value="{{ obj.url }}">{{ obj.name }}</option>
|
||||
<option value="{{ obj.url }}">{{ obj.name|safe }}</option>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</select>
|
||||
@ -57,7 +58,7 @@
|
||||
<select id="model-based-prediction-setting-model" name="model-based-prediction-setting-model" class="form-control" data-width='100%'>
|
||||
<option disabled selected>Select the model</option>
|
||||
{% for m in models %}
|
||||
<option value="{{ m.url }}">{{ m.name }}</option>
|
||||
<option value="{{ m.url }}">{{ m.name|safe }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<label for="model-based-prediction-setting-threshold">Threshold</label>
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
|
||||
{% load static %}
|
||||
<div class="modal fade bs-modal-lg" id="add_pathway_edge_modal" tabindex="-1" aria-labelledby="add_pathway_edge_modal"
|
||||
aria-modal="true"
|
||||
@ -36,7 +37,7 @@
|
||||
<select id="add_pathway_edge_substrates" name="edge-substrates"
|
||||
data-actions-box='true' class="form-control" multiple data-width='100%'>
|
||||
{% for n in pathway.nodes %}
|
||||
<option data-smiles="{{ n.default_node_label.smiles }}" value="{{ n.url }}">{{ n.default_node_label.name }}</option>
|
||||
<option data-smiles="{{ n.default_node_label.smiles }}" value="{{ n.url }}">{{ n.default_node_label.name|safe }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
@ -47,7 +48,7 @@
|
||||
<select id="add_pathway_edge_products" name="edge-products"
|
||||
data-actions-box='true' class="form-control" multiple data-width='100%'>
|
||||
{% for n in pathway.nodes %}
|
||||
<option data-smiles="{{ n.default_node_label.smiles }}" value="{{ n.url }}">{{ n.default_node_label.name }}</option>
|
||||
<option data-smiles="{{ n.default_node_label.smiles }}" value="{{ n.url }}">{{ n.default_node_label.name|safe }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
|
||||
{% load static %}
|
||||
<!-- Delete Edge -->
|
||||
<div id="delete_pathway_edge_modal" class="modal" tabindex="-1">
|
||||
@ -19,7 +20,7 @@
|
||||
data-actions-box='true' class="form-control" data-width='100%'>
|
||||
<option value="" disabled selected>Select Reaction to delete</option>
|
||||
{% for e in pathway.edges %}
|
||||
<option value="{{ e.url }}">{{ e.edge_label.name }}</option>
|
||||
<option value="{{ e.url }}">{{ e.edge_label.name|safe }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<input type="hidden" id="hidden" name="hidden" value="delete"/>
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
{% load static %}
|
||||
|
||||
<!-- Delete Node -->
|
||||
<div id="delete_pathway_node_modal" class="modal" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
@ -19,7 +20,7 @@
|
||||
data-actions-box='true' class="form-control" data-width='100%'>
|
||||
<option value="" disabled selected>Select Compound to delete</option>
|
||||
{% for n in pathway.nodes %}
|
||||
<option value="{{ n.url }}">{{ n.default_node_label.name }}</option>
|
||||
<option value="{{ n.url }}">{{ n.default_node_label.name|safe }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<input type="hidden" id="hidden" name="hidden" value="delete"/>
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
|
||||
{% load static %}
|
||||
<!-- Edit Compound -->
|
||||
<div id="edit_compound_modal" class="modal" tabindex="-1">
|
||||
@ -15,12 +16,12 @@
|
||||
{% csrf_token %}
|
||||
<p>
|
||||
<label for="compound-name">Name</label>
|
||||
<input id="compound-name" class="form-control" name="compound-name" value="{{ compound.name}}">
|
||||
<input id="compound-name" class="form-control" name="compound-name" value="{{ compound.name|safe}}">
|
||||
</p>
|
||||
<p>
|
||||
<label for="compound-description">Description</label>
|
||||
<input id="compound-description" type="text" class="form-control"
|
||||
value="{{ compound.description }}"
|
||||
value="{{ compound.description|safe }}"
|
||||
name="compound-description">
|
||||
</p>
|
||||
</form>
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
|
||||
{% load static %}
|
||||
<!-- Edit Compound -->
|
||||
<div id="edit_compound_structure_modal" class="modal" tabindex="-1">
|
||||
@ -15,12 +16,12 @@
|
||||
{% csrf_token %}
|
||||
<p>
|
||||
<label for="compound-structure-name">Name</label>
|
||||
<input id="compound-structure-name" class="form-control" name="compound-structure-name" value="{{ compound_structure.name }}">
|
||||
<input id="compound-structure-name" class="form-control" name="compound-structure-name" value="{{ compound_structure.name|safe }}">
|
||||
</p>
|
||||
<p>
|
||||
<label for="compound-structure-description">Description</label>
|
||||
<input id="compound-structure-description" type="text" class="form-control"
|
||||
value="{{ compound_structure.description }}" name="compound-structure-description">
|
||||
value="{{ compound_structure.description|safe }}" name="compound-structure-description">
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
|
||||
{% load static %}
|
||||
<!-- Edit Package Permission -->
|
||||
<div id="edit_group_member_modal" class="modal" tabindex="-1">
|
||||
@ -39,7 +40,7 @@
|
||||
{% endfor %}
|
||||
<option disabled>Groups</option>
|
||||
{% for g in groups %}
|
||||
<option value="{{ g.url }}">{{ g.name }}</option>
|
||||
<option value="{{ g.url }}">{{ g.name|safe }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<input type="hidden" name="action" value="add">
|
||||
@ -81,7 +82,7 @@
|
||||
accept-charset="UTF-8" action="" data-remote="true" method="post">
|
||||
{% csrf_token %}
|
||||
<div class="col-xs-8">
|
||||
{{ g.name }}
|
||||
{{ g.name|safe }}
|
||||
<input type="hidden" name="member" value="{{ g.url }}"/>
|
||||
<input type="hidden" name="action" value="remove">
|
||||
</div>
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
|
||||
{% load static %}
|
||||
<!-- Edit Model -->
|
||||
<div id="edit_model_modal" class="modal" tabindex="-1">
|
||||
@ -16,12 +17,12 @@
|
||||
<p>
|
||||
<label for="model-name">Name</label>
|
||||
<input id="model-name" type="text" class="form-control" name="model-name"
|
||||
value="{{ model.name }}">
|
||||
value="{{ model.name|safe }}">
|
||||
</p>
|
||||
<p>
|
||||
<label for="model-description">Description</label>
|
||||
<input id="model-description" type="text" class="form-control" name="model-description"
|
||||
value="{{ model.description }}">
|
||||
value="{{ model.description|safe }}">
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
|
||||
{% load static %}
|
||||
<!-- Edit Node -->
|
||||
<div id="edit_node_modal" class="modal" tabindex="-1">
|
||||
@ -15,12 +16,12 @@
|
||||
{% csrf_token %}
|
||||
<p>
|
||||
<label for="node-name">Name</label>
|
||||
<input id="node-name" class="form-control" name="node-name" value="{{ node.name}}">
|
||||
<input id="node-name" class="form-control" name="node-name" value="{{ node.name|safe}}">
|
||||
</p>
|
||||
<p>
|
||||
<label for="node-description">Description</label>
|
||||
<input id="node-description" type="text" class="form-control"
|
||||
value="{{ node.description }}"
|
||||
value="{{ node.description|safe }}"
|
||||
name="node-description">
|
||||
</p>
|
||||
</form>
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
|
||||
{% load static %}
|
||||
<!-- Edit Package -->
|
||||
<div id="edit_package_modal" class="modal" tabindex="-1">
|
||||
@ -15,12 +16,12 @@
|
||||
{% csrf_token %}
|
||||
<p>
|
||||
<label for="package-name">Name</label>
|
||||
<input id="package-name" class="form-control" name="package-name" value="{{ package.name}}">
|
||||
<input id="package-name" class="form-control" name="package-name" value="{{ package.name|safe}}">
|
||||
</p>
|
||||
<p>
|
||||
<label for="package-description">Description</label>
|
||||
<input id="package-description" type="text" class="form-control"
|
||||
value="{{ package.description }}"
|
||||
value="{{ package.description|safe }}"
|
||||
name="package-description">
|
||||
</p>
|
||||
</form>
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
|
||||
{% load static %}
|
||||
<!-- Edit Package Permission -->
|
||||
<div id="edit_package_permissions_modal" class="modal" tabindex="-1">
|
||||
@ -46,7 +47,7 @@
|
||||
{% endfor %}
|
||||
<option disabled>Groups</option>
|
||||
{% for g in groups %}
|
||||
<option value="{{ g.url }}">{{ g.name }}</option>
|
||||
<option value="{{ g.url }}">{{ g.name|safe }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
@ -100,7 +101,7 @@
|
||||
accept-charset="UTF-8" action="" data-remote="true" method="post">
|
||||
{% csrf_token %}
|
||||
<div class="col-xs-4">
|
||||
{{ gp.group.name }}
|
||||
{{ gp.group.name|safe }}
|
||||
<input type="hidden" name="grantee" value="{{ gp.group.url }}"/>
|
||||
</div>
|
||||
<div class="col-xs-2">
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
|
||||
{% load static %}
|
||||
<!-- Edit Pathway -->
|
||||
<div id="edit_pathway_modal" class="modal" tabindex="-1">
|
||||
@ -15,12 +16,12 @@
|
||||
{% csrf_token %}
|
||||
<p>
|
||||
<label for="pathway-name">Name</label>
|
||||
<input id="pathway-name" class="form-control" name="pathway-name" value="{{ pathway.name }}">
|
||||
<input id="pathway-name" class="form-control" name="pathway-name" value="{{ pathway.name|safe }}">
|
||||
</p>
|
||||
<p>
|
||||
<label for="pathway-description">Description</label>
|
||||
<textarea id="pathway-description" type="text" class="form-control" name="pathway-description"
|
||||
rows="10">{{ pathway.description }}</textarea>
|
||||
rows="10">{{ pathway.description|safe }}</textarea>
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@ -32,7 +32,7 @@
|
||||
<td colspan="2">
|
||||
<select id="model" name="model" class="form-control" data-width='100%'>
|
||||
{% for m in models %}
|
||||
<option value="{{ m.id }}" {% if user.prediction_settings.model.url == m.url %}selected{% endif %}>{{ m.name }}</option>
|
||||
<option value="{{ m.id }}" {% if user.prediction_settings.model.url == m.url %}selected{% endif %}>{{ m.name|safe }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</td>
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
|
||||
{% load static %}
|
||||
<!-- Edit Reaction -->
|
||||
<div id="edit_reaction_modal" class="modal" tabindex="-1">
|
||||
@ -14,12 +15,12 @@
|
||||
{% csrf_token %}
|
||||
<p>
|
||||
<label for="reaction-name">Name</label>
|
||||
<input id="reaction-name" class="form-control" name="reaction-name" value="{{ reaction.name }}">
|
||||
<input id="reaction-name" class="form-control" name="reaction-name" value="{{ reaction.name|safe }}">
|
||||
</p>
|
||||
<p>
|
||||
<label for="reaction-description">Description</label>
|
||||
<input id="reaction-description" type="text" class="form-control"
|
||||
value="{{ reaction.description }}" name="reaction-description">
|
||||
value="{{ reaction.description|safe }}" name="reaction-description">
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
|
||||
{% load static %}
|
||||
<!-- Edit Rule -->
|
||||
<div id="edit_rule_modal" class="modal" tabindex="-1">
|
||||
@ -14,12 +15,12 @@
|
||||
{% csrf_token %}
|
||||
<p>
|
||||
<label for="rule-name">Name</label>
|
||||
<input id="rule-name" class="form-control" name="rule-name" value="{{ rule.name }}">
|
||||
<input id="rule-name" class="form-control" name="rule-name" value="{{ rule.name|safe }}">
|
||||
</p>
|
||||
<p>
|
||||
<label for="rule-description">Description</label>
|
||||
<input id="rule-description" type="text" class="form-control"
|
||||
value="{{ rule.description }}" name="rule-description">
|
||||
value="{{ rule.description|safe }}" name="rule-description">
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
|
||||
{% load static %}
|
||||
<!-- Edit User -->
|
||||
<div id="edit_user_modal" class="modal" tabindex="-1">
|
||||
@ -18,7 +19,7 @@
|
||||
<select id="default-package" name="default-package" class="form-control" data-width='100%'>
|
||||
<option disabled>Select a Package</option>
|
||||
{% for p in meta.writeable_packages %}
|
||||
<option value="{{ p.url }}" {% if p.id == meta.user.default_package.id %}selected{% endif %}>{{ p.name }}</option>
|
||||
<option value="{{ p.url }}" {% if p.id == meta.user.default_package.id %}selected{% endif %}>{{ p.name|safe }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</p>
|
||||
@ -27,7 +28,7 @@
|
||||
<select id="default-group" name="default-group" class="form-control" data-width='100%'>
|
||||
<option disabled>Select a Group</option>
|
||||
{% for g in meta.available_groups %}
|
||||
<option value="{{ g.url }}" {% if g.id == meta.user.default_group.id %}selected{% endif %}>{{ g.name }}</option>
|
||||
<option value="{{ g.url }}" {% if g.id == meta.user.default_group.id %}selected{% endif %}>{{ g.name|safe }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</p>
|
||||
@ -36,7 +37,7 @@
|
||||
<select id="default-prediction-setting" name="default-prediction-setting" class="form-control" data-width='100%'>
|
||||
<option disabled>Select a Setting</option>
|
||||
{% for s in meta.available_settings %}
|
||||
<option value="{{ s.url }}" {% if s.id == meta.user.default_setting.id %}selected{% endif %}>{{ s.name }}</option>
|
||||
<option value="{{ s.url }}" {% if s.id == meta.user.default_setting.id %}selected{% endif %}>{{ s.name|safe }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</p>
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
|
||||
<div class="modal fade" tabindex="-1" id="evaluate_model_modal" role="dialog" aria-labelledby="evaluate_model_modal"
|
||||
aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg">
|
||||
@ -24,14 +25,14 @@
|
||||
<option disabled>Reviewed Packages</option>
|
||||
{% for obj in meta.readable_packages %}
|
||||
{% if obj.reviewed %}
|
||||
<option value="{{ obj.url }}">{{ obj.name }}</option>
|
||||
<option value="{{ obj.url }}">{{ obj.name|safe }}</option>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
<option disabled>Unreviewed Packages</option>
|
||||
{% for obj in meta.readable_packages %}
|
||||
{% if not obj.reviewed %}
|
||||
<option value="{{ obj.url }}">{{ obj.name }}</option>
|
||||
<option value="{{ obj.url }}">{{ obj.name|safe }}</option>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</select>
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
|
||||
{% load static %}
|
||||
<!-- Copy Object -->
|
||||
<div id="generic_copy_object_modal" class="modal" tabindex="-1">
|
||||
@ -18,7 +19,7 @@
|
||||
data-width='100%'>
|
||||
<option disabled selected>Select Target Package</option>
|
||||
{% for p in meta.writeable_packages %}
|
||||
<option value="{{ p.url }}">{{ p.name }}</option>`
|
||||
<option value="{{ p.url }}">{{ p.name|safe }}</option>`
|
||||
{% endfor %}
|
||||
</select>
|
||||
<input type="hidden" name="hidden" value="copy">
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
|
||||
{% load static %}
|
||||
|
||||
<style>
|
||||
@ -55,7 +56,7 @@
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
<h4 class="modal-title">Set Aliases for {{ current_object.name }}</h4>
|
||||
<h4 class="modal-title">Set Aliases for {{ current_object.name|safe }}</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form id="set_aliases_modal_form" accept-charset="UTF-8" action="{{ current_object.url }}"
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
|
||||
{% load static %}
|
||||
<!-- Delete Object -->
|
||||
<div id="generic_set_external_reference_modal" class="modal" tabindex="-1">
|
||||
@ -23,7 +24,7 @@
|
||||
{% if entity == object_type %}
|
||||
{% for db in databases %}
|
||||
<option id="db-select-{{ db.database.pk }}" data-input-placeholder="{{ db.placeholder }}"
|
||||
value="{{ db.database.id }}">{{ db.database.name }}</option>`
|
||||
value="{{ db.database.id }}">{{ db.database.name|safe }}</option>`
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
|
||||
{% load static %}
|
||||
<div class="modal fade bs-modal-lg" id="set_scenario_modal" tabindex="-1" aria-labelledby="set_scenario_modal"
|
||||
aria-modal="true" role="dialog">
|
||||
@ -7,7 +8,7 @@
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
<h4 class="modal-title">Set Scenarios for {{ current_object.name }}</h4>
|
||||
<h4 class="modal-title">Set Scenarios for {{ current_object.name|safe }}</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div id="loading_scenario_div" class="text-center"></div>
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
|
||||
<div class="modal fade"
|
||||
tabindex="-1"
|
||||
id="manage_api_token_modal"
|
||||
@ -41,7 +42,7 @@
|
||||
<div class="input-group">
|
||||
<input type="hidden" name="hidden" value="delete">
|
||||
<input type="hidden" name="token-id" value="{{ t.pk }}">
|
||||
<input type="text" class="form-control" value="{{ t.name }}" disabled>
|
||||
<input type="text" class="form-control" value="{{ t.name|safe }}" disabled>
|
||||
<span class="input-group-btn">
|
||||
<button type="submit" class="btn btn-danger">Delete</button>
|
||||
</span>
|
||||
|
||||
@ -56,7 +56,7 @@
|
||||
<option disabled>Select a Setting</option>
|
||||
{% for s in meta.available_settings %}
|
||||
<option value="{{ s.url }}"{% if s.id == meta.user.default_setting.id %}selected{% endif %}>
|
||||
{{ s.name }}{% if s.id == meta.user.default_setting.id %} <i>(User default)</i>{% endif %}
|
||||
{{ s.name|safe }}{% if s.id == meta.user.default_setting.id %} <i>(User default)</i>{% endif %}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
|
||||
535
templates/modals/search_modal.html
Normal file
535
templates/modals/search_modal.html
Normal file
@ -0,0 +1,535 @@
|
||||
{% load static %}
|
||||
<dialog id="search_modal" class="modal @max-sm:modal-top justify-center">
|
||||
<div class="modal-box w-lvw sm:w-[85vw] sm:max-w-5xl h-full sm:h-8/12 p-1" >
|
||||
|
||||
<!-- Search Input and Mode Selector -->
|
||||
<div class="form-control mb-4 flex-shrink-0 w-full">
|
||||
<div class="join w-full m-0 p-3 items-center">
|
||||
<label class="input join-item input-ghost grow">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search-icon lucide-search"><path d="m21 21-4.34-4.34"/><circle cx="11" cy="11" r="8"/></svg>
|
||||
<input type="text" autofocus
|
||||
id="modal_searchbar"
|
||||
placeholder="Benfuracarb"
|
||||
class="grow" aria-label="Search" />
|
||||
</label>
|
||||
|
||||
<!-- Mode Dropdown -->
|
||||
<div>
|
||||
<button type="button"
|
||||
tabindex="0"
|
||||
id="modal_mode_button"
|
||||
popovertarget="search_dropdown_menu" style="anchor-name:--anchor-1"
|
||||
class="btn join-item btn-ghost">
|
||||
Text
|
||||
<svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
|
||||
</svg>
|
||||
</button>
|
||||
<ul tabindex="0"" class="dropdown dropdown-end menu bg-base-200 rounded-box z-[100] w-64 p-2 shadow-lg" popover id="search_dropdown_menu" style="position-anchor:--anchor-1">
|
||||
<li class="menu-title">Text</li>
|
||||
<li>
|
||||
<a id="modal_dropdown_text"
|
||||
class="tooltip tooltip-left"
|
||||
data-tip="Search on object names and descriptions">
|
||||
Text
|
||||
</a>
|
||||
</li>
|
||||
<li class="menu-title">SMILES</li>
|
||||
<li>
|
||||
<a id="modal_dropdown_smiles_default"
|
||||
class="tooltip tooltip-left"
|
||||
data-tip="Ignores stereochemistry and charge">
|
||||
Default
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a id="modal_dropdown_smiles_canonical"
|
||||
class="tooltip tooltip-left"
|
||||
data-tip="Ignores stereochemistry, preserves charge">
|
||||
Canonical
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a id="modal_dropdown_smiles_exact"
|
||||
class="tooltip tooltip-left"
|
||||
data-tip="Exact match for stereochemistry and charge">
|
||||
Exact
|
||||
</a>
|
||||
</li>
|
||||
<li class="menu-title">InChI</li>
|
||||
<li>
|
||||
<a id="modal_dropdown_inchikey"
|
||||
class="tooltip tooltip-left"
|
||||
data-tip="Search by InChIKey">
|
||||
InChIKey
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<button type="button" id="modal_search_button" class="btn btn-xs btn-ghost join-item">
|
||||
<kbd class="kbd kbd-sm p-1 text-base-content/50">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-corner-down-left-icon lucide-corner-down-left"><path d="M20 4v7a4 4 0 0 1-4 4H4"/><path d="m9 10-5 5 5 5"/></svg>
|
||||
</kbd>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Package Selector with Pills -->
|
||||
<div class="form-control mb-4 flex-shrink-0">
|
||||
<!-- Pills Container -->
|
||||
<div id="modal_package_pills_container"
|
||||
class="flex flex-wrap gap-2 p-3 border-2 border-dashed border-base-300 rounded-lg m-3 min-h-[3rem] items-center">
|
||||
<!-- Pills will be added here dynamically -->
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Package Dropdown Menu -->
|
||||
<ul class="dropdown dropdown-end menu bg-base-200 rounded-box z-[100] w-80 max-h-96 overflow-y-auto p-2 shadow-lg"
|
||||
popover
|
||||
id="package_dropdown_menu"
|
||||
style="position-anchor:--anchor-packages">
|
||||
{% if unreviewed_packages %}
|
||||
<li class="menu-title">Reviewed Packages</li>
|
||||
{% for obj in reviewed_packages %}
|
||||
<li>
|
||||
<a class="package-option flex justify-between items-center"
|
||||
data-package-url="{{ obj.url }}"
|
||||
data-package-name="{{ obj.name }}">
|
||||
<span>{{ obj.name }}</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 package-checkmark hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
<li class="menu-title">Unreviewed Packages</li>
|
||||
{% for obj in unreviewed_packages %}
|
||||
<li>
|
||||
<a class="package-option flex justify-between items-center"
|
||||
data-package-url="{{ obj.url }}"
|
||||
data-package-name="{{ obj.name }}">
|
||||
<span>{{ obj.name }}</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 package-checkmark hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<li class="menu-title">Reviewed Packages</li>
|
||||
{% for obj in reviewed_packages %}
|
||||
<li>
|
||||
<a class="package-option flex justify-between items-center"
|
||||
data-package-url="{{ obj.url }}"
|
||||
data-package-name="{{ obj.name }}">
|
||||
<span>{{ obj.name }}</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 package-checkmark hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Loading Indicator -->
|
||||
<div id="search_loading" class="hidden justify-center py-8 flex-shrink-0">
|
||||
<span class="loading loading-spinner loading-lg text-primary"></span>
|
||||
</div>
|
||||
|
||||
<!-- Results Container - scrollable -->
|
||||
<div id="search_results" class="flex-1 overflow-y-auto min-h-0 p-2"></div>
|
||||
</div>
|
||||
|
||||
<!-- Backdrop to close -->
|
||||
<form method="dialog" class="modal-backdrop">
|
||||
<button>close</button>
|
||||
</form>
|
||||
</dialog>
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
// Package Selector Module - Data-driven multiselect package selection
|
||||
const PackageSelector = {
|
||||
// Single source of truth: array of selected packages
|
||||
selectedPackages: [],
|
||||
|
||||
elements: {
|
||||
pillsContainer: null,
|
||||
packageDropdown: null,
|
||||
packageOptions: null
|
||||
},
|
||||
|
||||
init() {
|
||||
this.cacheElements();
|
||||
this.loadInitialSelection();
|
||||
this.attachEventListeners();
|
||||
this.render();
|
||||
},
|
||||
|
||||
cacheElements() {
|
||||
this.elements.pillsContainer = document.getElementById('modal_package_pills_container');
|
||||
this.elements.packageDropdown = document.getElementById('package_dropdown_menu');
|
||||
this.elements.packageOptions = document.querySelectorAll('.package-option');
|
||||
},
|
||||
|
||||
loadInitialSelection() {
|
||||
// Load pre-selected packages from server-rendered pills
|
||||
const existingPills = this.elements.pillsContainer.querySelectorAll('.badge');
|
||||
existingPills.forEach(pill => {
|
||||
this.selectedPackages.push({
|
||||
url: pill.dataset.packageUrl,
|
||||
name: pill.dataset.packageName
|
||||
});
|
||||
});
|
||||
|
||||
// If no pills found, select all reviewed packages by default
|
||||
if (this.selectedPackages.length === 0) {
|
||||
// Iterate through all menu items and collect reviewed packages
|
||||
const menuItems = this.elements.packageDropdown.querySelectorAll('li');
|
||||
|
||||
for (const item of menuItems) {
|
||||
// Check if this is the "Unreviewed Packages" menu title
|
||||
if (item.classList.contains('menu-title') &&
|
||||
item.textContent.trim() === 'Unreviewed Packages') {
|
||||
break; // Stop processing after this point
|
||||
}
|
||||
|
||||
// Check for package options (only reviewed packages reach here)
|
||||
const packageOption = item.querySelector('.package-option');
|
||||
if (packageOption) {
|
||||
this.selectedPackages.push({
|
||||
url: packageOption.dataset.packageUrl,
|
||||
name: packageOption.dataset.packageName
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
attachEventListeners() {
|
||||
// Toggle package selection on dropdown item click
|
||||
this.elements.packageOptions.forEach(option => {
|
||||
option.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation(); // Prevent dropdown from closing
|
||||
const packageUrl = option.dataset.packageUrl;
|
||||
const packageName = option.dataset.packageName;
|
||||
this.togglePackageSelection(packageUrl, packageName);
|
||||
});
|
||||
});
|
||||
|
||||
// Remove package when X is clicked (using event delegation)
|
||||
this.elements.pillsContainer.addEventListener('click', (e) => {
|
||||
if (e.target.classList.contains('package-remove-btn') || e.target.closest('.package-remove-btn')) {
|
||||
const pill = e.target.closest('.badge');
|
||||
if (pill) {
|
||||
const packageUrl = pill.dataset.packageUrl;
|
||||
this.removePackage(packageUrl);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
togglePackageSelection(packageUrl, packageName) {
|
||||
const index = this.selectedPackages.findIndex(pkg => pkg.url === packageUrl);
|
||||
|
||||
if (index !== -1) {
|
||||
// Remove from selection
|
||||
this.selectedPackages.splice(index, 1);
|
||||
} else {
|
||||
// Add to selection
|
||||
this.selectedPackages.push({ url: packageUrl, name: packageName });
|
||||
}
|
||||
|
||||
this.render();
|
||||
},
|
||||
|
||||
removePackage(packageUrl) {
|
||||
const index = this.selectedPackages.findIndex(pkg => pkg.url === packageUrl);
|
||||
if (index !== -1) {
|
||||
this.selectedPackages.splice(index, 1);
|
||||
this.render();
|
||||
}
|
||||
},
|
||||
|
||||
render() {
|
||||
this.renderPills();
|
||||
this.renderAddButton();
|
||||
this.renderCheckmarks();
|
||||
},
|
||||
|
||||
renderPills() {
|
||||
// Clear existing pills and button (except placeholder)
|
||||
const pills = this.elements.pillsContainer.querySelectorAll('.badge');
|
||||
pills.forEach(pill => pill.remove());
|
||||
|
||||
const existingButton = this.elements.pillsContainer.querySelector('#modal_package_add_button');
|
||||
if (existingButton) {
|
||||
existingButton.remove();
|
||||
}
|
||||
|
||||
// Create pills from data
|
||||
this.selectedPackages.forEach(pkg => {
|
||||
const pill = this.createPillElement(pkg.url, pkg.name);
|
||||
this.elements.pillsContainer.appendChild(pill);
|
||||
});
|
||||
},
|
||||
|
||||
renderAddButton() {
|
||||
// Only render button if there are packages available
|
||||
if (this.elements.packageOptions.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
const button = document.createElement('button');
|
||||
button.type = 'button';
|
||||
button.id = 'modal_package_add_button';
|
||||
button.setAttribute('popovertarget', 'package_dropdown_menu');
|
||||
button.style.cssText = 'anchor-name:--anchor-packages';
|
||||
button.className = 'btn btn-sm btn-ghost gap-2 text-base-content/50';
|
||||
|
||||
button.innerHTML = `
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plus-icon lucide-plus"><path d="M5 12h14"/><path d="M12 5v14"/></svg>
|
||||
Add Package
|
||||
`;
|
||||
|
||||
this.elements.pillsContainer.appendChild(button);
|
||||
},
|
||||
|
||||
createPillElement(packageUrl, packageName) {
|
||||
const pill = document.createElement('span');
|
||||
pill.className = 'badge badge-outline gap-2 max-w-xs';
|
||||
pill.dataset.packageUrl = packageUrl;
|
||||
pill.dataset.packageName = packageName;
|
||||
|
||||
pill.innerHTML = `
|
||||
<span class="truncate" title="${packageName}">${packageName}</span>
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-4 w-4 cursor-pointer hover:text-error package-remove-btn flex-shrink-0 rotate-45"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none" stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M5 12h14"/><path d="M12 5v14"/>
|
||||
</svg>
|
||||
`;
|
||||
|
||||
return pill;
|
||||
},
|
||||
|
||||
renderCheckmarks() {
|
||||
// Update all checkmarks based on selected packages
|
||||
this.elements.packageOptions.forEach(option => {
|
||||
const packageUrl = option.dataset.packageUrl;
|
||||
const isSelected = this.selectedPackages.some(pkg => pkg.url === packageUrl);
|
||||
const checkmark = option.querySelector('.package-checkmark');
|
||||
|
||||
if (checkmark) {
|
||||
checkmark.classList.toggle('hidden', !isSelected);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
getSelectedPackages() {
|
||||
return this.selectedPackages.map(pkg => pkg.url);
|
||||
}
|
||||
};
|
||||
|
||||
// Modal and Search Management
|
||||
const modal = document.getElementById('search_modal');
|
||||
const searchbar = document.getElementById('modal_searchbar');
|
||||
const searchButton = document.getElementById('modal_search_button');
|
||||
const modeButton = document.getElementById('modal_mode_button');
|
||||
const resultsDiv = document.getElementById('search_results');
|
||||
const loadingDiv = document.getElementById('search_loading');
|
||||
|
||||
// MutationObserver to detect when modal opens
|
||||
const observer = new MutationObserver((mutations) => {
|
||||
mutations.forEach((mutation) => {
|
||||
if (mutation.attributeName === 'open' && modal.open) {
|
||||
PackageSelector.render();
|
||||
// Delay focus to allow CSS transitions to complete (modal has 0.3s transition)
|
||||
setTimeout(() => {
|
||||
searchbar.focus();
|
||||
}, 320);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
observer.observe(modal, { attributes: true });
|
||||
|
||||
// Clear results when modal closes
|
||||
modal.addEventListener('close', function() {
|
||||
resultsDiv.innerHTML = '';
|
||||
loadingDiv.classList.add('hidden');
|
||||
searchbar.value = '';
|
||||
});
|
||||
|
||||
|
||||
// Mode dropdown handlers
|
||||
const dropdownMenu = document.getElementById('search_dropdown_menu');
|
||||
|
||||
const modeButtons = [
|
||||
{ id: 'modal_dropdown_text', text: 'Text' },
|
||||
{ id: 'modal_dropdown_smiles_default', text: 'Default' },
|
||||
{ id: 'modal_dropdown_smiles_canonical', text: 'Canonical' },
|
||||
{ id: 'modal_dropdown_smiles_exact', text: 'Exact' },
|
||||
{ id: 'modal_dropdown_inchikey', text: 'InChIKey' }
|
||||
];
|
||||
|
||||
modeButtons.forEach(({ id, text }) => {
|
||||
document.getElementById(id).addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
modeButton.innerHTML = text + ` <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
|
||||
</svg>`;
|
||||
// Close dropdown using popover API
|
||||
if (dropdownMenu && typeof dropdownMenu.hidePopover === 'function') {
|
||||
dropdownMenu.hidePopover();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Initialize Package Selector
|
||||
PackageSelector.init();
|
||||
|
||||
// Search Response Handler
|
||||
function handleSearchResponse(data) {
|
||||
resultsDiv.innerHTML = '';
|
||||
|
||||
function makeContent(objs) {
|
||||
let links = '';
|
||||
objs.forEach(obj => {
|
||||
links += `<a href="${obj.url}" class="block px-4 py-2 hover:bg-base-300 rounded-lg transition-colors">${obj.name}</a>`;
|
||||
});
|
||||
return links;
|
||||
}
|
||||
|
||||
let allEmpty = true;
|
||||
let content = '';
|
||||
|
||||
// Category order for better UX
|
||||
const categoryOrder = ['Compounds', 'Compound Structures', 'Rules', 'Reactions', 'Pathways'];
|
||||
|
||||
categoryOrder.forEach(key => {
|
||||
if (!data[key] || data[key].length < 1) {
|
||||
return;
|
||||
}
|
||||
allEmpty = false;
|
||||
|
||||
content += `
|
||||
<div class="collapse collapse-arrow bg-base-200 mb-2">
|
||||
<input type="checkbox" checked />
|
||||
<div class="collapse-title font-medium">
|
||||
${key} <span class="badge badge-neutral badge-sm ml-2">${data[key].length}</span>
|
||||
</div>
|
||||
<div class="collapse-content">
|
||||
${makeContent(data[key])}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
|
||||
if (allEmpty) {
|
||||
resultsDiv.innerHTML = `
|
||||
<div class="alert alert-warning">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
|
||||
</svg>
|
||||
<span>No results found</span>
|
||||
</div>
|
||||
`;
|
||||
} else {
|
||||
resultsDiv.innerHTML = `
|
||||
<div class="mb-2">
|
||||
<div class="text-sm font-semibold text-base-content/70 mb-2">Results</div>
|
||||
${content}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
// Search Execution
|
||||
function performSearch(e) {
|
||||
e.preventDefault();
|
||||
|
||||
const query = searchbar.value.trim();
|
||||
|
||||
if (!query) {
|
||||
console.log('Search phrase empty, won\'t do search');
|
||||
return;
|
||||
}
|
||||
|
||||
const selPacks = PackageSelector.getSelectedPackages();
|
||||
|
||||
if (selPacks.length < 1) {
|
||||
console.log('No package selected, won\'t do search');
|
||||
resultsDiv.innerHTML = `
|
||||
<div class="alert alert-info">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
<span>Please select at least one package</span>
|
||||
</div>
|
||||
`;
|
||||
return;
|
||||
}
|
||||
|
||||
const mode = modeButton.textContent.trim().toLowerCase();
|
||||
|
||||
const params = new URLSearchParams();
|
||||
selPacks.forEach(pack => params.append('packages', pack));
|
||||
params.append('search', query);
|
||||
params.append('mode', mode);
|
||||
|
||||
// Show loading
|
||||
loadingDiv.classList.remove('hidden');
|
||||
resultsDiv.innerHTML = '';
|
||||
|
||||
fetch(`{{ SERVER_BASE }}/search?${params.toString()}`, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Accept': 'application/json'
|
||||
}
|
||||
})
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
throw new Error('Search request failed');
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then(result => {
|
||||
loadingDiv.classList.add('hidden');
|
||||
handleSearchResponse(result);
|
||||
})
|
||||
.catch(error => {
|
||||
loadingDiv.classList.add('hidden');
|
||||
console.error('Search error:', error);
|
||||
resultsDiv.innerHTML = `
|
||||
<div class="alert alert-error">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
<span>Search failed. Please try again.</span>
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
}
|
||||
|
||||
// Event listeners for search
|
||||
searchButton.addEventListener('click', performSearch);
|
||||
searchbar.addEventListener('keydown', function(e) {
|
||||
if (e.key === 'Enter') {
|
||||
performSearch(e);
|
||||
}
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
@ -1,110 +0,0 @@
|
||||
<div class="modal fade bs-modal-sm" id="signupmodal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"
|
||||
aria-hidden="true">
|
||||
<div class="modal-dialog modal-sm">
|
||||
<div class="modal-content">
|
||||
<br>
|
||||
<div class="bs-example bs-example-tabs">
|
||||
<ul id="myTab" class="nav nav-tabs">
|
||||
<li class="active">
|
||||
<a href="#signin" data-toggle="tab">Sign In</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="#signup" data-toggle="tab">Register</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="#why" data-toggle="tab">Why?</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div id="myTabContent" class="tab-content">
|
||||
<div class="tab-pane fade active in" id="signin">
|
||||
<form class="form-horizontal" method="post" action="{% url 'login' %}">
|
||||
{% csrf_token %}
|
||||
<fieldset>
|
||||
<input type="hidden" name="login" id="login" value="true"/>
|
||||
<div class="control-group">
|
||||
<label class="control-label" for="username">Username:</label>
|
||||
<div class="controls">
|
||||
<input required id="username" name="username" type="text" class="form-control"
|
||||
placeholder="username" autocomplete="username">
|
||||
</div>
|
||||
<label class="control-label" for="passwordinput">Password:</label>
|
||||
<div class="controls">
|
||||
<input required id="passwordinput" name="password" class="form-control"
|
||||
type="password" placeholder="********" autocomplete="current-password">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Button -->
|
||||
<div class="control-group">
|
||||
<label class="control-label" for="signin"></label>
|
||||
<div class="controls">
|
||||
<button id="signin" name="signin" class="btn btn-success">Sign In</button>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Why tab -->
|
||||
<div class="tab-pane fade in" id="why">
|
||||
<p>After you register, you have more permissions on
|
||||
this site, e.g., can create your own
|
||||
packages, submit data for review, and set access
|
||||
permissions to your data.</p>
|
||||
<p></p>
|
||||
<p>
|
||||
<br> Please
|
||||
contact <a href="mailto:admin@envipath.org">admin@envipath.org</a>
|
||||
if you have any questions.</p>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Register -->
|
||||
<div class="tab-pane fade"
|
||||
id="signup">
|
||||
<div id="passwordGuideline" class="alert alert-info">
|
||||
The password must contain 8 to 30 characters<br>
|
||||
The following characters are allowed:
|
||||
- Upper and lower case characters<br>
|
||||
- Digits<br>
|
||||
- Special characters _, -, +<br>
|
||||
|
||||
</div>
|
||||
|
||||
<form id="signup-action" class="form-horizontal" action="{% url 'login' %}" method="post">
|
||||
{% csrf_token %}
|
||||
<input type="hidden" name="register" id="register" value="true"/>
|
||||
|
||||
<label class="control-label" for="userid">Username:</label>
|
||||
<input id="userid" name="username" class="form-control" type="text" placeholder="user" required autocomplete="username">
|
||||
|
||||
<label class="control-label" for="email">Email:</label>
|
||||
<input id="email" name="email" class="form-control" type="email" placeholder="user@envipath.org" required>
|
||||
|
||||
<label class="control-label" for="password">Password:</label>
|
||||
<input id="password" name="password" class="form-control" type="password" placeholder="********" required autocomplete="new-password">
|
||||
|
||||
<label class="control-label" for="rpassword">Repeat Password:</label>
|
||||
<input id="rpassword" name="rpassword" class="form-control" type="password" placeholder="********" required autocomplete="new-password">
|
||||
|
||||
<div class="control-group">
|
||||
<label class="control-label" for="confirmsignup"></label>
|
||||
<div class="controls">
|
||||
<button id="confirmsignup" name="confirmsignup" class="btn btn-success">Sign Up
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<center>
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
||||
</center>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user