added zabbix sync and view for Device

public/js/pages/Device/Device.js

@@ -74,6 +74,11 @@ Vue.component('DeviceTable', {
       <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'">
+            <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="window['TT_CONFIG']['GRAFANA_URL'] + '/d/Ta3PtRWZk/mikrotik-dashboard?orgId=1&var-host=' + row.name" target="_blank" class="text-info" title="Grafana"><i class="fas fa-chart-line"></i></a>
+        </template>
       </template>
 
     </tt-table>
@@ -88,7 +93,7 @@ Vue.component('DeviceTable', {
               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: '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' },
@@ -107,6 +112,17 @@ Vue.component('DeviceTable', {
                       ],
                       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},
               ],