stau.space
AECC database project.
feat: New way to show CRUD UI.
+77
-16
+6
-12
index.html
+6
-12
index.html
···
13
13
<meta name="apple-mobile-web-app-title" content="AECC DB" />
14
14
<link rel="manifest" href="/~diego.estrada1/CCOM/4027/db/assets/site.webmanifest" />
15
15
16
+
<script src="lib/activity.js"></script>
17
+
<script src="lib/egg.js"></script>
16
18
<script src="lib/header.js"></script>
19
+
<script src="lib/member.js"></script>
17
20
<script src="lib/product.js"></script>
18
21
<script src="lib/transaction.js"></script>
19
-
<script src="lib/egg.js"></script>
20
22
<link rel="stylesheet" href="index.css">
21
23
</head>
22
24
<body>
23
25
<noscript>
26
+
<br /><br /><br /><br /><br /><br /><br /><br /><br />
24
27
<strong>Please enable JavaScript.</strong>
25
28
This site relies on basic JavaScript functionality and your personal data is not collected.
29
+
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
26
30
</noscript>
27
31
<header>
28
32
<h1>
···
35
39
What would you like to work with?
36
40
<br />
37
41
<br />
38
-
<button onclick="next('activityFunctionality')">Activities</button>
42
+
<button onclick="next('allActivities'); initTable(allActivitiesTable, 'activity', 'editActivity', 'deleteActivity')">Activities</button>
39
43
<button onclick="next('activityTransactionFunctionality')">Activity Transactions</button>
40
44
<button onclick="next('boardMemberFunctionality')">Board Members</button>
41
45
<button onclick="next('memberFunctionality')">Members</button>
···
50
54
<x-include src="member.html"></x-include>
51
55
<x-include src="product.html"></x-include>
52
56
<x-include src="transaction.html"></x-include>
53
-
54
-
<div id="product">
55
-
</div>
56
-
57
-
<div id="member">
58
-
</div>
59
-
60
-
<div id="activity">
61
-
</div>
62
-
63
57
</main>
64
58
<footer>
65
59
<div style="height:50px"></div>
+71
-4
lib/header.js
+71
-4
lib/header.js
···
17
17
last = 'buttons';
18
18
}
19
19
20
-
function table_filter() {
21
-
var filter = tableFilter.value.toUpperCase();
20
+
function tableFilter(event, table) {
21
+
var filter = event.target.value.toUpperCase();
22
22
23
-
var trs = resultsTable.getElementsByTagName("tr");
23
+
var trs = table.getElementsByTagName("tr");
24
24
25
25
for (var i = 1; i < trs.length; i++) {
26
26
trs[i].style.display = "none";
···
35
35
}
36
36
}
37
37
}
38
-
};
38
+
}
39
+
40
+
function initTable(HTMLTable, SQLTable, editHandler, deleteHandler) {
41
+
const body = HTMLTable.tBodies[0];
42
+
body.innerHTML = "";
43
+
fetch (`${URL}/api/v1/read/?t=${SQLTable}`).then(resp => resp.json()).then(json => {
44
+
for (var i = 0; i < json.length; ++i) {
45
+
const obj = json[i];
46
+
let HTML = "<tr>";
47
+
for (var j = 0; j < obj.length; ++j) {
48
+
HTML += `<td>${obj[j]}</td>`;
49
+
}
50
+
HTML += `
51
+
<td style="border:0px;">
52
+
<button onclick='${editHandler}(${JSON.stringify(obj)})'>Edit</button>
53
+
</td>
54
+
`;
55
+
HTML += `
56
+
<td style="border:0px;">
57
+
<button style="color:#ff5454;" onclick='${deleteHandler}(${JSON.stringify(obj)})'>Delete</button>
58
+
</td>
59
+
`;
60
+
HTML += "</tr>";
61
+
body.innerHTML += HTML;
62
+
}
63
+
});
64
+
}
65
+
66
+
function fillTable(HTMLTable, SQLTable) {
67
+
const body = HTMLTable.tBodies[0];
68
+
body.innerHTML = "";
69
+
fetch (`${URL}/api/v1/read/?t=${SQLTable}`).then(resp => resp.json()).then(json => {
70
+
console.log(json);
71
+
for (var i = 0; i < json.length; ++i) {
72
+
const obj = json[i];
73
+
let HTML = "<tr>";
74
+
for (var j = 0; j < obj.length; ++j) {
75
+
HTML += `<td>${obj[j]}</td>`;
76
+
}
77
+
HTML += "</tr>";
78
+
body.innerHTML += HTML;
79
+
}
80
+
});
81
+
}
82
+
83
+
async function get(endpoint, params) {
84
+
try {
85
+
return await fetch(`${URL}/api/v1/${endpoint}/?${params}`).then(resp => resp.json());
86
+
} catch (error) {
87
+
console.error(error.message);
88
+
return "";
89
+
}
90
+
}
91
+
92
+
async function post(endpoint, payload) {
93
+
try {
94
+
return await fetch(`${URL}/api/v1/${endpoint}/`, {
95
+
method: "POST",
96
+
headers: {
97
+
"Content-Type": "application/json"
98
+
},
99
+
body: JSON.stringify(payload)
100
+
}).then(resp => resp.json());
101
+
} catch (error) {
102
+
console.error(error.message);
103
+
return "";
104
+
}
105
+
}