Slowly working on the edit nav item modal

This commit is contained in:
Mike Koch 2017-05-14 22:09:05 -04:00
parent 6b05ee31ab
commit 944552aba2
2 changed files with 179 additions and 50 deletions

View File

@ -25,54 +25,156 @@ require_once(HESK_PATH . 'inc/headerAdmin.inc.php');
/* Print main manage users page */ /* Print main manage users page */
require_once(HESK_PATH . 'inc/show_admin_nav.inc.php'); require_once(HESK_PATH . 'inc/show_admin_nav.inc.php');
?> ?>
<div class="content-wrapper"> <div class="content-wrapper">
<section class="content"> <section class="content">
<div class="box"> <div class="box">
<div class="box-header with-border"> <div class="box-header with-border">
<h1 class="box-title"> <h1 class="box-title">
Custom Nav Menu Elements[!] Custom Nav Menu Elements[!]
</h1> </h1>
<div class="box-tools pull-right"> <div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-widget="collapse"> <button type="button" class="btn btn-box-tool" data-widget="collapse">
<i class="fa fa-minus"></i> <i class="fa fa-minus"></i>
</button> </button>
</div>
</div> </div>
<div class="box-body"> </div>
<div class="row"> <div class="box-body">
<div class="col-md-12"> <div class="row">
<?php <div class="col-md-12">
/* This will handle error, success and notice messages */ <?php
hesk_handle_messages(); /* This will handle error, success and notice messages */
hesk_handle_messages();
$languages = array(); $languages = array();
foreach ($hesk_settings['languages'] as $key => $value) { foreach ($hesk_settings['languages'] as $key => $value) {
$languages[$key] = $hesk_settings['languages'][$key]['folder']; $languages[$key] = $hesk_settings['languages'][$key]['folder'];
} }
$customElementsRs = hesk_dbQuery("SELECT * FROM `" . hesk_dbEscape($hesk_settings['db_pfix']) . "custom_nav_element`"); $customElementsRs = hesk_dbQuery("SELECT * FROM `" . hesk_dbEscape($hesk_settings['db_pfix']) . "custom_nav_element`");
?> ?>
<table class="table table-default"> <table class="table table-default">
<thead> <thead>
<tr> <tr>
<th>ID</th> <th>ID</th>
<th>Text</th> <th>Text</th>
<th>Subtext</th> <th>Subtext</th>
<th>Image URL / Font Icon</th> <th>Image URL / Font Icon</th>
<th>Place</th> <th>Place</th>
<th>Actions</th> <th>Actions</th>
</tr> </tr>
</thead> </thead>
<tbody id="table-body"> <tbody id="table-body">
<tr id="loader">
</tbody> <td colspan="6">
</table> <i class="fa fa-spinner fa-spin"></i> Loading Custom Nav Elements&hellip;
</div> </td>
</tr>
</tbody>
</table>
</div> </div>
</div> </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>
</div>
<p style="display: none" id="lang_edit"><?php echo $hesklang['edit']; ?></p> <p style="display: none" id="lang_edit"><?php echo $hesklang['edit']; ?></p>
<p style="display: none" id="lang_delete"><?php echo $hesklang['delete']; ?></p> <p style="display: none" id="lang_delete"><?php echo $hesklang['delete']; ?></p>
<script type="text/html" id="nav-element-template"> <script type="text/html" id="nav-element-template">
@ -83,6 +185,7 @@ require_once(HESK_PATH . 'inc/show_admin_nav.inc.php');
</span></td> </span></td>
<td><span data-property="subtext"></span></td> <td><span data-property="subtext"></span></td>
<td><span data-property="image-or-font"></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><span data-property="place"></span></td>
<td> <td>
<a href="#" data-action="edit"> <a href="#" data-action="edit">

View File

@ -1,10 +1,22 @@
$(document).ready(function() { $(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 = []; var places = [];
places[1] = 'Homepage - Block'; places[1] = 'Homepage - Block';
places[2] = 'Customer Navigation'; places[2] = 'Customer Navbar';
places[3] = 'Staff Navigation'; places[3] = 'Staff Navbar';
$.ajax({ $.ajax({
method: 'GET', method: 'GET',
@ -13,8 +25,7 @@ $(document).ready(function() {
success: function(data) { success: function(data) {
$.each(data, function() { $.each(data, function() {
var $template = $($('#nav-element-template').html()); var $template = $($('#nav-element-template').html());
//var $template = $(template);
console.log($template);
$template.find('span[data-property="id"]').text(this.id); $template.find('span[data-property="id"]').text(this.id);
if (this.imageUrl === null) { if (this.imageUrl === null) {
$template.find('span[data-property="image-or-font"]').html('<i class="' + escape(this.fontIcon) + '"></i>'); $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"]').text(places[this.place]);
$template.find('span[data-property="place-id"]').text(this.place);
var text = ''; var text = '';
$.each(this.text, function(key, value) { $.each(this.text, function(key, value) {
@ -30,21 +42,35 @@ $(document).ready(function() {
}); });
$template.find('ul[data-property="text"]').html(text); $template.find('ul[data-property="text"]').html(text);
$.each(this.subtext, function() { var subtext = '-';
console.log(this); 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); $('#table-body').append($template);
}); });
}, },
error: function(data) { error: function(data) {
console.error(data); console.error(data);
},
complete: function() {
$('#loader').hide();
} }
}); });
}); }
function escape(str) { function escape(str) {
var div = document.createElement('div'); var div = document.createElement('div');
div.appendChild(document.createTextNode(str)); div.appendChild(document.createTextNode(str));
return div.innerHTML; return div.innerHTML;
}
function displayModal(element) {
var creatingElement = element === undefined;
var $form = $('#nav-element-modal').find('form');
} }