Reworked Device Module and Vue Components

public/js/pages/Device/Device.js

@@ -1,72 +1,219 @@
-Vue.component('Device', {
+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>
-        <tt-page-title :title="window['TT_CONFIG']['PAGE_TITLE']" :path="window['TT_CONFIG']['PATH']"></tt-page-title>
+        <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
+        },
+    },
+})
 
-        <tt-table
-            :fetch-url="window['TT_CONFIG']['DEVICE_API_URL'] + '?do=getDevices'"
-            :config="DeviceTableConfig"
-            small ref="table" excel-export
-        >
+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'] + '/add'">
-                <i class="fas fa-plus"></i>
-                Device hinzufügen
-            </button>
-            </template>
+      <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'] +'/Detail?id=' + row.id">{{row.name}}</a>
-          </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'] +'/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>
+      <template v-slot:locationtext="{ row }">
+        <a target="_blank" :href="row['locationUrl']">{{row.locationText}}</a>
+      </template>
 
-        </tt-table>
-      </div>
-    `,
+      <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,
-            DeviceTableConfig: {
-                key: 'DeviceTable',
-                tableHeader: 'Device-Liste',
+            DeviceManufacturerConfig: {
+                key: 'DeviceManufacturer',
+                tableHeader: 'Hersteller',
                 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},
+                    { 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);
+        }
+    },
 });

public/js/pages/Domain/Domain.js

@@ -1,10 +1,7 @@
 Vue.component('Domain', {
     //language=Vue
     template: `
-      <div>
-
-        <!-- start page title -->
-        <tt-page-title :title="window['TT_CONFIG']['PAGE_TITLE']" :path="window['TT_CONFIG']['PATH']"></tt-page-title>
+      <tt-card>
 
         <tt-table :fetch-url="window['TT_CONFIG']['DOMAIN_API_URL'] + '?do=getDomains'" :config="domainsTableConfig"
                   small ssr ref="table">
@@ -99,7 +96,7 @@ Vue.component('Domain', {
           </div>
         </div>
 
-      </div>
+      </tt-card>
     `,
     data() {
         return {
@@ -119,7 +116,7 @@ Vue.component('Domain', {
     }, computed: {
         domainsTableConfig() {
             const base = {
-                headers: [{text: "DNS", key: "inwxRoId", filter: false, sortable: false}, {
+                headers: [{
                     text: "Domain",
                     key: "domain"
                 }, {
@@ -157,7 +154,8 @@ Vue.component('Domain', {
                     text: "Tech ID",
                     key: "tech",
                     sortable: false
-                }, {text: "Billing ID", key: "billing", sortable: false}, {text: "Name Servers", key: "ns"}],
+                }, {text: "Billing ID", key: "billing", sortable: false}, {text: "Name Servers", key: "ns"},
+                    {text: "DNS", key: "inwxRoId", filter: false, sortable: false, priority: 1}],
                 tableHeader: 'Domains',
                 key: 'Domain'
             }

public/js/pages/HistoricTicket/HistoricTicket.js

@@ -1,8 +1,7 @@
 Vue.component('HistoricTicket', {
     //language=Vue
     template: `
-      <div>
-        <tt-page-title :title="window['TT_CONFIG']['PAGE_TITLE']" :path="window['TT_CONFIG']['PATH']"></tt-page-title>
+      <tt-card>
 
         <tt-table :fetch-url="window['TT_CONFIG']['HISTORIC_TICKET_API_URL'] + '?do=getHistoricTickets'"
                   :config="historicTicketTableConfig"
@@ -100,7 +99,7 @@ Vue.component('HistoricTicket', {
           </div>
         </div>
 
-      </div>
+      </tt-card>
     `, data() {
         return {
             window: window,

public/js/pages/IpNetwork/IpNetwork.js

@@ -1,9 +1,7 @@
 Vue.component('IpNetwork', {
     //language=Vue
     template: `
-      <div>
-        <tt-page-title :title="window['TT_CONFIG']['PAGE_TITLE']"
-                       :path="window['TT_CONFIG']['PATH']"></tt-page-title>
+      <tt-card>
 
         <tt-table :fetch-url="window['TT_CONFIG']['IPNETWORK_API_URL'] + '?do=get'"
                   :config="IpNetworkTableConfig"
@@ -90,7 +88,7 @@ Vue.component('IpNetwork', {
             </div>
           </div>
         </div>
-      </div>
+      </tt-card>
     `,
     data() {
         return {

public/js/pages/VoiceCallActive/VoiceCallActive.js

@@ -1,8 +1,7 @@
 Vue.component('VoiceCallActive', {
     //language=Vue
     template: `
-      <div>
-        <tt-page-title :title="window['TT_CONFIG']['PAGE_TITLE']" :path="window['TT_CONFIG']['PATH']"></tt-page-title>
+      <tt-card>
 
         <tt-table :fetch-url="window['TT_CONFIG']['VOICE_CALL_ACTIVE_API_URL'] + '?do=getActiveCalls'"
                   :config="VoiceCallActiveTableConfig"
@@ -47,7 +46,7 @@ Vue.component('VoiceCallActive', {
 
         </tt-table>
 
-      </div>
+      </tt-card>
     `,
     data() {
         return {

public/js/pages/VoiceCallHistory/VoiceCallHistory.js

@@ -1,8 +1,7 @@
 Vue.component('VoiceCallHistory', {
     //language=Vue
     template: `
-      <div>
-        <tt-page-title :title="window['TT_CONFIG']['PAGE_TITLE']" :path="window['TT_CONFIG']['PATH']"></tt-page-title>
+      <tt-card>
 
         <tt-table :fetch-url="window['TT_CONFIG']['VOICE_CALL_HISTORY_API_URL'] + '?do=getCalls'"
                   :config="VoiceCallHistoryTableConfig"
@@ -20,7 +19,7 @@ Vue.component('VoiceCallHistory', {
 
           </template>
         </tt-table>
-      </div>
+      </tt-card>
     `, data() {
         return {
             window: window,