Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: master
Fetching contributors…

Octocat-spinner-32-eaf2f5

Cannot retrieve contributors at this time

file 105 lines (83 sloc) 4.391 kb
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Contacts</title>

    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="/webjars/bootstrap/2.1.1/css/bootstrap.min.css">
    <script type="text/javascript" src="/webjars/jquery/1.8.2/jquery.min.js"></script>
    
    <style>
        body {
            margin-top: 50px;
        }
    </style>
    
    <script type="text/javascript">
        $(function() {
            getContacts()
        })
        
        
        function getContacts() {
            $.get("/api/contact", function(contacts) {
                $("#contacts").empty()
                $.each(contacts, function(index, contact) {
                    var contactCard = $("<div>").addClass("well well-small")
                    contactCard.append($("<h3>").css("margin-top", "0px").css("margin-bottom", "0px").text(contact.name))

                    console.log(contact.contactMethods)
                    var contactMethods = $("<div>")
                    $.each(contact.contactMethods, function(name, value) {
                        var contactMethodRow = $("<div>").css("margin-left", "15px")
                        contactMethodRow.append($("<h5>").css("min-width", "210px").css("display", "inline-block").css("margin", "0px").text(name + ":"))
                        contactMethodRow.append($("<span>").css("display", "inline").text(value))
                        contactMethods.append(contactMethodRow)
                    })
                    
                    contactCard.append(contactMethods)
                    
                    var newContactMethodForm = $("<form>").css("margin-left", "15px").submit(saveContactMethod)
                    newContactMethodForm.append($("<input>").addClass("hidden").attr("type", "hidden").val(contact.id))
                    newContactMethodForm.append($("<input>").addClass("name").attr("placeholder", "Name (e.g. Work Phone)")).attr("required", true)
                    newContactMethodForm.append($("<input>").addClass("value").attr("placeholder", "Value (e.g. 303-555-1212)")).attr("required", true)
                    newContactMethodForm.append($("<button>").addClass("btn btn-small").attr("type", "submit").text("Add Contact Method"))
                    
                    contactCard.append(newContactMethodForm)
                    
                    $("#contacts").append(contactCard)
                })
                
                // add the new contact card
                var newContactCard = $("<div>").addClass("well")
                newContactCard.append($("<input>").attr("id", "newContactName").attr("placeholder", "New Contact").attr("required", true))
                newContactCard.append($("<button>").addClass("btn btn-small").text("Save").click(saveContact))
                $("#contacts").append(newContactCard)
            })
        }
        
        function saveContact(event) {
            $.ajax({url: "/api/contact", type: "POST", contentType: "application/json", data: JSON.stringify({name: $("#newContactName").val()}), success: function(event) {
                $("#newContactName").val("")
                getContacts()
            }})
        }
        
        function saveContactMethod(event) {
            event.preventDefault()
            var contactId = $(event.currentTarget).children(".hidden").val()
            var contactMethod = {}
            contactMethod.name = $(event.currentTarget).children(".name").val()
            contactMethod.value = $(event.currentTarget).children(".value").val()
            
            $.ajax({url: "/api/contact/" + contactId + "/contact-method", type: "POST", contentType: "application/json", data: JSON.stringify(contactMethod), success: function(event) {
                // hacky: reset all of the contactMethod form inputs
                $(".name").val("")
                $(".value").val("")
                getContacts()
            }})
        }
    </script>
</head>

<body>
<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <a href="/" class="brand">Contacts</a>
        </div>
    </div>
</div>

<div class="container">
    
    <div id="contacts">
        
    </div>
    
</div>

</body>
</html>
Something went wrong with that request. Please try again.