commit b973671b8801d8af361ac21ee056b644eacb601b Author: Sherief Alaa sheriefalaa.w@gmail.com Date: Sun May 18 01:33:42 2014 +0300
new stats page style and code --- static/css/stats.css | 23 +++++++++ static/js/stats.js | 120 ++++++++++++++++++++++++++++---------------- stats/templates/stats.html | 41 +++++++++------ 3 files changed, 126 insertions(+), 58 deletions(-)
diff --git a/static/css/stats.css b/static/css/stats.css new file mode 100644 index 0000000..0afa04c --- /dev/null +++ b/static/css/stats.css @@ -0,0 +1,23 @@ +input[type=text] { + width: 900px; + display: inline-block; +} + +input[type=text][name=counter]{ + width: 50px; +} + +.clear { + margin: 5px; +} + +.issue_text { + width: 75%; + float: left; +} + +.options { + width: 25%; + float: right; + margin-right: -25px; +} \ No newline at end of file diff --git a/static/js/stats.js b/static/js/stats.js index 5116a30..f5dde69 100644 --- a/static/js/stats.js +++ b/static/js/stats.js @@ -1,76 +1,106 @@ -$(document).ready (function (){ +// This file is part of Pups, a django/python project which contains +// web support tools +// +// Author: Sherief Alaa sheriefalaa.w@gmail.com +// +// Copyright: +// (c) 2014 Sherief Alaa. +// (c) 2014 The Tor Project, Inc. +// +// Pups is free software: you can redistribute it and/or modify +// it under the terms of the GNU General Public License as published by +// the Free Software Foundation, either version 3 of the License, or +// (at your option) any later version. +// +// Pups is distributed in the hope that it will be useful, +// but WITHOUT ANY WARRANTY; without even the implied warranty of +// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +// GNU General Public License for more details. +// +// You should have received a copy of the GNU General Public License +// along with Pups. If not, see http://www.gnu.org/licenses/. + +var current_issue_edit_id;
- // New question event listener - $("#savenewq").click(function() { +$(document).ready (function (){
+ $("#save_issue").click(function() {
- if ($("#newqtext").val() == '') { + if ($("#new_issue_text").val() == '') { alert ('Please enter something'); return false; }
- var uid = generateUUID(); - var quid = "'" + uid + "'"; // Wrapped in quotes to make things cleaner. - - // Send question text to sqlite + NewIssue(); + });
- // Create a new question - $("#questions").append('<div id="id-' + uid + '"></div>'); + $("#save_edit").click(function() {
- $("#id-"+uid).append('<input id="qtext-' + uid + '" class="form-control" name="qtext" type="text" value="'+ $("#newqtext").val() +'" readonly>'); - $("#id-"+uid).append('<input id="qtextedit-'+ uid +'" class="form-control" style="display:none;" type="text" size="85" value="">'); - $("#id-"+uid).append('<input id="save-'+ uid +'" style="display:none;" class="btn btn-danger" type="button" value="Save" onClick="saveEdit('+quid+');">'); - $("#id-"+uid).append('<input id="cancel-'+ uid +'" style="display:none;" class="btn btn-default" type="button" value="Cancel"onClick="cancelEdit('+quid+');">'); - $("#id-"+uid).append('<input id="counter-' + uid + '" class="form-control" name="counter" type="text" size="4" value="" readonly>'); - $("#id-"+uid).append('<input id="plus-' + uid + '" class="btn btn-default" type="button" value="+1" onClick="counter('+quid+');">'); - $("#id-"+uid).append('<input id="edit-' + uid + '" class="btn btn-default" type="button" value="Edit" style="display:inline-block" onClick="editq('+quid+');" >'); - $("#id-"+uid).append('<input id="del-' + uid + '" class="btn btn-danger" type="button" value="Delete" onClick="deleteq('+quid+');">'); + SaveEdit(current_issue_edit_id); + });
+ $("#close_edit").click(function() {
- // Clear question to avoid replication by mistake. - $("#newqtext").val(""); + CancelEdit(current_issue_edit_id); });
});
+function NewIssue() { + + var uid = generateUUID(); + var quoted_uid = "'" + uid + "'"; // Wrapped in quotes to make things cleaner. + + // Send question text to sqlite + + // Create a new question + $("#issues").append( + '<div class="clear"></div>' + +'<div id="issue-' + uid + '" class="row"></div>'); + $("#issue-" + uid).append( + '<div id="issue_text-' + uid + '" name="issue_text" class="col-md-9">' + $("#new_issue_text").val() + '</div>' + +'<div class="options">' + +'<input id="counter-' + uid + '" class="form-control" name="counter" type="text" size="4" value="" readonly>' + +'<button id="plus-' + uid + '" class="btn btn-default" onclick="counter(' + quoted_uid + ');">+1</button>' + +'<button id="edit-' + uid + '" class="btn btn-default" data-toggle="modal" data-target="#EditIssue" onclick="edit_issue(' + quoted_uid + ')">Edit</button>' + +'<input id="del-' + uid + '" class="btn btn-danger" type="button" value="Delete" onclick="DeleteIssue(' + quoted_uid + ');">' + +'</div>'); + + // Clear question to avoid replication by mistake. + $("#new_issue_text").val(""); +} + // Edit a question -function editq(uid) { - $('#qtext-' + uid).hide(); - $('#qtextedit-' + uid).val($('#qtext-' + uid).val()); - $('#qtextedit-'+ uid).css('display','inline-block'); - $('#counter-'+ uid).css('display','inline-block'); - $('#save-'+ uid).css('display','inline-block'); - $('#cancel-'+ uid).css('display','inline-block'); +function edit_issue(quoted_uid) { + + // Lock issue in db + + // Let the user edit issue + $("#edit_text").val($("#issue_text-" + quoted_uid).text()); + current_issue_edit_id = quoted_uid; }
-function saveEdit(uid) { +function SaveEdit(quoted_uid) {
- // Should send changes to sqlite + $("#EditIssue").modal('hide'); + // Should send changes to sqlite and unclock db
// Save locally for UI - $('#qtext-' + uid).val( $('#qtextedit-' + uid).val() ); - $('#qtextedit-'+ uid).css('display','none'); - $('#save-'+ uid).css('display','none'); - $('#cancel-'+ uid).css('display','none'); - $('#qtext-' + uid).show(); }
-function cancelEdit(uid) { - $('#qtextedit-'+ uid).css('display','none'); - $('#save-'+ uid).css('display','none'); - $('#cancel-'+ uid).css('display','none'); - $('#qtext-' + uid).show(); +function CancelEdit(quoted_uid) {
+ // unlock issue in db }
// Delete a question -function deleteq(uid) { +function DeleteIssue(uid) { if (confirmBox()) {
// Send a delete request to sqlite
- // Remove the div from the page - $("#del-" + uid).parent().remove(); + // Remove issue from db and html + $("#issue-" + uid).remove(); } }
@@ -79,6 +109,12 @@ function counter(uid) {
// Send a +1 to sqlite
+ // lock the button to avoid double +1s + + // wait for success callback + + // if callback returns a failure alert DB error + // Increase the counter by 1 if ($("#counter-" + uid).val() == "") $("#counter-" + uid).val("1"); diff --git a/stats/templates/stats.html b/stats/templates/stats.html index 9257d81..5fc1c03 100755 --- a/stats/templates/stats.html +++ b/stats/templates/stats.html @@ -4,20 +4,8 @@ {% block extra_css %} <link rel="stylesheet" type="text/css" href="/static/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="/static/css/bootstrap-theme.min.css"> + <link rel="stylesheet" type="text/css" href="/static/css/stats.css"> <link rel="stylesheet" type="text/css" href="/static/css/footer.css"> - - <style type="text/css"> - - input[type=text] { - width: 600px; - display: inline-block; - } - - input[type=text][name=counter]{ - width: 60px; - } - - </style> {% endblock extra_css %} {% block script %} <script type="text/javascript" src="/static/js/jquery.min.js"></script> @@ -28,9 +16,30 @@ {% block content %} {% include "nav_bar.html" %} <div id="newq"> - <input id="newqtext" class="form-control" placeholder="Warning: This is not ready yet!" type="text" style="display: inline-block;"> - <input id="savenewq" class="btn btn-default" type="button" value="Save"> + <input id="new_issue_text" class="form-control" placeholder="Warning: This is not ready yet!" type="text" style="display: inline-block;"> + <input id="save_issue" class="btn btn-default" type="button" value="Save"> </div> - <div id="questions"></div> + +<div id="issues"></div> + + <!-- Issue Edit Modal --> + <div class="modal fade" id="EditIssue" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false"> + <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">Edit issue</h4> + </div> + <div class="modal-body"> + <textarea id="edit_text" rows="8" cols="65"></textarea> + </div> + <div class="modal-footer"> + <button type="button" class="btn btn-default" data-dismiss="modal" id="close_edit">Close</button> + <button type="button" class="btn btn-primary" id="save_edit">Save changes</button> + </div> + </div> + </div> + </div> + {% include "footer.html" %} {% endblock content %} \ No newline at end of file