[tor-commits] [pups/master] new stats page style and code
colin at torproject.org
colin at torproject.org
Sun May 18 07:04:34 UTC 2014
commit b973671b8801d8af361ac21ee056b644eacb601b
Author: Sherief Alaa <sheriefalaa.w at 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 at 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
More information about the tor-commits
mailing list