Aplausos
js/util.js
// Searh
$$ ('document' ).ready (function (){
Lungo .dom ('input[type=search]' ).on ('keyup' , ...);
});
// Server URL
var util_server_url = "http://localhost:3000" ;
// Error Notification
var util_errorNotification = function (message, error) {
Lungo .Notification .error (message, "" , "warning-sign" , 2 );
};
// Métodos REST
var util_ajaxGet = function (url, data, callback) {
$$ .get (util_server_url+url, data, ..., 'json' );
};
var util_ajaxPost = function (url, data, callback) {...};
var util_ajaxPut = function (url, data, callback) {...};
var util_ajaxDelete = function (url, data, callback) {...};
html/talk/talk-add.html
<body class= "app" >
<section id= "main" data-transition= "" >
<header data-title= "Add Talk" class= "extended" ></header>
<footer>
<nav>
<a href= "talk-list.html" data-icon= "list" ></a>
<a href= "talk-add.html" data-icon= "plus" class= "active" ></a>
</nav>
</footer>
<article id= "main-article" class= "active list" >
<div class= "form" >
<fieldset>
<label> NAME:</label><input type= "text" id= "talkName" />
</fieldset> ...
</div>
<div>
<a href= "#addTalk" id= "addTalk" class= "button" > Add</a>
<a href= "talk-list.html" class= "button cancel" > Cancel</a>
</div>
</article>
</section>
</body>
html/talk/talk-add.html
js/talk/talk-add.js
$$ ('#addTalk' ).tap (function (){
var data = {
talkName : $$ ("#talkName" ).val (),
talkDate : util_stringToDate ($$ ("#talkDate" ).val ()),
talkSpeaker : $$ ("#talkSpeaker" ).val (),
talkSpeakerMail : $$ ("#talkSpeakerMail" ).val (),
talkPoints : $$ ("#talkPoints" ).val ()
};
// send data to server
util_ajaxPost ('/talk' , data, function (json) {
if (!json || json .error ) {
util_errorNotification ('ERROR adding talk' , json .error );
} else {
util_successNotification ('Talk saved' , function () {
window .location .replace ('talk-list.html' );
});
}
});
});
html/talk/talk-edit.html
<body class= "app" >
<section id= "main" data-transition= "" >
<header data-title= "Edit Talk" class= "extended" ></header>
<nav data-control= "groupbar" >
<a href= "#editTalkArticle" ... > Edit</a>
<a href= "#deleteTalkArticle" ... > Delete</a>
</nav>
<footer>
...
</footer>
<article id= "editTalkArticle" class= "list indented scroll" >
...
</article>
<article id= "deleteTalkArticle" class= "list indented scroll" >
...
</article>
</section>
</body>
html/talk/talk-edit.html
html/talk/talk-edit.html
js/talk/talk-get.js
$$ ('document' ).ready (function (){
var talkId = util_urlParams["talkId" ];
// get data from server
util_ajaxGet ('/talk/' +talkId, {}, function (json) {
if (!json || json .error ) {
util_errorNotification ('ERROR retrieving talk' , json .error );
} else {
var talk = json;
console .log ('Talk retrieved' );
drawTalk (talk);
}
});
// draw data
var drawTalk = function (talk) {
$$ ("#talkName" ).val (talk .talkName );
...
};
});
js/talk/talk-update.js
$$ ('#saveTalk' ).tap (function (){
var talkId = util_urlParams["talkId" ];
var data = {
talkName : $$ ("#talkName" ).val (),
...
};
// send data to server
util_ajaxPut ('/talk/' +talkId, data, function (json) {
if (!json || json .error ) {
util_errorNotification ('ERROR saving talk' , json .error );
} else {
util_successNotification ('Talk saved' , function () {
window .location .replace ('talk-list.html' );
});
}
});
});
js/talk/talk-delete.js
$$ ('#deleteTalk' ).tap (function (){
var talkId = util_urlParams["talkId" ];
// send data to server
util_ajaxDelete ('/talk/' +talkId, {}, function (json) {
if (!json || json .error ) {
util_errorNotification ('ERROR deleting talk' , json .error );
} else {
util_successNotification ('Talk deleted' , function () {
window .location .replace ('talk-list.html' );
});
}
});
});
html/talk/talk-list.html
<body class= "app" >
<section id= "main" data-transition= "" >
<header data-title= "Talks List" class= "extended" ></header>
<footer>
<nav>
<a href= "talk-list.html" data-icon= "list" class= "active" ></a>
<a href= "talk-add.html" data-icon= "plus" ></a>
</nav>
</footer>
<article id= "main-article" class= "active list indented scroll" >
<div class= "form" >
<fieldset data-icon= "search" >
<input type= "search" placeholder= "Search..." >
</fieldset>
</div>
<ul id= "talks" ></ul>
</article>
</section>
</body>
html/talk/talk-list.html
html/talk/talk-list.html
js/talk/talk-list.js
$$ ('document' ).ready (function (){
// get data from server
util_ajaxGet ('/talk' , {}, function (json) {
if (!json || json .error ) {
util_errorNotification ('ERROR retrieving talks' , json .error );
} else {
drawTalks (json);
}
});
// draw data
var drawTalks = function (talks) {
for (var i = 0 ; i < talks .length ; i++) {
var talk = talks[i];
$$ ("#talks" ).append (
'<li data-action="search" class="selectable">' +
'<a href="talk-edit.html?talkId=' +talk ._id +'">' +
'<strong>' +talk .talkName +'</strong></a></li>' );
}
};
}); 
