diff options
| -rw-r--r-- | static/website/css/main.css | 9 | ||||
| -rw-r--r-- | static/website/js/custom.js | 22 | ||||
| -rw-r--r-- | static/website/js/thread-user.js | 60 | ||||
| -rw-r--r-- | static/website/templates/ajax-similar-questions.html | 23 | ||||
| -rw-r--r-- | static/website/templates/base.html | 34 | ||||
| -rw-r--r-- | static/website/templates/get-question.html | 22 | ||||
| -rw-r--r-- | static/website/templates/new-question.html | 33 | ||||
| -rw-r--r-- | website/urls.py | 1 | ||||
| -rw-r--r-- | website/views.py | 16 |
9 files changed, 193 insertions, 27 deletions
diff --git a/static/website/css/main.css b/static/website/css/main.css index 07d38a6..7a58a4c 100644 --- a/static/website/css/main.css +++ b/static/website/css/main.css @@ -67,6 +67,9 @@ padding: 2px 7px; background: #f5f5f5; } +#similar-link { + display: none; +} #questionNicPanel { display: none; } @@ -81,10 +84,16 @@ .modify a.save { display: none; } + +.vs { + padding: 0px 5px !important; + font-size: x-small; +} #content .reply { position: relative; border-bottom: 1px solid #f5f5f5; padding: 20px 0; + margin: 10px 0px; } #content .reply .body { } diff --git a/static/website/js/custom.js b/static/website/js/custom.js index ef0752e..da5839b 100644 --- a/static/website/js/custom.js +++ b/static/website/js/custom.js @@ -5,6 +5,7 @@ $(document).ready(function() { $second_range = $("#id_second_range"); $category.change(function() { + $("#similar-link").hide(); var category = $(this).val(); $.ajax({ url: "/ajax-tutorials/", @@ -41,6 +42,27 @@ $(document).ready(function() { } }); }); + + $second_range.change(function() { + $.ajax({ + url: "/ajax-similar-questions/", + type: "POST", + data: { + category: $category.val(), + tutorial: $tutorial.val(), + minute_range: $minute_range.val(), + second_range: $second_range.val() + }, + dataType: "html", + success: function(data) { + console.log(data); + $response = $(data); + var similar_count= $response.find("#similar-count").text(); + $("#similar-link").show().html(similar_count); + $(".modal-body").html(data); + } + }); + }); $(document).ajaxStart(function() { $("#ajax-loader").show(); diff --git a/static/website/js/thread-user.js b/static/website/js/thread-user.js index dbf9bdd..698a946 100644 --- a/static/website/js/thread-user.js +++ b/static/website/js/thread-user.js @@ -9,17 +9,20 @@ bkLib.onDomLoaded(function() { }); $(document).ready(function() { - /*set the jquery variables */ + /* + * question edit section + * set the jquery variables + */ $question = $(".question"); - $modify = $(".modify"); - $edit = $(".modify .edit"); - $save = $(".modify .save"); + $question_modify = $(".question .modify"); + $question_edit = $(".question .modify .edit"); + $question_save = $(".question .modify .save"); $questionNicPanel = $("#questionNicPanel"); $questionInstance = $("#questionInstance"); /* make the question editable and show modify */ $question.addClass("editable"); - $modify.show(); + $question_modify.show(); /* edit and save click events */ function modify(thisObj){ @@ -28,20 +31,20 @@ $(document).ready(function() { $questionNicPanel.show(); $questionInstance.focus(); } - $edit.click(function () { - modify($edit); + $question_edit.click(function () { + modify($question_edit); }); $questionInstance.click(function() { - modify($edit); + modify($question_edit); }); - $save.click(function () { + $question_save.click(function () { $(this).hide(); $questionNicPanel.hide(); $(this).prev().css("display", "block"); /* make the ajax call */ - var id_length = $save.attr("id").length; - var question_id = parseInt($save.attr("id").substr(id_length-1)); + var id_length = $question_save.attr("id").length; + var question_id = parseInt($question_save.attr("id").substr(id_length-1)); console.log(question_id); var question_body = $questionInstance.html(); $.ajax({ @@ -57,5 +60,40 @@ $(document).ready(function() { } }); }); + + /* + * reply edit section + * set the dom variables + */ + $reply_edit = $('.reply .edit'); + $reply_save = $(".reply .save"); + $replyPanelWrapper = $("#replyPanelWrapper"); + + var replyNicEditor = new nicEditor({ + buttonList : ['fontSize','bold','italic','underline','strikeThrough','subscript','superscript','html','image'], + iconsPath: "/static/website/js/nicEditorIcons.gif", + }); + replyNicEditor.panelInstance('replyNicPanel'); + + $reply_edit.click(function() { + var reply_body = $(this).data("target"); + console.log(reply_body); + replyNicEditor.addInstance(reply_body); + $(this).parents("div.reply").prepend($replyPanelWrapper); + $replyPanelWrapper.show(); + $('#replyPanelWrapper .nicEdit-panelContain').parent().width('100%'); + $('#replyPanelWrapper .nicEdit-panelContain').parent().next().width('100%'); + $(this).hide(); + $(this).next().show(); + }); + + $reply_save.click(function() { + var reply_body = $(this).data("target"); + replyNicEditor.removeInstance(reply_body); + $replyPanelWrapper.hide(); + $('#replyPanelWrapper .nicEdit-panelContain').parent().width('100%'); + $(this).hide(); + $(this).prev().show(); + }); }); diff --git a/static/website/templates/ajax-similar-questions.html b/static/website/templates/ajax-similar-questions.html new file mode 100644 index 0000000..64f194f --- /dev/null +++ b/static/website/templates/ajax-similar-questions.html @@ -0,0 +1,23 @@ +<div> +<div id="similar-count"> + {% if questions.count > 0 %} + {% if questions.count == 1 %} + 1 similar question + {% else %} + {{ questions.count }} similar questions + {% endif %} + {% endif %} +</div> +<br> +<table class="table table-bordered table-hover"> +{% for question in questions %} + <tr> + <td> + <a href="{% url 'website:get_question' question.id %}" target="_blank"> + {{ question.title }} + </a> + </td> + </tr> +{% endfor %} +</table> +</div> <!-- /div for ajax --> diff --git a/static/website/templates/base.html b/static/website/templates/base.html index f7e2ac5..5e397e8 100644 --- a/static/website/templates/base.html +++ b/static/website/templates/base.html @@ -18,23 +18,42 @@ <span class="icon-bar"></span> <span class="icon-bar"></span> </button> - <a class="navbar-brand" href="{% url 'website:home' %}">Spoken Tutorial Forums</a> + <a class="navbar-brand" href="{% url 'website:home' %}"> + Spoken Tutorial Forums + </a> </div> <!-- /.navbar-header --> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> - <li><a href="{% url 'website:new_question' %}">Ask Question</a></li> + <li> + <a href="{% url 'website:new_question' %}"> + <span class="glyphicon glyphicon-pencil"></span> + Ask Question + </a> + </li> + {% if user.is_authenticated %} <li class="dropdown"> - <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> + <a href="#" class="dropdown-toggle" data-toggle="dropdown"> + <span class="glyphicon glyphicon-user"></span> + {{ user }}<b class="caret"></b> + </a> <ul class="dropdown-menu"> - <li><a href="#">Action</a></li> - <li><a href="#">Another action</a></li> - <li><a href="#">Something else here</a></li> + <li><a href="#">My Questions</a></li> + <li><a href="#">My Replies</a></li> + <li><a href="#">Notifications</a></li> <li class="divider"></li> - <li><a href="#">Separated link</a></li> + <li><a href="{% url 'user_logout' %}">Logout</a></li> </ul> </li> <!-- /li.dropdown --> + {% else %} + <li> + <a href="{% url 'user_login' %}"> + <span class="glyphicon glyphicon-user"></span> + Login + </a> + </li> + {% endif %} </ul> </div> <!-- /.navbar-collapse --> </div> <!-- /.container --> @@ -62,7 +81,6 @@ <script src="{% static 'website/js/jquery.min.js' %}"></script> <script src="{% static 'website/js/bootstrap.min.js' %}"></script> - <script src="{% static 'website/js/custom.js' %}"></script> {% block javascript %} <!-- overide with custom javascript --> {% endblock %} diff --git a/static/website/templates/get-question.html b/static/website/templates/get-question.html index f6280cf..5e68aed 100644 --- a/static/website/templates/get-question.html +++ b/static/website/templates/get-question.html @@ -59,16 +59,29 @@ </div> <!-- /.question --> <h4><u>Answers:</u></h4> + +<div id="replyPanelWrapper" style="display:none;"> + <div id="replyNicPanel" style="display:none;"></div> +</div> + {% for reply in replies %} - <div class="reply"> - <span class="body"> + <div class="reply {% ifequal reply.uid|stringformat:'s' user.id|stringformat:'s' %}editable{% endifequal %}"> + + <div class="body" id="body{{ reply.id }}"> {{ reply.body|safe }} - </span> + </div> <span class="user"> {{ reply.user }} </span> - </div> + + {% ifequal reply.uid|stringformat:'s' user.id|stringformat:'s' %} + <span class="modify" style="display:block"> + <a class="edit btn btn-xs btn-info vs" href="#body{{ reply.id}}" data-target="body{{ reply.id }}">Edit</a> + <a id="save-{{ question.id }}" class="save btn btn-xs btn-success vs" href="#" data-target="body{{ reply.id }}">Save</a> + </span> + {% endifequal %} + </div> <!-- /.reply --> {% endfor %} <form action="{% url 'website:question_reply' %}" method="POST"> {% csrf_token %} @@ -102,6 +115,7 @@ {% ifequal question.user|stringformat:"s" user|stringformat:"s" %} <script src="{% static 'website/js/thread-user.js' %}"></script> {% else %} + <script src="{% static 'website/js/thread-user.js' %}"></script> <script type="text/javascript"> $(document).ready(function() { $(".question .body").removeAttr("id"); diff --git a/static/website/templates/new-question.html b/static/website/templates/new-question.html index 70d8349..d14c956 100644 --- a/static/website/templates/new-question.html +++ b/static/website/templates/new-question.html @@ -5,7 +5,6 @@ <h4> <span class="glyphicon glyphicon-pencil"> </span> Create a new question . . . - user is {{ user }} </h4> <hr> <form role="form" action="" method="POST">{% csrf_token %} @@ -16,10 +15,10 @@ <img id="ajax-loader" src="{% static 'website/images/ajax-loader.gif' %}" style="display:none;"> </p> <div class="row"> - <div class="col-lg-3 col-md-4 col-sm-4"> + <div class="col-lg-3 col-md-3 col-sm-3"> {% render_field form.category class+="form-control"%} </div> - <div class="col-lg-3 col-md-4 col-sm-4"> + <div class="col-lg-3 col-md-3 col-sm-3"> {% render_field form.tutorial class+="form-control" disabled="disabled" %} </div> <div class="col-lg-2 col-md-2 col-sm-2"> @@ -28,12 +27,19 @@ <div class="col-lg-2 col-md-2 col-sm-2"> {% render_field form.second_range class+="form-control" disabled="disabled" %} </div> + <div class="col-lg-2 col-md-2 col-sm-2"> + <small><strong> + <a id="similar-link" data-toggle="modal" data-target="#similarModal" href="#"> + 0 similar questions + </a> + </strong></small> + </div> </div> <hr> <p>Please enter your question details.</p> <div class="row"> - <div class="col-lg-10"> + <div class="col-lg-12"> <div class="form-group"> <label for="id_title">Title:</label> {% render_field form.title class+="form-control" %} @@ -48,6 +54,21 @@ {% endwith %} </form> + <!-- Modal --> + <div class="modal fade" id="similarModal" tabindex="-1" role="dialog" aria-labelledby="similarModalLabel" aria-hidden="true"> + <div class="modal-dialog"> + <div class="modal-content"> + <div class="modal-header"> + <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> + <h4 class="modal-title" id="myModalLabel">Similar Questions</h4> + </div> + <div class="modal-body"> + ... + </div> + </div><!-- /.modal-content --> + </div><!-- /.modal-dialog --> + </div><!-- /.modal --> + <script src="{% static 'website/js/nicEdit.js' %}" type="text/javascript"></script> <script type="text/javascript"> bkLib.onDomLoaded(function() { @@ -58,3 +79,7 @@ bkLib.onDomLoaded(function() { }); </script> {% endblock %} + +{% block javascript %} + <script src="{% static 'website/js/custom.js' %}"></script> +{% endblock %} diff --git a/website/urls.py b/website/urls.py index 774acb9..c385ea0 100644 --- a/website/urls.py +++ b/website/urls.py @@ -14,4 +14,5 @@ urlpatterns = patterns('', url(r'^ajax-tutorials/$', 'website.views.ajax_tutorials', name='ajax_tutorials'), url(r'^ajax-duration/$', 'website.views.ajax_duration', name='ajax_duration'), url(r'^ajax-question-update/$', 'website.views.ajax_question_update', name='ajax_question_update'), + url(r'^ajax-similar-questions/$', 'website.views.ajax_similar_questions', name='ajax_similar_questions'), ) diff --git a/website/views.py b/website/views.py index e18a000..538d90e 100644 --- a/website/views.py +++ b/website/views.py @@ -155,3 +155,19 @@ def ajax_question_update(request): question.body = body question.save() return HttpResponse("saved") + +@csrf_exempt +def ajax_similar_questions(request): + if request.method == 'POST': + category = request.POST['category'] + tutorial = request.POST['tutorial'] + minute_range = request.POST['minute_range'] + second_range = request.POST['second_range'] + + # add more filtering when the forum grows + questions = Question.objects.filter(category=category).filter(tutorial=tutorial) + context = { + 'questions': questions + } + return render(request, 'website/templates/ajax-similar-questions.html', context); + |