From 944552aba2e86c29f065dfcbdd2d44e075324c20 Mon Sep 17 00:00:00 2001
From: Mike Koch <mkoch227@gmail.com>
Date: Sun, 14 May 2017 22:09:05 -0400
Subject: [PATCH] Slowly working on the edit nav item modal

---
 admin/manage_custom_nav_elements.php          | 185 ++++++++++++++----
 internal-api/js/manage-custom-nav-elements.js |  44 ++++-
 2 files changed, 179 insertions(+), 50 deletions(-)

diff --git a/admin/manage_custom_nav_elements.php b/admin/manage_custom_nav_elements.php
index 7d06e59c..8f8514af 100644
--- a/admin/manage_custom_nav_elements.php
+++ b/admin/manage_custom_nav_elements.php
@@ -25,54 +25,156 @@ require_once(HESK_PATH . 'inc/headerAdmin.inc.php');
 /* Print main manage users page */
 require_once(HESK_PATH . 'inc/show_admin_nav.inc.php');
 ?>
-    <div class="content-wrapper">
-        <section class="content">
-            <div class="box">
-                <div class="box-header with-border">
-                    <h1 class="box-title">
-                        Custom Nav Menu Elements[!]
-                    </h1>
-                    <div class="box-tools pull-right">
-                        <button type="button" class="btn btn-box-tool" data-widget="collapse">
-                            <i class="fa fa-minus"></i>
-                        </button>
-                    </div>
+<div class="content-wrapper">
+    <section class="content">
+        <div class="box">
+            <div class="box-header with-border">
+                <h1 class="box-title">
+                    Custom Nav Menu Elements[!]
+                </h1>
+                <div class="box-tools pull-right">
+                    <button type="button" class="btn btn-box-tool" data-widget="collapse">
+                        <i class="fa fa-minus"></i>
+                    </button>
                 </div>
-                <div class="box-body">
-                    <div class="row">
-                        <div class="col-md-12">
-                            <?php
-                            /* This will handle error, success and notice messages */
-                            hesk_handle_messages();
+            </div>
+            <div class="box-body">
+                <div class="row">
+                    <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'];
-                            }
+                        $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>
-                                    <th>ID</th>
-                                    <th>Text</th>
-                                    <th>Subtext</th>
-                                    <th>Image URL / Font Icon</th>
-                                    <th>Place</th>
-                                    <th>Actions</th>
-                                </tr>
-                                </thead>
-                                <tbody id="table-body">
-
-                                </tbody>
-                            </table>
-                        </div>
+                        $customElementsRs = hesk_dbQuery("SELECT * FROM `" . hesk_dbEscape($hesk_settings['db_pfix']) . "custom_nav_element`");
+                        ?>
+                        <table class="table table-default">
+                            <thead>
+                            <tr>
+                                <th>ID</th>
+                                <th>Text</th>
+                                <th>Subtext</th>
+                                <th>Image URL / Font Icon</th>
+                                <th>Place</th>
+                                <th>Actions</th>
+                            </tr>
+                            </thead>
+                            <tbody id="table-body">
+                            <tr id="loader">
+                                <td colspan="6">
+                                    <i class="fa fa-spinner fa-spin"></i> Loading Custom Nav Elements&hellip;
+                                </td>
+                            </tr>
+                            </tbody>
+                        </table>
                     </div>
                 </div>
             </div>
-        </section>
+        </div>
+    </section>
+</div>
+<div class="modal fade" id="nav-element-modal" tabindex="-1" role="dialog" style="overflow: hidden">
+    <div class="modal-dialog modal-lg" role="document">
+        <div class="modal-content">
+            <div class="modal-header" style="cursor: move">
+                <button type="button" class="close cancel-callback" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                <h4 class="modal-title" id="myModalLabel">
+                    <?php echo 'Edit Custom Nav Element'; ?>
+                </h4>
+            </div>
+            <form id="create-form" class="form-horizontal" data-toggle="validator">
+                <div class="modal-body">
+                    <div class="row">
+                        <div class="col-md-12">
+                            <div class="form-group">
+                                <label for="place" class="col-md-4 col-sm-12 control-label">Place[!]</label>
+                                <div class="col-md-8 col-sm-12">
+                                    <select name="place" id="place" class="form-control">
+                                        <option value="1">Homepage - Block</option>
+                                        <option value="2">Customer Navbar</option>
+                                        <option value="3">Staff Navbar</option>
+                                    </select>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-md-6 col-sm-12">
+                            <h4>Text[!]</h4>
+                            <?php foreach ($hesk_settings['languages'] as $language => $value): ?>
+                                <div class="form-group">
+                                    <label for="text[<?php echo $language; ?>]" class="col-md-4 col-sm-12 control-label">
+                                        <?php echo $language; ?>
+                                    </label>
+                                    <div class="col-md-8 col-sm-12">
+                                        <input type="text" name="text[<?php echo $language; ?>]" class="form-control"
+                                               data-text-language="<?php echo $language; ?>"
+                                               id="text[<?php echo $language; ?>" placeholder="<?php echo $language; ?>">
+                                    </div>
+                                </div>
+                            <?php endforeach; ?>
+                            <div id="subtext">
+                                <h4>Subtext[!]</h4>
+                                <?php foreach ($hesk_settings['languages'] as $language => $value): ?>
+                                    <div class="form-group">
+                                        <label for="subtext[<?php echo $language; ?>]" class="col-md-4 col-sm-12 control-label">
+                                            <?php echo $language; ?>
+                                        </label>
+                                        <div class="col-md-8 col-sm-12">
+                                            <input type="text" name="subtext[<?php echo $language; ?>]" class="form-control"
+                                                   data-subtext-language="<?php echo $language; ?>"
+                                                   id="subtext[<?php echo $language; ?>" placeholder="<?php echo $language; ?>">
+                                        </div>
+                                    </div>
+                                <?php endforeach; ?>
+                            </div>
+                        </div>
+                        <div class="col-md-6 col-sm-12">
+                            <h4>Image[!]</h4>
+                            <div class="form-group">
+                                <label for="image-type" class="col-md-4 col-sm-12 control-label">Image Type[!]</label>
+                                <div class="col-md-8 col-sm-12">
+                                    <select name="image-type" id="image-type" class="form-control">
+                                        <option value="image-url">Image URL</option>
+                                        <option value="font-icon">Font Icon</option>
+                                    </select>
+                                </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" class="form-control" placeholder="Image URL[!]">
+                                </div>
+                            </div>
+                            <div class="form-group" id="font-icon-group">
+                                <label for="font-icon" class="col-md-4 col-sm-12 control-label">Font Icon [!]</label>
+                                <div class="col-md-8 col-sm-12">
+                                    <span>Iconpicker</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <div class="btn-group">
+                        <button type="button" class="btn btn-default cancel-callback" data-dismiss="modal">
+                            <i class="fa fa-times-circle"></i>
+                            <span><?php echo $hesklang['cancel']; ?></span>
+                        </button>
+                        <button type="button" class="btn btn-success callback-btn">
+                            <i class="fa fa-check-circle"></i>
+                            <span><?php echo $hesklang['save']; ?></span>
+                        </button>
+                    </div>
+                </div>
+            </form>
+        </div>
     </div>
+</div>
 <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">
@@ -83,6 +185,7 @@ require_once(HESK_PATH . 'inc/show_admin_nav.inc.php');
             </span></td>
         <td><span data-property="subtext"></span></td>
         <td><span data-property="image-or-font"></span></td>
+        <td style="display: none"><span data-property="place-id"></span></td>
         <td><span data-property="place"></span></td>
         <td>
             <a href="#" data-action="edit">
diff --git a/internal-api/js/manage-custom-nav-elements.js b/internal-api/js/manage-custom-nav-elements.js
index 24dd57cd..957d5a47 100644
--- a/internal-api/js/manage-custom-nav-elements.js
+++ b/internal-api/js/manage-custom-nav-elements.js
@@ -1,10 +1,22 @@
 $(document).ready(function() {
-    var heskUrl = $('#heskUrl').text();
+    loadTable();
 
+    $(document).on('click', '[data-action="edit"]', function() {
+        var $tableRow = $(this).parent().parent();
+        var $modal = $('#nav-element-modal');
+
+        $modal.find('select[name="place"]').val($tableRow.find('[data-property="place-id"]').text());
+
+        $modal.modal('show');
+    })
+});
+
+function loadTable() {
+    var heskUrl = $('#heskUrl').text();
     var places = [];
     places[1] = 'Homepage - Block';
-    places[2] = 'Customer Navigation';
-    places[3] = 'Staff Navigation';
+    places[2] = 'Customer Navbar';
+    places[3] = 'Staff Navbar';
 
     $.ajax({
         method: 'GET',
@@ -13,8 +25,7 @@ $(document).ready(function() {
         success: function(data) {
             $.each(data, function() {
                 var $template = $($('#nav-element-template').html());
-                //var $template = $(template);
-                console.log($template);
+
                 $template.find('span[data-property="id"]').text(this.id);
                 if (this.imageUrl === null) {
                     $template.find('span[data-property="image-or-font"]').html('<i class="' + escape(this.fontIcon) + '"></i>');
@@ -23,6 +34,7 @@ $(document).ready(function() {
                 }
 
                 $template.find('span[data-property="place"]').text(places[this.place]);
+                $template.find('span[data-property="place-id"]').text(this.place);
 
                 var text = '';
                 $.each(this.text, function(key, value) {
@@ -30,21 +42,35 @@ $(document).ready(function() {
                 });
                 $template.find('ul[data-property="text"]').html(text);
 
-                $.each(this.subtext, function() {
-                    console.log(this);
-                });
+                var subtext = '-';
+                if (this.place == 1) {
+                    subtext = '';
+                    $.each(this.subtext, function(key, value) {
+                        subtext += '<li><b>' + escape(key) + ':</b> ' + escape(value) + '</li>';
+                    });
+                }
+                $template.find('ul[data-property="subtext"]').html(text);
 
                 $('#table-body').append($template);
             });
         },
         error: function(data) {
             console.error(data);
+        },
+        complete: function() {
+            $('#loader').hide();
         }
     });
-});
+}
 
 function escape(str) {
     var div = document.createElement('div');
     div.appendChild(document.createTextNode(str));
     return div.innerHTML;
+}
+
+function displayModal(element) {
+    var creatingElement = element === undefined;
+
+    var $form = $('#nav-element-modal').find('form');
 }
\ No newline at end of file