diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx index 02ee14f..76e8d0a 100644 --- a/src/pages/Dashboard.tsx +++ b/src/pages/Dashboard.tsx @@ -160,6 +160,11 @@ const Dashboard: React.FC = () => { navigate(`/experiment/${experiment.ID}`, { state: { experiment } }); }; + const truncateText = (text: string, maxLength: number): string => { + if (text.length <= maxLength) return text; + return text.substring(0, maxLength) + '...'; + }; + return (
{/* Navbar */} @@ -262,20 +267,20 @@ const Dashboard: React.FC = () => { > - requestSort('livingLab')}> - LivingLab + requestSort('name')}> + Name Sort Icon - requestSort('name')}> - Name + requestSort('livingLab')}> + LivingLab Sort Icon requestSort('numberOfQuestionnaires')}> @@ -323,14 +328,14 @@ const Dashboard: React.FC = () => { className={index % 2 === 0 ? 'row-even' : 'row-odd'} style={{ cursor: 'pointer' }} > - handleExperimentClick(exp)}> - {exp.livingLab?.name || 'All LivingLabs'} - handleExperimentClick(exp)} > - {exp.name} + {truncateText(exp.name, 37)} + + handleExperimentClick(exp)}> + {exp.livingLab?.name || 'All LivingLabs'} handleExperimentClick(exp)}> {exp.numberOfQuestionnaires} diff --git a/src/pages/Experiment.tsx b/src/pages/Experiment.tsx index c39c96a..deae60b 100644 --- a/src/pages/Experiment.tsx +++ b/src/pages/Experiment.tsx @@ -131,7 +131,7 @@ const Experiment: React.FC = () => { />
-

Amount: {experiment.numberOfQuestionnaires || 0}

+

Number of Questionnaires: {experiment.numberOfQuestionnaires || 0}

Responses: {experiment.questionnaireActivity || 0}

@@ -150,7 +150,7 @@ const Experiment: React.FC = () => { />
-

Amount: {experiment.numberOfMessages || 0}

+

Number of Messages: {experiment.numberOfMessages || 0}

Sent: {experiment.messageActivity || 0}

diff --git a/src/pages/MessageDashboard.tsx b/src/pages/MessageDashboard.tsx index e9b0858..2e7a1fc 100644 --- a/src/pages/MessageDashboard.tsx +++ b/src/pages/MessageDashboard.tsx @@ -8,7 +8,7 @@ import { getMessagesByExperimentID } from '../services/messageService'; import { Message } from '../types/message'; import { Experiment } from '../types/experiment'; -interface InteractionType { +interface TriggerType { ID: string; name: string; } @@ -18,11 +18,11 @@ const MessageDashboard: React.FC = () => { const { id } = useParams<{ id: string }>(); - const [interactionTypes, setInteractionTypes] = useState([]); + const [interactionTypes, setInteractionTypes] = useState([]); const [messages, setMessages] = useState([]); const [experiment] = useState(null); const [filteredMessages, setFilteredMessages] = useState([]); - const [selectedInteractionType, setSelectedInteractionType] = useState('All'); + const [selectedTriggerType, setSelectedInteractionType] = useState('All'); const [searchQuery, setSearchQuery] = useState(''); const [sortConfig, setSortConfig] = useState<{ key: keyof Message; direction: string } | null>(null); @@ -69,13 +69,13 @@ const MessageDashboard: React.FC = () => { name: type, })); - // Include 'All InteractionTypes' as default option - const allInteractionTypesOption: InteractionType = { + // Include 'All TriggernTypes' as default option + const allTriggerTypesOption: TriggerType = { ID: 'all', name: 'All', }; - setInteractionTypes([allInteractionTypesOption, ...interactionTypesData]); + setInteractionTypes([allTriggerTypesOption, ...interactionTypesData]); setFilteredMessages(messages); @@ -94,9 +94,9 @@ const MessageDashboard: React.FC = () => { useEffect(() => { let filtered = [...messages]; - // Filter by InteractionType - if (selectedInteractionType !== 'All') { - filtered = filtered.filter((msg: Message) => msg.trigger === selectedInteractionType); + // Filter by TriggerType + if (selectedTriggerType !== 'All') { + filtered = filtered.filter((msg: Message) => msg.trigger === selectedTriggerType); } // Filter by search query @@ -123,7 +123,7 @@ const MessageDashboard: React.FC = () => { } setFilteredMessages(filtered); - }, [selectedInteractionType, searchQuery, sortConfig, messages]); + }, [selectedTriggerType, searchQuery, sortConfig, messages]); // Handle sorting const requestSort = (key: keyof Message) => { @@ -152,6 +152,11 @@ const MessageDashboard: React.FC = () => { navigate(`/message/${message.answerID}`, { state: { message } }); }; + // Function to truncate text to a specified length + const truncateText = (text: string, maxLength: number): string => { + if (text.length <= maxLength) return text; + return text.substring(0, maxLength) + '...'; + }; return (
@@ -160,12 +165,12 @@ const MessageDashboard: React.FC = () => { {/* Messages Title */}

- Messages for Experiment: {experiment?.name || `Experiment ${id}`} + Messages for Experiment: {truncateText(experiment?.name || `Experiment ${id}`, 35)}

{/* Filters Container */}
- {/* InteractionType Filter */} + {/* TriggerType Filter */}
{ data-testid="interactiontype-dropdown-button" onClick={() => setIsDropdownOpen(!isDropdownOpen)} > - {selectedInteractionType} + {selectedTriggerType} Dropdown Icon { > - requestSort('trigger')}> - Interaction + requestSort('name')}> + Name Sort Icon - requestSort('name')}> - Name + requestSort('trigger')}> + Trigger Sort Icon requestSort('text')}> @@ -290,17 +295,18 @@ const MessageDashboard: React.FC = () => { className={index % 2 === 0 ? 'row-even' : 'row-odd'} style={{ cursor: 'pointer' }} > - handleMessageClick(msg)}> - {msg.trigger} - handleMessageClick(msg)} > - {msg.name} + {truncateText(msg.name, 20)} + + handleMessageClick(msg)}> + {msg.trigger} + handleMessageClick(msg)}> - {msg.text} + {truncateText(msg.text, 12)} handleMessageClick(msg)}> {msg.severity} diff --git a/src/pages/Profile.tsx b/src/pages/Profile.tsx index b671dd7..07fc286 100644 --- a/src/pages/Profile.tsx +++ b/src/pages/Profile.tsx @@ -8,18 +8,19 @@ import '../styles/Profile.css'; const Profile: React.FC = () => { const navigate = useNavigate(); const [user, setUser] = useState(null); - const [loading, setLoading] = useState(true); + const [isLoading, setIsLoading] = useState(true); const [error, setError] = useState(''); useEffect(() => { const fetchProfile = async () => { try { + setIsLoading(true); const profile = await getMyProfile(); setUser(profile); + setIsLoading(false); } catch (err) { setError('Failed to load profile.'); - } finally { - setLoading(false); + setIsLoading(false); } }; @@ -31,14 +32,6 @@ const Profile: React.FC = () => { navigate('/login'); // Redirect to the login page }; - if (loading) { - return
Loading...
; - } - - if (error) { - return
{error}
; - } - return (
{/* Navbar */} diff --git a/src/styles/Experiment.css b/src/styles/Experiment.css index 8d30590..5ad50ea 100644 --- a/src/styles/Experiment.css +++ b/src/styles/Experiment.css @@ -77,7 +77,7 @@ body { height: 56px; border-radius: 12px; - border: 3px solid rgba(0, 0, 0, 0.25); + border: 3px solid rgba(0, 0, 0, 0.651); background: rgba(196, 196, 196, 0); box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25); } @@ -89,7 +89,7 @@ body { color: #000; font-family: 'Roboto', sans-serif; font-size: 22px; - font-weight: 300; + font-weight: 500; line-height: normal; } @@ -124,7 +124,7 @@ body { height: 136px; border-radius: 12px; - border: 3px solid rgba(0, 0, 0, 0.25); + border: 3px solid rgba(0, 0, 0, 0.651); background: rgba(196, 196, 196, 0); box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25); } @@ -137,7 +137,7 @@ body { color: #000; font-family: 'Roboto', sans-serif; font-size: 20px; - font-weight: 300; + font-weight: 500; line-height: normal; } @@ -178,7 +178,7 @@ body { height: 48px; border-radius: 12px; - border: 3px solid rgba(0, 0, 0, 0.25); + border: 3px solid rgba(0, 0, 0, 0.651); background: rgba(196, 196, 196, 0); box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25); @@ -189,7 +189,7 @@ body { color: #000; font-family: 'Roboto', sans-serif; font-size: 22px; - font-weight: 300; + font-weight: 500; } .date-separator { @@ -230,7 +230,7 @@ body { height: 48px; border-radius: 12px; - border: 3px solid rgba(0, 0, 0, 0.25); + border: 3px solid rgba(0, 0, 0, 0.651); background: rgba(196, 196, 196, 0); box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25); @@ -245,7 +245,7 @@ body { color: #000; font-family: 'Roboto', sans-serif; font-size: clamp(16px, 5vw, 25px); - font-weight: 300; + font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; diff --git a/src/styles/MessageDashboard.css b/src/styles/MessageDashboard.css index dfe55d3..bb8b3eb 100644 --- a/src/styles/MessageDashboard.css +++ b/src/styles/MessageDashboard.css @@ -3,6 +3,9 @@ font-family: 'Roboto', sans-serif; position: relative; overflow-x: hidden; + min-height: 100%; + display: flex; + flex-direction: column; } /* Messages Title */ @@ -146,9 +149,11 @@ /* Table Container */ .message-table-container { margin-top: 20px; - margin-left: 5%; - margin-right: 5%; + margin-left: 2%; + margin-right: 2%; overflow-x: auto; + overflow-y: auto; /* Enables vertical scrolling */ + max-height: calc(100vh - 180px); /* Set desired maximum height */ user-select: none; } @@ -254,3 +259,22 @@ 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } + +/* Scrollbar Styling (Optional) */ +.message-table-container::-webkit-scrollbar { + width: 8px; +} + +.message-table-container::-webkit-scrollbar-track { + background: #f1f1f1; + border-radius: 4px; +} + +.message-table-container::-webkit-scrollbar-thumb { + background: #888; + border-radius: 4px; +} + +.message-table-container::-webkit-scrollbar-thumb:hover { + background: #555; +} \ No newline at end of file