Skip to content

Commit

Permalink
merge with wen
Browse files Browse the repository at this point in the history
  • Loading branch information
@kirigayaxy
kirigayaxy committed Nov 27, 2024
2 parents 60b4a35 + 0c457d5 commit 43ac989
Show file tree
Hide file tree
Showing 9 changed files with 413 additions and 135 deletions.
176 changes: 110 additions & 66 deletions frontend/src/Rating.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,10 @@ import { useState, useEffect } from 'react';
import Axios from 'axios';

const Rating = () => {
const [TeamName, setTeamname] = useState('');
const [UserName, setUsername] = useState('');
const [teams, setTeams] = useState([]);
const [users, setUsers] = useState([]);
const [selectedTeam, setSelectedTeam] = useState('');
const [selectedUser, setSelectedUser] = useState('');
const [RatingValue, setRatingValue] = useState('');
const [Comment, setComment] = useState('');
const [errorMessage, setErrorMessage] = useState('');
Expand All @@ -16,8 +18,35 @@ const Rating = () => {
} else {
console.warn('UserID not found in localStorage');
}

const fetchTeams = async () => {
try {
const response = await Axios.get('http://localhost:3000/team');
setTeams(response.data);
} catch (error) {
console.error('Error fetching teams:', error);
}
};

fetchTeams();
}, []);

useEffect(() => {
const fetchUsers = async () => {
if (selectedTeam) {
try {
const response = await Axios.get(`http://localhost:3000/team/users/${selectedTeam}`);
setUsers(response.data);
} catch (error) {
console.error('Error fetching users:', error);
}
}
console.log(selectedTeam)
};

fetchUsers();
}, [selectedTeam]);

const addrating = async () => {
try {
if (!UserID) {
Expand All @@ -30,73 +59,78 @@ const Rating = () => {
return;
}

// ดึง UserID จาก Username ที่กรอก
const userResponse = await Axios.get(`http://localhost:3000/user/UserID`, {
params: { username: UserName },
// Fetch TeamID from TeamName
const teamResponse = await Axios.get(`http://localhost:3000/team/getTeam`, {
params: { TeamID: selectedTeam },
});

const ratedUserID = userResponse.data.userID;
const TeamID = teamResponse.data.TeamID;

if (!TeamID) {
setErrorMessage('ไม่พบ TeamID ของทีมนี้');
return;
}

// // Store TeamID in local storage
// localStorage.setItem('TeamID', TeamID);

// Fetch UserID from Username
const userResponse = await Axios.get(`http://localhost:3000/user/getUserID/${selectedUser}`);

console.log(userResponse.data);


const ratedUserID = userResponse.data.UserID;

if (!ratedUserID) {
setErrorMessage('ไม่พบ UserID ของ Username นี้');
return;
}

// ตรวจสอบว่า UserID ของ Username ที่กรอกอยู่ในทีมมั้ย
const checkTeam = await Axios.post(`http://localhost:3000/team`, {
teamname: TeamName,
userid: ratedUserID, // ตรวจสอบ UserID นี้ในทีม
// Check if the user is part of the team
const checkTeam = await Axios.get(`http://localhost:3000/team/checkteam`, {
params: {
TeamID: TeamID,
UserID: ratedUserID,
},
});

if (!checkTeam.data.valid) {
setErrorMessage('คุณไม่ได้อยู่ทีมเดียวกัน กรุณาลองใหม่อีกครั้ง');
return;
}

// เพิ่ม ratedUserID ลงในตาราง userteam
await Axios.post(
`http://localhost:3000/userteam`,
{
teamname: TeamName,
ratedUserID, // UserID ของผู้ที่ได้รับคะแนน
rateByID: UserID, // UserID ของผู้ให้คะแนน
},
{
headers: {
Authorization: `Bearer ${localStorage.getItem('token')}`,
console.log(UserID)
console.log(ratedUserID)
console.log(RatingValue)
console.log(Comment)

// Add rating
// Add rating
await Axios.post(`http://localhost:3000/rating/rateuser`, {
ratedByID: UserID,
ratedUserID: ratedUserID,
ratingValue: RatingValue,
comment: Comment,
},
}
);

// add คะแนนลง userrating
await Axios.post(
`http://localhost:3000/userrating`,
{
TeamName,
UserName,
RatingValue: parseInt(RatingValue),
Comment,
ratedUserID,
rateByID: UserID,
},
{
headers: {
Authorization: `Bearer ${localStorage.getItem('token')}`,
},
}
);

// รีเซ็ตฟอร์ม
setTeamname('');
setUsername('');
setRatingValue('');
setComment('');
setErrorMessage('');
alert('บันทึกคะแนนสำเร็จ');
} catch (error) {
console.error('Error:', error);
setErrorMessage('เกิดข้อผิดพลาดในการบันทึกข้อมูล');
}
{
headers: {
Authorization: `Bearer ${localStorage.getItem('token')}`,
},
}
);

// Reset form
setSelectedTeam('');
setSelectedUser('');
setRatingValue('');
setComment('');
setErrorMessage('');
alert('บันทึกคะแนนสำเร็จ');
} catch (error) {
console.error('Error:', error);
setErrorMessage('เกิดข้อผิดพลาดในการบันทึกข้อมูล');
}
};

return (
Expand All @@ -108,20 +142,30 @@ const Rating = () => {

<div className="p-6 space-y-6">
<div className="space-y-4">
<input
type="text"
placeholder="Enter Team Name"
value={TeamName}
onChange={(event) => setTeamname(event.target.value)}
<select
value={selectedTeam}
onChange={(event) => setSelectedTeam(event.target.value)}
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
<input
type="text"
placeholder="Enter Username"
value={UserName}
onChange={(event) => setUsername(event.target.value)}
>
<option value="" disabled>Select Team</option>
{teams.map((team) => (
<option key={team.TeamID} value={team.TeamID}>
{team.TeamName}
</option>
))}
</select>
<select
value={selectedUser}
onChange={(event) => setSelectedUser(event.target.value)}
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
>
<option value="" disabled>Select User</option>
{users.map((user) => (
<option key={user.UserID} value={user.UserID}>
{user.UserName}
</option>
))}
</select>
<input
type="number"
placeholder="Enter a score as an integer from 1 to 5"
Expand Down Expand Up @@ -152,4 +196,4 @@ const Rating = () => {
);
};

export default Rating;
export default Rating;
2 changes: 1 addition & 1 deletion frontend/src/Swipe.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,7 @@ const Swipe = () => {
const rotation = dragDelta.x / 20;

return (
<div className="min-h-screen bg-gray-100">
<div className="min-h-screen bg-blue-200 bg-opacity-75">
{/* Header */}
<div className="bg-blue-900 text-white p-4">
<div className="max-w-4xl mx-auto flex justify-between items-center">
Expand Down
101 changes: 57 additions & 44 deletions frontend/src/components/ChatBox.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import { useState, useEffect } from 'react';
import axios from 'axios';

const ChatBox = ({ activeUser, messages, handleSendMessage }) => {

const UserID = localStorage.getItem('UserID');
const [senderImage, setSenderImage] = useState(null);
const [newMessage, setNewMessage] = useState('');
Expand Down Expand Up @@ -34,69 +33,84 @@ const ChatBox = ({ activeUser, messages, handleSendMessage }) => {

if (!activeUser) {
return (
<div className="flex-1 flex items-center justify-center bg-gray-50">
<p className="text-gray-500">Select a chat to start messaging</p>
<div className="flex-1 flex items-center justify-center bg-gradient-to-br from-gray-50 to-gray-100 min-h-screen">
<div className="bg-white p-8 rounded-xl shadow-lg transform hover:scale-105 transition-transform duration-300 ease-in-out">
<p className="text-gray-500 text-lg font-medium text-center">
Select a chat to start messaging
</p>
</div>
</div>
);
}

return (
<div className="flex-1 flex flex-col bg-gray-50 pt-16">
<div className="flex-1 flex flex-col bg-gradient-to-br from-gray-50 to-gray-100 min-h-screen mt-16">
{/* Chat Header */}
<div className="p-4 border-b bg-white">
<h2 className="text-lg font-bold text-black">{activeUser.UserName}</h2>
<div className="p-4 border-b bg-white shadow-sm sticky top-0 z-10 transform transition-all duration-300 hover:shadow-md">
<div className="flex items-center">
<img
src={activeUser.ProfileImage}
alt={activeUser.UserName}
className="w-10 h-10 rounded-full mr-4 border-2 border-blue-500 transform transition-transform duration-300 hover:scale-110"
/>
<h2 className="text-lg font-bold text-black hover:text-blue-600 transition-colors duration-300">
{activeUser.UserName}
</h2>
</div>
</div>

{/* Chat Messages */}
<div className="flex-1 p-4 overflow-y-auto">
<div className="flex flex-col">
{messages.map((msg) => (
<div key={msg.MessageID} className="flex items-start mb-2">
{msg.SenderID === activeUser.UserID ? (
<>
<div className="flex-1 flex justify-start">
<img
src={activeUser.ProfileImage}
alt={activeUser.UserName}
className="w-8 h-8 rounded-full mr-2"
/>
<div className="p-2 rounded-md bg-gray-200 text-black max-w-xs">
{msg.MessageContent}
<div className="flex-1 p-4 overflow-y-auto">
<div className="flex flex-col space-y-4">
{messages.map((msg) => (
<div
key={msg.MessageID}
className="flex items-start transition-all duration-300 hover:bg-gray-100 p-2 rounded-lg"
>
{msg.SenderID === activeUser.UserID ? (
<div className="flex-1 flex justify-start items-center">
<img
src={activeUser.ProfileImage}
alt={activeUser.UserName}
className="w-10 h-10 rounded-full mr-3 transform transition-transform duration-300 hover:scale-110"
/>
<div className="p-3 rounded-xl bg-gray-200 text-black max-w-xs shadow-sm transition-all duration-300 hover:shadow-md">
{msg.MessageContent}
</div>
</div>
</div>
</>
) : (
<>
<div className="flex-1 flex justify-end">
<div className="p-2 rounded-md bg-blue-100 text-black max-w-xs">
{msg.MessageContent}
) : (
<div className="flex-1 flex justify-end items-center">
<div className="p-3 rounded-xl bg-blue-100 text-black max-w-xs mr-3 shadow-sm transition-all duration-300 hover:shadow-md">
{msg.MessageContent}
</div>
<img
src={senderImage}
alt="Sender"
className="w-10 h-10 rounded-full transform transition-transform duration-300 hover:scale-110"
/>
</div>
<img
src={senderImage}
alt={senderImage}
className="w-8 h-8 rounded-full ml-2"
/>
</div>
</>
)}
</div>
))}
</div>
)}
</div>
))}
</div>
</div>

{/* Message Input */}
<div className="p-4 bg-white border-t">
<form onSubmit={handleSubmit} className="p-4 bg-white border-t flex gap-2">
{/* Message Input */}
<div className="p-4 bg-white border-t shadow-inner">
<form
onSubmit={handleSubmit}
className="flex items-center space-x-2"
>
<input
type="text"
value={newMessage}
onChange={(e) => setNewMessage(e.target.value)}
placeholder="Type a message..."
className="w-full border rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
className="w-full border rounded-full p-3 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all duration-300 hover:shadow-md"
/>
<button
type="submit"
className="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600"
className="bg-blue-500 text-white px-6 py-3 rounded-full hover:bg-blue-600 transition-all duration-300 transform hover:scale-105 hover:shadow-lg"
>
Send
</button>
Expand All @@ -111,7 +125,6 @@ ChatBox.propTypes = {
UserID: PropTypes.string.isRequired,
UserName: PropTypes.string.isRequired,
ProfileImage: PropTypes.string.isRequired,
MessageContent: PropTypes.string.isRequired,
}),
messages: PropTypes.arrayOf(
PropTypes.shape({
Expand Down
Loading

0 comments on commit 43ac989

Please sign in to comment.