From 50be08b9b137bf9399266541feac5ea4a1eb8901 Mon Sep 17 00:00:00 2001
From: Rachel TORCHET <racheltorchet@users.noreply.github.com>
Date: Fri, 4 Aug 2017 16:03:57 +0200
Subject: [PATCH] Change ProteinDomainComplexType form into a single form to
deal with radio button issues, and update html and javascript to show only
one state : -Inhib or -Stab
Former-commit-id: 52d0d952d44957af32bfc79d60a746fea9b6fdfd
---
ippisite/ippidb/forms.py | 50 +++++----------
ippisite/ippidb/static/css/ippidb.css | 7 +--
ippisite/ippidb/static/js/ippidb.js | 27 ++++----
ippisite/ippidb/templates/PDBForm.html | 1 -
.../templates/ProteinDomainComplexForm.html | 2 -
.../ProteinDomainComplexTypeForm.html | 63 +++++++++++++------
ippisite/ippidb/templates/ProteinForm.html | 1 -
7 files changed, 73 insertions(+), 78 deletions(-)
diff --git a/ippisite/ippidb/forms.py b/ippisite/ippidb/forms.py
index 43322b75..12fcd876 100644
--- a/ippisite/ippidb/forms.py
+++ b/ippisite/ippidb/forms.py
@@ -42,47 +42,27 @@ class ProteinForm(ModelForm):
ProteinFormSet = modelformset_factory(Protein, exclude=('recommended_name_long', 'short_name'), extra=0)
-
-ARCHI_TYPE = (
- ('inhibited', 'Inhibited'),
- ('stabilized', 'Stabilized'),
- )
-
-INHIBITED_CHOICES = (
- ('Hetero2merAB','Hetero 2-mer AB'),
- ('Homo2merA2','Homo 2-mer A2'),
- ('custom', 'Custom your own'),
- )
-
-STABILIZED_CHOICES = (
- ('Hetero2merAB','Hetero 2-mer AB'),
- ('Homo2merA2','Homo 2-mer A2'),
- ('HomoLike2mer','Homo-Like 2-mer A2'),
- ('Homo3merA3','Homo 3-mer A3'),
- ('Homo3merA2','Homo 3-mer A3 inhibited A2-dimer'),
- ('Homo4merA4','Homo 4-mer A4'),
- ('RingHomo3mer','Ring-Like 3-mer A3'),
- ('RingHomo5mer','Ring-Like 5-mer A5'),
- ('custom', 'Custom your own'),
+TYPE_CHOICES = (
+ ('Hetero2merAB','Inhib_Hetero 2-mer AB'),
+ ('Homo2merA2','Inhib_Homo 2-mer A2'),
+ ('custom', 'Inhib_Custom your own'),
+ ('Hetero2merAB','Stab_Hetero 2-mer AB'),
+ ('Homo2merA2','Stab_Homo 2-mer A2'),
+ ('HomoLike2mer','Stab_Homo-Like 2-mer A2'),
+ ('Homo3merA3','Stab_Homo 3-mer A3'),
+ ('Homo3merA2','Stab_Homo 3-mer A3 inhibited A2-dimer'),
+ ('Homo4merA4','Stab_Homo 4-mer A4'),
+ ('RingHomo3mer','Stab_Ring-Like 3-mer A3'),
+ ('RingHomo5mer','Stab_Ring-Like 5-mer A5'),
+ ('custom', 'Stab_Custom your own'),
)
class ProteinDomainComplexTypeForm(forms.Form):
- archi = forms.CharField(
- label="PPI Architecture Type",
- widget=forms.Select(
- choices=ARCHI_TYPE,
- )
- )
- inhibited = forms.ChoiceField(
+ complexType = forms.ChoiceField(
widget=forms.RadioSelect,
- choices=INHIBITED_CHOICES,
+ choices=TYPE_CHOICES,
)
- stabilized = forms.ChoiceField(
- widget=forms.RadioSelect,
- choices=STABILIZED_CHOICES,
- )
-
class ProteinDomainComplexForm(ModelForm):
class Meta:
model = ProteinDomainComplex
diff --git a/ippisite/ippidb/static/css/ippidb.css b/ippisite/ippidb/static/css/ippidb.css
index 022b5e44..27a7af1c 100644
--- a/ippisite/ippidb/static/css/ippidb.css
+++ b/ippisite/ippidb/static/css/ippidb.css
@@ -873,9 +873,6 @@ body {
}
/* Stabilized */
-#stabilized{
- display:none;
-}
#id_ProteinDomainComplexTypeForm-stabilized {
overflow: hidden;
@@ -1382,13 +1379,13 @@ button, input, select, textarea {
}
-.type_style {
+#type_style {
background-color: rgb(227, 233, 235);
padding: 10px;
margin: 10px;
}
-.type_title h1{
+#type_title h1{
text-align: left;
color: #414144;
font-size: 42px;
diff --git a/ippisite/ippidb/static/js/ippidb.js b/ippisite/ippidb/static/js/ippidb.js
index 4072273c..efc8ebb3 100644
--- a/ippisite/ippidb/static/js/ippidb.js
+++ b/ippisite/ippidb/static/js/ippidb.js
@@ -19,18 +19,17 @@ $(document).ready(function() {
$(document).ready(function(){
- $('#id_ProteinDomainComplexTypeForm-archi').on('change', function() {
- if ( this.value === "inhibited")
- {
- $("#inhibited").show();
- $("#stabilized").hide();
- }
- else
- {
- $("#inhibited").hide();
- $("#stabilized").show();
- }
+$("select").change(function(){
+ $(this).find("option:selected").each(function(){
+ if($(this).attr("value")=="inhibited"){
+ $(".box").not(".inhibited").hide();
+ $(".inhibited").show();
+ }else if($(this).attr("value")=="stabilized"){
+ $(".box").not(".stabilized").hide();
+ $(".stabilized").show();
+ }else{
+ $(".box").hide();
+ }
});
-});
-
-
+}).change();
+});
\ No newline at end of file
diff --git a/ippisite/ippidb/templates/PDBForm.html b/ippisite/ippidb/templates/PDBForm.html
index a146e696..bfac10f4 100644
--- a/ippisite/ippidb/templates/PDBForm.html
+++ b/ippisite/ippidb/templates/PDBForm.html
@@ -20,7 +20,6 @@
{% csrf_token %}
<table>
{{ wizard.management_form }}
- {{ wizard.form.errors}}
{{ wizard.form.non_field_errors}}
{% block custom_form %}{% endblock %}
diff --git a/ippisite/ippidb/templates/ProteinDomainComplexForm.html b/ippisite/ippidb/templates/ProteinDomainComplexForm.html
index 4c00a21d..6401c925 100644
--- a/ippisite/ippidb/templates/ProteinDomainComplexForm.html
+++ b/ippisite/ippidb/templates/ProteinDomainComplexForm.html
@@ -34,8 +34,6 @@ If your PPI complex is not among them, please select « Create you Own »</p>
<div class="inline_field"> {{ form.ppc_copy_nb }}</div>
</div>
{% endfor %}
- {% else %}
- {{ wizard.form }}
{% endif %}
<input type="submit" value="{% trans "Next step" %}"/>
</form>
diff --git a/ippisite/ippidb/templates/ProteinDomainComplexTypeForm.html b/ippisite/ippidb/templates/ProteinDomainComplexTypeForm.html
index db177f89..1f42e708 100644
--- a/ippisite/ippidb/templates/ProteinDomainComplexTypeForm.html
+++ b/ippisite/ippidb/templates/ProteinDomainComplexTypeForm.html
@@ -21,43 +21,66 @@ If your PPI complex is not among them, please select « Create you Own »</p>
{% csrf_token %}
<table>
{{ wizard.management_form }}
- {{ wizard.form.errors}}
{{ wizard.form.non_field_errors}}
{% block custom_form %}{% endblock %}
{% if wizard.form.forms %}
{{ wizard.form.management_form }}
{% for form in wizard.form.forms %}
+
{% endfor %}
{% else %}
- {{ wizard.form.archi }}
- <div id='inhibited' name='inhibited' class="type_style">
- <div class="type_title">
+ <div id="id_ProteinDomainComplexTypeForm-stabilized">
+ PPI Complex Type:
+ <select>
+ <option value="inhibited">Inhibited</option>
+ <option value="stabilized">Stabilized</option>
+ </select>
+ </div>
+ <div id="type_style" class="inhibited box">
+ <div id="type_title">
<h1>Inhibited</h1>
</div>
<div id="id_ProteinDomainComplexTypeForm-inhibited">
- {% for radio in wizard.form.inhibited %}
- <div class="imageBack_Inhib_{{radio.choice_label|cut:" "}}">
- {{ radio.tag }}
- <label for="{{ radio.id_for_label }}">
- <span>{{ radio.choice_label}}</span>
- </label>
- </div>
+ {% for radio in wizard.form.complexType %}
+ <!-- I'm sorry for this bad/ugly code but I couldn't figure how to do it in a proper way - If you have a better idea feel free to let me know rachel.torchet@pasteur.fr -->
+ {% if "Inhib_" in radio.choice_label%}
+ <!-- If the label of the radio button start with Inhib (I had to put a prefix to seperate Inhibitor and Stabilizator) -->
+ {% with LabelName=radio.choice_label|cut:"Inhib_" %}
+ <!-- Then cut this prefix to create a better label -->
+ {% with InhibClass=LabelName|cut:" " %}
+ <!-- Then discard the blank spaces to get a tag for the corresponding CSS Class -->
+ <div class="imageBack_Inhib_{{InhibClass}}">
+ <!-- For each radio option there is a separate CSS class -->
+ {{ radio.tag }}
+ <label for="{{ radio.id_for_label }}">
+ <span>{{InhibClass}}</span>
+ </label>
+ </div>
+ {% endwith %}
+ {% endwith %}
+ {% endif %}
{% endfor %}
</div>
</div>
- <div id="stabilized" class="type_style">
- <div class="type_title">
+ <div id="type_style" class="stabilized box">
+ <div id="type_title">
<h1>Stabilized</h1>
</div>
<div id="id_ProteinDomainComplexTypeForm-stabilized">
- {% for radio in wizard.form.stabilized %}
- <div class="imageBack_Stab_{{radio.choice_label|cut:" "}}">
- {{ radio.tag }}
- <label for="{{ radio.id_for_label }}">
- <span>{{ radio.choice_label}}</span>
- </label>
- </div>
+ {% for radio in wizard.form.complexType %}
+ {% if "Stab_" in radio.choice_label%}
+ {% with LabelName=radio.choice_label|cut:"Stab_" %}
+ {% with StabClass=LabelName|cut:" " %}
+ <div class="imageBack_Stab_{{StabClass}}">
+ {{ radio.tag }}
+ <label for="{{ radio.id_for_label }}">
+ <span>{{ StabClass}}</span>
+ </label>
+ </div>
+ {% endwith %}
+ {% endwith %}
+ {% endif %}
{% endfor %}
</div>
</div>
diff --git a/ippisite/ippidb/templates/ProteinForm.html b/ippisite/ippidb/templates/ProteinForm.html
index 9eb42be3..fab383c8 100644
--- a/ippisite/ippidb/templates/ProteinForm.html
+++ b/ippisite/ippidb/templates/ProteinForm.html
@@ -19,7 +19,6 @@
<form class="proteins_form" action="" method="post">
{% csrf_token %}
{{ wizard.management_form }}
- {{ wizard.form.errors}}
{{ wizard.form.non_field_errors}}
{% block custom_form %}{% endblock %}
--
GitLab