Reworked Device Module and Vue Components

This commit is contained in:
2024-05-28 09:12:13 +02:00
parent fa3c1b8766
commit e1cf5d5d9e
21 changed files with 321 additions and 439 deletions

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"); ?>

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"); ?>

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"); ?>

View File

@@ -40,10 +40,17 @@ include(realpath(dirname(__FILE__) . "/../../$mfLayoutPackage") . "/vueHeader.ph
<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; ?>>
</div>
<script>
const view = new Vue({el: '#app'});
const view = new Vue({el: '#app', data: {window: window}});
</script>
<?php include(realpath(dirname(__FILE__) . "/../../$mfLayoutPackage") . "/footer.php"); ?>

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="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("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>