[azure] sample app
/* Reset and define common styles */
* { box-sizing: border-box; -moz-box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: Arial, Helvetica; background-color: #e0e0e0; }
button { border: 1px solid #999; color: #555; background-color: #F4F4FA; padding: 0 10px; }
button:hover { background-color: white; }
input[type=text], input:not([type]) { padding: 0 10px; text-overflow: ellipsis; }
/* Main page structure and masthead style */
#wrapper { max-width: 800px; margin: auto; padding: 20px; }
article { background-color: white; box-shadow: 0 0 12px rgba(0, 0, 0, 0.75); border-radius: 10px; }
header { background-color: #71BCFA; padding: 20px; border-top-left-radius: 10px; border-top-right-radius: 10px; }
header h1 { text-transform: uppercase; font-weight: normal; color: #545353; font-size: 28px; }
header h2 { text-transform: uppercase; font-weight: normal; color: white; font-size: 20px; }
#summary { text-align: center; padding: 8px 0; }
/* "Add new" form */
#add-item { height: 40px; margin: 17px 0 5px 0; font-size: 1.1em }
#add-item div { overflow: hidden; }
#add-item button { float: right; margin-left: 10px; padding: 0 10px; height: 100%; border-radius: 4px; }
#new-item-text { width: 100%; height: 40px; border: 1px solid #999; font-size: 1em; border-radius: 4px; }
/* List of items */
#todo-items li { list-style-type: none; height: 36px; padding: 0px 5px; border-bottom: 1px solid #dadada; }
.item-complete { float: left; margin: 0 8px 0 15px; height: 100%; }
.item-delete { float: right; margin: 5px; margin-right: 15px; height: 26px; }
/* Textboxes in list of items */
#todo-items li div { overflow: hidden; padding: 5px 2px; }
.item-text { width: 100%; height: 26px; line-height: 24px; border: 1px solid transparent; background-color: transparent; }
.item-text:focus, .item-text:hover { border-color: #aaa; background-color: #FFC; }
/* Footer */
footer { text-align: center; font-size: 0.8em; margin-top: 20px; }
footer a { color: #666; }
<!DOCTYPE html>
<html>
<head>
<title>Todo list: HoldRite</title>
<link rel='stylesheet' href='styles.css' />
<!--[if lt IE 9]><script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.1/html5shiv.js"></script><![endif]-->
</head>
<body>
<div id='wrapper'>
<article>
<header>
<h2>Windows Azure</h2>
<h1>Mobile Services</h1>
<form id='add-item'>
<button type='submit'>Add</button>
<div><input type='text' id='new-item-text' placeholder='Enter new task' /></div>
</form>
</header>
<ul id='todo-items'></ul>
<p id='summary'>Loading...</p>
</article>
<footer>
<a href='http://www.windowsazure.com/en-us/develop/mobile/'>
Learn more about Windows Azure Mobile Services
</a>
</footer>
</div>
<script src='//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js'></script>
<script src='https://holdrite.azure-mobile.net/client/MobileServices.Web-1.0.0.min.js'></script>
<script src='app.js'></script>
</body>
</html>
$(function() {
var client = new WindowsAzure.MobileServiceClient('https://holdrite.azure-mobile.net/', 'API TOKEN GOES HERE'),
todoItemTable = client.getTable('todoitem');
// Read current data and rebuild UI.
// If you plan to generate complex UIs like this, consider using a JavaScript templating library.
function refreshTodoItems() {
var query = todoItemTable.where({ complete: false });
query.read().then(function(todoItems) {
var listItems = $.map(todoItems, function(item) {
return $('<li>')
.attr('data-todoitem-id', item.id)
.append($('<button class="item-delete">Delete</button>'))
.append($('<input type="checkbox" class="item-complete">').prop('checked', item.complete))
.append($('<div>').append($('<input class="item-text">').val(item.text)));
});
$('#todo-items').empty().append(listItems).toggle(listItems.length > 0);
$('#summary').html('<strong>' + todoItems.length + '</strong> item(s)');
});
}
function getTodoItemId(formElement) {
return Number($(formElement).closest('li').attr('data-todoitem-id'));
}
// Handle insert
$('#add-item').submit(function(evt) {
var textbox = $('#new-item-text'),
itemText = textbox.val();
if (itemText !== '') {
todoItemTable.insert({ text: itemText, complete: false }).then(refreshTodoItems);
}
textbox.val('').focus();
evt.preventDefault();
});
// Handle update
$(document.body).on('change', '.item-text', function() {
var newText = $(this).val();
todoItemTable.update({ id: getTodoItemId(this), text: newText });
});
$(document.body).on('change', '.item-complete', function() {
var isComplete = $(this).prop('checked');
todoItemTable.update({ id: getTodoItemId(this), complete: isComplete }).then(refreshTodoItems);
});
// Handle delete
$(document.body).on('click', '.item-delete', function () {
todoItemTable.del({ id: getTodoItemId(this) }).then(refreshTodoItems);
});
// On initial load, start by fetching the current data
refreshTodoItems();
});