diff --git a/ippisite/ippidb/forms.py b/ippisite/ippidb/forms.py index 8501ef910e5e80bf9965f617f77e4e1280b9fbf9..1ec0060291a2f477e8099cacbeadd9b2e7e24550 100644 --- a/ippisite/ippidb/forms.py +++ b/ippisite/ippidb/forms.py @@ -169,17 +169,18 @@ formset = CompoundFormSet() """ Step 8 : TestsForm """ class TestsForm(forms.Form): - activityDesc_cell_line=forms.ModelChoiceField(queryset=CellLine.objects.all(), required=True) - activityDesc_ppi=forms.CharField(widget=forms.TextInput()) + activityDesc_test_name=forms.CharField(widget=forms.TextInput(attrs={'placeholder':'Activity test name'})) + activityDesc_cell_line=forms.ModelChoiceField(queryset=CellLine.objects.all(), required=True, empty_label="Choose a corresponding cell line") + activityDesc_ppi=forms.CharField(widget=forms.TextInput(attrs={'placeholder':'PPI ID'})) activityDesc_nb_active_compound=forms.IntegerField(initial=1,required=True) - activityDesc_test_modulation_type=forms.ModelChoiceField(queryset=TestActivityDescription.objects.all(), required=True) - activityDesc_test_name=forms.CharField(widget=forms.TextInput()) - activityDesc_type=forms.ModelChoiceField(queryset=TestActivityDescription.objects.all(), required=True) + activityRes_test_modulation_type=forms.ModelChoiceField(queryset=CompoundActivityResult.objects.values_list('modulation_type', flat=True).distinct(), required=True, empty_label=None) + activityDesc_type=forms.ModelChoiceField(widget=forms.RadioSelect(),queryset=TestActivityDescription.objects.values_list('test_type', flat=True).distinct(), required=True, empty_label=None) + cytotoxDesc_test_name=forms.CharField(widget=forms.TextInput()) cytotoxDesc_cell_line=forms.ModelChoiceField(queryset=CellLine.objects.all(), required=True) cytotoxDesc_compound_concentration=forms.CharField(widget=forms.TextInput()) - cytotoxDesc_test_name=forms.CharField(widget=forms.TextInput()) + cytotoxRes_toxicity=forms.ModelChoiceField(queryset=CompoundCytotoxicityResult.objects.all()) + pkDesc_test_name=forms.CharField(widget=forms.TextInput()) pkDesc_organism=forms.ModelChoiceField(queryset=Taxonomy.objects.all(), required=True) pkDesc_administration_mode=forms.CharField(widget=forms.TextInput()) pkDesc_dose=forms.IntegerField(initial=1,required=True) pkDesc_dose_interval=forms.IntegerField(initial=1,required=True) - pkDesc_test_name=forms.CharField(widget=forms.TextInput()) diff --git a/ippisite/ippidb/static/css/admin-session.css b/ippisite/ippidb/static/css/admin-session.css index 2cebca66a1f3966297d1e33acbb54621b2fb781c..cdb126796972d62a0b5e65b8a55b7cd9476f9526 100644 --- a/ippisite/ippidb/static/css/admin-session.css +++ b/ippisite/ippidb/static/css/admin-session.css @@ -1005,6 +1005,69 @@ Description: IPPI-DB Theme border-right: 1px solid #E3E9EB; } +/* Tests form */ + +.tests{ + background-color: #E3E9EB; + margin-left: -60%; + margin-right: -60%; + padding-bottom: 0% 5% 5% 5%; +} + +.test_input{ + margin-bottom: 5px; +} + +.test_input input { + width: 100%; + padding: 5px; +} + +.test_input select { + width: 100%; + padding: 5px; +} +/* Style the tab */ +.tab { + overflow: hidden; + background-color: #ffffff; +} + +/* Style the buttons that are used to open the tab content */ +.tab button { + background-color: #ffffff; + float: left; + border: none; + outline: none; + cursor: pointer; + padding: 14px 16px; + transition: 0.3s; + text-align: center; + color: #8D8889; + font-size: 42px; + font-family: "BrandonGrotesqueBlk"; + width: 33.33%; +} + +/* Change background color of buttons on hover */ +.tab button:hover { + background-color: #E3E9EB; + color: #414144; +} + +/* Create an active/current tablink class */ +.tab button.active { + background-color: #E3E9EB; + color: #414144; +} + +/* Style the tab content */ +.tabcontent { + display: none; + padding: 12px 12px; + border-top: none; + background-color: #E3E9EB; +} /* Proteins form */ diff --git a/ippisite/ippidb/static/js/ippidb.js b/ippisite/ippidb/static/js/ippidb.js index ee11cdbadef9e51db50a6ac025b66032a5483c40..d53314e5968b1f4067d9f6e980c9763325d30b0a 100644 --- a/ippisite/ippidb/static/js/ippidb.js +++ b/ippisite/ippidb/static/js/ippidb.js @@ -42,3 +42,19 @@ $(document).ready(function(){ $(this).removeClass('box--active'); }) }); + + +// Function to switch tabs in TestsForm +function openTests(evt, testName) { + var i, tabcontent, tablinks; + tabcontent = document.getElementsByClassName("tabcontent"); + for (i = 0; i < tabcontent.length; i++) { + tabcontent[i].style.display = "none"; + } + tablinks = document.getElementsByClassName("tablinks"); + for (i = 0; i < tablinks.length; i++) { + tablinks[i].className = tablinks[i].className.replace(" active", ""); + } + document.getElementById(testName).style.display = "block"; + evt.currentTarget.className += " active"; +} diff --git a/ippisite/ippidb/templates/TestsForm.html b/ippisite/ippidb/templates/TestsForm.html index 4713e834bb1c8cd394a9e2a96149654af635bf64..ca1dbdd9a6d944308fec5b198370e18938acdd7e 100644 --- a/ippisite/ippidb/templates/TestsForm.html +++ b/ippisite/ippidb/templates/TestsForm.html @@ -37,10 +37,50 @@ {{ form }} {% endfor %} {% else %} - {{ wizard.form }} + <div class="tests"> + <!-- Tab links --> + <div class="tab"> + <button class="tablinks active" onclick="openTests(event, 'Activity')" id="defaultOpen">Activity</button> + <button class="tablinks" onclick="openTests(event, 'Cytotoxicity')">Cytotoxicity</button> + <button class="tablinks" onclick="openTests(event, 'PK')">PK</button> + </div> + + <!-- Tab content --> + <div id="Activity" class="tabcontent" style="display: block;"> + <div class="test_input">{{ wizard.form.activityDesc_test_name }}</div> + <div> + {% for radio in wizard.form.activityDesc_type %} + <div> + {{ radio.tag }} + <label> + <span>{{ radio.choice_label }}</span> + </label> + </div> + {% endfor %} + </div> + <div class="test_input">{{ wizard.form.activityDesc_cell_line }}</div> + <div class="test_input">{{ wizard.form.activityDesc_ppi }}</div> + <div class="test_input">{{ wizard.form.activityRes_test_modulation_type }}</div> + </div> + + <div id="Cytotoxicity" class="tabcontent"> + <div class="test_input">{{ wizard.form.cytotoxDesc_test_name }}</div> + <div class="test_input">{{ wizard.form.cytotoxDesc_cell_line }}</div> + <div class="test_input">{{ wizard.form.cytotoxDesc_compound_concentration }}</div> + <div class="test_input">{{ wizard.form.cytotoxRes_toxicity }}</div> + </div> + + <div id="PK" class="tabcontent"> + <div class="test_input">{{ wizard.form.pkDesc_test_name }}</div> + <div class="test_input">{{ wizard.form.pkDesc_organism }}</div> + <div class="test_input">{{ wizard.form.pkDesc_administration_mode }}</div> + <div class="test_input">{{ wizard.form.pkDesc_dose }}</div> + <div class="test_input">{{ wizard.form.pkDesc_dose_interval }}</div> + </div> + </div> {% endif %} </table> - <input type="submit" value="{% trans "submit" %}"/> + <input class="submit_button" type="submit" value="{% trans "submit" %}"/> </form> </div> </div>