Show table of contents on adding new content

6 files changed, 122 insertions, 33 deletions

diff --git a/yaksh/static/yaksh/js/add_question.js b/yaksh/static/yaksh/js/add_question.js
index 480ce51..479e8da 100644
--- a/yaksh/static/yaksh/js/add_question.js
+++ b/yaksh/static/yaksh/js/add_question.js
@@ -195,16 +195,20 @@ $(document).ready(() => {
     let option = $('#id_language').val();
     if(option === 'other') {
         $('#id_topic').closest('tr').show();
+        $('#id_topic').prop("required", true);
     } else {
+        $('#id_topic').prop("required", false);
         $('#id_topic').closest('tr').hide();
     }
     $('#id_language').change(function() {
         let value = $(this).val();
         if (value === "other") {
             $('#id_topic').closest('tr').show();
+            $('#id_topic').prop("required", true);
             $('#id_type').children("option[value='code']").hide();
         } else {
             $('#id_topic').closest('tr').hide();
+            $('#id_topic').prop("required", false);
             $('#id_type').children("option[value='code']").show();
         }
     });
@@ -216,4 +220,11 @@ $(document).ready(() => {
             $('#id_language').children("option[value='other']").show();
         }
     })
+    $('#add_more').click(function() {
+        var form_idx = $(tc_type).val();
+        $('#form_set').append($('#empty_form').html().replace(/__prefix__/g, form_idx));
+        $(tc_type).val(parseInt(form_idx) + 1);
+        var form_type = "#id_"+'{{tc_class}}'+"_set-"+form_idx+"-type";
+        $(form_type).val($("#id_"+'{{tc_class}}'+"_set-0-type").val());
+    });
 });
\ No newline at end of file
diff --git a/yaksh/static/yaksh/js/lesson.js b/yaksh/static/yaksh/js/lesson.js
index c0f64ed..38db7d2 100644
--- a/yaksh/static/yaksh/js/lesson.js
+++ b/yaksh/static/yaksh/js/lesson.js
@@ -45,40 +45,54 @@ $(document).ready(function() {
     // Marker Form
     $("#marker-form").submit(function(e) {
         e.preventDefault();
-        $("#loader").show();
-        ajax_call($(this).attr("action"), 'POST', $(this).serializeArray());
+        lock_screen();
+        var csrf = document.getElementById("marker-form").elements[0].value;
+        ajax_call($(this).attr("action"), $(this).attr("method"), $(this).serialize(), csrf);
     });
 
-    function ajax_call(url, method, data) {
+    function ajax_call(url, method, data, csrf) {
         $.ajax({
             url: url,
             timeout: 15000,
-            type: method,
-            data: JSON.stringify(data),
-            dataType: 'json',
-            contentType: 'application/json; charset=utf-8',
+            method: method,
+            data: data,
             beforeSend: function(xhr, settings) {
               if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
-                var csrftoken = data[0].value
-                xhr.setRequestHeader("X-CSRFToken", csrftoken);
+                xhr.setRequestHeader("X-CSRFToken", csrf);
               }
             },
             success: function(msg) {
-                $("#loader").hide();
+                unlock_screen();
                 if (msg.success) {
                     if (msg.status) $("#lesson-content").html(msg.data);
                     if (msg.content_type === '1') {
                         add_topic();
                     }
-                    else if(msg.content_type === '2') {
+                    else {
                         add_question();   
                     }
                 }
+                if (msg.toc) show_toc(msg.toc);
                 if (msg.message) alert(msg.message)
             },
-            error: function(jqXHR, textStatus) {
-                $("#loader").hide();
-                alert("Cannot add the marker. Please try again");
+            error: function(xhr, data) {
+                switch(xhr.status) {
+                    case 400: {
+                        unlock_screen();
+                        console.log(data.responseJSON);
+                        break;
+                    }
+                    case 500: {
+                        unlock_screen();
+                        alert('500 status code! server error');
+                        break;
+                    }
+                    case 404: {
+                        unlock_screen();
+                        alert('404 status code! server error');
+                        break;
+                    }
+                }
             }
         });
     }
@@ -89,8 +103,9 @@ $(document).ready(function() {
         }
         $("#topic-form").submit(function(e) {
             e.preventDefault();
-            $("#loader").show();
-            ajax_call($(this).attr("action"), 'POST', $(this).serializeArray());
+            lock_screen();
+            var csrf = document.getElementById("topic-form").elements[0].value;
+            ajax_call($(this).attr("action"), $(this).attr("method"), $(this).serialize(), csrf);
         });
     }
 
@@ -100,11 +115,29 @@ $(document).ready(function() {
         }
         $("#question-form").submit(function(e) {
             e.preventDefault();
-            $("#loader").show();
-            ajax_call($(this).attr("action"), 'POST', $(this).serializeArray());
+            lock_screen();
+            var csrf = document.getElementById("question-form").elements[0].value;
+            ajax_call($(this).attr("action"), $(this).attr("method"), $(this).serialize(), csrf);
         });
     }
 
+    function lock_screen() {
+        document.getElementById("ontop").style.display = "block";
+    }
+
+    function unlock_screen() {
+        document.getElementById("ontop").style.display = "none";
+    }
+
+    function show_error() {
+
+    }
+
+    function show_toc(toc) {
+        $("#lesson-content").empty();
+        $("#toc").html(toc);
+    }
+
     $('#id_video_file').on('change',function(){
         //get the file name
         var files = [];
diff --git a/yaksh/templates/yaksh/add_lesson.html b/yaksh/templates/yaksh/add_lesson.html
index 71477e7..62aa881 100644
--- a/yaksh/templates/yaksh/add_lesson.html
+++ b/yaksh/templates/yaksh/add_lesson.html
@@ -146,8 +146,8 @@
                         Table Of Contents&nbsp;<i class="fa fa-angle-down"></i>
                     </a>
                 </div>
-                <div class="collapse hide" id="toc-collapse">
-                    <div class="card-body" id="toc"></div>
+                <div class="collapse show" id="toc-collapse">
+                    <div class="card-body" id="toc">{{toc}}</div>
                 </div>
             </div>
             <br>
@@ -160,11 +160,7 @@
                         {% with lesson_form.instance.video_path|video_name as video %}
                         <div id="player" data-plyr-provider="{{video.1}}" data-plyr-embed-id="{{video.0}}"></div>
                         <br>
-                        <div style="display: none" id="loader">
-                            <span class="spinner-border text-success"></span>
-                            Loading...
-                        </div>
-                        <form action="{% url 'yaksh:add_marker' course_id lesson_form.instance.id %}" method="POST" id="marker-form">
+                        <form action="{% url 'yaksh:add_marker' course_id lesson_form.instance.id %}" method="POST" id="marker-form" name="marker-form">
                             {% csrf_token %}
                             <div class="row">
                                 <div class="col-md-3">
diff --git a/yaksh/templates/yaksh/add_topic.html b/yaksh/templates/yaksh/add_topic.html
index 6f88a88..8c8fdb3 100644
--- a/yaksh/templates/yaksh/add_topic.html
+++ b/yaksh/templates/yaksh/add_topic.html
@@ -1,7 +1,7 @@
 {% if topic_id %}
-<form class="form-group" method="POST" action="{% url 'yaksh:edit_topic' course_id lesson_id topic_id %}" id="topic-form">
+<form class="form-group" method="POST" action="{% url 'yaksh:edit_topic' content_type course_id lesson_id topic_id %}" id="topic-form">
 {% else %}
-<form class="form-group" method="POST" action="{% url 'yaksh:add_topic' course_id lesson_id %}" id="topic-form">
+<form class="form-group" method="POST" action="{% url 'yaksh:add_topic' content_type course_id lesson_id %}" id="topic-form">
 {% endif %}
     {% csrf_token %}
     {{ form.as_p }}
diff --git a/yaksh/templates/yaksh/add_video_quiz.html b/yaksh/templates/yaksh/add_video_quiz.html
index 5c8db5f..cf59fcb 100644
--- a/yaksh/templates/yaksh/add_video_quiz.html
+++ b/yaksh/templates/yaksh/add_video_quiz.html
@@ -1,7 +1,11 @@
+{% load static %}
+<script type="text/javascript" src="{% static 'yaksh/js/tinymce/js/tinymce/tinymce.min.js' %}"></script>
+<script type="text/javascript" src="{% static 'yaksh/js/mathjax/MathJax.js' %}?config=TeX-MML-AM_CHTML">
+</script>
 {% if question_id %}
-<form class="form-group" method="POST" action="{% url 'yaksh:edit_marker_quiz' course_id lesson_id question_id %}" id="question-form">
+<form class="form-group" method="POST" action="{% url 'yaksh:edit_marker_quiz' content_type course_id lesson_id question_id %}" id="question-form">
 {% else %}
-<form class="form-group" method="POST" action="{% url 'yaksh:add_marker_quiz' course_id lesson_id %}" id="question-form">
+<form class="form-group" method="POST" action="{% url 'yaksh:add_marker_quiz' content_type course_id lesson_id %}" id="question-form">
 {% endif %}
     {% csrf_token %}
     <table class="table table-responsive-sm">
@@ -39,7 +43,7 @@
     </button>
 </form>
 <script type="text/javascript">
-    $(document).ready(function(){
+    $(document).ready(function() {
         var tc_type = "#id_"+"{{tc_class}}"+"_set-TOTAL_FORMS";
         $('#add_more').click(function() {
             var form_idx = $(tc_type).val();
@@ -53,22 +57,38 @@
             $(this).find('input[type=number]').addClass("form-control");
         });
         let option = $('#id_language').val();
-        console.log(option);
         if(option === 'other') {
             $('#id_topic').closest('tr').show();
+            $('#id_topic').prop("required", true);
         } else {
             $('#id_topic').closest('tr').hide();
+            $('#id_topic').prop("required", false);
         }
         $('#id_language').on('change', function() {
             let lang_value = $(this).val();
-            console.log(lang_value);
             if (lang_value === "other") {
                 $('#id_topic').closest('tr').show();
+                $('#id_topic').prop("required", true);
                 $('#id_type').children("option[value='code']").hide();
             } else {
                 $('#id_topic').closest('tr').hide();
+                $('#id_topic').prop("required", false);
                 $('#id_type').children("option[value='code']").show();
             }
         });
+        function init_editor() {
+            tinymce.init({
+                selector : "textarea",
+                setup : function(ed) {
+                      ed.on('change', function(e) {
+                         tinymce.triggerSave();
+                      });
+                },
+                max_height: 400,
+                height: 400,
+                plugins: "image code link",
+                convert_urls: false
+            });
+        }
     });
-</script>
+</script>
\ No newline at end of file
diff --git a/yaksh/templates/yaksh/show_toc.html b/yaksh/templates/yaksh/show_toc.html
new file mode 100644
index 0000000..85bcf40
--- /dev/null
+++ b/yaksh/templates/yaksh/show_toc.html
@@ -0,0 +1,29 @@
+<table class="table table-responsive-sm">
+{% for toc in contents %}
+    <tr>
+        <td>
+            {{ toc.get_toc_text }}
+        </td>
+        <td>
+            {{toc.get_content_display}}   
+        </td>
+        <td>
+            {{toc.time}}
+        </td>
+        <td>
+            {% if toc.content == 1 %}
+                <a href="#" class="btn btn-outline-primary" data-url="{% url 'yaksh:edit_topic' toc.content toc.course_id toc.lesson_id toc.object_id %}">
+            {% else %}
+                <a href="#" class="btn btn-outline-primary" data-url="{% url 'yaksh:edit_marker_quiz' toc.content toc.course_id toc.lesson_id toc.object_id %}">
+            {% endif %}
+                    <i class="fa fa-edit">&nbsp;Edit</i>
+                </a>
+        </td>
+        <td>
+            <a href="#" class="btn btn-outline-danger">
+                <i class="fa fa-trash">&nbsp;Delete</i>
+            </a>
+        </td>
+    </tr>
+{% endfor %}
+</table>
\ No newline at end of file