303 lines
14 KiB
JavaScript
303 lines
14 KiB
JavaScript
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
|
|
template: `
|
|
<div class="device-view-switch" style="margin-bottom: 10px">
|
|
<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 {
|
|
window: window,
|
|
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
|
|
},
|
|
},
|
|
})
|
|
|
|
Vue.component('DeviceTable', {
|
|
//language=Vue
|
|
template: `
|
|
<tt-table :data="window['TT_CONFIG']['DEVICES']" :config="DeviceTableConfig" excel-export>
|
|
|
|
<template v-slot:top-buttons v-if="window['TT_CONFIG']['IS_ADMIN'] === '1'">
|
|
<button type="button" class="btn btn-primary" @click="window.location = window['TT_CONFIG']['BASE_URL'] + '/Device/add'">
|
|
<i class="fas fa-plus"></i>
|
|
Device hinzufügen
|
|
</button>
|
|
</template>
|
|
|
|
<template v-slot:name="{ row }">
|
|
<a target="_blank" :href="window['TT_CONFIG']['BASE_URL'] +'/Device/Detail?id=' + row.id">{{row.name}}</a>
|
|
</template>
|
|
|
|
<template v-slot:locationtext="{ row }">
|
|
<template v-if="window['TT_CONFIG']['IS_ADMIN'] === '1'">
|
|
<a target="_blank" :href="row['locationUrl']">{{row.locationText}}</a>
|
|
</template>
|
|
<template v-else>
|
|
{{row.locationText}}
|
|
</template>
|
|
</template>
|
|
|
|
<template v-slot:actions="{ row }">
|
|
<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 v-if="row.zabbix_host_id !== '0' && row.zabbix_host_id !== null">
|
|
<a :href="window['TT_CONFIG']['ZABBIX_URL'] + '/zabbix.php?action=latest.view&hostids%5B%5D=' + row.zabbix_host_id"
|
|
target="_blank"
|
|
class="text-info"
|
|
title="Zabbix"><i class="fas fa-server"></i></a>
|
|
<a href="#" @click.prevent="$emit('show-monitoring', row)"
|
|
class="text-success"
|
|
style="margin-left: 5px;"
|
|
title="Show Graphs"><i class="fas fa-chart-line"></i></a>
|
|
</template>
|
|
</template>
|
|
|
|
</tt-table>
|
|
`,
|
|
data() {
|
|
return {
|
|
window: window,
|
|
DeviceTableConfig: {
|
|
key: 'DeviceTable',
|
|
tableHeader: 'Device-Liste',
|
|
defaultPageSize: 25,
|
|
headers: [],
|
|
},
|
|
}
|
|
},
|
|
mounted() {
|
|
this.DeviceTableConfig.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: 'select', 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'},
|
|
];
|
|
|
|
if (this.window.TT_CONFIG['IS_ADMIN'] === '1') {
|
|
this.DeviceTableConfig.headers = [
|
|
...this.DeviceTableConfig.headers,
|
|
{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: 'Status',
|
|
key: 'zabbix_online',
|
|
filter: 'iconSelect',
|
|
filterOptions: [
|
|
{value: '0', text: 'Status unbekannt', icon: 'fa-regular fa-circle-xmark'},
|
|
{value: '1', text: 'Offline', icon: 'fa-regular fa-circle-xmark text-danger'},
|
|
{value: '2', text: 'Online', icon: 'fa-regular fa-circle-check text-success'},
|
|
],
|
|
priority: 5,
|
|
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() {
|
|
return {
|
|
window: window,
|
|
DeviceManufacturerConfig: {
|
|
key: 'DeviceManufacturer',
|
|
tableHeader: 'Hersteller',
|
|
defaultPageSize: 25,
|
|
headers: [
|
|
{text: 'Name', key: 'name', sortable: true, class: 'text-nowrap', priority: 10},
|
|
{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('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: 'Temp. Warnung', key: 'temp_warning', filter: 'numberRange', class: 'text-center', suffix: ' °C'},
|
|
{text: 'Temp. Kritisch', key: 'temp_critical', filter: 'numberRange', class: 'text-center', suffix: ' °C'},
|
|
{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-monitoring-modal
|
|
v-if="monitoringModalHostId"
|
|
:host-id="monitoringModalHostId"
|
|
:device-name="selectedDeviceName"
|
|
@close="closeMonitoringModal">
|
|
</device-monitoring-modal>
|
|
|
|
<device-view-switch v-show="window['TT_CONFIG']['IS_ADMIN'] === '1'" v-model="currentView"></device-view-switch>
|
|
|
|
<component :is="currentView" @show-monitoring="showMonitoringModal"></component>
|
|
</tt-card>
|
|
`,
|
|
data() {
|
|
return {
|
|
window: window,
|
|
currentView: 'DeviceTable',
|
|
// MODIFIED: Add data properties to manage the modal state
|
|
monitoringModalHostId: null,
|
|
selectedDeviceName: '',
|
|
};
|
|
},
|
|
beforeMount() {
|
|
const storedView = window.localStorage.getItem('tt-device-view');
|
|
if (storedView) {
|
|
this.currentView = storedView;
|
|
}
|
|
},
|
|
watch: {
|
|
currentView() {
|
|
window.localStorage.setItem('tt-device-view', this.currentView);
|
|
}
|
|
},
|
|
// MODIFIED: Add methods to handle modal state
|
|
methods: {
|
|
showMonitoringModal(deviceRow) {
|
|
this.selectedDeviceName = deviceRow.name;
|
|
this.monitoringModalHostId = deviceRow.zabbix_host_id;
|
|
},
|
|
closeMonitoringModal() {
|
|
this.monitoringModalHostId = null;
|
|
this.selectedDeviceName = '';
|
|
}
|
|
}
|
|
});
|