jennfa63626/Hoodie-Beispielprojekt
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

init

Browse Source
This commit is contained in:
Fabian Jenn 2020-05-30 16:09:08 +02:00
commit 0857163405
2 changed files with 209 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

117
public/assets/js/index.js Normal file
View File

@ -0,0 +1,117 @@
$('#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
public/index.html Normal file
View File

@ -0,0 +1,92 @@
<!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>