Slowly working on the edit nav item modal

merge-requests/60/head
Mike Koch 7 years ago
parent 6b05ee31ab
commit 944552aba2

@ -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 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>
<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'];
}
$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 class="box-body">
</div>
</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">
<?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>
<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 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>
</section>
<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">

@ -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');
}
Loading…
Cancel
Save