Replaced string format with labels

Using string format works but it is a bit 'hacky' therefore i replaced it with labels instead.
That meant i had to wrap the labels so they where added to a container.

Also changed some naming in the css.
This commit is contained in:
Nico Athanassiadis 2025-04-10 12:54:53 +02:00
parent fd93a8bd65
commit db291ebace
3 changed files with 58 additions and 50 deletions
view/src/main
java/se/su/dsv/scipro/supervisor/panels
webapp/css

@ -1,41 +1,44 @@
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns:wicket="http://wicket.apache.org" xmlns="http://www.w3.org/1999/xhtml">
<body>
<wicket:panel>
<div class="calendar-header-bar">
<div class="calendar-nav-wrapper">
<a wicket:id="prevMonth" class="calendar-nav-button"></a>
</div>
<body>
<wicket:panel>
<div class="calendar-header-bar">
<div class="calendar-nav-wrapper">
<a wicket:id="prevMonth" class="calendar-nav-button"></a>
</div>
<div class="calendar-title-wrapper">
<span wicket:id="monthLabel" class="calendar-title"></span>
</div>
<div class="calendar-title-wrapper">
<span wicket:id="monthLabel" class="calendar-title"></span>
</div>
<div class="calendar-nav-wrapper">
<a wicket:id="nextMonth" class="calendar-nav-button"></a>
</div>
</div>
<div class="calendar-nav-wrapper">
<a wicket:id="nextMonth" class="calendar-nav-button"></a>
</div>
</div>
<div wicket:id="calendarBody">
<div class="calendar-grid">
<div class="calendar-header">Mon</div>
<div class="calendar-header">Tue</div>
<div class="calendar-header">Wed</div>
<div class="calendar-header">Thu</div>
<div class="calendar-header">Fri</div>
<div class="calendar-header">Sat</div>
<div class="calendar-header">Sun</div>
<div wicket:id="calendarBody">
<div class="calendar-grid">
<div class="calendar-header">Mon</div>
<div class="calendar-header">Tue</div>
<div class="calendar-header">Wed</div>
<div class="calendar-header">Thu</div>
<div class="calendar-header">Fri</div>
<div class="calendar-header">Sat</div>
<div class="calendar-header">Sun</div>
<wicket:container wicket:id="rows">
<div wicket:id="cells" class="calendar-cell">
<div wicket:id="day-number" class="day-number"></div>
<wicket:container wicket:id="calendar-events">
<span wicket:id="eventLabel"></span>
<wicket:container wicket:id="rows">
<div wicket:id="cells" class="calendar-cell">
<div wicket:id="day-number" class="day-number"></div>
<wicket:container wicket:id="calendar-events">
<div wicket:id="eventContainer">
<div wicket:id="eventLabel"></div>
<div wicket:id="roomLabel"></div>
</div>
</wicket:container>
</div>
</wicket:container>
</div>
</wicket:container>
</div>
</div>
</wicket:panel>
</body>
</html>
</div>
</wicket:panel>
</body>
</html>

@ -18,6 +18,8 @@ import org.apache.wicket.markup.html.list.ListItem;
import org.apache.wicket.markup.html.list.ListView;
import org.apache.wicket.markup.html.panel.Panel;
import org.apache.wicket.markup.repeater.RepeatingView;
import org.apache.wicket.model.IModel;
import org.apache.wicket.model.LoadableDetachableModel;
import se.su.dsv.scipro.firstmeeting.FirstMeetingCalendarEvent;
import se.su.dsv.scipro.firstmeeting.FirstMeetingService;
import se.su.dsv.scipro.session.SciProSession;
@ -77,12 +79,12 @@ public class MyCalendarPanel extends Panel {
add(calendarBody);
renderCalendar(calendarBody);
findCalendarEvents();
}
private void findCalendarEvents() {
private List<FirstMeetingCalendarEvent> findCalendarEvents() {
User user = SciProSession.get().getUser();
List<FirstMeetingCalendarEvent> events = firstMeetingService.findFirstMeetingsBySupervisor(user);
return events;
}
@Override
@ -111,10 +113,7 @@ public class MyCalendarPanel extends Panel {
days.add(date);
}
// List<FirstMeetingCalendarEvent> events = generateSampleEvents(currentMonth);
List<FirstMeetingCalendarEvent> events = firstMeetingService.findFirstMeetingsBySupervisor(
SciProSession.get().getUser()
);
IModel<List<FirstMeetingCalendarEvent>> events = LoadableDetachableModel.of(this::findCalendarEvents);
DayOfWeek firstDayOfWeek = DayOfWeek.MONDAY;
int offset = (firstDayOfMonth.getDayOfWeek().getValue() - firstDayOfWeek.getValue() + 7) % 7;
@ -132,21 +131,27 @@ public class MyCalendarPanel extends Panel {
Label dayLabel = new Label("day-number", String.valueOf(day.getDayOfMonth()));
String dayClass = day.equals(LocalDate.now()) ? "day-number today" : "day-number";
dayLabel.add(new AttributeModifier("class", dayClass));
dayLabel.add(new AttributeModifier("class", dayClass)); // AttributeModifiler.append?
cell.add(dayLabel);
ListView<FirstMeetingCalendarEvent> eventView = new ListView<>(
"calendar-events",
events.stream().filter(event -> event.date().equals(day)).toList()
events.map(eventList -> eventList.stream().filter(event -> event.date().equals(day)).toList())
) {
@Override
protected void populateItem(ListItem<FirstMeetingCalendarEvent> item) {
FirstMeetingCalendarEvent event = item.getModelObject();
Label eventLabel = new Label("eventLabel", String.format("%s<br>%s", event.title(), event.room()));
eventLabel.add(new AttributeModifier("title", String.format("Project: %s", event.projectTitle())));
eventLabel.setEscapeModelStrings(false);
eventLabel.add(new AttributeModifier("class", "calendar-event"));
item.add(eventLabel);
WebMarkupContainer eventContainer = new WebMarkupContainer("eventContainer");
eventContainer.add(new AttributeModifier("class", "calendar-event-container"));
eventContainer.add(new AttributeModifier("title", event.projectTitle()));
Label eventLabel = new Label("eventLabel", event.title());
Label roomLabel = new Label("roomLabel", event.room());
eventContainer.add(eventLabel);
eventContainer.add(roomLabel);
item.add(eventContainer);
}
};

@ -72,7 +72,7 @@
}
/* Event styling */
.calendar-event {
.calendar-event-container {
display: block;
padding: 2px 4px;
font-size: 0.75em;
@ -86,10 +86,10 @@
}
/* Spacing between events */
.calendar-event:first-child {
.calendar-event-container:first-child {
margin-top: 1.5em; /* space below day number */
}
.calendar-event:not(:first-child) {
.calendar-event-container:not(:first-child) {
margin-top: 0.2em;
}