ge-aerospace/shopdb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add employee search autocomplete and photo display for Recognition

Browse Source 
- Add apiemployeesearch.asp for searching employees by name with Team info
- Update addnotification.asp with autocomplete dropdown showing photo, name, team, SSO
- Support custom names for non-system employees using NAME: prefix in employeesso field
- Add theme-aware CSS for selected employee chips (light/dark themes)
- Update apishopfloor.asp to detect NAME: prefix and extract custom names
- Update shopfloor-dashboard to display employee photos (140px) with GE logo fallback

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
cproudlock
2026-01-09 14:18:13 -05:00
parent 28e8071570
commit 6d1cbc01c6
5 changed files with 618 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
shopfloor-dashboard/index.html
View File

@@ -421,10 +421,13 @@
background: linear-gradient(135deg, #1e3a5f 0%, #0d2137 100%);
border: 3px solid #0d6efd;
border-radius: 12px;
padding: 25px 30px;
padding: 20px 25px;
box-shadow: 0 4px 20px rgba(13, 110, 253, 0.3);
transition: transform 0.8s ease-in-out, opacity 0.8s ease-in-out;
width: 100%;
display: flex;
align-items: center;
gap: 25px;
}
.recognition-card:not(.active) {
@@ -449,10 +452,21 @@
opacity: 0;
}
.recognition-photo-container {
flex-shrink: 0;
}
.recognition-content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
.recognition-header {
display: flex;
align-items: center;
margin-bottom: 15px;
margin-bottom: 10px;
}
.recognition-star {
@@ -468,17 +482,48 @@
50% { transform: scale(1.1); }
}
.recognition-photo {
width: 140px;
height: 140px;
border-radius: 50%;
object-fit: cover;
border: 4px solid #0d6efd;
background-color: #1a1a2e;
box-shadow: 0 4px 15px rgba(13, 110, 253, 0.4);
}
.recognition-photo.ge-logo-fallback {
object-fit: contain;
padding: 20px;
background-color: #fff;
}
.recognition-photo-placeholder {
width: 140px;
height: 140px;
border-radius: 50%;
border: 4px solid #0d6efd;
background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 48px;
font-weight: bold;
box-shadow: 0 4px 15px rgba(13, 110, 253, 0.4);
}
.recognition-employee {
font-size: 32px;
font-weight: 700;
color: #fff;
margin-bottom: 8px;
}
.recognition-achievement {
font-size: 24px;
font-size: 22px;
color: #ccc;
line-height: 1.4;
margin-left: 68px;
}
.recognition-counter {
@@ -674,7 +719,8 @@
}
.recognition-card {
padding: 15px 20px;
padding: 15px;
gap: 15px;
}
.recognition-star {
@@ -682,13 +728,21 @@
margin-right: 12px;
}
.recognition-photo,
.recognition-photo-placeholder {
width: 80px;
height: 80px;
font-size: 28px;
border-width: 3px;
}
.recognition-employee {
font-size: 18px;
margin-bottom: 5px;
}
.recognition-achievement {
font-size: 14px;
margin-left: 40px;
}
.recognition-counter {
@@ -818,7 +872,8 @@
}
.recognition-card {
padding: 50px 60px;
padding: 40px 50px;
gap: 50px;
}
.recognition-star {
@@ -826,13 +881,21 @@
margin-right: 40px;
}
.recognition-photo,
.recognition-photo-placeholder {
width: 280px;
height: 280px;
font-size: 96px;
border-width: 6px;
}
.recognition-employee {
font-size: 64px;
margin-bottom: 15px;
}
.recognition-achievement {
font-size: 48px;
margin-left: 136px;
font-size: 42px;
}
.recognition-counter {
@@ -1104,19 +1167,31 @@
html += '<div class="recognition-carousel-container">';
html += '<div class="recognition-carousel-wrapper" id="recognitionCarousel">';
// GE logo for fallback
const GE_LOGO_URL = 'ge-aerospace-logo.svg';
recognitions.forEach((event, index) => {
const activeClass = index === currentRecognitionIndex ? 'active' : 'enter-down';
const displayName = event.employeename || event.employeesso || 'Employee';
console.log('Recognition event:', event);
console.log('employeename:', event.employeename, 'employeesso:', event.employeesso, 'displayName:', displayName);
const photoUrl = event.employeepicture
? `https://tsgwp00525.rd.ds.ge.com/EmployeeDBAPP/images/${event.employeepicture}`
: null;
// Use GE logo as fallback for missing pictures
const photoHtml = photoUrl
? `<img class="recognition-photo" src="${photoUrl}" alt="${escapeHtml(displayName)}" onerror="this.onerror=null;this.src='${GE_LOGO_URL}';this.classList.add('ge-logo-fallback');">`
: `<img class="recognition-photo ge-logo-fallback" src="${GE_LOGO_URL}" alt="GE Aerospace">`;
html += `
<div class="recognition-card ${activeClass}" data-index="${index}">
${recognitions.length > 1 ? `<div class="recognition-counter">${index + 1} of ${recognitions.length}</div>` : ''}
<div class="recognition-header">
<span class="recognition-star">&#9733;</span>
<span class="recognition-employee">${escapeHtml(displayName)}</span>
<div class="recognition-photo-container">
${photoHtml}
</div>
<div class="recognition-content">
<div class="recognition-employee">${escapeHtml(displayName)}</div>
<div class="recognition-achievement">${escapeHtml(event.notification)}</div>
</div>
<div class="recognition-achievement">${escapeHtml(event.notification)}</div>
</div>
`;
});