Initial commit: Shop Database Flask Application
Flask backend with Vue 3 frontend for shop floor machine management. Includes database schema export for MySQL shopdb_flask database. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
cproudlock
372
frontend/src/views/pcs/PCDetail.vue
Normal file
372
frontend/src/views/pcs/PCDetail.vue
Normal file
@@ -0,0 +1,372 @@
|
||||
<template>
|
||||
<div class="detail-page">
|
||||
<div class="page-header">
|
||||
<h2>PC Details</h2>
|
||||
<div class="header-actions">
|
||||
<router-link :to="`/pcs/${$route.params.id}/edit`" class="btn btn-primary">Edit</router-link>
|
||||
<router-link to="/pcs" class="btn btn-secondary">Back to List</router-link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="loading" class="loading">Loading...</div>
|
||||
|
||||
<template v-else-if="pc">
|
||||
<!-- Hero Section -->
|
||||
<div class="hero-card">
|
||||
<div class="hero-image" v-if="pc.model?.imageurl">
|
||||
<img :src="pc.model.imageurl" :alt="pc.model?.modelnumber" />
|
||||
</div>
|
||||
<div class="hero-content">
|
||||
<div class="hero-title">
|
||||
<h1>{{ pc.machinenumber }}</h1>
|
||||
<span v-if="pc.alias" class="hero-alias">{{ pc.alias }}</span>
|
||||
</div>
|
||||
<div class="hero-meta">
|
||||
<span class="badge badge-lg badge-info">PC</span>
|
||||
<span class="badge badge-lg" :class="getStatusClass(pc.status?.status)">
|
||||
{{ pc.status?.status || 'Unknown' }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="hero-details">
|
||||
<div class="hero-detail" v-if="pc.pctype">
|
||||
<span class="hero-detail-label">PC Type</span>
|
||||
<span class="hero-detail-value">{{ pc.pctype.pctype || pc.pctype }}</span>
|
||||
</div>
|
||||
<div class="hero-detail" v-if="pc.vendor?.vendor">
|
||||
<span class="hero-detail-label">Vendor</span>
|
||||
<span class="hero-detail-value">{{ pc.vendor.vendor }}</span>
|
||||
</div>
|
||||
<div class="hero-detail" v-if="pc.model?.modelnumber">
|
||||
<span class="hero-detail-label">Model</span>
|
||||
<span class="hero-detail-value">{{ pc.model.modelnumber }}</span>
|
||||
</div>
|
||||
<div class="hero-detail" v-if="ipAddress">
|
||||
<span class="hero-detail-label">IP Address</span>
|
||||
<span class="hero-detail-value mono">{{ ipAddress }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Content Grid -->
|
||||
<div class="content-grid">
|
||||
<!-- Left Column -->
|
||||
<div class="content-column">
|
||||
<!-- Identity Section -->
|
||||
<div class="section-card">
|
||||
<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">{{ pc.machinenumber }}</span>
|
||||
</div>
|
||||
<div class="info-row" v-if="pc.alias">
|
||||
<span class="info-label">Alias</span>
|
||||
<span class="info-value">{{ pc.alias }}</span>
|
||||
</div>
|
||||
<div class="info-row" v-if="pc.hostname">
|
||||
<span class="info-label">Hostname</span>
|
||||
<span class="info-value mono">{{ pc.hostname }}</span>
|
||||
</div>
|
||||
<div class="info-row" v-if="pc.serialnumber">
|
||||
<span class="info-label">Serial Number</span>
|
||||
<span class="info-value mono">{{ pc.serialnumber }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hardware Section -->
|
||||
<div class="section-card">
|
||||
<h3 class="section-title">Hardware</h3>
|
||||
<div class="info-list">
|
||||
<div class="info-row" v-if="pc.pctype">
|
||||
<span class="info-label">PC Type</span>
|
||||
<span class="info-value">{{ pc.pctype.pctype || pc.pctype }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">Vendor</span>
|
||||
<span class="info-value">{{ pc.vendor?.vendor || '-' }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">Model</span>
|
||||
<span class="info-value">{{ pc.model?.modelnumber || '-' }}</span>
|
||||
</div>
|
||||
<div class="info-row" v-if="pc.operatingsystem">
|
||||
<span class="info-label">Operating System</span>
|
||||
<span class="info-value">{{ pc.operatingsystem.osname }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PC Status -->
|
||||
<div class="section-card">
|
||||
<h3 class="section-title">Status</h3>
|
||||
<div class="info-list">
|
||||
<div class="info-row" v-if="pc.loggedinuser">
|
||||
<span class="info-label">Logged In User</span>
|
||||
<span class="info-value">{{ pc.loggedinuser }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">Features</span>
|
||||
<span class="info-value">
|
||||
<span class="feature-tag" :class="{ active: pc.isvnc }">VNC</span>
|
||||
<span class="feature-tag" :class="{ active: pc.iswinrm }">WinRM</span>
|
||||
<span class="feature-tag" :class="{ active: pc.isshopfloor }">Shopfloor</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Column -->
|
||||
<div class="content-column">
|
||||
<!-- Location -->
|
||||
<div class="section-card">
|
||||
<h3 class="section-title">Location</h3>
|
||||
<div class="info-list">
|
||||
<div class="info-row">
|
||||
<span class="info-label">Location</span>
|
||||
<span class="info-value">
|
||||
<LocationMapTooltip
|
||||
v-if="pc.mapleft != null && pc.maptop != null"
|
||||
:left="pc.mapleft"
|
||||
:top="pc.maptop"
|
||||
:machineName="pc.machinenumber"
|
||||
>
|
||||
<span class="location-link">{{ pc.location?.location || 'On Map' }}</span>
|
||||
</LocationMapTooltip>
|
||||
<span v-else>{{ pc.location?.location || '-' }}</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Controlled Equipment -->
|
||||
<div class="section-card" v-if="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>
|
||||
<div class="equipment-meta">
|
||||
<span class="category-tag">{{ rel.relatedcategory }}</span>
|
||||
<span class="connection-tag">{{ rel.relationshiptype }}</span>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Installed Applications -->
|
||||
<div class="section-card" v-if="installedApps.length > 0">
|
||||
<h3 class="section-title">Installed Applications</h3>
|
||||
<div class="app-list">
|
||||
<router-link
|
||||
v-for="app in installedApps"
|
||||
:key="app.id"
|
||||
:to="`/applications/${app.application?.appid}`"
|
||||
class="app-item"
|
||||
>
|
||||
<div class="app-info">
|
||||
<span class="app-name">{{ app.application?.appname }}</span>
|
||||
<span class="app-version" v-if="app.version">v{{ app.version }}</span>
|
||||
</div>
|
||||
<div class="app-desc" v-if="app.application?.appdescription">
|
||||
{{ app.application.appdescription }}
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Network -->
|
||||
<div class="section-card" v-if="pc.communications?.length">
|
||||
<h3 class="section-title">Network Interfaces</h3>
|
||||
<div class="network-list">
|
||||
<div v-for="comm in pc.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 class="network-details" v-if="comm.subnetmask || comm.defaultgateway">
|
||||
<span v-if="comm.subnetmask">Subnet: {{ comm.subnetmask }}</span>
|
||||
<span v-if="comm.defaultgateway">Gateway: {{ comm.defaultgateway }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Notes -->
|
||||
<div class="section-card" v-if="pc.notes">
|
||||
<h3 class="section-title">Notes</h3>
|
||||
<p class="notes-text">{{ pc.notes }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Audit Footer -->
|
||||
<div class="audit-footer">
|
||||
<span>Created {{ formatDate(pc.createddate) }}<template v-if="pc.createdby"> by {{ pc.createdby }}</template></span>
|
||||
<span>Modified {{ formatDate(pc.modifieddate) }}<template v-if="pc.modifiedby"> by {{ pc.modifiedby }}</template></span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div v-else class="card">
|
||||
<p style="text-align: center; color: var(--text-light);">PC not found</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, computed } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { machinesApi, applicationsApi } from '../../api'
|
||||
import LocationMapTooltip from '../../components/LocationMapTooltip.vue'
|
||||
|
||||
const route = useRoute()
|
||||
|
||||
const loading = ref(true)
|
||||
const pc = ref(null)
|
||||
const relationships = ref([])
|
||||
const installedApps = ref([])
|
||||
|
||||
const ipAddress = computed(() => {
|
||||
if (!pc.value?.communications) return null
|
||||
const primaryComm = pc.value.communications.find(c => c.isprimary) || pc.value.communications[0]
|
||||
return primaryComm?.ipaddress || primaryComm?.address || null
|
||||
})
|
||||
|
||||
const controlledMachines = computed(() => {
|
||||
return relationships.value.filter(r => r.direction === 'controls')
|
||||
})
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
const response = await machinesApi.get(route.params.id)
|
||||
pc.value = response.data.data
|
||||
|
||||
const relResponse = await machinesApi.getRelationships(route.params.id)
|
||||
relationships.value = relResponse.data.data || []
|
||||
|
||||
// Load installed applications
|
||||
try {
|
||||
const appsResponse = await applicationsApi.getMachineApps(route.params.id)
|
||||
installedApps.value = appsResponse.data.data || []
|
||||
} catch (appError) {
|
||||
// Silently handle if no apps table yet
|
||||
console.log('No installed apps data:', appError.message)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading PC:', error)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
})
|
||||
|
||||
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}`
|
||||
}
|
||||
|
||||
function getStatusClass(status) {
|
||||
if (!status) return 'badge-info'
|
||||
const s = status.toLowerCase()
|
||||
if (s === 'in use' || s === 'active') return 'badge-success'
|
||||
if (s === 'in repair') return 'badge-warning'
|
||||
if (s === 'retired') return 'badge-danger'
|
||||
return 'badge-info'
|
||||
}
|
||||
|
||||
function formatDate(dateStr) {
|
||||
if (!dateStr) return '-'
|
||||
return new Date(dateStr).toLocaleString()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* PC-specific styles - shared styles are in global style.css */
|
||||
|
||||
/* Installed Applications */
|
||||
.app-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.app-item {
|
||||
display: block;
|
||||
padding: 1rem;
|
||||
background: var(--bg);
|
||||
border-radius: 8px;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
|
||||
.app-item:hover {
|
||||
background: var(--border);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.app-info {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.app-name {
|
||||
font-weight: 500;
|
||||
font-size: 1.125rem;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.app-version {
|
||||
font-size: 1rem;
|
||||
color: var(--text-light);
|
||||
font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
|
||||
}
|
||||
|
||||
.app-desc {
|
||||
margin-top: 0.375rem;
|
||||
font-size: 1rem;
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
/* Equipment meta */
|
||||
.equipment-meta {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.category-tag {
|
||||
padding: 0.3rem 0.625rem;
|
||||
font-size: 0.875rem;
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
/* Network details */
|
||||
.network-details {
|
||||
margin-top: 0.5rem;
|
||||
display: flex;
|
||||
gap: 1.25rem;
|
||||
font-size: 1rem;
|
||||
color: var(--text-light);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user