Skip to content

Commit

Permalink
Merge pull request #40 from UtrechtUniversity/dev
Browse files Browse the repository at this point in the history 
Dev
  • Loading branch information
@Meefish
Meefish authored Nov 15, 2024
2 parents 34adc62 + 9b1a1ce commit da6c947
Show file tree
Hide file tree
Showing 6 changed files with 85 additions and 57 deletions.
25 changes: 15 additions & 10 deletions src/pages/Dashboard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<div className="dashboard-container" data-testid="dashboard-container">
{/* Navbar */}
Expand Down Expand Up @@ -262,20 +267,20 @@ const Dashboard: React.FC = () => {
>
<thead>
<tr>
<th onClick={() => requestSort('livingLab')}>
LivingLab
<th onClick={() => requestSort('name')}>
Name
<img
src="/assets/vblacksvg.svg"
alt="Sort Icon"
className={`sort-icon ${getSortIconClass('livingLab')}`}
className={`sort-icon ${getSortIconClass('name')}`}
/>
</th>
<th onClick={() => requestSort('name')}>
Name
<th onClick={() => requestSort('livingLab')}>
LivingLab
<img
src="/assets/vblacksvg.svg"
alt="Sort Icon"
className={`sort-icon ${getSortIconClass('name')}`}
className={`sort-icon ${getSortIconClass('livingLab')}`}
/>
</th>
<th onClick={() => requestSort('numberOfQuestionnaires')}>
Expand Down Expand Up @@ -323,14 +328,14 @@ const Dashboard: React.FC = () => {
className={index % 2 === 0 ? 'row-even' : 'row-odd'}
style={{ cursor: 'pointer' }}
>
<td onClick={() => handleExperimentClick(exp)}>
{exp.livingLab?.name || 'All LivingLabs'}
</td>
<td
data-testid="experiment-name"
onClick={() => handleExperimentClick(exp)}
>
{exp.name}
{truncateText(exp.name, 37)}
</td>
<td onClick={() => handleExperimentClick(exp)}>
{exp.livingLab?.name || 'All LivingLabs'}
</td>
<td onClick={() => handleExperimentClick(exp)}>
{exp.numberOfQuestionnaires}
Expand Down
4 changes: 2 additions & 2 deletions src/pages/Experiment.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,7 @@ const Experiment: React.FC = () => {
/>
</div>
<div className="button-content">
<p>Amount: {experiment.numberOfQuestionnaires || 0}</p>
<p>Number of Questionnaires: {experiment.numberOfQuestionnaires || 0}</p>
<p>Responses: {experiment.questionnaireActivity || 0}</p>
</div>
</button>
Expand All @@ -150,7 +150,7 @@ const Experiment: React.FC = () => {
/>
</div>
<div className="button-content">
<p>Amount: {experiment.numberOfMessages || 0}</p>
<p>Number of Messages: {experiment.numberOfMessages || 0}</p>
<p>Sent: {experiment.messageActivity || 0}</p>
</div>
</button>
Expand Down
54 changes: 30 additions & 24 deletions src/pages/MessageDashboard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand All @@ -18,11 +18,11 @@ const MessageDashboard: React.FC = () => {
const { id } = useParams<{ id: string }>();


const [interactionTypes, setInteractionTypes] = useState<InteractionType[]>([]);
const [interactionTypes, setInteractionTypes] = useState<TriggerType[]>([]);
const [messages, setMessages] = useState<Message[]>([]);
const [experiment] = useState<Experiment | null>(null);
const [filteredMessages, setFilteredMessages] = useState<Message[]>([]);
const [selectedInteractionType, setSelectedInteractionType] = useState<string>('All');
const [selectedTriggerType, setSelectedInteractionType] = useState<string>('All');
const [searchQuery, setSearchQuery] = useState<string>('');
const [sortConfig, setSortConfig] = useState<{ key: keyof Message; direction: string } | null>(null);

Expand Down Expand Up @@ -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);

Expand All @@ -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
Expand All @@ -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) => {
Expand Down Expand Up @@ -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 (
<div className="message-dashboard-container" data-testid="message-dashboard-container">
Expand All @@ -160,12 +165,12 @@ const MessageDashboard: React.FC = () => {

{/* Messages Title */}
<h1 className="messages-title" data-testid="messages-title">
Messages for Experiment: {experiment?.name || `Experiment ${id}`}
Messages for Experiment: {truncateText(experiment?.name || `Experiment ${id}`, 35)}
</h1>

{/* Filters Container */}
<div className="message-filters-container" data-testid="filters-container">
{/* InteractionType Filter */}
{/* TriggerType Filter */}
<div className="message-filter interactiontype-filter" data-testid="interactiontype-filter">
<label className="filter-label">Filter by trigger:</label>
<div
Expand All @@ -176,7 +181,7 @@ const MessageDashboard: React.FC = () => {
data-testid="interactiontype-dropdown-button"
onClick={() => setIsDropdownOpen(!isDropdownOpen)}
>
{selectedInteractionType}
{selectedTriggerType}
<img
src="/assets/vsvg.svg"
alt="Dropdown Icon"
Expand Down Expand Up @@ -231,20 +236,20 @@ const MessageDashboard: React.FC = () => {
>
<thead>
<tr>
<th onClick={() => requestSort('trigger')}>
Interaction
<th onClick={() => requestSort('name')}>
Name
<img
src="/assets/vblacksvg.svg"
alt="Sort Icon"
className={`sort-icon ${getSortIconClass('trigger')}`}
className={`sort-icon ${getSortIconClass('name')}`}
/>
</th>
<th onClick={() => requestSort('name')}>
Name
<th onClick={() => requestSort('trigger')}>
Trigger
<img
src="/assets/vblacksvg.svg"
alt="Sort Icon"
className={`sort-icon ${getSortIconClass('name')}`}
className={`sort-icon ${getSortIconClass('trigger')}`}
/>
</th>
<th onClick={() => requestSort('text')}>
Expand Down Expand Up @@ -290,17 +295,18 @@ const MessageDashboard: React.FC = () => {
className={index % 2 === 0 ? 'row-even' : 'row-odd'}
style={{ cursor: 'pointer' }}
>
<td onClick={() => handleMessageClick(msg)}>
{msg.trigger}
</td>
<td
data-testid="message-name"
onClick={() => handleMessageClick(msg)}
>
{msg.name}
{truncateText(msg.name, 20)}
</td>
<td onClick={() => handleMessageClick(msg)}>
{msg.trigger}
</td>

<td onClick={() => handleMessageClick(msg)}>
{msg.text}
{truncateText(msg.text, 12)}
</td>
<td onClick={() => handleMessageClick(msg)}>
{msg.severity}
Expand Down
15 changes: 4 additions & 11 deletions src/pages/Profile.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,18 +8,19 @@ import '../styles/Profile.css';
const Profile: React.FC = () => {
const navigate = useNavigate();
const [user, setUser] = useState<User | null>(null);
const [loading, setLoading] = useState<boolean>(true);
const [isLoading, setIsLoading] = useState<boolean>(true);
const [error, setError] = useState<string>('');

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);
}
};

Expand All @@ -31,14 +32,6 @@ const Profile: React.FC = () => {
navigate('/login'); // Redirect to the login page
};

if (loading) {
return <div>Loading...</div>;
}

if (error) {
return <div>{error}</div>;
}

return (
<div className="profile-page">
{/* Navbar */}
Expand Down
16 changes: 8 additions & 8 deletions src/styles/Experiment.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand All @@ -89,7 +89,7 @@ body {
color: #000;
font-family: 'Roboto', sans-serif;
font-size: 22px;
font-weight: 300;
font-weight: 500;
line-height: normal;
}

Expand Down Expand Up @@ -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);
}
Expand All @@ -137,7 +137,7 @@ body {
color: #000;
font-family: 'Roboto', sans-serif;
font-size: 20px;
font-weight: 300;
font-weight: 500;
line-height: normal;
}

Expand Down Expand Up @@ -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);

Expand All @@ -189,7 +189,7 @@ body {
color: #000;
font-family: 'Roboto', sans-serif;
font-size: 22px;
font-weight: 300;
font-weight: 500;
}

.date-separator {
Expand Down Expand Up @@ -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);

Expand All @@ -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;
Expand Down
28 changes: 26 additions & 2 deletions src/styles/MessageDashboard.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,9 @@
font-family: 'Roboto', sans-serif;
position: relative;
overflow-x: hidden;
min-height: 100%;
display: flex;
flex-direction: column;
}

/* Messages Title */
Expand Down Expand Up @@ -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;
}

Expand Down Expand Up @@ -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;
}

0 comments on commit da6c947

Please sign in to comment.