Change forms, views, models, templates

- Fix UI in add question page
- Add test case form for question formset with custom attributes
- Add a model method in question class to get question test cases
based on type and language of the question
- Retain the state of the list view and grid view in courses page
- Requested students list will be shown on top in the course detail page

3 files changed, 224 insertions, 165 deletions

diff --git a/yaksh/templates/yaksh/add_question.html b/yaksh/templates/yaksh/add_question.html
index a400e35..1ad7deb 100644
--- a/yaksh/templates/yaksh/add_question.html
+++ b/yaksh/templates/yaksh/add_question.html
@@ -1,4 +1,5 @@
 {% extends "manage.html" %}
+{% load custom_filters %}
 {% load staticfiles %}
 {% block title %} Add Question {% endblock title %}
 {% block pagetitle %} Add Question {% endblock pagetitle %}
@@ -8,6 +9,7 @@
 {% endblock %}
 
 {% block script %}
+  <script type="text/javascript" src="{% static 'yaksh/js/tinymce/js/tinymce/tinymce.min.js' %}"></script>
   <script type="text/javascript" src="{% static 'yaksh/js/add_question.js' %}"></script>
   <script type="text/javascript" src="{% static 'yaksh/js/mathjax/MathJax.js' %}?config=TeX-MML-AM_CHTML"></script>
 {% endblock %}
@@ -15,109 +17,156 @@
 {% block onload %} onload='javascript:textareaformat();' {% endblock %}
 
 {% block content %}
-<div class="yakshwell container">
-  <form action="{% if question %}{% url 'yaksh:add_question' question.id %}{% endif %}" method="post" name=frm onSubmit="return autosubmit();" enctype="multipart/form-data">
+<div class="container">
+  <a class="btn btn-primary" href="{% url 'yaksh:show_questions' %}">
+    <i class="fa fa-arrow-left"></i>&nbsp;Back
+  </a>
+  <br><br>
+  {% if messages %}
+      {% for message in messages %}
+      <div class="alert alert-dismissible alert-{{ message.tags }}">
+          <button type="button" class="close" data-dismiss="alert">
+              <i class="fa fa-close"></i>
+          </button>
+          <strong>{{ message }}</strong>
+      </div>
+      {% endfor %}
+  {% endif %}
+  <form action="{% if question %}{% url 'yaksh:add_question' question.id %}{% endif %}" method="post" id="question_form" name=frm onSubmit="return autosubmit();" enctype="multipart/form-data">
     {% csrf_token %}
-    <center>
-      {{qform.instance.language}}
-      <table class="table table-responsive-sm">
-        <tr><td>Summary: <td>{{ qform.summary }}{{ qform.summary.errors }}
-        <tr><td> Language: <td> {{qform.language}}{{qform.language.errors}}
-        <tr><td> Type: <td> {{ qform.type }}{{qform.type.errors}}
-        <tr><td>Points:<td><button class="btn-mini" type="button" onClick="increase(frm);">+</button>{{qform.points }}<button class="btn-mini" type="button" onClick="decrease(frm);">-</button>{{ qform.points.errors }}
-        <tr><td><strong>Rendered: </strong><td><p id='my'></p>
-        <tr><td>Description: <td>{{ qform.description}}  {{qform.description.errors}}
-        <tr><td>Tags: <td>{{ qform.tags }}
-        <tr><td><strong>Rendered Solution: </strong><td><p id='rend_solution'></p>
-        <tr><td>Solution: <td>{{ qform.solution }}
-        <tr><td>Snippet: <td>{{ qform.snippet }}
-        <tr><td>Minimum Time(in minutes):<td> {{ qform.min_time }}
-        <tr><td>Partial Grading: <td>{{ qform.partial_grading }}
-        <tr><td>Grade Assignment Upload:<td> {{ qform.grade_assignment_upload }}
-        <tr><td> File: <td>
-                  <div class="input-group mb-3">
-                    <div class="custom-file">
-                      {{ fileform.file_field }}{{ fileform.file_field.errors }}
-                        <label class="custom-file-label" for="id_file">
-                            Choose file
-                        </label>
-                    </div>
-                  </div>
-        {% if uploaded_files %}
+    <table class="table table-responsive-sm">
+      {% if qform.errors %}
+        {% for field in qform %}
+            {% for error in field.errors %}
+                <div class="alert alert-dismissible alert-danger">
+                    <button type="button" class="close" data-dismiss="alert">
+                        <i class="fa fa-close"></i>
+                    </button>
+                    <strong>{{ error|escape }}</strong>
+                </div>
+            {% endfor %}
+        {% endfor %}
+        {% for error in qform.non_field_errors %}
+            <div class="alert alert-dismissible alert-danger">
+                <button type="button" class="close" data-dismiss="alert">
+                    <i class="fa fa-close"></i>
+                </button>
+                <strong>{{ error|escape }}</strong>
+            </div>
+        {% endfor %}
+      {% endif %}
+      {% for field in qform %}
+          <tr>
+            <td>{{ field.label }}</td>
+            <td>{{ field }} <small>{{ field.help_text }}</small></td>
+          </tr>
+      {% endfor %}
+      <tr>
+        <td> File: </td>
+        <td>
+          <div class="input-group mb-3">
+            <div class="custom-file">
+              {{ fileform.file_field }}{{ fileform.file_field.errors }}
+                <label class="custom-file-label" for="id_file">
+                    Choose file
+                </label>
+            </div>
+          </div>
+        </td>
+      </tr>
+      {% if question %}
+        <tr><td>Add Test Case:</td>
+          <td>
+          <select id="case_type" class="form-control" name="case_type" onchange="frm.submit()">
+            <option value="" selected="selected">Select Testcase</option>
+            {% for key, value in testcase_options %}
+              <option value="{{key}}">{{value}}</option>
+            {% endfor %}
+          </select>
+          </td>
+        </tr>
+      {% endif %}
+    </table>
+    {% if uploaded_files %}
+      <div class="card">
+        <div class="card-header">
+          <h3>Uploaded files</h3>
+        </div>
+        <div class="card-body">
+          <div>
+          <p>Check on <b>Delete</b> to delete files,
+          <b>Extract</b> to extract files and <b>Hide</b> to hide files
+          </p>
+          <a href="https://yaksh.readthedocs.io/en/latest/moderator_docs/creating_question.html#setting-up-questions" class="btn btn-primary" target="blank">
+            <i class="fa fa-info-circle"></i>&nbsp;More info
+          </a>
+          </div>
           <br>
-          <b>Uploaded files:</b><br>
-          Check on delete to delete files,
-          extract to extract files and hide to hide files from student(if required)<br>
-          {% for file in uploaded_files %}
-            <input type="checkbox" name="clear" value="{{file.id}}">&nbsp;delete</input>&nbsp;
-            <input type="checkbox" name="extract" value="{{file.id}}" >{% if file.extract %} dont extract{% else %}extract{% endif %}</input>&nbsp;&nbsp;
-            <input type="checkbox" name="hide" value="{{file.id}}" >{% if file.hide %} show{% else %}hide{% endif %}</input>
-            <a href="{{file.file.url}}">{{ file.file.name }}</a>
-            <br>
-          {% endfor %}
-        {% endif %}
-      </table>
-    </center>
-    {% for formset in formsets %}
-    <div class="form-group">
-        {{ formset.management_form }}
-
-      {% for form in formset %}
-        <div class="link-formset well">
-            {% autoescape off %}
-            {{ form.as_p }}
-            {% endautoescape %}
+          <ul class="list-group">
+            {% for file in uploaded_files %}
+            <li class="list-group-item">
+              <input type="checkbox" name="clear" value="{{file.id}}">
+                Delete
+              </input>
+              <input type="checkbox" name="extract" value="{{file.id}}">
+                {% if file.extract %} Dont extract {% else %} Extract {% endif %}
+              </input>
+              <input type="checkbox" name="hide" value="{{file.id}}">
+                {% if file.hide %} Show {% else %} Hide {% endif %}
+              </input>
+              <a href="{{file.file.url}}">{{ file.file.name|file_title }}</a>
+            </li>
+            {% endfor %}
+          </ul>
         </div>
-      {% endfor %}
-
-    </div>
-    {% endfor %}
-      <div class="form-group">
-        {% if question %}    
-          <label for="case_type">Add Test Case:</label>
-            {% if question.type == "code" %}
-              {% if qform.instance.language == "bash" %}
-                <select id="case_type" class="form-control w-auto" name="case_type" onchange="frm.submit()">
-                  <option value="" selected="selected">---------</option>
-                  <option value="standardtestcase">Standard </option>
-                  <option value="stdiobasedtestcase">StdIO </option>
-                  <option value="hooktestcase">Hook </option>
-                </select>
-              {% elif qform.instance.language == "scilab" %}
-                <select id="case_type" class="form-control w-auto" name="case_type" onchange="frm.submit()">
-                  <option value="" selected="selected">---------</option>
-                  <option value="standardtestcase">Standard </option>
-                  <option value="hooktestcase">Hook </option>
-                </select>
-              {% else %}
-                <select id="case_type" class="form-control w-auto" name="case_type" onchange="frm.submit()">
-                  <option value="" selected="selected">---------</option>
-                  <option value="standardtestcase">Standard </option>
-                  <option value="stdiobasedtestcase">StdIO </option>
-                  <option value="hooktestcase">Hook </option>
-                  <option value="easystandardtestcase">Easy Standard </option>
-                </select>
-              {% endif %}
-            {% else %}
-              <select id="case_type" class="form-control w-auto" name="case_type" onchange="frm.submit()">
-                <option value="" selected="selected">---------</option>
-                <option value="standardtestcase">Standard </option>
-                <option value="stdiobasedtestcase">StdIO </option>
-                <option value="mcqtestcase">MCQ/MCC </option>
-                <option value="hooktestcase">Hook </option>
-                <option value="integertestcase">Integer </option>
-                <option value="stringtestcase"> String </option>
-                <option value="floattestcase"> Float </option>
-                <option value="arrangetestcase">Arrange options </option>
-              </select>
-            {% endif %}
-        {% endif %}
       </div>
+    {% endif %}
+    <br>
+    <div class="card">
+      <div class="card-header">
+        <h3>Test Cases</h3>
+      </div>
+      <div class="card-body">
+        {% for formset in formsets %}
+          {{ formset.management_form }}
+          <div id="accordion">
+            {% for form in formset %}
+              <div class="card">
+                <div class="card-header">
+                  <div class="row">
+                    <div class="col-md-4">
+                      <span class="badge badge-info">
+                        Test case {{forloop.counter}}.
+                      </span>
+                    </div>
+                    <div class="ml-auto">
+                      <a class="card-link" data-toggle="collapse" href="#collapse{{form.instance.id}}">
+                        <i class="fa fa-toggle-down"></i>
+                      </a>
+                    </div>
+                  </div>
+                </div>
+                <div id="collapse{{form.instance.id}}" class="collapse {% if formset.extra == 1 %} show {% else %} hide {% endif %}" data-parent="#accordion">
+                  <div class="card-body">
+                    {% autoescape off %}
+                      {{form.as_p}}
+                    {% endautoescape %}
+                  </div>
+                </div>
+              </div>
+              <br>
+            {% endfor %}
+          </div>
+        {% endfor %}
+      </div>
+    </div>
+    <br>
     <center>
-      <button class="btn btn-lg btn-success" type="submit" name="save_question">Save</button>
-      <a class="btn btn-lg btn-info" href="{% url 'yaksh:show_questions' %}">Back to Questions</a>
-      <button class="btn btn-lg btn-danger" type="submit" name="delete_files">Delete Selected Files</button>
+      <button class="btn btn-lg btn-success" type="submit" name="save_question">
+        <i class="fa fa-save"></i>&nbsp;Save
+      </button>
     </center>
   </form>
 </div>
+
 {% endblock %}
diff --git a/yaksh/templates/yaksh/course_students.html b/yaksh/templates/yaksh/course_students.html
index 03c57b8..fe64ce4 100644
--- a/yaksh/templates/yaksh/course_students.html
+++ b/yaksh/templates/yaksh/course_students.html
@@ -44,72 +44,6 @@
 </div>
 <!-- End Upload users -->
 <br>
-<!-- Enrolled Students -->
-<div id="accordian-enrolled" class="card">
-    <div class="card-header">
-        <a class="card-link" data-toggle="collapse" href="#enrolled">
-            Enrolled Students&nbsp;<i class="fa fa-angle-down"></i>
-        </a>
-    </div>
-</div>
-<div id="enrolled" class="collapse hide" data-parent="#accordion-enrolled">
-    {% if enrolled %}
-        <br>
-        <input type="checkbox" class="reject"/>&nbsp;
-        <font size="5">Select all</font>
-        <div id="reject">
-            <form action="{% url 'yaksh:reject_users' course.id %}" method="post" id="reject-form">
-                {% csrf_token %}
-                <table id="enrolled_table" class="tablesorter table table-striped table-responsive-sm course-detail" data-sortlist="[1,0]" style="width: 100%">
-                    <thead>
-                    <th></th>
-                    <th>Full Name&nbsp;<i class="fa fa-sort"></i></th>
-                    <th>Email&nbsp;<i class="fa fa-sort"></i></th>
-                    <th>Roll Number&nbsp;<i class="fa fa-sort"></i></th>
-                    <th>Institute&nbsp;<i class="fa fa-sort"></i></th>
-                    <th>Department&nbsp;<i class="fa fa-sort"></i></th>
-                    <th>Reject</th>
-                    </thead>
-                    <tbody>
-                    {% for enroll in enrolled %}
-                        <tr>
-                        <td>
-                            {{ forloop.counter }}.
-                            <input type="checkbox" name="check" value="{{ enroll.id }}">
-                        </td>
-                        <td> {{ enroll.get_full_name|title }} </td>
-                        <td> {{enroll.email}}</td>
-                        {% with enroll.profile as enroll_profile %}
-                            <td> {{enroll_profile.roll_number}}</td>
-                            <td> {{enroll_profile.institute}}</td>
-                            <td> {{enroll_profile.department}}</td>
-                        {% endwith %}
-                        <td>
-                            <a class="btn btn-danger"
-                            href="{% url 'yaksh:reject_user' course.id enroll.id %}">
-                                <i class="fa fa-minus-square"></i>
-                                Reject
-                            </a>
-                        </td>
-                        </tr>
-                    {% endfor %}
-                    </tbody>
-                </table>
-                <button class="btn btn-danger btn-lg" type="submit" name='reject' value='reject'>
-                    <i class="fa fa-minus-square"></i>
-                    Reject Selected
-                </button> <br>
-            </form>
-        </div>
-    {% else %}
-        <center>
-            <span class="badge badge-warning"><big> No enrolled students yet</big></span>
-        </center>
-    {% endif %}
-</div>
-<!-- End Enrolled Students -->
-
-<br>
 <!-- Requested Students -->
 <div id="accordian-request" class="card">
     <div class="card-header">
@@ -178,6 +112,72 @@
 </div>
 <!-- End Requested Students -->
 <br>
+<!-- Enrolled Students -->
+<div id="accordian-enrolled" class="card">
+    <div class="card-header">
+        <a class="card-link" data-toggle="collapse" href="#enrolled">
+            Enrolled Students&nbsp;<i class="fa fa-angle-down"></i>
+        </a>
+    </div>
+</div>
+<div id="enrolled" class="collapse hide" data-parent="#accordion-enrolled">
+    {% if enrolled %}
+        <br>
+        <input type="checkbox" class="reject"/>&nbsp;
+        <font size="5">Select all</font>
+        <div id="reject">
+            <form action="{% url 'yaksh:reject_users' course.id %}" method="post" id="reject-form">
+                {% csrf_token %}
+                <table id="enrolled_table" class="tablesorter table table-striped table-responsive-sm course-detail" data-sortlist="[1,0]" style="width: 100%">
+                    <thead>
+                    <th></th>
+                    <th>Full Name&nbsp;<i class="fa fa-sort"></i></th>
+                    <th>Email&nbsp;<i class="fa fa-sort"></i></th>
+                    <th>Roll Number&nbsp;<i class="fa fa-sort"></i></th>
+                    <th>Institute&nbsp;<i class="fa fa-sort"></i></th>
+                    <th>Department&nbsp;<i class="fa fa-sort"></i></th>
+                    <th>Reject</th>
+                    </thead>
+                    <tbody>
+                    {% for enroll in enrolled %}
+                        <tr>
+                        <td>
+                            {{ forloop.counter }}.
+                            <input type="checkbox" name="check" value="{{ enroll.id }}">
+                        </td>
+                        <td> {{ enroll.get_full_name|title }} </td>
+                        <td> {{enroll.email}}</td>
+                        {% with enroll.profile as enroll_profile %}
+                            <td> {{enroll_profile.roll_number}}</td>
+                            <td> {{enroll_profile.institute}}</td>
+                            <td> {{enroll_profile.department}}</td>
+                        {% endwith %}
+                        <td>
+                            <a class="btn btn-danger"
+                            href="{% url 'yaksh:reject_user' course.id enroll.id %}">
+                                <i class="fa fa-minus-square"></i>
+                                Reject
+                            </a>
+                        </td>
+                        </tr>
+                    {% endfor %}
+                    </tbody>
+                </table>
+                <button class="btn btn-danger btn-lg" type="submit" name='reject' value='reject'>
+                    <i class="fa fa-minus-square"></i>
+                    Reject Selected
+                </button> <br>
+            </form>
+        </div>
+    {% else %}
+        <center>
+            <span class="badge badge-warning"><big> No enrolled students yet</big></span>
+        </center>
+    {% endif %}
+</div>
+<!-- End Enrolled Students -->
+
+<br>
 <!-- Rejected Students -->
 <div id="accordian-rejected" class="card">
     <div class="card-header">
diff --git a/yaksh/templates/yaksh/courses.html b/yaksh/templates/yaksh/courses.html
index 5d2c913..6a98ee3 100644
--- a/yaksh/templates/yaksh/courses.html
+++ b/yaksh/templates/yaksh/courses.html
@@ -1,7 +1,13 @@
 {% extends "manage.html" %}
+{% load static %}
 {% block title %} Courses {% endblock %}
 {% block pagetitle %} Courses {% endblock pagetitle %}
 
+{% block script %}
+<script type="text/javascript" src="{% static 'yaksh/js/show_courses.js' %}">
+</script>
+{% endblock %}
+
 {% block css %}
 <style>
     .test + .tooltip.top > .tooltip-inner {
@@ -72,8 +78,12 @@
                 </div>
                 <div class="ml-auto">
                     <div class="nav nav-pills" role="tablist" aria-orientation="vertical">
-                        <a href="#listview" id="listbtn" class="nav-link"  data-toggle="pill" role="tab" aria-controls="show" aria-selected="true"> <i class="fa fa-list"></i></a>
-                        <a href="#gridview" id="gridbtn" class="nav-link active" data-toggle="pill" role="tab" aria-controls="updown" aria-selected="false" > <i class="fa fa-columns"></i></a>
+                        <a  id="listbtn" class="nav-link"  data-toggle="pill" role="tab" aria-controls="show" aria-selected="true">
+                            <i class="fa fa-list"></i>
+                        </a>
+                        <a  id="gridbtn" class="nav-link" data-toggle="pill" role="tab" aria-controls="updown" aria-selected="false">
+                            <i class="fa fa-columns"></i>
+                        </a>
                     </div>
                 </div>
             </div>