Reworked Device Table and added table features

public/js/pages/Device/Device.js

@@ -0,0 +1,72 @@
+Vue.component('Device', {
+    //language=Vue
+    template: `
+      <div>
+        <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" excel-export
+        >
+
+          <template v-slot:top-buttons>
+            <button type="button" class="btn btn-primary" @click="window.location = window['TT_CONFIG']['BASE_URL'] + '/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'] +'/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'] +'/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>
+      </div>
+    `,
+
+    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: window.TT_CONFIG["DEVICE_MANUFACTURERS"] },
+                    { text: 'Geräte Typ', key: 'devicetype', filter: 'autocomplete', class: 'text-nowrap text-center', filterOptions: window.TT_CONFIG["DEVICE_TYPES"] , 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},
+                ],
+            },
+        };
+    },
+});

public/js/pages/Domain/Domain.js

@@ -20,7 +20,7 @@ Vue.component('Domain', {
             </button>
 
             <div class="input-group">
-              <input type="text" class="form-control" v-model="checkDomainInput" placeholder="Neue Domain überprüfen">
+              <input type="text" class="form-control" v-model="checkDomainInput" style="height: 100%" placeholder="Neue Domain überprüfen">
               <div class="input-group-append">
                 <button class="btn btn-primary" @click="checkDomainAvailability">
                   <template v-if="checkDomainLoading">
@@ -83,7 +83,7 @@ Vue.component('Domain', {
                   </thead>
                   <tbody>
                   <tr v-for="record in dnsRecordsModal.records">
-                    <td>{{ record.class }}</td>
+                    <td v-if="record">{{ record.class }}</td>
                     <td>{{ record.type }} {{ record.pri ? '(' + record.pri + ')' : '' }}</td>
                     <td>{{ record.host }}</td>
                     <td>{{ record.value }}</td>