display payments history as a separate tabbed UI. TODO: use tab name images to match...

diff --git a/Open-ILS/web/opac/skin/kcls/js/myopac.js b/Open-ILS/web/opac/skin/kcls/js/myopac.js
index 0b884c0..fe61371 100644 (file)
--- a/Open-ILS/web/opac/skin/kcls/js/myopac.js
+++ b/Open-ILS/web/opac/skin/kcls/js/myopac.js
@@ -1373,12 +1373,21 @@ function myOPACShowTransactions(r) {
                if(trans.xact_type() == 'circulation') myOPACShowCircTransaction(trans, record, circ);\r
                else if(trans.xact_type() == 'grocery') myopacShowGenericTransaction( trans );\r
        }\r
-\r
-    myopacDrawPayments(); // XXX\r
 }\r
 \r
+var paymentsDrawn = false;\r
 function myopacDrawPayments() {\r
 \r
+    unHideMe($("myopac_payments_div")); \r
+    hideMe($("myopac_circ_trans_div"));\r
+    hideMe($("myopac_trans_div"));\r
+    hideMe($("pay-fines-image"));\r
+    removeCSSClass($("myopac_fines_tab_link").parentNode, "myopac_xact_tab_selected");\r
+    addCSSClass($("myopac_payments_tab_link").parentNode, "myopac_xact_tab_selected");\r
+\r
+    if(paymentsDrawn) return;\r
+    paymentsDrawn = true;\r
+\r
     var before = new Date()\r
     before.setFullYear(before.getFullYear() - 1);\r
     // KCLS limits payment history view to 1 year.  This will eventually be expanded \r

diff --git a/Open-ILS/web/opac/skin/kcls/xml/myopac/myopac_summary.xml b/Open-ILS/web/opac/skin/kcls/xml/myopac/myopac_summary.xml
index 37ce7f6..f385399 100644 (file)
--- a/Open-ILS/web/opac/skin/kcls/xml/myopac/myopac_summary.xml
+++ b/Open-ILS/web/opac/skin/kcls/xml/myopac/myopac_summary.xml
@@ -46,7 +46,27 @@
                </tbody>\r
        </table>\r
 \r
-    <div id='myopac_payments_div' class=''>\r
+    <style>\r
+        .myopac_xact_tab { font-size: 150%; border: 1px solid #888; background: #3399cc;}\r
+        .myopac_xact_tab_selected { background: #FFF; }\r
+    </style>\r
+    <div id='fines_payments_wrapper' style='width:100%; background: #929292; padding: 3px; margin-top: 10px;'>\r
+        <span class='myopac_xact_tab myopac_xact_tab_selected'>\r
+            <a href='javascript:;' id='myopac_fines_tab_link' \r
+                onclick='hideMe($("myopac_payments_div")); \r
+                    unHideMe($("pay-fines-image"));\r
+                    unHideMe($("myopac_trans_div")); \r
+                    unHideMe($("myopac_circ_trans_div"));\r
+                    addCSSClass($("myopac_fines_tab_link").parentNode, "myopac_xact_tab_selected");\r
+                    removeCSSClass($("myopac_payments_tab_link").parentNode, "myopac_xact_tab_selected");'>Fines</a>\r
+        </span>\r
+        <span class='myopac_xact_tab'>\r
+            <a href='javascript:;' id='myopac_payments_tab_link' onclick='myopacDrawPayments()'>Payments</a>\r
+        </span>\r
+    </div>\r
+\r
+    <!-- Payments History -->\r
+    <div id='myopac_payments_div' class='hide_me'>\r
         <div><b>Payments</b></div>\r
                <table width='100%' class='data_grid data_grid_center' id='myopac_payments_table'>\r
             <thead><tr>\r
@@ -67,6 +87,7 @@
             </tbody>\r
         </table>\r
     </div>\r
+    <!-- /Payments History -->\r
 \r
        <!--\r
        <div id='accrue_explanation' class='hide_me'>\r
@@ -76,14 +97,12 @@
        </div>\r
        -->\r
 \r
-\r
        <!-- Table for circulation transactions only -->\r
        <div id='myopac_circ_trans_div' class='hide_me'>\r
                <br/><hr/><br/>\r
                <table width='100%' class='data_grid data_grid_center' id='myopac_circ_trans_table'>\r
                        <thead>\r
-                               <!--<tr><td colspan='10' style='padding: 6px'><b>&myopac.fines.overdue;</b></td></tr>-->\r
-                               <tr><td colspan='10' style='padding: 6px'><b>Fines</b></td></tr>\r
+                <!-- <tr><td colspan='10' style='padding: 6px'><b>Fines</b></td></tr> -->\r
                                <tr>\r
                                        <td>&common.title;</td>\r
                                        <td>&common.author;</td>\r
@@ -91,7 +110,10 @@
                                        <td>&myopac.fines.due;</td>\r
                                        <td>&myopac.fines.returned;</td>\r
                                        <td>&myopac.fines.balance;</td>\r
-                                       <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');" class="" title="Click to (un)select all fines" /></td>\r
+                                       <td align="center" nowrap="nowrap" style="white-space:nowrap;"><label for="pay_fines_box1">Pay Fines</label><br />\r
+                        <input id="pay_fines_box1" checked="checked" type="checkbox" \r
+                            onclick="checkAll($('myopac_circ_trans_tbody'), this, 'selector');" class="" title="Click to (un)select all fines" />\r
+                    </td>\r
                                </tr>\r
                        </thead>\r
                        <tbody id='myopac_circ_trans_tbody'>\r
@@ -141,7 +163,7 @@
                        </tbody>\r
                </table>\r
        </div>\r
-       <a href="javascript:;" onclick="showPaymentForm();"><img alt="Pay Fines" onmouseover="this.src='<!--#echo var="OILS_SKIN_BASE"-->/kcls/graphics/pay-fines-btn-hover.png';" src="<!--#echo var="OILS_SKIN_BASE"-->/kcls/graphics/pay-fines-btn.png" style="position:relative;top:5px;" /></a>\r
+       <a id='pay-fines-image' href="javascript:;" onclick="showPaymentForm();"><img alt="Pay Fines" onmouseover="this.src='<!--#echo var="OILS_SKIN_BASE"-->/kcls/graphics/pay-fines-btn-hover.png';" src="<!--#echo var="OILS_SKIN_BASE"-->/kcls/graphics/pay-fines-btn.png" style="position:relative;top:5px;" /></a>\r
        \r
        <br/>\r
 </div>\r