navi back to top - icons as radios and clickable

src/client/app/css/app.css

@@ -81,14 +81,14 @@ body.body-content {
 }
 
 .content {
-    /*margin-top: 72px;*/
-    margin-top: 20px;
-    margin-bottom: 20px;
+    margin-top: 72px;
+    /*margin-top: 20px;
+    margin-bottom: 20px;*/
 }
-.dropdown-menu {
+/*.dropdown-menu {
     top: auto;
     bottom: 100%;
-}
+}*/
 
 .c-offcanvas--right {
     z-index: 1080;
@@ -465,8 +465,8 @@ body.body-auth .action-button {
     position: fixed;
     -webkit-transform: translate3d(0,0,0);
     transform: translate3d(0,0,0);
-    /*bottom: 20px;*/
-    bottom: 76px;
+    bottom: 20px;
+    /*bottom: 76px;*/
     right: 20px;
     text-align: center;
     font-size: 20px;
@@ -481,7 +481,7 @@ body.body-auth .action-button {
     z-index: 100;
     box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
     overflow: auto;
-    max-height: calc(100% - 85px);
+    max-height: calc(100vh - 85px);
 }
 
 .action-list {
@@ -494,11 +494,13 @@ body.body-auth .action-button {
     right: 0;
     opacity: 0;
     background-color: #fff;
+    max-height: calc(100vh - 85px);
 }
 
 .action-list-item {
     padding: 20px;
     white-space: nowrap;
+    background-color: #fff;
 }
 .action-list-item a {
     text-decoration: none;
@@ -1235,4 +1237,24 @@ h6.calendar-week {
 .btn-primary.disabled, .btn-primary:disabled {
     background-color: #2B2D42;
     border-color: #2B2D42;
+}
+
+.radio-icons {
+    border: 1px solid #ced4da;
+    border-radius: .25rem;
+    padding: .375rem .75rem;
+}
+.radio-icons p {
+    margin: 0;
+    cursor: pointer;
+}
+.radio-icons p i {
+    font-size: 0.65rem;
+}
+.radio-icons label {
+    width: 65px;
+}
+.radio-icons-inner {
+    display: none;
+    padding-top: 1rem;
 }

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

@@ -18,6 +18,25 @@ app.state.AppointmentCreate = function()
 
         $content = app.core.View.getContent();
 
+        function radioIcons() {
+            var radioIcons = document.getElementById('radio-icons');
+            if (radioIcons) {
+                var toggleButton = radioIcons.querySelector('p');
+                var radioIconsInner = radioIcons.querySelector('.radio-icons-inner');
+
+                if (toggleButton && radioIconsInner) {
+                    toggleButton.addEventListener('click', function(event) {
+                        event.stopPropagation(); // Verhindert Bubble-Up zum parent div
+                        if (radioIconsInner.style.display === 'none' || radioIconsInner.style.display === '') {
+                            radioIconsInner.style.display = 'block';
+                        } else {
+                            radioIconsInner.style.display = 'none';
+                        }
+                    });
+                }
+            }
+        }
+
         function checkCategories()
         {
             var teamId = $content.find( '[data-id="select-team-id"]' ).first().val(),
@@ -162,6 +181,8 @@ app.state.AppointmentCreate = function()
                             app.core.View.getTemplate( 'appointment-form', { teams : res.teams, groups : groups, currentProfile : app.model.SessionUser.getUserProfile() } )
                         );
 
+                        radioIcons();
+
                         activeGroupId = $content.find( '[data-id="select-team-id"]' ).first().val();
 
                         $content.find( '[data-id="input-subject"]' ).first().autocomplete({
@@ -192,7 +213,7 @@ app.state.AppointmentCreate = function()
                             {
                                 app.gui.PageLoader.show();
                                 teamId = $form.find( '[data-id="select-team-id"]' ).first().val();
-                                icon = $('#input-subject-icon option:selected').val();
+                                icon = $('input[name="categoryicon"]:checked').val();
 
                                 //console.log(icon);
                                 app.core.Rpc.call(

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

@@ -23,6 +23,25 @@ app.state.AppointmentEdit= function()
 
         $content = app.core.View.getContent();
 
+        function radioIcons() {
+            var radioIcons = document.getElementById('radio-icons');
+            if (radioIcons) {
+                var toggleButton = radioIcons.querySelector('p');
+                var radioIconsInner = radioIcons.querySelector('.radio-icons-inner');
+
+                if (toggleButton && radioIconsInner) {
+                    toggleButton.addEventListener('click', function(event) {
+                        event.stopPropagation(); // Verhindert Bubble-Up zum parent div
+                        if (radioIconsInner.style.display === 'none' || radioIconsInner.style.display === '') {
+                            radioIconsInner.style.display = 'block';
+                        } else {
+                            radioIconsInner.style.display = 'none';
+                        }
+                    });
+                }
+            }
+        }
+
         function autocompleteSubjectLookup()
         {
             return acData.hasOwnProperty( 'subjects_' + group.getId() ) ? acData[ 'subjects_' + group.getId() ] : [];
@@ -138,6 +157,8 @@ app.state.AppointmentEdit= function()
                                     )
                                 );
 
+                                radioIcons();
+
                                 $content.find( '[data-id="input-subject"]' ).first().autocomplete( {
                                     lookup: autocompleteSubjectLookup()
                                 });
@@ -168,7 +189,7 @@ app.state.AppointmentEdit= function()
                                             'Appointment',
                                             'update',
                                             {
-                                                icon: $('#input-subject-icon option:selected').val(),
+                                                icon: $('input[name="categoryicon"]:checked').val(),
                                                 processSerial : isSerial,
                                                 appointmentId : appointmentId,
                                                 categoryIds : $form.find( '[data-id="select-category-' + appointment.getTeamId() + '"]' ).first().val(),

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

@@ -22,29 +22,403 @@
                            name="team-id"
                            data-id="select-team-id"
                            value="<%= mTeam.getId() %>" />
-
                     <div class="form-group">
                         <div class="form-row">
-                            <div class="col col-2">
-                                <label for="input-subject-icon">
-                                    <%= _lc( 'APPOINTMENT_ICON' ) %>
-                                </label>
-                                <select class="form-control" name="categoryicon" id="input-subject-icon">
-                                    <option value="" <%= a.getIcon() === "" ? 'selected' : '' %>>- kein -</option>
-                                    <option value="&#9880;" <%= a.getIcon() === "❀" ? 'selected' : '' %>>&#9880;</option>
-                                    <option value="&#9873;" <%= a.getIcon() === "⚑" ? 'selected' : '' %>>&#9873;</option>
-                                    <option value="&cross;" <%= a.getIcon() === "✗" ? 'selected' : '' %>>&cross;</option>
-                                    <option value="&#10025;" <%= a.getIcon() === "✩" ? 'selected' : '' %>>&#10025;</option>
-                                    <option value="&#10045;" <%= a.getIcon() === "✽" ? 'selected' : '' %>>&#10045;</option>
-                                    <option value="&#10084;" <%= a.getIcon() === "❤" ? 'selected' : '' %>>&#10084;</option>
-                                    <option value="&#10132;" <%= a.getIcon() === "➔" ? 'selected' : '' %>>&#10132;</option>
-                                    <option value="&#9881;" <%= a.getIcon() === "⚙" ? 'selected' : '' %>>&#9881;</option>
-                                    <option value="&#9863;" <%= a.getIcon() === "⚇" ? 'selected' : '' %>>&#9863;</option>
-                                    <option value="&#9788;" <%= a.getIcon() === "☼" ? 'selected' : '' %>>&#9788;</option>
-                                    <option value="&#9787;" <%= a.getIcon() === "☻" ? 'selected' : '' %>>&#9787;</option>
-                                </select>
+                            <div class="col">
+                                <div class="radio-icons" id="radio-icons">
+                                    <p class="d-flex justify-content-between align-items-center">
+                                        <%= _lc( 'APPOINTMENT_ICON' ) %>
+                                        <i class="fas fa-chevron-down"></i>
+                                    </p>
+                                    <div class="radio-icons-inner">
+                                        <label for="input-subject-icon">
+                                            <input type="radio" <%= a.getIcon() === "" ? 'checked' : '' %> value="" name="categoryicon" id="input-subject-icon" />
+                                            Ohne
+                                        </label>
+                                        <label for="input-subject-icon-wrench">
+                                            <input type="radio" <%= a.getIcon() === "fa-wrench" ? 'checked' : '' %> value="fa-wrench" name="categoryicon" id="input-subject-icon-wrench" />
+                                            <i class="fas fa-wrench"></i>
+                                        </label>
+                                        <label for="input-subject-icon-weight">
+                                            <input type="radio" <%= a.getIcon() === "fa-weight" ? 'checked' : '' %> value="fa-weight" name="categoryicon" id="input-subject-icon-weight" />
+                                            <i class="fas fa-weight"></i>
+                                        </label>
+                                        <label for="input-subject-icon-walking">
+                                            <input type="radio" <%= a.getIcon() === "fa-walking" ? 'checked' : '' %> value="fa-walking" name="categoryicon" id="input-subject-icon-walking" />
+                                            <i class="fas fa-walking"></i>
+                                        </label>
+                                        <label for="input-subject-icon-volume-up">
+                                            <input type="radio" <%= a.getIcon() === "fa-volume-up" ? 'checked' : '' %> value="fa-volume-up" name="categoryicon" id="input-subject-icon-volume-up" />
+                                            <i class="fas fa-volume-up"></i>
+                                        </label>
+                                        <label for="input-subject-icon-video">
+                                            <input type="radio" <%= a.getIcon() === "fa-video" ? 'checked' : '' %> value="fa-video" name="categoryicon" id="input-subject-icon-video" />
+                                            <i class="fas fa-video"></i>
+                                        </label>
+                                        <label for="input-subject-icon-utensils">
+                                            <input type="radio" <%= a.getIcon() === "fa-utensils" ? 'checked' : '' %> value="fa-utensils" name="categoryicon" id="input-subject-icon-utensils" />
+                                            <i class="fas fa-utensils"></i>
+                                        </label>
+                                        <label for="input-subject-icon-user-friends">
+                                            <input type="radio" <%= a.getIcon() === "fa-user-friends" ? 'checked' : '' %> value="fa-user-friends" name="categoryicon" id="input-subject-icon-user-friends" />
+                                            <i class="fas fa-user-friends"></i>
+                                        </label>
+                                        <label for="input-subject-icon-umbrella-beach">
+                                            <input type="radio" <%= a.getIcon() === "fa-umbrella-beach" ? 'checked' : '' %> value="fa-umbrella-beach" name="categoryicon" id="input-subject-icon-umbrella-beach" />
+                                            <i class="fas fa-umbrella-beach"></i>
+                                        </label>
+                                        <label for="input-subject-icon-trophy">
+                                            <input type="radio" <%= a.getIcon() === "fa-trophy" ? 'checked' : '' %> value="fa-trophy" name="categoryicon" id="input-subject-icon-trophy" />
+                                            <i class="fas fa-trophy"></i>
+                                        </label>
+                                        <label for="input-subject-icon-tree">
+                                            <input type="radio" <%= a.getIcon() === "fa-tree" ? 'checked' : '' %> value="fa-tree" name="categoryicon" id="input-subject-icon-tree" />
+                                            <i class="fas fa-tree"></i>
+                                        </label>
+                                        <label for="input-subject-icon-toolbox">
+                                            <input type="radio" <%= a.getIcon() === "fa-toolbox" ? 'checked' : '' %> value="fa-toolbox" name="categoryicon" id="input-subject-icon-toolbox" />
+                                            <i class="fas fa-toolbox"></i>
+                                        </label>
+                                        <label for="input-subject-icon-thumbtack">
+                                            <input type="radio" <%= a.getIcon() === "fa-thumbtack" ? 'checked' : '' %> value="fa-thumbtack" name="categoryicon" id="input-subject-icon-thumbtack" />
+                                            <i class="fas fa-thumbtack"></i>
+                                        </label>
+                                        <label for="input-subject-icon-tags">
+                                            <input type="radio" <%= a.getIcon() === "fa-tags" ? 'checked' : '' %> value="fa-tags" name="categoryicon" id="input-subject-icon-tags" />
+                                            <i class="fas fa-tags"></i>
+                                        </label>
+                                        <label for="input-subject-icon-tachometer-alt">
+                                            <input type="radio" <%= a.getIcon() === "fa-tachometer-alt" ? 'checked' : '' %> value="fa-tachometer-alt" name="categoryicon" id="input-subject-icon-tachometer-alt" />
+                                            <i class="fas fa-tachometer-alt"></i>
+                                        </label>
+                                        <label for="input-subject-icon-swimmer">
+                                            <input type="radio" <%= a.getIcon() === "fa-swimmer" ? 'checked' : '' %> value="fa-swimmer" name="categoryicon" id="input-subject-icon-swimmer" />
+                                            <i class="fas fa-swimmer"></i>
+                                        </label>
+                                        <label for="input-subject-icon-surprise">
+                                            <input type="radio" <%= a.getIcon() === "fa-surprise" ? 'checked' : '' %> value="fa-surprise" name="categoryicon" id="input-subject-icon-surprise" />
+                                            <i class="fas fa-surprise"></i>
+                                        </label>
+                                        <label for="input-subject-icon-street-view">
+                                            <input type="radio" <%= a.getIcon() === "fa-street-view" ? 'checked' : '' %> value="fa-street-view" name="categoryicon" id="input-subject-icon-street-view" />
+                                            <i class="fas fa-street-view"></i>
+                                        </label>
+                                        <label for="input-subject-icon-stopwatch">
+                                            <input type="radio" <%= a.getIcon() === "fa-stopwatch" ? 'checked' : '' %> value="fa-stopwatch" name="categoryicon" id="input-subject-icon-stopwatch" />
+                                            <i class="fas fa-stopwatch"></i>
+                                        </label>
+                                        <label for="input-subject-icon-star">
+                                            <input type="radio" <%= a.getIcon() === "fa-star" ? 'checked' : '' %> value="fa-star" name="categoryicon" id="input-subject-icon-star" />
+                                            <i class="fas fa-star"></i>
+                                        </label>
+                                        <label for="input-subject-icon-smile-wink">
+                                            <input type="radio" <%= a.getIcon() === "fa-smile-wink" ? 'checked' : '' %> value="fa-smile-wink" name="categoryicon" id="input-subject-icon-smile-wink" />
+                                            <i class="fas fa-smile-wink"></i>
+                                        </label>
+                                        <label for="input-subject-icon-shuttle-van">
+                                            <input type="radio" <%= a.getIcon() === "fa-shuttle-van" ? 'checked' : '' %> value="fa-shuttle-van" name="categoryicon" id="input-subject-icon-shuttle-van" />
+                                            <i class="fas fa-shuttle-van"></i>
+                                        </label>
+                                        <label for="input-subject-icon-shopping-cart">
+                                            <input type="radio" <%= a.getIcon() === "fa-shopping-cart" ? 'checked' : '' %> value="fa-shopping-cart" name="categoryicon" id="input-subject-icon-shopping-cart" />
+                                            <i class="fas fa-shopping-cart"></i>
+                                        </label>
+                                        <label for="input-subject-icon-running">
+                                            <input type="radio" <%= a.getIcon() === "fa-running" ? 'checked' : '' %> value="fa-running" name="categoryicon" id="input-subject-icon-running" />
+                                            <i class="fas fa-running"></i>
+                                        </label>
+                                        <label for="input-subject-icon-rocket">
+                                            <input type="radio" <%= a.getIcon() === "fa-rocket" ? 'checked' : '' %> value="fa-rocket" name="categoryicon" id="input-subject-icon-rocket" />
+                                            <i class="fas fa-rocket"></i>
+                                        </label>
+                                        <label for="input-subject-icon-recycle">
+                                            <input type="radio" <%= a.getIcon() === "fa-recycle" ? 'checked' : '' %> value="fa-recycle" name="categoryicon" id="input-subject-icon-recycle" />
+                                            <i class="fas fa-recycle"></i>
+                                        </label>
+                                        <label for="input-subject-icon-question-circle">
+                                            <input type="radio" <%= a.getIcon() === "fa-question-circle" ? 'checked' : '' %> value="fa-question-circle" name="categoryicon" id="input-subject-icon-question-circle" />
+                                            <i class="fas fa-question-circle"></i>
+                                        </label>
+                                        <label for="input-subject-icon-puzzle-piece">
+                                            <input type="radio" <%= a.getIcon() === "fa-puzzle-piece" ? 'checked' : '' %> value="fa-puzzle-piece" name="categoryicon" id="input-subject-icon-puzzle-piece" />
+                                            <i class="fas fa-puzzle-piece"></i>
+                                        </label>
+                                        <label for="input-subject-icon-poll">
+                                            <input type="radio" <%= a.getIcon() === "fa-poll" ? 'checked' : '' %> value="fa-poll" name="categoryicon" id="input-subject-icon-poll" />
+                                            <i class="fas fa-poll"></i>
+                                        </label>
+                                        <label for="input-subject-icon-plus-circle">
+                                            <input type="radio" <%= a.getIcon() === "fa-plus-circle" ? 'checked' : '' %> value="fa-plus-circle" name="categoryicon" id="input-subject-icon-plus-circle" />
+                                            <i class="fas fa-plus-circle"></i>
+                                        </label>
+                                        <label for="input-subject-icon-play-circle">
+                                            <input type="radio" <%= a.getIcon() === "fa-play-circle" ? 'checked' : '' %> value="fa-play-circle" name="categoryicon" id="input-subject-icon-play-circle" />
+                                            <i class="fas fa-play-circle"></i>
+                                        </label>
+                                        <label for="input-subject-icon-phone-square">
+                                            <input type="radio" <%= a.getIcon() === "fa-phone-square" ? 'checked' : '' %> value="fa-phone-square" name="categoryicon" id="input-subject-icon-phone-square" />
+                                            <i class="fas fa-phone-square"></i>
+                                        </label>
+                                        <label for="input-subject-icon-pepper-hot">
+                                            <input type="radio" <%= a.getIcon() === "fa-pepper-hot" ? 'checked' : '' %> value="fa-pepper-hot" name="categoryicon" id="input-subject-icon-pepper-hot" />
+                                            <i class="fas fa-pepper-hot"></i>
+                                        </label>
+                                        <label for="input-subject-icon-paw">
+                                            <input type="radio" <%= a.getIcon() === "fa-paw" ? 'checked' : '' %> value="fa-paw" name="categoryicon" id="input-subject-icon-paw" />
+                                            <i class="fas fa-paw"></i>
+                                        </label>
+                                        <label for="input-subject-icon-paper-plane">
+                                            <input type="radio" <%= a.getIcon() === "fa-paper-plane" ? 'checked' : '' %> value="fa-paper-plane" name="categoryicon" id="input-subject-icon-paper-plane" />
+                                            <i class="fas fa-paper-plane"></i>
+                                        </label>
+                                        <label for="input-subject-icon-motorcycle">
+                                            <input type="radio" <%= a.getIcon() === "fa-motorcycle" ? 'checked' : '' %> value="fa-motorcycle" name="categoryicon" id="input-subject-icon-motorcycle" />
+                                            <i class="fas fa-motorcycle"></i>
+                                        </label>
+                                        <label for="input-subject-icon-mobile">
+                                            <input type="radio" <%= a.getIcon() === "fa-mobile" ? 'checked' : '' %> value="fa-mobile" name="categoryicon" id="input-subject-icon-mobile" />
+                                            <i class="fas fa-mobile"></i>
+                                        </label>
+                                        <label for="input-subject-icon-medal">
+                                            <input type="radio" <%= a.getIcon() === "fa-medal" ? 'checked' : '' %> value="fa-medal" name="categoryicon" id="input-subject-icon-medal" />
+                                            <i class="fas fa-medal"></i>
+                                        </label>
+                                        <label for="input-subject-icon-map-signs">
+                                            <input type="radio" <%= a.getIcon() === "fa-map-signs" ? 'checked' : '' %> value="fa-map-signs" name="categoryicon" id="input-subject-icon-map-signs" />
+                                            <i class="fas fa-map-signs"></i>
+                                        </label>
+                                        <label for="input-subject-icon-map-marked">
+                                            <input type="radio" <%= a.getIcon() === "fa-map-marked" ? 'checked' : '' %> value="fa-map-marked" name="categoryicon" id="input-subject-icon-map-marked" />
+                                            <i class="fas fa-map-marked"></i>
+                                        </label>
+                                        <label for="input-subject-icon-male">
+                                            <input type="radio" <%= a.getIcon() === "fa-male" ? 'checked' : '' %> value="fa-male" name="categoryicon" id="input-subject-icon-male" />
+                                            <i class="fas fa-male"></i>
+                                        </label>
+                                        <label for="input-subject-icon-female">
+                                            <input type="radio" <%= a.getIcon() === "fa-female" ? 'checked' : '' %> value="fa-female" name="categoryicon" id="input-subject-icon-female" />
+                                            <i class="fas fa-female"></i>
+                                        </label>
+                                        <label for="input-subject-icon-magic">
+                                            <input type="radio" <%= a.getIcon() === "fa-magic" ? 'checked' : '' %> value="fa-magic" name="categoryicon" id="input-subject-icon-magic" />
+                                            <i class="fas fa-magic"></i>
+                                        </label>
+                                        <label for="input-subject-icon-lock">
+                                            <input type="radio" <%= a.getIcon() === "fa-lock" ? 'checked' : '' %> value="fa-lock" name="categoryicon" id="input-subject-icon-lock" />
+                                            <i class="fas fa-lock"></i>
+                                        </label>
+                                        <label for="input-subject-icon-lock-open">
+                                            <input type="radio" <%= a.getIcon() === "fa-lock-open" ? 'checked' : '' %> value="fa-lock-open" name="categoryicon" id="input-subject-icon-lock-open" />
+                                            <i class="fas fa-lock-open"></i>
+                                        </label>
+                                        <label for="input-subject-icon-laugh">
+                                            <input type="radio" <%= a.getIcon() === "fa-laugh" ? 'checked' : '' %> value="fa-laugh" name="categoryicon" id="input-subject-icon-laugh" />
+                                            <i class="fas fa-laugh"></i>
+                                        </label>
+                                        <label for="input-subject-icon-layer-group">
+                                            <input type="radio" <%= a.getIcon() === "fa-layer-group" ? 'checked' : '' %> value="fa-layer-group" name="categoryicon" id="input-subject-icon-layer-group" />
+                                            <i class="fas fa-layer-group"></i>
+                                        </label>
+                                        <label for="input-subject-icon-key">
+                                            <input type="radio" <%= a.getIcon() === "fa-key" ? 'checked' : '' %> value="fa-key" name="categoryicon" id="input-subject-icon-key" />
+                                            <i class="fas fa-key"></i>
+                                        </label>
+                                        <label for="input-subject-icon-info-circle">
+                                            <input type="radio" <%= a.getIcon() === "fa-info-circle" ? 'checked' : '' %> value="fa-info-circle" name="categoryicon" id="input-subject-icon-info-circle" />
+                                            <i class="fas fa-info-circle"></i>
+                                        </label>
+                                        <label for="input-subject-icon-horse">
+                                            <input type="radio" <%= a.getIcon() === "fa-horse" ? 'checked' : '' %> value="fa-horse" name="categoryicon" id="input-subject-icon-horse" />
+                                            <i class="fas fa-horse"></i>
+                                        </label>
+                                        <label for="input-subject-icon-home">
+                                            <input type="radio" <%= a.getIcon() === "fa-home" ? 'checked' : '' %> value="fa-home" name="categoryicon" id="input-subject-icon-home" />
+                                            <i class="fas fa-home"></i>
+                                        </label>
+                                        <label for="input-subject-icon-hiking">
+                                            <input type="radio" <%= a.getIcon() === "fa-hiking" ? 'checked' : '' %> value="fa-hiking" name="categoryicon" id="input-subject-icon-hiking" />
+                                            <i class="fas fa-hiking"></i>
+                                        </label>
+                                        <label for="input-subject-icon-heart">
+                                            <input type="radio" <%= a.getIcon() === "fa-heart" ? 'checked' : '' %> value="fa-heart" name="categoryicon" id="input-subject-icon-heart" />
+                                            <i class="fas fa-heart"></i>
+                                        </label>
+                                        <label for="input-subject-icon-helicopter">
+                                            <input type="radio" <%= a.getIcon() === "fa-helicopter" ? 'checked' : '' %> value="fa-helicopter" name="categoryicon" id="input-subject-icon-helicopter" />
+                                            <i class="fas fa-helicopter"></i>
+                                        </label>
+                                        <label for="input-subject-icon-handshake">
+                                            <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>
+                                        <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" />
+                                            <i class="fas fa-hand-holding-medical"></i>
+                                        </label>
+                                        <label for="input-subject-icon-hand-holding-heart">
+                                            <input type="radio" <%= a.getIcon() === "fa-hand-holding-heart" ? 'checked' : '' %> value="fa-hand-holding-heart" name="categoryicon" id="input-subject-icon-hand-holding-heart" />
+                                            <i class="fas fa-hand-holding-heart"></i>
+                                        </label>
+                                        <label for="input-subject-icon-hammer">
+                                            <input type="radio" <%= a.getIcon() === "fa-hammer" ? 'checked' : '' %> value="fa-hammer" name="categoryicon" id="input-subject-icon-hammer" />
+                                            <i class="fas fa-hammer"></i>
+                                        </label>
+                                        <label for="input-subject-icon-globe">
+                                            <input type="radio" <%= a.getIcon() === "fa-globe" ? 'checked' : '' %> value="fa-globe" name="categoryicon" id="input-subject-icon-globe" />
+                                            <i class="fas fa-globe"></i>
+                                        </label>
+                                        <label for="input-subject-icon-glass-cheers">
+                                            <input type="radio" <%= a.getIcon() === "fa-glass-cheers" ? 'checked' : '' %> value="fa-glass-cheers" name="categoryicon" id="input-subject-icon-glass-cheers" />
+                                            <i class="fas fa-glass-cheers"></i>
+                                        </label>
+                                        <label for="input-subject-icon-ghost">
+                                            <input type="radio" <%= a.getIcon() === "fa-ghost" ? 'checked' : '' %> value="fa-ghost" name="categoryicon" id="input-subject-icon-ghost" />
+                                            <i class="fas fa-ghost"></i>
+                                        </label>
+                                        <label for="input-subject-icon-futbol">
+                                            <input type="radio" <%= a.getIcon() === "fa-futbol" ? 'checked' : '' %> value="fa-futbol" name="categoryicon" id="input-subject-icon-futbol" />
+                                            <i class="fas fa-futbol"></i>
+                                        </label>
+                                        <label for="input-subject-icon-fish">
+                                            <input type="radio" <%= a.getIcon() === "fa-fish" ? 'checked' : '' %> value="fa-fish" name="categoryicon" id="input-subject-icon-fish" />
+                                            <i class="fas fa-fish"></i>
+                                        </label>
+                                        <label for="input-subject-icon-fire-alt">
+                                            <input type="radio" <%= a.getIcon() === "fa-fire-alt" ? 'checked' : '' %> value="fa-fire-alt" name="categoryicon" id="input-subject-icon-fire-alt" />
+                                            <i class="fas fa-fire-alt"></i>
+                                        </label>
+                                        <label for="input-subject-icon-fan">
+                                            <input type="radio" <%= a.getIcon() === "fa-fan" ? 'checked' : '' %> value="fa-fan" name="categoryicon" id="input-subject-icon-fan" />
+                                            <i class="fas fa-fan"></i>
+                                        </label>
+                                        <label for="input-subject-icon-eye">
+                                            <input type="radio" <%= a.getIcon() === "fa-eye" ? 'checked' : '' %> value="fa-eye" name="categoryicon" id="input-subject-icon-eye" />
+                                            <i class="fas fa-eye"></i>
+                                        </label>
+                                        <label for="input-subject-icon-exclamation-circle">
+                                            <input type="radio" <%= a.getIcon() === "fa-exclamation-circle" ? 'checked' : '' %> value="fa-exclamation-circle" name="categoryicon" id="input-subject-icon-exclamation-circle" />
+                                            <i class="fas fa-exclamation-circle"></i>
+                                        </label>
+                                        <label for="input-subject-icon-euro-sign">
+                                            <input type="radio" <%= a.getIcon() === "fa-euro-sign" ? 'checked' : '' %> value="fa-euro-sign" name="categoryicon" id="input-subject-icon-euro-sign" />
+                                            <i class="fas fa-euro-sign"></i>
+                                        </label>
+                                        <label for="input-subject-icon-envelope">
+                                            <input type="radio" <%= a.getIcon() === "fa-envelope" ? 'checked' : '' %> value="fa-envelope" name="categoryicon" id="input-subject-icon-envelope" />
+                                            <i class="fas fa-envelope"></i>
+                                        </label>
+                                        <label for="input-subject-icon-dot-circle">
+                                            <input type="radio" <%= a.getIcon() === "fa-dot-circle" ? 'checked' : '' %> value="fa-dot-circle" name="categoryicon" id="input-subject-icon-dot-circle" />
+                                            <i class="fas fa-dot-circle"></i>
+                                        </label>
+                                        <label for="input-subject-icon-dollar-sign">
+                                            <input type="radio" <%= a.getIcon() === "fa-dollar-sign" ? 'checked' : '' %> value="fa-dollar-sign" name="categoryicon" id="input-subject-icon-dollar-sign" />
+                                            <i class="fas fa-dollar-sign"></i>
+                                        </label>
+                                        <label for="input-subject-icon-dog">
+                                            <input type="radio" <%= a.getIcon() === "fa-dog" ? 'checked' : '' %> value="fa-dog" name="categoryicon" id="input-subject-icon-dog" />
+                                            <i class="fas fa-dog"></i>
+                                        </label>
+                                        <label for="input-subject-icon-directions">
+                                            <input type="radio" <%= a.getIcon() === "fa-directions" ? 'checked' : '' %> value="fa-directions" name="categoryicon" id="input-subject-icon-directions" />
+                                            <i class="fas fa-directions"></i>
+                                        </label>
+                                        <label for="input-subject-icon-concierge-bell">
+                                            <input type="radio" <%= a.getIcon() === "fa-concierge-bell" ? 'checked' : '' %> value="fa-concierge-bell" name="categoryicon" id="input-subject-icon-concierge-bell" />
+                                            <i class="fas fa-concierge-bell"></i>
+                                        </label>
+                                        <label for="input-subject-icon-compass">
+                                            <input type="radio" <%= a.getIcon() === "fa-compass" ? 'checked' : '' %> value="fa-compass" name="categoryicon" id="input-subject-icon-compass" />
+                                            <i class="fas fa-compass"></i>
+                                        </label>
+                                        <label for="input-subject-icon-comments">
+                                            <input type="radio" <%= a.getIcon() === "fa-comments" ? 'checked' : '' %> value="fa-comments" name="categoryicon" id="input-subject-icon-comments" />
+                                            <i class="fas fa-comments"></i>
+                                        </label>
+                                        <label for="input-subject-icon-coffee">
+                                            <input type="radio" <%= a.getIcon() === "fa-coffee" ? 'checked' : '' %> value="fa-coffee" name="categoryicon" id="input-subject-icon-coffee" />
+                                            <i class="fas fa-coffee"></i>
+                                        </label>
+                                        <label for="input-subject-icon-cloud">
+                                            <input type="radio" <%= a.getIcon() === "fa-cloud" ? 'checked' : '' %> value="fa-cloud" name="categoryicon" id="input-subject-icon-cloud" />
+                                            <i class="fas fa-cloud"></i>
+                                        </label>
+                                        <label for="input-subject-icon-child">
+                                            <input type="radio" <%= a.getIcon() === "fa-child" ? 'checked' : '' %> value="fa-child" name="categoryicon" id="input-subject-icon-child" />
+                                            <i class="fas fa-child"></i>
+                                        </label>
+                                        <label for="input-subject-icon-cat">
+                                            <input type="radio" <%= a.getIcon() === "fa-cat" ? 'checked' : '' %> value="fa-cat" name="categoryicon" id="input-subject-icon-cat" />
+                                            <i class="fas fa-cat"></i>
+                                        </label>
+                                        <label for="input-subject-icon-certificate">
+                                            <input type="radio" <%= a.getIcon() === "fa-certificate" ? 'checked' : '' %> value="fa-certificate" name="categoryicon" id="input-subject-icon-certificate" />
+                                            <i class="fas fa-certificate"></i>
+                                        </label>
+                                        <label for="input-subject-icon-car">
+                                            <input type="radio" <%= a.getIcon() === "fa-car" ? 'checked' : '' %> value="fa-car" name="categoryicon" id="input-subject-icon-car" />
+                                            <i class="fas fa-car"></i>
+                                        </label>
+                                        <label for="input-subject-icon-calendar-alt">
+                                            <input type="radio" <%= a.getIcon() === "fa-calendar-alt" ? 'checked' : '' %> value="fa-calendar-alt" name="categoryicon" id="input-subject-icon-calendar-alt" />
+                                            <i class="fas fa-calendar-alt"></i>
+                                        </label>
+                                        <label for="input-subject-icon-bus">
+                                            <input type="radio" <%= a.getIcon() === "fa-bus" ? 'checked' : '' %> value="fa-bus" name="categoryicon" id="input-subject-icon-bus" />
+                                            <i class="fas fa-bus"></i>
+                                        </label>
+                                        <label for="input-subject-icon-bullhorn">
+                                            <input type="radio" <%= a.getIcon() === "fa-bullhorn" ? 'checked' : '' %> value="fa-bullhorn" name="categoryicon" id="input-subject-icon-bullhorn" />
+                                            <i class="fas fa-bullhorn"></i>
+                                        </label>
+                                        <label for="input-subject-icon-bookmark">
+                                            <input type="radio" <%= a.getIcon() === "fa-bookmark" ? 'checked' : '' %> value="fa-bookmark" name="categoryicon" id="input-subject-icon-bookmark" />
+                                            <i class="fas fa-bookmark"></i>
+                                        </label>
+                                        <label for="input-subject-icon-bolt">
+                                            <input type="radio" <%= a.getIcon() === "fa-bolt" ? 'checked' : '' %> value="fa-bolt" name="categoryicon" id="input-subject-icon-bolt" />
+                                            <i class="fas fa-bolt"></i>
+                                        </label>
+                                        <label for="input-subject-icon-biking">
+                                            <input type="radio" <%= a.getIcon() === "fa-biking" ? 'checked' : '' %> value="fa-biking" name="categoryicon" id="input-subject-icon-biking" />
+                                            <i class="fas fa-biking"></i>
+                                        </label>
+                                        <label for="input-subject-icon-baby-carriage">
+                                            <input type="radio" <%= a.getIcon() === "fa-baby-carriage" ? 'checked' : '' %> value="fa-baby-carriage" name="categoryicon" id="input-subject-icon-baby-carriage" />
+                                            <i class="fas fa-baby-carriage"></i>
+                                        </label>
+                                        <label for="input-subject-icon-award">
+                                            <input type="radio" <%= a.getIcon() === "fa-award" ? 'checked' : '' %> value="fa-award" name="categoryicon" id="input-subject-icon-award" />
+                                            <i class="fas fa-award"></i>
+                                        </label>
+                                        <label for="input-subject-icon-arrow-alt-circle-up">
+                                            <input type="radio" <%= a.getIcon() === "fa-arrow-alt-circle-up" ? 'checked' : '' %> value="fa-arrow-alt-circle-up" name="categoryicon" id="input-subject-icon-arrow-alt-circle-up" />
+                                            <i class="fas fa-arrow-alt-circle-up"></i>
+                                        </label>
+                                        <label for="input-subject-icon-arrow-alt-circle-down">
+                                            <input type="radio" <%= a.getIcon() === "fa-arrow-alt-circle-down" ? 'checked' : '' %> value="fa-arrow-alt-circle-down" name="categoryicon" id="input-subject-icon-arrow-alt-circle-down" />
+                                            <i class="fas fa-arrow-alt-circle-down"></i>
+                                        </label>
+                                        <label for="input-subject-icon-arrow-alt-circle-right">
+                                            <input type="radio" <%= a.getIcon() === "fa-arrow-alt-circle-right" ? 'checked' : '' %> value="fa-arrow-alt-circle-right" name="categoryicon" id="input-subject-icon-arrow-alt-circle-right" />
+                                            <i class="fas fa-arrow-alt-circle-right"></i>
+                                        </label>
+                                        <label for="input-subject-icon-arrow-alt-circle-left">
+                                            <input type="radio" <%= a.getIcon() === "fa-arrow-alt-circle-left" ? 'checked' : '' %> value="fa-arrow-alt-circle-left" name="categoryicon" id="input-subject-icon-arrow-alt-circle-left" />
+                                            <i class="fas fa-arrow-alt-circle-left"></i>
+                                        </label>
+                                    </div>
+                                </div>
                             </div>
-                            <div class="col col-10">
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <div class="form-row">
+                            <div class="col">
                                 <label for="input-subject">
                                     <%= _lc( 'APPOINTMENT_SUBJECT' ) %>
                                 </label>

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

@@ -36,30 +36,403 @@
                         </div>
                     </div>
                 </div>
-
                 <div class="form-group">
                     <div class="form-row">
-                        <div class="col col-2">
-                            <label for="input-subject-icon">
-                                <%= _lc( 'APPOINTMENT_ICON' ) %>
-                            </label>
-                            <select class="form-control"
-                                    name="categoryicon" id="input-subject-icon">
-                                <option value="">- kein -</option>
-                                <option value="&#9880;">&#9880;</option>
-                                <option value="&#9873;">&#9873;</option>
-                                <option value="&cross;">&cross;</option>
-                                <option value="&#10025;">&#10025;</option>
-                                <option value="&#10045;">&#10045;</option>
-                                <option value="&#10084;">&#10084;</option>
-                                <option value="&#10132;">&#10132;</option>
-                                <option value="&#9881;">&#9881;</option>
-                                <option value="&#9863;">&#9863;</option>
-                                <option value="&#9788;">&#9788;</option>
-                                <option value="&#9787;">&#9787;</option>
-                            </select>
+                        <div class="col">
+                            <div class="radio-icons" id="radio-icons">
+                                <p class="d-flex justify-content-between align-items-center">
+                                    <%= _lc( 'APPOINTMENT_ICON' ) %>
+                                    <i class="fas fa-chevron-down"></i>
+                                </p>
+                                <div class="radio-icons-inner">
+                                    <label for="input-subject-icon">
+                                        <input type="radio" value="" name="categoryicon" id="input-subject-icon" checked />
+                                        Ohne
+                                    </label>
+                                    <label for="input-subject-icon-wrench">
+                                        <input type="radio" value="fa-wrench" name="categoryicon" id="input-subject-icon-wrench" />
+                                        <i class="fas fa-wrench"></i>
+                                    </label>
+                                    <label for="input-subject-icon-weight">
+                                        <input type="radio" value="fa-weight" name="categoryicon" id="input-subject-icon-weight" />
+                                        <i class="fas fa-weight"></i>
+                                    </label>
+                                    <label for="input-subject-icon-walking">
+                                        <input type="radio" value="fa-walking" name="categoryicon" id="input-subject-icon-walking" />
+                                        <i class="fas fa-walking"></i>
+                                    </label>
+                                    <label for="input-subject-icon-volume-up">
+                                        <input type="radio" value="fa-volume-up" name="categoryicon" id="input-subject-icon-volume-up" />
+                                        <i class="fas fa-volume-up"></i>
+                                    </label>
+                                    <label for="input-subject-icon-video">
+                                        <input type="radio" value="fa-video" name="categoryicon" id="input-subject-icon-video" />
+                                        <i class="fas fa-video"></i>
+                                    </label>
+                                    <label for="input-subject-icon-utensils">
+                                        <input type="radio" value="fa-utensils" name="categoryicon" id="input-subject-icon-utensils" />
+                                        <i class="fas fa-utensils"></i>
+                                    </label>
+                                    <label for="input-subject-icon-user-friends">
+                                        <input type="radio" value="fa-user-friends" name="categoryicon" id="input-subject-icon-user-friends" />
+                                        <i class="fas fa-user-friends"></i>
+                                    </label>
+                                    <label for="input-subject-icon-umbrella-beach">
+                                        <input type="radio" value="fa-umbrella-beach" name="categoryicon" id="input-subject-icon-umbrella-beach" />
+                                        <i class="fas fa-umbrella-beach"></i>
+                                    </label>
+                                    <label for="input-subject-icon-trophy">
+                                        <input type="radio" value="fa-trophy" name="categoryicon" id="input-subject-icon-trophy" />
+                                        <i class="fas fa-trophy"></i>
+                                    </label>
+                                    <label for="input-subject-icon-tree">
+                                        <input type="radio" value="fa-tree" name="categoryicon" id="input-subject-icon-tree" />
+                                        <i class="fas fa-tree"></i>
+                                    </label>
+                                    <label for="input-subject-icon-toolbox">
+                                        <input type="radio" value="fa-toolbox" name="categoryicon" id="input-subject-icon-toolbox" />
+                                        <i class="fas fa-toolbox"></i>
+                                    </label>
+                                    <label for="input-subject-icon-thumbtack">
+                                        <input type="radio" value="fa-thumbtack" name="categoryicon" id="input-subject-icon-thumbtack" />
+                                        <i class="fas fa-thumbtack"></i>
+                                    </label>
+                                    <label for="input-subject-icon-tags">
+                                        <input type="radio" value="fa-tags" name="categoryicon" id="input-subject-icon-tags" />
+                                        <i class="fas fa-tags"></i>
+                                    </label>
+                                    <label for="input-subject-icon-tachometer-alt">
+                                        <input type="radio" value="fa-tachometer-alt" name="categoryicon" id="input-subject-icon-tachometer-alt" />
+                                        <i class="fas fa-tachometer-alt"></i>
+                                    </label>
+                                    <label for="input-subject-icon-swimmer">
+                                        <input type="radio" value="fa-swimmer" name="categoryicon" id="input-subject-icon-swimmer" />
+                                        <i class="fas fa-swimmer"></i>
+                                    </label>
+                                    <label for="input-subject-icon-surprise">
+                                        <input type="radio" value="fa-surprise" name="categoryicon" id="input-subject-icon-surprise" />
+                                        <i class="fas fa-surprise"></i>
+                                    </label>
+                                    <label for="input-subject-icon-street-view">
+                                        <input type="radio" value="fa-street-view" name="categoryicon" id="input-subject-icon-street-view" />
+                                        <i class="fas fa-street-view"></i>
+                                    </label>
+                                    <label for="input-subject-icon-stopwatch">
+                                        <input type="radio" value="fa-stopwatch" name="categoryicon" id="input-subject-icon-stopwatch" />
+                                        <i class="fas fa-stopwatch"></i>
+                                    </label>
+                                    <label for="input-subject-icon-star">
+                                        <input type="radio" value="fa-star" name="categoryicon" id="input-subject-icon-star" />
+                                        <i class="fas fa-star"></i>
+                                    </label>
+                                    <label for="input-subject-icon-smile-wink">
+                                        <input type="radio" value="fa-smile-wink" name="categoryicon" id="input-subject-icon-smile-wink" />
+                                        <i class="fas fa-smile-wink"></i>
+                                    </label>
+                                    <label for="input-subject-icon-shuttle-van">
+                                        <input type="radio" value="fa-shuttle-van" name="categoryicon" id="input-subject-icon-shuttle-van" />
+                                        <i class="fas fa-shuttle-van"></i>
+                                    </label>
+                                    <label for="input-subject-icon-shopping-cart">
+                                        <input type="radio" value="fa-shopping-cart" name="categoryicon" id="input-subject-icon-shopping-cart" />
+                                        <i class="fas fa-shopping-cart"></i>
+                                    </label>
+                                    <label for="input-subject-icon-running">
+                                        <input type="radio" value="fa-running" name="categoryicon" id="input-subject-icon-running" />
+                                        <i class="fas fa-running"></i>
+                                    </label>
+                                    <label for="input-subject-icon-rocket">
+                                        <input type="radio" value="fa-rocket" name="categoryicon" id="input-subject-icon-rocket" />
+                                        <i class="fas fa-rocket"></i>
+                                    </label>
+                                    <label for="input-subject-icon-recycle">
+                                        <input type="radio" value="fa-recycle" name="categoryicon" id="input-subject-icon-recycle" />
+                                        <i class="fas fa-recycle"></i>
+                                    </label>
+                                    <label for="input-subject-icon-question-circle">
+                                        <input type="radio" value="fa-question-circle" name="categoryicon" id="input-subject-icon-question-circle" />
+                                        <i class="fas fa-question-circle"></i>
+                                    </label>
+                                    <label for="input-subject-icon-puzzle-piece">
+                                        <input type="radio" value="fa-puzzle-piece" name="categoryicon" id="input-subject-icon-puzzle-piece" />
+                                        <i class="fas fa-puzzle-piece"></i>
+                                    </label>
+                                    <label for="input-subject-icon-poll">
+                                        <input type="radio" value="fa-poll" name="categoryicon" id="input-subject-icon-poll" />
+                                        <i class="fas fa-poll"></i>
+                                    </label>
+                                    <label for="input-subject-icon-plus-circle">
+                                        <input type="radio" value="fa-plus-circle" name="categoryicon" id="input-subject-icon-plus-circle" />
+                                        <i class="fas fa-plus-circle"></i>
+                                    </label>
+                                    <label for="input-subject-icon-play-circle">
+                                        <input type="radio" value="fa-play-circle" name="categoryicon" id="input-subject-icon-play-circle" />
+                                        <i class="fas fa-play-circle"></i>
+                                    </label>
+                                    <label for="input-subject-icon-phone-square">
+                                        <input type="radio" value="fa-phone-square" name="categoryicon" id="input-subject-icon-phone-square" />
+                                        <i class="fas fa-phone-square"></i>
+                                    </label>
+                                    <label for="input-subject-icon-pepper-hot">
+                                        <input type="radio" value="fa-pepper-hot" name="categoryicon" id="input-subject-icon-pepper-hot" />
+                                        <i class="fas fa-pepper-hot"></i>
+                                    </label>
+                                    <label for="input-subject-icon-paw">
+                                        <input type="radio" value="fa-paw" name="categoryicon" id="input-subject-icon-paw" />
+                                        <i class="fas fa-paw"></i>
+                                    </label>
+                                    <label for="input-subject-icon-paper-plane">
+                                        <input type="radio" value="fa-paper-plane" name="categoryicon" id="input-subject-icon-paper-plane" />
+                                        <i class="fas fa-paper-plane"></i>
+                                    </label>
+                                    <label for="input-subject-icon-motorcycle">
+                                        <input type="radio" value="fa-motorcycle" name="categoryicon" id="input-subject-icon-motorcycle" />
+                                        <i class="fas fa-motorcycle"></i>
+                                    </label>
+                                    <label for="input-subject-icon-mobile">
+                                        <input type="radio" value="fa-mobile" name="categoryicon" id="input-subject-icon-mobile" />
+                                        <i class="fas fa-mobile"></i>
+                                    </label>
+                                    <label for="input-subject-icon-medal">
+                                        <input type="radio" value="fa-medal" name="categoryicon" id="input-subject-icon-medal" />
+                                        <i class="fas fa-medal"></i>
+                                    </label>
+                                    <label for="input-subject-icon-map-signs">
+                                        <input type="radio" value="fa-map-signs" name="categoryicon" id="input-subject-icon-map-signs" />
+                                        <i class="fas fa-map-signs"></i>
+                                    </label>
+                                    <label for="input-subject-icon-map-marked">
+                                        <input type="radio" value="fa-map-marked" name="categoryicon" id="input-subject-icon-map-marked" />
+                                        <i class="fas fa-map-marked"></i>
+                                    </label>
+                                    <label for="input-subject-icon-male">
+                                        <input type="radio" value="fa-male" name="categoryicon" id="input-subject-icon-male" />
+                                        <i class="fas fa-male"></i>
+                                    </label>
+                                    <label for="input-subject-icon-female">
+                                        <input type="radio" value="fa-female" name="categoryicon" id="input-subject-icon-female" />
+                                        <i class="fas fa-female"></i>
+                                    </label>
+                                    <label for="input-subject-icon-magic">
+                                        <input type="radio" value="fa-magic" name="categoryicon" id="input-subject-icon-magic" />
+                                        <i class="fas fa-magic"></i>
+                                    </label>
+                                    <label for="input-subject-icon-lock">
+                                        <input type="radio" value="fa-lock" name="categoryicon" id="input-subject-icon-lock" />
+                                        <i class="fas fa-lock"></i>
+                                    </label>
+                                    <label for="input-subject-icon-lock-open">
+                                        <input type="radio" value="fa-lock-open" name="categoryicon" id="input-subject-icon-lock-open" />
+                                        <i class="fas fa-lock-open"></i>
+                                    </label>
+                                    <label for="input-subject-icon-laugh">
+                                        <input type="radio" value="fa-laugh" name="categoryicon" id="input-subject-icon-laugh" />
+                                        <i class="fas fa-laugh"></i>
+                                    </label>
+                                    <label for="input-subject-icon-layer-group">
+                                        <input type="radio" value="fa-layer-group" name="categoryicon" id="input-subject-icon-layer-group" />
+                                        <i class="fas fa-layer-group"></i>
+                                    </label>
+                                    <label for="input-subject-icon-key">
+                                        <input type="radio" value="fa-key" name="categoryicon" id="input-subject-icon-key" />
+                                        <i class="fas fa-key"></i>
+                                    </label>
+                                    <label for="input-subject-icon-info-circle">
+                                        <input type="radio" value="fa-info-circle" name="categoryicon" id="input-subject-icon-info-circle" />
+                                        <i class="fas fa-info-circle"></i>
+                                    </label>
+                                    <label for="input-subject-icon-horse">
+                                        <input type="radio" value="fa-horse" name="categoryicon" id="input-subject-icon-horse" />
+                                        <i class="fas fa-horse"></i>
+                                    </label>
+                                    <label for="input-subject-icon-home">
+                                        <input type="radio" value="fa-home" name="categoryicon" id="input-subject-icon-home" />
+                                        <i class="fas fa-home"></i>
+                                    </label>
+                                    <label for="input-subject-icon-hiking">
+                                        <input type="radio" value="fa-hiking" name="categoryicon" id="input-subject-icon-hiking" />
+                                        <i class="fas fa-hiking"></i>
+                                    </label>
+                                    <label for="input-subject-icon-heart">
+                                        <input type="radio" value="fa-heart" name="categoryicon" id="input-subject-icon-heart" />
+                                        <i class="fas fa-heart"></i>
+                                    </label>
+                                    <label for="input-subject-icon-helicopter">
+                                        <input type="radio" value="fa-helicopter" name="categoryicon" id="input-subject-icon-helicopter" />
+                                        <i class="fas fa-helicopter"></i>
+                                    </label>
+                                    <label for="input-subject-icon-handshake">
+                                        <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>
+                                    <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" />
+                                        <i class="fas fa-hand-holding-medical"></i>
+                                    </label>
+                                    <label for="input-subject-icon-hand-holding-heart">
+                                        <input type="radio" value="fa-hand-holding-heart" name="categoryicon" id="input-subject-icon-hand-holding-heart" />
+                                        <i class="fas fa-hand-holding-heart"></i>
+                                    </label>
+                                    <label for="input-subject-icon-hammer">
+                                        <input type="radio" value="fa-hammer" name="categoryicon" id="input-subject-icon-hammer" />
+                                        <i class="fas fa-hammer"></i>
+                                    </label>
+                                    <label for="input-subject-icon-globe">
+                                        <input type="radio" value="fa-globe" name="categoryicon" id="input-subject-icon-globe" />
+                                        <i class="fas fa-globe"></i>
+                                    </label>
+                                    <label for="input-subject-icon-glass-cheers">
+                                        <input type="radio" value="fa-glass-cheers" name="categoryicon" id="input-subject-icon-glass-cheers" />
+                                        <i class="fas fa-glass-cheers"></i>
+                                    </label>
+                                    <label for="input-subject-icon-ghost">
+                                        <input type="radio" value="fa-ghost" name="categoryicon" id="input-subject-icon-ghost" />
+                                        <i class="fas fa-ghost"></i>
+                                    </label>
+                                    <label for="input-subject-icon-futbol">
+                                        <input type="radio" value="fa-futbol" name="categoryicon" id="input-subject-icon-futbol" />
+                                        <i class="fas fa-futbol"></i>
+                                    </label>
+                                    <label for="input-subject-icon-fish">
+                                        <input type="radio" value="fa-fish" name="categoryicon" id="input-subject-icon-fish" />
+                                        <i class="fas fa-fish"></i>
+                                    </label>
+                                    <label for="input-subject-icon-fire-alt">
+                                        <input type="radio" value="fa-fire-alt" name="categoryicon" id="input-subject-icon-fire-alt" />
+                                        <i class="fas fa-fire-alt"></i>
+                                    </label>
+                                    <label for="input-subject-icon-fan">
+                                        <input type="radio" value="fa-fan" name="categoryicon" id="input-subject-icon-fan" />
+                                        <i class="fas fa-fan"></i>
+                                    </label>
+                                    <label for="input-subject-icon-eye">
+                                        <input type="radio" value="fa-eye" name="categoryicon" id="input-subject-icon-eye" />
+                                        <i class="fas fa-eye"></i>
+                                    </label>
+                                    <label for="input-subject-icon-exclamation-circle">
+                                        <input type="radio" value="fa-exclamation-circle" name="categoryicon" id="input-subject-icon-exclamation-circle" />
+                                        <i class="fas fa-exclamation-circle"></i>
+                                    </label>
+                                    <label for="input-subject-icon-euro-sign">
+                                        <input type="radio" value="fa-euro-sign" name="categoryicon" id="input-subject-icon-euro-sign" />
+                                        <i class="fas fa-euro-sign"></i>
+                                    </label>
+                                    <label for="input-subject-icon-envelope">
+                                        <input type="radio" value="fa-envelope" name="categoryicon" id="input-subject-icon-envelope" />
+                                        <i class="fas fa-envelope"></i>
+                                    </label>
+                                    <label for="input-subject-icon-dot-circle">
+                                        <input type="radio" value="fa-dot-circle" name="categoryicon" id="input-subject-icon-dot-circle" />
+                                        <i class="fas fa-dot-circle"></i>
+                                    </label>
+                                    <label for="input-subject-icon-dollar-sign">
+                                        <input type="radio" value="fa-dollar-sign" name="categoryicon" id="input-subject-icon-dollar-sign" />
+                                        <i class="fas fa-dollar-sign"></i>
+                                    </label>
+                                    <label for="input-subject-icon-dog">
+                                        <input type="radio" value="fa-dog" name="categoryicon" id="input-subject-icon-dog" />
+                                        <i class="fas fa-dog"></i>
+                                    </label>
+                                    <label for="input-subject-icon-directions">
+                                        <input type="radio" value="fa-directions" name="categoryicon" id="input-subject-icon-directions" />
+                                        <i class="fas fa-directions"></i>
+                                    </label>
+                                    <label for="input-subject-icon-concierge-bell">
+                                        <input type="radio" value="fa-concierge-bell" name="categoryicon" id="input-subject-icon-concierge-bell" />
+                                        <i class="fas fa-concierge-bell"></i>
+                                    </label>
+                                    <label for="input-subject-icon-compass">
+                                        <input type="radio" value="fa-compass" name="categoryicon" id="input-subject-icon-compass" />
+                                        <i class="fas fa-compass"></i>
+                                    </label>
+                                    <label for="input-subject-icon-comments">
+                                        <input type="radio" value="fa-comments" name="categoryicon" id="input-subject-icon-comments" />
+                                        <i class="fas fa-comments"></i>
+                                    </label>
+                                    <label for="input-subject-icon-coffee">
+                                        <input type="radio" value="fa-coffee" name="categoryicon" id="input-subject-icon-coffee" />
+                                        <i class="fas fa-coffee"></i>
+                                    </label>
+                                    <label for="input-subject-icon-cloud">
+                                        <input type="radio" value="fa-cloud" name="categoryicon" id="input-subject-icon-cloud" />
+                                        <i class="fas fa-cloud"></i>
+                                    </label>
+                                    <label for="input-subject-icon-child">
+                                        <input type="radio" value="fa-child" name="categoryicon" id="input-subject-icon-child" />
+                                        <i class="fas fa-child"></i>
+                                    </label>
+                                    <label for="input-subject-icon-cat">
+                                        <input type="radio" value="fa-cat" name="categoryicon" id="input-subject-icon-cat" />
+                                        <i class="fas fa-cat"></i>
+                                    </label>
+                                    <label for="input-subject-icon-certificate">
+                                        <input type="radio" value="fa-certificate" name="categoryicon" id="input-subject-icon-certificate" />
+                                        <i class="fas fa-certificate"></i>
+                                    </label>
+                                    <label for="input-subject-icon-car">
+                                        <input type="radio" value="fa-car" name="categoryicon" id="input-subject-icon-car" />
+                                        <i class="fas fa-car"></i>
+                                    </label>
+                                    <label for="input-subject-icon-calendar-alt">
+                                        <input type="radio" value="fa-calendar-alt" name="categoryicon" id="input-subject-icon-calendar-alt" />
+                                        <i class="fas fa-calendar-alt"></i>
+                                    </label>
+                                    <label for="input-subject-icon-bus">
+                                        <input type="radio" value="fa-bus" name="categoryicon" id="input-subject-icon-bus" />
+                                        <i class="fas fa-bus"></i>
+                                    </label>
+                                    <label for="input-subject-icon-bullhorn">
+                                        <input type="radio" value="fa-bullhorn" name="categoryicon" id="input-subject-icon-bullhorn" />
+                                        <i class="fas fa-bullhorn"></i>
+                                    </label>
+                                    <label for="input-subject-icon-bookmark">
+                                        <input type="radio" value="fa-bookmark" name="categoryicon" id="input-subject-icon-bookmark" />
+                                        <i class="fas fa-bookmark"></i>
+                                    </label>
+                                    <label for="input-subject-icon-bolt">
+                                        <input type="radio" value="fa-bolt" name="categoryicon" id="input-subject-icon-bolt" />
+                                        <i class="fas fa-bolt"></i>
+                                    </label>
+                                    <label for="input-subject-icon-biking">
+                                        <input type="radio" value="fa-biking" name="categoryicon" id="input-subject-icon-biking" />
+                                        <i class="fas fa-biking"></i>
+                                    </label>
+                                    <label for="input-subject-icon-baby-carriage">
+                                        <input type="radio" value="fa-baby-carriage" name="categoryicon" id="input-subject-icon-baby-carriage" />
+                                        <i class="fas fa-baby-carriage"></i>
+                                    </label>
+                                    <label for="input-subject-icon-award">
+                                        <input type="radio" value="fa-award" name="categoryicon" id="input-subject-icon-award" />
+                                        <i class="fas fa-award"></i>
+                                    </label>
+                                    <label for="input-subject-icon-arrow-alt-circle-up">
+                                        <input type="radio" value="fa-arrow-alt-circle-up" name="categoryicon" id="input-subject-icon-arrow-alt-circle-up" />
+                                        <i class="fas fa-arrow-alt-circle-up"></i>
+                                    </label>
+                                    <label for="input-subject-icon-arrow-alt-circle-down">
+                                        <input type="radio" value="fa-arrow-alt-circle-down" name="categoryicon" id="input-subject-icon-arrow-alt-circle-down" />
+                                        <i class="fas fa-arrow-alt-circle-down"></i>
+                                    </label>
+                                    <label for="input-subject-icon-arrow-alt-circle-right">
+                                        <input type="radio" value="fa-arrow-alt-circle-right" name="categoryicon" id="input-subject-icon-arrow-alt-circle-right" />
+                                        <i class="fas fa-arrow-alt-circle-right"></i>
+                                    </label>
+                                    <label for="input-subject-icon-arrow-alt-circle-left">
+                                        <input type="radio" value="fa-arrow-alt-circle-left" name="categoryicon" id="input-subject-icon-arrow-alt-circle-left" />
+                                        <i class="fas fa-arrow-alt-circle-left"></i>
+                                    </label>
+                                </div>
+                            </div>
                         </div>
-                        <div class="col col-10">
+                    </div>
+                </div>
+                <div class="form-group">
+                    <div class="form-row">
+                        <div class="col">
                             <label for="input-subject">
                                 <%= _lc( 'APPOINTMENT_SUBJECT' ) %>
                             </label>

src/client/app/tmpl/gui-navbar.html

@@ -1,4 +1,4 @@
-<nav class="navbar fixed-bottom bg-gradient">
+<nav class="navbar fixed-top bg-gradient">
     <div class="container-fluid">
         <a class="navbar-brand" href="#/home">
             <!--

src/client/app/tmpl/home-appointment-item.html

@@ -46,7 +46,10 @@
                     <% }    %>
                 </div>
             <div class="appointment-subject">
-                <%= a.getIcon() %> <%= a.getSubject() %>
+                <% if ( a.getIcon() ) { %>
+                    <i class="fas <%= a.getIcon() %>"></i>
+                <% } %>
+                 <%= a.getSubject() %>
                 <% if ( a.isDraft() ) { %>
                     <span class="badge badge-warning">Entwurf</span>
                 <% } %>