a start to myopac

diff --git a/Open-ILS/web/opac/skin/kcls-wire/css/style.css b/Open-ILS/web/opac/skin/kcls-wire/css/style.css
index 7dbc65f..9c300f3 100644 (file)
--- a/Open-ILS/web/opac/skin/kcls-wire/css/style.css
+++ b/Open-ILS/web/opac/skin/kcls-wire/css/style.css
@@ -271,34 +271,45 @@ div.select-wrapper:hover {
        margin-right:7px;
 }
 
-#acct_summary {
-       width:156px;
-       background:url('/opac/skin/kcls/graphics/acct_summary_on.gif') no-repeat bottom;
+.acct-tab {
+    background-repeat: no-repeat;
+    background-position: bottom;
+    width:156px;
 }
 
-#acct_checked_out {
-       width:156px;
-       background:url('/opac/skin/kcls/graphics/acct_checked_out_off.gif') no-repeat bottom;
+.acct-main-off {
+       background-image:url('/opac/skin/kcls/graphics/acct_summary_off.gif');
+}
+.acct-main-on {
+       background-image:url('/opac/skin/kcls/graphics/acct_summary_on.gif');
 }
 
-#acct_holds {
-       width:156px;
-       background:url('/opac/skin/kcls/graphics/acct_holds_off.gif') no-repeat bottom;
+.acct-circs-off {
+       background-image:url('/opac/skin/kcls/graphics/acct_checked_out_off.gif');
+}
+.acct-circs-on {
+       background-image:url('/opac/skin/kcls/graphics/acct_checked_out_on.gif');
 }
 
-#acct_prefs {
-       width:156px;
-       background:url('/opac/skin/kcls/graphics/acct_prefs_off.gif') no-repeat bottom;
+.acct-holds-off {
+       background-image:url('/opac/skin/kcls/graphics/acct_holds_off.gif');
+}
+.acct-holds-on {
+       background-image:url('/opac/skin/kcls/graphics/acct_holds_on.gif');
 }
 
-#acct_favs {
-       width:156px;
-       background:url('/opac/skin/kcls/graphics/acct_favs_off.gif') no-repeat bottom;
+.acct-prefs-off {
+       background-image:url('/opac/skin/kcls/graphics/acct_prefs_off.gif');
+}
+.acct-prefs-on {
+       background-image:url('/opac/skin/kcls/graphics/acct_prefs_on.gif');
 }
 
-#acct_lists {
-       width:156px;
-       background:url('/opac/skin/kcls/graphics/acct_lists_off.gif') no-repeat bottom;
+.acct-lists-off {
+       background-image:url('/opac/skin/kcls/graphics/acct_lists_off.gif');
+}
+.acct-lists-on {
+       background-image:url('/opac/skin/kcls/graphics/acct_lists_on.gif');
 }
 
 #rdetail_header {

diff --git a/Open-ILS/web/templates/default/kcls-wire/myopac/main.tt2 b/Open-ILS/web/templates/default/kcls-wire/myopac/main.tt2
new file mode 100644 (file)
index 0000000..c1adcb8
--- /dev/null
+++ b/Open-ILS/web/templates/default/kcls-wire/myopac/main.tt2
@@ -0,0 +1,432 @@
+[%  WRAPPER "default/kcls-wire/parts/base.tt2" +
+        "default/kcls-wire/parts/myopac/base.tt2";
+    myopac_page = "main"  %]
+<div id='myopac_summary_div' style="padding:0px;">
+    <div id="acct_sum">
+        <div style="width:742px;float:left;">
+            <div class="header_middle">Account Summary</div>
+        </div>
+        <div id="myopac_sum_fines">
+            <div style="position:absolute;">
+                <div style="position:relative;top:-15px;left:-23px;">
+                    <img src="/opac/skin/kcls/graphics/acct_sum_fines_tl.png" />
+                </div>
+            </div>
+            <div style="position:absolute;">
+                <div style="position:relative;top:-15px;left:172px;">
+                    <img src="/opac/skin/kcls/graphics/acct_sum_fines_tr.png" />
+                </div>
+            </div>
+            <div style="position:absolute;">
+                <div style="position:relative;top:161px;left:-23px;">
+                    <img src="/opac/skin/kcls/graphics/acct_sum_fines_bl.png" />
+                </div>
+            </div>
+            <div style="position:absolute;">
+                <div style="position:relative;top:161px;left:172px;">
+                    <img src="/opac/skin/kcls/graphics/acct_sum_fines_br.png" />
+                </div>
+            </div>
+            Fines: <span id="myopac_sum_fines_bal">$0.00</span><br />
+            <a class="hide_me" href="javascript:;" id="pay_fines_btn1"
+                onclick="showPaymentForm();"><img alt="Pay Fines"
+                onmouseover="this.src='/opac/skin/kcls/graphics/pay-fines-btn-hover.png';"
+                onmouseout="this.src='/opac/skin/kcls/graphics/pay-fines-btn.png';"
+                src="/opac/skin/kcls/graphics/pay-fines-btn.png"
+                style="position:relative;top:5px;" /></a>
+        </div>
+        <div style="width:662px;">
+            <div style="float:left;">
+                <div style="padding:10px 0px;" id="myopac_sum_name"></div>
+                <div class="acct_sum_row">
+                    <table width="100%" cellspacing="0" cellpadding="0">
+                        <tr>
+                            <td>
+                                Items Currently Checked out
+                                <span id="myopac_sum_checked" class="view_link">
+                                    (0)
+                                </span>
+                            </td>
+                            <td align="right" class="view_link">
+                                <a href="javascript:;"
+                                    onclick="swapTabs($('acct_checked_out'));myOPACChangePage('checked');"
+                                    rel="myopac_checked_div">View All</a>
+                            </td>
+                        </tr>
+                    </table>
+                </div>
+                <div class="acct_sum_row">
+                    <table width="100%" cellspacing="0" cellpadding="0">
+                        <tr>
+                            <td>
+                                Items Currently on Hold
+                                <span id="myopac_sum_holds" class="view_link">
+                                    (0)
+                                </span>
+                            </td>
+                            <td align="right" class="view_link">
+                                <a href="javascript:;"
+                                    onclick="swapTabs($('acct_holds'));myOPACChangePage('holds');"
+                                    rel="myopac_holds_div">View All</a>
+                            </td>
+                        </tr>
+                    </table>
+                </div>
+                <div class="acct_sum_row">
+                    <table width="100%" cellspacing="0" cellpadding="0">
+                        <tr>
+                            <td>
+                                Items ready for pickup
+                                <span id="myopac_sum_pickup" class="view_link">
+                                    (0)
+                                </span>
+                            </td>
+                            <td align="right" class="view_link">
+                                <a href="javascript:;"
+                                    onclick="swapTabs($('acct_holds'));myOPACChangePage('holds');"
+                                    rel="myopac_holds_div">View All</a>
+                            </td>
+                        </tr>
+                    </table>
+                </div>
+                <div class="acct_sum_row" id="myopac_sum_fines_slim">
+                    <table width="100%" cellspacing="0" cellpadding="0">
+                        <tr>
+                            <td>Fees &amp; Fines</td>
+                            <td align="right" class="view_link">
+                                <a class="hide_me"
+                                    id="show_fines_link"
+                                    href="javascript:;"
+                                    onclick="showFinesDiv(this);">Show Overdue Materials</a>
+                            </td>
+                        </tr>
+                    </table>
+                </div>
+            </div>
+        </div>
+        <div style="clear:both;"></div>
+        <div id='myopac_fines_div'>
+            <table width='100%' class='data_grid data_grid_center'>
+                <thead class='color_3'>
+                    <tr>
+                        <td colspan='3' style='padding: 6px'>
+                            <b>&myopac.fines.title;</b>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td width='33%'>&myopac.fines.owed;</td>
+                        <td width='33%'>&myopac.fines.paid;</td>
+                        <td width='33%'>&myopac.fines.balance;</td>
+                    </tr>
+                </thead>
+                <tbody id='myopac_fines_summary_tbody'>
+                    <tr id='myopac_fines_summary_loading'>
+                        <td>&myopac.fines.status;</td>
+                    </tr>
+                    <tr id='myopac_fines_summary_row' class='hide_me'>
+                        <td id='myopac_fines_summary_total' >&common.currency;</td>
+                        <td id='myopac_fines_summary_paid' >&common.currency;</td>
+                        <td id='myopac_fines_summary_balance' style='color:red;font-weight: bold;'>&common.currency;</td>
+                    </tr>
+                </tbody>
+            </table>
+        <!--
+        <div id='accrue_explanation' class='hide_me'>
+            <span>Transactions whose balances are marked with a</span>
+            <span style='color:red; font-weight: bold'>*</span>
+            <span>will continue to accrue fines until the checked out item is returned.</span>
+        </div>
+        -->
+        <!-- Table for circulation transactions only -->
+            <div id='myopac_circ_trans_div' class='hide_me'>
+                <br/><hr/><br/>
+                <table width='100%' class='data_grid data_grid_center'
+                    id='myopac_circ_trans_table'>
+                    <thead>
+                    <!--<tr><td colspan='10' style='padding: 6px'><b>&myopac.fines.overdue;</b></td></tr>-->
+                        <tr>
+                            <td colspan='10' style='padding: 6px'>
+                                <b>Fines</b>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>&common.title;</td>
+                            <td>&common.author;</td>
+                            <td>&myopac.fines.checkout;</td>
+                            <td>&myopac.fines.due;</td>
+                            <td>&myopac.fines.returned;</td>
+                            <td>&myopac.fines.balance;</td>
+                            <td align="center" nowrap="nowrap"
+                                style="white-space:nowrap;">
+                                <label for="pay_fines_box1">Pay Fines</label>
+                                <br />
+                                <input id="pay_fines_box1" checked="checked"
+                                    type="checkbox"
+                                    onclick="checkAll($('myopac_circ_trans_tbody'), this, 'selector');"
+                                    title="Click to (un)select all fines" />
+                            </td>
+                        </tr>
+                    </thead>
+                    <tbody id='myopac_circ_trans_tbody'>
+                        <tr id='myopac_circ_trans_row'>
+                            <td>
+                                <a class='classic_link' name='myopac_circ_trans_title'> </a>
+                            </td>
+                            <td name='myopac_circ_trans_author'> </td>
+                            <td name='myopac_circ_trans_start'> </td>
+                            <td name='myopac_circ_trans_due'> </td>
+                            <td name='myopac_circ_trans_finished'>
+                                <span style='color:red;'>&myopac.fines.accruing;</span>
+                            </td>
+                            <td>
+                                <span style='color: red; font-weight: bold;'
+                                    name='myopac_circ_trans_balance'>&common.currency;</span>
+                            </td>
+                            <td align="center">
+                                <input type="checkbox" checked="checked"
+                                    name="selector" title="pay this fine" />
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+
+            <!-- Table for all non-circulation transactions -->
+            <div id='myopac_trans_div' class='hide_me'>
+                <br/>
+                <hr style="border-bottom:none;*height:0px;" color="#dcdbdb" />
+                <br/>
+                <table width='100%' class='data_grid data_grid_center'
+                    id='myopac_trans_table'>
+                    <thead>
+                        <tr>
+                            <td colspan='8' style='padding: 6px'>
+                                <b>&myopac.fines.other;</b>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td width='16%'>&myopac.fines.time.start;</td>
+                            <td width='16%'>&myopac.fines.time.paid;</td>
+                            <td width='16%'>&myopac.fines.owed.initial;</td>
+                            <td width='16%'>&myopac.fines.paid.amount;</td>
+                            <td width='16%'>&myopac.fines.balance;</td>
+                            <td width='16%'>&myopac.fines.type;</td>
+                            <td width='4%' align="center" nowrap="nowrap"
+                                style="white-space:nowrap;">
+                                <label for="pay_fines_box2">Pay Fines</label>
+                                <br />
+                                <input id="pay_fines_box2" checked="checked"
+                                    type="checkbox"
+                                    onclick="checkAll($('myopac_trans_tbody'), this, 'selector');"
+                                    title="Click to (un)select all fines" />
+                            </td>
+                        </tr>
+                    </thead>
+                    <tbody id='myopac_trans_tbody'>
+                        <tr id='myopac_trans_row'>
+                            <td name='myopac_trans_start'> </td>
+                            <td name='myopac_trans_last_payment'> </td>
+                            <td name='myopac_trans_init_amount'>
+                                &common.currency;
+                            </td>
+                            <td name='myopac_trans_total_paid'>
+                                &common.currency;
+                            </td>
+                            <td style='color:red; font-weight: bold;'>
+                                <span name='myopac_trans_balance_recur'
+                                    class='hide_me'> * </span>
+                                <span name='myopac_trans_balance'>
+                                    &common.currency;
+                                </span>
+                            </td>
+                            <td name='myopac_trans_bill_type'></td>
+                            <td align="center">
+                                <input type="checkbox" name='selector'
+                                    title='pay this fine' checked="checked" />
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+            <a href="javascript:;"
+                onclick="showPaymentForm();"><img alt="Pay Fines"
+                onmouseover="this.src='/opac/skin/kcls/graphics/pay-fines-btn-hover.png';"
+                src="/opac/skin/kcls/graphics/pay-fines-btn.png"
+                style="position:relative;top:5px;" /></a>
+            <br/>
+        </div>
+    </div>
+    <div id="pay_fines_now" class="hide_me">
+        <table id='oils-selfck-cc-payment-table'>
+            <tbody>
+                <tr>
+                    <td><div style="width:129px;"></div></td>
+                    <td><div style="width:195px;"></div></td>
+                    <td><div style="width:324px;"></div></td>
+                </tr>
+                <tr>
+                    <td colspan='2'><strong>Billing Information</strong></td>
+                    <td rowspan='13' valign='top'>
+                        Selected fines you are paying for:
+                        <table cellpadding="0" cellspacing="5" border="0">
+                            <thead>
+                                <tr>
+                                    <td>
+                                        <strong>Name</strong>
+                                    </td>
+                                    <td>
+                                        <strong>Amount</strong>
+                                    </td>
+                                </tr>
+                            </thead>
+                            <tbody id="selectedFines">
+                            </tbody>
+                        </table>
+                        <br />
+                        <div id='oils-selfck-cc-payment-summary'>
+                            Total amount to pay:
+                            <strong>$<span></span></strong>
+                        </div>
+                        <br />
+                        Click <strong>Cancel</strong> to go back and (un)select
+                        other fines.
+                    </td>
+                </tr>
+                <tr>
+                    <td>First Name</td>
+                    <td><input jsId='oilsSelfckCCFName' /></td>
+                </tr>
+                <tr>
+                    <td>Last Name</td>
+                    <td><input jsId='oilsSelfckCCLName' /></td>
+                </tr>
+                <tr>
+                    <td>Street Address</td>
+                    <td><input jsId='oilsSelfckCCStreet' /></td>
+                </tr>
+                <tr>
+                    <td>City</td>
+                    <td><input jsId='oilsSelfckCCCity' /></td>
+                </tr>
+                <tr>
+                    <td>State or Province</td>
+                    <td><input jsId='oilsSelfckCCState' /></td>
+                </tr>
+                <tr>
+                    <td>ZIP or Postal Code</td>
+                    <td><input jsId='oilsSelfckCCZip' /></td>
+                </tr>
+                <tr>
+                  <td colspan='2'><strong>Credit Card Information</strong></td>
+                </tr>
+                <!-- Technically not needed since card type is derived from the CC number
+                <tr>
+                    <td>Type of Card</td>
+                    <td>
+                        <select dojoType='dijit.form.FilteringSelect' jsId='oilsSelfckCCType' required='true'>
+                            <option value='VISA'>VISA</option>
+                            <option value='MasterCard'>MasterCard</option>
+                            <option value='American Express'>American Express</option>
+                        </select>
+                    </td>
+                </tr>
+                -->
+                <tr>
+                    <td>Credit Card #</td>
+                    <td><input jsId='oilsSelfckCCNumber' /></td>
+                </tr>
+                <tr>
+                    <td>
+                        <div style="position:absolute;">
+                            <div style="position:relative;left:80px;">
+                                <a href="javascript:;"
+                                    onclick="alert('Also known as a CVV2 code, it is the 3-digit number on the back of the card next to your signature.\nKCLS only accpets VISA and MasterCard.');"><img
+                                    src="/opac/skin/kcls/graphics/question-mark.png" /></a>
+                            </div>
+                        </div>
+                        Security Code
+                    </td>
+                    <td>
+                        <input jsId='oilsSelfckCCCVV' />
+                    </td>
+                </tr>
+                <tr>
+                    <td>Exipration Month</td>
+                    <td>
+                        <select jsId='oilsSelfckCCMonth'>
+                            <option value='01' selected='selected'>January</option>
+                            <option value='02'>February</option>
+                            <option value='03'>March</option>
+                            <option value='04'>April</option>
+                            <option value='05'>May</option>
+                            <option value='06'>June</option>
+                            <option value='07'>July</option>
+                            <option value='08'>August</option>
+                            <option value='09'>September</option>
+                            <option value='10'>October</option>
+                            <option value='11'>November</option>
+                            <option value='12'>December</option>
+                        </select>
+                    </td>
+                </tr>
+                <tr>
+                    <td>Expiration Year</td>
+                    <td>
+                      <select jsId='oilsSelfckCCYear'>
+                        <option value='2011'>2011</option>
+                        <option value='2012'>2012</option>
+                        <option value='2013'>2013</option>
+                        <option value='2014'>2014</option>
+                        <option value='2015'>2015</option>
+                        <option value='2016'>2016</option>
+                        <option value='2017'>2017</option>
+                        <option value='2018'>2018</option>
+                        <option value='2019'>2019</option>
+                      </select>
+                    </td>
+                </tr>
+                <tr class="hide_me">
+                    <td>Edit Billing Address</td>
+                    <td>
+                        <input jsId='oilsSelfckEditDetails'/>
+                    </td>
+                </tr>
+                <tr>
+                    <td colspan='2' align="center">
+                        <button jsId='oilsSelfckCCSubmit'>
+                            Submit Payment
+                        </button>
+                        <button onclick="hideMe($('pay_fines_now'));unHideMe($('acct_sum'));">
+                            Cancel
+                        </button>
+                    </td>
+                </tr>
+                <tr>
+                    <td colspan="3">
+                        <br />
+                        Important! You must have a printed receipt to be
+                        eligible for a refund on lost items (regulations allow
+                        for no exceptions).
+                        <br />
+                        <strong>
+                            To ensure your necessary receipt information is
+                            not lost, enter your email address above and a
+                            receipt will be emailed to you. Otherwise, make
+                            certain you have a printed receipt in hand before
+                            closing the payment receipt screen.
+                        </strong>
+                        <br />
+                        Refunds are not available for parts and pieces, overdue
+                        fines, or items that do not display a specific title in
+                        My Account. For a full list of refundable and
+                        non-refundable items, visit
+                        <a href="http://www.kcls.org/usingthelibrary/borrowing/refundable.cfm">http://www.kcls.org/usingthelibrary/borrowing/refundable.cfm</a><br /><br />
+                        This site uses VeriSign SSL encryption to ensure your
+                        privacy.
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</div>
+[% END %]

diff --git a/Open-ILS/web/templates/default/kcls-wire/parts/myopac/base.tt2 b/Open-ILS/web/templates/default/kcls-wire/parts/myopac/base.tt2
new file mode 100644 (file)
index 0000000..8219768
--- /dev/null
+++ b/Open-ILS/web/templates/default/kcls-wire/parts/myopac/base.tt2
@@ -0,0 +1,33 @@
+[% myopac_pages = [
+    {url => "main", name => "Account Summary"},
+    {url => "circs", name => "Items Checked Out"},
+    {url => "holds", name => "Holds"},
+    {url => "prefs", name => "Account Preferences"},
+    {url => "lists", name => "My Lists"}
+] %]
+    [% INCLUDE "default/kcls-wire/parts/topnav.tt2" %]
+    <div id="search-wrapper">
+        [% INCLUDE "default/kcls-wire/parts/utils.tt2" %]
+        [% INCLUDE "default/kcls-wire/parts/searchbar.tt2" %]
+    </div>
+    <div id="content-wrapper">
+        <div id="myopac_tabs">
+            <div id="acct_tabs">
+                [%- FOREACH page IN myopac_pages;
+                    IF page.url == myopac_page;
+                        cls_which = "on";
+                        ctx.page_title = page.name;
+                    ELSE;
+                        cls_which = "off";
+                    END -%]
+                <a href="[% page.url %]"
+                    class="acct-[% page.url; '-'; cls_which %] acct-tab"></a>
+                [% END %]
+            </div>
+        </div>
+        <div id="main-content">
+            <div style="height:15px;clear:both;"></div>
+            [% content %]
+            <div style="clear:both;"></div>
+        </div>
+    </div>