commit
0857163405
2 changed files with 209 additions and 0 deletions
+ 117
- 0
public/assets/js/index.js
View File
| $('#contactForm').submit(function(event) { | |||||
| // prevent page reload | |||||
| event.preventDefault(); | |||||
| var name = $('#name').val(); | |||||
| var email = $('#email').val(); | |||||
| var mobile = $('#mobile').val(); | |||||
| // Save the contact to the database with Hoodie | |||||
| hoodie.store.add({ | |||||
| name: name, | |||||
| mobile: mobile, | |||||
| email: email | |||||
| }); | |||||
| $('#contactForm')[0].reset(); | |||||
| }); | |||||
| $('#signup').click(function (event) { | |||||
| signUp(); | |||||
| }); | |||||
| $('#signin').click(function (event) { | |||||
| signIn(); | |||||
| }); | |||||
| $('#signout').click(function (event) { | |||||
| signOut(); | |||||
| }); | |||||
| if (hoodie.account.isSignedIn()) { | |||||
| showAuthenticated(); | |||||
| } else { | |||||
| showAnonymous(); | |||||
| } | |||||
| // when the site loads in the browser, | |||||
| // we load all previously saved contacts from hoodie | |||||
| loadContacts(); | |||||
| //when a new entry is added to the database, run the corresponding function | |||||
| hoodie.store.on('add', addNewContactToList); | |||||
| function loadContacts() { | |||||
| hoodie.store.findAll().then(function(contacts) { | |||||
| var tbody = ''; | |||||
| $.each(contacts, function (i, contact) { | |||||
| var row = '<tr><td>' + contact.name + '</td><td>' + contact.mobile + '</td><td>' + contact.email + '</td></tr>'; | |||||
| tbody += row; | |||||
| }); | |||||
| $("#contactList tbody").html('').html(tbody); | |||||
| }); | |||||
| } | |||||
| function addNewContactToList(contact) { | |||||
| var newContact = '<tr><td>' + contact.name + '</td><td>' + contact.mobile + '</td><td>' + contact.email + '</td></tr>' | |||||
| $("#contactList tbody").append(newContact); | |||||
| } | |||||
| function signUp() { | |||||
| var username = prompt('username'); | |||||
| var password = prompt('password'); | |||||
| hoodie.account.signUp({ | |||||
| username: username, | |||||
| password: password | |||||
| }) | |||||
| .then(function() { | |||||
| return hoodie.account.signIn({ | |||||
| username: username, | |||||
| password: password | |||||
| }); | |||||
| }) | |||||
| .then(function() { | |||||
| showAuthenticated(); | |||||
| }) | |||||
| .catch(function(errror) { | |||||
| alert('Ooops, something went wrong: ' + error.message); | |||||
| }) | |||||
| } | |||||
| function signIn(){ | |||||
| var username = prompt('username'); | |||||
| var password = prompt('password'); | |||||
| hoodie.account.signIn({ | |||||
| username: username, | |||||
| password: password | |||||
| }) | |||||
| .then(function() { | |||||
| showAuthenticated(); | |||||
| }) | |||||
| .catch(function(error) { | |||||
| alert('ooops: ' + error.message); | |||||
| }); | |||||
| } | |||||
| function signOut(){ | |||||
| hoodie.account.signOut() | |||||
| .then(function() { | |||||
| showAnonymous(); | |||||
| }) | |||||
| .catch(function(error) { | |||||
| alert('ooops: ' + error.message); | |||||
| }); | |||||
| } | |||||
| function showAuthenticated(){ | |||||
| $('#username').text('signed in as ' + hoodie.account.username); | |||||
| $('#authenticated').show(); | |||||
| $('#anonymous').hide(); | |||||
| } | |||||
| function showAnonymous(){ | |||||
| $('#authenticated').hide(); | |||||
| $('#anonymous').show(); | |||||
| } |
+ 92
- 0
public/index.html
View File
| <!DOCTYPE html> | |||||
| <html lang="en"> | |||||
| <head> | |||||
| <meta charset="utf-8"> | |||||
| <title>My Hoodie App</title> | |||||
| <link rel="stylesheet" href="assets/vendor/bootstrap/bootstrap.min.css"> | |||||
| </head> | |||||
| <body> | |||||
| <nav class="navbar navbar-default"> | |||||
| <div class="container-fluid"> | |||||
| <div class="navbar-header"> | |||||
| <a class="navbar-brand" href="#"> Hoodie</a> | |||||
| </div> | |||||
| <div id="navbar" class="navbar-collapse collapse"> | |||||
| <div id="authenticated" class="nav navbar-form navbar-right"> | |||||
| <span id="username"></span> | |||||
| <button id="signout" type="button" class="btn btn-default">Sign out</button> | |||||
| </div> | |||||
| <div id="anonymous" class="nav navbar-form navbar-right"> | |||||
| <button id="signup" type="button" class="btn btn-default">Sign up</button> | |||||
| <button id="signin" type="button" class="btn btn-default">Sign in</button> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| </nav> | |||||
| <div class="container"> | |||||
| <div class="row"> | |||||
| <div class="col-md-10"> | |||||
| <h2>Add new contact </h2> | |||||
| <hr /> | |||||
| <form id="contactForm" class="form-horizontal"> | |||||
| <div class="form-group"> | |||||
| <label for="name" class="col-sm-2 control-label">Name</label> | |||||
| <div class="col-sm-10"> | |||||
| <input type="text" class="form-control" id="name" placeholder="Name"> | |||||
| </div> | |||||
| </div> | |||||
| <div class="form-group"> | |||||
| <label for="mobile" class="col-sm-2 control-label">Mobile</label> | |||||
| <div class="col-sm-10"> | |||||
| <input type="text" class="form-control" id="mobile" placeholder="Mobile"> | |||||
| </div> | |||||
| </div> | |||||
| <div class="form-group"> | |||||
| <label for="email" class="col-sm-2 control-label">Email</label> | |||||
| <div class="col-sm-10"> | |||||
| <input type="email" class="form-control" id="email" placeholder="Email"> | |||||
| </div> | |||||
| </div> | |||||
| <div class="form-group"> | |||||
| <div class="col-sm-offset-2 col-sm-10"> | |||||
| <button type="submit" class="btn btn-default">Save Contact</button> | |||||
| </div> | |||||
| </div> | |||||
| </form> | |||||
| <hr /> | |||||
| </div> | |||||
| </div> | |||||
| <div class="row"> | |||||
| <div class="col-md-10"> | |||||
| <h2>Contact List</h2> | |||||
| <hr /> | |||||
| <table id="contactList" class="table table-bordered"> | |||||
| <thead> | |||||
| <tr> | |||||
| <th>Name</th> | |||||
| <th>Mobile</th> | |||||
| <th>Email</th> | |||||
| <th></th> | |||||
| </tr> | |||||
| </thead> | |||||
| <tbody> | |||||
| </tbody> | |||||
| </table> | |||||
| </div> | |||||
| </div> | |||||
| <script src="assets/vendor/jquery-2.1.0.min.js"></script> | |||||
| <script src="assets/vendor/bootstrap/bootstrap.min.js"></script> | |||||
| <!-- Load the dynamic version of hoodie.js that includes all the plugin code--> | |||||
| <script src="/hoodie/client.js"></script> | |||||
| <script src="assets/js/index.js"></script> | |||||
| </body> | |||||
| </html> |
Loading…