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
340
frontend/src/views/printers/PrinterDetail.vue
Normal file
340
frontend/src/views/printers/PrinterDetail.vue
Normal file
@@ -0,0 +1,340 @@
|
||||
<template>
|
||||
<div class="detail-page">
|
||||
<div class="page-header">
|
||||
<h2>Printer Details</h2>
|
||||
<div class="header-actions">
|
||||
<router-link :to="`/printers/${$route.params.id}/edit`" class="btn btn-primary">Edit</router-link>
|
||||
<router-link to="/printers" class="btn btn-secondary">Back to List</router-link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="loading" class="loading">Loading...</div>
|
||||
|
||||
<template v-else-if="printer">
|
||||
<!-- Hero Section -->
|
||||
<div class="hero-card">
|
||||
<div class="hero-image" v-if="printer.model?.imageurl">
|
||||
<img :src="printer.model.imageurl" :alt="printer.model?.modelnumber" />
|
||||
</div>
|
||||
<div class="hero-content">
|
||||
<div class="hero-title">
|
||||
<h1>{{ printer.machinenumber }}</h1>
|
||||
<span v-if="printer.alias" class="hero-alias">{{ printer.alias }}</span>
|
||||
</div>
|
||||
<div class="hero-meta">
|
||||
<span class="badge badge-lg badge-printer">Printer</span>
|
||||
<span class="badge badge-lg" :class="getStatusClass(printer.status?.status)">
|
||||
{{ printer.status?.status || 'Unknown' }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="hero-details">
|
||||
<div class="hero-detail" v-if="printer.vendor?.vendor">
|
||||
<span class="hero-detail-label">Vendor</span>
|
||||
<span class="hero-detail-value">{{ printer.vendor.vendor }}</span>
|
||||
</div>
|
||||
<div class="hero-detail" v-if="printer.model?.modelnumber">
|
||||
<span class="hero-detail-label">Model</span>
|
||||
<span class="hero-detail-value">{{ printer.model.modelnumber }}</span>
|
||||
</div>
|
||||
<div class="hero-detail" v-if="printer.location?.locationname">
|
||||
<span class="hero-detail-label">Location</span>
|
||||
<span class="hero-detail-value">{{ printer.location.location }}</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">Windows Name</span>
|
||||
<span class="info-value">{{ printer.machinenumber }}</span>
|
||||
</div>
|
||||
<div class="info-row" v-if="printer.alias">
|
||||
<span class="info-label">Alias</span>
|
||||
<span class="info-value">{{ printer.alias }}</span>
|
||||
</div>
|
||||
<div class="info-row" v-if="printer.hostname">
|
||||
<span class="info-label">Hostname</span>
|
||||
<span class="info-value mono">{{ printer.hostname }}</span>
|
||||
</div>
|
||||
<div class="info-row" v-if="printer.serialnumber">
|
||||
<span class="info-label">Serial Number</span>
|
||||
<span class="info-value mono">{{ printer.serialnumber }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Printer Settings -->
|
||||
<div class="section-card" v-if="printer.printerdata?.windowsname || printer.printerdata?.sharename">
|
||||
<h3 class="section-title">Print Server</h3>
|
||||
<div class="info-list">
|
||||
<div class="info-row" v-if="printer.printerdata?.windowsname">
|
||||
<span class="info-label">Windows Name</span>
|
||||
<span class="info-value mono">{{ printer.printerdata.windowsname }}</span>
|
||||
</div>
|
||||
<div class="info-row" v-if="printer.printerdata?.sharename">
|
||||
<span class="info-label">CSF Name</span>
|
||||
<span class="info-value mono">{{ printer.printerdata.sharename }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Notes -->
|
||||
<div class="section-card" v-if="printer.notes">
|
||||
<h3 class="section-title">Notes</h3>
|
||||
<p class="notes-text">{{ printer.notes }}</p>
|
||||
</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="printer.mapleft != null && printer.maptop != null"
|
||||
:left="printer.mapleft"
|
||||
:top="printer.maptop"
|
||||
:machineName="printer.machinenumber"
|
||||
>
|
||||
<span class="location-link">{{ printer.location?.locationname || 'On Map' }}</span>
|
||||
</LocationMapTooltip>
|
||||
<span v-else>{{ printer.location?.locationname || '-' }}</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Network -->
|
||||
<div class="section-card" v-if="printer.communications?.length">
|
||||
<h3 class="section-title">Network</h3>
|
||||
<div class="network-list">
|
||||
<div v-for="comm in printer.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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Supplies Card -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3>Supplies</h3>
|
||||
</div>
|
||||
|
||||
<div v-if="supplies.length === 0" class="empty-state">
|
||||
No supply information available
|
||||
</div>
|
||||
|
||||
<div v-else class="supplies-grid">
|
||||
<div v-for="supply in supplies" :key="supply.supplyid" class="supply-item">
|
||||
<div class="supply-header">
|
||||
<span class="supply-name">{{ supply.supplyname }}</span>
|
||||
<span class="supply-level" :class="getSupplyLevelClass(supply.currentlevel)">
|
||||
{{ supply.currentlevel !== null ? `${supply.currentlevel}%` : 'N/A' }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="supply-bar">
|
||||
<div
|
||||
class="supply-bar-fill"
|
||||
:class="getSupplyLevelClass(supply.currentlevel)"
|
||||
:style="{ width: `${supply.currentlevel || 0}%` }"
|
||||
></div>
|
||||
</div>
|
||||
<div class="supply-meta">
|
||||
<span>{{ supply.supplytypename }}</span>
|
||||
<span v-if="supply.partnumber">Part: {{ supply.partnumber }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Drivers Card -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3>Assigned Drivers</h3>
|
||||
</div>
|
||||
|
||||
<div v-if="drivers.length === 0" class="empty-state">
|
||||
No drivers assigned
|
||||
</div>
|
||||
|
||||
<div v-else class="table-container">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Driver Name</th>
|
||||
<th>OS Type</th>
|
||||
<th>Version</th>
|
||||
<th>Universal</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="driver in drivers" :key="driver.driverid">
|
||||
<td>{{ driver.drivername }}</td>
|
||||
<td>{{ driver.ostype }}</td>
|
||||
<td>{{ driver.version || '-' }}</td>
|
||||
<td>{{ driver.isuniversal ? 'Yes' : 'No' }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div v-else class="card">
|
||||
<p style="text-align: center; color: var(--text-light);">Printer not found</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, computed } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { printersApi } from '../../api'
|
||||
import LocationMapTooltip from '../../components/LocationMapTooltip.vue'
|
||||
|
||||
const route = useRoute()
|
||||
|
||||
const loading = ref(true)
|
||||
const printer = ref(null)
|
||||
const supplies = ref([])
|
||||
const drivers = ref([])
|
||||
|
||||
// Get IP address from communications
|
||||
const ipAddress = computed(() => {
|
||||
if (!printer.value?.communications) return null
|
||||
const primaryComm = printer.value.communications.find(c => c.isprimary) || printer.value.communications[0]
|
||||
return primaryComm?.ipaddress || null
|
||||
})
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
const [printerRes, suppliesRes, driversRes] = await Promise.all([
|
||||
printersApi.get(route.params.id),
|
||||
printersApi.getSupplies(route.params.id).catch(() => ({ data: { data: [] } })),
|
||||
printersApi.getDrivers(route.params.id).catch(() => ({ data: { data: [] } }))
|
||||
])
|
||||
|
||||
printer.value = printerRes.data.data
|
||||
supplies.value = suppliesRes.data.data || []
|
||||
drivers.value = driversRes.data.data || []
|
||||
} catch (error) {
|
||||
console.error('Error loading printer:', error)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
})
|
||||
|
||||
function getStatusClass(status) {
|
||||
if (!status) return 'badge-info'
|
||||
const s = status.toLowerCase()
|
||||
if (s === 'in use' || s === 'active' || s === 'online') return 'badge-success'
|
||||
if (s === 'in repair' || s === 'offline') return 'badge-warning'
|
||||
if (s === 'retired' || s === 'error') return 'badge-danger'
|
||||
return 'badge-info'
|
||||
}
|
||||
|
||||
function getSupplyLevelClass(level) {
|
||||
if (level === null || level === undefined) return ''
|
||||
if (level <= 10) return 'critical'
|
||||
if (level <= 25) return 'low'
|
||||
return 'ok'
|
||||
}
|
||||
|
||||
function formatDate(dateStr) {
|
||||
if (!dateStr) return '-'
|
||||
return new Date(dateStr).toLocaleString()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Printer-specific styles - shared styles are in global style.css */
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
color: var(--text-light);
|
||||
padding: 2.5rem;
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
/* Supplies */
|
||||
.supplies-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
.supply-item {
|
||||
background: var(--bg);
|
||||
padding: 1.25rem;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.supply-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.supply-name {
|
||||
font-weight: 500;
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.supply-level {
|
||||
font-weight: 600;
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.supply-level.ok { color: var(--success); }
|
||||
.supply-level.low { color: var(--warning); }
|
||||
.supply-level.critical { color: var(--danger); }
|
||||
|
||||
.supply-bar {
|
||||
height: 10px;
|
||||
background: var(--border);
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.supply-bar-fill {
|
||||
height: 100%;
|
||||
transition: width 0.3s ease;
|
||||
background: var(--success);
|
||||
}
|
||||
|
||||
.supply-bar-fill.low { background: var(--warning); }
|
||||
.supply-bar-fill.critical { background: var(--danger); }
|
||||
|
||||
.supply-meta {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 1rem;
|
||||
color: var(--text-light);
|
||||
margin-top: 0.625rem;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user