Add custom fields + warranty plugin, rework settings into two-pane shell
Feature work from the 2026-07 session: Settings IA - Replace the flat 27-card settings hub with a persistent two-pane shell (SettingsLayout.vue): grouped, searchable left rail + content pane. - Nest all settings/* routes under the shell via router post-processing; shared nav catalog in settingsNav.js. Group by asset class (PCs, Printers, Equipment, Network) so per-type settings stop scattering. Custom fields (core) - customfields + customfieldvalues tables (migration 7d14), CRUD API at /api/customfields, per-asset value get/save. - Settings management page + reusable CustomFieldsSection (detail) and CustomFieldsInputs (form) wired into all four asset types. Warranty (new plugin) - plugins/warranty: warranties + warrantyassets (migration 7d15), derived coverage status, provider abstraction (manual now; Dell/Lenovo/HP stubs). - API CRUD + per-asset panel + report buckets; WarrantyPanel on all four detail pages; Warranties management page; Warranty report + Reports card. - Seed warranty.* permissions. Printer drivers - printerdrivers table (migration 7d13) linked to printer models; drivers now surface on the matching printer's detail page. Other - PCDetail rebalanced (Network + Status + Warranty + custom fields on the right). - Rename PCs list "Features" column to "Remote Access"; fix badge hover underline. - Drop equipment islocationonly field. - Centralize asset-type label/route maps into utils/assetTypes.js. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
cproudlock
@@ -6,7 +6,7 @@
|
||||
</div>
|
||||
|
||||
<div class="header-center">
|
||||
<div class="location-title">West Jefferson</div>
|
||||
<div class="location-title">{{ facilityName }}</div>
|
||||
<h1>Shopfloor Dashboard</h1>
|
||||
</div>
|
||||
|
||||
@@ -22,6 +22,18 @@
|
||||
</header>
|
||||
|
||||
<main class="dashboard-content">
|
||||
<!-- Banner - single prominent full-width message -->
|
||||
<section v-if="banners.length" class="banner-section">
|
||||
<div
|
||||
v-for="n in banners"
|
||||
:key="n.notificationid"
|
||||
class="banner-strip"
|
||||
:style="{ backgroundColor: getTypeColor(n.typecolor) }"
|
||||
>
|
||||
{{ n.notification }}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Recognition Carousel -->
|
||||
<section v-if="recognitions.length" class="recognition-section">
|
||||
<div class="section-title recognition">Employee Recognition</div>
|
||||
@@ -49,7 +61,6 @@
|
||||
</div>
|
||||
<div class="recognition-content">
|
||||
<div class="recognition-header">
|
||||
<span class="recognition-star">★</span>
|
||||
<div class="recognition-name">{{ rec.employeename }}</div>
|
||||
</div>
|
||||
<div class="recognition-message">{{ rec.notification }}</div>
|
||||
@@ -58,6 +69,44 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Recertification grid - everyone due shown at once, so nobody has to
|
||||
wait for a carousel to rotate to their name -->
|
||||
<section v-if="recertifications.length" class="recert-section">
|
||||
<div class="section-title recert-title">
|
||||
<span>Recertification Required ({{ recertifications.length }})</span>
|
||||
<span v-if="recertRangeLabel" class="recert-range">{{ recertRangeLabel }}</span>
|
||||
</div>
|
||||
<div
|
||||
v-for="msg in recertDescriptions"
|
||||
:key="msg"
|
||||
class="recert-description"
|
||||
>
|
||||
{{ msg }}
|
||||
</div>
|
||||
<div class="recert-row">
|
||||
<div
|
||||
v-for="rec in recertPage"
|
||||
:key="`recert-${rec.notificationid}-${rec.employeesso}`"
|
||||
class="recert-tile"
|
||||
>
|
||||
<img
|
||||
v-if="rec.employeepicture"
|
||||
:src="`/static/employees/${rec.employeepicture}`"
|
||||
:alt="rec.employeename"
|
||||
class="recert-photo"
|
||||
@error="handlePhotoError"
|
||||
/>
|
||||
<img
|
||||
v-else
|
||||
src="/ge-aerospace-logo.svg"
|
||||
alt="GE Aerospace"
|
||||
class="recert-photo ge-logo-fallback"
|
||||
/>
|
||||
<div class="recert-name">{{ rec.employeename || rec.employeesso }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Current Notifications -->
|
||||
<section v-if="currentNotifications.length" class="notifications-section">
|
||||
<div class="section-title" :class="getSectionClass(currentNotifications)">
|
||||
@@ -114,7 +163,7 @@
|
||||
</section>
|
||||
|
||||
<!-- No notifications -->
|
||||
<div v-if="!loading && !currentNotifications.length && !upcomingNotifications.length && !recognitions.length" class="no-events">
|
||||
<div v-if="!loading && !currentNotifications.length && !upcomingNotifications.length && !recognitions.length && !recertifications.length && !banners.length" class="no-events">
|
||||
No active notifications
|
||||
</div>
|
||||
|
||||
@@ -130,27 +179,75 @@
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, onUnmounted } from 'vue'
|
||||
import { notificationsApi, businessUnitsApi, dashboardDefaultsApi } from '@/api'
|
||||
import { getFacilityName } from '@/utils/siteSettings'
|
||||
|
||||
const loading = ref(true)
|
||||
const facilityName = ref('West Jefferson')
|
||||
const businessUnit = ref('')
|
||||
const businessUnits = ref([])
|
||||
const notifications = ref({ current: [], upcoming: [] })
|
||||
const currentRecognition = ref(0)
|
||||
// Layout-config fingerprint from the feed; when it changes the kiosk reloads.
|
||||
const loadedConfigVersion = ref(null)
|
||||
|
||||
let refreshInterval = null
|
||||
let recognitionInterval = null
|
||||
let recertPageInterval = null
|
||||
|
||||
// The board groups cards by each type's configured display style, so any custom
|
||||
// type set to carousel/grid/banner renders that way - not just the built-ins.
|
||||
const SPECIAL_STYLES = ['carousel', 'grid', 'banner']
|
||||
|
||||
// Separate recognition notifications from others
|
||||
const recognitions = computed(() =>
|
||||
notifications.value.current.filter(n => n.typecolor === 'recognition')
|
||||
notifications.value.current.filter(n => n.displaystyle === 'carousel')
|
||||
)
|
||||
|
||||
const recertifications = computed(() =>
|
||||
notifications.value.current.filter(n => n.displaystyle === 'grid')
|
||||
)
|
||||
|
||||
const banners = computed(() =>
|
||||
notifications.value.current.filter(n => n.displaystyle === 'banner')
|
||||
)
|
||||
|
||||
// Distinct training descriptions shown once above the grid (the per-person
|
||||
// tiles only carry photo + name).
|
||||
const recertDescriptions = computed(() => {
|
||||
const seen = new Set()
|
||||
const out = []
|
||||
for (const r of recertifications.value) {
|
||||
const msg = (r.notification || '').trim()
|
||||
if (msg && !seen.has(msg)) { seen.add(msg); out.push(msg) }
|
||||
}
|
||||
return out
|
||||
})
|
||||
|
||||
// Recertification shows as a single rotating row: one page of tiles at a time
|
||||
// so it stays compact on any screen, cycling through everyone due.
|
||||
const RECERT_PAGE_SIZE = 8
|
||||
const currentRecertPage = ref(0)
|
||||
const recertPageCount = computed(() =>
|
||||
Math.max(1, Math.ceil(recertifications.value.length / RECERT_PAGE_SIZE))
|
||||
)
|
||||
const recertPage = computed(() => {
|
||||
const page = currentRecertPage.value % recertPageCount.value
|
||||
const start = page * RECERT_PAGE_SIZE
|
||||
return recertifications.value.slice(start, start + RECERT_PAGE_SIZE)
|
||||
})
|
||||
const recertRangeLabel = computed(() => {
|
||||
if (recertPageCount.value <= 1) return ''
|
||||
const page = currentRecertPage.value % recertPageCount.value
|
||||
const start = page * RECERT_PAGE_SIZE
|
||||
const end = Math.min(start + RECERT_PAGE_SIZE, recertifications.value.length)
|
||||
return `${start + 1}-${end} of ${recertifications.value.length}`
|
||||
})
|
||||
|
||||
const currentNotifications = computed(() =>
|
||||
notifications.value.current.filter(n => n.typecolor !== 'recognition')
|
||||
notifications.value.current.filter(n => !SPECIAL_STYLES.includes(n.displaystyle))
|
||||
)
|
||||
|
||||
const upcomingNotifications = computed(() =>
|
||||
notifications.value.upcoming.filter(n => n.typecolor !== 'recognition')
|
||||
notifications.value.upcoming.filter(n => !SPECIAL_STYLES.includes(n.displaystyle))
|
||||
)
|
||||
|
||||
// Clock
|
||||
@@ -168,6 +265,8 @@ onMounted(async () => {
|
||||
updateClock()
|
||||
setInterval(updateClock, 1000)
|
||||
|
||||
getFacilityName().then(name => { facilityName.value = name })
|
||||
|
||||
// Load business units
|
||||
try {
|
||||
const response = await businessUnitsApi.list()
|
||||
@@ -200,11 +299,19 @@ onMounted(async () => {
|
||||
currentRecognition.value = (currentRecognition.value + 1) % recognitions.value.length
|
||||
}
|
||||
}, 8000)
|
||||
|
||||
// Cycle the recertification row through pages of employees every 7 seconds.
|
||||
recertPageInterval = setInterval(() => {
|
||||
if (recertPageCount.value > 1) {
|
||||
currentRecertPage.value = (currentRecertPage.value + 1) % recertPageCount.value
|
||||
}
|
||||
}, 7000)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
if (refreshInterval) clearInterval(refreshInterval)
|
||||
if (recognitionInterval) clearInterval(recognitionInterval)
|
||||
if (recertPageInterval) clearInterval(recertPageInterval)
|
||||
})
|
||||
|
||||
async function loadData() {
|
||||
@@ -214,7 +321,21 @@ async function loadData() {
|
||||
params.businessunit = businessUnit.value
|
||||
}
|
||||
const response = await notificationsApi.getShopfloor(params)
|
||||
notifications.value = response.data.data || { current: [], upcoming: [] }
|
||||
const data = response.data.data || { current: [], upcoming: [] }
|
||||
|
||||
// Reload the kiosk when the board's layout config changes, so type/style
|
||||
// edits (and deploys, via SHOPFLOOR_BUILD) reach already-open pages without
|
||||
// anyone touching the machine.
|
||||
const version = data.configversion
|
||||
if (version) {
|
||||
if (loadedConfigVersion.value && loadedConfigVersion.value !== version) {
|
||||
window.location.reload()
|
||||
return
|
||||
}
|
||||
loadedConfigVersion.value = version
|
||||
}
|
||||
|
||||
notifications.value = { current: data.current || [], upcoming: data.upcoming || [] }
|
||||
} catch (err) {
|
||||
console.error('Error loading shopfloor data:', err)
|
||||
} finally {
|
||||
@@ -223,15 +344,17 @@ async function loadData() {
|
||||
}
|
||||
|
||||
function getTypeColor(typecolor) {
|
||||
const colors = {
|
||||
// Types store a hex color, used directly. Only legacy Bootstrap color names
|
||||
// still need aliasing; anything else (a hex) passes straight through.
|
||||
const aliases = {
|
||||
success: '#04b962',
|
||||
warning: '#ff8800',
|
||||
danger: '#f5365c',
|
||||
info: '#14abef',
|
||||
primary: '#7934f3',
|
||||
recognition: '#0d6efd'
|
||||
secondary: '#94614f'
|
||||
}
|
||||
return colors[typecolor] || typecolor || '#14abef'
|
||||
return aliases[typecolor] || typecolor || '#14abef'
|
||||
}
|
||||
|
||||
function getSectionClass(notifications) {
|
||||
@@ -362,7 +485,69 @@ function handlePhotoError(e) {
|
||||
}
|
||||
|
||||
.section-title.recognition {
|
||||
background: #ffc107;
|
||||
color: #3a2e00;
|
||||
}
|
||||
|
||||
/* Recertification grid - blue, compact tiles so 20-30 people are all visible
|
||||
at once (no carousel to wait through) */
|
||||
.recert-section {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
.section-title.recert-title {
|
||||
background: #0d6efd;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.recert-range {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 1px;
|
||||
opacity: 0.85;
|
||||
}
|
||||
.recert-description {
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
color: #cbd5e1;
|
||||
margin: -4px 0 14px;
|
||||
line-height: 1.35;
|
||||
}
|
||||
/* Single row that cycles through pages of employees */
|
||||
.recert-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(8, 1fr);
|
||||
gap: 14px;
|
||||
}
|
||||
.recert-tile {
|
||||
background: linear-gradient(135deg, #1e3a5f 0%, #0d2137 100%);
|
||||
border: 2px solid #0d6efd;
|
||||
border-radius: 10px;
|
||||
padding: 14px 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
.recert-photo {
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
border: 3px solid #0d6efd;
|
||||
background: #1a1a2e;
|
||||
}
|
||||
.recert-photo.ge-logo-fallback {
|
||||
object-fit: contain;
|
||||
padding: 12px;
|
||||
background: #fff;
|
||||
}
|
||||
.recert-name {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
.section-title.danger {
|
||||
@@ -374,6 +559,22 @@ function handlePhotoError(e) {
|
||||
}
|
||||
|
||||
/* Recognition carousel */
|
||||
.banner-section {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.banner-strip {
|
||||
padding: 22px 30px;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 12px;
|
||||
color: #fff;
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
text-wrap: balance;
|
||||
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
|
||||
.recognition-section {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
@@ -388,8 +589,8 @@ function handlePhotoError(e) {
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: linear-gradient(135deg, #1e3a5f 0%, #0d2137 100%);
|
||||
border: 3px solid #0d6efd;
|
||||
background: linear-gradient(135deg, #4a3a0a 0%, #2a2200 100%);
|
||||
border: 3px solid #ffc107;
|
||||
border-radius: 12px;
|
||||
padding: 20px 25px;
|
||||
display: flex;
|
||||
@@ -411,7 +612,7 @@ function handlePhotoError(e) {
|
||||
height: 140px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
border: 4px solid #0d6efd;
|
||||
border: 4px solid #ffc107;
|
||||
background: #1a1a2e;
|
||||
}
|
||||
|
||||
@@ -438,6 +639,7 @@ function handlePhotoError(e) {
|
||||
animation: starPulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
|
||||
@keyframes starPulse {
|
||||
0%, 100% { transform: scale(1); }
|
||||
50% { transform: scale(1.1); }
|
||||
|
||||
Reference in New Issue
Block a user