Merge branch 'master' into beta

src/client/app/css/app.css

@@ -1242,18 +1242,33 @@ h6.calendar-week {
 .radio-icons {
     border: 1px solid #ced4da;
     border-radius: .25rem;
-    padding: .375rem .75rem;
+    padding: .375rem .32rem .375rem .75rem;
 }
 .radio-icons p {
     margin: 0;
     font-size: 16px;
     cursor: pointer;
 }
+.radio-icons p .selected-icon {
+    padding-left: 6px;
+}
 .radio-icons p i {
     font-size: 0.65rem;
 }
+.radio-icons p .selected-icon i {
+    font-size: .9rem;
+}
 .radio-icons label {
     width: 65px;
+    display: inline-flex;
+    align-items: center;
+    padding-bottom: 8px;
+}
+.radio-icons label input {
+    margin-right: 6px;
+}
+.radio-icons label i {
+    font-size: 1.2rem;
 }
 .radio-icons-inner {
     display: none;

src/client/app/js/app/state/AppointmentCreate.js

@@ -22,17 +22,36 @@ app.state.AppointmentCreate = function()
             var radioIcons = document.getElementById('radio-icons');
             if (radioIcons) {
                 var toggleButton = radioIcons.querySelector('p');
+                var toggleLabel = toggleButton.querySelector('span');
                 var radioIconsInner = radioIcons.querySelector('.radio-icons-inner');
+                var iconSpan = toggleButton.querySelector('.selected-icon');
+                if (!iconSpan) {
+                    iconSpan = document.createElement('span');
+                    iconSpan.className = 'selected-icon';
+                    toggleLabel.insertBefore(iconSpan, toggleLabel.lastElementChild);
+                }
 
                 if (toggleButton && radioIconsInner) {
                     toggleButton.addEventListener('click', function(event) {
-                        event.stopPropagation(); // Verhindert Bubble-Up zum parent div
+                        event.stopPropagation();
                         if (radioIconsInner.style.display === 'none' || radioIconsInner.style.display === '') {
                             radioIconsInner.style.display = 'block';
                         } else {
                             radioIconsInner.style.display = 'none';
                         }
                     });
+
+                    radioIconsInner.addEventListener('click', function(event) {
+                        if (event.target.tagName === 'INPUT' && event.target.type === 'radio') {
+                            var selectedIcon = event.target.value;
+                            if (selectedIcon) {
+                                iconSpan.innerHTML = '<i class="fas ' + selectedIcon + '"></i>';
+                            } else {
+                                iconSpan.innerHTML = '';
+                            }
+                            radioIconsInner.style.display = 'none';
+                        }
+                    });
                 }
             }
         }

src/client/app/js/app/state/AppointmentEdit.js

@@ -27,17 +27,36 @@ app.state.AppointmentEdit= function()
             var radioIcons = document.getElementById('radio-icons');
             if (radioIcons) {
                 var toggleButton = radioIcons.querySelector('p');
+                var toggleLabel = toggleButton.querySelector('span');
                 var radioIconsInner = radioIcons.querySelector('.radio-icons-inner');
+                var iconSpan = toggleButton.querySelector('.selected-icon');
+                if (!iconSpan) {
+                    iconSpan = document.createElement('span');
+                    iconSpan.className = 'selected-icon';
+                    toggleLabel.insertBefore(iconSpan, toggleLabel.lastElementChild);
+                }
 
                 if (toggleButton && radioIconsInner) {
                     toggleButton.addEventListener('click', function(event) {
-                        event.stopPropagation(); // Verhindert Bubble-Up zum parent div
+                        event.stopPropagation();
                         if (radioIconsInner.style.display === 'none' || radioIconsInner.style.display === '') {
                             radioIconsInner.style.display = 'block';
                         } else {
                             radioIconsInner.style.display = 'none';
                         }
                     });
+
+                    radioIconsInner.addEventListener('click', function(event) {
+                        if (event.target.tagName === 'INPUT' && event.target.type === 'radio') {
+                            var selectedIcon = event.target.value;
+                            if (selectedIcon) {
+                                iconSpan.innerHTML = '<i class="fas ' + selectedIcon + '"></i>';
+                            } else {
+                                iconSpan.innerHTML = '';
+                            }
+                            radioIconsInner.style.display = 'none';
+                        }
+                    });
                 }
             }
         }

src/client/app/tmpl/appointment-form-edit.html

@@ -27,7 +27,7 @@
                             <div class="col">
                                 <div class="radio-icons" id="radio-icons">
                                     <p class="d-flex justify-content-between align-items-center">
-                                        <%= _lc( 'APPOINTMENT_ICON' ) %>
+                                        <span><%= _lc( 'APPOINTMENT_ICON' ) %><span class="selected-icon"><i class="fas <%= a.getIcon() %>"></i></span></span>
                                         <i class="fas fa-chevron-down"></i>
                                     </p>
                                     <div class="radio-icons-inner">
@@ -251,9 +251,9 @@
                                             <input type="radio" <%= a.getIcon() === "fa-handshake" ? 'checked' : '' %> value="fa-handshake" name="categoryicon" id="input-subject-icon-handshake" />
                                             <i class="fas fa-handshake"></i>
                                         </label>
-                                        <label for="input-subject-icon-hand-holding-usc">
-                                            <input type="radio" <%= a.getIcon() === "fa-hand-holding-usc" ? 'checked' : '' %> value="fa-hand-holding-usc" name="categoryicon" id="input-subject-icon-hand-holding-usc" />
-                                            <i class="fas fa-hand-holding-usc"></i>
+                                        <label for="input-subject-icon-hand-holding-usd">
+                                            <input type="radio" <%= a.getIcon() === "fa-hand-holding-usd" ? 'checked' : '' %> value="fa-hand-holding-usd" name="categoryicon" id="input-subject-icon-hand-holding-usd" />
+                                            <i class="fas fa-hand-holding-usd"></i>
                                         </label>
                                         <label for="input-subject-icon-hand-holding-medical">
                                             <input type="radio" <%= a.getIcon() === "fa-hand-holding-medical" ? 'checked' : '' %> value="fa-hand-holding-medical" name="categoryicon" id="input-subject-icon-hand-holding-medical" />

src/client/app/tmpl/appointment-form.html

@@ -41,7 +41,7 @@
                         <div class="col">
                             <div class="radio-icons" id="radio-icons">
                                 <p class="d-flex justify-content-between align-items-center">
-                                    <%= _lc( 'APPOINTMENT_ICON' ) %>
+                                    <span><%= _lc( 'APPOINTMENT_ICON' ) %></span>
                                     <i class="fas fa-chevron-down"></i>
                                 </p>
                                 <div class="radio-icons-inner">
@@ -265,9 +265,9 @@
                                         <input type="radio" value="fa-handshake" name="categoryicon" id="input-subject-icon-handshake" />
                                         <i class="fas fa-handshake"></i>
                                     </label>
-                                    <label for="input-subject-icon-hand-holding-usc">
-                                        <input type="radio" value="fa-hand-holding-usc" name="categoryicon" id="input-subject-icon-hand-holding-usc" />
-                                        <i class="fas fa-hand-holding-usc"></i>
+                                    <label for="input-subject-icon-hand-holding-usd">
+                                        <input type="radio" value="fa-hand-holding-usd" name="categoryicon" id="input-subject-icon-hand-holding-usd" />
+                                        <i class="fas fa-hand-holding-usd"></i>
                                     </label>
                                     <label for="input-subject-icon-hand-holding-medical">
                                         <input type="radio" value="fa-hand-holding-medical" name="categoryicon" id="input-subject-icon-hand-holding-medical" />