API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Aug 7th, 2024
50
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.30 KB | Software | 0 0
raw download clone embed print report
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6.  
  7. <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  8.  
  9. <title>Converter</title>
  10. </head>
  11. <body>
  12. <div class="container">
  13. <div id="main">
  14. <h4 class="text-center mb-3">Main Menu</h4>
  15. <div class="form-group row mb-2 mt-4">
  16. <button onclick="showPicker()" class="btn btn-secondary">Edit Collection</button>
  17. </div>
  18. <div class="form-group row mb-2">
  19. <button onclick="showReportMenu()" class="btn btn-secondary">Reports</button>
  20. </div>
  21. </div>
  22.  
  23. <div id="picker" class="d-none">
  24. <h4 class="text-center mb-3">Select Item to Edit</h4>
  25. <div class="form-group row mb-2">
  26. <label for="itempicker" class="col-sm-3 col-form-label text-end">Item to edit</label>
  27. <div class="col-sm-9"><select onChange="showEditor()" id="itempicker" class="form-select"></select></div>
  28. </div>
  29. <div class="form-group row mt-5">
  30. <div class="col-sm-3"></div>
  31. <button onclick="addItem()" class="btn btn-secondary col-sm-3">Add Item</button>
  32. <div class="col-sm-1"></div>
  33. <button onclick="showMainMenu()" class="btn btn-secondary col-sm-3">Main Menu</button>
  34. </div>
  35. </div>
  36.  
  37. <div id="editor" class="d-none">
  38. <h4 class="text-center mb-3">Edit Collections</h4>
  39. <form id="editorForm" class="needs-validation" novalidate>
  40. <div class="form-group row mb-2">
  41. <label for="title" class="col-sm-4 col-form-label text-end">Title</label>
  42. <div class="col-sm-8"><input onchange="updateCollection('title')" id="title" class="form-control" required></div>
  43. </div>
  44.  
  45. <div class="form-group row mb-2">
  46. <label for="details" class="col-sm-4 col-form-label text-end">Details</label>
  47. <div class="col-sm-8"><input onchange="updateCollection('details')" id="details" class="form-control"></div>
  48. </div>
  49.  
  50. <div class="form-group row mb-2">
  51. <label for="purchaseDate" class="col-sm-4 col-form-label text-end">Purchase Date</label>
  52. <div class="col-sm-8"><input type="date" onchange="updatePurchaseDate()" id="purchaseDate" class="form-control" required></div>
  53. </div>
  54.  
  55. <div class="form-group row mb-2">
  56. <label for="purchasePrice" class="col-sm-4 col-form-label text-end">Purchase Price</label>
  57. <div class="col-sm-8"><input onchange="updateCollection('purchasePrice')" pattern="^[0-9]*(\.[0-9][0-9])?$" id="purchasePrice" class="form-control" required></div>
  58. </div>
  59.  
  60. <div class="form-group row mb-2">
  61. <label for="saleDate" class="col-sm-4 col-form-label text-end">Sale Date</label>
  62. <div class="col-sm-8"><input type="date" onchange="updateSaleDate()" id="saleDate" class="form-control"></div>
  63. </div>
  64.  
  65. <div class="form-group row mb-2">
  66. <label for="salePrice" class="col-sm-4 col-form-label text-end">Sale Price</label>
  67. <div class="col-sm-8"><input onchange="updateCollection('salePrice')" pattern="^[0-9]*(\.[0-9][0-9])?$" id="salePrice" class="form-control"></div>
  68. </div>
  69.  
  70. <div class="form-group row mt-5">
  71. <div class="col-sm-4"></div>
  72. <button onclick="deleteEditing()" class="btn btn-secondary col-sm-3">Delete</button>
  73. <div class="col-sm-1"></div>
  74. <button onclick="doneEditing()" class="btn btn-secondary col-sm-3">Save</button>
  75. </div>
  76. </form>
  77. </div>
  78.  
  79. <div id="reportMenu" class="d-none">
  80. <h4 class="text-center mb-3">Report Menu</h4>
  81. <div class="form-group row mb-2 mt-4">
  82. <button onclick="showAssetReport()" class="btn btn-secondary">Report Current Assets</button>
  83. </div>
  84. <div class="form-group row mb-5">
  85. <button onclick="showSalesReport()" class="btn btn-secondary">Report Sales</button>
  86. </div>
  87. <div class="form-group row mb-2">
  88. <button onclick="showMainMenu()" class="btn btn-secondary">Main Menu</button>
  89. </div>
  90. </div>
  91.  
  92. <div id="reportBody" class="d-none">
  93. <h4 id="reportBodyTitle" class="text-center mb-3">Report</h4>
  94. <div id="reportBodyContent">
  95. </div>
  96. <div class="form-group row mt-5">
  97. <button onclick="showReportMenu()" class="btn btn-secondary">Close</button>
  98. </div>
  99. </div>
  100.  
  101. </div>
  102.  
  103. <script language="javascript">
  104.  
  105. /* bootstrap validation enable */
  106.  
  107. function formValidate(formId)
  108. {
  109. const form=document.getElementById(formId);
  110. form.classList.add('was-validated');
  111. return form.checkValidity();
  112. }
  113.  
  114. /* data */
  115.  
  116. //const collections = [ {title:"1999 Jimmy steward album",details:"",condition:"good",purchasePrice:1.22, purchaseDate:"", salePrice: "", saleDate:""},
  117. // {title:"justice for all album",details:"original print",condition:"good",purchasePrice:11.22, purchaseDate:"", salePrice: "", saleDate:""}
  118. // ];
  119.  
  120. let collections = [];
  121.  
  122. init();
  123.  
  124. function init()
  125. {
  126. const jsonCollections=localStorage.getItem("collections");
  127. if (jsonCollections != null)
  128. collections=JSON.parse(jsonCollections);
  129. }
  130.  
  131. /* ui */
  132.  
  133. function showMainMenu()
  134. {
  135. setClassById("main","d-block");
  136. setClassById("editor","d-none");
  137. setClassById("picker","d-none");
  138. setClassById("reportMenu","d-none");
  139. }
  140.  
  141. function showPicker()
  142. {
  143. setClassById("main","d-none");
  144. setClassById("editor","d-none");
  145. setClassById("picker","d-block");
  146.  
  147. const itemPicker=document.getElementById("itempicker");
  148. clearElement(itemPicker);
  149. addOption(itemPicker,-1,"");
  150.  
  151. for (let i=0; i<collections.length; i++)
  152. addOption(itemPicker,i,collections[i].title);
  153. }
  154.  
  155.  
  156. function addItem()
  157. {
  158. const itemPicker=document.getElementById("itempicker");
  159. addOption(itemPicker,collections.length,"");
  160. itemPicker.value=collections.length;
  161.  
  162. collections.push({title:"",details:"",condtion:"",purchasePrice:"", purchaseDate:"", salePrice: "", saleDate:""});
  163. showEditor();
  164. }
  165.  
  166.  
  167. function showEditor()
  168. {
  169. const form=document.getElementById("editorForm");
  170. form.className="needs-validation";
  171.  
  172. const itemPicker = document.getElementById("itempicker");
  173. if (itemPicker.value==-1) return;
  174.  
  175. setClassById("main","d-none");
  176. setClassById("picker","d-none");
  177. setClassById("editor","d-block");
  178.  
  179. setInputFromCollection(["title","details","purchasePrice","purchaseDate","salePrice","saleDate"]);
  180.  
  181. const title = document.getElementById("title");
  182. title.value=collections[itemPicker.value].title;
  183.  
  184. const details = document.getElementById("details");
  185. details.value=collections[itemPicker.value].details;
  186. }
  187.  
  188.  
  189. function setInputFromCollection(fieldList)
  190. {
  191. const itemPicker = document.getElementById("itempicker");
  192. for (let i=0; i<fieldList.length; i++)
  193. {
  194. const domObject = document.getElementById(fieldList[i]);
  195. domObject.value=collections[itemPicker.value][fieldList[i]];
  196. }
  197. adjustSalePriceInput();
  198. adjustSaleDateInput();
  199. }
  200.  
  201.  
  202. function updatePurchaseDate()
  203. {
  204. updateCollection('purchaseDate');
  205. adjustSaleDateInput();
  206. }
  207.  
  208.  
  209. function adjustSaleDateInput()
  210. {
  211. const itemPicker = document.getElementById("itempicker");
  212. const saleDate = document.getElementById("saleDate");
  213. saleDate.min = collections[itemPicker.value].purchaseDate;
  214. }
  215.  
  216.  
  217. function updateSaleDate()
  218. {
  219. updateCollection('saleDate');
  220. adjustSalePriceInput();
  221. }
  222.  
  223.  
  224. function adjustSalePriceInput()
  225. {
  226. const itemPicker = document.getElementById("itempicker");
  227. const salePrice = document.getElementById("salePrice");
  228. salePrice.required= (collections[itemPicker.value].saleDate.length>0);
  229. salePrice.disabled = (!salePrice.required);
  230. if (salePrice.disabled)
  231. {
  232. salePrice.value="";
  233. collections[itemPicker.value].salePrice="";
  234. }
  235. }
  236.  
  237.  
  238. function updateCollection(fieldName)
  239. {
  240. const itemPicker = document.getElementById("itempicker");
  241. const domObject = document.getElementById(fieldName);
  242. collections[itemPicker.value][fieldName] = domObject.value;
  243. }
  244.  
  245.  
  246. function doneEditing()
  247. {
  248. stopSubmit();
  249.  
  250. if (formValidate("editorForm"))
  251. {
  252. localStorage.setItem("collections",JSON.stringify(collections));
  253. showPicker();
  254. }
  255. }
  256.  
  257. function deleteEditing()
  258. {
  259. stopSubmit();
  260. const itemPicker = document.getElementById("itempicker");
  261. collections.splice(itemPicker.value,1);
  262. showPicker();
  263. }
  264.  
  265. /* reports */
  266. function showReportMenu()
  267. {
  268. setClassById("main","d-none");
  269. setClassById("reportMenu","d-block");
  270. setClassById("reportBody","d-none");
  271. }
  272.  
  273. function showAssetReport()
  274. {
  275. const report = newReport("Asset Report");
  276. addReportHeader(report,[{className:"col-sm-8", title:"Title"},{className:"col-sm-2", title:"Purchase Date"},{className:"col-sm-2", title:"Purchase Price"}]);
  277.  
  278. let total=0;
  279. for (let i=0; i<collections.length; i++)
  280. {
  281. if (collections[i].saleDate.length<=0)
  282. {
  283. const reportRow=addReportRow(report);
  284. addReportColumn(reportRow,"col-sm-8",collections[i].title);
  285. addReportColumn(reportRow,"col-sm-2",collections[i].purchaseDate);
  286. addReportColumn(reportRow,"col-sm-2",Number(collections[i].purchasePrice).toFixed(2));
  287. total = total + Number(collections[i].purchasePrice);
  288. }
  289. }
  290. if (total>0)
  291. {
  292. const reportRow=addReportRow(report);
  293. addReportColumn(reportRow,"col-sm-2 bg-light","TOTAL");
  294. addReportColumn(reportRow,"col-sm-8","");
  295. addReportColumn(reportRow,"col-sm-2 bg-light",total.toFixed(2));
  296. }
  297. }
  298.  
  299.  
  300. function showSalesReport()
  301. {
  302. const report = newReport("Sales Report");
  303. addReportHeader(report,[{className:"col-sm-5", title:"Title"},
  304. {className:"col-sm-2", title:"Purchase Date"},{className:"col-sm-1", title:"Purchase Price"},
  305. {className:"col-sm-2", title:"Sale Date"},{className:"col-sm-1", title:"Sale Price"},
  306. {className:"col-sm-1", title:"Gain Loss"}]);
  307.  
  308. let totalPurchase=0;
  309. let totalSale=0;
  310. let totalGain=0;
  311. for (let i=0; i<collections.length; i++)
  312. {
  313. if (collections[i].saleDate.length>0)
  314. {
  315. const reportRow=addReportRow(report);
  316. const gain = Number(collections[i].salePrice) - Number(collections[i].purchasePrice);
  317. addReportColumn(reportRow,"col-sm-5",collections[i].title);
  318. addReportColumn(reportRow,"col-sm-2",collections[i].purchaseDate);
  319. addReportColumn(reportRow,"col-sm-1",Number(collections[i].purchasePrice).toFixed(2));
  320. addReportColumn(reportRow,"col-sm-2",collections[i].saleDate);
  321. addReportColumn(reportRow,"col-sm-1",Number(collections[i].salePrice).toFixed(2));
  322. addReportColumn(reportRow,"col-sm-1",gain.toFixed(2));
  323. totalPurchase = totalPurchase + Number(collections[i].purchasePrice);
  324. totalSale = totalSale + Number(collections[i].salePrice);
  325. totalGain = totalGain + gain;
  326. }
  327. }
  328. if (totalPurchase>0)
  329. {
  330. const reportRow=addReportRow(report);
  331. addReportColumn(reportRow,"col-sm-2 bg-light","TOTAL");
  332. addReportColumn(reportRow,"col-sm-5","");
  333. addReportColumn(reportRow,"col-sm-1 bg-light",totalPurchase.toFixed(2));
  334. addReportColumn(reportRow,"col-sm-2","");
  335. addReportColumn(reportRow,"col-sm-1 bg-light",totalSale.toFixed(2));
  336. addReportColumn(reportRow,"col-sm-1 bg-light",totalGain.toFixed(2));
  337. }
  338. }
  339.  
  340.  
  341. function newReport(title)
  342. {
  343. setClassById("reportMenu","d-none");
  344. setClassById("reportBody","d-block");
  345.  
  346. setReportTitle(title);
  347. const report = document.getElementById("reportBodyContent");
  348. clearElement(report);
  349. return report;
  350. }
  351.  
  352. function setReportTitle(title)
  353. {
  354. const reportTitle = document.getElementById("reportBodyTitle");
  355. reportTitle.innerHTML=title;
  356. }
  357.  
  358.  
  359. function addReportHeader(report,headers)
  360. {
  361. const reportRow=addReportRow(report);
  362. for (let i=0; i<headers.length; i++)
  363. addReportColumn(reportRow,headers[i].className+" bg-light",headers[i].title);
  364. }
  365.  
  366. function addReportRow(report)
  367. {
  368. const reportRow = document.createElement("div");
  369. reportRow.className="form-group row mb-2";
  370. report.appendChild(reportRow);
  371. return reportRow;
  372. }
  373.  
  374.  
  375. function addReportColumn(reportRow,className,content)
  376. {
  377. const reportCol = document.createElement("div");
  378. reportCol.className=className;
  379. reportCol.innerHTML=content;
  380. reportRow.appendChild(reportCol);
  381. return reportCol;
  382. }
  383.  
  384.  
  385. /* utils */
  386.  
  387. function stopSubmit()
  388. {
  389. event.preventDefault();
  390. event.stopPropagation();
  391. }
  392.  
  393. function setClassById(id,className)
  394. {
  395. let domObject = document.getElementById(id);
  396. setClass(domObject,className);
  397. }
  398.  
  399.  
  400. function setClass(domObject,className)
  401. {
  402. domObject.className=className;
  403. }
  404.  
  405.  
  406. function clearElementById(id)
  407. {
  408. let domObject = document.getElementById(id);
  409. clearElement(domObject);
  410. }
  411.  
  412.  
  413. function clearElement(domObject)
  414. {
  415. while (domObject.firstChild)
  416. domObject.removeChild(domObject.firstChild);
  417. }
  418.  
  419.  
  420. function addOption(domSelect,value,label)
  421. {
  422. let option = document.createElement('option');
  423. option.value=value;
  424. option.innerHTML=label;
  425. domSelect.appendChild(option);
  426. }
  427.  
  428. </script>
  429. </body>
  430. </html>
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!