mirror of
https://github.com/zhigang1992/deployd.git
synced 2026-06-16 18:39:28 +08:00
167 lines
4.9 KiB
HTML
167 lines
4.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
|
|
<title>users</title>
|
|
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
|
|
<link href='http://fonts.googleapis.com/css?family=Bitter:400,700,400italic' rel='stylesheet' type='text/css'>
|
|
<script src="/dpd.js"></script>
|
|
<link rel="stylesheet" href="http://deployd.com/stylesheets/style.css" type="text/css">
|
|
<style>
|
|
.well {margin-top: 40px;}
|
|
.row * {text-align: center !important;}
|
|
form {margin-bottom: 10px;}
|
|
.person {
|
|
background: #F0F0D3;
|
|
font-size: 9px;
|
|
margin: -7px -7px 8px -7px;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
color: #fffff7;
|
|
text-shadow: #6C6C58 1px 1px 0px;
|
|
}
|
|
#notifier {
|
|
position: absolute;
|
|
display: inline-block;
|
|
right: 60px;
|
|
top: -200px;
|
|
font-weight: bold;
|
|
transition: top 500ms;
|
|
-moz-transition: top 500ms; /* Firefox 4 */
|
|
-webkit-transition: top 500ms; /* Safari and Chrome */
|
|
-o-transition: top 500ms; /* Opera */
|
|
}
|
|
#notifier.shown {
|
|
top: 0;
|
|
}
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="span4 offset4">
|
|
<div class="well">
|
|
<div class="nav">
|
|
<a class="btn" href="/profile.html"><i class="icon-user"></i> Profile</a>
|
|
<a id="logout" class="btn" href="#"><i class="icon-off"></i> Logout</a>
|
|
</div>
|
|
<h1>...</h1>
|
|
<!--
|
|
A simple table to display messages.
|
|
-->
|
|
<table id="messages" class="table table-bordered table-striped"></table>
|
|
|
|
<form class="form-horizontal">
|
|
<div class="input-append">
|
|
<!--
|
|
A simple input for creating a new message.
|
|
-->
|
|
<input class="span2" placeholder="Say hello." id="appendedPrependedInput" size="16" type="text"><button class="btn" type="button">Send</button>
|
|
</div>
|
|
</form>
|
|
|
|
<div id="notifier" class="well slidee">
|
|
...
|
|
</div>
|
|
|
|
<script>
|
|
//
|
|
// Show new messages as they are created.
|
|
//
|
|
dpd.on('messages changed', function () {
|
|
getMessages();
|
|
});
|
|
|
|
//
|
|
// Show users as they login.
|
|
//
|
|
dpd.on('visit', function (user) {
|
|
$('#notifier').html(user + ' just logged in').addClass('shown');
|
|
setTimeout(function () {
|
|
$('#notifier').removeClass('shown');
|
|
}, 2500);
|
|
});
|
|
|
|
//
|
|
// Get the current user.
|
|
//
|
|
dpd.users.me(function (me) {
|
|
//
|
|
// If the user is logged in, display the name.
|
|
//
|
|
$('h1').text('Hello, ' + me.name);
|
|
//
|
|
// Only get messages if the user is logged in.
|
|
//
|
|
getMessages();
|
|
});
|
|
|
|
//
|
|
// Here is a simple example of reading and saving data with a deployd collection.
|
|
//
|
|
function getMessages() {
|
|
|
|
//
|
|
// Get messages from the `/messages` collection using jQuery.
|
|
//
|
|
|
|
dpd.messages.get(function (messages) {
|
|
$('#messages').empty();
|
|
if(!messages) return;
|
|
//
|
|
// Render out the table of messages.
|
|
//
|
|
messages.reverse();
|
|
for(var i = 0; i < messages.length; i++) {
|
|
$('#messages')
|
|
.append('<tr><td><div class="person">' + messages[i].creator + '</div>' + messages[i].text + '</td></tr>');
|
|
}
|
|
});
|
|
}
|
|
|
|
//
|
|
// When a user clicks send...
|
|
//
|
|
$('button').click(function () {
|
|
|
|
//
|
|
// Create a message from the input text.
|
|
//
|
|
var message = {text: $('input').val()};
|
|
|
|
dpd.messages.post(message, function () {
|
|
$('input').val(null);
|
|
getMessages();
|
|
})
|
|
});
|
|
|
|
//
|
|
// Also, send when the user presses enter.
|
|
//
|
|
$('form').keypress(function(e) {
|
|
if(e.keyCode === 13) {
|
|
e.preventDefault();
|
|
$('button').click();
|
|
return false;
|
|
}
|
|
});
|
|
|
|
//
|
|
// Logout the user when they click on the logout button.
|
|
//
|
|
$('#logout').click(function() {
|
|
dpd.users.logout(function () {
|
|
window.location = '/login.html';
|
|
})
|
|
});
|
|
</script>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
</html> |