Skip to content
Browse files

example1 updated

  • Loading branch information...
1 parent 7e3360f commit 51a5d510e118b0cfd5e610d0f78e0a3c6e46bc46 @rsms committed Aug 6, 2010
View
9 examples/example1/client/index.html
@@ -3,8 +3,17 @@
<head>
<meta charset="utf-8">
<title>Example1</title>
+ <script type="text/javascript"
+ src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"
+ ></script>
+ <!--script type="text/javascript" charset="utf-8">OUI_DEBUG=false;</script-->
<script type="text/javascript" src="oui.js" charset="utf-8"></script>
<script type="text/javascript" src="index.js" charset="utf-8"></script>
+ <script type="text/javascript" charset="utf-8">
+ //oui.backend.defaultPath = '/api';
+ //oui.backend.backends = [{host:'localhost', port:8080}];
+ oui.app.main().on('start', function(){console.log('app started', this);});
+ </script>
<link rel="stylesheet" href="index.css" type="text/css" media="screen" charset="utf-8">
</head>
<body>
View
14 examples/example1/client/index.less
@@ -0,0 +1,14 @@
+body {
+ background:white; color:#030303; padding:0; margin:2em;
+ font-family:helvetica,sans-serif; font-size:18px;
+ text-rendering: optimizelegibility;
+}
+img { border:none; }
+a { text-decoration:none; }
+frag { display:inline; }
+code { background:#eee; padding:0 .1em; border:1px solid #ddd; }
+pre { background:#eee; border:1px solid #ddd; padding:.5em .7em; }
+pre > code { background:inherit; padding:0; border:none; }
+h1 > a, h2 > a, h3 > a, h4 > a, h5 > a, h6 > a { color:inherit; }
+h1 > a:hover:after, h2 > a:hover:after, h3 > a:hover:after, h4 > a:hover:after,
+ h5 > a:hover:after, h6 > a:hover:after { content:" #"; color:#ccc; }
View
129 examples/example1/client/message-board.html
@@ -1,38 +1,113 @@
<script type="text/javascript" charset="utf-8">
-
oui.app.on('start', function(ev){
- console.log('start')
- });
+ // Add header
+ var header = exports.fragment('header');
+ $('body').append(header);
- $(function(){
- console.log('dom')
- var form = __html.find('form');
- form.submit(function(ev){
- var msg = {};
- msg.title = form.find('input[name=title]').get(0).value;
- msg.message = form.find('textarea[name=message]').get(0).value;
- exports.pipe.send(msg, function(err){
- console.log(__name+'.postMessage() -> {err:'+err+'}');
+ // Enable creation form
+ var createForm = header.find('form');
+ createForm.submit(function(ev){
+ var message = {}, fieldsToClearOnSuccess = [];
+ ['title', 'message'].forEach(function(k){
+ var field = createForm.find(':input[name='+k+']')[0];
+ if (field) {
+ message[k] = field.value;
+ fieldsToClearOnSuccess.push(field);
+ }
+ });
+ console.log('posting message', JSON.stringify(message));
+ oui.http.POST('/messages', {message:message}, function(err, rsp) {
+ if (err) return console.error(err);
+ fieldsToClearOnSuccess.forEach(function(field){
+ field.value = '';
+ });
+ reloadMessages();
});
+ return false;
});
- });
+ // Setup messages
+ var messageList = exports.fragment('list', {}/*, function(){
+ // this is run each time the fragment is rendered (i.e. on update())
+ this.find('a[href$=/delete]').click(function(ev){
+ removeMessage((/\/(\d+)\/delete$/.exec(this.href))[1]);
+ return false;
+ });
+ }*/);
+ $('body').append(messageList);
+ function reloadMessages(callback) {
+ oui.http.GET('/messages', function(err, rsp) {
+ var messages = (rsp && rsp.data) ? rsp.data : [];
+ if (callback) callback(err, messages);
+ if (err) return console.error(err);
+ messages.sort(function(a,b){ return a.id > b.id ? -1 : 1; }); // id desc
+ messageList.context.messages = messages;
+ messageList.update();
+ messageList.find('a[href$=/delete]').click(function(ev){
+ removeMessage((/\/(\d+)\/delete$/.exec(this.href))[1]);
+ return false;
+ });
+ });
+ }
+
+ // Remove a message
+ function removeMessage(id) {
+ oui.http.GET('/messages/'+id+'/delete', function(err, rsp) {
+ if (err) return console.error(err);
+ console.log('removed message', id);
+ reloadMessages();
+ });
+ }
+
+ // Load messages
+ reloadMessages(function(){
+ var $reloadButton = $('<input type="button" value="Reload">');
+ $('body').append(
+ $reloadButton.click(function(){
+ $reloadButton.attr('disabled', 'disabled');
+ reloadMessages(function(){ $reloadButton.removeAttr('disabled'); });
+ })
+ );
+ });
+ });
</script>
<style type="text/css" media="screen">
- #this form.closed { display:none; }
+ ul.block {
+ list-style: none;
+ padding:0;
+ }
</style>
-<form class="closed">
- <h2>Post a message</h2>
- <label>
- Title: <input type="text" name="title">
- </label>
- <label>
- Message: <textarea name="message"></textarea>
- </label>
- <input type="submit" value="Post message">
-</form>
-<h2>Messages</h2>
-<ul class="messages">
-</ul>
+<div fragment="header">
+ <h2>Add new message</h2>
+ <form action="/messages" method="post">
+ <input type="text" name="title"><br>
+ <textarea name="message"></textarea>
+ <input type="submit" value="Create">
+ </form>
+</div>
+
+<div fragment="list">
+ {{?messages}}
+ <h2>Messages</h2>
+ {{/messages}}
+ <ul class="block">
+ {{#messages}}
+ <li>
+ <form fragment="message-form">
+ <b>
+ {{id}} (<a href="/messages/{{id}}/delete" title="Delete">X</a>) &rarr;
+ </b>
+ {{#object}}
+ <input type="text" name="title" value="{{title}}"><br>
+ <textarea name="message">{{message}}</textarea>
+ {{/object}}
+ </form>
+ </li>
+ {{/messages}}
+ {{^messages}}
+ <li><em>Empty</em></li>
+ {{/messages}}
+ </ul>
+</div>
View
8 examples/example1/server.js
@@ -26,7 +26,9 @@ server.GET('/messages', {onlyKeys:'boolean'}, function(params, req, res){
if (params.onlyKeys) {
return Object.keys(messages.map);
} else {
- return messages.map;
+ return Object.keys(messages.map).map(function(k){
+ return {id:k, object:messages.map[k]};
+ });
}
});
@@ -62,12 +64,12 @@ function removeHandler(params, req, res) {
var message = messages.map[params.id];
if (!message)
return res.send(404);
- messages.map[params.id] = undefined;
+ delete messages.map[params.id];
// send the old message to the client
return {message: message};
}
var argspec = {id:{type:'int'}};
// DELETE is the "correct" way...
server.DELETE('/messages/:id', argspec, removeHandler);
// ...but old browsers only support GET and POST
-server.POST('/messages/:id/delete', argspec, removeHandler);
+server.GET('/messages/:id/delete', argspec, removeHandler);

0 comments on commit 51a5d51

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