From d0518ea2f56664a0933caac16df7a61bdf764d62 Mon Sep 17 00:00:00 2001
From: adityacp
Date: Thu, 30 Jan 2020 11:45:34 +0530
Subject: Change js and templates

- Show selected files in the file input in lesson.js
- Show lesson content properly in students page
- Remove unnecessary div for video embed iframe
---
 yaksh/static/yaksh/js/lesson.js            | 15 ++++--
 yaksh/templates/manage.html                | 57 +++++++++++-----------
 yaksh/templates/yaksh/add_lesson.html      | 78 +++++++++++++++---------------
 yaksh/templates/yaksh/course_students.html |  2 +-
 yaksh/templates/yaksh/show_video.html      | 53 ++++++++++----------
 5 files changed, 107 insertions(+), 98 deletions(-)

diff --git a/yaksh/static/yaksh/js/lesson.js b/yaksh/static/yaksh/js/lesson.js
index a86cf1b..55d4846 100644
--- a/yaksh/static/yaksh/js/lesson.js
+++ b/yaksh/static/yaksh/js/lesson.js
@@ -44,9 +44,9 @@ $(document).ready(function(){
     $("#embed").click(function() {
         $("#dialog_iframe").toggle();
         $("#dialog_iframe").dialog({
-            resizable: false,
-            height: '300',
-            width: '450'
+            resizable: true,
+            height: '450',
+            width: '640'
         });
     });
 
@@ -84,4 +84,13 @@ $(document).ready(function(){
         }
         $(this).next('.custom-file-label').html(files.join(', '));
     });
+
+    $('#id_Lesson_files').on('change',function(){
+        //get the file name
+        var files = [];
+        for (var i = 0; i < $(this)[0].files.length; i++) {
+            files.push($(this)[0].files[i].name);
+        }
+        $(this).next('.custom-file-label').html(files.join(', '));
+    });
 });
diff --git a/yaksh/templates/manage.html b/yaksh/templates/manage.html
index 9557582..8e74494 100644
--- a/yaksh/templates/manage.html
+++ b/yaksh/templates/manage.html
@@ -46,38 +46,35 @@
     </div>
 </nav>
 
+<!-- iframe div for video embed -->
+<div id="iframe_div" style="display: none;">
+  <iframe class="embed-responsive-item" id="video_frame" width="640" height="480" allowfullscreen>
+  </iframe>
+</div>
+<!-- end iframe div -->
 
-
-    <!-- iframe div for video embed -->
-    <div id="iframe_div" style="display: none;">
-      <div class="embed-responsive embed-responsive-16by9" style=" position: relative;">
-        <iframe class="embed-responsive-item" id="video_frame" width="800" height="500"  allowfullscreen>
-        </iframe>
-        <div style="width: 80px; height: 80px; position: absolute; opacity: 0; right: 0px; top: 0px;">&nbsp;
-        </div>
-      </div>
-    </div>
-    <!-- end iframe div -->
-
-    <!-- Dialog to video embed -->
-    <div id="dialog_iframe" title="Embed Video URL" style="display: none;">
-      <label>Enter embed url:</label>
-      <input id="url" name="url" type="text" required="true">
-      <input type="button" id="submit_info" name="submit_info" class="btn" value="Submit" />
-      <div id="error_div" style="display: none;">
-          <b> Please enter URL</b>
-      </div>
-      <div id="copy_div">
-          <br>
-          <label>Paste HTML to embed in website:</label>
-          <textarea rows="5" cols="35" id="html_text"></textarea>
-          <br>
-          <a class="btn btn-default" id="copy" data-toggle="tooltip" title="Copy to Clipboard">
-              <i class="fa fa-clipboard" aria-hidden="true"></i>
-          </a>
-      </div>
+<!-- Dialog to video embed -->
+<div id="dialog_iframe" title="Embed Video URL" style="display: none;">
+  <div class="input-group mb-3">
+    <input id="url" name="url" type="text" required="true" class="form-control" placeholder="Enter video link">
+    <div class="input-group-append">
+        <input type="button" id="submit_info" name="submit_info" class="btn btn-primary" value="Submit" />
     </div>
-    <!-- end dialog -->
+  </div>
+  <div id="error_div" style="display: none;">
+      <b> Please enter URL</b>
+  </div>
+  <div id="copy_div">
+      <br>
+      <label>Paste HTML to embed in website:</label>
+      <textarea id="html_text" class="form-control" rows="5" cols="100"></textarea>
+      <br>
+      <a class="btn btn-secondary" id="copy" data-toggle="tooltip" title="Copy to Clipboard">
+          <i class="fa fa-clipboard" aria-hidden="true"></i>
+      </a>
+  </div>
+</div>
+<!-- end dialog -->
 
 {% endblock %}
 {% block content %}
diff --git a/yaksh/templates/yaksh/add_lesson.html b/yaksh/templates/yaksh/add_lesson.html
index cbef893..99fc31a 100644
--- a/yaksh/templates/yaksh/add_lesson.html
+++ b/yaksh/templates/yaksh/add_lesson.html
@@ -53,18 +53,9 @@
             <form name=frm id=frm action="" method="post" enctype="multipart/form-data">
                 <fieldset>
                     {% csrf_token %}
-                        {% if lesson_form.errors %}
-                            {% for field in lesson_form %}
-                                {% 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 form.non_field_errors %}
+                    {% if lesson_form.errors %}
+                        {% for field in lesson_form %}
+                            {% 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>
@@ -72,36 +63,45 @@
                                     <strong>{{ error|escape }}</strong>
                                 </div>
                             {% endfor %}
-                        {% endif %}
-                        {{lesson_form.name}}
-                        <br>
-                        {{lesson_form.description}}
-                        <br>
-                        Active:&nbsp;{{lesson_form.active}}
-                        <br><br>
-                        Video File:
-                        <span class="badge badge-info">
-                            {{lesson_form.video_file.help_text}}
-                        </span>
-                        <div class="input-group mb-3">
-                            <div class="custom-file">
-                                {{lesson_form.video_file}}
-                                <label class="custom-file-label" for="id_video_file">
-                                    Choose file
-                                </label>
+                        {% endfor %}
+                        {% for error in lesson_form.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 %}
+                    {{lesson_form.name}}
+                    <br>
+                    {{lesson_form.description}}
+                    <br>
+                    Active:&nbsp;{{lesson_form.active}}
+                    <br><br>
+                    Video File:
+                    <span class="badge badge-info">
+                        {{lesson_form.video_file.help_text}}
+                    </span>
+                    <div class="input-group mb-3">
+                        <div class="custom-file">
+                            {{lesson_form.video_file}}
+                            <label class="custom-file-label" for="id_video_file">
+                                Choose file
+                            </label>
                         </div>
-                        <br>
-                        Lesson Files:
-                        <div class="input-group mb-3">
-                            <div class="custom-file">
-                                {{lesson_file_form.Lesson_files}}
-                                <label class="custom-file-label" for="id_video_file">
-                                    Choose file
-                                </label>
-                            </div>
+                    </div>
+                    <br>
+                    Lesson Files:
+                    <div class="input-group mb-3">
+                        <div class="custom-file">
+                            {{lesson_file_form.Lesson_files}}
+                            <label class="custom-file-label" for="id_video_file">
+                                Choose file
+                            </label>
                         </div>
-                        <br>
+                    </div>
+                    <br>
                     {% if lesson_files %}
                     <center>
                     <div class="alert alert-info">
diff --git a/yaksh/templates/yaksh/course_students.html b/yaksh/templates/yaksh/course_students.html
index ae35251..03c57b8 100644
--- a/yaksh/templates/yaksh/course_students.html
+++ b/yaksh/templates/yaksh/course_students.html
@@ -17,7 +17,7 @@
                     <label class="custom-file-label" for="upload">Choose file</label>
                 </div>
                 <div class="input-group-append">
-                    <button class="btn btn-outline-primary" type=submit>
+                    <button class="btn btn-outline-primary" type="submit">
                         <i class="fa fa-upload"></i>
                         Upload
                     </button>
diff --git a/yaksh/templates/yaksh/show_video.html b/yaksh/templates/yaksh/show_video.html
index 967b793..42c7ee2 100644
--- a/yaksh/templates/yaksh/show_video.html
+++ b/yaksh/templates/yaksh/show_video.html
@@ -2,7 +2,6 @@
 {% load custom_filters %}
 
 {% block title %} {{ learning_module.name }} {% endblock %}
-    
 
 {% block main %}
 <div class="wrapper">
@@ -82,14 +81,10 @@
         <br><br>
         <ol class="breadcrumb">
             <li class="breadcrumb-item">
-                <a href="{% url 'yaksh:course_modules' course.id %}">
-                    {{course.name}}
-                </a>
+                {{course.name}}
             </li>
             <li class="breadcrumb-item">
-                <a href="{% url 'yaksh:view_module' learning_module.id course.id %}">
-                    {{ learning_module.name }}
-                </a>
+                {{ learning_module.name }}
             </li>
             {% if state == "lesson" %}
                 <li class="breadcrumb-item active">{{lesson.name}}</li>
@@ -108,30 +103,38 @@
             </center>
         {% endif %}
 
+
         {% if state == "module" %}  <!-- Module instructions body -->
-            {% if first_unit %}
-                <a href="{% url 'yaksh:next_unit' course.id learning_module.id first_unit.id '1' %}" class="btn btn-success">Start
-                    <i class="fa fa-play">
-                    </i>
-                </a>
-            {% else %}
-                <a href="{% url 'yaksh:next_unit' course.id learning_module.id %}" class="btn btn-success">Next
-                    <i class="fa fa-step-forward">
-                    </i>
-                </a>
-            {% endif %}
-            <br><br>
             {% if learning_module.html_data %}
-                {{learning_module.html_data|safe}}
+            <div></div>
+                <center>
+                    {{learning_module.html_data|safe}}
+                    <br>
+                    {% if first_unit %}
+                        <a href="{% url 'yaksh:next_unit' course.id learning_module.id first_unit.id '1' %}" class="btn btn-success btn-lg">Start
+                            <i class="fa fa-play">
+                            </i>
+                        </a>
+                    {% else %}
+                        <a href="{% url 'yaksh:next_unit' course.id learning_module.id %}" class="btn btn-success btn-lg">Next
+                            <i class="fa fa-step-forward">
+                            </i>
+                        </a>
+                    {% endif %}
+                </center>
             {% else %}
                 No Module information
             {% endif %}
         {% else %}    <!--  Lesson body   -->
-            <a href="{% url 'yaksh:next_unit' course.id learning_module.id current_unit.id %}" class="btn btn-info" >
-                Next&nbsp;<i class="fa fa-step-forward"></i>
-            </a>
-            <br><br>
-            {{lesson.html_data|safe}}
+            <div>
+                <center>
+                {{lesson.html_data|safe}}
+                <br>
+                <a href="{% url 'yaksh:next_unit' course.id learning_module.id current_unit.id %}" class="btn btn-info btn-lg" >
+                    Next&nbsp;<i class="fa fa-step-forward"></i>
+                </a>
+                </center>
+            </div>
             <br>
             {% with lesson.get_files as lesson_files %}
                 {% if lesson_files %}
-- 
cgit