Add ability to show/hide categories on the calendar view

admin/calendar.php

@@ -53,6 +53,7 @@ define('MFH_CALENDAR', 1);
 $rs = hesk_dbQuery("SELECT `id`, `name`, `color` FROM `" . hesk_dbEscape($hesk_settings['db_pfix']) . "categories` ORDER BY `cat_order`");
 $categories = [];
 while ($row = hesk_dbFetchAssoc($rs)) {
+    $row['css_style'] = $row['color'] == null ? 'color: black; border: solid 1px #000' : 'background: ' . $row['color'];
     $categories[] = $row;
 }
 
@@ -64,7 +65,28 @@ require_once(HESK_PATH . 'inc/show_admin_nav.inc.php');
 ?>
 
 <div class="row pad-20">
-    <div class="col-lg-12">
+    <div class="col-lg-3">
+        <div class="panel panel-default">
+            <div class="panel-heading">
+                <h4>Categories</h4>
+            </div>
+            <div class="panel-body">
+                <ul class="list-unstyled">
+                <?php foreach ($categories as $category): ?>
+                    <li class="move-down-20 move-right-20">
+                        <div class="checkbox">
+                            <input type="checkbox" name="category-toggle" value="<?php echo $category['id']; ?>" checked>
+                        </div>
+                        <span class="label background-volitaile category-label" style="<?php echo $category['css_style']; ?>">
+                            <?php echo $category['name']; ?>
+                        </span>
+                    </li>
+                <?php endforeach; ?>
+                </ul>
+            </div>
+        </div>
+    </div>
+    <div class="col-lg-9">
         <div class="panel panel-default">
             <div class="panel-heading">
                 <h4>Calendar</h4>

admin/manage_categories.php

@@ -262,11 +262,11 @@ while ($mycat = hesk_dbFetchAssoc($res)) {
                         }
 
                         $tmp = $i ? 'White' : 'Blue';
-                        $style = 'font-weight:normal;font-size:1em';
+                        $style = '';
                         if ($mycat['color'] == null) {
-                            $style .= ';color: black';
+                            $style .= 'color: black; border: solid 1px #000';
                         } else {
-                            $style .= ';background: ' . $mycat['color'];
+                            $style .= 'background: ' . $mycat['color'];
                         }
                         $i = $i ? 0 : 1;
 
@@ -307,7 +307,7 @@ while ($mycat = hesk_dbFetchAssoc($res)) {
                     data-color="'. htmlspecialchars($mycat['color']) . '" data-priority="' . $mycat['priority'] . '"
                     data-manager="' . $mycat['manager'] . '">
                 <td style="display: none">' . $mycat['id'] . '</td>
-                <td><span class="label background-volatile" style="'.$style.'">' . $mycat['name'] . '</span></td>
+                <td><span class="label background-volatile category-label" style="'.$style.'">' . $mycat['name'] . '</span></td>
                 <td width="1" style="white-space: nowrap;">' . $priorities[$mycat['priority']]['formatted'] . '</td>
                 <td><a href="show_tickets.php?category=' . $mycat['id'] . '&amp;s_all=1&amp;s_my=1&amp;s_ot=1&amp;s_un=1" alt="' . $hesklang['list_tickets_cat'] . '" title="' . $hesklang['list_tickets_cat'] . '">' . $all . '</a></td>
                 <td>

css/mods-for-hesk.css

@@ -315,4 +315,9 @@ div.setupButtons {
 
 .no-bottom-border {
     border-bottom: none;
+}
+
+.category-label {
+    font-weight: normal;
+    font-size: 1em;
 }

js/calendar/mods-for-hesk-calendar.js

@@ -214,6 +214,7 @@ $(document).ready(function() {
             success: function(id) {
                 addToCalendar(id, data, "Event successfully created");
                 $('#create-event-modal').modal('hide');
+                updateCategoryVisibility();
             },
             error: function(data) {
                 $.jGrowl('An error occurred when trying to create the event', { theme: 'alert-danger', closeTemplate: '' });
@@ -262,6 +263,8 @@ $(document).ready(function() {
             }
         });
     });
+
+    $('input[name="category-toggle"]').change(updateCategoryVisibility);
 });
 
 function addToCalendar(id, event, successMessage) {
@@ -290,7 +293,8 @@ function buildEvent(id, dbObject) {
             color: endOfDay.isBefore() ? '#dd0000' : 'green',
             allDay: true,
             type: dbObject.type,
-            categoryId: dbObject.categoryId
+            categoryId: dbObject.categoryId,
+            className: 'category-' + dbObject.categoryId
         };
     }
 
@@ -305,6 +309,7 @@ function buildEvent(id, dbObject) {
         type: dbObject.type,
         categoryId: dbObject.categoryId,
         categoryName: dbObject.categoryName,
+        className: 'category-' + dbObject.categoryId,
         color: dbObject.categoryColor,
         textColor: calculateTextColor(dbObject.categoryColor)
     };
@@ -395,4 +400,16 @@ function displayEditModal(date) {
     $form.find('select[name="category"] option[value="' + date.categoryId + '"]').prop('selected', true);
 
     $('#edit-event-modal').modal('show');
+}
+
+function updateCategoryVisibility() {
+    $('input[name="category-toggle"]').each(function() {
+        $this = $(this);
+
+        if ($this.is(':checked')) {
+            $('.category-' + $this.val()).show();
+        } else {
+            $('.category-' + $this.val()).hide();
+        }
+    });
 }