✨ Display optional image below the event agenda closes #156

Signed-off-by: Marcus Fihlon <[email protected]>

CHANGELOG.md

@@ -15,6 +15,7 @@ For questions and support requests, please use
 
 * Add configuration option to adjust event dates
 * Add configuration option to hide closed event rooms
+* Display optional image below the event agenda
 
 ### Fixed Bugs
 

README.md

@@ -121,6 +121,7 @@ To modify the default configuration values, just specify environment variables w
 | DOAG_EVENT_API             | [1]     | The URL of the DOAG event API to read the conference agenda.                 |
 | DOAG_EVENT_ID              | 0       | The ID of the DOAG event to read the conference agenda (0 = disabled).       |
 | EVENT_DATE_ADJUST          |         | Adjust the date of the event in days, ISO-8601 formatted (empty = disabled). |
+| EVENT_IMAGE_URL            |         | The URL of the image to be shown below the event agenda (empty = no image).  |
 | EVENT_NEXT_SESSION_TIMEOUT | 60      | Number of minutes a session is shown before it starts (0 = disabled).        |
 | EVENT_SHOW_CLOSED_ROOMS    | true    | Show (true) or hide (false) closed event rooms.                              |
 | EVENT_SHOW_LEGEND          | true    | Show (true) or hide (false) the event room legend.                           |
@@ -177,6 +178,10 @@ The following table contains the CSS variables you can modify to change the user
 | --event-next-session-color     | #eeeeee           | The color for the background of rooms with sessions starting next. |
 | --event-closed-room-color      | #cccccc           | The color for the background of closed rooms.                      |
 | --event-room-border            | 1px solid #909090 | The border for the event room.                                     |
+| --event-image-position-bottom  | 10px              | The position of the optional event image relative to the bottom.   |
+| --event-image-position-left    | 10px              | The position of the optional event image relative to the left.     |
+| --event-image-width            | auto              | The width of the optional event image.                             |
+| --event-image-height           | auto              | The height of the optional event image.                            |
 | --social-background-color      | #e7eaee           | The color for the background of the social wall.                   |
 | --social-title-color           | #262626           | The color for the title of the social wall.                        |
 | --social-text-color            | #262626           | The color for the text of the social wall.                         |

frontend/themes/apus/styles.css

@@ -27,6 +27,12 @@
     --event-width: 870px;
     --event-grid-template-columns: auto auto;
 
+    --event-image-border: none;
+    --event-image-position-bottom: 10px;
+    --event-image-position-left: 10px;
+    --event-image-width: auto;
+    --event-image-height: auto;
+
     --social-background-color: #e7eaee;
     --social-title-color: #262626;
     --social-text-color: #262626;

frontend/themes/apus/views/event-view.css

@@ -55,3 +55,12 @@
     grid-template-columns: var(--event-grid-template-columns);
 }
 
+#event-view #event-image {
+    position: absolute;
+    border-radius: var(--lumo-border-radius-s);
+    border: var(--event-image-border);
+    bottom: var(--event-image-position-bottom);
+    left: var(--event-image-position-left);
+    width: var(--event-image-width);
+    height: var(--event-image-height);
+}

src/main/java/swiss/fihlon/apus/plugin/event/EventConfig.java

@@ -19,4 +19,5 @@
 
 import java.time.Period;
 
-public record EventConfig(Period dateAdjust, int nextSessionTimeout, boolean showClosedRooms, boolean showLegend, int updateFrequency) { }
+public record EventConfig(Period dateAdjust, String image, int nextSessionTimeout, boolean showClosedRooms, boolean showLegend,
+                          int updateFrequency) { }

src/main/java/swiss/fihlon/apus/ui/view/EventView.java

@@ -21,6 +21,7 @@
 import com.vaadin.flow.component.dependency.CssImport;
 import com.vaadin.flow.component.html.Div;
 import com.vaadin.flow.component.html.H2;
+import com.vaadin.flow.component.html.Image;
 import com.vaadin.flow.component.html.Span;
 import com.vaadin.flow.component.notification.Notification;
 import org.jetbrains.annotations.NotNull;
@@ -69,6 +70,11 @@ public EventView(@NotNull final EventService eventService,
         final ScheduledFuture<?> updateScheduler = taskScheduler.scheduleAtFixedRate(
                 this::updateScheduler, Instant.now().plusSeconds(1), UPDATE_FREQUENCY);
         addDetachListener(event -> updateScheduler.cancel(true));
+
+        final var imageUrl = configuration.getEvent().image();
+        if (imageUrl != null && !imageUrl.isBlank()) {
+            add(createImage(imageUrl));
+        }
     }
 
     private void updateScheduler() {
@@ -144,4 +150,11 @@ private RoomView createRoomView(@NotNull final Map.Entry<Room, List<Session>> ro
         }
         return roomView;
     }
+
+    @NotNull
+    private Component createImage(@NotNull final String imageUrl) {
+        final var image = new Image(imageUrl, "Event Image");
+        image.setId("event-image");
+        return image;
+    }
 }

src/main/resources/META-INF/additional-spring-configuration-metadata.json

@@ -30,6 +30,11 @@
       "type": "java.lang.String",
       "description": "Adjust the date of the event in days (empty = disabled)."
     },
+    {
+      "name": "apus.event.image",
+      "type": "java.lang.String",
+      "description": "The URL of the image to be shown below the event agenda (empty = no image)."
+    },
     {
       "name": "apus.event.nextSessionTimeout",
       "type": "java.lang.Integer",

src/main/resources/application.properties

@@ -16,6 +16,7 @@ apus.demo.roomCount=${DEMO_ROOM_COUNT:0}
 apus.doag.eventApi=${DOAG_EVENT_API:https://meine.doag.org/api/event/action.getCPEventAgenda/eventId.%d/}
 apus.doag.eventId=${DOAG_EVENT_ID:0}
 apus.event.dateAdjust=${EVENT_DATE_ADJUST:0}
+apus.event.image=${EVENT_IMAGE_URL:}
 apus.event.nextSessionTimeout=${EVENT_NEXT_SESSION_TIMEOUT:60}
 apus.event.showClosedRooms=${EVENT_SHOW_CLOSED_ROOMS:true}
 apus.event.showLegend=${EVENT_SHOW_LEGEND:true}

src/test/java/swiss/fihlon/apus/plugin/event/EventServiceTest.java

@@ -51,7 +51,7 @@ class EventServiceTest {
     @BeforeAll
     static void mockConfiguration() {
         configurationMock = mock(Configuration.class);
-        when(configurationMock.getEvent()).thenReturn(new EventConfig(null, 60, true, true, 0));
+        when(configurationMock.getEvent()).thenReturn(new EventConfig(null, null, 60, true, true, 0));
     }
 
     @Test

src/test/resources/application.properties

@@ -6,6 +6,7 @@ apus.demo.roomCount=-1
 apus.doag.eventApi=file:src/test/resources/DOAG.json?eventId=%d
 apus.doag.eventId=-1
 apus.event.dateAdjust=
+apus.event.image=
 apus.event.nextSessionTimeout=60
 apus.event.showClosedRooms=true
 apus.event.showLegend=true