Add TinyMCE, fix minor progressbar issues

9 files changed, 131 insertions, 28 deletions

diff --git a/yaksh/static/yaksh/js/add_course.js b/yaksh/static/yaksh/js/add_course.js
new file mode 100644
index 0000000..0fba2e9
--- /dev/null
+++ b/yaksh/static/yaksh/js/add_course.js
@@ -0,0 +1,16 @@
+$(document).ready(function () {
+    $(function() {
+        tinymce.init({
+            selector: 'textarea#id_instructions',
+            setup : function(ed) {
+                  ed.on('change', function(e) {
+                     tinymce.triggerSave();
+                  });
+            },
+            max_height: 400,
+            height: 400,
+            plugins: "image code link",
+            convert_urls: false
+        });
+    });
+});
diff --git a/yaksh/static/yaksh/js/add_grades.js b/yaksh/static/yaksh/js/add_grades.js
new file mode 100644
index 0000000..151fef1
--- /dev/null
+++ b/yaksh/static/yaksh/js/add_grades.js
@@ -0,0 +1,14 @@
+$(function() {
+        tinymce.init({
+            selector: 'textarea#id_description',
+            setup : function(ed) {
+                  ed.on('change', function(e) {
+                     tinymce.triggerSave();
+                  });
+            },
+            max_height: 400,
+            height: 400,
+            plugins: "image code link",
+            convert_urls: false
+        });
+    });
diff --git a/yaksh/static/yaksh/js/add_quiz.js b/yaksh/static/yaksh/js/add_quiz.js
index dab5a3d..38a9dc8 100644
--- a/yaksh/static/yaksh/js/add_quiz.js
+++ b/yaksh/static/yaksh/js/add_quiz.js
@@ -1,6 +1,5 @@
 function test()
 {
-
 	document.getElementById('id_duration').setAttribute('class','mini-text form-control');
 	document.getElementById('id_pass_criteria').setAttribute('class','mini-text form-control');
     if (document.getElementById("id_description").value != "")
@@ -13,6 +12,18 @@ function test()
     document.getElementById('rendered_text').innerHTML = document.getElementById('id_instructions').value ;
   });
     document.getElementById('rendered_text').innerHTML = document.getElementById('id_instructions').value ;
+    tinymce.init({
+        selector: 'textarea#id_instructions',
+        setup : function(ed) {
+              ed.on('change', function(e) {
+                 tinymce.triggerSave();
+              });
+        },
+        max_height: 400,
+        height: 400,
+        plugins: "image code link",
+        convert_urls: false
+    });
 }
 
 String.prototype.beginsWith = function (string) {
diff --git a/yaksh/static/yaksh/js/lesson.js b/yaksh/static/yaksh/js/lesson.js
index 6eaf6c6..23446dc 100644
--- a/yaksh/static/yaksh/js/lesson.js
+++ b/yaksh/static/yaksh/js/lesson.js
@@ -90,4 +90,18 @@ $(document).ready(function(){
         }
         $(this).next('.custom-file-label').html(files.join(', '));
     });
+    $(function() {
+        tinymce.init({
+            selector: 'textarea#id_description',
+            setup : function(ed) {
+                  ed.on('change', function(e) {
+                     tinymce.triggerSave();
+                  });
+            },
+            max_height: 400,
+            height: 400,
+            plugins: "image code link",
+            convert_urls: false
+        });
+    });
 });
diff --git a/yaksh/templates/yaksh/add_course.html b/yaksh/templates/yaksh/add_course.html
index 0072a95..07ac81b 100644
--- a/yaksh/templates/yaksh/add_course.html
+++ b/yaksh/templates/yaksh/add_course.html
@@ -6,8 +6,10 @@
 {% 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/jquery.datetimepicker.full.min.js' %}">
 </script>
+<script type="text/javascript" src="{% static 'yaksh/js/add_course.js' %}"></script>
 {% endblock %}
 {% block title %} Add Course {% endblock %}
 {% block pagetitle %} Add Course {% endblock %}
diff --git a/yaksh/templates/yaksh/add_lesson.html b/yaksh/templates/yaksh/add_lesson.html
index 4211b1b..49675f2 100644
--- a/yaksh/templates/yaksh/add_lesson.html
+++ b/yaksh/templates/yaksh/add_lesson.html
@@ -9,8 +9,10 @@
 </script>
 <script type="text/javascript" src="{% static 'yaksh/js/jquery-ui.js' %}">
 </script>
+<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>
+
 {% endblock %}
 
 {% block css %}
@@ -155,4 +157,4 @@
         </div>
     </div>
 </div>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/yaksh/templates/yaksh/add_module.html b/yaksh/templates/yaksh/add_module.html
index 7112485..a4d1d35 100644
--- a/yaksh/templates/yaksh/add_module.html
+++ b/yaksh/templates/yaksh/add_module.html
@@ -1,18 +1,16 @@
 {% extends "manage.html" %}
 {% load static %}
-{% block title %}Create/Edit Learning Module{% endblock %}
+{% block title %}
+    Create/Edit Learning Module
+{% endblock %}
 
 {% block script %}
-<script type="text/javascript" src="{% static 'yaksh/js/jquery-3.3.1.min.js' %}">
-</script>
-<script type="text/javascript" src="{% static 'yaksh/js/design_course.js' %}">
-</script>
-<script type="text/javascript" src="{% static 'yaksh/js/lesson.js' %}">
-</script>
-<script type="text/javascript" src="{% static 'yaksh/js/jquery-ui.js' %}">
-</script>
-<script type="text/javascript" src="{% static 'yaksh/js/mathjax/MathJax.js' %}?config=TeX-MML-AM_CHTML">
-</script>
+<script type="text/javascript" src="{% static 'yaksh/js/jquery-3.3.1.min.js' %}"></script>
+<script type="text/javascript" src="{% static 'yaksh/js/design_course.js' %}"></script>
+<script type="text/javascript" src="{% static 'yaksh/js/lesson.js' %}"></script>
+<script type="text/javascript" src="{% static 'yaksh/js/tinymce/js/tinymce/tinymce.min.js' %}"></script>
+<script type="text/javascript" src="{% static 'yaksh/js/jquery-ui.js' %}"></script>
+<script type="text/javascript" src="{% static 'yaksh/js/mathjax/MathJax.js' %}?config=TeX-MML-AM_CHTML"></script>
 {% endblock %}
 
 {% block css %}
diff --git a/yaksh/templates/yaksh/add_quiz.html b/yaksh/templates/yaksh/add_quiz.html
index 9b80e0d..7918858 100644
--- a/yaksh/templates/yaksh/add_quiz.html
+++ b/yaksh/templates/yaksh/add_quiz.html
@@ -12,6 +12,7 @@
 {% block script %}
 
 <script src="{% static 'yaksh/js/jquery-3.3.1.min.js' %}"></script>
+<script type="text/javascript" src="{% static 'yaksh/js/tinymce/js/tinymce/tinymce.min.js' %}"></script>
 <script src="{% static 'yaksh/js/add_quiz.js' %}"></script>
 <script src="{% static 'yaksh/js/jquery.datetimepicker.full.min.js' %}"></script>
 <script type="text/javascript">
diff --git a/yaksh/templates/yaksh/user_status.html b/yaksh/templates/yaksh/user_status.html
index 5f006c9..5a7cb3d 100644
--- a/yaksh/templates/yaksh/user_status.html
+++ b/yaksh/templates/yaksh/user_status.html
@@ -3,18 +3,39 @@
     <br>
     <strong>Overall Course Progress:</strong>
     <div class="progress">
-        {% if course_percentage <= 50 %}
-            <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="40"
-            aria-valuemin="0" aria-valuemax="100" style="width:{{course_percentage}}%">
+        {% if course_percentage == 0  %}
+            <b style="color: black;">{{course_percentage}}% Completed</b>
+        {% elif course_percentage <= 50 %}
+            <div
+                class="progress-bar progress-bar-danger"
+                role="progressbar"
+                aria-valuenow="40"
+                aria-valuemin="0"
+                aria-valuemax="100"
+                style="width:{{course_percentage}}%">
+                    <b style="color: black;">{{course_percentage}}% Completed</b>
+            </div>
         {% elif course_percentage <= 75 %}
-            <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="40"
-            aria-valuemin="0" aria-valuemax="100" style="width:{{course_percentage}}%">
+            <div
+                class="progress-bar progress-bar-warning"
+                role="progressbar"
+                aria-valuenow="40"
+                aria-valuemin="0"
+                aria-valuemax="100"
+                style="width:{{course_percentage}}%">
+                    <b style="color: black;">{{course_percentage}}% Completed</b>
+            </div>
         {% else %}
-            <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40"
-            aria-valuemin="0" aria-valuemax="100" style="width:{{course_percentage}}%">
+            <div
+                class="progress-bar progress-bar-success"
+                role="progressbar"
+                aria-valuenow="40"
+                aria-valuemin="0"
+                aria-valuemax="100"
+                style="width:{{course_percentage}}%">
+                    <b style="color: black;">{{course_percentage}}% Completed</b>
+            </div>
         {% endif %}
-        <b style="color: black;">{{course_percentage}}% Completed</b>
-        </div>
     </div>
     <br>
     <strong>Per Module Progress:</strong>
@@ -25,15 +46,39 @@
                 <td width="30%">{{ module.name }}</td>
                 <td>
                     <div class="progress">
-                        {% if percent <= 50 %}
-                        <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:{{percent}}%">
+                        {% if percent == 0  %}
+                            <b style="color: black;">{{percent}}% Completed</b>
+                        {% elif percent <= 50 %}
+                            <div
+                                class="progress-bar progress-bar-danger"
+                                role="progressbar"
+                                aria-valuenow="40"
+                                aria-valuemin="0"
+                                aria-valuemax="100"
+                                style="width:{{percent}}%">
+                                    <b style="color: black;">{{percent}}% Completed</b>
+                            </div>
                         {% elif percent <= 75 %}
-                        <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:{{percent}}%">
+                            <div
+                                class="progress-bar progress-bar-warning"
+                                role="progressbar"
+                                aria-valuenow="40"
+                                aria-valuemin="0"
+                                aria-valuemax="100"
+                                style="width:{{percent}}%">
+                                    <b style="color: black;">{{percent}}% Completed</b>
+                            </div>
                         {% else %}
-                        <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:{{percent}}%">
+                            <div
+                                class="progress-bar progress-bar-success"
+                                role="progressbar"
+                                aria-valuenow="40"
+                                aria-valuemin="0"
+                                aria-valuemax="100"
+                                style="width:{{percent}}%">
+                                    <b style="color: black;">{{percent}}% Completed</b>
+                            </div>
                         {% endif %}
-                        <b style="color: black;">{{percent}}% Completed</b>
-                        </div>
                     </div>
                 </td>
             </tr>