Skip to content

Commit 5af3ea6

Browse files
author
merhoo
committed
split app.ts
1 parent 4fc1593 commit 5af3ea6

File tree

5 files changed

+244
-244
lines changed

5 files changed

+244
-244
lines changed

‎web/app.ts‎

Lines changed: 4 additions & 244 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
/// <reference path="ts/EditEntryForm.ts"/>
2+
/// <reference path="ts/NewEntryForm.ts"/>
3+
/// <reference path="ts/ElementList.ts"/>
4+
15
// Prevent compiler errors when using jQuery. "$" will be given a type of
26
// "any", so that we can use it anywhere, and assume it has any fields or
37
// methods, without the compiler producing an error.
@@ -6,261 +10,17 @@ var $: any;
610
// a global for the main ElementList of the program. See newEntryForm for
711
// explanation
812
var mainList: ElementList;
9-
10-
/**
11-
* ElementList provides a way of seeing all of the data stored on the server.
12-
*/
13-
class ElementList {
14-
/**
15-
* refresh is the public method for updating messageList
16-
*/
17-
refresh() {
18-
// Issue a GET, and then pass the result to update()
19-
$.ajax({
20-
type: "GET",
21-
url: "/messages",
22-
dataType: "json",
23-
success: mainList.update
24-
});
25-
}
26-
27-
/**
28-
* update is the private method used by refresh() to update messageList
29-
*/
30-
private update(data: any) {
31-
$("#messageList").html("<table>");
32-
for (let i = 0; i < data.mData.length; ++i) {
33-
$("#messageList").append("<tr><td>" + data.mData[i].mTitle +
34-
"</td>" + mainList.buttons(data.mData[i].mId) + "</tr>");
35-
}
36-
$("#messageList").append("</table>");
37-
// Find all of the delete buttons, and set their behavior
38-
$(".delbtn").click(mainList.clickDelete);
39-
// Find all of the Edit buttons, and set their behavior
40-
$(".editbtn").click(mainList.clickEdit);
41-
}
42-
43-
/**
44-
* buttons() adds a 'delete' button and an 'edit' button to the HTML for each
45-
* row
46-
*/
47-
private buttons(id: string): string {
48-
return "<td><button class='editbtn' data-value='" + id
49-
+ "'>Edit</button></td>"
50-
+ "<td><button class='delbtn' data-value='" + id
51-
+ "'>Delete</button></td>";
52-
}
53-
54-
/**
55-
* clickEdit is the code we run in response to a click of a delete button
56-
*/
57-
private clickEdit() {
58-
// as in clickDelete, we need the ID of the row
59-
let id = $(this).data("value");
60-
$.ajax({
61-
type: "GET",
62-
url: "/messages/" + id,
63-
dataType: "json",
64-
success: editEntryForm.init
65-
});
66-
}
67-
68-
/**
69-
* clickDelete is the code we run in response to a click of a delete button
70-
*/
71-
private clickDelete() {
72-
// TODO: check the response
73-
let id = $(this).data("value");
74-
$.ajax({
75-
type: "DELETE",
76-
url: "/messages/" + id,
77-
dataType: "json",
78-
// TODO: we should really have a function that looks at the return
79-
// value and possibly prints an error message.
80-
success: mainList.refresh
81-
})
82-
}
83-
} // end class ElementList
84-
85-
8613
// a global for the EditEntryForm of the program. See newEntryForm for
8714
// explanation
8815
var editEntryForm: EditEntryForm;
8916

90-
/**
91-
* EditEntryForm encapsulates all of the code for the form for editing an entry
92-
*/
93-
class EditEntryForm {
94-
/**
95-
* To initialize the object, we say what method of EditEntryForm should be
96-
* run in response to each of the form's buttons being clicked.
97-
*/
98-
constructor() {
99-
$("#editCancel").click(this.clearForm);
100-
$("#editButton").click(this.submitForm);
101-
}
102-
103-
/**
104-
* init() is called from an AJAX GET, and should populate the form if and
105-
* only if the GET did not have an error
106-
*/
107-
init(data: any) {
108-
if (data.mStatus === "ok") {
109-
$("#editTitle").val(data.mData.mTitle);
110-
$("#editMessage").val(data.mData.mContent);
111-
$("#editId").val(data.mData.mId);
112-
$("#editCreated").text(data.mData.mCreated);
113-
// show the edit form
114-
$("#addElement").hide();
115-
$("#editElement").show();
116-
$("#showElements").hide();
117-
}
118-
else if (data.mStatus === "error") {
119-
window.alert("Error: " + data.mMessage);
120-
}
121-
else {
122-
window.alert("An unspecified error occurred");
123-
}
124-
}
125-
126-
/**
127-
* Clear the form's input fields
128-
*/
129-
clearForm() {
130-
$("#editTitle").val("");
131-
$("#editMessage").val("");
132-
$("#editId").val("");
133-
$("#editCreated").text("");
134-
// reset the UI
135-
$("#addElement").hide();
136-
$("#editElement").hide();
137-
$("#showElements").show();
138-
}
139-
140-
/**
141-
* Check if the input fields are both valid, and if so, do an AJAX call.
142-
*/
143-
submitForm() {
144-
// get the values of the two fields, force them to be strings, and check
145-
// that neither is empty
146-
let title = "" + $("#editTitle").val();
147-
let msg = "" + $("#editMessage").val();
148-
// NB: we assume that the user didn't modify the value of #editId
149-
let id = "" + $("#editId").val();
150-
if (title === "" || msg === "") {
151-
window.alert("Error: title or message is not valid");
152-
return;
153-
}
154-
// set up an AJAX post. When the server replies, the result will go to
155-
// onSubmitResponse
156-
$.ajax({
157-
type: "PUT",
158-
url: "/messages/" + id,
159-
dataType: "json",
160-
data: JSON.stringify({ mTitle: title, mMessage: msg }),
161-
success: editEntryForm.onSubmitResponse
162-
});
163-
}
164-
165-
/**
166-
* onSubmitResponse runs when the AJAX call in submitForm() returns a
167-
* result.
168-
*
169-
* @param data The object returned by the server
170-
*/
171-
private onSubmitResponse(data: any) {
172-
// If we get an "ok" message, clear the form and refresh the main
173-
// listing of messages
174-
if (data.mStatus === "ok") {
175-
editEntryForm.clearForm();
176-
mainList.refresh();
177-
}
178-
// Handle explicit errors with a detailed popup message
179-
else if (data.mStatus === "error") {
180-
window.alert("The server replied with an error:\n" + data.mMessage);
181-
}
182-
// Handle other errors with a less-detailed popup message
183-
else {
184-
window.alert("Unspecified error");
185-
}
186-
}
187-
} // end class EditEntryForm
18817

18918
// The 'this' keyword does not behave in JavaScript/TypeScript like it does in
19019
// Java. Since there is only one NewEntryForm, we will save it to a global, so
19120
// that we can reference it from methods of the NewEntryForm in situations where
19221
// 'this' won't work correctly.
19322
var newEntryForm: NewEntryForm;
19423

195-
/**
196-
* NewEntryForm encapsulates all of the code for the form for adding an entry
197-
*/
198-
class NewEntryForm {
199-
/**
200-
* To initialize the object, we say what method of NewEntryForm should be
201-
* run in response to each of the form's buttons being clicked.
202-
*/
203-
constructor() {
204-
$("#addCancel").click(this.clearForm);
205-
$("#addButton").click(this.submitForm);
206-
}
207-
208-
/**
209-
* Clear the form's input fields
210-
*/
211-
clearForm() {
212-
$("#newTitle").val("");
213-
$("#newMessage").val("");
214-
}
215-
216-
/**
217-
* Check if the input fields are both valid, and if so, do an AJAX call.
218-
*/
219-
submitForm() {
220-
// get the values of the two fields, force them to be strings, and check
221-
// that neither is empty
222-
let title = "" + $("#newTitle").val();
223-
let msg = "" + $("#newMessage").val();
224-
if (title === "" || msg === "") {
225-
window.alert("Error: title or message is not valid");
226-
return;
227-
}
228-
// set up an AJAX post. When the server replies, the result will go to
229-
// onSubmitResponse
230-
$.ajax({
231-
type: "POST",
232-
url: "/messages",
233-
dataType: "json",
234-
data: JSON.stringify({ mTitle: title, mMessage: msg }),
235-
success: newEntryForm.onSubmitResponse
236-
});
237-
console.log("Sent.");
238-
mainList.refresh();
239-
}
240-
241-
/**
242-
* onSubmitResponse runs when the AJAX call in submitForm() returns a
243-
* result.
244-
*
245-
* @param data The object returned by the server
246-
*/
247-
private onSubmitResponse(data: any) {
248-
// If we get an "ok" message, clear the form
249-
if (data.mStatus === "ok") {
250-
newEntryForm.clearForm();
251-
mainList.refresh();
252-
}
253-
// Handle explicit errors with a detailed popup message
254-
else if (data.mStatus === "error") {
255-
window.alert("The server replied with an error:\n" + data.mMessage);
256-
}
257-
// Handle other errors with a less-detailed popup message
258-
else {
259-
window.alert("Unspecified error");
260-
}
261-
}
262-
} // end class NewEntryForm
263-
26424
// Run some configuration code when the web page loads
26525
$(document).ready(function () {
26626
// Create the object that controls the "New Entry" form

web/app.css renamed to web/css/app.css

File renamed without changes.

‎web/ts/EditEntryForm.ts‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
/**
2+
* EditEntryForm encapsulates all of the code for the form for editing an entry
3+
*/
4+
class EditEntryForm {
5+
/**
6+
* To initialize the object, we say what method of EditEntryForm should be
7+
* run in response to each of the form's buttons being clicked.
8+
*/
9+
constructor() {
10+
$("#editCancel").click(this.clearForm);
11+
$("#editButton").click(this.submitForm);
12+
}
13+
14+
/**
15+
* init() is called from an AJAX GET, and should populate the form if and
16+
* only if the GET did not have an error
17+
*/
18+
init(data: any) {
19+
if (data.mStatus === "ok") {
20+
$("#editTitle").val(data.mData.mTitle);
21+
$("#editMessage").val(data.mData.mContent);
22+
$("#editId").val(data.mData.mId);
23+
$("#editCreated").text(data.mData.mCreated);
24+
// show the edit form
25+
$("#addElement").hide();
26+
$("#editElement").show();
27+
$("#showElements").hide();
28+
}
29+
else if (data.mStatus === "error") {
30+
window.alert("Error: " + data.mMessage);
31+
}
32+
else {
33+
window.alert("An unspecified error occurred");
34+
}
35+
}
36+
37+
/**
38+
* Clear the form's input fields
39+
*/
40+
clearForm() {
41+
$("#editTitle").val("");
42+
$("#editMessage").val("");
43+
$("#editId").val("");
44+
$("#editCreated").text("");
45+
// reset the UI
46+
$("#addElement").hide();
47+
$("#editElement").hide();
48+
$("#showElements").show();
49+
}
50+
51+
/**
52+
* Check if the input fields are both valid, and if so, do an AJAX call.
53+
*/
54+
submitForm() {
55+
// get the values of the two fields, force them to be strings, and check
56+
// that neither is empty
57+
let title = "" + $("#editTitle").val();
58+
let msg = "" + $("#editMessage").val();
59+
// NB: we assume that the user didn't modify the value of #editId
60+
let id = "" + $("#editId").val();
61+
if (title === "" || msg === "") {
62+
window.alert("Error: title or message is not valid");
63+
return;
64+
}
65+
// set up an AJAX post. When the server replies, the result will go to
66+
// onSubmitResponse
67+
$.ajax({
68+
type: "PUT",
69+
url: "/messages/" + id,
70+
dataType: "json",
71+
data: JSON.stringify({ mTitle: title, mMessage: msg }),
72+
success: editEntryForm.onSubmitResponse
73+
});
74+
}
75+
76+
/**
77+
* onSubmitResponse runs when the AJAX call in submitForm() returns a
78+
* result.
79+
*
80+
* @param data The object returned by the server
81+
*/
82+
private onSubmitResponse(data: any) {
83+
// If we get an "ok" message, clear the form and refresh the main
84+
// listing of messages
85+
if (data.mStatus === "ok") {
86+
editEntryForm.clearForm();
87+
mainList.refresh();
88+
}
89+
// Handle explicit errors with a detailed popup message
90+
else if (data.mStatus === "error") {
91+
window.alert("The server replied with an error:\n" + data.mMessage);
92+
}
93+
// Handle other errors with a less-detailed popup message
94+
else {
95+
window.alert("Unspecified error");
96+
}
97+
}
98+
} // end class EditEntryForm

0 commit comments

Comments
 (0)