<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one
  ~ or more contributor license agreements. See the NOTICE file
  ~ distributed with this work for additional information
  ~ regarding copyright ownership. The ASF licenses this file
  ~ to you under the Apache License, Version 2.0 (the
  ~ "License"); you may not use this file except in compliance
  ~ with the License. You may obtain a copy of the License at
  ~
  ~ http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing,
  ~ software distributed under the License is distributed on an
  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  ~ KIND, either express or implied. See the License for the
  ~ specific language governing permissions and limitations
  ~ under the License.
  -->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Customer Service</title>

    <style type="text/css">
        label {
            width: 5em;
            float: left;
            text-align: right;
            margin-right: 0.5em;
            display: block;
        }
        .submit a {
            margin-left: 5.5em;
        }
        .submit input {
            margin-left: 8em;
        }
    </style>

    <script type="text/javascript" src="./jquery-1.4.2.min.js"></script>
    
    <script type="text/javascript">
        function buildCustomerAsString(id, name) {
            return "{ \"Customer\" : { \"id\" : \"" + id + "\", \"name\" : \"" + name +"\" } }";
        }

        $(document).ready(function() {
            $("#addOrUpdateCustomerButton").click(function() {
                var isError = false;

                var id = $("#addOrUpdateCustomerForm INPUT[name='customer.id']").val();
                if (id == null || id == "") {
                    alert("Field 'ID' can't be empty");
                    isError = true;
                }

                var name = $("#addOrUpdateCustomerForm INPUT[name='customer.name']").val();
                if (name == null || name == "") {
                    alert("Field 'Name' can't be empty");
                    isError = true;
                }

                if (isError) {
                    return;
                }

                $.ajax({
                    type: "POST",
                    url : "/service/customers/",
                    contentType : "application/json",
                    data : buildCustomerAsString(id, name),
                    complete : function(xhr) {
                        if (xhr.status == 200) {
                            alert("Customer added/updated successfully");
                        } else {
                            alert("Error occurred");
                        }
                    }
                });
            });

            $("#getCustomerButton").click(function() {
                var id = $("#getCustomerForm INPUT[name='customer.id']").val();
                if (id == null || id == "") {
                    alert("Field 'ID' can't be empty");
                    return;
                }

                $.ajax({
                    type: "GET",
                    url : "/service/customers/" + id,
                    dataType : "text",
                    complete : function(xhr) {
                        if (xhr.status == 200) {
                            alert(xhr.responseText);
                        } else if (xhr.status == 204) {
                            alert("Customer, with specified ID, doesn't exist");
                        } else {
                            alert("Error occurred");
                        }        
                    }
                });
            });

            $("#deleteCustomerButton").click(function() {
                var id = $("#deleteCustomerForm INPUT[name='customer.id']").val();
                if (id == null || id == "") {
                    alert("Field 'ID' can't be empty");
                    return;
                }

                $.ajax({
                    type: "DELETE",
                    url : "/service/customers/" + id,
                    complete : function(xhr) {
                        if (xhr.status == 200) {
                            alert("Customer deleted successfully");
                        } else if (xhr.status == 304) {
                            alert("Customer, with specified ID, doesn't exist");
                        } else {
                            alert("Error occurred");
                        }
                    }
                });
            });

            $("INPUT.digits").keyup(function () { 
                this.value = this.value.replace(/[^0-9\.]/g,'');
            });
        });
    </script>
</head>
<body>

<div>
    <h1>Customer Service</h1>

    <h2>Add or update customer</h2>
    <form id="addOrUpdateCustomerForm" action="#">
        <p>
            <label>ID:</label>
            <input name="customer.id" class="digits" type="text" size="3"/>
        </p>

        <p>
            <label>Name:</label>
            <input name="customer.name" type="text" size="30"/>
        </p>

        <p class="submit"><a id="addOrUpdateCustomerButton" href="#">Add or Update</a></p>
    </form>

    <h2>Get customer</h2>
    <form id="getCustomerForm" action="#">
        <p>
            <label>ID:</label>
            <input name="customer.id" class="digits" type="text" size="3"/>
        </p>

        <p class="submit"><a id="getCustomerButton" href="#">Get</a></p>
    </form>

    <h2>Delete customer</h2>
    <form id="deleteCustomerForm" action="#">
        <p>
            <label>ID:</label>
            <input name="customer.id" class="digits" type="text" size="3"/>
        </p>

        <p class="submit"><a id="deleteCustomerButton" href="#">Delete</a></p>
    </form>
</div>
</body>
</html>
