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

341
addnotification.asp
View File

@@ -3,6 +3,141 @@
<head> <head>
<!--#include file="./includes/header.asp"--> <!--#include file="./includes/header.asp"-->
<!--#include file="./includes/sql.asp"--> <!--#include file="./includes/sql.asp"-->
<style>
.employee-search-container {
position: relative;
}
.employee-dropdown {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: #fff;
border: 1px solid #ced4da;
border-top: none;
border-radius: 0 0 .25rem .25rem;
max-height: 300px;
overflow-y: auto;
z-index: 1000;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.employee-option {
display: flex;
align-items: center;
padding: 10px 12px;
cursor: pointer;
border-bottom: 1px solid #eee;
}
.employee-option:hover {
background-color: #f8f9fa;
}
.employee-option:last-child {
border-bottom: none;
}
.employee-option img {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
margin-right: 12px;
border: 2px solid #007bff;
}
.employee-option .ge-logo {
width: 40px;
height: 40px;
border-radius: 50%;
margin-right: 12px;
background: #007bff;
display: flex;
align-items: center;
justify-content: center;
}
.employee-option .ge-logo img {
width: 24px;
height: 24px;
border: none;
border-radius: 0;
}
.employee-option-info {
flex: 1;
}
.employee-option-name {
font-weight: 600;
color: #333;
}
.employee-option-sso {
font-size: 12px;
color: #666;
}
.employee-option-custom {
color: #28a745;
font-style: italic;
}
.selected-employees {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.selected-employee {
display: flex;
align-items: center;
background: #ffffff;
border: 1px solid #dee2e6;
border-radius: 20px;
padding: 5px 10px 5px 5px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
/* Dark theme support */
.bg-theme4 .selected-employee,
.bg-theme5 .selected-employee,
.bg-theme6 .selected-employee,
.bg-dark .selected-employee {
background: #2d3748;
border-color: #4a5568;
}
.selected-employee img {
width: 30px;
height: 30px;
border-radius: 50%;
object-fit: cover;
margin-right: 8px;
}
.selected-employee .ge-logo-small {
width: 30px;
height: 30px;
border-radius: 50%;
margin-right: 8px;
background: #007bff;
display: flex;
align-items: center;
justify-content: center;
}
.selected-employee .ge-logo-small img {
width: 18px;
height: 18px;
}
.selected-employee-name {
font-size: 14px;
margin-right: 8px;
color: #333;
}
/* Dark theme text */
.bg-theme4 .selected-employee-name,
.bg-theme5 .selected-employee-name,
.bg-theme6 .selected-employee-name,
.bg-dark .selected-employee-name {
color: #e2e8f0;
}
.selected-employee-remove {
cursor: pointer;
color: #dc3545;
font-weight: bold;
font-size: 16px;
}
.selected-employee-remove:hover {
color: #a71d2a;
}
</style>
</head> </head>
<% <%
@@ -120,13 +255,19 @@
</div> </div>
<div class="form-group" id="employeessoGroup" style="display:none;"> <div class="form-group" id="employeessoGroup" style="display:none;">
<label for="employeesso">Employee SSO(s) <span class="text-danger">*</span></label> <label for="employeeSearch">Employee(s) <span class="text-danger">*</span></label>
<input type="text" class="form-control" id="employeesso" name="employeesso" <div class="employee-search-container">
maxlength="100" placeholder="123456789 or 123456789, 987654321"> <input type="text" class="form-control" id="employeeSearch"
<small class="form-text text-muted">Enter one or more SSOs separated by commas</small> placeholder="Search by name or type a custom name..."
<div id="employeePreview" class="mt-2" style="display:none;"> autocomplete="off">
<span class="badge badge-info" id="employeeNames"></span> <div id="employeeDropdown" class="employee-dropdown" style="display:none;"></div>
</div> </div>
<small class="form-text text-muted">Search for employees or type a name for non-system users. Press Enter to add custom names.</small>
<div id="selectedEmployees" class="selected-employees mt-2"></div>
<!-- Hidden field for form submission (stores SSO or NAME:customname) -->
<input type="hidden" id="employeesso" name="employeesso" value="">
</div> </div>
<div class="form-row" id="timeFieldsRow"> <div class="form-row" id="timeFieldsRow">
@@ -288,44 +429,184 @@
} }
} }
// Lookup employee names by SSO // Employee autocomplete functionality
var lookupTimeout = null; var searchTimeout = null;
var selectedEmployees = []; // Array of {sso, name, picture, isCustom}
var EMPLOYEE_PHOTO_BASE = 'https://tsgwp00525.rd.ds.ge.com/EmployeeDBAPP/images/';
var GE_LOGO_URL = './shopfloor-dashboard/ge-aerospace-logo.svg';
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
var ssoInput = document.getElementById('employeesso'); var searchInput = document.getElementById('employeeSearch');
ssoInput.addEventListener('input', function() { var dropdown = document.getElementById('employeeDropdown');
clearTimeout(lookupTimeout);
lookupTimeout = setTimeout(lookupEmployees, 500);
});
});
function lookupEmployees() { // Search on input
var ssoInput = document.getElementById('employeesso'); searchInput.addEventListener('input', function() {
var ssos = ssoInput.value.trim(); clearTimeout(searchTimeout);
var previewDiv = document.getElementById('employeePreview'); var query = this.value.trim();
var namesSpan = document.getElementById('employeeNames');
if (!ssos) { if (query.length < 2) {
previewDiv.style.display = 'none'; dropdown.style.display = 'none';
return; return;
} }
// Call AJAX endpoint to lookup names searchTimeout = setTimeout(function() {
fetch('./lookupemployee.asp?sso=' + encodeURIComponent(ssos)) searchEmployees(query);
}, 300);
});
// Handle Enter key for custom names
searchInput.addEventListener('keydown', function(e) {
if (e.key === 'Enter') {
e.preventDefault();
var customName = this.value.trim();
if (customName.length > 0) {
addEmployee(null, customName, null, true);
this.value = '';
dropdown.style.display = 'none';
}
}
});
// Close dropdown when clicking outside
document.addEventListener('click', function(e) {
if (!e.target.closest('.employee-search-container')) {
dropdown.style.display = 'none';
}
});
});
function searchEmployees(query) {
var dropdown = document.getElementById('employeeDropdown');
fetch('./apiemployeesearch.asp?q=' + encodeURIComponent(query) + '&limit=8')
.then(function(response) { return response.json(); }) .then(function(response) { return response.json(); })
.then(function(data) { .then(function(data) {
if (data.success && data.names) { if (data.success && data.results) {
namesSpan.textContent = data.names; renderDropdown(data.results, query);
previewDiv.style.display = 'block';
} else { } else {
namesSpan.textContent = data.error || 'Employee not found'; renderDropdown([], query);
namesSpan.className = 'badge badge-warning';
previewDiv.style.display = 'block';
} }
}) })
.catch(function(err) { .catch(function(err) {
previewDiv.style.display = 'none'; renderDropdown([], query);
}); });
} }
function renderDropdown(results, query) {
var dropdown = document.getElementById('employeeDropdown');
var html = '';
// Show matching employees
results.forEach(function(emp) {
// Check if already selected
var isSelected = selectedEmployees.some(function(s) { return s.sso === emp.sso; });
if (isSelected) return;
var photoHtml;
if (emp.picture) {
photoHtml = '<img src="' + EMPLOYEE_PHOTO_BASE + emp.picture + '" onerror="this.parentNode.innerHTML=\'<div class=ge-logo><img src=' + GE_LOGO_URL + '></div>\'">';
} else {
photoHtml = '<div class="ge-logo"><img src="' + GE_LOGO_URL + '"></div>';
}
html += '<div class="employee-option" onclick="selectEmployee(\'' + emp.sso + '\', \'' + escapeHtml(emp.fullName) + '\', \'' + (emp.picture || '') + '\')">';
html += photoHtml;
html += '<div class="employee-option-info">';
html += '<div class="employee-option-name">' + escapeHtml(emp.fullName) + (emp.team ? ' - ' + escapeHtml(emp.team) : '') + '</div>';
html += '<div class="employee-option-sso">SSO: ' + emp.sso + '</div>';
html += '</div></div>';
});
// Always show option to add as custom name
if (query.length > 0) {
html += '<div class="employee-option" onclick="addCustomEmployee(\'' + escapeHtml(query) + '\')">';
html += '<div class="ge-logo"><img src="' + GE_LOGO_URL + '"></div>';
html += '<div class="employee-option-info">';
html += '<div class="employee-option-name employee-option-custom">Add "' + escapeHtml(query) + '" (not in system)</div>';
html += '</div></div>';
}
dropdown.innerHTML = html;
dropdown.style.display = html ? 'block' : 'none';
}
function selectEmployee(sso, name, picture) {
addEmployee(sso, name, picture, false);
document.getElementById('employeeSearch').value = '';
document.getElementById('employeeDropdown').style.display = 'none';
}
function addCustomEmployee(name) {
addEmployee(null, name, null, true);
document.getElementById('employeeSearch').value = '';
document.getElementById('employeeDropdown').style.display = 'none';
}
function addEmployee(sso, name, picture, isCustom) {
// Check for duplicates
var isDuplicate = selectedEmployees.some(function(s) {
if (sso && s.sso === sso) return true;
if (isCustom && s.isCustom && s.name === name) return true;
return false;
});
if (isDuplicate) return;
selectedEmployees.push({ sso: sso, name: name, picture: picture, isCustom: isCustom });
updateSelectedDisplay();
updateHiddenFields();
}
function removeEmployee(index) {
selectedEmployees.splice(index, 1);
updateSelectedDisplay();
updateHiddenFields();
}
function updateSelectedDisplay() {
var container = document.getElementById('selectedEmployees');
var html = '';
selectedEmployees.forEach(function(emp, index) {
var photoHtml;
if (emp.picture) {
photoHtml = '<img src="' + EMPLOYEE_PHOTO_BASE + emp.picture + '" onerror="this.parentNode.innerHTML=\'<div class=ge-logo-small><img src=' + GE_LOGO_URL + '></div>\'">';
} else {
photoHtml = '<div class="ge-logo-small"><img src="' + GE_LOGO_URL + '"></div>';
}
html += '<div class="selected-employee">';
html += photoHtml;
html += '<span class="selected-employee-name">' + escapeHtml(emp.name);
if (emp.isCustom) html += ' <small>(custom)</small>';
html += '</span>';
html += '<span class="selected-employee-remove" onclick="removeEmployee(' + index + ')">x</span>';
html += '</div>';
});
container.innerHTML = html;
}
function updateHiddenFields() {
var values = [];
selectedEmployees.forEach(function(emp) {
if (emp.sso) {
// System employee - use SSO
values.push(emp.sso);
} else if (emp.isCustom) {
// Custom name - use NAME: prefix
values.push('NAME:' + emp.name);
}
});
document.getElementById('employeesso').value = values.join(',');
}
function escapeHtml(text) {
var div = document.createElement('div');
div.textContent = text;
return div.innerHTML;
}
</script> </script>
</body> </body>

127
apiemployeesearch.asp Normal file
View File

@@ -0,0 +1,127 @@
<%@ Language=VBScript %>
<%
'=============================================================================
' FILE: apiemployeesearch.asp
' PURPOSE: Search employees by name for recognition autocomplete
' RETURNS: JSON array of matching employees with SSO, name, and picture
' USAGE: apiemployeesearch.asp?q=john&limit=10
'=============================================================================
Response.ContentType = "application/json"
Response.Charset = "UTF-8"
Response.AddHeader "Access-Control-Allow-Origin", "*"
Response.AddHeader "Cache-Control", "no-cache, no-store, must-revalidate"
%>
<!--#include file="./includes/sql.asp"-->
<%
On Error Resume Next
Dim searchTerm, maxResults
searchTerm = Trim(Request.QueryString("q"))
maxResults = Request.QueryString("limit")
If maxResults = "" Or Not IsNumeric(maxResults) Then
maxResults = 10
Else
maxResults = CLng(maxResults)
If maxResults > 50 Then maxResults = 50
If maxResults < 1 Then maxResults = 10
End If
' Validate search term
If Len(searchTerm) < 2 Then
Response.Write "{""success"":false,""error"":""Search term must be at least 2 characters"",""results"":[]}"
Response.End
End If
' Connect to employee database
Dim empConn, empCmd, empRs
Set empConn = Server.CreateObject("ADODB.Connection")
empConn.ConnectionString = GetEmployeeConnectionString()
empConn.Open
If Err.Number <> 0 Then
Response.Write "{""success"":false,""error"":""" & JSEscape(Err.Description) & """,""results"":[]}"
Response.End
End If
' Search by first name, last name, or full name
' Using parameterized query with LIKE
Set empCmd = Server.CreateObject("ADODB.Command")
empCmd.ActiveConnection = empConn
empCmd.CommandText = "SELECT SSO, First_Name, Last_Name, Team, Picture FROM employees " & _
"WHERE First_Name LIKE ? OR Last_Name LIKE ? " & _
"OR CONCAT(First_Name, ' ', Last_Name) LIKE ? " & _
"ORDER BY Last_Name, First_Name LIMIT ?"
empCmd.CommandType = 1
Dim searchPattern
searchPattern = "%" & searchTerm & "%"
empCmd.Parameters.Append empCmd.CreateParameter("@first", 200, 1, 100, searchPattern)
empCmd.Parameters.Append empCmd.CreateParameter("@last", 200, 1, 100, searchPattern)
empCmd.Parameters.Append empCmd.CreateParameter("@full", 200, 1, 100, searchPattern)
empCmd.Parameters.Append empCmd.CreateParameter("@limit", 3, 1, , maxResults)
Set empRs = empCmd.Execute()
If Err.Number <> 0 Then
Response.Write "{""success"":false,""error"":""" & JSEscape(Err.Description) & """,""results"":[]}"
empConn.Close
Response.End
End If
' Build JSON response
Dim jsonOutput, isFirst
jsonOutput = "{""success"":true,""results"":["
isFirst = True
Do While Not empRs.EOF
If Not isFirst Then jsonOutput = jsonOutput & ","
isFirst = False
Dim sso, firstName, lastName, team, picture, fullName
sso = empRs("SSO") & ""
firstName = empRs("First_Name") & ""
lastName = empRs("Last_Name") & ""
team = empRs("Team") & ""
picture = empRs("Picture") & ""
fullName = firstName & " " & lastName
jsonOutput = jsonOutput & "{"
jsonOutput = jsonOutput & """sso"":""" & JSEscape(sso) & ""","
jsonOutput = jsonOutput & """firstName"":""" & JSEscape(firstName) & ""","
jsonOutput = jsonOutput & """lastName"":""" & JSEscape(lastName) & ""","
jsonOutput = jsonOutput & """team"":""" & JSEscape(team) & ""","
jsonOutput = jsonOutput & """fullName"":""" & JSEscape(fullName) & ""","
jsonOutput = jsonOutput & """picture"":""" & JSEscape(picture) & """"
jsonOutput = jsonOutput & "}"
empRs.MoveNext
Loop
jsonOutput = jsonOutput & "]}"
empRs.Close
empConn.Close
Set empRs = Nothing
Set empCmd = Nothing
Set empConn = Nothing
Response.Write jsonOutput
Function JSEscape(s)
If IsNull(s) Then
JSEscape = ""
Exit Function
End If
Dim r
r = s & ""
r = Replace(r, "\", "\\")
r = Replace(r, """", "\""")
r = Replace(r, Chr(13), "")
r = Replace(r, Chr(10), "\n")
r = Replace(r, Chr(9), "\t")
JSEscape = r
End Function
%>

90
apishopfloor.asp
View File

@@ -83,8 +83,22 @@ Do While Not rs.EOF
jsonOutput = jsonOutput & """typename"":""" & JSEscape(rs("typename") & "") & """," jsonOutput = jsonOutput & """typename"":""" & JSEscape(rs("typename") & "") & ""","
jsonOutput = jsonOutput & """typecolor"":""" & JSEscape(rs("typecolor") & "") & """," jsonOutput = jsonOutput & """typecolor"":""" & JSEscape(rs("typecolor") & "") & ""","
jsonOutput = jsonOutput & """businessunit"":" & StrOrNull(rs("businessunit")) & "," jsonOutput = jsonOutput & """businessunit"":" & StrOrNull(rs("businessunit")) & ","
jsonOutput = jsonOutput & """employeesso"":" & StrOrNull(rs("employeesso")) & "," ' Handle employeesso - can be SSO or NAME:customname
jsonOutput = jsonOutput & """employeename"":" & StrOrNull(LookupEmployeeNames(rs("employeesso"))) & "" Dim empSsoRaw, empName, empPicture
empSsoRaw = rs("employeesso") & ""
If Left(empSsoRaw, 5) = "NAME:" Then
' Custom name - extract name, no picture
empName = Mid(empSsoRaw, 6)
empPicture = ""
jsonOutput = jsonOutput & """employeesso"":null,"
Else
' SSO - lookup name and picture
empName = LookupEmployeeNames(empSsoRaw)
empPicture = LookupEmployeePictures(empSsoRaw)
jsonOutput = jsonOutput & """employeesso"":" & StrOrNull(empSsoRaw) & ","
End If
jsonOutput = jsonOutput & """employeename"":" & StrOrNull(empName) & ","
jsonOutput = jsonOutput & """employeepicture"":" & StrOrNull(empPicture) & ""
jsonOutput = jsonOutput & "}" jsonOutput = jsonOutput & "}"
End If End If
@@ -119,8 +133,21 @@ Do While Not rs.EOF
jsonOutput = jsonOutput & """typename"":""" & JSEscape(rs("typename") & "") & """," jsonOutput = jsonOutput & """typename"":""" & JSEscape(rs("typename") & "") & ""","
jsonOutput = jsonOutput & """typecolor"":""" & JSEscape(rs("typecolor") & "") & """," jsonOutput = jsonOutput & """typecolor"":""" & JSEscape(rs("typecolor") & "") & ""","
jsonOutput = jsonOutput & """businessunit"":" & StrOrNull(rs("businessunit")) & "," jsonOutput = jsonOutput & """businessunit"":" & StrOrNull(rs("businessunit")) & ","
jsonOutput = jsonOutput & """employeesso"":" & StrOrNull(rs("employeesso")) & "," ' Handle employeesso - can be SSO or NAME:customname
jsonOutput = jsonOutput & """employeename"":" & StrOrNull(LookupEmployeeNames(rs("employeesso"))) & "" empSsoRaw = rs("employeesso") & ""
If Left(empSsoRaw, 5) = "NAME:" Then
' Custom name - extract name, no picture
empName = Mid(empSsoRaw, 6)
empPicture = ""
jsonOutput = jsonOutput & """employeesso"":null,"
Else
' SSO - lookup name and picture
empName = LookupEmployeeNames(empSsoRaw)
empPicture = LookupEmployeePictures(empSsoRaw)
jsonOutput = jsonOutput & """employeesso"":" & StrOrNull(empSsoRaw) & ","
End If
jsonOutput = jsonOutput & """employeename"":" & StrOrNull(empName) & ","
jsonOutput = jsonOutput & """employeepicture"":" & StrOrNull(empPicture) & ""
jsonOutput = jsonOutput & "}" jsonOutput = jsonOutput & "}"
End If End If
@@ -227,4 +254,59 @@ Function LookupEmployeeNames(ssoInput)
LookupEmployeeNames = "[Not found: " & ssoInput & "]" LookupEmployeeNames = "[Not found: " & ssoInput & "]"
End If End If
End Function End Function
' Look up employee picture(s) from SSO(s)
Function LookupEmployeePictures(ssoInput)
If IsNull(ssoInput) Or Len(ssoInput & "") = 0 Then
LookupEmployeePictures = ""
Exit Function
End If
Dim empConn, empCmd, empRs, ssoList, pictures, i, sso, picture
On Error Resume Next
Set empConn = Server.CreateObject("ADODB.Connection")
empConn.ConnectionString = GetEmployeeConnectionString()
empConn.Open
If Err.Number <> 0 Then
LookupEmployeePictures = ""
Exit Function
End If
ssoList = Split(ssoInput & "", ",")
pictures = ""
For i = 0 To UBound(ssoList)
sso = Trim(ssoList(i))
If IsNumeric(sso) And Len(sso) > 0 Then
Set empCmd = Server.CreateObject("ADODB.Command")
empCmd.ActiveConnection = empConn
empCmd.CommandText = "SELECT Picture FROM employees WHERE SSO = ?"
empCmd.CommandType = 1
empCmd.Parameters.Append empCmd.CreateParameter("@sso", 3, 1, , CLng(sso))
Set empRs = empCmd.Execute()
If Err.Number = 0 And Not empRs.EOF Then
picture = empRs("Picture") & ""
If Len(picture) > 0 Then
If Len(pictures) > 0 Then pictures = pictures & ","
pictures = pictures & picture
End If
End If
If Not empRs Is Nothing Then
If empRs.State = 1 Then empRs.Close
Set empRs = Nothing
End If
Set empCmd = Nothing
End If
Next
empConn.Close
Set empConn = Nothing
On Error GoTo 0
LookupEmployeePictures = pictures
End Function
%> %>

6
savenotificationdirect.asp
View File

@@ -55,10 +55,10 @@ Dim isRecognition
isRecognition = (CLng(notificationtypeid) = RECOGNITION_TYPE_ID) isRecognition = (CLng(notificationtypeid) = RECOGNITION_TYPE_ID)
If isRecognition Then If isRecognition Then
' Validate employeesso is provided for Recognition ' Validate that employeesso is provided for Recognition (can be SSO or NAME:customname)
If Len(employeesso) = 0 Then If Len(employeesso) = 0 Then
objConn.Close objConn.Close
ShowError "Employee SSO is required for Recognition notifications.", "addnotification.asp" ShowError "At least one employee must be selected for Recognition notifications.", "addnotification.asp"
Response.End Response.End
End If End If
@@ -134,7 +134,7 @@ Else
appidValue = CLng(appid) appidValue = CLng(appid)
End If End If
' Handle optional employeesso - only for Recognition type ' Handle optional employeesso - can be SSO or NAME:customname
Dim employeessoValue Dim employeessoValue
If Len(employeesso) = 0 Then If Len(employeesso) = 0 Then
employeessoValue = Null employeessoValue = Null

103
shopfloor-dashboard/index.html
View File

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