struts-sandbox/overdrive/PhoneBook2/projects/Web/PhoneBook.html - struts-archive - Git at Google

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
         <head>
                 <title>PhoneBook</title>
                 <script type="text/javascript" src="PhoneBook.ashx?proxy&v=2"></script>
                 <script type="text/javascript" src="js/dojo/dojo.js"></script>
                 <script type="text/javascript">
                 	dojo.require("dojo.widget.TabContainer");
 	                dojo.require("dojo.widget.ContentPane");
 	                dojo.require("dojo.widget.LayoutContainer");
                     dojo.require("dojo.io.*");
                     dojo.require("dojo.event.*");
                     dojo.require("dojo.html.*");
                     dojo.require("dojo.json");
             		dojo.require("dojo.widget.FilteringTable");
             		dojo.hostenv.writeIncludes();

                     /* call server */

                     function server(call)
                     {
                         var bindArgs = {
                             url: call.url+'?rpc',
                             error: function(type, data, evt){alert("Error Communicating with Server: " + data.result);},
                             method: "POST",
                             mimetype: "text/json",
                             handle: call.callback,
                             postContent: dojo.json.serialize(call.request)
                         };
                         var req = dojo.io.bind(bindArgs);
                         dojo.event
                         return req;
                     }

             		var container_id = "container";

                     function view_select(id) {
                         var w = dojo.widget.byId(container_id);
            	            w.selectChild(id);
                     }

                     /* lister */

             		var lister_id = "lister";
             		var entry_list_id = "entry_list";

                     function lister_select() {
                         view_select(lister_id);
                     }

             		function entry_list() {
             		    return dojo.widget.byId(entry_list_id);
             		}

                     function entry_list_result(type, data, evt)
                     {
                         entry_list().store.setData(data.result);
                     }
                     function entry_list_load()
                     {
                         PhoneBook.rpc.entry_list(entry_list_result).call(server);
                     }
                     dojo.addOnLoad(entry_list_load);

                     function entry_list_select_edit(evt) {
                         entry_edit(entry_list().getSelectedData().entry_key);
                     }
                     function entry_list_select_delete(evt) {
                         entry_delete(entry_list().getSelectedData().entry_key);
                     }

                     function entry_list_select() {
                         dojo.event.connect(entry_list(), "onSelect", entry_list_select_edit);
                     }
                     dojo.addOnLoad(entry_list_select);

                     /* lister filters */

     		        function dateFilter(hired) {
 			            return (hired == '5/29/1987' || hired == '11/18/1984');
 		            }
 		            function applyDate(id){
 			            dojo.widget.byId(id).setFilter("hired", dateFilter);
 		            }

 		            function nameFilter(last_name){
 			            return (last_name.charAt(0) >= 'M' && last_name.charAt(0) <= 'Z');
 		            }
 		            function applyName(id){
 			            dojo.widget.byId(id).setFilter("last_name", nameFilter);
 	            	}

 		            function clearFilters(id){
 			            dojo.widget.byId(id).clearFilters();
 		            }
 		            function reloadData(id){
 			            dojo.widget.byId(id).store.clearData();
 			            entry_list_load();
 			        }

                     /* editor */

             		var editor_id = "editor";

                     function editor_select() {
                         view_select(editor_id);
                     }

             		var entry_form_id = "entry_form";

             		function entry_form() {
             		    return dojo.widget.byId(entry_form_id);
             	    }

             		var dpHired_id = "dpHired";

                     function setHired(hired) {
                         var dpHired = dojo.widget.byId(dpHired_id);
                     	dpHired.setDate(hired);
                     }

                     function entry_edit_result(type, data, evt)
                     {
                     	entry_form().setValues(data.result);
                     	var part = new Array();
                     	part = data.result.hired.split('/',3); // mm/dd/yyyy
                     	var yyyy = part[2];
                     	var mm = part[0];
                     	var dd = part[1];
                     	if (mm.length==1) mm = new String().concat('0',mm);
                     	if (dd.length==1) dd = new String().concat('0',dd);
                     	var hired = new String().concat( yyyy,'-',mm,'-',dd );
                     	setHired(hired);

                     	editor_select();
                     }
                     function entry_edit(entry_key)
                     {
                         PhoneBook.rpc.entry(entry_key,entry_edit_result).call(server);
                     }

                     function entry_save_result() {
                     	reloadData(entry_list_id);
                     	entry_reset();
                     	lister_select();

                     }
                     function entry_save_update_result(type, data, evt)
                     {
                     	alert ( "Edited: " + data.result.user_name + " (" + data.result.entry_key + ")" );
                     	entry_save_result();
                     }
                     function entry_save_insert_result(type, data, evt)
                     {
                     	alert ( "Added: " + data.result.user_name + " (" + data.result.entry_key + ")" );
                     	entry_save_result();
                     }
                     function entry_save()
                     {
                     	var values = entry_form().getValues();
                     	if (values.entry_key)
                             PhoneBook.rpc.entry_save(values,entry_save_update_result).call(server);
                         else
                             PhoneBook.rpc.entry_save(values,entry_save_insert_result).call(server);
                     }

                     function entry_quit() {
                     	entry_reset();
                     	lister_select();
                     }

                     function entry_reset() {
                         var values = entry_form().getValues();
                         values.first_name = "";
                         values.last_name = "";
                         values.extension = "";
                         values.user_name = "";
                         values.hours = "37.5";
                         values.entry_key = "";
                         entry_form().setValues(values);
                         var today = new Date();
                         setHired(today);
                     }

                     function entry_add()
                     {
                         entry_reset();
                         editor_select();
                     }

                     function entry_delete_result(type, data, evt)
                     {
                     	alert ( "Deleted: (" + data.result.entry_key + ")" );
                     	entry_save_result();
                     }
                     function entry_delete(entry_key)
                     {
                     	if (entry_key) {
                             var ok = confirm ( "Delete entry?" );
                             if (ok)
                                 PhoneBook.rpc.entry_delete(entry_key,entry_delete_result).call(server);
                         }
                     }

                 </script>

                 <style type="text/css">
                 body {
 	                font-family : sans-serif;
                 }
                 .dojoTabPaneWrapper {
                     padding : 10px 10px 10px 10px;
                 }

                 </style>

 	            <style type="text/css">
 		        /***
 			        The following is just an example of how to use the table.
 			        You can override any class names to be used if you wish.
 		        ***/
 		        table {
 			        font-family:Lucida Grande, Verdana;
 			        font-size:0.8em;
 			        width:100%;
 			        border:1px solid #ccc;
 			        border-collapse:collapse;
 			        cursor:default;
 		        }
 		        table td,
 		        table th{
 			        padding:2px;
 			        font-weight:normal;
 		        }
 		        table thead td, table thead th {
 			        background-image:url(images/ft-head.gif);
 			        background-repeat:no-repeat;
 			        background-position:top right;
 		        }
 		        table thead td.selectedUp, table thead th.selectedUp {
 			        background-image:url(images/ft-headup.gif);
 		        }
 		        table thead td.selectedDown, table thead th.selectedDown {
 			        background-image:url(images/ft-headdown.gif);
 		        }

 		        table tbody tr td{
 			        border-bottom:1px solid #ddd;
 		        }
 		        table tbody tr.alt td{
 			        background: #e3edfa;
 		        }
 		        table tbody tr.selected td{
 			       background: yellow;
 		        }
 		        table tbody tr:hover td{
 			        background: #a6c2e7;
 		        }
 		        table tbody tr.selected:hover td{
 			        background:#ff9;
 		        }

 		        #inputArea{
 			        margin:1em 0;
 			        padding:1em;
 			        background-color:#eef;
 		        }
 		        #updateTestInput{
 			        border:1px solid #ccc;
 			        width:100%;
 			        height:80px;
 			        font-family:serif;
 			        font-size:0.9em;
 			        overflow:auto;
 		        }
     	</style>
     </head>
     <body>

         <div id="container" dojoType="TabContainer" style="width:100%; height:70%;" selectedChild="lister">

         <div id="lister" dojoType="ContentPane" label="PhoneBook Directory" >
         <table id="filter_menu"><tr><td>
        	    <input type="button" onclick="applyDate('entry_list');" value="Show only hires between 1/1/1984 and 1/1/1987" />
             <input type="button" onclick="applyName('entry_list');" value="Show only names between M and Z" />
             <input type="button" value="Show All Entries" onclick="clearFilters('entry_list');" />
    		    <input type="button" value="Reload Entries" onclick="reloadData('entry_list');" />
         </td></tr></table>

 	    <table id="entry_list"
             dojoType="filteringTable" alternateRows="true" valueField="user_name" >
 	        <thead>
 		    <tr>
 			    <th field="last_name" sort="asc">Last Name</th>
 			    <th field="first_name">First Name</th>
 			    <th field="extension">Extension</th>
 			    <th field="user_name">User</th>
 			    <th field="hired" align="center">Hired</th>
 			    <th field="hours" align="center">Hours</th>
 		    </tr>
 	        </thead>
 	    </table>

         <table id="edit_menu"><tr><td>
             <input type="button" value="Add Entry" onclick="entry_add('entry_list');" />
         </td></tr></table>

        	</div>

         <div id="editor" dojoType="ContentPane" label="Entry Editor">

         <form id="entry_form" dojoType="Form">
             <table><tr>
                     <td>First Name</td><td><input name="first_name" /></td>
                 </tr><tr>
                     <td>Last Name</td><td><input name="last_name" /></td>
                 </tr><tr>
                     <td>Extension</td><td><input name="extension" /></td>
                 </tr><tr>
                     <td>User Name</td><td><input name="user_name" /></td>
                 </tr><tr>
                     <td>Hired</td><td><input name="hired" widgetid="dpHired" dojoType="dropdowndatepicker" displayFormat="MM/dd/yyyy" /></td>
                 </tr><tr>
                     <td>Hours</td><td><input name="hours" /></td>
                 </tr><tr>
                     <td rowspan="2">
                     <input type="button" value="SAVE" onClick="entry_save();" />
                     <input type="button" value="CANCEL" onClick="entry_quit();" />
                     <input type="button" value="DELETE" onclick="entry_list_select_delete('entry_list');" />
                     <input type="hidden" name="editor" value="1" />
                     <input type="hidden" name="entry_key" />
                 </td>
             </tr></table>
         </form>
         </div>
         </div>

     </body>
 </html>
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
	<title>PhoneBook</title>
	<script type="text/javascript" src="PhoneBook.ashx?proxy&v=2"></script>
	<script type="text/javascript" src="js/dojo/dojo.js"></script>
	<script type="text/javascript">
	dojo.require("dojo.widget.TabContainer");
	dojo.require("dojo.widget.ContentPane");
	dojo.require("dojo.widget.LayoutContainer");
	dojo.require("dojo.io.*");
	dojo.require("dojo.event.*");
	dojo.require("dojo.html.*");
	dojo.require("dojo.json");
	dojo.require("dojo.widget.FilteringTable");
	dojo.hostenv.writeIncludes();

	/* call server */

	function server(call)
	{
	var bindArgs = {
	url: call.url+'?rpc',
	error: function(type, data, evt){alert("Error Communicating with Server: " + data.result);},
	method: "POST",
	mimetype: "text/json",
	handle: call.callback,
	postContent: dojo.json.serialize(call.request)
	};
	var req = dojo.io.bind(bindArgs);
	dojo.event
	return req;
	}

	var container_id = "container";

	function view_select(id) {
	var w = dojo.widget.byId(container_id);
	w.selectChild(id);
	}

	/* lister */

	var lister_id = "lister";
	var entry_list_id = "entry_list";

	function lister_select() {
	view_select(lister_id);
	}

	function entry_list() {
	return dojo.widget.byId(entry_list_id);
	}

	function entry_list_result(type, data, evt)
	{
	entry_list().store.setData(data.result);
	}
	function entry_list_load()
	{
	PhoneBook.rpc.entry_list(entry_list_result).call(server);
	}
	dojo.addOnLoad(entry_list_load);

	function entry_list_select_edit(evt) {
	entry_edit(entry_list().getSelectedData().entry_key);
	}
	function entry_list_select_delete(evt) {
	entry_delete(entry_list().getSelectedData().entry_key);
	}

	function entry_list_select() {
	dojo.event.connect(entry_list(), "onSelect", entry_list_select_edit);
	}
	dojo.addOnLoad(entry_list_select);

	/* lister filters */

	function dateFilter(hired) {
	return (hired == '5/29/1987' \|\| hired == '11/18/1984');
	}
	function applyDate(id){
	dojo.widget.byId(id).setFilter("hired", dateFilter);
	}

	function nameFilter(last_name){
	return (last_name.charAt(0) >= 'M' && last_name.charAt(0) <= 'Z');
	}
	function applyName(id){
	dojo.widget.byId(id).setFilter("last_name", nameFilter);
	}

	function clearFilters(id){
	dojo.widget.byId(id).clearFilters();
	}
	function reloadData(id){
	dojo.widget.byId(id).store.clearData();
	entry_list_load();
	}

	/* editor */

	var editor_id = "editor";

	function editor_select() {
	view_select(editor_id);
	}

	var entry_form_id = "entry_form";

	function entry_form() {
	return dojo.widget.byId(entry_form_id);
	}

	var dpHired_id = "dpHired";

	function setHired(hired) {
	var dpHired = dojo.widget.byId(dpHired_id);
	dpHired.setDate(hired);
	}

	function entry_edit_result(type, data, evt)
	{
	entry_form().setValues(data.result);
	var part = new Array();
	part = data.result.hired.split('/',3); // mm/dd/yyyy
	var yyyy = part[2];
	var mm = part[0];
	var dd = part[1];
	if (mm.length==1) mm = new String().concat('0',mm);
	if (dd.length==1) dd = new String().concat('0',dd);
	var hired = new String().concat( yyyy,'-',mm,'-',dd );
	setHired(hired);

	editor_select();
	}
	function entry_edit(entry_key)
	{
	PhoneBook.rpc.entry(entry_key,entry_edit_result).call(server);
	}

	function entry_save_result() {
	reloadData(entry_list_id);
	entry_reset();
	lister_select();

	}
	function entry_save_update_result(type, data, evt)
	{
	alert ( "Edited: " + data.result.user_name + " (" + data.result.entry_key + ")" );
	entry_save_result();
	}
	function entry_save_insert_result(type, data, evt)
	{
	alert ( "Added: " + data.result.user_name + " (" + data.result.entry_key + ")" );
	entry_save_result();
	}
	function entry_save()
	{
	var values = entry_form().getValues();
	if (values.entry_key)
	PhoneBook.rpc.entry_save(values,entry_save_update_result).call(server);
	else
	PhoneBook.rpc.entry_save(values,entry_save_insert_result).call(server);
	}

	function entry_quit() {
	entry_reset();
	lister_select();
	}

	function entry_reset() {
	var values = entry_form().getValues();
	values.first_name = "";
	values.last_name = "";
	values.extension = "";
	values.user_name = "";
	values.hours = "37.5";
	values.entry_key = "";
	entry_form().setValues(values);
	var today = new Date();
	setHired(today);
	}

	function entry_add()
	{
	entry_reset();
	editor_select();
	}

	function entry_delete_result(type, data, evt)
	{
	alert ( "Deleted: (" + data.result.entry_key + ")" );
	entry_save_result();
	}
	function entry_delete(entry_key)
	{
	if (entry_key) {
	var ok = confirm ( "Delete entry?" );
	if (ok)
	PhoneBook.rpc.entry_delete(entry_key,entry_delete_result).call(server);
	}
	}

	</script>

	<style type="text/css">
	body {
	font-family : sans-serif;
	}
	.dojoTabPaneWrapper {
	padding : 10px 10px 10px 10px;
	}

	</style>

	<style type="text/css">
	/***
	The following is just an example of how to use the table.
	You can override any class names to be used if you wish.
	***/
	table {
	font-family:Lucida Grande, Verdana;
	font-size:0.8em;
	width:100%;
	border:1px solid #ccc;
	border-collapse:collapse;
	cursor:default;
	}
	table td,
	table th{
	padding:2px;
	font-weight:normal;
	}
	table thead td, table thead th {
	background-image:url(images/ft-head.gif);
	background-repeat:no-repeat;
	background-position:top right;
	}
	table thead td.selectedUp, table thead th.selectedUp {
	background-image:url(images/ft-headup.gif);
	}
	table thead td.selectedDown, table thead th.selectedDown {
	background-image:url(images/ft-headdown.gif);
	}

	table tbody tr td{
	border-bottom:1px solid #ddd;
	}
	table tbody tr.alt td{
	background: #e3edfa;
	}
	table tbody tr.selected td{
	background: yellow;
	}
	table tbody tr:hover td{
	background: #a6c2e7;
	}
	table tbody tr.selected:hover td{
	background:#ff9;
	}

	#inputArea{
	margin:1em 0;
	padding:1em;
	background-color:#eef;
	}
	#updateTestInput{
	border:1px solid #ccc;
	width:100%;
	height:80px;
	font-family:serif;
	font-size:0.9em;
	overflow:auto;
	}
	</style>
	</head>
	<body>

	<div id="container" dojoType="TabContainer" style="width:100%; height:70%;" selectedChild="lister">

	<div id="lister" dojoType="ContentPane" label="PhoneBook Directory" >
	<table id="filter_menu"><tr><td>
	<input type="button" onclick="applyDate('entry_list');" value="Show only hires between 1/1/1984 and 1/1/1987" />
	<input type="button" onclick="applyName('entry_list');" value="Show only names between M and Z" />
	<input type="button" value="Show All Entries" onclick="clearFilters('entry_list');" />
	<input type="button" value="Reload Entries" onclick="reloadData('entry_list');" />
	</td></tr></table>

	<table id="entry_list"
	dojoType="filteringTable" alternateRows="true" valueField="user_name" >
	<thead>
	<tr>
	<th field="last_name" sort="asc">Last Name</th>
	<th field="first_name">First Name</th>
	<th field="extension">Extension</th>
	<th field="user_name">User</th>
	<th field="hired" align="center">Hired</th>
	<th field="hours" align="center">Hours</th>
	</tr>
	</thead>
	</table>

	<table id="edit_menu"><tr><td>
	<input type="button" value="Add Entry" onclick="entry_add('entry_list');" />
	</td></tr></table>

	</div>

	<div id="editor" dojoType="ContentPane" label="Entry Editor">

	<form id="entry_form" dojoType="Form">
	<table><tr>
	<td>First Name</td><td><input name="first_name" /></td>
	</tr><tr>
	<td>Last Name</td><td><input name="last_name" /></td>
	</tr><tr>
	<td>Extension</td><td><input name="extension" /></td>
	</tr><tr>
	<td>User Name</td><td><input name="user_name" /></td>
	</tr><tr>
	<td>Hired</td><td><input name="hired" widgetid="dpHired" dojoType="dropdowndatepicker" displayFormat="MM/dd/yyyy" /></td>
	</tr><tr>
	<td>Hours</td><td><input name="hours" /></td>
	</tr><tr>
	<td rowspan="2">
	<input type="button" value="SAVE" onClick="entry_save();" />
	<input type="button" value="CANCEL" onClick="entry_quit();" />
	<input type="button" value="DELETE" onclick="entry_list_select_delete('entry_list');" />
	<input type="hidden" name="editor" value="1" />
	<input type="hidden" name="entry_key" />
	</td>
	</tr></table>
	</form>
	</div>
	</div>

	</body>
	</html>