220 lines
9.8 KiB
JavaScript
220 lines
9.8 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 {
|
|
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>
|
|
<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 }">
|
|
<a target="_blank" :href="row['locationUrl']">{{row.locationText}}</a>
|
|
</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>
|
|
|
|
</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() {
|
|
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: '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);
|
|
}
|
|
},
|
|
});
|