?  search:
summary | log | graphiclog1 | graphiclog2 | commit | commitdiff | tree | refs | edit | fork
blame | history | raw | HEAD
can now remove entrys via the web UI
[Bookkeeping.git] / webkell / accounts.html
blob808c4cd7e70d2b994de83d14e2cc7abde5fd3661
1
2 <html style="width: 97%;" >
3 <head>
4
5
6 <link type="text/css" href="css/ui.all.css" rel="stylesheet" />
7 <link type="text/css" href="css/ui.base.css" rel="stylesheet" /> <!-- remove the vertical tab images -->
8 <link type="text/css" href="css/ui.tabs.css" rel="stylesheet" />
9
10 <link type="text/css" href="css/site.css" rel="stylesheet" />
11
12 <link type="text/css" href="css/main.css" rel="stylesheet" />
13 <link type="text/css" href="css/jquery-ui.css" rel="stylesheet" />
14 <style type="text/css">
15
16 /*.ui-widget-content {
17 background: none;
18 border: none;
19 }
20 */
21 .ui-widget-header {
22 -moz-background-clip:border;
23 -moz-background-inline-policy:continuous;
24 -moz-background-origin:padding;
25 background: none;
26 border: none;
27
28 }
29
30 .twindow {
31 width: 100%;
32 height: 300px;
33
34 border-style:solid;
35 border-width:1px;
36 resize: both;
37
38 /* position: relative;
39 top: 30px;
40 left: 20%;
41 */
42 float: left;
43
44 -moz-border-radius: 5px;
45 -webkit-border-radius: 5px;
46
47 }
48 .grid_list {
49
50 width: 95%;
51 height: 71%;
52 float: left;
53 border-style:solid;
54 border-width:1px;
55 resize: both;
56 # overflow: auto;
57 position: relative;
58
59 margin-left: 2.25%;
60 margin-top: 3%;
61 margin-bottom: 2%;
62
63
64 }
65
66 .column_headers {
67
68 float:left;
69 margin: 0px 53px;
70 horizontal-align: middle;
71
72 }
73
74 .buttons {
75
76 -moz-border-radius: 5px;
77 -moz-background-clip:border;
78 -moz-background-inline-policy:continuous;
79 -moz-background-origin:padding;
80 background:#E6E6E6 url(images/ui-bg_glass_75_e6e6e6_1x400.png) repeat-x scroll 50% 50%;
81 border:1px solid #D3D3D3;
82 color:#555555;
83 font-weight:normal;
84 outline-color:-moz-use-text-color;
85 outline-style:none;
86 outline-width:medium;
87
88 text-align:left;
89 border-style:solid;
90
91 }
92
93 </style>
94
95
96 <script type="text/javascript" src="javascript/jquery-1.3.2.js" ></script>
97 <script type="text/javascript" src="javascript/jquery-ui-1.7.2.custom.min.js" ></script>
98 <!-- <script type="text/javascript" src="javascript/jquery-ui-1.7.2.custom.js" ></script>
99 -->
100
101 <script type="text/javascript" src="javascript/effects.core.js" ></script>
102 <script type="text/javascript" src="javascript/effects.slide.js" ></script>
103
104
105 <script type="text/javascript" src="javascript/bkeeping.js"></script>
106 <script type="text/javascript">
107
108
109 var localbkeeping = {
110
111 _a_open: true,
112 toggleAccountsOpen: function() {
113
114 var newleft = -30;
115 var journalLeft = -30 + 416;
116
117 if (localbkeeping._a_open) {
118
119 localbkeeping._a_open = false;
120 newleft = newleft - 381;
121 journalLeft = journalLeft - 400;
122 }
123 else {
124 localbkeeping._a_open = true;
125 }
126
127 newleft = newleft + "px";
128 journalLeft = journalLeft + "px";
129
130
131 var adjustJournals = function() {
132 $("#centre-nav").animate({ left: journalLeft }, { duration: 100, easing: "swing", complete: function(){}, queue: false });
133 }
134 $("#left-nav").animate({ left: newleft }, { duration: 750, easing: "swing", complete: adjustJournals, queue: false });
135
136 }
137
138 };
139
140 $(document).ready(function(){
141
142 // 2. vertical tabs - http://jsbin.com/iqupu
143
144 // see also:
145 // http://dhtmlx.com/docs/products/dhtmlxTabbar/index.shtml
146 // http://www.smashingmagazine.com/2008/08/13/top-10-css-table-designs
147 // http://www.good.is
148 // http://www.csstea.com/css-gallery-news-and-resources/264-120-excellent-examples-of-css-horizantal-menu.html
149 //
150 // web developers - http://adaptd.com , http://lukelarsen.com , http://www.atlanticbt.com
151
152 $(function() {
153 $("#tabs").tabs().addClass('ui-tabs-vertical ui-helper-clearfix');
154 $("#tabs li").removeClass('ui-corner-top').addClass('ui-corner-right');
155 });
156
157
158 var newleft = "-30px";
159 $("#left-nav").animate({ left: newleft }, { duration: 50, easing: "swing", complete: function(){}, queue: false });
160
161
162 var journalLeft = "385px";
163 $("#centre-nav").animate({ left: journalLeft }, { duration: 100, easing: "swing", complete: function(){}, queue: false });
164
165 page_loader();
166
167 });
168
169
170 function page_loader() {
171
172
173 $("#modal_screen").css("opacity", 0.5);
174
175
176 //** list accounts and journals
177 new bkeeping.ListCommand("accounts", bkeeping.displayAccounts).run();
178 new bkeeping.ListCommand("journals", bkeeping.displayJournals).run();
179
180
181 //** get default currency
182 new bkeeping.LoadCommand("profileDetail", bkeeping.setDefaultCurrency).run();
183
184 }
185
186 </script>
187
188
189
190 </head>
191 <body>
192
193
194 <div style="position: relative; top: 15px; left: 30px; width: 70%;" class="title" id="title">
195 bkeeping
196 <xx class="subheader">Your solution to simple
197 <xx style="color: rgb(0, 0, 0);">online bookkeeping</xx>
198 </xx>
199 </div>
200
201
202 <div class="demo">
203 <div id="tabs" style="background: none; border: none;" >
204
205 <ul>
206 <li><a href="#tabs-1">Books</a></li>
207 <li><a href="#tabs-2">User Profile</a></li>
208 <li><a href="#tabs-3">Forums</a></li>
209 </ul>
210
211
212 <!-- TAB 1 -->
213 <div id="tabs-1" style="height: 440px; width: 83%; float: left; position: relative;" >
214
215 <div class="accounts-wrapper" id="left-nav" >
216 <div class="accounts-pane" style="width: 343px; height: 419px; left: -4px;" >
217
218 <div id="accounts_ui" class="cell_content">
219
220 <div class="cell_header" style="border: 0 none white; margin-left: 3px; width: 328px; margin-top: 3px;" >
221 <h3>Accounts</h3>
222 <div id="add_account_div" class="adder_plus" title="Add account" alt="Add account" onclick="bkeeping.addAccount();">+</div>
223 </div>
224 <div id="accounts_content" class="cell_window" style="border: 0 none white; width: 328px;" >
225 <div id="accounts_content_list" class="ac_list">
226 <div id="acl_header" class="form_header_row row">
227 <div id="acl_header_edit" class="edit_column left_column">
228
229 </div>
230 <div id="acl_header_name" class="name_column left_column">
231 Name
232 </div>
233 <div id="acl_header_category" class="category_column left_column">
234 Category
235 </div>
236 <div id="acl_header_balance" class="balance_column left_column">
237 Balance
238 </div>
239 <div id="acl_header_delete" class="delete_column left_column">
240
241 </div>
242 </div>
243 <div id="acl_rows" class="acl_rows rows">
244 </div>
245 </div>
246 </div>
247
248 </div>
249
250
251 </div>
252 <div class="handle" onclick="localbkeeping.toggleAccountsOpen();" style="left: -4px;" ></div>
253 </div>
254 <div class="journals-pane" id="centre-nav" style="top: 10px; height: 430px; left: 0px;" >
255
256
257 <div class="cell_header" style="border: 0 none white;" >
258 <h3>Journals</h3>
259 <div onclick="bkeeping.addJournal();" alt="Add journal" title="Add journal" class="adder_plus" id="add_journal_div">+</div>
260 </div>
261 <div class="cell_window" id="journals_content" style="border: 0 none white; height: auto; width: 93%;" >
262
263 <div class="ac_list" id="journals_content_list">
264
265 <div class="form_header_row row" id="js_header">
266 <div class="edit_column left_column" id="js_header_edit">
267
268 </div>
269 <div class="large_name_column left_column" id="js_header_name">
270 Name
271 </div>
272 <div class="delete_column left_column" id="js_header_delete">
273
274 </div>
275 </div>
276
277 <div class="js_rows rows" id="js_rows">
278
279 </div>
280
281
282 </div>
283 </div>
284
285 <!-- this is needed to keep the width dynamically changing with the accounts panel -->
286 <p style="visibility: hidden;" >lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
287
288 </div>
289
290
291
292 <!-- ================================================ -->
293 <!-- JOURNAL UI Template -->
294 <!-- ================================================ -->
295 <div id="journal_ui"
296 style=" color: #000000;
297 z-index:1000;
298 opacity: 1;
299 filter: alpha(opacity=40);
300 background-color:rgba(255, 255, 255, 1);
301 " >
302
303 <div class="twindow" >
304
305
306 <!-- HEADERs -->
307 <div style="width: 95%; margin: 2.25% 10px 0; overflow: auto; font-family:arial,sans-serif; font-weight:bold;" >
308 <div style="float: left; position:relative; text-align:left; left: 10px; " >
309
310 Journal: <span id="_journal_id">${jname}</span>
311
312 </div>
313 <div style="position: absolute; right: 10px; overflow: visible; " alt="Add entry" onclick="bkeeping.addEntry();" >+</div>
314 </div>
315
316
317 <!-- MAIN GRID -->
318 <div class="grid_list" >
319 <div style="
320 float: left;
321 width: 98%;
322 border: 1px solid rgb(0, 0, 0);
323 padding: 5px;
324 background-color: rgb(204, 204, 204);
325 height: auto;
326 text-align: center;
327 overflow: none;
328 "
329 >
330 <div class="column_headers" >&nbsp;</div>
331 <div class="column_headers" >Date</div>
332 <div class="column_headers" >Entry</div>
333 <div class="column_headers" >Balance</div>
334 <div class="column_headers" >&nbsp;</div>
335
336 </div>
337
338 <div id="j_rows" style="overflow: auto; clear: both; height: 88%; " >
339 </div>
340 </div>
341
342
343 <!-- BUTTONs -->
344 <div style="width: 95%; margin-left:2.25%; overflow: auto; bottom: 2%;" >
345
346 <button class="buttons"
347 style="margin: 0px 280px;"
348 onclick='$("#journal_ui").css("display", "none");' >
349 CLOSE
350 </button>
351
352 </div>
353
354
355 </div>
356 </div>
357
358
359
360 <!-- ================================================ -->
361 <!-- ENTRY UI Template -->
362 <!-- ================================================ -->
363 <div id="entry_ui"
364 style=" color: #000000;
365 display: none;
366 position:absolute;
367 top:10px;
368 left:446px;
369 z-index:1000;
370 opacity: 1;
371 filter: alpha(opacity=40);
372 background-color:rgba(255, 255, 255, 1);
373 width: 46%;
374 " >
375
376 <div class="twindow" >
377
378
379 <!-- HEADERs -->
380 <div style="width: 95%; margin: 2.25% 10px 0; overflow: auto; font-family:arial,sans-serif; font-weight:bold;" >
381 <div style="float: left; position:relative; text-align:left; left: 10px; " >
382 Entry: <span id="_journalentry_id">${jname}</span>
383 </div>
384 <div style="position: absolute; right: 10px; overflow: visible; alt="Add entry" onclick="bkeeping.addEditEntryPart(null);" >+</div>
385 </div>
386
387
388 <!-- MAIN GRID -->
389 <div class="grid_list" >
390 <div style="
391 float: left;
392 width: 98%;
393 border: 1px solid rgb(0, 0, 0);
394 padding: 5px;
395 background-color: rgb(204, 204, 204);
396 height: auto;
397 text-align: center;
398 overflow: none;
399 "
400 >
401
402 <div class="column_headers" >&nbsp;</div>
403
404 <div style="height:12px;" >
405
406 <div style="height:14px; width:30%; text-align: center; float: left; ">
407 Debit
408 </div>
409 <div style="height:14px; width:30%; text-align: center; float: left; ">
410 Credit
411 </div>
412 </div>
413
414
415 <div style="text-align: center; float: left; width: 60%;" >
416
417 <div style="width:25%; text-align: center; float: left; ">
418 Account
419 </div>
420 <div style="width:25%; text-align: center; float: left; ">
421 Amount
422 </div>
423 <div style="width:25%; text-align: center; float: left; ">
424 Account
425 </div>
426 <div style="width:25%; text-align: center; float: left; ">
427 Amount
428 </div>
429 </div>
430
431 <div class="column_headers" >&nbsp;</div>
432
433 </div>
434
435 <div id="jentry_rows" style="overflow: auto; clear: both; height: 81%; " >
436 </div>
437 </div>
438
439
440 <!-- BUTTONs -->
441 <div style="width: 95%; margin-left:2.25%; overflow: auto; bottom: 2%;" >
442
443 <button class="buttons" style="margin: 0px 40px 0px 220px; " onclick="bkeeping.saveEntry( '${entryid}' )" >SAVE</button>
444 <button class="buttons" style="margin: 0px 200px 0px 40px; " onclick='$("#entry_ui").css("display", "none");' >CANCEL</button>
445
446 </div>
447
448
449 </div>
450 </div>
451
452
453
454 </div>
455
456
457 <!-- TAB 2 -->
458 <div id="tabs-2" style="float: left; height: 440px;" >
459 <h2>Content heading 2</h2>
460 <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
461 </div>
462
463
464 <!-- TAB 3 -->
465 <div id="tabs-3" style="float: left; height: 440px;" >
466 <h2>Content heading 3</h2>
467 <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
468
469 <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
470 </div>
471
472
473 </div>
474 </div>
475
476
477 <div id="modal_screen" class="modal screen">
478 &nbsp;
479 </div>
480
481 <div class="footer">
482 <p class="legal">
483 2008-2009 bkeeping Software, Inc. | All Rights Reserved
484 </p>
485 </div>
486
487
488 </body>
489 </html>
490
491
'Bookkeeping' provides a Shell and API for maintaining balanced records for business transactions.