API tools faq
paste
Advertisement
hsianghui

IS3106 Lab4 (searchCustomers2.xhtml)

hsianghui
Oct 29th, 2017
136
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 17.63 KB | None | 0 0
raw download clone embed print report
  1. <?xml version='1.0' encoding='UTF-8' ?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml"
  4.      xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
  5.  
  6.     <body>
  7.  
  8.         <ui:composition template="./layout/default2.xhtml">
  9.  
  10.             <ui:define name="title">
  11.                 Search Customers
  12.             </ui:define>
  13.  
  14.             <ui:define name="content">
  15.                 <!-- Content Header (Page header) -->
  16.                 <section class="content-header">
  17.                     <h1>
  18.                         Search Customers
  19.                         <small>Customer Management</small>
  20.                     </h1>
  21.                     <ol class="breadcrumb">
  22.                         <li><a href="./"><i class="fa fa-dashboard"></i> Home</a></li>
  23.                         <li class="active">List Customers</li>
  24.                     </ol>
  25.                 </section>
  26.  
  27.                 <!-- Main content -->
  28.                 <section class="content">
  29.                     <div class="row">
  30.                         <div class="col-xs-12">
  31.                             <div class="box">
  32.                                 <div class="box-header">
  33.                                     <h3 class="box-title">Search Customers</h3>
  34.                                 </div>
  35.                                 <!-- /.box-header -->
  36.                                 <div class="box-body">
  37.                                     <table id="example1" class="table table-bordered table-striped">
  38.                                         <thead>
  39.                                             <tr>
  40.                                                 <th>Id</th>
  41.                                                 <th>Name</th>
  42.                                                 <th>Gender</th>
  43.                                                 <th>DOB</th>
  44.                                                 <th>Created</th>
  45.                                                 <th></th>
  46.                                             </tr>
  47.                                         </thead>
  48.                                         <tbody>
  49.                                         </tbody>
  50.                                         <tfoot>
  51.                                             <tr>
  52.                                                 <th>Id</th>
  53.                                                 <th>Name</th>
  54.                                                 <th>Gender</th>
  55.                                                 <th>DOB</th>
  56.                                                 <th>Created</th>
  57.                                                 <th></th>
  58.                                             </tr>
  59.                                         </tfoot>
  60.                                     </table>
  61.                                 </div>
  62.                                 <!-- /.box-body -->
  63.                             </div>
  64.                             <!-- /.box -->
  65.                         </div>
  66.                         <!-- /.col -->
  67.                     </div>
  68.                     <!-- /.row -->
  69.  
  70.                     <div class="modal fade" id="modal-default">
  71.                         <div class="modal-dialog">
  72.                             <div class="modal-content">
  73.                                 <div class="modal-header">
  74.                                     <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  75.                                         <span aria-hidden="true">&times;</span></button>
  76.                                     <h4 class="modal-title">Customer Details</h4>
  77.                                 </div>
  78.                                 <div class="modal-body" id="dialog-body">
  79.                                     <p>One fine body&hellip;</p>
  80.                                 </div>
  81.                                 <div class="modal-footer">
  82.                                     <button type="button" class="btn btn-default pull-right" data-dismiss="modal">Close</button>
  83.                                 </div>
  84.                             </div>
  85.                             <!-- /.modal-content -->
  86.                         </div>
  87.                         <!-- /.modal-dialog -->
  88.                     </div>
  89.                     <!-- /.modal -->
  90.                 </section>
  91.                 <!-- /.content -->
  92.             </ui:define>
  93.  
  94.             <ui:define name="script">
  95.                 <script>
  96.                     //<![CDATA[
  97.                    //Add the CDATA tag so that JSF will not have issues when using sensitive symbols e.g. < and &
  98.  
  99.                    var selectedCId = null;
  100.                    var dtable = $('#example1').DataTable({
  101.                        'paging': true,
  102.                        'lengthChange': false,
  103.                        'pageLength': 5, //5 entries per page
  104.                        'searching': true,
  105.                        'ordering': true,
  106.                        'info': true,
  107.                        'autoWidth': false,
  108.                        'ajax': {
  109.                            url: '/CRM-war/webresources/customers',
  110.                            dataFilter: function (data) {
  111.                                //add the 'data' attribute to the JSON response
  112.                                //so that it can be read properly with DataTable
  113.                                var json = jQuery.parseJSON(data);
  114.  
  115.                                json.map(function (item) {
  116.                                    //convert gender's value to 'Female' or 'Male'
  117.                                    item.gender = (item.gender === 1) ? 'Female' : 'Male';
  118.  
  119.                                    //convert dob and created's date format
  120.                                    item.created = moment(item.created).format('DD/MM/YYYY');
  121.                                    item.dob = moment(item.dob).format('DD/MM/YYYY');
  122.                                });
  123.  
  124.                                //convert all the gender field to be male or female
  125.                                json = {'data': json};
  126.                                return JSON.stringify(json);
  127.                            }
  128.                        },
  129.                        "columnDefs": [{
  130.                                'targets': -1,
  131.                                'data': null,
  132.                                'defaultContent': '<div class="btn-group">\
  133.                                                        <button type="button" data-type="view" class="search btn btn-default" data-toggle="modal" data-target="#modal-default"><i class="fa fa-fw fa-search"></i></button>\
  134.                                                        <button type="button" data-type="edit" class="btn btn-default"><i class="fa fa-fw fa-edit"></i></button>\
  135.                                                        <button type="button" data-type="delete" class="btn btn-default"><i class="fa fa-fw fa-remove"></i></button>\
  136.                                                      </div>'
  137.                            }],
  138.                        'columns': [
  139.                            {'data': 'id'},
  140.                            {'data': 'name'},
  141.                            {'data': 'gender'},
  142.                            {'data': 'dob'},
  143.                            {'data': 'created'},
  144.                            {'data': null}
  145.                        ]
  146.                    });
  147.  
  148.                    function reloadDataTable() {
  149.                        dtable.ajax.reload(function () {
  150.                            if (selectedCId !== null) {
  151.                                console.log("checking : " + selectedCId);
  152.                                var data = dtable.data();
  153.                                for (var i = 0; i < data.length; i++) {
  154.                                    if (data[i].id === selectedCId) {
  155.                                        refreshDialog(data[i]);
  156.                                        console.log("in here!!!");
  157.                                        console.log(data[i]);
  158.                                        break;
  159.                                    }
  160.                                }
  161.                            }
  162.                        });
  163.                    } //end reloadDataTable
  164.  
  165.                    function addContact(cId) {
  166.                        var contact = $('#selectContact').val();
  167.                        var contactValue = $('#inputContactValue').val().trim();
  168.                        if (contactValue === ''){
  169.                            return;
  170.                        }
  171.                        
  172.                        console.log("#adding customerId : " + cId + " contact : " + contact + " " + contactValue);
  173.  
  174.                        var data = {};
  175.                        if (contact === 'PHONE') {
  176.                            data.phone = contactValue;
  177.                        }
  178.                        else if (contact === 'EMAIL') {
  179.                            data.email = contactValue;
  180.                        }
  181.                        console.log(data);
  182.  
  183.                        $.ajax({
  184.                            url: '/CRM-war/webresources/customers/' + cId + '/contacts',
  185.                            headers: {
  186.                                'Accept': 'application/json',
  187.                                'Content-Type': 'application/json'
  188.                            },
  189.                            type: 'POST',
  190.                            data: JSON.stringify(data),
  191.                            success: function(){
  192.                                reloadDataTable();
  193.                            }
  194.                        });
  195.                    }
  196.  
  197.                    function addField(cId) {
  198.                        var field = $('#inputField').val().trim();
  199.                        var fieldValue = $('#inputFieldValue').val().trim();
  200.                        if (field === '' || fieldValue === ''){
  201.                            return;
  202.                        }
  203.                        
  204.                        $.ajax({
  205.                            url: '/CRM-war/webresources/customers/' + cId + '/fields',
  206.                            headers: {
  207.                                'Accept': 'application/json',
  208.                                'Content-Type': 'application/json'
  209.                            },
  210.                            type: 'POST',
  211.                            data: JSON.stringify({name: field, value: fieldValue}),
  212.                            success: function(){
  213.                                reloadDataTable();
  214.                            }
  215.                        });
  216.                    }
  217.  
  218.                    function deleteContact(e) {
  219.                        var thisElement = $(e);
  220.                        var cId = thisElement.attr('data-contact-id');
  221.                        console.log("#delete contact : " + cId);
  222.  
  223.                        var choice = confirm("Do you want to delete?");
  224.  
  225.                        if (choice) {
  226.                            $.ajax({
  227.                                url: '/CRM-war/webresources/contacts/' + cId,
  228.                                type: 'DELETE',
  229.                                success: function () {
  230.                                    reloadDataTable();
  231.                                }
  232.                            });
  233.                        }
  234.                    }
  235.  
  236.                    function deleteField(e) {
  237.                        var thisElement = $(e);
  238.                        var fId = thisElement.attr('data-field-id');
  239.                        var cId = thisElement.attr('data-customer-id');
  240.  
  241.                        var choice = confirm("Do you want to delete?");
  242.  
  243.                        if (choice) {
  244.                            $.ajax({
  245.                                url: '/CRM-war/webresources/customers/' + cId + '/fields/' + fId,
  246.                                type: 'DELETE',
  247.                                success: function () {
  248.                                    reloadDataTable();
  249.                                }
  250.                            });
  251.                        }
  252.                    }
  253.  
  254.                    function refreshDialog(data) {
  255.                        var cId = data.id;
  256.                        var html = '<div class="row">\
  257.                                            <div class="col-xs-4"><b>Id</b></div>\
  258.                                            <div class="col-xs-8">' + cId + '</div>\
  259.                                            <div class="col-xs-4"><b>Name</b></div>\
  260.                                            <div class="col-xs-8">' + data.name + '</div>\
  261.                                            <div class="col-xs-4"><b>Gender</b></div>\
  262.                                            <div class="col-xs-8">' + data.gender + '</div>\
  263.                                            <div class="col-xs-4"><b>DOB</b></div>\
  264.                                            <div class="col-xs-8">' + data.dob + '</div>\
  265.                                            <div class="col-xs-4"><b>Created</b></div>\
  266.                                            <div class="col-xs-8">' + data.created + '</div>';
  267.  
  268.                        //add list of fields
  269.                        var fields = data['fields'];
  270.                        fields.map(function (item) {
  271.                            html += '<div class="col-xs-4"><b>' + item.name + '</b></div>';
  272.                            html += '<div class="col-xs-4">' + item.value + '</div>';
  273.                            html += '<div class="col-xs-4"><a class="btn btn-danger btn-xs" data-customer-id="' + data.id + '" data-field-id="' + item.id + '" onclick="deleteField(this)">Delete</a></div>';
  274.                        });
  275.  
  276.                        //add list of contacts
  277.                        var contacts = data.contacts;
  278.                        contacts.map(function (item) {
  279.                            if (item['phone']) {
  280.                                html += '<div class="col-xs-4"><b>Phone</b></div>';
  281.                                html += '<div class="col-xs-4">' + item.phone + '</div>';
  282.                                html += '<div class="col-xs-4"><a class="btn btn-danger btn-xs" data-contact-id="' + item.id + '" onclick="deleteContact(this)">Delete</a></div>';
  283.                            }
  284.                            else if (item['email']) {
  285.                                html += '<div class="col-xs-4"><b>Email</b></div>';
  286.                                html += '<div class="col-xs-4">' + item.email + '</div>';
  287.                                html += '<div class="col-xs-4"><a class="btn btn-danger btn-xs" data-contact-id="' + item.id + '" onclick="deleteContact(this)">Delete</a></div>';
  288.                            }
  289.                        });
  290.  
  291.                        //add textbox for adding field
  292.                        html += '<div class="col-xs-4"><input class="form-control" id="inputField" placeholder="field name" required/></div>';
  293.                        html += '<div class="col-xs-4"><input class="form-control" id="inputFieldValue" placeholder="field value" required/></div>';
  294.                        html += '<div class="col-xs-4"><a class="btn btn-primary" onclick="addField(' + cId + ')">Add Field</a></div>';
  295.  
  296.                        //add textbox for adding contact
  297.                        html += '<div class="col-xs-4"><select class="form-control" id="selectContact"><option value="PHONE">Phone</option><option value="EMAIL">Email</option></select></div>';
  298.                        html += '<div class="col-xs-4"><input class="form-control" id="inputContactValue" required/></div>';
  299.                        html += '<div class="col-xs-4"><a class="btn btn-success" onclick="addContact(' + cId + ')">Add Contact</a></div>';
  300.  
  301.                        html += '</div>';
  302.                        $('#dialog-body').html(html);
  303.                    }
  304.  
  305.                    $('#example1 tbody').on('click', 'button', function () {
  306.                        var button = $(this);
  307.                        var type = button.attr('data-type');
  308.                        var data = dtable.row($(this).parents('tr')).data();
  309.                        var id = data.id;
  310.  
  311.                        if (type === 'view') {
  312.                            //load the dialog box
  313.                            refreshDialog(data);
  314.                            selectedCId = id;
  315.                            console.log("selectedCId : " + selectedCId);
  316.                        }
  317.                        else if (type === 'edit') {
  318.                            window.location.href = "manageCustomer.xhtml?cId=" + id;
  319.                        }
  320.                        else if (type === 'delete') {
  321.                            //DO a DELETE request and refresh
  322.                            var choice = confirm("Do you want to delete?");
  323.  
  324.                            if (choice) {
  325.                                $.ajax({
  326.                                    url: '/CRM-war/webresources/customers/' + id,
  327.                                    type: 'DELETE',
  328.                                    success: function () {
  329.                                        dtable.ajax.reload();
  330.                                    }
  331.                                });
  332.                            }
  333.                        }
  334.                    });
  335.  
  336.                    $('#modal-default').on('hidden.bs.modal', function (e) {
  337.                        selectedCId = null;
  338.                        console.log("hidden modal");
  339.                    })
  340.  
  341. //                  $('#example1').DataTable();
  342. //]]>
  343.                 </script>
  344.             </ui:define>
  345.  
  346.         </ui:composition>
  347.  
  348.     </body>
  349. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!