Skip to content

Commit 89e0cd1

Browse files
aaguy-hueaaguy-hue
authored
Merge pull request #892 from CSA-Coders-2025/main
Team Teach Toolkit fixes
2 parents 6d31234 + 95a0f58 commit 89e0cd1

1 file changed

Lines changed: 120 additions & 147 deletions

File tree

‎_posts/student_toolkit/TeamTeachToolkit/2025-04-04-TeamTeachToolkit_Signup.md‎

Lines changed: 120 additions & 147 deletions
Original file line numberDiff line numberDiff line change
@@ -7,30 +7,32 @@ permalink: /student/teamteachsignup
77
description: Sign up for team teach topics
88
---
99

10-
<div class="... bg-neutral-900">
10+
<div class="min-h-screen bg-neutral-900 text-white">
1111
<div class="max-w-5xl mx-auto py-10 px-4">
1212

13-
<div id="tooltip"
14-
style="position: fixed; background: #222; color: #eee; padding: 8px 12px; border-radius: 4px; pointer-events: none; opacity: 0; transition: opacity 0.2s; max-width: 300px; z-index: 1000; font-size: 0.875rem;">
15-
</div>
16-
<!-- Logged-in Student Info -->
13+
<div id="tooltip"
14+
style="position: fixed; background: #222; color: #eee; padding: 8px 12px; border-radius: 4px; pointer-events: none; opacity: 0; transition: opacity 0.2s; max-width: 300px; z-index: 1000; font-size: 0.875rem;">
15+
</div>
16+
1717
<p id="loggedInStudent" class="mb-6 text-center text-sm">Fetching student info...</p>
18-
<!-- Signup Form and Table -->
18+
1919
<div class="border border-white rounded-lg p-6">
2020
<h2 class="text-2xl font-bold mb-6 text-center">TEAM TEACH SIGNUP</h2>
21-
<!-- Input Form -->
21+
2222
<div class="flex flex-col gap-4 mb-6">
2323
<input type="text" id="name" placeholder="Enter Team Teach Topic"
24-
class="w-full px-4 py-2 bg-gray-700 text-white rounded placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-white" style="background-color: #404040;">
24+
class="w-full px-4 py-2 text-white rounded placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-white" style="background-color: #404040;">
25+
<input type="text" id="description" placeholder="Enter Topic Description"
26+
class="w-full px-4 py-2 text-white rounded placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-white" style="background-color: #404040;">
2527
<input type="date" id="dueDate"
26-
class="w-full px-4 py-2 bg-gray-700 text-white rounded placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-white" style="background-color: #404040;">
28+
class="w-full px-4 py-2 text-white rounded placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-white" style="background-color: #404040;">
2729
<button id="addTopicBtn"
2830
class="w-full border border-white px-4 py-2 rounded hover:bg-white hover:text-black transition">Add Topic</button>
2931
</div>
30-
<!-- Topics Table -->
32+
3133
<div class="overflow-x-auto">
3234
<table class="min-w-full border border-white text-sm text-left">
33-
<thead class="bg-gray-800 text-white">
35+
<thead class="text-white">
3436
<tr>
3537
<th class="px-4 py-2 border border-white" style="background-color: #404040;">Topic</th>
3638
<th class="px-4 py-2 border border-white" style="background-color: #404040;">Date</th>
@@ -46,113 +48,99 @@ description: Sign up for team teach topics
4648
</div>
4749

4850
<script type="module">
49-
import { javaURI, fetchOptions } from '{{site.baseurl}}/assets/js/api/config.js';
51+
import { javaURI, fetchOptions } from '{{site.baseurl}}/assets/js/api/config.js';
5052

51-
let loggedInStudent = null;
52-
let userId = -1;
53-
let StuName = "";
53+
let loggedInStudent = null;
54+
let userId = -1;
55+
let StuName = "";
5456

55-
function formatDateToMMDDYYYY(dateStr) {
56-
const [year, month, day] = dateStr.split("-");
57-
return `${month}/${day}/${year}`;
58-
}
57+
function formatDateToMMDDYYYY(dateStr) {
58+
const [year, month, day] = dateStr.split("-");
59+
return `${month}/${day}/${year}`;
60+
}
5961

60-
async function getUserId() {
61-
const url_persons = `${javaURI}/api/person/get`;
62-
try {
63-
const response = await fetch(url_persons, fetchOptions);
64-
if (!response.ok) throw new Error(`Spring server response: ${response.status}`);
65-
const data = await response.json();
66-
userId = data.id;
67-
StuName = data.name;
68-
document.getElementById("loggedInStudent").innerText = `Logged in as: ${StuName}`;
69-
fetchTopics();
70-
} catch (error) {
71-
console.error("Java Database Error:", error);
72-
document.getElementById("loggedInStudent").innerText = "Error fetching student info.";
73-
}
62+
async function getUserId() {
63+
const url_persons = `${javaURI}/api/person/get`;
64+
try {
65+
const response = await fetch(url_persons, fetchOptions);
66+
if (!response.ok) throw new Error(`Spring server response: ${response.status}`);
67+
const data = await response.json();
68+
userId = data.id;
69+
StuName = data.name;
70+
document.getElementById("loggedInStudent").innerText = `Logged in as: ${StuName}`;
71+
fetchTopics();
72+
} catch (error) {
73+
console.error("Java Database Error:", error);
74+
document.getElementById("loggedInStudent").innerText = "Error fetching student info.";
7475
}
76+
}
7577

76-
async function fetchTopics() {
77-
try {
78-
let response = await fetch(`${javaURI}/api/assignments/debug`, fetchOptions);
79-
let topics = await response.json();
80-
let filteredTopics = topics.filter(topic => topic.type === "teamteach");
81-
82-
let topicsList = document.getElementById("topicsList");
83-
topicsList.innerHTML = ""; // Clear previous topics
84-
85-
// Wait for all fetchAssignTopics calls to complete
86-
await Promise.all(filteredTopics.map(topic => fetchAssignTopics(topic)));
78+
async function fetchTopics() {
79+
try {
80+
let response = await fetch(`${javaURI}/api/assignments/debug`, fetchOptions);
81+
let topics = await response.json();
82+
let filteredTopics = topics.filter(topic => topic.type === "teamteach");
8783

88-
} catch (error) {
89-
console.error("Error fetching topics:", error);
90-
}
84+
let topicsList = document.getElementById("topicsList");
85+
topicsList.innerHTML = "";
86+
await Promise.all(filteredTopics.map(topic => fetchAssignTopics(topic)));
87+
} catch (error) {
88+
console.error("Error fetching topics:", error);
9189
}
90+
}
9291

93-
async function fetchAssignTopics(topic) {
94-
try {
95-
let response = await fetch(`${javaURI}/api/submissions/assignment/${topic.id}`, fetchOptions);
96-
let data = await response.json();
97-
let assignments = Array.isArray(data) ? data : [];
98-
99-
let studentsSet = new Set();
100-
let studentsTextArray = [];
101-
102-
assignments.forEach(assignment => {
103-
if (Array.isArray(assignment.students)) {
104-
assignment.students.forEach(s => {
105-
if (!studentsSet.has(s.id)) {
106-
studentsSet.add(s.id);
107-
studentsTextArray.push(`${s.name} (${s.id})`);
108-
}
109-
});
110-
} else if (assignment.students && typeof assignment.students === 'string') {
111-
assignment.students.split(',').forEach(name => {
112-
if (!studentsSet.has(name.trim())) {
113-
studentsSet.add(name.trim());
114-
studentsTextArray.push(name.trim());
115-
}
116-
});
117-
}
118-
});
92+
async function fetchAssignTopics(topic) {
93+
try {
94+
let response = await fetch(`${javaURI}/api/submissions/assignment/${topic.id}`, fetchOptions);
95+
let data = await response.json();
96+
let assignments = Array.isArray(data) ? data : [];
97+
98+
let studentsSet = new Set();
99+
let studentsTextArray = [];
100+
101+
assignments.forEach(assignment => {
102+
if (Array.isArray(assignment.students)) {
103+
assignment.students.forEach(s => {
104+
if (!studentsSet.has(s.id)) {
105+
studentsSet.add(s.id);
106+
studentsTextArray.push(`${s.name} (${s.id})`);
107+
}
108+
});
109+
} else if (assignment.students && typeof assignment.students === 'string') {
110+
assignment.students.split(',').forEach(name => {
111+
if (!studentsSet.has(name.trim())) {
112+
studentsSet.add(name.trim());
113+
studentsTextArray.push(name.trim());
114+
}
115+
});
116+
}
117+
});
119118

120-
const studentsText = studentsTextArray.length > 0 ? studentsTextArray.join(', ') : "None";
121-
const alreadySignedUp = studentsSet.has(userId);
119+
const studentsText = studentsTextArray.length > 0 ? studentsTextArray.join(', ') : "None";
120+
const alreadySignedUp = studentsSet.has(userId);
122121

123122
let row = document.createElement("tr");
124123
row.innerHTML = `
125-
<td
126-
class="border border-white px-4 py-2 tooltip-target"
127-
data-description="${topic.description.replace(/"/g, '&quot;')}"
128-
>
129-
${topic.name}
130-
</td>
124+
<td class="border border-white px-4 py-2 tooltip-target" data-description="${topic.description.replace(/"/g, '&quot;')}">${topic.name}</td>
131125
<td class="border border-white px-4 py-2">${topic.dueDate}</td>
132126
<td class="border border-white px-4 py-2">${studentsText}</td>
133127
<td class="border border-white px-4 py-2">
134-
<button
135-
class="border border-white px-3 py-1 rounded text-sm transition ${alreadySignedUp ? 'opacity-50 cursor-not-allowed' : 'hover:bg-white hover:text-black'}"
136-
data-topic-id="${topic.id}"
137-
${alreadySignedUp ? 'disabled' : ''}>
128+
<button class="border border-white px-3 py-1 rounded text-sm transition ${alreadySignedUp ? 'opacity-50 cursor-not-allowed' : 'hover:bg-white hover:text-black'}" data-topic-id="${topic.id}" ${alreadySignedUp ? 'disabled' : ''}>
138129
${alreadySignedUp ? 'Signed Up' : 'Sign Up'}
139130
</button>
140-
</td>
141-
`;
142-
143-
144-
if (!alreadySignedUp) {
145-
row.querySelector("button").addEventListener("click", function () {
146-
signUpForTopic(topic.id);
147-
});
148-
}
149-
150-
document.getElementById("topicsList").appendChild(row);
131+
</td>`;
151132
152-
} catch (error) {
153-
console.error("Error fetching topic assignments:", error);
133+
if (!alreadySignedUp) {
134+
row.querySelector("button").addEventListener("click", function () {
135+
signUpForTopic(topic.id);
136+
});
154137
}
138+
139+
document.getElementById("topicsList").appendChild(row);
140+
} catch (error) {
141+
console.error("Error fetching topic assignments:", error);
155142
}
143+
}
156144
157145
async function addTopic() {
158146
let name = document.getElementById("name").value;
@@ -165,22 +153,15 @@ async function addTopic() {
165153
}
166154
167155
let dueDate = formatDateToMMDDYYYY(rawDate);
168-
169156
const url = `${javaURI}/api/assignments/create?name=${encodeURIComponent(name)}&type=teamteach&description=${encodeURIComponent(description)}&points=1.0&dueDate=${encodeURIComponent(dueDate)}`;
170157
171158
try {
172-
let response = await fetch(url, {
173-
method: "POST",
174-
headers: {
175-
"Content-Type": "application/json"
176-
}
177-
});
178-
159+
let response = await fetch(url, { method: "POST", headers: { "Content-Type": "application/json" } });
179160
if (response.ok) {
180161
document.getElementById("name").value = "";
181162
document.getElementById("description").value = "";
182163
document.getElementById("dueDate").value = "";
183-
fetchTopics(); // Refresh list
164+
fetchTopics();
184165
} else {
185166
console.error("Failed to add topic");
186167
}
@@ -189,46 +170,43 @@ async function addTopic() {
189170
}
190171
}
191172
173+
async function signUpForTopic(id) {
174+
if (userId === -1) {
175+
alert("Please login first");
176+
return;
177+
}
192178
193-
async function signUpForTopic(id) {
194-
if (userId === -1) {
195-
alert("Please login first");
196-
return;
197-
}
179+
const data = {
180+
assignmentId: id,
181+
studentIds: [userId],
182+
content: "test",
183+
comment: "",
184+
isLate: false
185+
};
198186
199-
const data = {
200-
assignmentId: id,
201-
studentIds: [userId],
202-
content: "test",
203-
comment: "",
204-
isLate: false
205-
};
206-
207-
try {
208-
let response = await fetch(`${javaURI}/api/submissions/submit/${id}`, {
209-
method: "POST",
210-
headers: {
211-
"Content-Type": "application/json"
212-
},
213-
body: JSON.stringify(data)
214-
});
187+
try {
188+
let response = await fetch(`${javaURI}/api/submissions/submit/${id}`, {
189+
method: "POST",
190+
headers: { "Content-Type": "application/json" },
191+
body: JSON.stringify(data)
192+
});
215193
216-
if (response.ok) {
217-
fetchTopics();
218-
} else {
219-
console.error("Failed to sign up for topic");
220-
alert("Failed to sign up. Please try again.");
221-
}
222-
} catch (error) {
223-
console.error("Error signing up for topic:", error);
224-
alert("Error signing up. Please try again.");
194+
if (response.ok) {
195+
fetchTopics();
196+
} else {
197+
console.error("Failed to sign up for topic");
198+
alert("Failed to sign up. Please try again.");
225199
}
200+
} catch (error) {
201+
console.error("Error signing up for topic:", error);
202+
alert("Error signing up. Please try again.");
226203
}
204+
}
227205
228-
document.addEventListener("DOMContentLoaded", () => {
229-
getUserId();
230-
document.getElementById("addTopicBtn").addEventListener("click", addTopic);
231-
});
206+
document.addEventListener("DOMContentLoaded", () => {
207+
getUserId();
208+
document.getElementById("addTopicBtn").addEventListener("click", addTopic);
209+
});
232210
233211
const tooltip = document.getElementById("tooltip");
234212
@@ -244,15 +222,12 @@ document.addEventListener("mouseover", (e) => {
244222
245223
document.addEventListener("mousemove", (e) => {
246224
if (tooltip.style.opacity === "1") {
247-
// Position tooltip near cursor, with some offset
248225
let x = e.clientX + 15;
249226
let y = e.clientY + 15;
250227
251-
// Prevent tooltip from going off the right edge
252228
if (x + tooltip.offsetWidth > window.innerWidth) {
253229
x = e.clientX - tooltip.offsetWidth - 15;
254230
}
255-
// Prevent tooltip from going off the bottom edge
256231
if (y + tooltip.offsetHeight > window.innerHeight) {
257232
y = e.clientY - tooltip.offsetHeight - 15;
258233
}
@@ -267,6 +242,4 @@ document.addEventListener("mouseout", (e) => {
267242
tooltip.style.opacity = "0";
268243
}
269244
});
270-
271-
272-
</script>
245+
</script>

0 commit comments

Comments
 (0)