mirror of
https://github.com/FH-Complete/FHC-Core.git
synced 2026-07-20 00:12:15 +00:00
- Added new VUE based JS public/js/components/Filter.js, public/js/components/Navigation.js and public/js/apps/LogsViewer.js
- Fixed bootstrap includes in FHC-Footer and FHC-Header - Moved Job Logs Viewer to VUE
This commit is contained in:
Paolo
@@ -2,42 +2,40 @@
|
||||
$includesArray = array(
|
||||
'title' => 'Logs Viewer',
|
||||
'jquery3' => true,
|
||||
'jqueryui1' => true,
|
||||
'bootstrap3' => true,
|
||||
'fontawesome4' => true,
|
||||
'sbadmintemplate3' => true,
|
||||
'bootstrap5' => true,
|
||||
'fontawesome6' => true,
|
||||
'tablesorter2' => true,
|
||||
'vue3' => true,
|
||||
'ajaxlib' => true,
|
||||
'bootstrapper' => true, // to be used only if you know what you are doing!
|
||||
'filterwidget' => true,
|
||||
'navigationwidget' => true,
|
||||
'filtercomponent' => true,
|
||||
'navigationcomponent' => true,
|
||||
'phrases' => array(
|
||||
'global' => array('mailAnXversandt'),
|
||||
'ui' => array('bitteEintragWaehlen')
|
||||
),
|
||||
'customCSSs' => 'public/css/sbadmin2/tablesort_bootstrap.css'
|
||||
'customJSs' => array('public/js/apps/LogsViewer.js')
|
||||
);
|
||||
|
||||
$this->load->view('templates/FHC-Header', $includesArray);
|
||||
?>
|
||||
|
||||
<div id="wrapper">
|
||||
<div id="main">
|
||||
|
||||
<?php echo $this->widgetlib->widget('NavigationWidget'); ?>
|
||||
<!-- NavigationWidget -->
|
||||
<navigation-widget :add-side-menu-entries="appSideMenuEntries"></navigation-widget>
|
||||
|
||||
<div id="page-wrapper">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<h3 class="page-header">
|
||||
Job Logs Viewer
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<?php $this->load->view('system/logs/logsViewerData.php'); ?>
|
||||
<div id="content">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<h3 class="page-header">
|
||||
Job Logs Viewer
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<!-- FilterWidget -->
|
||||
<filter-widget filter-type="LogsViewer" @nw-new-entry="newSideMenuEntryHandler"></filter-widget>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -52,7 +52,7 @@
|
||||
if ($bootstrap3 === true) generateJSsInclude('vendor/twbs/bootstrap3/dist/js/bootstrap.min.js');
|
||||
|
||||
// Bootstrap 5 JS
|
||||
if ($bootstrap5 === true) generateJSsInclude('vendor/twbs/bootstrap5/js/bootstrap.min.js');
|
||||
if ($bootstrap5 === true) generateJSsInclude('vendor/twbs/bootstrap5/dist/js/bootstrap.min.js');
|
||||
|
||||
// Securimage JS
|
||||
if ($captcha3 === true) generateJSsInclude('vendor/dapphp/securimage/securimage.js');
|
||||
|
||||
@@ -34,7 +34,7 @@
|
||||
if ($bootstrap3 === true) generateCSSsInclude('vendor/twbs/bootstrap3/dist/css/bootstrap.min.css');
|
||||
|
||||
// Bootstrap 5 CSS
|
||||
if ($bootstrap5 === true) generateCSSsInclude('vendor/twbs/bootstrap5/css/bootstrap.min.css');
|
||||
if ($bootstrap5 === true) generateCSSsInclude('vendor/twbs/bootstrap5/dist/css/bootstrap.min.css');
|
||||
|
||||
// jQuery UI CSS
|
||||
if ($jqueryui1 === true) generateCSSsInclude('vendor/components/jqueryui/themes/base/jquery-ui.min.css');
|
||||
|
||||
@@ -0,0 +1,19 @@
|
||||
const logsViewerApp = Vue.createApp({
|
||||
data() {
|
||||
return {
|
||||
appSideMenuEntries: {}
|
||||
};
|
||||
},
|
||||
components: {
|
||||
Navigation,
|
||||
Filter
|
||||
},
|
||||
methods: {
|
||||
newSideMenuEntryHandler(payload) {
|
||||
this.appSideMenuEntries = payload;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
logsViewerApp.mount('#main');
|
||||
|
||||
@@ -0,0 +1,132 @@
|
||||
const Filter = {
|
||||
emits: ['nwNewEntry'],
|
||||
data() {
|
||||
return {
|
||||
fieldsToDisplay: null,
|
||||
dataset: null,
|
||||
selectedFields: null
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.fetchFilterData();
|
||||
},
|
||||
updated() {
|
||||
var filterWidgetTablesorter = $("#filterTableDataset");
|
||||
|
||||
// Checks if the table contains data (rows)
|
||||
if (filterWidgetTablesorter.find("tbody:empty").length == 0
|
||||
&& filterWidgetTablesorter.find("tr:empty").length == 0
|
||||
&& filterWidgetTablesorter.hasClass("table-condensed"))
|
||||
{
|
||||
filterWidgetTablesorter.tablesorter({
|
||||
dateFormat: "ddmmyyyy",
|
||||
widgets: ["zebra", "filter"],
|
||||
widgetOptions: {
|
||||
filter_saveFilters : true
|
||||
}
|
||||
});
|
||||
|
||||
$.tablesorter.updateAll(filterWidgetTablesorter[0].config, true, null);
|
||||
}
|
||||
},
|
||||
props: {
|
||||
filterType: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clkNewEntry() {
|
||||
console.log('emit');
|
||||
this.$emit(
|
||||
'nwNewEntry',
|
||||
{
|
||||
"link": "#",
|
||||
"description": 'New side menu ' + Math.floor(Math.random() * 10),
|
||||
"icon": "dashboard",
|
||||
"sort": 1
|
||||
}
|
||||
);
|
||||
},
|
||||
fetchFilterData() {
|
||||
FHC_AjaxClient.ajaxCallGet(
|
||||
"widgets/Filters/getFilter",
|
||||
{
|
||||
filterUniqueId: this.getFilterUniqueIdPrefix(),
|
||||
filterType: this.filterType, // props!!
|
||||
filterId: 170
|
||||
},
|
||||
{
|
||||
successCallback: this.renderTableSorter
|
||||
}
|
||||
);
|
||||
},
|
||||
getFilterUniqueIdPrefix() {
|
||||
return FHC_JS_DATA_STORAGE_OBJECT.called_path + "/" + FHC_JS_DATA_STORAGE_OBJECT.called_method;
|
||||
},
|
||||
renderTableSorter(data) {
|
||||
|
||||
if (FHC_AjaxClient.hasData(data))
|
||||
{
|
||||
this._setFieldsToDisplay(FHC_AjaxClient.getData(data));
|
||||
this.dataset = FHC_AjaxClient.getData(data).dataset;
|
||||
this.selectedFields = FHC_AjaxClient.getData(data).selectedFields;
|
||||
}
|
||||
else
|
||||
{
|
||||
console.error(FHC_AjaxClient.getError(data));
|
||||
}
|
||||
},
|
||||
_setFieldsToDisplay(data) {
|
||||
|
||||
let arrayFieldsToDisplay = [];
|
||||
|
||||
if (data.hasOwnProperty("selectedFields") && $.isArray(data.selectedFields))
|
||||
{
|
||||
if (data.hasOwnProperty("columnsAliases") && $.isArray(data.columnsAliases))
|
||||
{
|
||||
for (let sfc = 0; sfc < data.selectedFields.length; sfc++)
|
||||
{
|
||||
for (let fc = 0; fc < data.fields.length; fc++)
|
||||
{
|
||||
if (data.selectedFields[sfc] == data.fields[fc])
|
||||
{
|
||||
arrayFieldsToDisplay[sfc] = data.columnsAliases[fc];
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
arrayFieldsToDisplay = data.selectedFields;
|
||||
}
|
||||
}
|
||||
|
||||
this.fieldsToDisplay = arrayFieldsToDisplay;
|
||||
}
|
||||
},
|
||||
template: `
|
||||
<button type="button" @click="clkNewEntry">New Entry</button>
|
||||
<table class="tablesorter table-bordered table-responsive" id="filterTableDataset">
|
||||
<thead>
|
||||
<tr>
|
||||
<template v-for="fieldToDisplay in fieldsToDisplay">
|
||||
<th title='{{ fieldToDisplay }}'>{{ fieldToDisplay }}</th>
|
||||
</template>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<template v-for="record in dataset">
|
||||
<tr class="">
|
||||
<template v-for="(value, property) in record">
|
||||
<template v-if="selectedFields.includes(property)">
|
||||
<td>{{ value }}</td>
|
||||
</template>
|
||||
</template>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
`
|
||||
};
|
||||
|
||||
@@ -0,0 +1,106 @@
|
||||
const Navigation = {
|
||||
data() {
|
||||
return {
|
||||
headerMenu: {},
|
||||
sideMenu: {}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.fetchDataHeader();
|
||||
this.fetchDataMenu();
|
||||
},
|
||||
props: {
|
||||
addHeaderMenuEntries: Object,
|
||||
addSideMenuEntries: Object
|
||||
},
|
||||
methods: {
|
||||
getNavigationPage() {
|
||||
return FHC_JS_DATA_STORAGE_OBJECT.called_path + "/" + FHC_JS_DATA_STORAGE_OBJECT.called_method;
|
||||
},
|
||||
fetchDataHeader() {
|
||||
// Retrives the header menu array
|
||||
FHC_AjaxClient.ajaxCallGet(
|
||||
'system/Navigation/header',
|
||||
{
|
||||
navigation_page: this.getNavigationPage()
|
||||
},
|
||||
{
|
||||
successCallback: this.setHeaders
|
||||
}
|
||||
);
|
||||
},
|
||||
setHeaders(data) {
|
||||
if (FHC_AjaxClient.hasData(data)) this.headerMenu = FHC_AjaxClient.getData(data);
|
||||
},
|
||||
fetchDataMenu() {
|
||||
// Retrives the side menu array
|
||||
FHC_AjaxClient.ajaxCallGet(
|
||||
'system/Navigation/menu',
|
||||
{
|
||||
navigation_page: this.getNavigationPage()
|
||||
},
|
||||
{
|
||||
successCallback: this.setSideMenu
|
||||
}
|
||||
);
|
||||
},
|
||||
setSideMenu(data) {
|
||||
if (FHC_AjaxClient.hasData(data)) this.sideMenu = FHC_AjaxClient.getData(data);
|
||||
},
|
||||
getDataBsToggle(header) {
|
||||
return !header.children ? null : 'dropdown';
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
headerMenuEntries() {
|
||||
if (this.headerMenu != null && this.addHeaderMenuEntries != null && Object.keys(this.addHeaderMenuEntries).length > 0)
|
||||
{
|
||||
this.headerMenu[this.addHeaderMenuEntries.description] = this.addHeaderMenuEntries;
|
||||
}
|
||||
return this.headerMenu;
|
||||
},
|
||||
sideMenuEntries() {
|
||||
if (this.sideMenu != null && this.addSideMenuEntries != null && Object.keys(this.addSideMenuEntries).length > 0)
|
||||
{
|
||||
this.sideMenu[this.addSideMenuEntries.description] = this.addSideMenuEntries;
|
||||
}
|
||||
return this.sideMenu;
|
||||
}
|
||||
},
|
||||
template: `
|
||||
<!-- Top menu -->
|
||||
<nav class="navbar navbar-expand-lg navbar-header">
|
||||
<ul class="navbar-nav">
|
||||
<!-- 1st level -->
|
||||
<template v-for="header in headerMenuEntries">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link header-menu-link-entry" v-bind:data-bs-toggle="this.getDataBsToggle(header)" v-bind:class="{ 'dropdown-toggle': header.children }" v-bind:href="header.link">
|
||||
<i class="fa-solid" v-bind:class="'fa-' + header.icon" v-if="header.icon"></i> {{ header.description }}
|
||||
</a>
|
||||
<ul class="dropdown-menu" v-if="header.children">
|
||||
<!-- 2nd level -->
|
||||
<template v-for="child in header.children">
|
||||
<li><a class="dropdown-item" v-bind:href="child.link">{{ child.description }}</a></li>
|
||||
</template>
|
||||
</ul>
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<!-- Left side menu -->
|
||||
<nav class="navbar sidebar">
|
||||
<ul class="navbar-nav">
|
||||
<!-- 1st level -->
|
||||
<template v-for="menu in sideMenuEntries">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" v-bind:href="menu.link">
|
||||
<i class="fa fa-fw" v-bind:class="'fa-'+ menu.icon"></i> {{ menu.description }}
|
||||
</a>
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
</nav>
|
||||
`
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user