|
@@ -1,19 +1,258 @@
|
|
|
<template>
|
|
<template>
|
|
|
<div class="page">
|
|
<div class="page">
|
|
|
<div class="page-header">
|
|
<div class="page-header">
|
|
|
- <h1>Devices</h1>
|
|
|
|
|
- <p>Manage all devices</p>
|
|
|
|
|
|
|
+ <div>
|
|
|
|
|
+ <h1>{{ $t('devices.title') }}</h1>
|
|
|
|
|
+ <p>{{ $t('devices.manage') }}</p>
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
+
|
|
|
<div class="content">
|
|
<div class="content">
|
|
|
- <p>Devices list will be here...</p>
|
|
|
|
|
|
|
+ <div v-if="loading" class="loading">{{ $t('common.loading') }}</div>
|
|
|
|
|
+
|
|
|
|
|
+ <div v-else-if="error" class="error">{{ error }}</div>
|
|
|
|
|
+
|
|
|
|
|
+ <table v-else-if="devices.length > 0" class="data-table">
|
|
|
|
|
+ <thead>
|
|
|
|
|
+ <tr>
|
|
|
|
|
+ <th>{{ $t('devices.simpleId') }}</th>
|
|
|
|
|
+ <th>{{ $t('devices.macAddress') }}</th>
|
|
|
|
|
+ <th>{{ $t('devices.organization') }}</th>
|
|
|
|
|
+ <th>{{ $t('common.status') }}</th>
|
|
|
|
|
+ <th>{{ $t('devices.lastSeen') }}</th>
|
|
|
|
|
+ <th>{{ $t('common.actions') }}</th>
|
|
|
|
|
+ </tr>
|
|
|
|
|
+ </thead>
|
|
|
|
|
+ <tbody>
|
|
|
|
|
+ <tr v-for="device in devices" :key="device.id">
|
|
|
|
|
+ <td><strong>#{{ device.simple_id }}</strong></td>
|
|
|
|
|
+ <td><code>{{ device.mac_address }}</code></td>
|
|
|
|
|
+ <td>{{ getOrganizationName(device.organization_id) }}</td>
|
|
|
|
|
+ <td><span class="badge" :class="`status-${device.status}`">{{ $t(`devices.${device.status}`) }}</span></td>
|
|
|
|
|
+ <td>{{ formatDate(device.last_seen_at) }}</td>
|
|
|
|
|
+ <td>
|
|
|
|
|
+ <div class="actions">
|
|
|
|
|
+ <button @click="showEditModal(device)" class="btn-icon" title="Edit">✏️</button>
|
|
|
|
|
+ <button @click="confirmDelete(device)" class="btn-icon" title="Delete">🗑️</button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </td>
|
|
|
|
|
+ </tr>
|
|
|
|
|
+ </tbody>
|
|
|
|
|
+ </table>
|
|
|
|
|
+
|
|
|
|
|
+ <div v-else class="empty">No devices yet</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- Edit Modal -->
|
|
|
|
|
+ <div v-if="modalVisible" class="modal-overlay" @click="closeModal">
|
|
|
|
|
+ <div class="modal" @click.stop>
|
|
|
|
|
+ <div class="modal-header">
|
|
|
|
|
+ <h2>{{ $t('common.edit') }} Device #{{ editingDevice?.simple_id }}</h2>
|
|
|
|
|
+ <button @click="closeModal" class="btn-close">×</button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <form @submit.prevent="saveDevice" class="modal-body">
|
|
|
|
|
+ <div class="form-group">
|
|
|
|
|
+ <label>{{ $t('devices.simpleId') }}</label>
|
|
|
|
|
+ <input :value="`#${editingDevice?.simple_id}`" type="text" disabled />
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="form-group">
|
|
|
|
|
+ <label>{{ $t('devices.macAddress') }}</label>
|
|
|
|
|
+ <input :value="editingDevice?.mac_address" type="text" disabled />
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="form-group">
|
|
|
|
|
+ <label>{{ $t('devices.organization') }}</label>
|
|
|
|
|
+ <select v-model="form.organization_id">
|
|
|
|
|
+ <option :value="null">Unassigned</option>
|
|
|
|
|
+ <option v-for="org in organizations" :key="org.id" :value="org.id">
|
|
|
|
|
+ {{ org.name }}
|
|
|
|
|
+ </option>
|
|
|
|
|
+ </select>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="form-group">
|
|
|
|
|
+ <label>{{ $t('common.status') }}</label>
|
|
|
|
|
+ <select v-model="form.status">
|
|
|
|
|
+ <option value="online">Online</option>
|
|
|
|
|
+ <option value="offline">Offline</option>
|
|
|
|
|
+ <option value="error">Error</option>
|
|
|
|
|
+ </select>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="modal-footer">
|
|
|
|
|
+ <button type="button" @click="closeModal" class="btn-secondary">{{ $t('common.cancel') }}</button>
|
|
|
|
|
+ <button type="submit" :disabled="saving" class="btn-primary">
|
|
|
|
|
+ {{ saving ? $t('common.loading') : $t('common.save') }}
|
|
|
|
|
+ </button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </form>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- Delete Confirmation Modal -->
|
|
|
|
|
+ <div v-if="deleteConfirmVisible" class="modal-overlay" @click="deleteConfirmVisible = false">
|
|
|
|
|
+ <div class="modal modal-sm" @click.stop>
|
|
|
|
|
+ <div class="modal-header">
|
|
|
|
|
+ <h2>{{ $t('common.confirm') }}</h2>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="modal-body">
|
|
|
|
|
+ <p>Delete device <strong>#{{ deviceToDelete?.simple_id }}</strong> ({{ deviceToDelete?.mac_address }})?</p>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="modal-footer">
|
|
|
|
|
+ <button @click="deleteConfirmVisible = false" class="btn-secondary">{{ $t('common.cancel') }}</button>
|
|
|
|
|
+ <button @click="deleteDevice" :disabled="deleting" class="btn-danger">
|
|
|
|
|
+ {{ deleting ? $t('common.loading') : $t('common.delete') }}
|
|
|
|
|
+ </button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
|
|
+<script setup>
|
|
|
|
|
+import { ref, onMounted } from 'vue'
|
|
|
|
|
+import devicesApi from '@/api/devices'
|
|
|
|
|
+import organizationsApi from '@/api/organizations'
|
|
|
|
|
+
|
|
|
|
|
+const devices = ref([])
|
|
|
|
|
+const organizations = ref([])
|
|
|
|
|
+const loading = ref(false)
|
|
|
|
|
+const error = ref(null)
|
|
|
|
|
+const modalVisible = ref(false)
|
|
|
|
|
+const deleteConfirmVisible = ref(false)
|
|
|
|
|
+const editingDevice = ref(null)
|
|
|
|
|
+const deviceToDelete = ref(null)
|
|
|
|
|
+const saving = ref(false)
|
|
|
|
|
+const deleting = ref(false)
|
|
|
|
|
+
|
|
|
|
|
+const form = ref({
|
|
|
|
|
+ organization_id: null,
|
|
|
|
|
+ status: 'offline'
|
|
|
|
|
+})
|
|
|
|
|
+
|
|
|
|
|
+async function loadDevices() {
|
|
|
|
|
+ loading.value = true
|
|
|
|
|
+ error.value = null
|
|
|
|
|
+ try {
|
|
|
|
|
+ devices.value = await devicesApi.getAllSuperadmin()
|
|
|
|
|
+ } catch (err) {
|
|
|
|
|
+ error.value = err.response?.data?.detail || 'Failed to load devices'
|
|
|
|
|
+ } finally {
|
|
|
|
|
+ loading.value = false
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+async function loadOrganizations() {
|
|
|
|
|
+ try {
|
|
|
|
|
+ organizations.value = await organizationsApi.getAll()
|
|
|
|
|
+ } catch (err) {
|
|
|
|
|
+ console.error('Failed to load organizations:', err)
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+function getOrganizationName(orgId) {
|
|
|
|
|
+ if (!orgId) return 'Unassigned'
|
|
|
|
|
+ const org = organizations.value.find(o => o.id === orgId)
|
|
|
|
|
+ return org ? org.name : `Org #${orgId}`
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+function formatDate(dateStr) {
|
|
|
|
|
+ if (!dateStr) return 'Never'
|
|
|
|
|
+ const date = new Date(dateStr)
|
|
|
|
|
+ return date.toLocaleString()
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+function showEditModal(device) {
|
|
|
|
|
+ editingDevice.value = device
|
|
|
|
|
+ form.value = {
|
|
|
|
|
+ organization_id: device.organization_id,
|
|
|
|
|
+ status: device.status
|
|
|
|
|
+ }
|
|
|
|
|
+ modalVisible.value = true
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+function closeModal() {
|
|
|
|
|
+ modalVisible.value = false
|
|
|
|
|
+ editingDevice.value = null
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+async function saveDevice() {
|
|
|
|
|
+ saving.value = true
|
|
|
|
|
+ try {
|
|
|
|
|
+ await devicesApi.updateSuperadmin(editingDevice.value.id, form.value)
|
|
|
|
|
+ await loadDevices()
|
|
|
|
|
+ closeModal()
|
|
|
|
|
+ } catch (err) {
|
|
|
|
|
+ alert(err.response?.data?.detail || 'Failed to save device')
|
|
|
|
|
+ } finally {
|
|
|
|
|
+ saving.value = false
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+function confirmDelete(device) {
|
|
|
|
|
+ deviceToDelete.value = device
|
|
|
|
|
+ deleteConfirmVisible.value = true
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+async function deleteDevice() {
|
|
|
|
|
+ deleting.value = true
|
|
|
|
|
+ try {
|
|
|
|
|
+ await devicesApi.deleteSuperadmin(deviceToDelete.value.id)
|
|
|
|
|
+ await loadDevices()
|
|
|
|
|
+ deleteConfirmVisible.value = false
|
|
|
|
|
+ } catch (err) {
|
|
|
|
|
+ alert(err.response?.data?.detail || 'Failed to delete device')
|
|
|
|
|
+ } finally {
|
|
|
|
|
+ deleting.value = false
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+onMounted(() => {
|
|
|
|
|
+ loadDevices()
|
|
|
|
|
+ loadOrganizations()
|
|
|
|
|
+})
|
|
|
|
|
+</script>
|
|
|
|
|
+
|
|
|
<style scoped>
|
|
<style scoped>
|
|
|
.page { padding: 32px; }
|
|
.page { padding: 32px; }
|
|
|
-.page-header { margin-bottom: 32px; }
|
|
|
|
|
|
|
+.page-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 32px; }
|
|
|
.page-header h1 { font-size: 32px; font-weight: 700; color: #1a202c; margin-bottom: 8px; }
|
|
.page-header h1 { font-size: 32px; font-weight: 700; color: #1a202c; margin-bottom: 8px; }
|
|
|
.page-header p { color: #718096; font-size: 16px; }
|
|
.page-header p { color: #718096; font-size: 16px; }
|
|
|
.content { background: white; border-radius: 12px; padding: 24px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }
|
|
.content { background: white; border-radius: 12px; padding: 24px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }
|
|
|
|
|
+.loading, .error, .empty { text-align: center; padding: 40px; color: #718096; }
|
|
|
|
|
+.error { color: #e53e3e; }
|
|
|
|
|
+.data-table { width: 100%; border-collapse: collapse; }
|
|
|
|
|
+.data-table th { text-align: left; padding: 12px; border-bottom: 2px solid #e2e8f0; font-weight: 600; color: #4a5568; font-size: 14px; }
|
|
|
|
|
+.data-table td { padding: 12px; border-bottom: 1px solid #e2e8f0; color: #1a202c; }
|
|
|
|
|
+.data-table tbody tr:hover { background: #f7fafc; }
|
|
|
|
|
+code { background: #f7fafc; padding: 4px 8px; border-radius: 4px; font-family: monospace; font-size: 13px; }
|
|
|
|
|
+.badge { display: inline-block; padding: 4px 12px; border-radius: 12px; font-size: 12px; font-weight: 600; background: #e2e8f0; color: #718096; }
|
|
|
|
|
+.badge.status-online { background: #c6f6d5; color: #22543d; }
|
|
|
|
|
+.badge.status-offline { background: #e2e8f0; color: #718096; }
|
|
|
|
|
+.badge.status-error { background: #fed7d7; color: #742a2a; }
|
|
|
|
|
+.actions { display: flex; gap: 8px; }
|
|
|
|
|
+.btn-icon { padding: 4px 8px; background: none; border: none; cursor: pointer; font-size: 16px; opacity: 0.7; transition: opacity 0.2s; }
|
|
|
|
|
+.btn-icon:hover { opacity: 1; }
|
|
|
|
|
+.btn-primary { padding: 12px 24px; background: #667eea; color: white; border: none; border-radius: 8px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
|
|
|
|
|
+.btn-primary:hover { background: #5568d3; }
|
|
|
|
|
+.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }
|
|
|
|
|
+.btn-secondary { padding: 12px 24px; background: #e2e8f0; color: #4a5568; border: none; border-radius: 8px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
|
|
|
|
|
+.btn-secondary:hover { background: #cbd5e0; }
|
|
|
|
|
+.btn-danger { padding: 12px 24px; background: #f56565; color: white; border: none; border-radius: 8px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
|
|
|
|
|
+.btn-danger:hover { background: #e53e3e; }
|
|
|
|
|
+.modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; }
|
|
|
|
|
+.modal { background: white; border-radius: 12px; width: 90%; max-width: 600px; max-height: 90vh; overflow-y: auto; }
|
|
|
|
|
+.modal-sm { max-width: 400px; }
|
|
|
|
|
+.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 24px; border-bottom: 1px solid #e2e8f0; }
|
|
|
|
|
+.modal-header h2 { font-size: 24px; font-weight: 700; color: #1a202c; }
|
|
|
|
|
+.btn-close { width: 32px; height: 32px; border: none; background: none; font-size: 32px; color: #718096; cursor: pointer; line-height: 1; }
|
|
|
|
|
+.btn-close:hover { color: #1a202c; }
|
|
|
|
|
+.modal-body { padding: 24px; }
|
|
|
|
|
+.modal-footer { display: flex; justify-content: flex-end; gap: 12px; padding: 24px; border-top: 1px solid #e2e8f0; }
|
|
|
|
|
+.form-group { margin-bottom: 20px; }
|
|
|
|
|
+.form-group label { display: block; margin-bottom: 8px; font-weight: 500; color: #4a5568; font-size: 14px; }
|
|
|
|
|
+.form-group input, .form-group select { width: 100%; padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 14px; transition: border-color 0.2s; }
|
|
|
|
|
+.form-group input:focus, .form-group select:focus { outline: none; border-color: #667eea; }
|
|
|
|
|
+.form-group input:disabled { background: #f7fafc; color: #718096; }
|
|
|
</style>
|
|
</style>
|
