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

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 <html>
         <head>
                 <title>PhoneBook</title>
                 <meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
                 <meta name=ProgId content=VisualStudio.HTML>
                 <meta name=Originator content="Microsoft Visual Studio .NET 7.1">
                 <script language="javascript" src="PhoneBook.ashx?proxy&v=2"></script>
                 <script language="javascript" src="js/dojo/dojo.js"></script>
                 <script language="javascript">
                     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;
                     }

                     /* lister */

                     function entry_list_result(type, data, evt)
                     {
                     	var w = dojo.widget.byId("entry_list");
                         w.store.setData(data.result);
                     }
                     function entry_list()
                     {
                         PhoneBook.rpc.entry_list(entry_list_result).call(server);
                     }
                     dojo.addOnLoad(entry_list);

                     function entry_list_select_edit(evt) {
                         var table = dojo.widget.byId("entry_list");
                         entry_edit(table.getSelectedData().entry_key);
                     }
                     function entry_list_select_delete(evt) {
                         var table = dojo.widget.byId("entry_list");
                         entry_delete(table.getSelectedData().entry_key);
                     }

                     function entry_list_select() {
                         dojo.event.connect(dojo.byId("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();
 			        }

                     /* editor */

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

                     function entry_edit_result(type, data, evt)
                     {
                     	var w = dojo.widget.byId("entry_form");
                     	w.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);
                     }
                     function entry_edit(entry_key)
                     {
                         PhoneBook.rpc.entry(entry_key,entry_edit_result).call(server);
                     }

                     function entry_save_result() {
                     	reloadData('entry_list');
                     	entry_reset();
                     }
                     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 w = dojo.widget.byId("entry_form");
                     	var values = w.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_reset() {
                         var w = dojo.widget.byId("entry_form");
                         var values = w.getValues();
                         values.first_name = "";
                         values.last_name = "";
                         values.extension = "";
                         values.user_name = "";
                         values.hours = "37.5";
                         values.entry_key = "";
                         w.setValues(values);
                         var today = new Date();
                         setHired(today);
                     }

                     function entry_add()
                     {
                         entry_reset();
                     }

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

                 </script>

 	            <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="finder" />

         <div id="lister">

         <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" ID="Button1" NAME="Button1"/>
             <input type="button" onclick="applyName('entry_list');" value="Show only names between M and Z" ID="Button2" NAME="Button2"/>
             <input type="button" value="Show All Entries" onclick="clearFilters('entry_list');" ID="Button3" NAME="Button3"/>
    		    <input type="button" value="Reload Entries" onclick="reloadData('entry_list');" ID="Button4" NAME="Button4"/>
         </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="Edit Entry" onclick="entry_list_select_edit('entry_list');" ID="Button5" NAME="Button5"/>
             <input type="button" value="Add Entry" onclick="entry_add('entry_list');" ID="Button6" NAME="Button6"/>
             <input type="button" value="Delete Entry" onclick="entry_list_select_delete('entry_list');" ID="Button7" NAME="Button7"/>
         </td></tr></table>

        	</div>

        	<div id="viewer" />

         <div id="editor">

         <form id="entry_form" dojoType="Form">
             <table ID="Table1"><tr>
                     <td>First Name</td><td><input name="first_name" ID="Text1"/></td>
                 </tr><tr>
                     <td>Last Name</td><td><input name="last_name" ID="Text2"/></td>
                 </tr><tr>
                     <td>Extension</td><td><input name="extension" ID="Text3"/></td>
                 </tr><tr>
                     <td>User Name</td><td><input name="user_name" ID="Text4"/></td>
                 </tr><tr>
                     <td>Hired</td><td><input name="hired" widgetid="dpHired" dojoType="dropdowndatepicker" displayFormat="MM/dd/yyyy" ID="Text5"/></td>
                 </tr><tr>
                     <td>Hours</td><td><input name="hours" ID="Text6"/></td>
                 </tr><tr>
                     <td rowspan="2"><input type="button" onClick="entry_save();" value="SAVE" ID="Button8" NAME="Button8"/>
                     <input type="hidden" name="editor" value="1" ID="editor"/>
                     <input type="hidden" name="entry_key" ID="entry_key"/>
                 </td>
             </tr></table>
         </form>
         </div>

     </body>
 </html>
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
	<html>
	<head>
	<title>PhoneBook</title>
	<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
	<meta name=ProgId content=VisualStudio.HTML>
	<meta name=Originator content="Microsoft Visual Studio .NET 7.1">
	<script language="javascript" src="PhoneBook.ashx?proxy&v=2"></script>
	<script language="javascript" src="js/dojo/dojo.js"></script>
	<script language="javascript">
	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;
	}

	/* lister */

	function entry_list_result(type, data, evt)
	{
	var w = dojo.widget.byId("entry_list");
	w.store.setData(data.result);
	}
	function entry_list()
	{
	PhoneBook.rpc.entry_list(entry_list_result).call(server);
	}
	dojo.addOnLoad(entry_list);

	function entry_list_select_edit(evt) {
	var table = dojo.widget.byId("entry_list");
	entry_edit(table.getSelectedData().entry_key);
	}
	function entry_list_select_delete(evt) {
	var table = dojo.widget.byId("entry_list");
	entry_delete(table.getSelectedData().entry_key);
	}

	function entry_list_select() {
	dojo.event.connect(dojo.byId("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();
	}

	/* editor */

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

	function entry_edit_result(type, data, evt)
	{
	var w = dojo.widget.byId("entry_form");
	w.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);
	}
	function entry_edit(entry_key)
	{
	PhoneBook.rpc.entry(entry_key,entry_edit_result).call(server);
	}

	function entry_save_result() {
	reloadData('entry_list');
	entry_reset();
	}
	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 w = dojo.widget.byId("entry_form");
	var values = w.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_reset() {
	var w = dojo.widget.byId("entry_form");
	var values = w.getValues();
	values.first_name = "";
	values.last_name = "";
	values.extension = "";
	values.user_name = "";
	values.hours = "37.5";
	values.entry_key = "";
	w.setValues(values);
	var today = new Date();
	setHired(today);
	}

	function entry_add()
	{
	entry_reset();
	}

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

	</script>

	<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="finder" />

	<div id="lister">

	<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" ID="Button1" NAME="Button1"/>
	<input type="button" onclick="applyName('entry_list');" value="Show only names between M and Z" ID="Button2" NAME="Button2"/>
	<input type="button" value="Show All Entries" onclick="clearFilters('entry_list');" ID="Button3" NAME="Button3"/>
	<input type="button" value="Reload Entries" onclick="reloadData('entry_list');" ID="Button4" NAME="Button4"/>
	</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="Edit Entry" onclick="entry_list_select_edit('entry_list');" ID="Button5" NAME="Button5"/>
	<input type="button" value="Add Entry" onclick="entry_add('entry_list');" ID="Button6" NAME="Button6"/>
	<input type="button" value="Delete Entry" onclick="entry_list_select_delete('entry_list');" ID="Button7" NAME="Button7"/>
	</td></tr></table>

	</div>

	<div id="viewer" />

	<div id="editor">

	<form id="entry_form" dojoType="Form">
	<table ID="Table1"><tr>
	<td>First Name</td><td><input name="first_name" ID="Text1"/></td>
	</tr><tr>
	<td>Last Name</td><td><input name="last_name" ID="Text2"/></td>
	</tr><tr>
	<td>Extension</td><td><input name="extension" ID="Text3"/></td>
	</tr><tr>
	<td>User Name</td><td><input name="user_name" ID="Text4"/></td>
	</tr><tr>
	<td>Hired</td><td><input name="hired" widgetid="dpHired" dojoType="dropdowndatepicker" displayFormat="MM/dd/yyyy" ID="Text5"/></td>
	</tr><tr>
	<td>Hours</td><td><input name="hours" ID="Text6"/></td>
	</tr><tr>
	<td rowspan="2"><input type="button" onClick="entry_save();" value="SAVE" ID="Button8" NAME="Button8"/>
	<input type="hidden" name="editor" value="1" ID="editor"/>
	<input type="hidden" name="entry_key" ID="entry_key"/>
	</td>
	</tr></table>
	</form>
	</div>

	</body>
	</html>