291 lines
6.8 KiB
HTML
291 lines
6.8 KiB
HTML
{% extends "layout.html" %}
|
|
{% block body %}
|
|
<script type="text/javascript">
|
|
window.SMSCAST = {};
|
|
SMSCAST.largestMsgIdSeen = 0;
|
|
SMSCAST.largestReceivedMsgIdSeen = 0;
|
|
$(function() {
|
|
$( document ).ready(function() {
|
|
// doc ready. load users
|
|
$.getJSON($SCRIPT_ROOT + '/_get_people', {}, function(data) {
|
|
var people = data.people;
|
|
for(var i=0; i<people.length; ++i){
|
|
var p = people[i];
|
|
$( "#people" ).append("<a href='#' class=\"person\" id=\"p_" + p.id + "\" person_id=\"" + p.id + "\">" + p.name + "</a>");
|
|
}
|
|
|
|
});
|
|
// load groups
|
|
$.getJSON($SCRIPT_ROOT + '/_get_groups', {}, function(data) {
|
|
var groups = data.groups;
|
|
for(var i=0; i<groups.length; ++i){
|
|
var g = groups[i];
|
|
$( "#groups" ).append("<a href='#' class=\"group\" id=\"g_" + g.gid + "\" group_id=\"" + g.gid + "\">" + g.name + "</a>");
|
|
}
|
|
|
|
});
|
|
|
|
loadUpdates(); // start getting live updates
|
|
|
|
});
|
|
|
|
var send = function() {
|
|
var message = $('input[name="msg"]').val();
|
|
if(message.length == 0) {
|
|
$("#result").text("No message has been entered in the text field!");
|
|
return false;
|
|
}
|
|
|
|
var list = getSelectedPeople();
|
|
if(list.length == 0){
|
|
$("#result").text("No recipients have been selected!");
|
|
return false;
|
|
}
|
|
$.getJSON($SCRIPT_ROOT + '/send', {
|
|
msg: message,
|
|
to: JSON.stringify(list)
|
|
}, function(data) {
|
|
$("#result").text(data.result);
|
|
});
|
|
$('input[name="msg"]').val(''); // clear text field
|
|
return false;
|
|
}
|
|
|
|
$('a#msgsend').bind('click', send);
|
|
$('#msgfield').keypress(function (e) {
|
|
if(e.which == 13) {
|
|
send();
|
|
return false;
|
|
}
|
|
});
|
|
|
|
$('#people').on('click', '.person', function(event) {
|
|
var target = $(this);
|
|
var id = target[0].attributes.person_id;
|
|
target.toggleClass('selected');
|
|
console.log(id.value);
|
|
});
|
|
|
|
$('#groups').on('click', '.group', function(event) {
|
|
var target = $(this);
|
|
var id = target[0].attributes.group_id;
|
|
target.toggleClass('selected');
|
|
console.log(id.value);
|
|
selectPeopleByGroups();
|
|
});
|
|
function selectPeopleByGroups(){
|
|
var list = getSelectedGroups();
|
|
$.getJSON($SCRIPT_ROOT + '/_get_people_in_groups', {
|
|
grouplist: JSON.stringify(list)
|
|
}, function(data) {
|
|
console.log(data.result);
|
|
var people = data.result;
|
|
|
|
// clear all currently selected people
|
|
$('#people > .selected').each(function(index) {
|
|
$(this).removeClass('selected');
|
|
});
|
|
|
|
// select everyone the server told us to
|
|
for(var i=0; i<people.length; ++i){
|
|
var id = people[i];
|
|
$("#people > #p_" + id).addClass('selected');
|
|
}
|
|
});
|
|
return false;
|
|
}
|
|
|
|
function getSelectedGroups(){
|
|
var list = [];
|
|
$('#groups > .selected').each(function(index) {
|
|
var id = this.attributes.group_id.value;
|
|
list.push(id);
|
|
});
|
|
return(list);
|
|
}
|
|
function getSelectedPeople(){
|
|
var list = [];
|
|
$('#people > .selected').each(function(index) {
|
|
var id = this.attributes.person_id.value;
|
|
list.push(id);
|
|
});
|
|
return(list);
|
|
}
|
|
|
|
function loadUpdates(){
|
|
$.getJSON($SCRIPT_ROOT + '/_get_updates', {
|
|
lastOut:SMSCAST.largestMsgIdSeen,
|
|
lastIn:SMSCAST.largestReceivedMsgIdSeen
|
|
},
|
|
function(data) {
|
|
updateSentMessages(data.msgs);
|
|
updateReceivedMessages(data.inbound);
|
|
});
|
|
setTimeout(loadUpdates, 5000);
|
|
}
|
|
function updateSentMessages(msgs){
|
|
for(var i=msgs.length-1; i>=0; --i){
|
|
if(msgs[i].id > SMSCAST.largestMsgIdSeen){ // only add messages more recent
|
|
$( "#msgs" ).prepend(getMessageHtml(msgs[i]));
|
|
}
|
|
}
|
|
if(msgs.length > 0){ // if this payload had any messages, keep track of the largest seen id.
|
|
SMSCAST.largestMsgIdSeen = msgs[0].id;
|
|
}
|
|
|
|
}
|
|
function getMessageHtml(msg){
|
|
var to = msg.to;
|
|
var tolist = "";
|
|
for(var i=0; i<to.length; ++i){
|
|
tolist = tolist + to[i].name;
|
|
if(i < to.length - 1){ // separate names with commas
|
|
tolist = tolist + ", ";
|
|
}
|
|
}
|
|
|
|
return "<div class='msg outbound' id='" + msg.id + "'>" +
|
|
"<div class='msg_text'>" + msg.msg + "</div>" +
|
|
"<div class='msg_info'>sent by " + msg.sent_by_name + " at " + msg.when + "</div>" +
|
|
"<div class='msg_info'>to " + tolist + "</div>" +
|
|
"</div>";
|
|
}
|
|
function updateReceivedMessages(msgs){
|
|
for(var i=msgs.length-1; i>=0; --i){
|
|
if(msgs[i].id > SMSCAST.largestReceivedMsgIdSeen){ // only add messages more recent
|
|
$( "#inmsgs" ).prepend(getReceivedMessageHtml(msgs[i]));
|
|
}
|
|
}
|
|
if(msgs.length > 0){ // if this payload had any messages, keep track of the largest seen id.
|
|
SMSCAST.largestReceivedMsgIdSeen = msgs[0].id;
|
|
}
|
|
}
|
|
function getReceivedMessageHtml(msg){
|
|
var str = "<div class='msg inbound' id='" + msg.id + "'>" +
|
|
"<div class='msg_text'>" + msg.body + "</div>";
|
|
if(msg.name){
|
|
str = str + "<div class='msg_info'>from " + msg.name + "</div>";
|
|
}
|
|
else {
|
|
str = str + "<div class='msg_info'>from " + msg.from + "</div>";
|
|
}
|
|
return str + "</div>";
|
|
}
|
|
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
*
|
|
{
|
|
font-family: "Myriad Pro", Arial;
|
|
}
|
|
.person, .group{
|
|
display: inline-block;
|
|
color: #222222;
|
|
border: 2px solid #47aef5;
|
|
border-radius: 10px;
|
|
background-color: #eee;
|
|
margin: 2px;
|
|
padding: 5px;
|
|
text-decoration: none;
|
|
}
|
|
.selected{
|
|
background-color: #47aef5;
|
|
color: #fff;
|
|
}
|
|
.column{
|
|
float:left;
|
|
width:30%;
|
|
min-width:400px;
|
|
border: 2px solid black;
|
|
margin: 2px;
|
|
padding: 8px;
|
|
height: 80%;
|
|
overflow-y:scroll;
|
|
}
|
|
#content, html, body
|
|
{
|
|
height: 98%;
|
|
background-color: #eefdff;
|
|
}
|
|
.column
|
|
{
|
|
background-color: #fffbcf;
|
|
}
|
|
#msgfield
|
|
{
|
|
font-size: xx-large;
|
|
width: 80%;
|
|
height: 1.5em;
|
|
}
|
|
#msgsend
|
|
{
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
text-align: center;
|
|
width: 10%;
|
|
height: 1.5em;
|
|
font-size: x-large;
|
|
color: #fff;
|
|
border: 2px solid #47aef5;
|
|
border-radius: 10px;
|
|
background-color: #47aef5;
|
|
margin: 2px;
|
|
padding: 5px;
|
|
text-decoration: none;
|
|
}
|
|
#result
|
|
{
|
|
font-size: large;
|
|
}
|
|
.msg
|
|
{
|
|
border: 2px solid #e78e2b;
|
|
border-radius: 5px;
|
|
background-color: #ffca8a;
|
|
padding: 5px;
|
|
margin: 5px;
|
|
}
|
|
.msg .msg_text
|
|
{
|
|
font-size: larger;
|
|
font-weight: bold;
|
|
}
|
|
.msg .msg_info
|
|
{
|
|
font-size: smaller;
|
|
padding-left: 1em;
|
|
}
|
|
a
|
|
{
|
|
font-color: 47aef5;
|
|
}
|
|
|
|
</style>
|
|
|
|
<body>
|
|
<div class="header">
|
|
<p style="float:right">logged in as {{ current_user.name }} <a href="logout">log out</a></p>
|
|
<h1>smscast</h1>
|
|
</div>
|
|
<div id="send" class="column">
|
|
<p style="msgarea"><input type="text" name="msg" id="msgfield"><a href="#" id="msgsend">Send!</a></p>
|
|
<p><span id="result">Select recipients below and enter a message to broadcast in the box above.</span></p>
|
|
<h2>groups</h2>
|
|
<p id="groups"></p>
|
|
<h2>people</h2>
|
|
<p id="people"></p>
|
|
</div>
|
|
<div class="column">
|
|
<h2>sent messages</h2>
|
|
<div id="msgs"></div>
|
|
</div>
|
|
<div class="column">
|
|
<h2>received messages</h2>
|
|
<div id="inmsgs"></div>
|
|
</div>
|
|
</body>
|
|
|
|
{% endblock %}
|