Created
January 2, 2017 11:18
-
-
Save johnotu/5b7f1e96d7b0138ddb292273949169c8 to your computer and use it in GitHub Desktop.
A Simple Addressbook using a DevLess Backend
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Address Book</title> | |
| <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> | |
| <style type="text/css"> | |
| button{margin: 0 20px;} | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-md-8 col-md-offset-2"> | |
| <h2>A simple Address Book</h2> | |
| <br> | |
| <form> | |
| <div class="form-group"> | |
| <label for="firstName">First Name</label> | |
| <input type="text" class="form-control" id="firstName"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="lastName">Last Name</label> | |
| <input type="text" class="form-control" id="lastName"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="email">Email</label> | |
| <input type="email" class="form-control" id="email"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="phoneNumber">Phone Number</label> | |
| <input type="tel" class="form-control" id="phoneNumber"> | |
| </div> | |
| <button type="button" class="btn btn-primary" id="submit">Add contact</button> | |
| </form> | |
| <p id="response"></p> | |
| <br> | |
| <div class="table-responsive"> | |
| <table class="table table-condensed table-bordered" id="address-table"> | |
| <thead class="active"> | |
| <tr> | |
| <th>First Name</th> | |
| <th>Last Name</th> | |
| <th>Email</th> | |
| <th>Phone Number</th> | |
| <th></th> | |
| <th></th> | |
| </tr> | |
| </thead> | |
| <tbody></tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> | |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> | |
| <!-- DevLess SDK --> | |
| <script src="https://library.devless.io/cdn/1.0/dv_sdk.js"></script> | |
| <script> | |
| var constants = { "token":"7f0449c4d77ade309aa26ef0a9de6bbe", "domain":"http://localhost:3000" }; Devless = new Devless(constants); | |
| getAddresses(); | |
| $('button#submit').click(function(){ | |
| var firstName = $('#firstName').val(), | |
| lastName = $('#lastName').val(), | |
| email = $('#email').val(), | |
| phoneNumber = $('#phoneNumber').val(); | |
| var data = { | |
| "firstName": firstName, | |
| "lastName": lastName, | |
| "email": email, | |
| "phoneNumber": phoneNumber | |
| }; | |
| Devless.addData("addressbook", "addresses", data, function(response){ | |
| console.log(response); | |
| $('p#response').text(response.message); | |
| $('input').val(''); | |
| if(response.status_code === 609){ | |
| $('tbody').empty(); | |
| getAddresses(); | |
| } | |
| }); | |
| }); | |
| function deleteAddress(id){ | |
| Devless.deleteData('addressbook', 'addresses', 'id', id, function(response){ | |
| console.log(response); | |
| $('p#response').text(response.message); | |
| }); | |
| $('tbody').empty(); | |
| getAddresses(); | |
| } | |
| function updateAddress(id){ | |
| Devless.queryData('addressbook', 'addresses', {where:["id," + id]}, function(response){ | |
| console.log(response); | |
| var data = response.payload.results[0]; | |
| $('input#firstName').val(data.firstname); | |
| $('input#lastName').val(data.lastname); | |
| $('input#email').val(data.email); | |
| $('input#phoneNumber').val(data.phonenumber); | |
| $('form').append("<button type='button' class='btn btn-info' id='update-address' onclick='update(" + data.id + ")'>Update</button>") | |
| }) | |
| } | |
| function update(id){ | |
| var firstName = $('#firstName').val(), | |
| lastName = $('#lastName').val(), | |
| email = $('#email').val(), | |
| phoneNumber = $('#phoneNumber').val(); | |
| var data = { | |
| "firstName": firstName, | |
| "lastName": lastName, | |
| "email": email, | |
| "phoneNumber": phoneNumber | |
| }; | |
| Devless.updateData("addressbook", "addresses", "id", id, data, function(response){ | |
| console.log(response); | |
| $('input').val(''); | |
| $('tbody').empty(); | |
| getAddresses(); | |
| $('#update-address').remove(); | |
| }); | |
| } | |
| function getAddresses(){ | |
| var params = {}; | |
| Devless.queryData('addressbook', 'addresses', params, function(response){ | |
| console.log(response); | |
| var tableContent = '', | |
| updateButton = "<button type='button' class='btn btn-info update'>Update</button>", data = response.payload.results, dataLength = data.length; | |
| for(var i=0; i<dataLength; i++){ | |
| tableContent += '<tr>'; | |
| tableContent += '<td>' + data[i].firstname + '</td>'; | |
| tableContent += '<td>' + data[i].lastname + '</td>'; | |
| tableContent += '<td>' + data[i].email + '</td>'; | |
| tableContent += '<td ' + "id='" + data[i].id + "'>" + data[i].phonenumber + '</td>'; | |
| tableContent += '<td>' + "<button type='button' class='btn btn-info' " + "onclick='" + "updateAddress(" + data[i].id + ")'" + ">Update</button>" + '</td>'; | |
| tableContent += '<td>' + "<button type='button' class='btn btn-danger' " + "onclick='" + "deleteAddress(" + data[i].id + ")'" + ">Delete</button>" + '</td>'; | |
| tableContent += '</tr>'; | |
| $('tbody').append(tableContent); | |
| tableContent = ''; | |
| }; | |
| }); | |
| } | |
| </script> | |
| </body> | |
| </html> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment