API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Aug 9th, 2017
504
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 27.75 KB | None | 0 0
raw download clone embed print report
  1. topLevel
  2. username (the first part of the email)
  3. accounts
  4. objectKey {
  5. name: NewAccount
  6. startingAmount: "$0.00"
  7. amountType: "Debit"
  8. description: "No description"
  9. }
  10. transactions
  11. objectKey {
  12. date: "1/1/2000"
  13. accounts: "<p>Account1</p>..."
  14. debits: "<p>'$0.00'</p>..."
  15. credits: "<p>'$0.00'</p>..."
  16. description: "No description"
  17. }
  18.  
  19. codereviewemail@website.com
  20. password
  21.  
  22. <html>
  23. <head>
  24. <title>Financial Manager v0.4</title>
  25.  
  26. <link href="index.css" rel="stylesheet" type="text/css"/>
  27.  
  28. <script src="https://www.gstatic.com/firebasejs/4.1.3/firebase.js"></script>
  29. <script>
  30. // Initialize Firebase
  31. var config = {
  32. apiKey: "AIzaSyAuJmoxZu0_A_vPMRxCwQ2Y8lv_kfKGsWY",
  33. authDomain: "financialmanager-3220c.firebaseapp.com",
  34. databaseURL: "https://financialmanager-3220c.firebaseio.com",
  35. projectId: "financialmanager-3220c",
  36. storageBucket: "",
  37. messagingSenderId: "68434361135"
  38. };
  39. firebase.initializeApp(config);
  40. </script>
  41. </head>
  42. <body>
  43.  
  44. <div id="MenuBar">
  45. <button id="DropDownButton">Menu</button>
  46. <div id="DropDownMenu">
  47. <button id="LoginMenuButton" class="DropDownOption">Login/Sign Up</button>
  48. </div>
  49. </div>
  50.  
  51. <div>
  52. <button id="AddTransaction">Add Transaction</button>
  53.  
  54. <table id="TransactionTable">
  55. <thead>
  56. <th></th>
  57. <th>Date</th>
  58. <th>Account</th>
  59. <th>Debit</th>
  60. <th>Credit</th>
  61. <th>Description</th>
  62. </thead>
  63. <tbody id="TransactionTableBody">
  64. </tbody>
  65. </table>
  66. </div>
  67.  
  68. <div>
  69. <button id="AddAccount">Add Account</button>
  70.  
  71. <table id="AccountTable">
  72. <thead>
  73. <th></th>
  74. <th>Account</th>
  75. <th>Debit</th>
  76. <th>Credit</th>
  77. <th>Description</th>
  78. </thead>
  79. <tbody id="AccountTableBody">
  80. </tbody>
  81. </table>
  82. </div>
  83.  
  84. <div id="LoginModalBackground" class="modalTop">
  85. <div id="LoginModal" class="modal">
  86. <button id="LoginClose" class="closeButton"></button>
  87.  
  88. <input id="Email" placeholder="Username" class="LoginField"></input>
  89. <input id="Password" placeholder="Password" class="LoginField"></input>
  90. <div id="LoginButtonContainer">
  91. <button id="Login" class="LoginActionButton">Login</button>
  92. <button id="Sign Up" class="LoginActionButton">Sign Up</button>
  93. </div>
  94. </div>
  95. </div>
  96.  
  97. <div id='AddTransactionModalBackground' class="modalTop">
  98. <div id='AddTransactionModal' class="modal">
  99. <button id="AddTransactionClose" class="closeButton"></button>
  100.  
  101. <div class="LabeledInputContainer"><p>Date: </p><input id="AddTransactionDateInput"></input></div>
  102. <div class="LabeledInputContainer"><p>Description: </p><input id="AddTransactionDescriptionInput" value="Lorem Ipsum..."></input></div>
  103.  
  104. <table id="AddTransactionTable">
  105. <thead>
  106. <th><button id="AddTransactionAddAccount"></button></th>
  107. <th>Account</th>
  108. <th>Debit</th>
  109. <th>Credit</th>
  110. </thead>
  111. <tbody id="AddTransactionTableBody">
  112. <tr>
  113. <td></td>
  114. <td><select class='accountLists'></select></td>
  115. <td><input value="0.00" class="resettable transactionMoneyField"></input></td>
  116. <td><input value="0.00" class="resettable transactionMoneyField"></input></td>
  117. </tr>
  118. <tr>
  119. <td></td>
  120. <td><select class='accountLists'></select></td>
  121. <td><input value="0.00" class="resettable transactionMoneyField"></input></td>
  122. <td><input value="0.00" class="resettable transactionMoneyField"></input></td>
  123. </tr>
  124. </tbody>
  125. </table>
  126.  
  127. <button id="AddTransactionSubmit">Submit Transaction</button>
  128. </div>
  129. </div>
  130.  
  131. <div id='AddAccountModalBackground' class="modalTop">
  132. <div id='AddAccountModal' class="modal">
  133. <button id="AddAccountClose" class="closeButton"></button>
  134.  
  135. <div class="LabeledInputContainer"><p>Name: </p><input id="AddAccountNameInput" value="New Account"></input></div>
  136. <div class="LabeledInputContainer"><p>Description: </p><input id="AddAccountDescriptionInput" value="Lorem Ipsum..."></input></div>
  137. <div class="LabeledInputContainer"><p>Starting Amount: </p><input id="AddAccountAmountInput" value="0.00"></input></div>
  138. <div class="LabeledInputContainer">
  139. <p>Amount Type: </p>
  140. <select id="AddAccountTypeInput">
  141. <option value="Debit">Debit</option>
  142. <option value="Credit">Credit</option>
  143. <select>
  144. </div>
  145.  
  146. <button id="AddAccountSubmit">Submit Transaction</button>
  147. </div>
  148. </div>
  149.  
  150. <script src="onClickManager.js"></script>
  151. </body>
  152. <html>
  153.  
  154. var loggedIn = false;
  155. var currentUsername = "";
  156.  
  157. /*
  158. Operations to perform on money formats
  159. format() takes a decimal or [dollars, cents] and formats as "$XXXX.XX"
  160. deformat() takes "$XXXX.XX" and returns [dollars, cents]
  161. the other three take money in the form [dollars, cents] and return the result of their respective operations
  162. */
  163. var format = function(input) {
  164. if(typeof input == "string") {
  165. if(input.match(/($d+|d+).d{2}/g) && input==input.match(/($d+|d+).d{2}/g)) {
  166. return "$"+input.match(/([1-9]d*|0).d{2}/g)[0];
  167. } else {
  168. return "false";
  169. }
  170. } else {
  171. if(input[1]==0) {
  172. return "$"+input[0].toString()+".00";
  173. } else if(input[1]<10) {
  174. return "$"+input[0].toString()+".0"+input[1].toString();
  175. } else {
  176. return "$"+input[0].toString()+"."+input[1].toString();
  177. }
  178. }
  179. }
  180. var deformat = function(string) {
  181. let dollars = string.match(/$d+/g)[0].substring(1);
  182. let cents = string.match(/.d{2}/g)[0].substring(1);
  183. return [parseInt(dollars), parseInt(cents)];
  184. }
  185. var addMoney = function(money1, money2) {
  186. let centCarry = Math.floor((money1[1]+money2[1])/100);
  187. return [money1[0]+money2[0]+centCarry, (money1[1]+money2[1])%100];
  188. }
  189. var subtractMoney = function(money1, money2) {
  190. let centCarry = 0;
  191. if(money1[1]-money2[1]<0) {
  192. centCarry = -1;
  193. }
  194. return [money1[0]-money2[0]+centCarry, (money1[1]-money2[1])%100];
  195. }
  196. var moneyGreaterThan = function(money1, money2) {
  197. return (money1[0]>money2[0]) || (money1[0]==money2[0] && money1[1]>money2[1]);
  198. }
  199.  
  200. //Just to simplify some code and keep ugly regex hidden
  201. var getUsername = function() {
  202. return firebase.auth().currentUser.email.match(/^[^@]+/g);
  203. }
  204.  
  205. //grabs an account with the specified name from the accountTable, used for offline users
  206. var getAccount = function(name) {
  207. let accountList = document.getElementById('AccountTableBody').children;
  208. for(let i = 0; i < accountList.length; i++) {
  209. if(accountList[i].cells[1].innerHTML == name) {
  210. return accountList[i];
  211. }
  212. }
  213. return "false";
  214. }
  215.  
  216. //render takes the data and fills it into the HTML tables, add puts it in firebase
  217. var renderAccount = function(name, startingAmount, amountType, desc) {
  218. let tableBody = document.getElementById('AccountTableBody');
  219.  
  220. tableBody.insertRow(0);
  221. tableBody.rows[0].insertCell(0);
  222. tableBody.rows[0].insertCell(1);
  223. tableBody.rows[0].insertCell(2);
  224. tableBody.rows[0].insertCell(3);
  225. tableBody.rows[0].insertCell(4);
  226.  
  227. let removeButton = document.createElement('button');
  228. removeButton.className = "removalButton";
  229. removeButton.onclick = function() {
  230. var thisRow = this.parentNode.parentNode;
  231. if(loggedIn) {
  232. let canDelete = true;
  233. firebase.database().ref(currentUsername + "/transactions").once('value').then(function(dataSnapshot) {
  234.  
  235. if(dataSnapshot.val() == null || dataSnapshot.val().length == 0) {
  236. return;
  237. }
  238.  
  239. let data = dataSnapshot.val();
  240. let keys = Object.keys(data);
  241.  
  242. for(let i = 0; i < keys.length; i++) {
  243. if(data[keys[i]].accounts.search(name) > -1) {
  244. canDelete = false;
  245. }
  246. }
  247. }).then(function() {
  248. if(canDelete) {
  249. firebase.database().ref(currentUsername + "/accounts").once('value').then(function(dataSnapshot) {
  250. let data = dataSnapshot.val();
  251. let keys = Object.keys(data);
  252.  
  253. for(let i = 0; i < keys.length; i++) {
  254. //since no two accounts can have the same name, this will give us the desired account
  255. if(data[keys[i]].name == name) {
  256. firebase.database().ref(currentUsername + "/accounts/" + keys[i]).remove();
  257. }
  258. break;
  259. }
  260. });
  261. } else {
  262. alert("Cannot delete account, transaction history with this account exists.");
  263. }
  264. });
  265. } else {
  266. let transactionTableBody = document.getElementById("TransactionTableBody");
  267.  
  268. for(let row = 0; row < transactionTableBody.rows.length; row++) {
  269. if(transactionTableBody.rows[row].cells[2].innerHTML.search(name) > -1) {
  270. alert("Cannot delete account, transaction history with this account exists.");
  271. return;
  272. }
  273. }
  274.  
  275. thisRow.parentNode.removeChild(thisRow);
  276. }
  277. }
  278. tableBody.rows[0].cells[0].appendChild(removeButton);
  279.  
  280. tableBody.rows[0].cells[1].innerHTML = name;
  281. if(amountType == "Debit") {
  282. tableBody.rows[0].cells[2].innerHTML = startingAmount;
  283. tableBody.rows[0].cells[3].innerHTML = "$0.00";
  284. } else {
  285. tableBody.rows[0].cells[2].innerHTML = "$0.00";
  286. tableBody.rows[0].cells[3].innerHTML = startingAmount;
  287. }
  288. tableBody.rows[0].cells[4].innerHTML = desc;
  289. }
  290. var addAccount = function(name, startingAmount, amountType, desc) {
  291.  
  292. if(firebase.auth().currentUser) {
  293. firebase.database().ref(getUsername() + "/accounts").push({name: name, startingAmount: startingAmount, amountType: amountType, description: desc})
  294. }
  295.  
  296. }
  297. var renderTransaction = function(date, accounts, debits, credits, description) {
  298. let otherTableBody = document.getElementById('TransactionTableBody');
  299.  
  300. otherTableBody.insertRow(0);
  301. otherTableBody.rows[0].insertCell(0);
  302. otherTableBody.rows[0].insertCell(1);
  303. otherTableBody.rows[0].insertCell(2);
  304. otherTableBody.rows[0].insertCell(3);
  305. otherTableBody.rows[0].insertCell(4);
  306. otherTableBody.rows[0].insertCell(5);
  307.  
  308. let removeButton = document.createElement('button');
  309. removeButton.className = "removalButton";
  310. removeButton.onclick = function() {
  311. let thisRow = this.parentNode.parentNode;
  312. if(loggedIn) {
  313. firebase.database().ref(currentUsername + "/transactions").once('value').then(function(dataSnapshot) {
  314. let data = dataSnapshot.val();
  315. let keys = Object.keys(data);
  316.  
  317. for(let i = 0; i < keys.length; i++) {
  318. //if every field is the same, this is the transaction we're looking for
  319. if(data[keys[i]].date == date && data[keys[i]].accounts == accounts && data[keys[i]].debits == debits && data[keys[i]].credits == credits && data[keys[i]].description == description) {
  320. firebase.database().ref(currentUsername + "/transactions/" + keys[i]).remove();
  321. }
  322. break;
  323. }
  324. });
  325. } else {
  326. thisRow.parentNode.removeChild(thisRow);
  327. }
  328. }
  329. otherTableBody.rows[0].cells[0].appendChild(removeButton);
  330.  
  331. otherTableBody.rows[0].cells[1].innerHTML = date;
  332. otherTableBody.rows[0].cells[2].innerHTML = accounts;
  333. otherTableBody.rows[0].cells[3].innerHTML = debits;
  334. otherTableBody.rows[0].cells[4].innerHTML = credits;
  335. otherTableBody.rows[0].cells[5].innerHTML = description;
  336. }
  337. var addTransaction = function(date, accounts, debits, credits, description) {
  338.  
  339. if(firebase.auth().currentUser) {
  340. firebase.database().ref(getUsername() + "/transactions").push({date: date, accounts: accounts, debits: debits, credits: credits, description: description})
  341. }
  342. }
  343.  
  344. //clears 1 or both tables
  345. var clearTables = function() {
  346. clearTable("accounts");
  347. clearTable("transactions");
  348. }
  349. var clearTable = function(tableType) {
  350. if(tableType == "accounts") {
  351. let rows1 = document.getElementById("AccountTableBody").getElementsByTagName("tr");
  352. for(let i = rows1.length-1; i >= 0; i--) {
  353. rows1[i].remove();
  354. }
  355. } else if(tableType == "transactions") {
  356. let rows2 = document.getElementById("TransactionTableBody").getElementsByTagName("tr");
  357. for(let i = rows2.length-1; i >= 0; i--) {
  358. rows2[i].remove();
  359. }
  360. }
  361. }
  362.  
  363. //these are the functions to reload data when it changes in firebase
  364. var loadAccountData = function(dataSnapshot) {
  365.  
  366. if(dataSnapshot.val() == null || dataSnapshot.val().length == 0) {
  367. clearTable("accounts");
  368. return;
  369. }
  370. let data = []
  371. let keys = Object.keys(dataSnapshot.val());
  372.  
  373. for(let i = 0; i < keys.length; i++) {
  374. data.push(dataSnapshot.val()[keys[i]]);
  375. }
  376.  
  377. clearTable("accounts");
  378. for(let i = 0; i < data.length; i++) {
  379. renderAccount(data[i].name,data[i].startingAmount,data[i].amountType,data[i].description);
  380. }
  381. }
  382. var loadTransactionData = function(dataSnapshot) {
  383. if(dataSnapshot.val() == null || dataSnapshot.val().length == 0) {
  384. clearTable('transactions');
  385. return;
  386. }
  387. let data = []
  388. let keys = Object.keys(dataSnapshot.val());
  389.  
  390. for(let i = 0; i < keys.length; i++) {
  391. data.push(dataSnapshot.val()[keys[i]]);
  392. }
  393.  
  394. clearTable("transactions");
  395. for(let i = 0; i < data.length; i++) {
  396. renderTransaction(data[i].date,data[i].accounts,data[i].debits,data[i].credits, data[i].description);
  397. }
  398. }
  399.  
  400. //onclick event handlers for the drop down menu
  401. document.getElementById('DropDownButton').onclick = function() {
  402. let curDisplayMode = document.getElementById('DropDownMenu').style.display;
  403. document.getElementById('DropDownMenu').style.display = curDisplayMode == "flex" ? "none" : "flex";
  404. }
  405. document.getElementById('LoginMenuButton').onclick = function() {
  406. if(!loggedIn) {
  407. document.getElementById('LoginModalBackground').style.display = "flex";
  408. } else {
  409. firebase.auth().signOut();
  410. clearTables();
  411. }
  412. document.getElementById("DropDownMenu").style.display = "none";
  413. }
  414. document.getElementById("LoginClose").onclick = function() {
  415. document.getElementById("LoginModalBackground").style.display = "none";
  416. }
  417. var checkLoginInfoValidity = function(email, password) {
  418. if(email.length == 0) {
  419. return "Please enter a valid email address!";
  420. }
  421. if(password.length <= 6) {
  422. return "Password must be longer than 6 characters!"
  423. }
  424. return "valid";
  425. }
  426. document.getElementById("Login").onclick = function() {
  427.  
  428. let email = document.getElementById("Email").value;
  429. let password = document.getElementById("Password").value;
  430.  
  431. let message = checkLoginInfoValidity(email, password);
  432. if(message != "valid") {
  433. alert(message);
  434. return;
  435. }
  436.  
  437. const promise = firebase.auth().signInWithEmailAndPassword(email, password);
  438. promise.catch(e => console.log(e));
  439.  
  440. document.getElementById("LoginModalBackground").style.display = "none";
  441. }
  442. document.getElementById("Sign Up").onclick = function() {
  443.  
  444. let email = document.getElementById("Email").value;
  445. let password = document.getElementById("Password").value;
  446.  
  447. let message = checkLoginInfoValidity(email, password);
  448. if(message != "valid") {
  449. alert(message);
  450. return;
  451. }
  452.  
  453. const promise = firebase.auth().createUserWithEmailAndPassword(email, password);
  454. promise.catch(e => console.log(e));
  455.  
  456. document.getElementById("LoginModalBackground").style.display = "none";
  457. }
  458.  
  459. //onclick event handlers for the add transaction menu
  460. document.getElementById('AddTransaction').onclick = function() {
  461. if(document.getElementById('AccountTableBody').rows.length < 2) {
  462. alert("There must be two or more accounts to process a transaction!!");
  463. return;
  464. }
  465.  
  466. let accountLists = document.getElementsByClassName('accountLists');
  467. let listOfAccountNames = [];
  468. for(let i = 0; i < document.getElementById('AccountTableBody').rows.length; i++) {
  469. listOfAccountNames.push(document.getElementById('AccountTableBody').rows[i].cells[1].innerHTML);
  470. }
  471. for(let i = 0; i < accountLists.length; i++) {
  472. let newOption = document.createElement('option');
  473. newOption.text = "Please Select an Account";
  474. newOption.value = "invalid";
  475. accountLists[i].add(newOption);
  476.  
  477. let divider = document.createElement('option');
  478. divider.text = "--------------------";
  479. divider.disabled = true;
  480. accountLists[i].add(divider);
  481.  
  482. for(let j = 0; j < listOfAccountNames.length; j++) {
  483. let newOption = document.createElement('option');
  484. newOption.text = listOfAccountNames[j];
  485. newOption.value = listOfAccountNames[j];
  486. accountLists[i].add(newOption);
  487. }
  488. }
  489.  
  490. document.getElementById('AddTransactionModalBackground').style.display = "flex";
  491. let d = new Date();
  492. document.getElementById('AddTransactionDateInput').value = (d.getMonth()+1) + "/" + d.getDate() + "/" + d.getFullYear();
  493. }
  494. document.getElementById('AddTransactionClose').onclick = function() {
  495. document.getElementById('AddTransactionModalBackground').style.display = "none";
  496. }
  497. document.getElementById('AddTransactionAddAccount').onclick = function() {
  498. let tableBody = document.getElementById('AddTransactionTableBody');
  499. tableBody.insertRow(0);
  500. let row = tableBody.rows[0];
  501. row.insertCell(0);
  502. row.insertCell(1);
  503. row.insertCell(2);
  504. row.insertCell(3);
  505. row.cells[1].outerHTML = "<td><input></input></td>";
  506. row.cells[2].outerHTML = "<td><input></input></td>";
  507. row.cells[3].outerHTML = "<td><input></input></td>";
  508. }
  509. var checkTransactionValidity = function(tableBody) {
  510. for(let row = 0; row < tableBody.rows.length; row++) {
  511. let options = tableBody.rows[row].cells[1].children[0].options;
  512. if(options[options.selectedIndex].value == "invalid") {
  513. return "Please select only valid accounts."
  514. }
  515. }
  516.  
  517. let fields = document.getElementsByClassName('transactionMoneyField');
  518. for(let i = 0; i < fields.length; i++) {
  519. if(format(fields[i].value)!="false") {
  520. fields[i].value = format(fields[i].value);
  521. } else {
  522. return "Invalid Money Amount!!";
  523. }
  524. }
  525.  
  526. return "valid"
  527. }
  528. document.getElementById('AddTransactionSubmit').onclick = function() {
  529. let tableBody = document.getElementById('AddTransactionTableBody');
  530.  
  531. let message = checkTransactionValidity(tableBody);
  532. if(message != "valid") {
  533. alert(message);
  534. return;
  535. }
  536.  
  537. if(loggedIn) {
  538.  
  539. firebase.database().ref(currentUsername + "/accounts").once('value').then(function(dataSnapshot) {
  540. let data = dataSnapshot.val();
  541. let keys = Object.keys(data);
  542. for(let i = 0; i < tableBody.rows.length; i++) {
  543. let accountMod = tableBody.rows[i]
  544. let accountModName = accountMod.cells[1].children[0].options[accountMod.cells[1].children[0].selectedIndex].value;
  545.  
  546. for(let j = 0; j < keys.length; j++) {
  547. if(data[keys[j]].name == accountModName) {
  548.  
  549. let account = data[keys[j]];
  550.  
  551. let newDebit = [0,0];
  552. let newCredit = [0,0];
  553. if(account.amountType == "Debit") {
  554. newDebit = addMoney(deformat(account.startingAmount), deformat(format(accountMod.cells[2].children[0].value)));
  555. newCredit = addMoney(deformat("$0.00"), deformat(format(accountMod.cells[3].children[0].value)));
  556. } else {
  557. newDebit = addMoney(deformat("$0.00"), deformat(format(accountMod.cells[2].children[0].value)));
  558. newCredit = addMoney(deformat(account.startingAmount), deformat(format(accountMod.cells[3].children[0].value)));
  559. }
  560.  
  561. //Normalize
  562. if(moneyGreaterThan(newDebit, newCredit)) {
  563. newDebit = subtractMoney(newDebit, newCredit);
  564. firebase.database().ref(currentUsername + "/accounts/" + keys[j] + "/startingAmount").set(format(newDebit));
  565. firebase.database().ref(currentUsername + "/accounts/" + keys[j] + "/amountType").set("Debit");
  566. } else {
  567. newCredit = subtractMoney(newCredit, newDebit);
  568. firebase.database().ref(currentUsername + "/accounts/" + keys[j] + "/startingAmount").set(format(newCredit));
  569. firebase.database().ref(currentUsername + "/accounts/" + keys[j] + "/amountType").set("Credit");
  570. }
  571. break;
  572. }
  573. }
  574. }
  575. }).then(function() {
  576. let date = document.getElementById('AddTransactionDateInput').value;
  577. let descriptionInput = document.getElementById('AddTransactionDescriptionInput');
  578. let description = descriptionInput.value;
  579.  
  580. let accounts = "";
  581. let debits = "";
  582. let credits = "";
  583.  
  584. for(let i = 0; i < tableBody.rows.length; i++) {
  585. accounts += "<p>"+tableBody.rows[i].cells[1].children[0].value+"</p>";
  586. debits += "<p>"+tableBody.rows[i].cells[2].children[0].value+"</p>";
  587. credits += "<p>"+tableBody.rows[i].cells[3].children[0].value+"</p>";
  588. }
  589.  
  590. addTransaction(date, accounts, debits, credits, description);
  591.  
  592. document.getElementById('AddTransactionDescriptionInput').value = descriptionInput.defaultValue;
  593. for(let i = 0; i < document.getElementsByClassName('resettable').length; i++) {
  594. document.getElementsByClassName('resettable')[i].value = document.getElementsByClassName('resettable')[i].defaultValue;
  595. }
  596. });
  597.  
  598. } else {
  599. for(let i = 0; i < tableBody.rows.length; i++) {
  600. let account = getAccount(tableBody.rows[i].cells[1].children[0].value);
  601. let accountMod = tableBody.rows[i];
  602.  
  603. let accountValues = [account.cells[2].innerHTML,account.cells[3].innerHTML];
  604. let accountModValues = [accountMod.cells[2].children[0].value,accountMod.cells[3].children[0].value];
  605.  
  606. //Debit
  607. let newAmount1 = addMoney(deformat(accountValues[0]), deformat(accountModValues[0]));
  608. accountValues[0] = format(newAmount1);
  609.  
  610. //Credit
  611. let newAmount2 = addMoney(deformat(accountValues[1]), deformat(accountModValues[1]));
  612. accountValues[1] = format(newAmount2);
  613.  
  614. //Normalize (all debit or all credit)
  615. if(accountValues[0] != "$0.00" && accountValues[1] != "$0.00") {
  616. if(moneyGreaterThan(deformat(accountValues[0]),deformat(accountValues[1]))) {
  617. account.cells[2].innerHTML = format(subtractMoney(deformat(accountValues[0]),deformat(accountValues[1])));
  618. account.cells[3].innerHTML = format([0,0]);
  619. } else {
  620. account.cells[2].innerHTML = format([0,0]);
  621. account.cells[3].innerHTML = format(subtractMoney(deformat(accountValues[1]),deformat(accountValues[0])));
  622. }
  623. }
  624. }
  625.  
  626. let date = document.getElementById('AddTransactionDateInput').value;
  627. let descriptionInput = document.getElementById('AddTransactionDescriptionInput');
  628. let description = descriptionInput.value;
  629.  
  630. let accounts = "";
  631. let debits = "";
  632. let credits = "";
  633.  
  634. for(let i = 0; i < tableBody.rows.length; i++) {
  635. accounts += "<p>"+tableBody.rows[i].cells[1].children[0].value+"</p>";
  636. debits += "<p>"+tableBody.rows[i].cells[2].children[0].value+"</p>";
  637. credits += "<p>"+tableBody.rows[i].cells[3].children[0].value+"</p>";
  638. }
  639.  
  640. renderTransaction(date, accounts, debits, credits, description);
  641.  
  642. document.getElementById('AddTransactionDescriptionInput').value = descriptionInput.defaultValue;
  643. for(let i = 0; i < document.getElementsByClassName('resettable').length; i++) {
  644. document.getElementsByClassName('resettable')[i].value = document.getElementsByClassName('resettable')[i].defaultValue;
  645. }
  646. }
  647.  
  648. document.getElementById('AddTransactionModalBackground').style.display = "none";
  649.  
  650. }
  651.  
  652. //onclick handlers for the add account menu
  653. document.getElementById('AddAccount').onclick = function() {
  654. document.getElementById('AddAccountModalBackground').style.display = "flex";
  655. }
  656. document.getElementById('AddAccountClose').onclick = function() {
  657. document.getElementById('AddAccountModalBackground').style.display = "none";
  658. }
  659. var checkAccountValidity = function(name, description, startingAmount, type) {
  660.  
  661. let tableBody = document.getElementById('AccountTableBody');
  662. for(let i = 0; i < tableBody.rows.length; i++) {
  663. if(name == tableBody.rows[i].cells[1].innerHTML) {
  664. return "Account with that name already exists!";
  665. }
  666. }
  667.  
  668. if(startingAmount != 0 && type != "Debit" && type != "Credit") {
  669. return "Please select a starting amount type";
  670. }
  671.  
  672. return "valid";
  673. }
  674. document.getElementById('AddAccountSubmit').onclick = function() {
  675. let tableBody = document.getElementById('AccountTableBody');
  676.  
  677. let nameInput = document.getElementById('AddAccountNameInput');
  678. let descriptionInput = document.getElementById('AddAccountDescriptionInput');
  679. let startingAmountInput = document.getElementById('AddAccountAmountInput');
  680. let amountTypeInput = document.getElementById('AddAccountTypeInput');
  681.  
  682. let name = nameInput.value;
  683. let description = descriptionInput.value;
  684. let startingAmount = startingAmountInput.value;
  685. let amountType = amountTypeInput.value;
  686.  
  687. if(format(startingAmount)!="false") {
  688. startingAmount = format(startingAmount);
  689. } else {
  690. alert("Invalid Starting Amount!!");
  691. return;
  692. }
  693.  
  694. let message = checkAccountValidity(name, description, startingAmount, amountType);
  695. if(message != "valid") {
  696. alert(message);
  697. return;
  698. }
  699.  
  700. if(loggedIn) {
  701. addAccount(name, startingAmount, amountType, description);
  702. } else {
  703. renderAccount(name, startingAmount, amountType, description);
  704. }
  705.  
  706. document.getElementById('AddAccountNameInput').value = nameInput.defaultValue;
  707. document.getElementById('AddAccountDescriptionInput').value = descriptionInput.defaultValue;
  708. document.getElementById('AddAccountAmountInput').value = startingAmountInput.defaultValue;
  709. document.getElementById('AddAccountTypeInput').getElementsByTagName('option')[0].selected = "selected";
  710.  
  711. document.getElementById('AddAccountModalBackground').style.display = "none";
  712.  
  713. }
  714.  
  715. //called when user login state changes
  716. firebase.auth().onAuthStateChanged(firebaseUser => {
  717. if(firebaseUser) {
  718.  
  719. loggedIn = true;
  720. document.getElementById("LoginMenuButton").innerHTML = "Logout";
  721.  
  722. currentUsername = getUsername();
  723.  
  724. clearTables();
  725. firebase.database().ref(currentUsername + "/accounts").on("value", loadAccountData);
  726. firebase.database().ref(currentUsername + "/transactions").on("value", loadTransactionData);
  727. } else {
  728.  
  729. loggedIn = false;
  730. document.getElementById("LoginMenuButton").innerHTML = "Login/Sign Up";
  731.  
  732. clearTables();
  733. firebase.database().ref(currentUsername + "/accounts").off("value", loadAccountData);
  734. firebase.database().ref(currentUsername + "/transactions").off("value", loadTransactionData);
  735.  
  736. currentUsername = "";
  737. }
  738. })
  739.  
  740. body {
  741. display: flex;
  742. flex-direction: row;
  743. justify-content: center;
  744. }
  745.  
  746.  
  747. #DropDownButton {
  748. position: absolute;
  749. left: 0;
  750. top: 0;
  751.  
  752. width: 150px;
  753. height: 50px;
  754.  
  755. border: none;
  756.  
  757. background-color: rgb(180,180,180);
  758. }
  759. #DropDownMenu {
  760. display: none;
  761. flex-direction: column;
  762. justify-content: flex-start;
  763. align-items: flex-start;
  764.  
  765. position: absolute;
  766. left: 0;
  767. top: 50px;
  768. }
  769. .dropDownOption {
  770. width: 150px;
  771. height: 50px;
  772.  
  773. border: none;
  774. }
  775.  
  776.  
  777. #LoginModal {
  778. display: flex;
  779. flex-direction: column;
  780. justify-content: center;
  781. }
  782. .LoginField {
  783. margin: 5px 10px 5px 10px;
  784. }
  785. #LoginButtonContainer {
  786. display: flex;
  787. flex-direction: row;
  788. }
  789. .LoginActionButton {
  790. margin: 5px 0px 5px 10px;
  791. }
  792.  
  793.  
  794. .tableCell {
  795. display: flex;
  796. flex-direction: column;
  797. justify-content: flex-start;
  798. }
  799.  
  800.  
  801.  
  802. .modalTop {
  803. display: none;
  804.  
  805. width: 100%;
  806. height: 100%;
  807.  
  808. position: fixed;
  809. left: 0;
  810. top: 0;
  811.  
  812. align-items: center;
  813. justify-content: center;
  814.  
  815. background-color: rgba(0,0,0,0.6);
  816. }
  817. .modal {
  818. position: relative;
  819.  
  820. width: 50%;
  821. height: 50%;
  822.  
  823. min-width: 400px;
  824. min-height: 400px;
  825.  
  826. background-color: #fff;
  827. }
  828. .closeButton {
  829. width: 16px;
  830. height: 16px;
  831.  
  832. position: absolute;
  833. top: 5px;
  834. right: 5px;
  835.  
  836. background-image: url("clearImage.png");
  837.  
  838. border: none;
  839. }
  840.  
  841. .removalButton {
  842. width: 16px;
  843. height: 16px;
  844.  
  845. background-image: url('clearImage.png');
  846.  
  847. border: none;
  848. }
  849.  
  850. #AddTransactionAddAccount {
  851. width: 16px;
  852. height: 16px;
  853.  
  854. background-image: url('addImage.png');
  855.  
  856. border: none;
  857. }
  858. #AddTransactionSubmit {
  859. position: absolute;
  860.  
  861. bottom: 5px;
  862. right: 5px;
  863. }
  864.  
  865.  
  866.  
  867. .labeledInputContainer {
  868. display: flex;
  869. flex-direction: row;
  870. align-items: baseline;
  871. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!