102 lines
4.0 KiB
PHP
102 lines
4.0 KiB
PHP
<?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"); ?>
|
|
|