Browse Source

init

master
Fabian Jenn 4 years ago
commit
0857163405
2 changed files with 209 additions and 0 deletions
  1. 117
    0
      public/assets/js/index.js
  2. 92
    0
      public/index.html

+ 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…
Cancel
Save