update TestsForm page

Former-commit-id: 63d5ff75d78fed498a210e74b4dffba5e128c2be

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())

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 */
 

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";
+}

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>