Skip to content
Browse files

A bunch of tweaks & changes. Started styling messages.

  • Loading branch information...
1 parent 6b87687 commit 1f422c42f09a5104e8b768fe63f1595b658502c1 @akavlie committed Oct 8, 2010
Showing with 126 additions and 33 deletions.
  1. +6 −0 sms/model.py
  2. +41 −21 sms/static/sms.js
  3. +40 −3 sms/static/style.css
  4. +23 −7 sms/templates/index.html
  5. +1 −0 sms/templates/layout.html
  6. +15 −2 sms/views.py
View
6 sms/model.py
@@ -14,6 +14,12 @@ class User(db.Model):
order_by='SentMessage.date',
backref='user')
+ def __init__(self, name, phone):
+ first_name, last_name = ' '.split(name)
+ self.first_name = first_name
+ self.last_name = last_name
+ self.phone = phone
+
class SentMessage(db.Model):
"""Record of a sent SMS message """
__tablename__ = 'sent_messages'
View
62 sms/static/sms.js
@@ -1,37 +1,57 @@
var status_checker = 0;
-$("#sms_form").submit(function() {
- // Post form data via AJAX
- $.post($SCRIPT_ROOT + "/sms", $("#sms_form").serialize(),
+$(function() {
+
+ // SMS SUBMISION
+ // -------------
+ $("#sms_form").submit(function() {
+ // Post form data via AJAX
+ $.post($SCRIPT_ROOT + "/sms", $("#sms_form").serialize(),
+ function(data) {
+ // Insert returned HTML after the heading
+ $('#sent_message_list h2').after(data);
+ // Animate height expansion, then opacity
+ $('.new').css({opacity: 0})
+ .animate({height: 'toggle'})
+ .animate({opacity: 1})
+ // Remove class so it doesn't catch animation again
+ .removeClass('new');
+ // Check status of new messages at set interval
+ if(status_checker==0) {
+ status_checker = setInterval('checkStatus()', 3000);
+ }
+ });
+ return false;
+ });
+
+/* $('#new_user').submit(function() {
+ $.post($SCRIPT_ROOT + '/user', $('#user_form').serialize()
function(data) {
- // Insert returned HTML after the heading
- $('#sent_message_list h2').after(data);
- // Animate height expansion, then opacity
- $('.new').animate({height: 'toggle'})
- .animate({opacity: 1})
- // Remove class so it doesn't catch animation again
- .removeClass('new');
- // Check status of new messages at set interval
- if(status_checker==0) {
- status_checker = setInterval('checkStatus()', 5000);
- }
});
return false;
+ });
+ */
+ // Plugin for placeholder text
+ $('input:text').placeholder();
+
});
function checkStatus() {
// Check every message on the page with status "queued" or "sending" --
// Twilio's status possibilities for unsent messsages
- $('.queued, .sending').children('.status').each(function(i) {
- var sid = $(this).parent().find('.sid').html();
+ $('.queued, .sending').each(function(i) {
+ var sid = $(this).find('.sid').html();
// Update status based on check with twilio
- $(this).load($SCRIPT_ROOT + '/sms/update/' + sid, function(status) {
+ $(this).children('.status').load($SCRIPT_ROOT + '/sms/update/' + sid, function(status) {
// Add class based on current status; remove former status class
- $(this).parent().addClass(status).removeClass('queued sending');
+ $('.queued, .sending').addClass(status).removeClass('queued sending');
});
});
- // Stop checking message status
- clearInterval(status_checker);
- status_checker = 0;
+
+ // Stop checking message status if there aren't any left
+ if($('.queued, .sending').length > 0) {
+ clearInterval(status_checker);
+ status_checker = 0;
+ }
}
View
43 sms/static/style.css
@@ -7,9 +7,6 @@ body {
margin: 50px 200px;
}
-.clear {clear: both;}
-.hidden {display: none; opacity: 0;}
-
h1 {
font-size: 40px;
}
@@ -19,12 +16,29 @@ h2 {
border-bottom: 1px solid gray;
}
+input.placeholder {
+ color: #888;
+ font-style: italic;
+}
+
+.clear {clear: both;}
+.hidden {display: none;}
+
.flash {
background: #CEE5F5;
padding: 0.5em;
border: 1px solid #AACBE2;
}
+/* SMS BOX */
+#sms_box {
+ border: 1px solid black;
+}
+
+#recipients {
+}
+
+
/* SENT MESSAGES */
#sent_message_list {
@@ -36,6 +50,12 @@ h2 {
margin-bottom: 10px;
border: 1px solid black;
height: 120px;
+
+ -moz-border-radius: 10px;
+ -webkit-border-radius: 10px;
+ -khtml-border-radius: 10px;
+ border-radius: 10px;
+
}
.sent_message .status {
padding: 5px;
@@ -56,3 +76,20 @@ h2 {
.sent_message .message_text {
margin-top: 15px;
}
+
+ /* STATUSES */
+ .queued, .sending {
+ border: 2px solid #757575;
+ background-color: #CCCCCC;
+ }
+
+ .failed {
+ border: 2px solid #CC0000;
+ background-color: #e7c5c5;
+ }
+
+ .sent {
+ border: 2px solid #008C00;
+ background-color: #bfe3bf; /* pale green */
+ }
+
View
30 sms/templates/index.html
@@ -6,13 +6,29 @@
<button id="test">Test!</button>
-<form id="sms_form" action="">
- <p><label for="phone">Phone Number: </label>
- <input type="text" name="phone_number" /></p>
- <p><label for="phone_number">Message: </label>
- <input type="text" name="message" />
- <input type="submit" value="Send" /></p>
-</form>
+<h2>Select Recipients</h2>
+<div id="sms_box">
+ <table id="recipients">
+ <tr><td>test</td></tr>
+ {% for user in users %}
+ <tr>
+ <td>{{ user.first_name }} {{ user.last_name }}</td>
+ <td>{{ user.phone }}</td>
+ </tr>
+ {% endfor %}
+ </table>
+ <form id="new_user" action="">
+ Add user:
+ <input type="text" name="user_name" placeholder="Name">
+ <input type="text" name="user_phone" placeholder="Phone">
+ <input type="submit" value="Add">
+ </form>
+ <form id="sms_form" action="">
+ <p><input type="text" name="phone_number" placeholder="Phone"></p>
+ <p><input type="text" name="message" placeholder="Message">
+ <input type="submit" value="Send"></p>
+ </form>
+</div>
<div id="sent_message_list">
<h2>Message History</h2>
View
1 sms/templates/layout.html
@@ -3,6 +3,7 @@
<title>SMSr</title>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">
<script type="text/javascript" src="{{ url_for('static', filename='jquery-1.4.2.min.js') }}"></script>
+ <script type="text/javascript" src="{{ url_for('static', filename='jquery.placeholder.js') }}"></script>
<script type="text/javascript">
$SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
</script>
View
17 sms/views.py
@@ -9,8 +9,10 @@
@app.route('/')
def index():
- sent_messages = SentMessage.query.order_by(SentMessage.id.desc()).all()
- return render_template('index.html', sent_messages=sent_messages)
+ sent_messages = SentMessage.query.order_by(SentMessage.id.desc())[0:10]
+ users = User.query.all()
+ return render_template('index.html', sent_messages=sent_messages,
+ users=users)
@app.route('/sms', methods=['POST'])
def sms():
@@ -45,4 +47,15 @@ def sms_update(sid):
return sms.status
+@app.route('/user')
+def user_add():
+ """Add a user to the DB. """
+
+ u = User(request.form['user_name'], request.form['user_phone'])
+ db.session.add(u)
+ db.session.commit()
+
+ users = User.query.all()
+
+ return render_template('user.html', users=users)

0 comments on commit 1f422c4

Please sign in to comment.
Something went wrong with that request. Please try again.