generated from comp1800/web_template
-
Notifications
You must be signed in to change notification settings - Fork 0
/
expense-editor.html
130 lines (109 loc) · 5.48 KB
/
expense-editor.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html lang="en">
<head>
<title>Finance Bacon</title>
<meta name="comp1800 template" content="My 1800 App">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="images/green-logo.png">
<!-- Bootstrap Library CSS CDN go here -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- Boostrap Library JS CDN go here -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
<!-- Other libraries go here -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
<!-------------------------------------------------------->
<!-- Firebase 8 Library related CSS, JS, JQuery go here -->
<!-------------------------------------------------------->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/ui/4.8.1/firebase-ui-auth.js"></script>
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/4.8.1/firebase-ui-auth.css" />
<!-- Link to styles of your own -->
<link rel="stylesheet" href="./styles/expense-editor.css">
</head>
<body>
<!--Templates-->
<!-- Templates for general use, not displayed -->
<template id="currency-template">
<option class="option-template"></option>
</template>
<!-- Type Template -->
<template id="type-template">
<option class="option-template-2"></option>
</template>
<!-- Category Template -->
<template id="category-template">
<option class="option-template-3"></option>
</template>
<template id="expenseCardTemplate">
<div class="card py-2 mx-2" style="width: 18rem;">
<div class="card-body">
<p class="card-doc-ID" hidden="hidden">Card ID</p>
<h5 class="card-title">Card title</h5>
<p class="card-timestamp"></p>
<hr>
<p class="card-pay"></p>
<p class="card-currency"></p>
<p class="card-currency-conv" hidden="hidden"></p>
<p class="card-pay-type"></p>
<p class="card-pay-category"></p>
<a class="btn btn-primary card-href expButton" onclick="editExpense(this)">Edit</a>
<a class="btn btn-primary card-href expButton" onclick="deleteExpense(this)">Delete</a>
</div>
</div>
</template>
<template id="expenseCardTemplate-edit">
<div class="card py-2 mx-2" style="width: 18rem;">
<div class="card-body">
<p class="card-doc-ID" hidden="hidden">Card ID</p>
<h5 class="card-title">Card title</h5>
<p class="card-timestamp"></p>
<hr>
<p class="card-pay"></p>
<form id="edit-form">
<div class="dropdown-currency card-currency">
<div style="margin-bottom: 10px">Currency</div>
<select id="currency" class="form-select w-75" aria-label="Currency"></select>
</div>
<div class="dropdown-type card-pay-type">
<div style="margin-bottom: 10px">Payment Type</div>
<select id="type" class="form-select w-75" aria-label="Payment Type"></select>
</div>
<div class="dropdown-category card-pay-category">
<div style="margin-bottom: 10px">Payment Category</div>
<select id="category" class="form-select w-50" aria-label="Expense Category"></select>
</div>
</form>
<a class="btn btn-primary card-href expButton" onclick="submitExpense(this)">Submit</a>
<a class="btn btn-primary card-href expButton" onclick="deleteExpense(this)">Delete</a>
</div>
</div>
</template>
<!-- Navbar Template -->
<nav id="navbarPlaceholder"></nav>
<!-- Content Goes Here! -->
<div id="edit-expenses">
<h1 id="expenseHeading">Edit Expenses</h1>
<p class="heading">Edit and view your expense history!</p>
<hr>
<div id="cardGalleryOuter">
<div class="cardGallery">
<div id="cards-go-here" class="row row-cols-auto"></div>
</div>
</div>
</div>
<!-- Footer Template -->
<nav id="footerPlaceholder"></nav>
<!---------------------------------------------->
<!-- Your own JavaScript functions go here -->
<!---------------------------------------------->
<script src="./scripts/firebaseAPI_TEAM14.js"></script>
<script src="./scripts/skeleton.js"></script>
<script src="./scripts/expense-editor.js"></script>
</body>
</html>