Luca/thetool
1
0
Fork 0
Code Issues 5 Pull Requests 5 Actions Packages Projects Releases Wiki Activity

Reworked Device Module and Vue Components

Browse Source
This commit is contained in:
Luca
2024-05-28 09:12:13 +02:00
parent fa3c1b8766
commit e1cf5d5d9e
21 changed files with 321 additions and 439 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Layout/default/Devicemanufactor/Index.php
-94
View File
@@ -1,94 +0,0 @@
<?php
$pagination_baseurl = $this->getUrl($Mod, "Index");
$pagination_baseurl_params = ["filter" => $filter];
$pagination_entity_name = "Devicemanufactor";
?>
<?php include(realpath(dirname(__FILE__) . "/../../$mfLayoutPackage") . "/header.php"); ?>
<link href="<?= self::getResourcePath() ?>assets/css/datatables-std.css?<?=date('U')?>" rel="stylesheet" type="text/css"/>
<!-- start page title -->
<div class="row">
<div class="col-12">
<div class="page-title-box">
<div class="page-title-right">
<ol class="breadcrumb m-0">
<li class="breadcrumb-item"><a href="<?= self::getUrl("Dashboard") ?>"><?= MFAPPNAME_SLUG ?></a>
</li>
<li class="breadcrumb-item active">Gerätehersteller</li>
</ol>
</div>
<h4 class="page-title">Gerätehersteller</h4>
</div>
</div>
</div>
<!-- end page title -->
<div class="card">
<div class="card-body mb-3">
<div class="row">
<div class="col-12">
<div class="float-left">
<h4 class="header-title">Liste aller Gerätehersteller</h4>
</div>
<div class="float-right">
<a class="btn btn-primary mb-2" href="<?= self::getUrl("Devicemanufactor", "add") ?>"><i
class="fas fa-plus"></i><span
class="d-none d-lg-inline"> Neuen Gerätehersteller anlegen</span></a>
</div>
</div>
</div>
<!-- --><?php //include(realpath(dirname(__FILE__) . "/../") . "/tpl/pagination.php"); ?>
<!-- --><?php //include(realpath(dirname(__FILE__) . "/../") . "/tpl/pagination-summary.php"); ?>
<table id="datatable" class="table table-striped table-hover table-sm">
<thead>
<tr>
<th class="text-center">Name</th>
<th class="text-center">Erstellt von</th>
<th class="edit-width"></th>
</tr>
<tr id="filterrow">
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<?php foreach ($devicemanufactors as $devicemanufactor): ?>
<tr>
<td class="text-nowrap"><?= $devicemanufactor->name ?></td>
<td class="text-nowrap"><?= $devicemanufactor->creator->name ?>
(<?= date("d.m.Y , H:i", $devicemanufactor->create) ?>)
</td>
<td style="text-align: left; letter-spacing: 4px; font-size: 1.1em;">
<a href="<?= self::getUrl("Devicemanufactor", "edit", ["id" => $devicemanufactor->id]) ?>"><i
class="far fa-edit" title="Bearbeiten"></i></a>
<a href="<?= self::getUrl("Devicemanufactor", "delete", ["id" => $devicemanufactor->id]) ?>"
onclick="if(!confirm('Gerätehersteller wirklich löschen?')) return false;"
class="text-danger" title="Löschen"><i class="fas fa-trash"></i></a>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var hidesearch = [2];
$(document).ready(function () {
});
</script>
<script type="text/javascript" src="<?= self::getResourcePath() ?>assets/js/datatables-std.js?<?=date('U')?>"></script>
<?php include(realpath(dirname(__FILE__) . "/../../$mfLayoutPackage") . "/footer.php"); ?>
Layout/default/Devicetype/Index.php
-110
View File
@@ -1,110 +0,0 @@
<?php
$pagination_baseurl = $this->getUrl($Mod, "Index");
$pagination_baseurl_params = ["filter" => $filter];
$pagination_entity_name = "Devicetype";
?>
<?php include(realpath(dirname(__FILE__) . "/../../$mfLayoutPackage") . "/header.php"); ?>
<link href="<?= self::getResourcePath() ?>assets/css/datatables-std.css?<?= date('U') ?>" rel="stylesheet"
type="text/css"/>
<!-- start page title -->
<div class="row">
<div class="col-12">
<div class="page-title-box">
<div class="page-title-right">
<ol class="breadcrumb m-0">
<li class="breadcrumb-item"><a href="<?= self::getUrl("Dashboard") ?>"><?= MFAPPNAME_SLUG ?></a>
</li>
<li class="breadcrumb-item active">Gerätetyp</li>
</ol>
</div>
<h4 class="page-title">Gerätetyp</h4>
</div>
</div>
</div>
<!-- end page title -->
<div class="card">
<div class="card-body mb-3">
<div class="row">
<div class="col-12">
<div class="float-left">
<h4 class="header-title">Liste aller Gerätetypen</h4>
</div>
<div class="float-right">
<a class="btn btn-primary mb-2" href="<?= self::getUrl("Devicetype", "add") ?>"><i
class="fas fa-plus"></i><span
class="d-none d-lg-inline"> Neuen Gerätetyp anlegen</span></a>
</div>
</div>
</div>
<table id="datatable" class="table table-striped table-hover table-sm">
<thead>
<tr>
<th>Name</th>
<th class="text-center">Hersteller</th>
<th class="text-right">Preis</th>
<th class="text-right">max. Leistung</th>
<th class="text-right">erstellt von</th>
<th class="edit-weight"></th>
</tr>
<tr id="filterrow">
<th>Name</th>
<th>Hersteller</th>
<th>Preis</th>
<th></th>
<th></th>
<th></th>
</tr>
<thead>
<tbody>
<?php foreach ($devicetypes as $devicetype): ?>
<tr>
<td class="text-nowrap"><?= $devicetype->name ?></td>
<td class="text-center"><?= $devicetype->devicemanufactor->name ?></td>
<td class="text-right"><?= $devicetype->price ?> €</td>
<td class="text-right"><?= $devicetype->power ?> Watt</td>
<td class="text-right"><?= $devicetype->creator->name ?>
(<?= date("d.m.Y , H:i", $devicetype->create) ?>)
</td>
<td style="text-align: left; letter-spacing: 4px; font-size: 1.1em;">
<a href="<?= self::getUrl("Devicetype", "edit", ["id" => $devicetype->id]) ?>"><i
class="far fa-edit" title="Bearbeiten"></i></a>
<a href="<?= self::getUrl("Devicetype", "delete", ["id" => $devicetype->id]) ?>"
onclick="if(!confirm('Gerätetyp wirklich löschen?')) return false;" class="text-danger"
title="Löschen"><i class="fas fa-trash"></i></a>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
<!-- --><?php //include(realpath(dirname(__FILE__) . "/../") . "/tpl/pagination-summary.php"); ?>
<!-- --><?php //include(realpath(dirname(__FILE__) . "/../") . "/tpl/pagination.php"); ?>
<!---->
</div>
</div>
</div>
</div>
<script type="text/javascript">
var hidesearch = [5];
$(document).ready(function () {
});
</script>
<script type="text/javascript"
src="<?= self::getResourcePath() ?>assets/js/datatables-std.js?<?= date('U') ?>"></script>
<?php include(realpath(dirname(__FILE__) . "/../../$mfLayoutPackage") . "/footer.php"); ?>
Layout/default/DocumentationCheck/DeviceTest.php
-101
View File
@@ -1,101 +0,0 @@
<?php /** @noinspection PhpUndefinedClassInspection
* @var string $mfLayoutPackage
* @var TYPE_NAME $git_merge_ts
*/
$JSGlobals = ["BASE_URL" => self::getUrl("Domain"),
"DASHBOARD_URL" => self::getUrl("Dashboard"),
"MFAPPNAME" => MFAPPNAME_SLUG,
"PAGE_TITLE" => "Domains",
"PATH" => [
["text" => MFAPPNAME_SLUG, "href" => self::getUrl("Dashboard")],
["text" => "Voice Calls History", "href" => self::getUrl("VoiceCallHistory")]
],
"DEVICE_API_URL" => self::getUrl("Device/api"),
];
$additionalJS = [
"plugins/vue/vue.js",
"plugins/axios/axios.min.js",
"plugins/moment/moment.min.js",
"plugins/daterangepicker/daterangepicker.js",
"plugins/xlsx/xlsx.min.js",
"plugins/vue/tt-components/tt-table.js",
"plugins/vue/tt-components/tt-page-title.js",
"plugins/vue/tt-components/tt-select.js",
"plugins/vue/tt-components/tt-datepicker.js",
"plugins/vue/tt-components/tt-input.js",
"plugins/vue/tt-components/tt-autocomplete.js",
"plugins/vue/tt-components/tt-icon-select.js",
"plugins/vue/tt-components/tt-number-range.js",
];
$additionalCSS = [
"plugins/daterangepicker/daterangepicker.css",
'plugins/vue/tt-components/css/tt-table.css',
];
include(realpath(dirname(__FILE__) . "/../../$mfLayoutPackage") . "/header.php"); ?>
<div id="app">
<tt-page-title :title="window['TT_CONFIG']['PAGE_TITLE']" :path="window['TT_CONFIG']['PATH']"></tt-page-title>
<tt-table :fetch-url="window['TT_CONFIG']['DEVICE_API_URL'] + '?do=getDevices'" :config="DeviceTableConfig" small
ref="table">
<template v-slot:top-buttons>
<button type="button" class="btn btn-primary" @click="window.alert(1)">
<i class="fas fa-plus"></i>Neues Device anlegen
</button>
</template>
<template v-slot:actions="{row}">
<a @click="window.alert(row.id)"><i class="far fa-edit text-primary" title="Bearbeiten"></i></a>
<a @click="window.alert(row.id)"><i class="fas fa-trash text-danger" title="Löschen"></i></a>
</template>
<template v-slot:power="{row}">
{{ parseInt(row.power) }} Watt
</template>
<template v-slot:price="{row}">
{{ parseInt(row.price) }} €
</template>
<template v-slot:locationText="{row}">
<a :title="row.locationText" :href="row.locationUrl" v-text="row.locationText" target="_blank"></a>
</template>
</tt-table>
</div>
<script>
new Vue({
el: '#app',
data: {
window: window,
DeviceTableConfig: {
headers: [
{text: "Device Name", key: "name"},
{text: "Geräte Typ", key: "devicetype"},
{text: "Hersteller", key: "devicemanufactor"},
{text: "Pop/Adresse", key: "locationText"},
{text: "IP-Adresse", key: "ip"},
{text: "MAC-Adresse", key: "mac"},
{text: "Seriennummer", key: "serial"},
{text: "Preis", key: "price", filter: "numberRange"},
{text: "max. Leistung", key: "power", filter: "numberRange"},
{
text: "Backup", key: "backup", filter: "iconSelect", filterOptions: [
{value: "ok", text: "Letztes Backup jünger als 48 Stunden", icon: "fa-regular fa-circle-check text-success"},
{value: "aged", text: "Letztes Backup älter als 48 Stunden", icon: "fa-regular fa-circle-xmark text-danger"},
{value: "na", text: "Kein Backup", icon: "fa-regular fa-ban text-primary"}
]},
{text: "Aktionen", key: "actions"},
],
tableHeader: 'Devices',
key: 'Device',
},
},
})
</script>
<?php include(realpath(dirname(__FILE__) . "/../../$mfLayoutPackage") . "/footer.php"); ?>
Layout/default/VueViews/Vue.php
+8 -1
View File
@@ -40,10 +40,17 @@ include(realpath(dirname(__FILE__) . "/../../$mfLayoutPackage") . "/vueHeader.ph
<div id="app"> <div id="app">
<tt-page-title
v-if="window['TT_CONFIG'] && window['TT_CONFIG']['PAGE_TITLE'] && window['TT_CONFIG']['PATH']"
:title="window['TT_CONFIG']['PAGE_TITLE']"
:path="window['TT_CONFIG']['PATH']">
</tt-page-title>
<<?php echo $vueTagName; ?>></<?php echo $vueTagName; ?>> <<?php echo $vueTagName; ?>></<?php echo $vueTagName; ?>>
</div> </div>
<script> <script>
const view = new Vue({el: '#app'}); const view = new Vue({el: '#app', data: {window: window}});
</script> </script>
<?php include(realpath(dirname(__FILE__) . "/../../$mfLayoutPackage") . "/footer.php"); ?> <?php include(realpath(dirname(__FILE__) . "/../../$mfLayoutPackage") . "/footer.php"); ?>
Layout/default/menu.php
-2
View File
@@ -64,8 +64,6 @@
<li class="mobile-hide"><a href="<?=self::getUrl("Network")?>"><i class="fad fa-fw fa-network-wired text-info"></i> Netzgebiete</a></li> <li class="mobile-hide"><a href="<?=self::getUrl("Network")?>"><i class="fad fa-fw fa-network-wired text-info"></i> Netzgebiete</a></li>
<li class="has-sub-submenu" ><a href="<?=self::getUrl("Pop")?>"><i class="fad fa-fw fa-house text-info"></i> Pops</a></li> <li class="has-sub-submenu" ><a href="<?=self::getUrl("Pop")?>"><i class="fad fa-fw fa-house text-info"></i> Pops</a></li>
<li ><a href="<?=self::getUrl("Devicemanufactor")?>"><i class="fad fa-fw fa-router text-info"></i> Geräte Hersteller</a></li>
<li><a href="<?=self::getUrl("Devicetype")?>"><i class="fad fa-fw fa-router text-info"></i> Geräte Typen</a></li>
<li class="has-sub-submenu"><a href="<?=self::getUrl("Device")?>"><i class="fad fa-fw fa-router text-info "></i> Devices</a></li> <li class="has-sub-submenu"><a href="<?=self::getUrl("Device")?>"><i class="fad fa-fw fa-router text-info "></i> Devices</a></li>
<li class="has-sub-submenu"><a href="<?=self::getUrl("User")?>"><i class="fad fa-fw fa-users text-info"></i> Benutzer</a></li> <li class="has-sub-submenu"><a href="<?=self::getUrl("User")?>"><i class="fad fa-fw fa-users text-info"></i> Benutzer</a></li>
<li class="has-sub-submenu font-weight-bold mt-1 mobile-hide"><a>Grundstammdaten</a></li> <li class="has-sub-submenu font-weight-bold mt-1 mobile-hide"><a>Grundstammdaten</a></li>
application/Device/DeviceController.php
+14 -7
View File
@@ -17,21 +17,28 @@ class DeviceController extends mfBaseController
protected function indexAction() protected function indexAction()
{ {
$deviceManufacturers = array_map(function($manufacturer) { $deviceManufacturers = array_map(function($deviceManufacturer) {
return [ return [
"text" => $manufacturer->name, "id" => $deviceManufacturer->id,
"value" => $manufacturer->name, "name" => $deviceManufacturer->name,
"creator" => $deviceManufacturer->creator->name,
"created" => $deviceManufacturer->create,
]; ];
}, DevicemanufactorModel::getAll()); }, DevicemanufactorModel::getAll());
$deviceTypes = array_map(function($deviceType) { $deviceTypes = array_map(function($deviceType) {
return [ return [
"text" => $deviceType->name, "id" => $deviceType->id,
"value" => $deviceType->name, "name" => $deviceType->name,
"manufacturer" => $deviceType->devicemanufactor->name,
"price" => $deviceType->price,
"power" => $deviceType->power,
"creator" => $deviceType->creator->name,
"created" => $deviceType->create,
]; ];
}, DevicetypeModel::getAll()); }, DevicetypeModel::getAll());
$JSGlobals = ["BASE_URL" => self::getUrl("Device"), $JSGlobals = ["BASE_URL" => self::getUrl(""),
"DASHBOARD_URL" => self::getUrl("Dashboard"), "DASHBOARD_URL" => self::getUrl("Dashboard"),
"MFAPPNAME" => MFAPPNAME_SLUG, "MFAPPNAME" => MFAPPNAME_SLUG,
"PAGE_TITLE" => "Devices", "PAGE_TITLE" => "Devices",
@@ -41,7 +48,7 @@ class DeviceController extends mfBaseController
], ],
"DEVICE_MANUFACTURERS" => $deviceManufacturers, "DEVICE_MANUFACTURERS" => $deviceManufacturers,
"DEVICE_TYPES" => $deviceTypes, "DEVICE_TYPES" => $deviceTypes,
"DEVICE_API_URL" => self::getUrl("Device/api"), "DEVICES" => $this->getDevices(),
]; ];
$this->layout()->set("vueViewName", "Device"); $this->layout()->set("vueViewName", "Device");
application/Devicemanufactor/DevicemanufactorController.php
+12 -15
View File
@@ -17,11 +17,7 @@ class DevicemanufactorController extends mfBaseController
protected function indexAction() protected function indexAction()
{ {
$this->redirect("Device");
$this->layout()->setTemplate("Devicemanufactor/Index");
$devicemanufactors = DevicemanufactorModel::getAll();
$this->layout()->set("devicemanufactors", $devicemanufactors);
} }
protected function addAction() protected function addAction()
@@ -36,17 +32,17 @@ class DevicemanufactorController extends mfBaseController
if (!is_numeric($id) || !$id) { if (!is_numeric($id) || !$id) {
$this->layout()->setFlash("Gerätehersteller nicht gefunden", "error"); $this->layout()->setFlash("Gerätehersteller nicht gefunden", "error");
$this->redirect("Devicemanufactor"); $this->redirect("Device");
} }
$devicemanufactors = new Devicemanufactor($id); $devicemanufactors = new Devicemanufactor($id);
if ($devicemanufactors->id != $id) { if ($devicemanufactors->id != $id) {
$this->layout()->setFlash("Gerätehersteller nicht gefunden", "error"); $this->layout()->setFlash("Gerätehersteller nicht gefunden", "error");
$this->redirect("Devicemanufactor"); $this->redirect("Device");
} }
$this->layout()->set("devicemanufactors", $devicemanufactors); $this->layout()->set("devicemanufactors", $devicemanufactors);
return $this->addAction(); $this->addAction();
} }
protected function saveAction() protected function saveAction()
@@ -59,7 +55,7 @@ class DevicemanufactorController extends mfBaseController
$devicemanufactor = new Devicemanufactor($id); $devicemanufactor = new Devicemanufactor($id);
if (!$devicemanufactor->id) { if (!$devicemanufactor->id) {
$this->layout()->setFlash("Gerätehersteller nicht gefunden", "error"); $this->layout()->setFlash("Gerätehersteller nicht gefunden", "error");
$this->redirect("Devicemanufactor"); $this->redirect("Device");;
} }
} else { } else {
$mode = "add"; $mode = "add";
@@ -72,7 +68,7 @@ class DevicemanufactorController extends mfBaseController
if (!$data['name']) { if (!$data['name']) {
$this->layout()->setFlash("Name darf nicht leer sein", "error"); $this->layout()->setFlash("Name darf nicht leer sein", "error");
$this->redirect("Devicemanufactor"); $this->redirect("Device");;
} }
@@ -93,9 +89,9 @@ class DevicemanufactorController extends mfBaseController
if (!$id) { if (!$id) {
$this->layout()->setFlash("Gerätehersteller konnte nicht angelegt werden", "error"); $this->layout()->setFlash("Gerätehersteller konnte nicht angelegt werden", "error");
$this->redirect("Devicemanufactor"); $this->redirect("Device");
} }
if ($fsh) { if (isset($fsh) && $fsh) {
$fsh->save(); $fsh->save();
} }
if ($mode == "edit") { if ($mode == "edit") {
@@ -103,7 +99,7 @@ class DevicemanufactorController extends mfBaseController
} else if ($mode = "add") { } else if ($mode = "add") {
$this->layout()->setFlash("Gerätehersteller erfolgreich angelegt", "success"); $this->layout()->setFlash("Gerätehersteller erfolgreich angelegt", "success");
} }
$this->redirect("Devicemanufactor"); $this->redirect("Device");
} }
protected function deleteAction() protected function deleteAction()
@@ -112,11 +108,12 @@ class DevicemanufactorController extends mfBaseController
$devicemanufactor = new Devicemanufactor($id); $devicemanufactor = new Devicemanufactor($id);
if (!$devicemanufactor->id || $devicemanufactor->id != $id) { if (!$devicemanufactor->id || $devicemanufactor->id != $id) {
$this->layout()->setFlash("Gerätehersteller nicht gefunden.", "error"); $this->layout()->setFlash("Gerätehersteller nicht gefunden.", "error");
$this->redirect("Devicemanufactor"); $this->redirect("Device");
} }
$devicemanufactor->delete(); $devicemanufactor->delete();
$this->redirect("Devicemanufactor"); $this->layout()->setFlash("Gerätehersteller erfolgreich gelöscht", "success");
$this->redirect("Device");
} }
} }
application/Devicetype/DevicetypeController.php
+11 -14
View File
@@ -18,11 +18,7 @@ class DevicetypeController extends mfBaseController
protected function indexAction() protected function indexAction()
{ {
$this->redirect("Device");
$this->layout()->setTemplate("Devicetype/Index");
$devicetypes = DevicetypeModel::getAll();
$this->layout()->set("devicetypes", $devicetypes);
} }
protected function addAction() protected function addAction()
@@ -38,17 +34,17 @@ class DevicetypeController extends mfBaseController
if (!is_numeric($id) || !$id) { if (!is_numeric($id) || !$id) {
$this->layout()->setFlash("Gerätetyp nicht gefunden", "error"); $this->layout()->setFlash("Gerätetyp nicht gefunden", "error");
$this->redirect("Devicetype"); $this->redirect("Device");
} }
$devicetypes = new Devicetype($id); $devicetypes = new Devicetype($id);
if ($devicetypes->id != $id) { if ($devicetypes->id != $id) {
$this->layout()->setFlash("Gerätetyp nicht gefunden", "error"); $this->layout()->setFlash("Gerätetyp nicht gefunden", "error");
$this->redirect("Devicetype"); $this->redirect("Device");
} }
$this->layout()->set("devicetypes", $devicetypes); $this->layout()->set("devicetypes", $devicetypes);
return $this->addAction(); $this->addAction();
} }
protected function saveAction() protected function saveAction()
@@ -61,7 +57,7 @@ class DevicetypeController extends mfBaseController
$devicetype = new Devicetype($id); $devicetype = new Devicetype($id);
if (!$devicetype->id) { if (!$devicetype->id) {
$this->layout()->setFlash("Gerätetyp nicht gefunden", "error"); $this->layout()->setFlash("Gerätetyp nicht gefunden", "error");
$this->redirect("Devicetype"); $this->redirect("Device");
} }
} else { } else {
$mode = "add"; $mode = "add";
@@ -95,7 +91,7 @@ class DevicetypeController extends mfBaseController
if (!$data['name']) { if (!$data['name']) {
$this->layout()->setFlash("Name darf nicht leer sein", "error"); $this->layout()->setFlash("Name darf nicht leer sein", "error");
$this->redirect("Devicetype"); $this->redirect("Device");
} }
@@ -116,7 +112,7 @@ class DevicetypeController extends mfBaseController
if (!$id) { if (!$id) {
$this->layout()->setFlash("Gerätetyp konnte nicht angelegt werden", "error"); $this->layout()->setFlash("Gerätetyp konnte nicht angelegt werden", "error");
$this->redirect("Devicetype"); $this->redirect("Device");
} }
if ($mode == "edit") { if ($mode == "edit") {
@@ -124,7 +120,7 @@ class DevicetypeController extends mfBaseController
} else if ($mode = "add") { } else if ($mode = "add") {
$this->layout()->setFlash("Gerätetyp erfolgreich angelegt", "success"); $this->layout()->setFlash("Gerätetyp erfolgreich angelegt", "success");
} }
$this->redirect("Devicetype"); $this->redirect("Device");
} }
@@ -134,11 +130,12 @@ class DevicetypeController extends mfBaseController
$devicetype = new Devicetype($id); $devicetype = new Devicetype($id);
if (!$devicetype->id || $devicetype->id != $id) { if (!$devicetype->id || $devicetype->id != $id) {
$this->layout()->setFlash("Gerätetyp nicht gefunden.", "error"); $this->layout()->setFlash("Gerätetyp nicht gefunden.", "error");
$this->redirect("Devicetype"); $this->redirect("Device");
} }
$devicetype->delete(); $devicetype->delete();
$this->redirect("Devicetype"); $this->layout()->setFlash("Gerätetyp erfolgreich gelöscht", "success");
$this->redirect("Device");
} }
} }
public/assets/css/thetool.css
+5
View File
@@ -1,5 +1,9 @@
/* Overrides */ /* Overrides */
html {
overflow-y: scroll;
}
body { body {
color: #323a36; color: #323a36;
background-color: #e7e7e7 !important; background-color: #e7e7e7 !important;
@@ -161,6 +165,7 @@ h1, h2, h3, h4, h5, h6 {
/* allow icons in custom-file label */ /* allow icons in custom-file label */
.custom-file-label::before { .custom-file-label::before {
/*noinspection CssNoGenericFontName*/
font-family: "Font Awesome 6 Pro"; font-family: "Font Awesome 6 Pro";
content: "\f56f"; content: "\f56f";
padding-right: 6px; padding-right: 6px;
public/bundler.php
+1
View File
@@ -30,6 +30,7 @@ $jsFiles = [
"plugins/moment/moment.min.js", "plugins/moment/moment.min.js",
"plugins/daterangepicker/daterangepicker.js", "plugins/daterangepicker/daterangepicker.js",
"plugins/vue/" . (isset($_GET['VUE_DEBUG']) || $_SERVER['HTTP_HOST'] === "localhost" ? "vue.js" : "vue.min.js"), "plugins/vue/" . (isset($_GET['VUE_DEBUG']) || $_SERVER['HTTP_HOST'] === "localhost" ? "vue.js" : "vue.min.js"),
"plugins/vue/tt-components/tt-card.js",
"plugins/vue/tt-components/tt-table.js", "plugins/vue/tt-components/tt-table.js",
"plugins/vue/tt-components/tt-page-title.js", "plugins/vue/tt-components/tt-page-title.js",
"plugins/vue/tt-components/tt-loader.js", "plugins/vue/tt-components/tt-loader.js",
public/js/pages/Device/Device.js
+201 -54
View File
@@ -1,72 +1,219 @@
Vue.component('Device', { const deviceManufacturerFilterOptions = window?.TT_CONFIG?.DEVICE_MANUFACTURERS.map(manufacturer => ({
value: manufacturer.name,
text: manufacturer.name,
}));
const deviceTypeFilterOptions = window?.TT_CONFIG?.DEVICE_TYPES.map(type => ({
value: type.name,
text: type.name,
}));
Vue.component('device-view-switch', {
//language=Vue //language=Vue
template: ` template: `
<div> <div class="device-view-switch" style="margin-bottom: 10px">
<tt-page-title :title="window['TT_CONFIG']['PAGE_TITLE']" :path="window['TT_CONFIG']['PATH']"></tt-page-title> <div v-if="!isOverflowing" class="button-group" style="display:grid; grid-template-columns: repeat(3, 1fr); gap: 10px; justify-content: center; align-items: center; text-align: center; width: 100%;">
<button @click="$emit('input', 'DeviceTable')" :class="{ 'active': value === 'DeviceTable' }" class="btn btn-primary">Devices</button>
<button @click="$emit('input', 'DeviceManufacturer')" :class="{ 'active': value === 'DeviceManufacturer' }" class="btn btn-primary">Hersteller</button>
<button @click="$emit('input', 'DeviceType')" :class="{ 'active': value === 'DeviceType' }" class="btn btn-primary">Geräte Typen</button>
</div>
<div v-else>
<div class="dropdown">
<button @click="showDropdown = !showDropdown"
class="btn btn-primary dropdown-toggle">Ansicht</button>
<div v-show="showDropdown" class="dropdown-menu show">
<a href="#" @click="$emit('input', 'DeviceTable'); showDropdown = false" class="dropdown-item">Devices</a>
<a href="#" @click="$emit('input', 'DeviceManufacturer'); showDropdown = false" class="dropdown-item">Hersteller</a>
<a href="#" @click="$emit('input', 'DeviceType'); showDropdown = false" class="dropdown-item">Geräte Typen</a>
</div>
</div>
</div>
</div>
`,
props: ['value'],
data() {
return {
isOverflowing: false,
showDropdown: false,
};
},
mounted() {
this.checkOverflow();
window.addEventListener('resize', this.checkOverflow);
},
beforeDestroy() {
window.removeEventListener('resize', this.checkOverflow);
},
methods: {
checkOverflow() {
this.isOverflowing = window.innerWidth < 650
},
},
})
<tt-table Vue.component('DeviceTable', {
:fetch-url="window['TT_CONFIG']['DEVICE_API_URL'] + '?do=getDevices'" //language=Vue
:config="DeviceTableConfig" template: `
small ref="table" excel-export <tt-table :data="window['TT_CONFIG']['DEVICES']" :config="DeviceTableConfig" excel-export>
>
<template v-slot:top-buttons> <template v-slot:top-buttons>
<button type="button" class="btn btn-primary" @click="window.location = window['TT_CONFIG']['BASE_URL'] + '/add'"> <button type="button" class="btn btn-primary" @click="window.location = window['TT_CONFIG']['BASE_URL'] + '/Device/add'">
<i class="fas fa-plus"></i> <i class="fas fa-plus"></i>
Device hinzufügen Device hinzufügen
</button> </button>
</template> </template>
<template v-slot:name="{ row }"> <template v-slot:name="{ row }">
<a target="_blank" :href="window['TT_CONFIG']['BASE_URL'] +'/Detail?id=' + row.id">{{row.name}}</a> <a target="_blank" :href="window['TT_CONFIG']['BASE_URL'] +'/Device/Detail?id=' + row.id">{{row.name}}</a>
</template> </template>
<template v-slot:locationtext="{ row }"> <template v-slot:locationtext="{ row }">
<a target="_blank" :href="row['locationUrl']">{{row.locationText}}</a> <a target="_blank" :href="row['locationUrl']">{{row.locationText}}</a>
</template> </template>
<template v-slot:actions="{ row }">
<a :href="window['TT_CONFIG']['BASE_URL'] +'/edit/?id=' + row.id"><i class="far fa-edit" title="Bearbeiten"></i></a>
<a :href="window['TT_CONFIG']['BASE_URL'] +'/delete/?id=' + row.id" onclick="if(!confirm('Device wirklich löschen?')) return false;" class="text-danger" title="Löschen"><i class="fas fa-trash "></i></a>
</template>
</tt-table> <template v-slot:actions="{ row }">
</div> <a :href="window['TT_CONFIG']['BASE_URL'] +'/Device/edit/?id=' + row.id"><i class="far fa-edit" title="Bearbeiten"></i></a>
`, <a :href="window['TT_CONFIG']['BASE_URL'] +'/Device/delete/?id=' + row.id" onclick="if(!confirm('Device wirklich löschen?')) return false;" class="text-danger" title="Löschen"><i class="fas fa-trash "></i></a>
</template>
</tt-table>
`,
data() {
return {
window: window,
DeviceTableConfig: {
key: 'DeviceTable',
tableHeader: 'Device-Liste',
defaultPageSize: 25,
headers: [
{ text: 'Device Name', key: 'name', sortable: true, class: 'text-nowrap', priority: 10 },
{ text: 'Hersteller', key: 'devicemanufactor', filter: 'select',class: 'text-nowrap text-center', filterOptions: deviceManufacturerFilterOptions },
{ text: 'Geräte Typ', key: 'devicetype', filter: 'autocomplete', class: 'text-nowrap text-center', filterOptions: deviceTypeFilterOptions , priority: 7},
{ text: 'Pop/Adresse', key: 'locationText', filter: 'search' , class: 'text-nowrap text-center'},
{ text: 'IP-Adresse', key: 'ip', filter: 'search',class: 'text-center', priority: 8},
{ text: 'Mac-Adresse', key: 'mac', filter: 'search',class: 'text-center' },
{ text: 'Seriennummer', key: 'serial', filter: 'search',class: 'text-center' },
{ text: 'Preis', key: 'price', filter: 'numberRange',class: 'text-center', suffix: ' €' },
{ text: 'max. Leistung', key: 'power', filter: 'numberRange',class: 'text-center', suffix: ' W' },
{
text: 'Backup',
key: 'backup',
filter: 'iconSelect',
filterOptions: [
{ value: 'ok', text: 'Configbackup aktuell', icon: 'fa-regular fa-circle-check text-success' },
{ value: 'auto', text: 'Configbackup aktuell', icon: 'fa-regular fa-circle-a text-success' },
{ value: 'aged', text: 'Letztes Configbackup älter als 48 Stunden', icon: 'fa-regular fa-circle-xmark' },
{ value: 'na', text: 'N/A', icon: 'fa-regular fa-ban text-warning' }
],
priority: 6,
sortable: false,
},
{text: 'Aktionen', key: 'actions', class: 'text-center', sortable: false, filter: false, priority: 9},
],
},
}
}
});
Vue.component('DeviceManufacturer', {
//language=Vue
template: `
<tt-table :data="window['TT_CONFIG']['DEVICE_MANUFACTURERS']" :config="DeviceManufacturerConfig" excel-export>
<template v-slot:top-buttons>
<button type="button" class="btn btn-primary" @click="window.location = window['TT_CONFIG']['BASE_URL'] + '/Devicemanufactor/add'">
<i class="fas fa-plus"></i>Hersteller hinzufügen
</button>
</template>
<template v-slot:actions="{ row }">
<a :href="window['TT_CONFIG']['BASE_URL'] +'/Devicemanufactor/edit/?id=' + row.id"><i class="far fa-edit" title="Bearbeiten"></i></a>
<a :href="window['TT_CONFIG']['BASE_URL'] +'/Devicemanufactor/delete/?id=' + row.id" onclick="if(!confirm('Hersteller wirklich löschen?')) return false;" class="text-danger" title="Löschen"><i class="fas fa-trash "></i></a>
</template>
</tt-table>
`,
data() { data() {
return { return {
window: window, window: window,
DeviceTableConfig: { DeviceManufacturerConfig: {
key: 'DeviceTable', key: 'DeviceManufacturer',
tableHeader: 'Device-Liste', tableHeader: 'Hersteller',
defaultPageSize: 25, defaultPageSize: 25,
headers: [ headers: [
{ text: 'Device Name', key: 'name', sortable: true, class: 'text-nowrap', priority: 10 }, { text: 'Name', key: 'name', sortable: true, class: 'text-nowrap', priority: 10 },
{ text: 'Hersteller', key: 'devicemanufactor', filter: 'select',class: 'text-nowrap text-center', filterOptions: window.TT_CONFIG["DEVICE_MANUFACTURERS"] }, { text: 'Erstellungsdatum', key: 'created', filter: 'date', class: 'text-center'},
{ text: 'Geräte Typ', key: 'devicetype', filter: 'autocomplete', class: 'text-nowrap text-center', filterOptions: window.TT_CONFIG["DEVICE_TYPES"] , priority: 7}, { text: 'Erstellt von', key: 'creator', filter: 'search', class: 'text-center'},
{ text: 'Pop/Adresse', key: 'locationText', filter: 'search' , class: 'text-nowrap text-center'}, { text: 'Aktionen', key: 'actions', class: 'text-center', sortable: false, filter: false, priority: 9},
{ text: 'IP-Adresse', key: 'ip', filter: 'search',class: 'text-center', priority: 8},
{ text: 'Mac-Adresse', key: 'mac', filter: 'search',class: 'text-center' },
{ text: 'Seriennummer', key: 'serial', filter: 'search',class: 'text-center' },
{ text: 'Preis', key: 'price', filter: 'numberRange',class: 'text-center', suffix: ' €' },
{ text: 'max. Leistung', key: 'power', filter: 'numberRange',class: 'text-center', suffix: ' W' },
{
text: 'Backup',
key: 'backup',
filter: 'iconSelect',
filterOptions: [
{ value: 'ok', text: 'Configbackup aktuell', icon: 'fa-regular fa-circle-check text-success' },
{ value: 'auto', text: 'Configbackup aktuell', icon: 'fa-regular fa-circle-a text-success' },
{ value: 'aged', text: 'Letztes Configbackup älter als 48 Stunden', icon: 'fa-regular fa-circle-xmark' },
{ value: 'na', text: 'N/A', icon: 'fa-regular fa-ban text-warning' }
],
priority: 6,
sortable: false,
},
{text: 'Aktionen', key: 'actions', class: 'text-center', sortable: false, filter: false, priority: 9},
], ],
}, },
}
}
});
Vue.component('DeviceType', {
//language=Vue
template: `
<tt-table :data="window['TT_CONFIG']['DEVICE_TYPES']" :config="DeviceTypeConfig" excel-export>
<template v-slot:top-buttons>
<button type="button" class="btn btn-primary" @click="window.location = window['TT_CONFIG']['BASE_URL'] + '/Devicetype/add'">
<i class="fas fa-plus"></i>Device Type hinzufügen
</button>
</template>
<template v-slot:actions="{ row }">
<a :href="window['TT_CONFIG']['BASE_URL'] +'/Devicetype/edit/?id=' + row.id"><i class="far fa-edit" title="Bearbeiten"></i></a>
<a :href="window['TT_CONFIG']['BASE_URL'] +'/Devicetype/delete/?id=' + row.id" onclick="if(!confirm('Gerätetyp wirklich löschen?')) return false;" class="text-danger" title="Löschen"><i class="fas fa-trash "></i></a>
</template>
</tt-table>
`,
data() {
return {
window: window,
DeviceTypeConfig: {
key: 'DeviceType',
tableHeader: 'Gerätetypen',
defaultPageSize: 25,
headers: [
{ text: 'Name', key: 'name', sortable: true, class: 'text-nowrap', priority: 10 },
{ text: 'Hersteller', key: 'manufacturer', filter: 'search', class: 'text-center'},
{ text: 'Preis', key: 'price', filter: 'numberRange', class: 'text-center', suffix: ' €' },
{ text: 'max. Leistung', key: 'power', filter: 'numberRange', class: 'text-center', suffix: ' W' },
{ text: 'Erstellungsdatum', key: 'created', filter: 'date', class: 'text-center'},
{ text: 'Erstellt von', key: 'creator', filter: 'search', class: 'text-center'},
{ text: 'Aktionen', key: 'actions', class: 'text-center', sortable: false, filter: false, priority: 9},
],
},
}
}
})
Vue.component('Device', {
//language=Vue
template: `
<tt-card>
<device-view-switch v-model="currentView"></device-view-switch>
<component :is="currentView"></component>
</tt-card>
`,
data() {
return {
window: window,
currentView: 'DeviceTable',
}; };
}, },
beforeMount() {
const storedView = window.localStorage.getItem('tt-device-view');
if (storedView) {
this.currentView = storedView;
}
},
watch: {
currentView() {
window.localStorage.setItem('tt-device-view', this.currentView);
}
},
}); });
public/js/pages/Domain/Domain.js
+5 -7
View File
@@ -1,10 +1,7 @@
Vue.component('Domain', { Vue.component('Domain', {
//language=Vue //language=Vue
template: ` template: `
<div> <tt-card>
<!-- start page title -->
<tt-page-title :title="window['TT_CONFIG']['PAGE_TITLE']" :path="window['TT_CONFIG']['PATH']"></tt-page-title>
<tt-table :fetch-url="window['TT_CONFIG']['DOMAIN_API_URL'] + '?do=getDomains'" :config="domainsTableConfig" <tt-table :fetch-url="window['TT_CONFIG']['DOMAIN_API_URL'] + '?do=getDomains'" :config="domainsTableConfig"
small ssr ref="table"> small ssr ref="table">
@@ -99,7 +96,7 @@ Vue.component('Domain', {
</div> </div>
</div> </div>
</div> </tt-card>
`, `,
data() { data() {
return { return {
@@ -119,7 +116,7 @@ Vue.component('Domain', {
}, computed: { }, computed: {
domainsTableConfig() { domainsTableConfig() {
const base = { const base = {
headers: [{text: "DNS", key: "inwxRoId", filter: false, sortable: false}, { headers: [{
text: "Domain", text: "Domain",
key: "domain" key: "domain"
}, { }, {
@@ -157,7 +154,8 @@ Vue.component('Domain', {
text: "Tech ID", text: "Tech ID",
key: "tech", key: "tech",
sortable: false sortable: false
}, {text: "Billing ID", key: "billing", sortable: false}, {text: "Name Servers", key: "ns"}], }, {text: "Billing ID", key: "billing", sortable: false}, {text: "Name Servers", key: "ns"},
{text: "DNS", key: "inwxRoId", filter: false, sortable: false, priority: 1}],
tableHeader: 'Domains', tableHeader: 'Domains',
key: 'Domain' key: 'Domain'
} }
public/js/pages/HistoricTicket/HistoricTicket.js
+2 -3
View File
@@ -1,8 +1,7 @@
Vue.component('HistoricTicket', { Vue.component('HistoricTicket', {
//language=Vue //language=Vue
template: ` template: `
<div> <tt-card>
<tt-page-title :title="window['TT_CONFIG']['PAGE_TITLE']" :path="window['TT_CONFIG']['PATH']"></tt-page-title>
<tt-table :fetch-url="window['TT_CONFIG']['HISTORIC_TICKET_API_URL'] + '?do=getHistoricTickets'" <tt-table :fetch-url="window['TT_CONFIG']['HISTORIC_TICKET_API_URL'] + '?do=getHistoricTickets'"
:config="historicTicketTableConfig" :config="historicTicketTableConfig"
@@ -100,7 +99,7 @@ Vue.component('HistoricTicket', {
</div> </div>
</div> </div>
</div> </tt-card>
`, data() { `, data() {
return { return {
window: window, window: window,
public/js/pages/IpNetwork/IpNetwork.js
+2 -4
View File
@@ -1,9 +1,7 @@
Vue.component('IpNetwork', { Vue.component('IpNetwork', {
//language=Vue //language=Vue
template: ` template: `
<div> <tt-card>
<tt-page-title :title="window['TT_CONFIG']['PAGE_TITLE']"
:path="window['TT_CONFIG']['PATH']"></tt-page-title>
<tt-table :fetch-url="window['TT_CONFIG']['IPNETWORK_API_URL'] + '?do=get'" <tt-table :fetch-url="window['TT_CONFIG']['IPNETWORK_API_URL'] + '?do=get'"
:config="IpNetworkTableConfig" :config="IpNetworkTableConfig"
@@ -90,7 +88,7 @@ Vue.component('IpNetwork', {
</div> </div>
</div> </div>
</div> </div>
</div> </tt-card>
`, `,
data() { data() {
return { return {
public/js/pages/VoiceCallActive/VoiceCallActive.js
+2 -3
View File
@@ -1,8 +1,7 @@
Vue.component('VoiceCallActive', { Vue.component('VoiceCallActive', {
//language=Vue //language=Vue
template: ` template: `
<div> <tt-card>
<tt-page-title :title="window['TT_CONFIG']['PAGE_TITLE']" :path="window['TT_CONFIG']['PATH']"></tt-page-title>
<tt-table :fetch-url="window['TT_CONFIG']['VOICE_CALL_ACTIVE_API_URL'] + '?do=getActiveCalls'" <tt-table :fetch-url="window['TT_CONFIG']['VOICE_CALL_ACTIVE_API_URL'] + '?do=getActiveCalls'"
:config="VoiceCallActiveTableConfig" :config="VoiceCallActiveTableConfig"
@@ -47,7 +46,7 @@ Vue.component('VoiceCallActive', {
</tt-table> </tt-table>
</div> </tt-card>
`, `,
data() { data() {
return { return {
public/js/pages/VoiceCallHistory/VoiceCallHistory.js
+2 -3
View File
@@ -1,8 +1,7 @@
Vue.component('VoiceCallHistory', { Vue.component('VoiceCallHistory', {
//language=Vue //language=Vue
template: ` template: `
<div> <tt-card>
<tt-page-title :title="window['TT_CONFIG']['PAGE_TITLE']" :path="window['TT_CONFIG']['PATH']"></tt-page-title>
<tt-table :fetch-url="window['TT_CONFIG']['VOICE_CALL_HISTORY_API_URL'] + '?do=getCalls'" <tt-table :fetch-url="window['TT_CONFIG']['VOICE_CALL_HISTORY_API_URL'] + '?do=getCalls'"
:config="VoiceCallHistoryTableConfig" :config="VoiceCallHistoryTableConfig"
@@ -20,7 +19,7 @@ Vue.component('VoiceCallHistory', {
</template> </template>
</tt-table> </tt-table>
</div> </tt-card>
`, data() { `, data() {
return { return {
window: window, window: window,
public/plugins/vue/tt-components/css/tt-table.css
+14 -6
View File
@@ -21,11 +21,7 @@
} }
.tt-table-card { .tt-table-container .page-link {
/*overflow: auto;*/
}
.tt-table-card .page-link {
padding: 5px .75rem !important; padding: 5px .75rem !important;
} }
@@ -112,12 +108,24 @@ input[type=number]::-webkit-outer-spin-button {
.tt-table-top-pagination-container { .tt-table-top-pagination-container {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: auto auto;
padding-bottom: 8px; padding-bottom: 8px;
align-items: center; align-items: center;
justify-content: space-between justify-content: space-between
} }
.tt-table-top-buttons-container {
display: grid;
grid-template-columns: auto auto auto auto auto;
grid-gap: 8px;
padding-bottom: 8px
}
.tt-table-top-buttons-container > button > i {
font-size: 17px;
margin-right: 4px;
}
@media (max-width: 486px) { @media (max-width: 486px) {
.tt-table-top-pagination-container { .tt-table-top-pagination-container {
grid-template-columns: 1fr; grid-template-columns: 1fr;
public/plugins/vue/tt-components/tt-autocomplete.js
-2
View File
@@ -72,8 +72,6 @@ Vue.component('tt-autocomplete', {
this.displayValue = selectedItem ? selectedItem.text : ''; this.displayValue = selectedItem ? selectedItem.text : '';
} }
console.log(this.$slots.append ? 'append' : 'no append');
}, },
data() { data() {
return { return {
public/plugins/vue/tt-components/tt-card.js
+16
View File
@@ -0,0 +1,16 @@
Vue.component('tt-card', {
//language=Vue
template: `
<div class="card">
<div class="card-header" v-if="$slots.header">
<slot name="header"></slot>
</div>
<div class="card-body">
<slot></slot>
</div>
<div class="card-footer" v-if="$slots.footer">
<slot name="footer"></slot>
</div>
</div>
`,
})
public/plugins/vue/tt-components/tt-datepicker.js
+1
View File
@@ -99,5 +99,6 @@ Vue.component('tt-date-picker', {
}, },
beforeDestroy() { beforeDestroy() {
$(this.$refs.input).off('apply.daterangepicker'); $(this.$refs.input).off('apply.daterangepicker');
$('.daterangepicker').remove();
}, },
}) })
public/plugins/vue/tt-components/tt-table.js
+25 -13
View File
@@ -109,11 +109,9 @@ Vue.component('tt-table-pagination', {
Vue.component('tt-table', { Vue.component('tt-table', {
template: ` template: `
<div class="card tt-table-card" v-if="columns && pagination"> <div class="tt-table-container" ref="tableContainer">
<div class="card-body" ref="tableContainer">
<!-- Top Buttons --> <!-- Top Buttons -->
<div <div class="tt-table-top-buttons-container">
style="display:grid; grid-template-columns: auto auto auto auto auto; grid-gap: 8px; padding-bottom: 8px">
<slot name="top-buttons"></slot> <slot name="top-buttons"></slot>
</div> </div>
<!-- Pagination Controls --> <!-- Pagination Controls -->
@@ -142,7 +140,10 @@ Vue.component('tt-table', {
<th scope="col" v-for="column in columns" <th scope="col" v-for="column in columns"
:ref="'table_header_'+column.key" :ref="'table_header_'+column.key"
v-if="!hiddenColumns.includes(column.key)" v-if="!hiddenColumns.includes(column.key)"
:style="'vertical-align: top; text-align: center;' + (column.filter === 'dateRange' ? 'min-width: 260px;' : '')"> :style="'vertical-align: top; text-align: center;' +
(column.filter === 'dateRange' ? 'min-width: 260px;' : '') +
(originalColumnWidths[column.key] ? 'width: ' + originalColumnWidths[column.key] + 'px;' : '')"
>
<div style="text-align:center; white-space: nowrap;word-break: keep-all;" <div style="text-align:center; white-space: nowrap;word-break: keep-all;"
:style="{ 'cursor': column.sortable ? 'pointer' : 'default' }" :style="{ 'cursor': column.sortable ? 'pointer' : 'default' }"
@click="column.sortable ? setOrder(column.key) : undefined"> @click="column.sortable ? setOrder(column.key) : undefined">
@@ -180,7 +181,8 @@ Vue.component('tt-table', {
@click="$emit('row-click', row)" @click="$emit('row-click', row)"
> >
<template v-for="(column, key) in columns" v-if="!hiddenColumns.includes(column.key)"> <template v-for="(column, key) in columns" v-if="!hiddenColumns.includes(column.key)">
<td :class="{ 'text-center': column.filter === 'iconSelect', [columns[key].class]: true }"> <td :class="{ 'text-center': column.filter === 'iconSelect',
[columns[key].class]: true, 'text-nowrap': !originalColumnWidths[column.key] }">
<!-- If td is first of row then check isExpanded and display fas.fa-chevron-right or fas.fa-chevron-down with cursor pointer --> <!-- If td is first of row then check isExpanded and display fas.fa-chevron-right or fas.fa-chevron-down with cursor pointer -->
<i v-if="key === Object.keys(columns)[0] && <i v-if="key === Object.keys(columns)[0] &&
($scopedSlots.expandedRow && (typeof config.expandCondition !== 'function' || config.expandCondition(row)) || hiddenColumns.length > 0)" ($scopedSlots.expandedRow && (typeof config.expandCondition !== 'function' || config.expandCondition(row)) || hiddenColumns.length > 0)"
@@ -236,9 +238,9 @@ Vue.component('tt-table', {
v-if="pagination"></tt-table-pagination> v-if="pagination"></tt-table-pagination>
</nav> </nav>
</div> </div>
</div>
`, props: { `, props: {
fetchUrl: String, fetchUrl: String,
data: Array,
striped: {type: Boolean, default: true}, striped: {type: Boolean, default: true},
bordered: {type: Boolean, default: true}, bordered: {type: Boolean, default: true},
hover: {type: Boolean, default: true}, hover: {type: Boolean, default: true},
@@ -293,13 +295,17 @@ Vue.component('tt-table', {
* @async * @async
*/ */
async fetchData(page = 0) { async fetchData(page = 0) {
console.log('Fetching data...');
this.expandedRows = {}; this.expandedRows = {};
try { try {
if (this.ssr === false) { if (this.ssr === false) {
const response = await axios.get(this.fetchUrl); if (this.data) {
this.rawRows = response.data this.rawRows = this.data;
} else {
const response = await axios.get(this.fetchUrl);
this.rawRows = response.data
}
this.pagination = { this.pagination = {
page: page++, page: page++,
@@ -673,7 +679,8 @@ Vue.component('tt-table', {
} else if (header.filter === 'date') { } else if (header.filter === 'date') {
if (!filterValue.from || !filterValue.to) continue; if (!filterValue.from || !filterValue.to) continue;
let rowDate = new Date(row[header.key]).getTime() / 1000; const dateInt = row[header.key].length === 10 ? parseInt(row[header.key]) * 1000 : parseInt(row[header.key]);
let rowDate = new Date(dateInt).getTime() / 1000;
if (rowDate < filterValue.from || rowDate > filterValue.to) { if (rowDate < filterValue.from || rowDate > filterValue.to) {
match = false; match = false;
@@ -698,8 +705,13 @@ Vue.component('tt-table', {
output.sort((a, b) => { output.sort((a, b) => {
let valueA = isDateColumn ? new Date(a[this.order.key]).getTime() : a[this.order.key];
let valueB = isDateColumn ? new Date(b[this.order.key]).getTime() : b[this.order.key]; let valueA = isDateColumn ?
new Date(a[this.order.key].length === 10 ? parseInt(a[this.order.key]) * 1000 : parseInt(a[this.order.key])).getTime() :
a[this.order.key];
let valueB = isDateColumn ?
new Date(b[this.order.key].length === 10 ? parseInt(b[this.order.key]) * 1000 : parseInt(b[this.order.key])).getTime() :
b[this.order.key];
if (valueA === valueB) return 0; if (valueA === valueB) return 0;