added code for displaying more than one icon for a resource booking in the booking plan, fixes #1726issue-5869

Closes #1726

Merge request studip/studip!4421

3 files changed, 41 insertions, 13 deletions

diff --git a/lib/models/resources/ResourceBooking.php b/lib/models/resources/ResourceBooking.php
index 5e527d0..805cff0 100644
--- a/lib/models/resources/ResourceBooking.php
+++ b/lib/models/resources/ResourceBooking.php
@@ -1808,10 +1808,18 @@ class ResourceBooking extends SimpleORMap implements PrivacyObject, Studip\Calen
 
             if (!$this->isSimpleBooking()) {
                 if ($this->assigned_course_date->metadate_id) {
-                    $icon = 'refresh';
+                    if ($icon) {
+                        //chat2 icon already set as first icon.
+                        $icon .= ',';
+                    }
+                    $icon .= 'refresh';
                 }
             } elseif ($this->repeat_end > $this->end) {
-                $icon = 'refresh';
+                if ($icon) {
+                    //chat2 icon already set as first icon.
+                    $icon .= ',';
+                }
+                $icon .= 'refresh';
             }
 
             if ($this->assigned_course_date instanceof CourseDate) {
diff --git a/resources/assets/javascripts/lib/fullcalendar.js b/resources/assets/javascripts/lib/fullcalendar.js
index e1174bd..809ac95 100644
--- a/resources/assets/javascripts/lib/fullcalendar.js
+++ b/resources/assets/javascripts/lib/fullcalendar.js
@@ -599,18 +599,24 @@ class Fullcalendar
                 }
 
                 if (event.extendedProps.icon) {
-                    //Check if the icon is already an URL or just the name of an icon.
-                    let iconUrl = '';
-                    if (event.extendedProps.icon.includes('://')) {
-                        //The icon already is an URL.
-                        iconUrl = event.extendedProps.icon;
-                    } else {
-                        //The icon is just referenced by its name. We do not need a specific color here, background-color is currentColor.
-                        iconUrl = `${STUDIP.ASSETS_URL}images/icons/black/${event.extendedProps.icon}.svg`
+                    //Check if there is more than one icon:
+                    let event_icons = event.extendedProps.icon.split(',');
+                    let title = $(eventElement).find('.fc-title');
+                    for (let icon of event_icons) {
+                        //Check if the icon is already a URL or just the name of an icon.
+                        let iconUrl = '';
+                        if (icon.includes('://')) {
+                            //The icon is already a URL.
+                            iconUrl = icon;
+                        } else {
+                            //The icon is just referenced by its name. We do not need a specific color here, background-color is currentColor.
+                            iconUrl = `${STUDIP.ASSETS_URL}images/icons/black/${icon}.svg`
+                        }
+                        //Add the icons as spans in front of the content:
+                        let icon_element = $('<span class="icon"></span>');
+                        icon_element.css('--icon-url', `url('${iconUrl}')`);
+                        title.prepend(icon_element);
                     }
-                    const $title = $(eventElement).find('.fc-title');
-                    $title.addClass('has-icon');
-                    $title.css('--icon-url', `url('${iconUrl}')`);
                 }
             },
             eventSourceSuccess: function(content) {
diff --git a/resources/assets/stylesheets/fullcalendar.scss b/resources/assets/stylesheets/fullcalendar.scss
index 994d761..8edf7b6 100644
--- a/resources/assets/stylesheets/fullcalendar.scss
+++ b/resources/assets/stylesheets/fullcalendar.scss
@@ -9,6 +9,20 @@ a.fc-event, td.fc-event {
         background-color: rgba(255, 255, 255, 0.2);
         font-weight: bold;
     }
+
+    .fc-title .icon {
+        content: '';
+        display: inline-block;
+        vertical-align: text-bottom;
+        margin-right: 3px;
+        width: 12px;
+        height: 12px;
+        mask-size: contain;
+        mask-repeat: no-repeat;
+        mask-position: center;
+        background-color: currentColor;
+        mask-image: var(--icon-url);
+    }
 }
 
 .fc {