stau.space
AECC database project.
feat: Activity CRUD UI finished.
+159
-45
+63
-44
activity.html
+63
-44
activity.html
···
1
-
<div id="activityFunctionality" hidden>
2
-
activity are <b>AWESOME</b>
3
-
<br />
4
-
What would you like to do?
5
-
<br />
6
-
<br />
7
-
<nav>
8
-
<button onclick="next('activityCreator')">Create</button>
9
-
<button onclick="next('activityFinder');">Find</button>
10
-
<button onclick="next('activityEditor');">Edit</button>
11
-
<button onclick="next('activityDeleter');">Delete</button>
12
-
</nav>
13
-
<br />
14
-
a activity . . .
1
+
<div id="allActivities" hidden>
2
+
<h1>Here is the list of activities:</h1>
3
+
<label for="activityFinderFilter">Filter the results:</label>
4
+
<search>
5
+
<input type="search" name="activityFinderFilter" onkeyup="tableFilter(event, allActivitiesTable);" placeholder="filter...">
6
+
</search>
7
+
<table id="allActivitiesTable">
8
+
<thead>
9
+
<tr>
10
+
<th>ID</th>
11
+
<th style="width:80ch;">Title</th>
12
+
<th style="width:80ch;">Description</th>
13
+
<th>Date</th>
14
+
<th style="border:0px;"></th>
15
+
<th style="border:0px;"></th>
16
+
<tr>
17
+
</thead>
18
+
<tbody></tbody>
19
+
</table>
20
+
<button onclick="next('activityCreator');">Create a new activity</button>
15
21
</div>
16
22
17
23
<div id="activityCreator" hidden>
18
-
So you want to create a activity . . .
24
+
So you want to create an activity . . .
19
25
<br />
20
-
<form id="activityCreatorForm" onsubmit="ActivityCreatorFormHandler(event);">
26
+
<form id="activityCreatorForm" onsubmit="activityCreatorFormHandler(event);">
21
27
<fieldset>
22
28
<legend>activity</legend>
23
-
<input type="submit" value="Submit">
29
+
<br />
30
+
<label for="title">Title:</label>
31
+
<br />
32
+
<input name="title" type="text" minlength="1" maxlength="80" />
33
+
<br />
34
+
<br />
35
+
<label for="description">Description:</label>
36
+
<br />
37
+
<input name="description" type="text" minlength="1" maxlength="80" />
38
+
<br />
39
+
<br />
40
+
<label for="date">Date:</label>
41
+
<br />
42
+
<input name="date" type="datetime-local" max="2700" min="1700" />
43
+
<br />
44
+
<br />
45
+
<input type="submit" value="Submit" />
46
+
<br />
24
47
</fieldset>
25
48
</form>
26
49
</div>
27
50
28
-
<div id="activityFinder" hidden>
29
-
<h1>Here is the list of activity:</h1>
30
-
<label for="tableFilter">Filter the results:</label>
31
-
<search>
32
-
<input type="search" id="tableFilter" onkeyup="table_filter()" placeholder="filter...">
33
-
</search>
34
-
<table id="activityResultsTable"></table>
35
-
</div>
36
-
37
51
<div id="activityEditor" hidden>
38
-
Time to edit a activity. First, choose a Activity:
39
-
<br />
40
-
<br />
41
-
<select id="activityEditorOptions" onchange="loadActivityEditorSubmission();" ></select>
42
-
<div id="activityEditorMenu" hidden>
43
-
Current activity description:
44
-
<br />
45
-
Field1: <span id="activityEditorField1"></span>
46
-
Field2: <span id="activityEditorField2"></span>
47
-
<br />
48
-
<form id="activityEditorForm" onsubmit="ActivityEditorFormHandler(event);">
49
-
<fieldset>
50
-
<legend>Edit activity:</legend>
51
-
<input type="submit" value="Submit" />
52
-
<input type="hidden" id="activityEditorSubmissionId" value="" />
53
-
</fieldset>
54
-
</form>
55
-
</div>
52
+
<form id="activityEditorForm" onsubmit="activityEditorFormHandler(event);">
53
+
<fieldset>
54
+
<legend>Edit:</legend>
55
+
<br />
56
+
<label for="title">Title:</label>
57
+
<br />
58
+
<input id="activityEditorTitle" type="text" name="title" minlength="1" maxlength="80" />
59
+
<br />
60
+
<br />
61
+
<label for="description">Description:</label>
62
+
<br />
63
+
<input id="activityEditorDescription" type="text" name="description" minlength="1" maxlength="80" />
64
+
<br />
65
+
<br />
66
+
<label for="date">Date:</label>
67
+
<br />
68
+
<input id="activityEditorDate" type="datetime-local" name="date" min="1700" max="2700" />
69
+
<br />
70
+
<br />
71
+
<input type="submit" value="Submit" />
72
+
<input type="hidden" id="activityEditorID" value="" />
73
+
</fieldset>
74
+
</form>
56
75
</div>
57
76
58
77
<div id="activityDeleter" hidden>
+96
-1
lib/activity.js
+96
-1
lib/activity.js
···
1
-
function activity() {}
1
+
function activityCreatorFormHandler(event) {
2
+
event.preventDefault();
3
+
try {
4
+
const payload = JSON.stringify({
5
+
t: "activity",
6
+
title: event.target[1].value,
7
+
description: event.target[2].value,
8
+
date: event.target[3].value
9
+
});
10
+
if (confirm("Are you sure you want to create a new activity?")) {
11
+
fetch(URL + "/api/v1/create/", {
12
+
method: "POST",
13
+
headers: {
14
+
"Content-Type": "application/json"
15
+
},
16
+
body: payload
17
+
}).then(resp => {
18
+
if (resp.status != 201) {
19
+
const msg = `Error creating activity, status: ${resp.status}`;
20
+
alert(msg);
21
+
throw msg;
22
+
}
23
+
return resp.json();
24
+
}).then(json => {
25
+
alert(`Succesfully created activity with ID: ${json.a_id}`);
26
+
restart();
27
+
});
28
+
}
29
+
} catch (error) {
30
+
console.error(error.message);
31
+
}
32
+
}
33
+
34
+
function editActivity(obj) {
35
+
activityEditorID.value = obj[0];
36
+
activityEditorTitle.value = obj[1];
37
+
activityEditorDescription.value = obj[2];
38
+
activityEditorDate.value = obj[3];
39
+
next('activityEditor');
40
+
}
41
+
42
+
function activityEditorFormHandler(event) {
43
+
event.preventDefault();
44
+
try {
45
+
if (confirm("Do you want to edit this product?")) {
46
+
payload = JSON.stringify({
47
+
t: "activity",
48
+
a_id: event.target[5].value,
49
+
title: event.target[1].value,
50
+
description: event.target[2].value,
51
+
date: event.target[3].value
52
+
})
53
+
fetch(URL + "/api/v1/update/", {
54
+
method: "POST",
55
+
headers: {
56
+
"Content-Type": "application/json",
57
+
},
58
+
body: payload
59
+
}).then(resp => {
60
+
if (resp.status != 201) {
61
+
const msg = `Error updating activity, status: ${resp.status}`;
62
+
alert(msg);
63
+
throw msg;
64
+
}
65
+
return resp.json();
66
+
}).then(json => {
67
+
alert(`Succesfully updated activity with ID: ${json.a_id}`);
68
+
restart();
69
+
});
70
+
}
71
+
} catch (e) {
72
+
console.error(e.message);
73
+
}
74
+
}
75
+
76
+
function deleteActivity(obj) {
77
+
const a_id = obj[0];
78
+
if (confirm("Are you sure?")) {
79
+
fetch(URL + "/api/v1/delete/", {
80
+
method: "POST",
81
+
headers: {
82
+
"Content-Type": "application/json"
83
+
},
84
+
body: JSON.stringify({t: "activity", a_id: a_id})
85
+
}).then(resp => {
86
+
if (resp.status != 204) {
87
+
const msg = `Error deleting activity, status: ${resp.status}`;
88
+
alert(msg);
89
+
throw msg;
90
+
} else {
91
+
alert(`Succesfully deleted activity with ID: ${a_id}`);
92
+
restart();
93
+
}
94
+
});
95
+
}
96
+
}