Merge pull request #636 from CruiseDevice/revamp_ui

Fix UI, add Pagination to showquestions.html
author: Akash Chavan 2020-01-02 16:24:00 +0530
committer: GitHub 2020-01-02 16:24:00 +0530
commit: 293e95bd0920d2f06058cf3ee4c0be3c2b3cf905 (patch)
tree: 8cfc13994d38714df26478c85a34ec70741bfab3 /yaksh
parent: eb05d4b0bc3fd0e2ce5160f30251bd9b939ccef6 (diff)
parent: e7f83b0f9e098ffb4066fce50f1d60972b5edfcb (diff)
download: online_test-293e95bd0920d2f06058cf3ee4c0be3c2b3cf905.tar.gz
online_test-293e95bd0920d2f06058cf3ee4c0be3c2b3cf905.tar.bz2
online_test-293e95bd0920d2f06058cf3ee4c0be3c2b3cf905.zip
6 files changed, 172 insertions, 162 deletions
diff --git a/yaksh/forms.py b/yaksh/forms.py
index 8cc3d0a..ffb15a6 100644
--- a/yaksh/forms.py
+++ b/yaksh/forms.py
@@ -295,13 +295,16 @@ class QuestionFilterForm(forms.Form):
         points_options = [(None, 'Select Marks')]
         points_options.extend([(point, point) for point in points_list])
         self.fields['marks'] = forms.FloatField(
-            widget=forms.Select(choices=points_options)
+            widget=forms.Select(choices=points_options,
+                                attrs={'class': 'custom-select'})
         )
         self.fields['marks'].required = False
     language = forms.CharField(
-        max_length=8, widget=forms.Select(choices=languages))
+        max_length=8, widget=forms.Select(choices=languages,
+                                          attrs={'class': 'custom-select'}))
     question_type = forms.CharField(
-        max_length=8, widget=forms.Select(choices=question_types)
+        max_length=8, widget=forms.Select(choices=question_types,
+                                          attrs={'class': 'custom-select'})
     )
 
 
@@ -396,7 +399,7 @@ class ProfileForm(forms.ModelForm):
             )
 
 class UploadFileForm(forms.Form):
-    file = forms.FileField()
+    file = forms.FileField(widget=forms.FileInput(attrs={'class': 'upload'}))
 
 
 class QuestionPaperForm(forms.ModelForm):
diff --git a/yaksh/static/yaksh/css/custom.css b/yaksh/static/yaksh/css/custom.css
index d0d5c82..55d5d6d 100644
--- a/yaksh/static/yaksh/css/custom.css
+++ b/yaksh/static/yaksh/css/custom.css
@@ -24,6 +24,15 @@ body, .dropdown-menu {
     font-size: 1.25rem;
 }
 
+.base-content {
+    padding-top: 5em;
+    padding-bottom: 5em;
+}
+
 #login-btn, #signup-btn, #forgot-btn{
     width: 75%;
 }
+
+.dropdown {
+    display: flex;
+}
diff --git a/yaksh/templates/base.html b/yaksh/templates/base.html
index 9021e3d..0cfe8a3 100644
--- a/yaksh/templates/base.html
+++ b/yaksh/templates/base.html
@@ -43,7 +43,6 @@
   </script>
   {% block script %}
   {% endblock %}
-  </script>
 </head>
 
 <body {% block onload %} {% endblock %} class="yaksh">
@@ -58,7 +57,7 @@
   {% block nav %}
   {% endblock %}
 
-     <div class="content">
+     <div class="base-content">
          <div class="header">
              <h3><center>{% block pagetitle %}{% endblock pagetitle %}</center></h3>
          </div>
diff --git a/yaksh/templates/yaksh/ajax_question_filter.html b/yaksh/templates/yaksh/ajax_question_filter.html
index ea0d0b5..7dba6df 100644
--- a/yaksh/templates/yaksh/ajax_question_filter.html
+++ b/yaksh/templates/yaksh/ajax_question_filter.html
@@ -16,6 +16,8 @@
     });
     </script>
     {% if questions %}
+    {% include "yaksh/paginator.html" %}
+
         <h5 class="highlight"><input type="checkbox" id="checkall">
             Select All
         </h5>
@@ -36,7 +38,7 @@
                 <td>
                 <input type="checkbox" name="question" value="{{ question.id }}">
                 </td>
-                <td><a href="{{URL_ROOT}}/exam/manage/addquestion/{{ question.id }}">{{question.summary|capfirst}}</a></td>
+                <td><a href="{% url 'yaksh:add_question' question.id %}">{{question.summary|capfirst}}</a></td>
                 <td>{{question.language|capfirst}}</td>
                 <td>{{question.type|capfirst}}</td>
                 <td>{{question.points}}</td>
@@ -45,5 +47,6 @@
             </tbody>
             </table>
         </ul>
+    {% include "yaksh/paginator.html" %}
     {% endif %}
 </div>
diff --git a/yaksh/templates/yaksh/showquestions.html b/yaksh/templates/yaksh/showquestions.html
index e146878..d0c33dd 100644
--- a/yaksh/templates/yaksh/showquestions.html
+++ b/yaksh/templates/yaksh/showquestions.html
@@ -1,39 +1,38 @@
 {% extends "manage.html" %}
+{% load staticfiles %}
 
 {% block title %} Questions {% endblock %}
 
 {% block pagetitle %} Questions {% endblock pagetitle %}
 
 {% block script %}
-<script src="{{ URL_ROOT }}/static/yaksh/js/show_question.js"></script>
-<script src="{{ URL_ROOT }}/static/yaksh/js/question_filter.js"></script>
-<script src="{{ URL_ROOT }}/static/yaksh/js/jquery.tablesorter.min.js"></script>
+<script type="text/javascript" src="{% static 'yaksh/js/show_question.js' %}"></script>
+<script type="text/javascript" src="{% static 'yaksh/js/question_filter.js' %}"></script>
+<script type="text/javascript" src="{% static 'yaksh/js/jquery.tablesorter.min.js' %}"></script>
 {% endblock %}
 
 {% block content %}
-<div class="row">
-    <!-- Side bar -->
-    <div class="col-md-3 yakshlabel collapse nav flex-column nav-pills" id="sidebar" role="tablist" aria-orientation="vertical">
-          <a href="#show" id="showbar" class="nav-link active"  data-toggle="pill" role="tab" aria-controls="show" aria-selected="true"> Show all Questions</a>
-          <a href="#updown" id="updownbar" class="nav-link" data-toggle="pill" role="tab" aria-controls="updown" aria-selected="false" > Upload and Download Questions</a>
-    </div>
-     <a href="#sidebar" data-toggle="collapse" id="sidebaricon"><i class="fa fa-navicon fa-lg"></i></a>
-    <!-- End of side bar -->
-    <main class="col  main" id="sidebarbody">
-     
-      <div class="yakshwell tab-content">
-      <!-- Upload Questions -->
-      <div id="updown"  class="card col-md-12 tab-pane fade" role="tabpanel" aria-labelledby="updownbar">
-        <div class="alert alert-info" role="alert">
-          <p>You can upload question files the following ways -
-            <li><b><u>Yaml File</u></b>
+<div class="container">
+  <!-- Side bar -->
+  <div class="nav nav-pills" id="sidebar" role="tablist" aria-orientation="vertical">
+    <a href="#show" id="showbar" class="nav-link active"  data-toggle="pill" role="tab" aria-controls="show" aria-selected="true"> Show all Questions</a>
+    <a href="#updown" id="updownbar" class="nav-link" data-toggle="pill" role="tab" aria-controls="updown" aria-selected="false" > Upload and Download Questions</a>
+  </div>
+  <!-- End of side bar -->
+  <div class="tab-content">
+    <br>
+    <!-- Upload Questions -->
+    <div id="updown" class="card tab-pane fade" role="tabpanel" aria-labelledby="updownbar">
+      <div class="col" role="alert">
+        <p>You can upload question files the following ways -
+          <li><b><u>Yaml File</u></b>
             <p>One can upload Yaml file with extensions .yaml or .yml. Please note
               that you cannot upload files associated to a question. Yaml file can
               have any name.
             </p>
-            </li>
-            <li><b><u>Zip File</u></b>
-             <p> One can also upload zip with the following zip structure -
+          </li>
+          <li><b><u>Zip File</u></b>
+           <p> One can also upload zip with the following zip structure - </p>
             <pre>
               .zip
               |-- .yaml or .yml
@@ -43,87 +42,82 @@
               |-- folder2
               |   |-- Files required by questions
             </pre>
-            </li>
-          </p>
-        </div>
-        <div class="card-body">
-        <div><a class="btn btn-primary" href="{{URL_ROOT}}/exam/manage/courses/download_yaml_template/"> Download Template</a> </div>
+          </li>
+        </p>
+      </div>
+      <div class="card-body">
+        <div><a class="btn btn-lg btn-primary" href="{% url 'yaksh:download_yaml_template' %}">Download Template</a></div>
         <br/>
         <h4> Or </h4>
         <form action="" method="post"  enctype="multipart/form-data">
-        {% csrf_token %}
-            {{ upload_form.as_p }}
-        <br/>
-        <h4> And </h4>
-        <button class="btn btn-success" type="submit" name="upload" value="upload">
-        Upload File <span class="glyphicon glyphicon-open"/></button>
+          {% csrf_token %}
+            <div class="form-group">
+              <div class="input-group mb-3">
+                <div class="custom-file">
+                  {{ upload_form.as_p }}
+                </div>
+              </div>
+            </div>
+          <h4>And</h4>
+          <button class="btn btn-lg btn-success" type="submit" name="upload" value="upload">Upload File</button>
         </form>
       </div>
-      </div>
-      <!-- End of upload questions -->
+    </div>
+    <!-- End of upload questions -->
 
-      <!-- Show questions -->
-        <div id="show" class="yakshwell tab-pane fade show active" role="tabpanel" aria-labelledby="showbar">
-          <form name=frm action="" method="post">
-          {% csrf_token %}
-          {% if message %}
-            {%if message == "Questions Uploaded Successfully"%}
-              <div class="alert alert-success alert-dismissable">
-                <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
-                  {{ message }}
-              </div>
-            {%else %}
-              <div class="alert alert-danger alert-dismissable"> 
-                <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
+    <!-- Show questions -->
+    <div id="show" class="tab-pane fade show active" role="tabpanel" aria-labelledby="showbar">
+      <form name=frm action="" method="post">
+        {% csrf_token %}
+        {% if message %}
+          {%if message == "Questions Uploaded Successfully"%}
+            <div class="alert alert-success alert-dismissable">
+              <a href="#" class="close" data-dismiss="alert" aria-label="close"><span class="fa fa-window-close"></span></a>
                 {{ message }}
-              </div>
-            {% endif %}
-          {% endif %}
-          {% if msg %}
-            <div class="alert alert-danger alert-dismissable animated flash"> 
-              <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
-              {{ msg }}
+            </div>
+          {%else %}
+            <div class="alert alert-danger alert-dismissable">
+              <a href="#" class="close" data-dismiss="alert" aria-label="close"><span class="fa fa-window-close"></span></a>
+              {{ message }}
             </div>
           {% endif %}
-          <br><br> 
-          <form name=frm action="" method="post">
-            <div class="card">
-              <div class="card-body">
+        {% endif %}
+        {% if msg %}
+          <div class="alert alert-danger alert-dismissable animated flash">
+            <a href="#" class="close" data-dismiss="alert" aria-label="close"><span class="fa fa-window-close"></span></a>
+            {{ msg }}
+          </div>
+        {% endif %}
+      </form>
+      <form name=frm action="" method="post">
+        <div class="card">
+          <div class="card-body">
             <!-- Filtering Questions  -->
-            <div class="row" id="selectors">
-                <h4 style="padding-left: 20px;">Filters Questions: </h4>
-                <div class="col-md-3">
-                    {{ form.question_type }}
-                </div>
-                <div class="col-md-3">
-                    {{ form.language }}
-                </div>
-                <div class="col-md-3">
-                    {{ form.marks }}
-                </div>
-                <br><br>
-                
+            <div id="selectors">
+              <h4>Filters Questions: </h4>
+              <div class="dropdown">
+                  {{ form.question_type }} {{ form.language }} {{ form.marks }}
+              </div>
             </div>
             <hr>
             <h4 >Or Search using Tags: </h4>
             <!-- Searching Tags -->
             {% csrf_token %}
-              <div class="col-md-14">
-                <div class="input-group">
-                  <div class="col-md-6">
-                          <div class="input-group"> 
-                              <div class="input-group-prepend">
-                              <span class="input-group-text" id="basic-addon1">Search Questions</span>
-                              </div>
-                              <input type="text" name="question_tags" id="question_tags" class="form-control" type="search"  placeholder="Search using comma separated Tags">
-                              <span class="input-group-append">
-                                  <button class="btn btn-outline-secondary" type="submit"><i class="fa fa-search yakshred"></i></button>
-                              </span>
-                          </div>                     
+            <div class="col-md-14">
+              <div class="input-group">
+                <div class="col-md-6">
+                  <div class="input-group">
+                    <div class="input-group-prepend">
+                      <span class="input-group-text" id="basic-addon1">Search Questions</span>
+                    </div>
+                    <input type="text" name="question_tags" id="question_tags" class="form-control" type="search"  placeholder="Search using comma separated Tags">
+                    <span class="input-group-append">
+                      <a class="btn btn-outline-secondary" type="submit"><i class="fa fa-search yakshred"></i></a>
+                    </span>
                   </div>
-
-                  <div class="col-md-6">
-                    <select class="form-control" id="sel1" onchange="append_tag(this);">
+                </div>
+                <div class="col-md-6">
+                  <select class="form-control" id="sel1" onchange="append_tag(this);">
                     {% if all_tags %}
                      <option value="" disabled selected>Available Tags</option>
                     {% for tag in all_tags %}
@@ -134,84 +128,65 @@
                     {% else %}
                      <option value="" disabled selected>No Available Tags</option>
                     {% endif %}
-                    </select>
-                  </div>
+                  </select>
                 </div>
-               </div>
-            <br><br>
-            <button class="btn btn-primary" type="button" onClick='location.replace("{{URL_ROOT}}");'>
-             Clear Filters</button>
-           </div>
-         </div>
-
-          <div id="filtered-questions">
+              </div>
+            </div>
+            <br/>
+            <a class="btn btn-lg btn-primary" href="{% url 'yaksh:show_questions' %}">
+             Clear Filters</a>
+          </div>
+        </div>
+        <div id="filtered-questions">
           {% if questions %}
-          <div class="yakshwell">
-            <h5><input id="checkall" type="checkbox"> Select All </h5>
-             <div class="table-wrapper-2">
-                <table id="questions-table" class="tablesorter table  table-striped table-responsive-sm">
+            <div>
+              <br>
+              {% include "yaksh/paginator.html" %}
+              <br>
+              <h5><input id="checkall" type="checkbox"> Select All </h5>
+               <div class="table-wrapper-2">
+                  <table id="questions-table" class="tablesorter table  table-striped table-responsive-sm">
                     <thead>
                       <tr class="yakshred">
-                      <th> Select </th>
-                      <th> Summary </th>
-                      <th> Language </th>
-                      <th> Type </th>  
-                      <th> Marks </th>
+                        <th> Select </th>
+                        <th> Summary </th>
+                        <th> Language </th>
+                        <th> Type </th>
+                        <th> Marks </th>
                       </tr>
                     </thead>
                     <tbody>              
                       {% for question in questions %}
                       <tr>
-                      <td>
-                      <input type="checkbox" name="question" value="{{ question.id }}">
-                      </td>
-                      <td><a href="{{URL_ROOT}}/exam/manage/addquestion/{{ question.id }}">{{question.summary|capfirst}}</a></td>
-                      <td>{{question.language|capfirst}}</td>
-                      <td>{{question.type|capfirst}}</td>
-                      <td>{{question.points}}</td>
+                        <td>
+                         <input type="checkbox" name="question" value="{{ question.id }}">
+                        </td>
+                        <td><a href="{% url 'yaksh:add_question' question.id %}">{{question.summary|capfirst}}</a></td>
+                        <td>{{question.language|capfirst}}</td>
+                        <td>{{question.type|capfirst}}</td>
+                        <td>{{question.points}}</td>
                       </tr>
                       {% endfor %}
                     </tbody>
-                </table>
-              </div>
-          </div>
+                  </table>
+                </div>
+            </div>
+          {% include "yaksh/paginator.html" %}
           {% endif %}
-          </div>
-          <br>
-          <center>
-            <button class="btn btn-primary" type="button" onclick='location.replace("{{URL_ROOT}}/exam/manage/addquestion/");'>Add Question <span class="glyphicon glyphicon-plus"></span></button>&nbsp;&nbsp;
-            {% if questions %}
-            <button class="btn btn-primary" type="submit" name='download' value='download'>Download Selected <span class="glyphicon glyphicon-save"></span></button>&nbsp;&nbsp;
-            <button class="btn btn-primary" type="submit" name="test" value="test">Test Selected</button>&nbsp;&nbsp;
-            {% endif %}
-            <button class="btn btn-danger" type="submit" onClick="return confirm_delete(frm);" name='delete' value='delete'>Delete Selected <span class="glyphicon glyphicon-minus"></span></button>
-          </center>
-        </form>
-      </div>
-      <!-- End of Show questions -->
+        </div>
+        <center>
+          <a class="btn btn-lg btn-primary" href="{% url 'yaksh:add_question' %}">Add Question</a>
+
+          {% if questions %}
+            <button class="btn btn-lg btn-primary" type="submit" name='download' value='download'>Download Selected</button>
+            <button class="btn btn-lg btn-primary" type="submit" name="test" value="test">Test Selected</button>
+          {% endif %}
+          <button class="btn btn-lg btn-danger" type="submit" onClick="return confirm_delete(frm);" name='delete' value='delete'>Delete Selected</button>
+        </center>
+      </form>
     </div>
-    </main>
+    <!-- End of Show questions -->
+  </div>
 </div>
 {% endblock %}
 
-{% block footer %}
-  <!--footer-->   
-  <footer class="container-fluid yakshsidebarfooter text-center">
-    <div class="row justify-content-center">
-    <div class="col-sm-5 ">
-      {% if user %}
-         {% block info %}
-         <b>{{user.get_full_name|title}}</b> with Roll no. <b>{{user.profile.roll_number}}</b> is logged in as <b>{{user.username}}</b>
-         {% endblock %}
-         {% endif %}
-    </div>
-    <div class="col-sm-2">
-      |
-    </div>
-    <div class="col-sm-4 text-left">
-     <b>Any Queries?</b> Email : info@fossee.in
-    </div>
-  </div>
-  </footer>
-  <!--footer end-->
-{% endblock %}
-\ No newline at end of file
diff --git a/yaksh/views.py b/yaksh/views.py
index 7e9b706..f5a4b82 100644
--- a/yaksh/views.py
+++ b/yaksh/views.py
@@ -1324,10 +1324,21 @@ def ajax_questions_filter(request):
 
     if language:
         filter_dict['language'] = str(language)
-    questions = Question.objects.filter(**filter_dict)
-
+    questions = Question.objects.get_queryset().filter(
+                **filter_dict).order_by('id')
+    paginator = Paginator(questions, 10)
+    page = request.GET.get('page')
+    try:
+        questions = paginator.page(page)
+    except PageNotAnInteger:
+        questions = paginator.page(1)
+    except EmptyPage:
+        questions = paginator.page(paginator.num_pages)
     return my_render_to_response(
-        request, 'yaksh/ajax_question_filter.html', {'questions': questions}
+        request, 'yaksh/ajax_question_filter.html', {
+            'questions': questions,
+            'objects': questions
+        }
     )
 
 
@@ -1492,12 +1503,22 @@ def show_all_questions(request):
     if not is_moderator(user):
         raise Http404("You are not allowed to view this page !")
 
-    questions = Question.objects.filter(user_id=user.id, active=True)
+    questions = Question.objects.get_queryset().filter(
+                user_id=user.id, active=True).order_by('id')
     form = QuestionFilterForm(user=user)
     user_tags = questions.values_list('tags', flat=True).distinct()
     all_tags = Tag.objects.filter(id__in=user_tags)
     upload_form = UploadFileForm()
+    paginator = Paginator(questions, 10)
+    page = request.GET.get('page')
+    try:
+        questions = paginator.page(page)
+    except PageNotAnInteger:
+        questions = paginator.page(1)
+    except EmptyPage:
+        questions = paginator.page(paginator.num_pages)
     context['questions'] = questions
+    context['objects'] = questions
     context['all_tags'] = all_tags
     context['papers'] = []
     context['question'] = None
author	Akash Chavan	2020-01-02 16:24:00 +0530
committer	GitHub	2020-01-02 16:24:00 +0530
commit	293e95bd0920d2f06058cf3ee4c0be3c2b3cf905 (patch)
tree	8cfc13994d38714df26478c85a34ec70741bfab3 /yaksh
parent	eb05d4b0bc3fd0e2ce5160f30251bd9b939ccef6 (diff)
parent	e7f83b0f9e098ffb4066fce50f1d60972b5edfcb (diff)
download	online_test-293e95bd0920d2f06058cf3ee4c0be3c2b3cf905.tar.gz online_test-293e95bd0920d2f06058cf3ee4c0be3c2b3cf905.tar.bz2 online_test-293e95bd0920d2f06058cf3ee4c0be3c2b3cf905.zip