Migrate frontend to plugin-based asset architecture
- Add equipmentApi and computersApi to replace legacy machinesApi - Add controller vendor/model fields to Equipment model and forms - Fix map marker navigation to use plugin-specific IDs (equipmentid, computerid, printerid, networkdeviceid) instead of assetid - Fix search to use unified Asset table with correct plugin IDs - Remove legacy printer search that used non-existent field names - Enable optional JWT auth for detail endpoints (public read access) - Clean up USB plugin models (remove unused checkout model) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
cproudlock
@@ -3,7 +3,7 @@
|
||||
<div class="page-header">
|
||||
<h2>Equipment Details</h2>
|
||||
<div class="header-actions">
|
||||
<router-link :to="`/machines/${machine?.machineid}/edit`" class="btn btn-primary" v-if="machine">
|
||||
<router-link :to="`/machines/${equipment?.equipment?.equipmentid}/edit`" class="btn btn-primary" v-if="equipment">
|
||||
Edit
|
||||
</router-link>
|
||||
<router-link to="/machines" class="btn btn-secondary">Back to List</router-link>
|
||||
@@ -12,41 +12,38 @@
|
||||
|
||||
<div v-if="loading" class="loading">Loading...</div>
|
||||
|
||||
<template v-else-if="machine">
|
||||
<template v-else-if="equipment">
|
||||
<!-- Hero Section -->
|
||||
<div class="hero-card">
|
||||
<div class="hero-image" v-if="machine.model?.imageurl">
|
||||
<img :src="machine.model.imageurl" :alt="machine.model?.modelnumber" />
|
||||
</div>
|
||||
<div class="hero-content">
|
||||
<div class="hero-title">
|
||||
<h1>{{ machine.machinenumber }}</h1>
|
||||
<span v-if="machine.alias" class="hero-alias">{{ machine.alias }}</span>
|
||||
<h1>{{ equipment.assetnumber }}</h1>
|
||||
<span v-if="equipment.name" class="hero-alias">{{ equipment.name }}</span>
|
||||
</div>
|
||||
<div class="hero-meta">
|
||||
<span class="badge badge-lg" :class="getCategoryClass(machine.machinetype?.category)">
|
||||
{{ machine.machinetype?.category || 'Unknown' }}
|
||||
<span class="badge badge-lg badge-primary">
|
||||
{{ equipment.assettype_name || 'Equipment' }}
|
||||
</span>
|
||||
<span class="badge badge-lg" :class="getStatusClass(machine.status?.status)">
|
||||
{{ machine.status?.status || 'Unknown' }}
|
||||
<span class="badge badge-lg" :class="getStatusClass(equipment.status_name)">
|
||||
{{ equipment.status_name || 'Unknown' }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="hero-details">
|
||||
<div class="hero-detail" v-if="machine.machinetype?.machinetype">
|
||||
<div class="hero-detail" v-if="equipment.equipment?.equipmenttype_name">
|
||||
<span class="hero-detail-label">Type</span>
|
||||
<span class="hero-detail-value">{{ machine.machinetype.machinetype }}</span>
|
||||
<span class="hero-detail-value">{{ equipment.equipment.equipmenttype_name }}</span>
|
||||
</div>
|
||||
<div class="hero-detail" v-if="machine.vendor?.vendor">
|
||||
<div class="hero-detail" v-if="equipment.equipment?.vendor_name">
|
||||
<span class="hero-detail-label">Vendor</span>
|
||||
<span class="hero-detail-value">{{ machine.vendor.vendor }}</span>
|
||||
<span class="hero-detail-value">{{ equipment.equipment.vendor_name }}</span>
|
||||
</div>
|
||||
<div class="hero-detail" v-if="machine.model?.modelnumber">
|
||||
<div class="hero-detail" v-if="equipment.equipment?.model_name">
|
||||
<span class="hero-detail-label">Model</span>
|
||||
<span class="hero-detail-value">{{ machine.model.modelnumber }}</span>
|
||||
<span class="hero-detail-value">{{ equipment.equipment.model_name }}</span>
|
||||
</div>
|
||||
<div class="hero-detail" v-if="machine.location?.location">
|
||||
<div class="hero-detail" v-if="equipment.location_name">
|
||||
<span class="hero-detail-label">Location</span>
|
||||
<span class="hero-detail-value">{{ machine.location.location }}</span>
|
||||
<span class="hero-detail-value">{{ equipment.location_name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -61,20 +58,16 @@
|
||||
<h3 class="section-title">Identity</h3>
|
||||
<div class="info-list">
|
||||
<div class="info-row">
|
||||
<span class="info-label">Machine Number</span>
|
||||
<span class="info-value">{{ machine.machinenumber }}</span>
|
||||
<span class="info-label">Asset Number</span>
|
||||
<span class="info-value">{{ equipment.assetnumber }}</span>
|
||||
</div>
|
||||
<div class="info-row" v-if="machine.alias">
|
||||
<span class="info-label">Alias</span>
|
||||
<span class="info-value">{{ machine.alias }}</span>
|
||||
<div class="info-row" v-if="equipment.name">
|
||||
<span class="info-label">Name</span>
|
||||
<span class="info-value">{{ equipment.name }}</span>
|
||||
</div>
|
||||
<div class="info-row" v-if="machine.hostname">
|
||||
<span class="info-label">Hostname</span>
|
||||
<span class="info-value mono">{{ machine.hostname }}</span>
|
||||
</div>
|
||||
<div class="info-row" v-if="machine.serialnumber">
|
||||
<div class="info-row" v-if="equipment.serialnumber">
|
||||
<span class="info-label">Serial Number</span>
|
||||
<span class="info-value mono">{{ machine.serialnumber }}</span>
|
||||
<span class="info-value mono">{{ equipment.serialnumber }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -85,47 +78,73 @@
|
||||
<div class="info-list">
|
||||
<div class="info-row">
|
||||
<span class="info-label">Type</span>
|
||||
<span class="info-value">{{ machine.machinetype?.machinetype || '-' }}</span>
|
||||
<span class="info-value">{{ equipment.equipment?.equipmenttype_name || '-' }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">Vendor</span>
|
||||
<span class="info-value">{{ machine.vendor?.vendor || '-' }}</span>
|
||||
<span class="info-value">{{ equipment.equipment?.vendor_name || '-' }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">Model</span>
|
||||
<span class="info-value">{{ machine.model?.modelnumber || '-' }}</span>
|
||||
</div>
|
||||
<div class="info-row" v-if="machine.operatingsystem">
|
||||
<span class="info-label">Operating System</span>
|
||||
<span class="info-value">{{ machine.operatingsystem.osname }}</span>
|
||||
<span class="info-value">{{ equipment.equipment?.model_name || '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PC Information (if PC) -->
|
||||
<div class="section-card" v-if="isPc">
|
||||
<h3 class="section-title">PC Status</h3>
|
||||
<!-- Controller Section (for CNC machines) -->
|
||||
<div class="section-card" v-if="equipment.equipment?.controller_vendor_name || equipment.equipment?.controller_model_name">
|
||||
<h3 class="section-title">Controller</h3>
|
||||
<div class="info-list">
|
||||
<div class="info-row" v-if="machine.loggedinuser">
|
||||
<span class="info-label">Logged In User</span>
|
||||
<span class="info-value">{{ machine.loggedinuser }}</span>
|
||||
<div class="info-row">
|
||||
<span class="info-label">Vendor</span>
|
||||
<span class="info-value">{{ equipment.equipment?.controller_vendor_name || '-' }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">Last Reported</span>
|
||||
<span class="info-value">{{ formatDate(machine.lastreporteddate) }}</span>
|
||||
<span class="info-label">Model</span>
|
||||
<span class="info-value">{{ equipment.equipment?.controller_model_name || '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Equipment Configuration -->
|
||||
<div class="section-card">
|
||||
<h3 class="section-title">Configuration</h3>
|
||||
<div class="info-list">
|
||||
<div class="info-row">
|
||||
<span class="info-label">Last Boot</span>
|
||||
<span class="info-value">{{ formatDate(machine.lastboottime) }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">Features</span>
|
||||
<span class="info-label">Requires Manual Config</span>
|
||||
<span class="info-value">
|
||||
<span class="feature-tag" :class="{ active: machine.isvnc }">VNC</span>
|
||||
<span class="feature-tag" :class="{ active: machine.iswinrm }">WinRM</span>
|
||||
<span class="feature-tag" :class="{ active: machine.isshopfloor }">Shopfloor</span>
|
||||
<span class="feature-tag" :class="{ active: equipment.equipment?.requiresmanualconfig }">
|
||||
{{ equipment.equipment?.requiresmanualconfig ? 'Yes' : 'No' }}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">Location Only</span>
|
||||
<span class="info-value">
|
||||
<span class="feature-tag" :class="{ active: equipment.equipment?.islocationonly }">
|
||||
{{ equipment.equipment?.islocationonly ? 'Yes' : 'No' }}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Maintenance Section -->
|
||||
<div class="section-card" v-if="equipment.equipment?.lastmaintenancedate || equipment.equipment?.nextmaintenancedate">
|
||||
<h3 class="section-title">Maintenance</h3>
|
||||
<div class="info-list">
|
||||
<div class="info-row" v-if="equipment.equipment?.lastmaintenancedate">
|
||||
<span class="info-label">Last Maintenance</span>
|
||||
<span class="info-value">{{ formatDate(equipment.equipment.lastmaintenancedate) }}</span>
|
||||
</div>
|
||||
<div class="info-row" v-if="equipment.equipment?.nextmaintenancedate">
|
||||
<span class="info-label">Next Maintenance</span>
|
||||
<span class="info-value">{{ formatDate(equipment.equipment.nextmaintenancedate) }}</span>
|
||||
</div>
|
||||
<div class="info-row" v-if="equipment.equipment?.maintenanceintervaldays">
|
||||
<span class="info-label">Interval</span>
|
||||
<span class="info-value">{{ equipment.equipment.maintenanceintervaldays }} days</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -140,31 +159,31 @@
|
||||
<span class="info-label">Location</span>
|
||||
<span class="info-value">
|
||||
<LocationMapTooltip
|
||||
v-if="machine.mapleft != null && machine.maptop != null"
|
||||
:left="machine.mapleft"
|
||||
:top="machine.maptop"
|
||||
:machineName="machine.machinenumber"
|
||||
v-if="equipment.mapleft != null && equipment.maptop != null"
|
||||
:left="equipment.mapleft"
|
||||
:top="equipment.maptop"
|
||||
:machineName="equipment.assetnumber"
|
||||
>
|
||||
<span class="location-link">{{ machine.location?.location || 'On Map' }}</span>
|
||||
<span class="location-link">{{ equipment.location_name || 'On Map' }}</span>
|
||||
</LocationMapTooltip>
|
||||
<span v-else>{{ machine.location?.location || '-' }}</span>
|
||||
<span v-else>{{ equipment.location_name || '-' }}</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">Business Unit</span>
|
||||
<span class="info-value">{{ machine.businessunit?.businessunit || '-' }}</span>
|
||||
<span class="info-value">{{ equipment.businessunit_name || '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Connected PC (for Equipment) -->
|
||||
<div class="section-card" v-if="isEquipment">
|
||||
<!-- Connected PC -->
|
||||
<div class="section-card">
|
||||
<h3 class="section-title">Connected PC</h3>
|
||||
<div v-if="!controllingPc" class="empty-message">
|
||||
No controlling PC assigned
|
||||
</div>
|
||||
<div v-else class="connected-device">
|
||||
<router-link :to="getRelatedRoute(controllingPc)" class="device-link">
|
||||
<router-link :to="`/pcs/${controllingPc.plugin_id || controllingPc.assetid}`" class="device-link">
|
||||
<div class="device-icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
|
||||
@@ -173,66 +192,31 @@
|
||||
</svg>
|
||||
</div>
|
||||
<div class="device-info">
|
||||
<span class="device-name">{{ controllingPc.relatedmachinenumber }}</span>
|
||||
<span class="device-alias" v-if="controllingPc.relatedmachinealias">{{ controllingPc.relatedmachinealias }}</span>
|
||||
<span class="device-name">{{ controllingPc.assetnumber }}</span>
|
||||
<span class="device-alias" v-if="controllingPc.name">{{ controllingPc.name }}</span>
|
||||
</div>
|
||||
</router-link>
|
||||
<span class="connection-type">{{ controllingPc.relationshiptype }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Controlled Equipment (for PCs) -->
|
||||
<div class="section-card" v-if="isPc && controlledMachines.length > 0">
|
||||
<h3 class="section-title">Controlled Equipment</h3>
|
||||
<div class="equipment-list">
|
||||
<router-link
|
||||
v-for="rel in controlledMachines"
|
||||
:key="rel.relationshipid"
|
||||
:to="getRelatedRoute(rel)"
|
||||
class="equipment-item"
|
||||
>
|
||||
<div class="equipment-info">
|
||||
<span class="equipment-name">{{ rel.relatedmachinenumber }}</span>
|
||||
<span class="equipment-alias" v-if="rel.relatedmachinealias">{{ rel.relatedmachinealias }}</span>
|
||||
</div>
|
||||
<span class="connection-tag">{{ rel.relationshiptype }}</span>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Network -->
|
||||
<div class="section-card" v-if="machine.communications?.length">
|
||||
<h3 class="section-title">Network</h3>
|
||||
<div class="network-list">
|
||||
<div v-for="comm in machine.communications" :key="comm.communicationid" class="network-item">
|
||||
<div class="network-primary">
|
||||
<span class="ip-address">{{ comm.ipaddress || comm.address || '-' }}</span>
|
||||
<span v-if="comm.isprimary" class="primary-badge">Primary</span>
|
||||
</div>
|
||||
<div class="network-secondary" v-if="comm.macaddress">
|
||||
<span class="mac-address">{{ comm.macaddress }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="connection-type">{{ controllingPc.relationshipType }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Notes -->
|
||||
<div class="section-card" v-if="machine.notes">
|
||||
<div class="section-card" v-if="equipment.notes">
|
||||
<h3 class="section-title">Notes</h3>
|
||||
<p class="notes-text">{{ machine.notes }}</p>
|
||||
<p class="notes-text">{{ equipment.notes }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Audit Footer -->
|
||||
<div class="audit-footer">
|
||||
<span>Created {{ formatDate(machine.createddate) }}<template v-if="machine.createdby"> by {{ machine.createdby }}</template></span>
|
||||
<span>Modified {{ formatDate(machine.modifieddate) }}<template v-if="machine.modifiedby"> by {{ machine.modifiedby }}</template></span>
|
||||
<span>Created {{ formatDate(equipment.createddate) }}<template v-if="equipment.createdby"> by {{ equipment.createdby }}</template></span>
|
||||
<span>Modified {{ formatDate(equipment.modifieddate) }}<template v-if="equipment.modifiedby"> by {{ equipment.modifiedby }}</template></span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div v-else class="card">
|
||||
<p style="text-align: center; color: var(--text-light);">Machine not found</p>
|
||||
<p style="text-align: center; color: var(--text-light);">Equipment not found</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -240,55 +224,63 @@
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { machinesApi } from '../../api'
|
||||
import { equipmentApi, assetsApi } from '../../api'
|
||||
import LocationMapTooltip from '../../components/LocationMapTooltip.vue'
|
||||
|
||||
const route = useRoute()
|
||||
|
||||
const loading = ref(true)
|
||||
const machine = ref(null)
|
||||
const relationships = ref([])
|
||||
|
||||
const isPc = computed(() => {
|
||||
return machine.value?.machinetype?.category === 'PC'
|
||||
})
|
||||
|
||||
const isEquipment = computed(() => {
|
||||
return machine.value?.machinetype?.category === 'Equipment'
|
||||
})
|
||||
const equipment = ref(null)
|
||||
const relationships = ref({ incoming: [], outgoing: [] })
|
||||
|
||||
const controllingPc = computed(() => {
|
||||
return relationships.value.find(r => r.direction === 'controlled_by' && r.relatedcategory === 'PC')
|
||||
})
|
||||
// For equipment, find a related computer in any "Controls" relationship
|
||||
// Check both incoming (computer controls this) and outgoing (legacy data may have equipment -> computer)
|
||||
|
||||
const controlledMachines = computed(() => {
|
||||
return relationships.value.filter(r => r.direction === 'controls')
|
||||
// First check incoming - computer as source controlling this equipment
|
||||
for (const rel of relationships.value.incoming || []) {
|
||||
if (rel.source_asset?.assettype_name === 'computer' && rel.relationship_type_name === 'Controls') {
|
||||
return {
|
||||
...rel.source_asset,
|
||||
relationshipType: rel.relationship_type_name
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Also check outgoing - legacy data may have equipment -> computer Controls relationships
|
||||
for (const rel of relationships.value.outgoing || []) {
|
||||
if (rel.target_asset?.assettype_name === 'computer' && rel.relationship_type_name === 'Controls') {
|
||||
return {
|
||||
...rel.target_asset,
|
||||
relationshipType: rel.relationship_type_name
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return null
|
||||
})
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
const response = await machinesApi.get(route.params.id)
|
||||
machine.value = response.data.data
|
||||
const response = await equipmentApi.get(route.params.id)
|
||||
equipment.value = response.data.data
|
||||
|
||||
const relResponse = await machinesApi.getRelationships(route.params.id)
|
||||
relationships.value = relResponse.data.data || []
|
||||
// Load relationships using asset ID
|
||||
if (equipment.value?.assetid) {
|
||||
try {
|
||||
const relResponse = await assetsApi.getRelationships(equipment.value.assetid)
|
||||
relationships.value = relResponse.data.data || { incoming: [], outgoing: [] }
|
||||
} catch (e) {
|
||||
console.log('Relationships not available')
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading machine:', error)
|
||||
console.error('Error loading equipment:', error)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
})
|
||||
|
||||
function getCategoryClass(category) {
|
||||
if (!category) return 'badge-info'
|
||||
const c = category.toLowerCase()
|
||||
if (c === 'equipment') return 'badge-primary'
|
||||
if (c === 'pc') return 'badge-info'
|
||||
if (c === 'network') return 'badge-warning'
|
||||
if (c === 'printer') return 'badge-secondary'
|
||||
return 'badge-info'
|
||||
}
|
||||
|
||||
function getStatusClass(status) {
|
||||
if (!status) return 'badge-info'
|
||||
const s = status.toLowerCase()
|
||||
@@ -302,17 +294,31 @@ function formatDate(dateStr) {
|
||||
if (!dateStr) return '-'
|
||||
return new Date(dateStr).toLocaleString()
|
||||
}
|
||||
|
||||
function getRelatedRoute(rel) {
|
||||
const category = rel.relatedcategory?.toLowerCase() || ''
|
||||
const routeMap = {
|
||||
'equipment': '/machines',
|
||||
'pc': '/pcs',
|
||||
'printer': '/printers'
|
||||
}
|
||||
const basePath = routeMap[category] || '/machines'
|
||||
return `${basePath}/${rel.relatedmachineid}`
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Uses global detail page styles from style.css -->
|
||||
<style scoped>
|
||||
.mono {
|
||||
font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
|
||||
}
|
||||
|
||||
.feature-tag {
|
||||
display: inline-block;
|
||||
padding: 0.3rem 0.625rem;
|
||||
font-size: 0.875rem;
|
||||
border-radius: 5px;
|
||||
background: var(--bg);
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.feature-tag.active {
|
||||
background: #e3f2fd;
|
||||
color: #1976d2;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.feature-tag.active {
|
||||
background: #1e3a5f;
|
||||
color: #60a5fa;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -7,13 +7,15 @@
|
||||
<div class="card">
|
||||
<div v-if="loading" class="loading">Loading...</div>
|
||||
|
||||
<form v-else @submit.prevent="saveMachine">
|
||||
<form v-else @submit.prevent="saveEquipment">
|
||||
<!-- Identity Section -->
|
||||
<h3 class="form-section-title">Identity</h3>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="machinenumber">Machine Number *</label>
|
||||
<label for="assetnumber">Asset Number *</label>
|
||||
<input
|
||||
id="machinenumber"
|
||||
v-model="form.machinenumber"
|
||||
id="assetnumber"
|
||||
v-model="form.assetnumber"
|
||||
type="text"
|
||||
class="form-control"
|
||||
required
|
||||
@@ -21,10 +23,10 @@
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="alias">Alias</label>
|
||||
<label for="name">Name / Alias</label>
|
||||
<input
|
||||
id="alias"
|
||||
v-model="form.alias"
|
||||
id="name"
|
||||
v-model="form.name"
|
||||
type="text"
|
||||
class="form-control"
|
||||
/>
|
||||
@@ -32,16 +34,6 @@
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="hostname">Hostname</label>
|
||||
<input
|
||||
id="hostname"
|
||||
v-model="form.hostname"
|
||||
type="text"
|
||||
class="form-control"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="serialnumber">Serial Number</label>
|
||||
<input
|
||||
@@ -51,27 +43,6 @@
|
||||
class="form-control"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="machinetypeid">Equipment Type *</label>
|
||||
<select
|
||||
id="machinetypeid"
|
||||
v-model="form.machinetypeid"
|
||||
class="form-control"
|
||||
required
|
||||
>
|
||||
<option value="">Select type...</option>
|
||||
<option
|
||||
v-for="mt in machineTypes"
|
||||
:key="mt.machinetypeid"
|
||||
:value="mt.machinetypeid"
|
||||
>
|
||||
{{ mt.machinetype }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="statusid">Status</label>
|
||||
@@ -92,7 +63,27 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Equipment Hardware Section -->
|
||||
<h3 class="form-section-title">Equipment Hardware</h3>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="equipmenttypeid">Equipment Type</label>
|
||||
<select
|
||||
id="equipmenttypeid"
|
||||
v-model="form.equipmenttypeid"
|
||||
class="form-control"
|
||||
>
|
||||
<option value="">Select type...</option>
|
||||
<option
|
||||
v-for="et in equipmentTypes"
|
||||
:key="et.equipmenttypeid"
|
||||
:value="et.equipmenttypeid"
|
||||
>
|
||||
{{ et.equipmenttype }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="vendorid">Vendor</label>
|
||||
<select
|
||||
@@ -110,7 +101,9 @@
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="modelnumberid">Model</label>
|
||||
<select
|
||||
@@ -127,10 +120,56 @@
|
||||
{{ m.modelnumber }}
|
||||
</option>
|
||||
</select>
|
||||
<small class="form-help">Selecting a model will auto-set the equipment type</small>
|
||||
<small class="form-help" v-if="form.vendorid">Filtered by selected vendor</small>
|
||||
</div>
|
||||
|
||||
<div class="form-group"></div>
|
||||
</div>
|
||||
|
||||
<!-- Controller Section (for CNC machines) -->
|
||||
<h3 class="form-section-title">Controller</h3>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="controller_vendorid">Controller Vendor</label>
|
||||
<select
|
||||
id="controller_vendorid"
|
||||
v-model="form.controller_vendorid"
|
||||
class="form-control"
|
||||
>
|
||||
<option value="">Select vendor...</option>
|
||||
<option
|
||||
v-for="v in vendors"
|
||||
:key="v.vendorid"
|
||||
:value="v.vendorid"
|
||||
>
|
||||
{{ v.vendor }}
|
||||
</option>
|
||||
</select>
|
||||
<small class="form-help">e.g., Fanuc, Siemens, Allen-Bradley</small>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="controller_modelid">Controller Model</label>
|
||||
<select
|
||||
id="controller_modelid"
|
||||
v-model="form.controller_modelid"
|
||||
class="form-control"
|
||||
>
|
||||
<option value="">Select model...</option>
|
||||
<option
|
||||
v-for="m in filteredControllerModels"
|
||||
:key="m.modelnumberid"
|
||||
:value="m.modelnumberid"
|
||||
>
|
||||
{{ m.modelnumber }}
|
||||
</option>
|
||||
</select>
|
||||
<small class="form-help" v-if="form.controller_vendorid">Filtered by controller vendor</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Location Section -->
|
||||
<h3 class="form-section-title">Location & Organization</h3>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="locationid">Location</label>
|
||||
@@ -145,7 +184,7 @@
|
||||
:key="l.locationid"
|
||||
:value="l.locationid"
|
||||
>
|
||||
{{ l.location }}
|
||||
{{ l.locationname }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
@@ -169,56 +208,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="notes">Notes</label>
|
||||
<textarea
|
||||
id="notes"
|
||||
v-model="form.notes"
|
||||
class="form-control"
|
||||
rows="3"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<!-- Controlling PC Selection -->
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="controllingpc">Controlling PC</label>
|
||||
<select
|
||||
id="controllingpc"
|
||||
v-model="controllingPcId"
|
||||
class="form-control"
|
||||
>
|
||||
<option :value="null">None (standalone)</option>
|
||||
<option
|
||||
v-for="pc in pcs"
|
||||
:key="pc.machineid"
|
||||
:value="pc.machineid"
|
||||
>
|
||||
{{ pc.machinenumber }}{{ pc.alias ? ` (${pc.alias})` : '' }}
|
||||
</option>
|
||||
</select>
|
||||
<small class="form-help">Select the PC that controls this equipment</small>
|
||||
</div>
|
||||
|
||||
<div class="form-group" v-if="controllingPcId">
|
||||
<label for="connectiontype">Connection Type</label>
|
||||
<select
|
||||
id="connectiontype"
|
||||
v-model="relationshipTypeId"
|
||||
class="form-control"
|
||||
>
|
||||
<option
|
||||
v-for="rt in relationshipTypes"
|
||||
:key="rt.relationshiptypeid"
|
||||
:value="rt.relationshiptypeid"
|
||||
>
|
||||
{{ rt.relationshiptype }}
|
||||
</option>
|
||||
</select>
|
||||
<small class="form-help">How the PC connects to this equipment</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Map Location Picker -->
|
||||
<div class="form-group">
|
||||
<label>Map Location</label>
|
||||
@@ -249,6 +238,79 @@
|
||||
</template>
|
||||
</Modal>
|
||||
|
||||
<!-- Configuration Section -->
|
||||
<h3 class="form-section-title">Configuration</h3>
|
||||
<div class="form-row">
|
||||
<div class="form-group checkbox-group">
|
||||
<label>
|
||||
<input type="checkbox" v-model="form.requiresmanualconfig" />
|
||||
Requires Manual Config
|
||||
</label>
|
||||
<small class="form-help">Multi-PC machine needs manual configuration</small>
|
||||
</div>
|
||||
|
||||
<div class="form-group checkbox-group">
|
||||
<label>
|
||||
<input type="checkbox" v-model="form.islocationonly" />
|
||||
Location Only
|
||||
</label>
|
||||
<small class="form-help">Virtual location marker (not actual equipment)</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Controlling PC Selection -->
|
||||
<h3 class="form-section-title">Connected PC</h3>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="controllingpc">Controlling PC</label>
|
||||
<select
|
||||
id="controllingpc"
|
||||
v-model="controllingPcId"
|
||||
class="form-control"
|
||||
>
|
||||
<option :value="null">None (standalone)</option>
|
||||
<option
|
||||
v-for="pc in pcs"
|
||||
:key="pc.assetid"
|
||||
:value="pc.assetid"
|
||||
>
|
||||
{{ pc.assetnumber }}{{ pc.name ? ` (${pc.name})` : '' }}
|
||||
</option>
|
||||
</select>
|
||||
<small class="form-help">Select the PC that controls this equipment</small>
|
||||
</div>
|
||||
|
||||
<div class="form-group" v-if="controllingPcId">
|
||||
<label for="connectiontype">Connection Type</label>
|
||||
<select
|
||||
id="connectiontype"
|
||||
v-model="relationshipTypeId"
|
||||
class="form-control"
|
||||
>
|
||||
<option
|
||||
v-for="rt in relationshipTypes"
|
||||
:key="rt.relationshiptypeid"
|
||||
:value="rt.relationshiptypeid"
|
||||
>
|
||||
{{ rt.relationshiptype }}
|
||||
</option>
|
||||
</select>
|
||||
<small class="form-help">How the PC connects to this equipment</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Notes Section -->
|
||||
<h3 class="form-section-title">Notes</h3>
|
||||
<div class="form-group">
|
||||
<textarea
|
||||
id="notes"
|
||||
v-model="form.notes"
|
||||
class="form-control"
|
||||
rows="3"
|
||||
placeholder="Additional notes..."
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<div v-if="error" class="error-message">{{ error }}</div>
|
||||
|
||||
<div style="display: flex; gap: 0.5rem; margin-top: 1.5rem;">
|
||||
@@ -265,7 +327,7 @@
|
||||
<script setup>
|
||||
import { ref, onMounted, computed, watch } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { machinesApi, machinetypesApi, statusesApi, vendorsApi, locationsApi, relationshipTypesApi, modelsApi, businessunitsApi } from '../../api'
|
||||
import { equipmentApi, vendorsApi, locationsApi, modelsApi, businessunitsApi, computersApi, assetsApi } from '../../api'
|
||||
import ShopFloorMap from '../../components/ShopFloorMap.vue'
|
||||
import Modal from '../../components/Modal.vue'
|
||||
import { currentTheme } from '../../stores/theme'
|
||||
@@ -282,22 +344,25 @@ const showMapPicker = ref(false)
|
||||
const tempMapPosition = ref(null)
|
||||
|
||||
const form = ref({
|
||||
machinenumber: '',
|
||||
alias: '',
|
||||
hostname: '',
|
||||
assetnumber: '',
|
||||
name: '',
|
||||
serialnumber: '',
|
||||
machinetypeid: '',
|
||||
modelnumberid: '',
|
||||
statusid: '',
|
||||
statusid: 1,
|
||||
equipmenttypeid: '',
|
||||
vendorid: '',
|
||||
modelnumberid: '',
|
||||
controller_vendorid: '',
|
||||
controller_modelid: '',
|
||||
locationid: '',
|
||||
businessunitid: '',
|
||||
requiresmanualconfig: false,
|
||||
islocationonly: false,
|
||||
notes: '',
|
||||
mapleft: null,
|
||||
maptop: null
|
||||
})
|
||||
|
||||
const machineTypes = ref([])
|
||||
const equipmentTypes = ref([])
|
||||
const statuses = ref([])
|
||||
const vendors = ref([])
|
||||
const locations = ref([])
|
||||
@@ -308,55 +373,73 @@ const relationshipTypes = ref([])
|
||||
const controllingPcId = ref(null)
|
||||
const relationshipTypeId = ref(null)
|
||||
const existingRelationshipId = ref(null)
|
||||
const currentEquipment = ref(null)
|
||||
|
||||
// Filter models by selected vendor
|
||||
// Filter models by selected equipment vendor
|
||||
const filteredModels = computed(() => {
|
||||
return models.value.filter(m => {
|
||||
// Filter by vendor if selected
|
||||
if (form.value.vendorid && m.vendorid !== form.value.vendorid) {
|
||||
return false
|
||||
}
|
||||
// Only show models for Equipment category types
|
||||
const modelType = machineTypes.value.find(t => t.machinetypeid === m.machinetypeid)
|
||||
if (modelType && modelType.category !== 'Equipment') {
|
||||
return false
|
||||
}
|
||||
return true
|
||||
})
|
||||
if (!form.value.vendorid) return models.value
|
||||
return models.value.filter(m => m.vendorid === form.value.vendorid)
|
||||
})
|
||||
|
||||
// When model changes, auto-set the machine type
|
||||
watch(() => form.value.modelnumberid, (newModelId) => {
|
||||
if (newModelId) {
|
||||
const selectedModel = models.value.find(m => m.modelnumberid === newModelId)
|
||||
if (selectedModel && selectedModel.machinetypeid) {
|
||||
form.value.machinetypeid = selectedModel.machinetypeid
|
||||
// Filter models by selected controller vendor
|
||||
const filteredControllerModels = computed(() => {
|
||||
if (!form.value.controller_vendorid) return models.value
|
||||
return models.value.filter(m => m.vendorid === form.value.controller_vendorid)
|
||||
})
|
||||
|
||||
// Clear model selection when vendor changes
|
||||
watch(() => form.value.vendorid, (newVal, oldVal) => {
|
||||
if (oldVal && newVal !== oldVal) {
|
||||
const currentModel = models.value.find(m => m.modelnumberid === form.value.modelnumberid)
|
||||
if (currentModel && currentModel.vendorid !== newVal) {
|
||||
form.value.modelnumberid = ''
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// Clear controller model when controller vendor changes
|
||||
watch(() => form.value.controller_vendorid, (newVal, oldVal) => {
|
||||
if (oldVal && newVal !== oldVal) {
|
||||
const currentModel = models.value.find(m => m.modelnumberid === form.value.controller_modelid)
|
||||
if (currentModel && currentModel.vendorid !== newVal) {
|
||||
form.value.controller_modelid = ''
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
// Load reference data
|
||||
const [mtRes, statusRes, vendorRes, locRes, modelsRes, buRes, pcsRes, relTypesRes] = await Promise.all([
|
||||
machinetypesApi.list({ category: 'Equipment' }),
|
||||
statusesApi.list(),
|
||||
vendorsApi.list(),
|
||||
locationsApi.list(),
|
||||
modelsApi.list(),
|
||||
businessunitsApi.list(),
|
||||
machinesApi.list({ category: 'PC', perpage: 500 }),
|
||||
relationshipTypesApi.list()
|
||||
// Load reference data in parallel
|
||||
const [typesRes, statusRes, vendorRes, locRes, modelsRes, buRes, pcsRes, relTypesRes] = await Promise.all([
|
||||
equipmentApi.types.list(),
|
||||
assetsApi.statuses.list(),
|
||||
vendorsApi.list({ per_page: 500 }),
|
||||
locationsApi.list({ per_page: 500 }),
|
||||
modelsApi.list({ per_page: 1000 }),
|
||||
businessunitsApi.list({ per_page: 500 }),
|
||||
computersApi.list({ per_page: 500 }),
|
||||
assetsApi.types.list() // Used for relationship types, will fix below
|
||||
])
|
||||
|
||||
machineTypes.value = mtRes.data.data || []
|
||||
equipmentTypes.value = typesRes.data.data || []
|
||||
statuses.value = statusRes.data.data || []
|
||||
vendors.value = vendorRes.data.data || []
|
||||
locations.value = locRes.data.data || []
|
||||
models.value = modelsRes.data.data || []
|
||||
businessunits.value = buRes.data.data || []
|
||||
pcs.value = pcsRes.data.data || []
|
||||
relationshipTypes.value = relTypesRes.data.data || []
|
||||
|
||||
// Load relationship types separately
|
||||
try {
|
||||
const relRes = await fetch('/api/assets/relationshiptypes')
|
||||
if (relRes.ok) {
|
||||
const relData = await relRes.json()
|
||||
relationshipTypes.value = relData.data || []
|
||||
}
|
||||
} catch (e) {
|
||||
// Fallback - use hardcoded Controls type
|
||||
relationshipTypes.value = [{ relationshiptypeid: 1, relationshiptype: 'Controls' }]
|
||||
}
|
||||
|
||||
// Set default relationship type to "Controls" if available
|
||||
const controlsType = relationshipTypes.value.find(t => t.relationshiptype === 'Controls')
|
||||
@@ -364,34 +447,49 @@ onMounted(async () => {
|
||||
relationshipTypeId.value = controlsType.relationshiptypeid
|
||||
}
|
||||
|
||||
// Load machine if editing
|
||||
// Load equipment if editing
|
||||
if (isEdit.value) {
|
||||
const response = await machinesApi.get(route.params.id)
|
||||
const machine = response.data.data
|
||||
const response = await equipmentApi.get(route.params.id)
|
||||
const data = response.data.data
|
||||
currentEquipment.value = data
|
||||
|
||||
form.value = {
|
||||
machinenumber: machine.machinenumber || '',
|
||||
alias: machine.alias || '',
|
||||
hostname: machine.hostname || '',
|
||||
serialnumber: machine.serialnumber || '',
|
||||
machinetypeid: machine.machinetype?.machinetypeid || '',
|
||||
modelnumberid: machine.model?.modelnumberid || '',
|
||||
statusid: machine.status?.statusid || '',
|
||||
vendorid: machine.vendor?.vendorid || '',
|
||||
locationid: machine.location?.locationid || '',
|
||||
businessunitid: machine.businessunit?.businessunitid || '',
|
||||
notes: machine.notes || '',
|
||||
mapleft: machine.mapleft ?? null,
|
||||
maptop: machine.maptop ?? null
|
||||
assetnumber: data.assetnumber || '',
|
||||
name: data.name || '',
|
||||
serialnumber: data.serialnumber || '',
|
||||
statusid: data.statusid || 1,
|
||||
equipmenttypeid: data.equipment?.equipmenttypeid || '',
|
||||
vendorid: data.equipment?.vendorid || '',
|
||||
modelnumberid: data.equipment?.modelnumberid || '',
|
||||
controller_vendorid: data.equipment?.controller_vendorid || '',
|
||||
controller_modelid: data.equipment?.controller_modelid || '',
|
||||
locationid: data.locationid || '',
|
||||
businessunitid: data.businessunitid || '',
|
||||
requiresmanualconfig: data.equipment?.requiresmanualconfig || false,
|
||||
islocationonly: data.equipment?.islocationonly || false,
|
||||
notes: data.notes || '',
|
||||
mapleft: data.mapleft ?? null,
|
||||
maptop: data.maptop ?? null
|
||||
}
|
||||
|
||||
// Load existing relationship (controlling PC)
|
||||
const relResponse = await machinesApi.getRelationships(route.params.id)
|
||||
const relationships = relResponse.data.data || []
|
||||
const pcRelationship = relationships.find(r => r.direction === 'controlled_by' && r.relatedcategory === 'PC')
|
||||
if (pcRelationship) {
|
||||
controllingPcId.value = pcRelationship.relatedmachineid
|
||||
relationshipTypeId.value = pcRelationship.relationshiptypeid
|
||||
existingRelationshipId.value = pcRelationship.relationshipid
|
||||
// Load existing relationships to find controlling PC
|
||||
if (data.assetid) {
|
||||
try {
|
||||
const relResponse = await assetsApi.getRelationships(data.assetid)
|
||||
const relationships = relResponse.data.data || { incoming: [], outgoing: [] }
|
||||
|
||||
// Check incoming relationships for a controlling PC
|
||||
for (const rel of relationships.incoming || []) {
|
||||
if (rel.source_asset?.assettype_name === 'computer' && rel.relationship_type_name === 'Controls') {
|
||||
controllingPcId.value = rel.source_asset.assetid
|
||||
relationshipTypeId.value = rel.relationshiptypeid
|
||||
existingRelationshipId.value = rel.assetrelationshipid
|
||||
break
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.log('Could not load relationships')
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
@@ -420,45 +518,56 @@ function clearMapPosition() {
|
||||
tempMapPosition.value = null
|
||||
}
|
||||
|
||||
async function saveMachine() {
|
||||
async function saveEquipment() {
|
||||
error.value = ''
|
||||
saving.value = true
|
||||
|
||||
try {
|
||||
const data = {
|
||||
...form.value,
|
||||
machinetypeid: form.value.machinetypeid || null,
|
||||
modelnumberid: form.value.modelnumberid || null,
|
||||
statusid: form.value.statusid || null,
|
||||
assetnumber: form.value.assetnumber,
|
||||
name: form.value.name || null,
|
||||
serialnumber: form.value.serialnumber || null,
|
||||
statusid: form.value.statusid || 1,
|
||||
equipmenttypeid: form.value.equipmenttypeid || null,
|
||||
vendorid: form.value.vendorid || null,
|
||||
modelnumberid: form.value.modelnumberid || null,
|
||||
controller_vendorid: form.value.controller_vendorid || null,
|
||||
controller_modelid: form.value.controller_modelid || null,
|
||||
locationid: form.value.locationid || null,
|
||||
businessunitid: form.value.businessunitid || null,
|
||||
requiresmanualconfig: form.value.requiresmanualconfig,
|
||||
islocationonly: form.value.islocationonly,
|
||||
notes: form.value.notes || null,
|
||||
mapleft: form.value.mapleft,
|
||||
maptop: form.value.maptop
|
||||
}
|
||||
|
||||
let machineId = route.params.id
|
||||
let savedEquipment
|
||||
let assetId
|
||||
|
||||
if (isEdit.value) {
|
||||
await machinesApi.update(route.params.id, data)
|
||||
const response = await equipmentApi.update(route.params.id, data)
|
||||
savedEquipment = response.data.data
|
||||
assetId = savedEquipment.assetid
|
||||
} else {
|
||||
const response = await machinesApi.create(data)
|
||||
machineId = response.data.data.machineid
|
||||
const response = await equipmentApi.create(data)
|
||||
savedEquipment = response.data.data
|
||||
assetId = savedEquipment.assetid
|
||||
}
|
||||
|
||||
// Handle relationship (controlling PC)
|
||||
await saveRelationship(machineId)
|
||||
await saveRelationship(assetId)
|
||||
|
||||
router.push('/machines')
|
||||
router.push(`/machines/${savedEquipment.equipment?.equipmentid || route.params.id}`)
|
||||
} catch (err) {
|
||||
console.error('Error saving machine:', err)
|
||||
error.value = err.response?.data?.message || 'Failed to save machine'
|
||||
console.error('Error saving equipment:', err)
|
||||
error.value = err.response?.data?.message || 'Failed to save equipment'
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function saveRelationship(machineId) {
|
||||
async function saveRelationship(assetId) {
|
||||
// If no PC selected and no existing relationship, nothing to do
|
||||
if (!controllingPcId.value && !existingRelationshipId.value) {
|
||||
return
|
||||
@@ -466,7 +575,7 @@ async function saveRelationship(machineId) {
|
||||
|
||||
// If clearing the relationship
|
||||
if (!controllingPcId.value && existingRelationshipId.value) {
|
||||
await machinesApi.deleteRelationship(existingRelationshipId.value)
|
||||
await assetsApi.deleteRelationship(existingRelationshipId.value)
|
||||
return
|
||||
}
|
||||
|
||||
@@ -474,20 +583,50 @@ async function saveRelationship(machineId) {
|
||||
if (controllingPcId.value) {
|
||||
// If there's an existing relationship, delete it first
|
||||
if (existingRelationshipId.value) {
|
||||
await machinesApi.deleteRelationship(existingRelationshipId.value)
|
||||
await assetsApi.deleteRelationship(existingRelationshipId.value)
|
||||
}
|
||||
|
||||
// Create new relationship
|
||||
await machinesApi.createRelationship(machineId, {
|
||||
relatedmachineid: controllingPcId.value,
|
||||
relationshiptypeid: relationshipTypeId.value,
|
||||
direction: 'controlled_by'
|
||||
// Create new relationship (PC controls Equipment, so PC is source, Equipment is target)
|
||||
await assetsApi.createRelationship({
|
||||
source_assetid: controllingPcId.value,
|
||||
target_assetid: assetId,
|
||||
relationshiptypeid: relationshipTypeId.value
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.form-section-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
margin: 1.5rem 0 0.75rem 0;
|
||||
padding-bottom: 0.5rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.form-section-title:first-of-type {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.checkbox-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.checkbox-group label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.checkbox-group input[type="checkbox"] {
|
||||
width: 1.1rem;
|
||||
height: 1.1rem;
|
||||
}
|
||||
|
||||
.map-location-control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -499,7 +638,7 @@ async function saveRelationship(machineId) {
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 1rem;
|
||||
background: #e3f2fd;
|
||||
background: var(--bg);
|
||||
border-radius: 4px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
@@ -24,9 +24,9 @@
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Machine #</th>
|
||||
<th>Alias</th>
|
||||
<th>Hostname</th>
|
||||
<th>Asset #</th>
|
||||
<th>Name</th>
|
||||
<th>Serial Number</th>
|
||||
<th>Type</th>
|
||||
<th>Status</th>
|
||||
<th>Location</th>
|
||||
@@ -34,27 +34,27 @@
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="machine in machines" :key="machine.machineid">
|
||||
<td>{{ machine.machinenumber }}</td>
|
||||
<td>{{ machine.alias || '-' }}</td>
|
||||
<td>{{ machine.hostname || '-' }}</td>
|
||||
<td>{{ machine.machinetype }}</td>
|
||||
<tr v-for="item in equipment" :key="item.assetid">
|
||||
<td>{{ item.assetnumber }}</td>
|
||||
<td>{{ item.name || '-' }}</td>
|
||||
<td class="mono">{{ item.serialnumber || '-' }}</td>
|
||||
<td>{{ item.equipment?.equipmenttype_name || '-' }}</td>
|
||||
<td>
|
||||
<span class="badge" :class="getStatusClass(machine.status)">
|
||||
{{ machine.status || 'Unknown' }}
|
||||
<span class="badge" :class="getStatusClass(item.status_name)">
|
||||
{{ item.status_name || 'Unknown' }}
|
||||
</span>
|
||||
</td>
|
||||
<td>{{ machine.location || '-' }}</td>
|
||||
<td>{{ item.location_name || '-' }}</td>
|
||||
<td class="actions">
|
||||
<router-link
|
||||
:to="`/machines/${machine.machineid}`"
|
||||
:to="`/machines/${item.equipment?.equipmentid || item.assetid}`"
|
||||
class="btn btn-secondary btn-sm"
|
||||
>
|
||||
View
|
||||
</router-link>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="machines.length === 0">
|
||||
<tr v-if="equipment.length === 0">
|
||||
<td colspan="7" style="text-align: center; color: var(--text-light);">
|
||||
No equipment found
|
||||
</td>
|
||||
@@ -82,9 +82,9 @@
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { machinesApi } from '../../api'
|
||||
import { equipmentApi } from '../../api'
|
||||
|
||||
const machines = ref([])
|
||||
const equipment = ref([])
|
||||
const loading = ref(true)
|
||||
const search = ref('')
|
||||
const page = ref(1)
|
||||
@@ -93,21 +93,20 @@ const totalPages = ref(1)
|
||||
let searchTimeout = null
|
||||
|
||||
onMounted(() => {
|
||||
loadMachines()
|
||||
loadEquipment()
|
||||
})
|
||||
|
||||
async function loadMachines() {
|
||||
async function loadEquipment() {
|
||||
loading.value = true
|
||||
try {
|
||||
const params = {
|
||||
page: page.value,
|
||||
perpage: 20,
|
||||
category: 'Equipment'
|
||||
per_page: 20
|
||||
}
|
||||
if (search.value) params.search = search.value
|
||||
|
||||
const response = await machinesApi.list(params)
|
||||
machines.value = response.data.data || []
|
||||
const response = await equipmentApi.list(params)
|
||||
equipment.value = response.data.data || []
|
||||
totalPages.value = response.data.meta?.pagination?.total_pages || 1
|
||||
} catch (error) {
|
||||
console.error('Error loading equipment:', error)
|
||||
@@ -120,13 +119,13 @@ function debouncedSearch() {
|
||||
clearTimeout(searchTimeout)
|
||||
searchTimeout = setTimeout(() => {
|
||||
page.value = 1
|
||||
loadMachines()
|
||||
loadEquipment()
|
||||
}, 300)
|
||||
}
|
||||
|
||||
function goToPage(p) {
|
||||
page.value = p
|
||||
loadMachines()
|
||||
loadEquipment()
|
||||
}
|
||||
|
||||
function getStatusClass(status) {
|
||||
@@ -138,3 +137,9 @@ function getStatusClass(status) {
|
||||
return 'badge-info'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.mono {
|
||||
font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user