New elements can be created, existing elements can be edited

admin/manage_custom_nav_elements.php

@@ -40,18 +40,10 @@ require_once(HESK_PATH . 'inc/show_admin_nav.inc.php');
             </div>
             <div class="box-body">
                 <div class="row">
+                    <div class="col-md-12 text-right">
+                        <button id="create-button" class="btn btn-success">Create New Element [!]</button>
+                    </div>
                     <div class="col-md-12">
-                        <?php
-                        /* This will handle error, success and notice messages */
-                        hesk_handle_messages();
-
-                        $languages = array();
-                        foreach ($hesk_settings['languages'] as $key => $value) {
-                            $languages[$key] = $hesk_settings['languages'][$key]['folder'];
-                        }
-
-                        $customElementsRs = hesk_dbQuery("SELECT * FROM `" . hesk_dbEscape($hesk_settings['db_pfix']) . "custom_nav_element`");
-                        ?>
                         <table class="table table-default">
                             <thead>
                             <tr>
@@ -101,6 +93,7 @@ require_once(HESK_PATH . 'inc/show_admin_nav.inc.php');
                                         <option value="2">Customer Navbar</option>
                                         <option value="3">Staff Navbar</option>
                                     </select>
+                                    <div class="help-block with-errors"></div>
                                 </div>
                             </div>
                         </div>
@@ -119,6 +112,7 @@ require_once(HESK_PATH . 'inc/show_admin_nav.inc.php');
                                                id="text[<?php echo $language; ?>" placeholder="<?php echo $language; ?>"
                                                data-error="<?php echo htmlspecialchars($hesklang['this_field_is_required']); ?>"
                                                required>
+                                        <div class="help-block with-errors"></div>
                                     </div>
                                 </div>
                             <?php endforeach; ?>
@@ -135,6 +129,7 @@ require_once(HESK_PATH . 'inc/show_admin_nav.inc.php');
                                                    id="subtext[<?php echo $language; ?>" placeholder="<?php echo $language; ?>"
                                                    data-error="<?php echo htmlspecialchars($hesklang['this_field_is_required']); ?>"
                                                    required>
+                                            <div class="help-block with-errors"></div>
                                         </div>
                                     </div>
                                 <?php endforeach; ?>
@@ -151,12 +146,16 @@ require_once(HESK_PATH . 'inc/show_admin_nav.inc.php');
                                         <option value="image-url">Image URL</option>
                                         <option value="font-icon">Font Icon</option>
                                     </select>
+                                    <div class="help-block with-errors"></div>
                                 </div>
                             </div>
                             <div class="form-group" id="image-url-group">
                                 <label for="image-url" class="col-md-4 col-sm-12 control-label">Image URL [!]</label>
                                 <div class="col-md-8 col-sm-12">
-                                    <input type="text" name="image-url" class="form-control" placeholder="Image URL[!]">
+                                    <input type="text" name="image-url" class="form-control"
+                                           data-error="<?php echo htmlspecialchars($hesklang['this_field_is_required']); ?>"
+                                           placeholder="Image URL[!]" required>
+                                    <div class="help-block with-errors"></div>
                                 </div>
                             </div>
                             <div class="form-group" id="font-icon-group">
@@ -194,7 +193,7 @@ require_once(HESK_PATH . 'inc/show_admin_nav.inc.php');
 <p style="display: none" id="lang_edit"><?php echo $hesklang['edit']; ?></p>
 <p style="display: none" id="lang_delete"><?php echo $hesklang['delete']; ?></p>
 <script type="text/html" id="nav-element-template">
-    <tr id="nav-element-template">
+    <tr>
         <td><span data-property="id"></span></td>
         <td><span>
                 <ul data-property="text" class="list-unstyled"></ul>

internal-api/js/manage-custom-nav-elements.js

@@ -3,6 +3,7 @@ var elements = [];
 $(document).ready(function() {
     loadTable();
     bindEditModal();
+    bindCreateModal();
 
     $('[data-toggle="nav-iconpicker"]').iconpicker({
         iconset: ['fontawesome', 'octicon'],
@@ -38,6 +39,7 @@ $(document).ready(function() {
 
     $('form#manage-nav-element').submit(function(e) {
         e.preventDefault();
+        var heskUrl = $('#heskUrl').text();
 
         var $modal = $('#nav-element-modal');
 
@@ -65,6 +67,8 @@ $(document).ready(function() {
             fontIcon = $modal.find('.iconpicker').find('input[type="hidden"]').val();
         }
 
+        var id = parseInt($modal.find('input[name="id"]').val());
+
         var data = {
             place: place,
             text: text,
@@ -73,11 +77,30 @@ $(document).ready(function() {
             fontIcon: fontIcon
         };
 
-        console.log(data);
+        var url = heskUrl + '/api/v1-internal/custom-navigation/';
+        var method = 'POST';
+
+        if (id !== -1) {
+            url += id;
+            method = 'PUT';
+        }
+
+        $.ajax({
+            method: method,
+            url: url,
+            headers: { 'X-Internal-Call': true },
+            data: JSON.stringify(data),
+            success: function(data) {
+                loadTable($modal);
+            },
+            error: function(data) {
+                console.error(data);
+            }
+        });
     });
 });
 
-function loadTable() {
+function loadTable(modalToClose) {
     var heskUrl = $('#heskUrl').text();
     var places = [];
     places[1] = 'Homepage - Block';
@@ -89,6 +112,9 @@ function loadTable() {
         url: heskUrl + '/api/v1-internal/custom-navigation/all',
         headers: { 'X-Internal-Call': true },
         success: function(data) {
+            $('#table-body').html('');
+            elements = [];
+
             $.each(data, function() {
                 var $template = $($('#nav-element-template').html());
 
@@ -117,10 +143,15 @@ function loadTable() {
                 }
                 $template.find('ul[data-property="subtext"]').html(subtext);
 
+                console.log($template);
                 $('#table-body').append($template);
 
                 elements[this.id] = this;
             });
+
+            if (modalToClose !== undefined) {
+                modalToClose.modal('hide');
+            }
         },
         error: function(data) {
             console.error(data);
@@ -158,7 +189,7 @@ function bindEditModal() {
             $(this).val(element.subtext[language]);
         });
 
-        if (this.place === 1) {
+        if (element.place === 1) {
             $('#subtext').show();
         } else {
             $('#subtext').hide();
@@ -177,6 +208,36 @@ function bindEditModal() {
         }
 
 
+        $modal.modal('show');
+    });
+}
+
+function bindCreateModal() {
+    $('#create-button').click(function() {
+        var $modal = $('#nav-element-modal');
+        $modal.find('select[name="place"]').val(1);
+        $modal.find('input[name="id"]').val(-1);
+        var $textLanguages = $modal.find('[data-text-language]');
+        $.each($textLanguages, function() {
+            var language = $(this).data('text-language');
+
+            $(this).val('');
+        });
+
+        var $subtextLanguages = $modal.find('[data-subtext-language]');
+        $.each($subtextLanguages, function() {
+            var language = $(this).data('subtext-language');
+
+            $(this).val('');
+        });
+
+        $('#subtext').show();
+
+        $modal.find('select[name="image-type"]').val('image-url');
+        $modal.find('input[name="image-url"]').val('');
+        $modal.find('#font-icon-group').hide();
+        $modal.find('#image-url-group').show();
+
         $modal.modal('show');
     });
 }