[Bedework-commit] carddav r124 - in
trunk/clients/javascript/bwAddrbookClient: . resources
resources/icons/silk
svnadmin at bedework.org
svnadmin at bedework.org
Wed Sep 29 19:28:12 EDT 2010
Author: johnsa
Date: 2010-09-29 19:28:11 -0400 (Wed, 29 Sep 2010)
New Revision: 124
Added:
trunk/clients/javascript/bwAddrbookClient/resources/icons/silk/add.png
trunk/clients/javascript/bwAddrbookClient/resources/icons/silk/building.png
trunk/clients/javascript/bwAddrbookClient/resources/icons/silk/email_add.png
trunk/clients/javascript/bwAddrbookClient/resources/icons/silk/email_delete.png
trunk/clients/javascript/bwAddrbookClient/resources/icons/silk/phone_add.png
trunk/clients/javascript/bwAddrbookClient/resources/icons/silk/phone_delete.png
Modified:
trunk/clients/javascript/bwAddrbookClient/index.html
trunk/clients/javascript/bwAddrbookClient/resources/addressbook.css
trunk/clients/javascript/bwAddrbookClient/resources/addressbook.js
Log:
javascript client: begin creating the add contact form
Modified: trunk/clients/javascript/bwAddrbookClient/index.html
===================================================================
--- trunk/clients/javascript/bwAddrbookClient/index.html 2010-09-29 21:14:23 UTC (rev 123)
+++ trunk/clients/javascript/bwAddrbookClient/index.html 2010-09-29 23:28:11 UTC (rev 124)
@@ -46,8 +46,15 @@
<ul id="add">
<li>
<ul>
- <li class="contact">contact</li>
- <li class="group">group</li>
+ <li class="contact">
+ <a href="#addContact" id="addContact">contact</a>
+ </li>
+ <li class="group">
+ <a href="#addGroup" id="addGroup">group</a>
+ </li>
+ <li class="location">
+ <a href="#addLocation" id="addLocation">location</a>
+ </li>
</ul>
add...
</li>
@@ -78,69 +85,158 @@
</li>
</ul>
- <button style="margin: 20em 0 0 2em;" onclick="changeClass('bw-test','visible');"/>show test pane</button>
+ <button style="margin: 20em 0 0 2em;" onclick="showPage('bw-test');"/>show test pane</button>
</div>
<div id="content" class="ui-layout-center">
- <div id="bw-list">
- <ul id="filterLetters">
- <li><a href="">A</a></li>
- <li><a href="">B</a></li>
- <li><a href="">C</a></li>
- <li><a href="">D</a></li>
- <li><a href="">E</a></li>
- <li><a href="">F</a></li>
- <li><a href="">G</a></li>
- <li><a href="">H</a></li>
- <li><a href="">I</a></li>
- <li><a href="">J</a></li>
- <li><a href="">K</a></li>
- <li><a href="">L</a></li>
- <li><a href="">M</a></li>
- <li><a href="">N</a></li>
- <li><a href="">O</a></li>
- <li><a href="">P</a></li>
- <li><a href="">Q</a></li>
- <li><a href="">R</a></li>
- <li><a href="">S</a></li>
- <li><a href="">T</a></li>
- <li><a href="">U</a></li>
- <li><a href="">V</a></li>
- <li><a href="">W</a></li>
- <li><a href="">X</a></li>
- <li><a href="">Y</a></li>
- <li><a href="">Z</a></li>
- </ul>
- <p>
- List would be here
- </p>
- </div>
-
- <!-- TEST PANE -->
- <div id="bw-test" class="invisible">
- <p>
- <button id="auth" type="button">Authenticate/Test</button>
- <button id="report" type="button">Report</button>
- </p>
- <hr/>
- <h3>Add Contact</h3>
- <div id="addForm">
- First Name: <input type="text" size="60" value="" id="FIRSTNAME"/><br/>
- Last Name: <input type="text" size="60" value="" id="LASTNAME"/><br/>
- Email: <input type="text" size="60" value="" id="EMAIL"/><br/>
- Home Phone: <input type="text" size="60" value="" id="HOMEPHONE"/><br/>
- Home Address Street: <input type="text" size="60" value="" id="ADRHOMESTREET"/><br/>
- Home Address City: <input type="text" size="60" value="" id="ADRHOMECITY"/><br/>
- Home Address State: <input type="text" size="60" value="" id="ADRHOMESTATE"/><br/>
- Home Address Postal Code: <input type="text" size="60" value="" id="ADRHOMEPOSTAL"/><br/>
- <button id="addContact" type="button">Add Contact</button>
- </div>
- <hr/>
- <h3>Delete Contact (by UID)</h3>
- <div id="deleteForm">
- UID: <input type="text" size="60" value="" id="DUID"/><br/>
- <button id="delete" type="button">Delete Contact</button>
- </div>
- </div>
+ <!-- Each page of the application is modeled below as a list item.
+ We make each visible or invisible as needed using javascript. -->
+ <ul id="bw-pages">
+ <li id="bw-list" class="invisible">
+ <ul id="filterLetters">
+ <li><a href="">A</a></li>
+ <li><a href="">B</a></li>
+ <li><a href="">C</a></li>
+ <li><a href="">D</a></li>
+ <li><a href="">E</a></li>
+ <li><a href="">F</a></li>
+ <li><a href="">G</a></li>
+ <li><a href="">H</a></li>
+ <li><a href="">I</a></li>
+ <li><a href="">J</a></li>
+ <li><a href="">K</a></li>
+ <li><a href="">L</a></li>
+ <li><a href="">M</a></li>
+ <li><a href="">N</a></li>
+ <li><a href="">O</a></li>
+ <li><a href="">P</a></li>
+ <li><a href="">Q</a></li>
+ <li><a href="">R</a></li>
+ <li><a href="">S</a></li>
+ <li><a href="">T</a></li>
+ <li><a href="">U</a></li>
+ <li><a href="">V</a></li>
+ <li><a href="">W</a></li>
+ <li><a href="">X</a></li>
+ <li><a href="">Y</a></li>
+ <li><a href="">Z</a></li>
+ </ul>
+ <p>
+ List would be here
+ </p>
+ </li>
+ <li id="bw-modContact" class="content-block">
+ <h3>Add Contact</h3>
+ <div id="addForm">
+ <fieldset>
+ <legend>Name</legend>
+ <div class="bwFormData">
+
+ <div class="bwField">First Name:</div>
+ <div class="bwValue"><input type="text" size="60" value="" id="FIRSTNAME"/></div>
+
+ <div class="bwField">Last Name:</div>
+ <div class="bwValue"><input type="text" size="60" value="" id="LASTNAME"/></div>
+
+ <div class="bwField">Nickname:</div>
+ <div class="bwValue"><input type="text" size="60" value="" id="NICKNAME"/></div>
+
+ </div>
+ </fieldset>
+ <fieldset>
+ <legend>Contact information</legend>
+ <div class="bwFormData">
+
+ <div class="bwField">Email:</div>
+ <div class="bwValue">
+ <select id="EMAILTYPE-01">
+ <option value="work">work</option>
+ <option value="home">home</option>
+ </select>
+ <input type="text" size="40" value="" id="EMAIL"/>
+ </div>
+ <div class="bwAppend" id="bwAppendEmail"></div>
+
+ <div class="bwField">Phone:</div>
+ <div class="bwValue">
+ <select id="PHONETYPE-01">
+ <option value="work">work</option>
+ <option value="home">home</option>
+ </select>
+ <select id="TELTYPE-01">
+ <option value="voice">voice</option>
+ <option value="cell">mobile</option>
+ <option value="fax">fax</option>
+ <option value="text">text</option>
+ <option value="pager">pager</option>
+ </select>
+ <input type="text" size="30" value="" id="PHONE-01"/>
+ </div>
+ <div class="bwAppend" id="bwAppendPhone"></div>
+
+ </div>
+ </fieldset>
+ <fieldset>
+ <legend>Address</legend>
+ <div class="bwFormData">
+ <div class="bwAddrBlock">
+ <div class="bwField">Type:</div>
+ <div class="bwValue">
+ <select id="ADDRTYPE-01">
+ <option value="work">work</option>
+ <option value="home">home</option>
+ </select>
+ </div>
+
+ <div class="bwField">Street:</div>
+ <div class="bwValue"><input type="text" size="60" value="" id="STREET-A-01"/></div>
+ <div class="bwField"></div>
+ <div class="bwValue"><input type="text" size="60" value="" id="STREET-B-01"/></div>
+
+ <div class="bwField">City:</div>
+ <div class="bwValue"><input type="text" size="60" value="" id="CITY-01"/></div>
+
+ <div class="bwField">State/Province:</div>
+ <div class="bwValue">
+ <input type="text" size="20" value="" id="CITY-01"/>
+ <span class="bwInternalField">Postal Code:</span>
+ <input type="text" size="20" value="" id="POSTAL-01"/>
+ </div>
+
+ <div class="bwField">Country:</div>
+ <div class="bwValue"><input type="text" size="60" value="" id="COUNTRY-01"/></div>
+ <br class="clear"/>
+ </div>
+ <div class="bwAppend bwRightAppend" id="bwAppendAddr"></div>
+ </div>
+ </fieldset>
+ <fieldset>
+ <legend>Details</legend>
+ <div class="bwFormData">
+
+ <div class="bwField">Webpage:</div>
+ <div class="bwValue"><input type="text" size="60" value="" id="WEBPAGE"/></div>
+
+ </div>
+ </fieldset>
+ <button id="submitContact" type="button">Add Contact</button>
+ </div>
+ </li>
+ <li id="bw-modGroup" class="invisible content-block">
+ <h3>Add Group</h3>
+ </li>
+ <li id="bw-test" class="invisible content-block">
+ <p>
+ <button id="auth" type="button">Authenticate/Test</button>
+ <button id="report" type="button">Report</button>
+ </p>
+ <hr/>
+ <h3>Delete Contact (by UID)</h3>
+ <div id="deleteForm">
+ UID: <input type="text" size="60" value="" id="DUID"/><br/>
+ <button id="delete" type="button">Delete Contact</button>
+ </div>
+ </li>
+ </ul>
</div>
</body>
</html>
\ No newline at end of file
Modified: trunk/clients/javascript/bwAddrbookClient/resources/addressbook.css
===================================================================
--- trunk/clients/javascript/bwAddrbookClient/resources/addressbook.css 2010-09-29 21:14:23 UTC (rev 123)
+++ trunk/clients/javascript/bwAddrbookClient/resources/addressbook.css 2010-09-29 23:28:11 UTC (rev 124)
@@ -63,6 +63,9 @@
li.contact {
list-style-image: url("icons/silk/user.png");
}
+li.location {
+ list-style-image: url("icons/silk/building.png");
+}
ul#add li {
background-color: #eef;
padding: 0.15em 1em 0.3em 5px;
@@ -170,6 +173,72 @@
background-color: transparent;
text-decoration: none;
}
+fieldset {
+ display: block;
+ position: relative;
+ width: 560px;
+ white-space: nowrap;
+ border: 2px solid #eef;
+ padding: 0;
+ margin: 0 0 1.5em 0;
+ font-size: 0.9em;
+}
+legend {
+ position: absolute !important;
+ top: -8px;
+ left: 1em;
+ font-style: italic;
+ color: #99e;
+ background-color: white;
+}
+.bwFormData {
+ margin: 1em;
+}
+.bwField {
+ width: 100px;
+ float: left;
+ clear: left;
+ margin: 0 0 0.5em 0.5em;
+}
+.bwValue {
+ float: left;
+ margin: 0 0 0.5em 0.5em;
+}
+.bwValue input,
+.bwValue select {
+ background-color: #eef;
+ color: #333;
+ border: 1px solid #aaf;
+}
+.bwAppend {
+ float: left;
+ width: 16px;
+ height: 16px;
+ text-align: center;
+ vertical-align: middle;
+ margin: 0 0 0.5em 0.5em;
+ background: white url("icons/silk/add.png");
+ color: #333;
+}
+.bwRightAppend {
+ float: right;
+ position: relative;
+ top: -8px;
+}
+.bwAddrBlock {
+ margin: 0;
+ padding: 0.5em;
+ border: 2px solid #eef;
+}
+.bwInternalField {
+ padding-left: 0.4em;
+}
.invisible {
display: none;
+}
+.content-block {
+ margin: 1em;
+}
+.clear {
+ clear: both;
}
\ No newline at end of file
Modified: trunk/clients/javascript/bwAddrbookClient/resources/addressbook.js
===================================================================
--- trunk/clients/javascript/bwAddrbookClient/resources/addressbook.js 2010-09-29 21:14:23 UTC (rev 123)
+++ trunk/clients/javascript/bwAddrbookClient/resources/addressbook.js 2010-09-29 23:28:11 UTC (rev 124)
@@ -28,7 +28,9 @@
* SETUP THE DEFAULT STATE:
****************************/
- // Get the user from the query string
+ // Get the user from the query string.
+ // The user id will be used for queries against the address book
+ // and for display.
var qsParameters = {};
(function () {
var e,
@@ -41,8 +43,10 @@
}
})();
userid = qsParameters.user;
+ // display the userid at the root of the personal address book tree
$("#mainUserBook").html(userid);
+
// Create the three-panel layout
myLayout = $('body').layout({
// enable showOverflow on north-pane so popups will overlap west pane
@@ -65,30 +69,6 @@
* EVENT HANDLERS:
****************************/
- $("#setuser").click(function() {
- var newid = $("#userid").val();
- if (newid != "") {
- userid = newid;
- alert("User set to " + userid);
- }
- });
-
- $("#auth").click(function() {
- var addrBookUrl = carddavUrl + userpath + userid + bookName;
- $.ajax({
- type: "get",
- url: addrBookUrl,
- dataType: "html",
- success: function(responseData, status){
- alert(status + "\n" + responseData);
- },
- error: function(msg) {
- // there was a problem
- alert(msg.statusText);
- }
- });
- });
-
// send a REPORT query for all data
$("#report").click(function() {
var addrBookUrl = carddavUrl + userpath + userid + bookName;
@@ -113,8 +93,19 @@
}
});
});
+
+ // show form for adding/editing a new contact
+ $("#addContact").click(function() {
+ showPage("bw-modContact");
+ });
+
+ // show form for adding/editing a group
+ $("#addGroup").click(function() {
+ showPage("bw-modGroup");
+ });
- $("#addContact").click(function() {
+ // submit a vcard to the server
+ $("#submitContact").click(function() {
var addrBookUrl = carddavUrl + userpath + userid + bookName;
var newUUID = "BwABC-" + Math.uuid();
@@ -150,7 +141,7 @@
});
});
-
+ // remove a vcard from the address book
$("#delete").click(function() {
var addrBookUrl = carddavUrl + userpath + userid + bookName;
$.ajax({
@@ -170,11 +161,48 @@
});
});
+ /* Testing Features */
+ // setting the user is for testing
+ $("#setuser").click(function() {
+ var newid = $("#userid").val();
+ if (newid != "") {
+ userid = newid;
+ alert("User set to " + userid);
+ }
+ });
+
+ // Click to auth is for testing only
+ // In production, the user will likely be already authed.
+ // If not, the server will prompt for auth when the report query is sent on first load of the page.
+ $("#auth").click(function() {
+ var addrBookUrl = carddavUrl + userpath + userid + bookName;
+ $.ajax({
+ type: "get",
+ url: addrBookUrl,
+ dataType: "html",
+ success: function(responseData, status){
+ alert(status + "\n" + responseData);
+ },
+ error: function(msg) {
+ // there was a problem
+ alert(msg.statusText);
+ }
+ });
+ });
+
});
/****************************
* GENERIC FUNCTIONS:
****************************/
+// display the named page
+function showPage(pageId) {
+ // first make all pages invisible
+ $("#bw-pages li").each(function(index){
+ $(this).addClass("invisible");
+ });
+ $("#"+pageId).removeClass("invisible");
+};
function changeClass(id, newClass) {
var identity = document.getElementById(id);
@@ -182,4 +210,4 @@
alert("No element with id: " + id + " to set to class: " + newClass);
}
identity.className=newClass;
-}
\ No newline at end of file
+};
\ No newline at end of file
Added: trunk/clients/javascript/bwAddrbookClient/resources/icons/silk/add.png
===================================================================
(Binary files differ)
Property changes on: trunk/clients/javascript/bwAddrbookClient/resources/icons/silk/add.png
___________________________________________________________________
Name: svn:mime-type
+ application/octet-stream
Added: trunk/clients/javascript/bwAddrbookClient/resources/icons/silk/building.png
===================================================================
(Binary files differ)
Property changes on: trunk/clients/javascript/bwAddrbookClient/resources/icons/silk/building.png
___________________________________________________________________
Name: svn:mime-type
+ application/octet-stream
Added: trunk/clients/javascript/bwAddrbookClient/resources/icons/silk/email_add.png
===================================================================
(Binary files differ)
Property changes on: trunk/clients/javascript/bwAddrbookClient/resources/icons/silk/email_add.png
___________________________________________________________________
Name: svn:mime-type
+ application/octet-stream
Added: trunk/clients/javascript/bwAddrbookClient/resources/icons/silk/email_delete.png
===================================================================
(Binary files differ)
Property changes on: trunk/clients/javascript/bwAddrbookClient/resources/icons/silk/email_delete.png
___________________________________________________________________
Name: svn:mime-type
+ application/octet-stream
Added: trunk/clients/javascript/bwAddrbookClient/resources/icons/silk/phone_add.png
===================================================================
(Binary files differ)
Property changes on: trunk/clients/javascript/bwAddrbookClient/resources/icons/silk/phone_add.png
___________________________________________________________________
Name: svn:mime-type
+ application/octet-stream
Added: trunk/clients/javascript/bwAddrbookClient/resources/icons/silk/phone_delete.png
===================================================================
(Binary files differ)
Property changes on: trunk/clients/javascript/bwAddrbookClient/resources/icons/silk/phone_delete.png
___________________________________________________________________
Name: svn:mime-type
+ application/octet-stream
More information about the Bedework-commit
mailing list