diff --git a/Dockerfile b/Dockerfile index d768f53..8db53ff 100644 --- a/Dockerfile +++ b/Dockerfile @@ -1,14 +1,9 @@ -# Use the official Nginx base image FROM nginx:latest -# Set a working directory inside the container WORKDIR /usr/share/nginx/html -# Copy all files from the Dockerfile's directory to the container COPY . . -# Expose the default Nginx port EXPOSE 80 -# Start Nginx server -CMD ["nginx", "-g", "daemon off;"] +CMD ["nginx", "-g", "daemon off;"] \ No newline at end of file diff --git a/build.sh b/build.sh index ed714a3..229795f 100644 --- a/build.sh +++ b/build.sh @@ -1,3 +1,3 @@ #!/bin/bash -echo "Please complete the compilation script ./build.sh" +echo "Please complete the compilation script." \ No newline at end of file diff --git a/css/style.css b/css/style.css index e69de29..f5095b6 100644 --- a/css/style.css +++ b/css/style.css @@ -0,0 +1,33 @@ + + + diff --git a/docker-build.sh b/docker-build.sh index 007c319..9055ce1 100644 --- a/docker-build.sh +++ b/docker-build.sh @@ -14,3 +14,4 @@ docker push ${DOCKER_REPO}:${COMMIT_SHA} docker push ${DOCKER_REPO}:latest echo "kuafuai_docker_image_pushed:${DOCKER_REPO}:${COMMIT_SHA}" + diff --git a/index.html b/index.html index e69de29..9c7daf6 100644 --- a/index.html +++ b/index.html @@ -0,0 +1,155 @@ + + + + + Employee Information Management + + + + + + +
+
+
+ Add Employee + Edit Employee + Delete Employee +
+
+
+

Employee Information List

+ + + + + + + + + + + +
NameEmployee IDEntry DateJob Position
+
+
+

Employee Information Details

+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ + +
+
+
+
+ + + + \ No newline at end of file diff --git a/js/script.js b/js/script.js index e69de29..2a891b0 100644 --- a/js/script.js +++ b/js/script.js @@ -0,0 +1,158 @@ +$(document).ready(function() { + // Load employee information list on page load + loadEmployeeList(); + + // Handle click event on employee list rows + $(document).on('click', '#employeeList tbody tr', function() { + $(this).addClass('active').siblings().removeClass('active'); + var employeeId = $(this).attr('data-id'); + loadEmployeeDetails(employeeId); + }); + + // Handle click event on Add Employee button + $(document).on('click', '#addEmployee', function() { + clearEmployeeForm(); + $('#employeeList tbody tr').removeClass('active'); + }); + + // Handle click event on Edit Employee button + $(document).on('click', '#editEmployee', function() { + var employeeId = $('#employeeList tbody tr.active').attr('data-id'); + if (employeeId) { + loadEmployeeDetails(employeeId); + } else { + showMessage('Please select an employee to edit.', 'error'); + } + }); + + // Handle click event on Delete Employee button + $(document).on('click', '#deleteEmployee', function() { + var employeeId = $('#employeeList tbody tr.active').attr('data-id'); + if (employeeId) { + if (confirm('Are you sure you want to delete this employee?')) { + deleteEmployee(employeeId); + } + } else { + showMessage('Please select an employee to delete.', 'error'); + } + }); + + // Handle click event on Save button + $(document).on('click', '#saveEmployee', function() { + var employee = { + name: $('#employeeName').val(), + id: $('#employeeId').val(), + entryDate: $('#entryDate').val(), + jobPosition: $('#jobPosition').val() + }; + if (validateEmployee(employee)) { + saveEmployee(employee); + } + }); + + // Handle click event on Cancel button + $(document).on('click', '#cancelEmployee', function() { + clearEmployeeForm(); + $('#employeeList tbody tr').removeClass('active'); + }); + + function loadEmployeeList() { + $.ajax({ + url: '/api/employees', + type: 'GET', + success: function(response) { + $('#employeeList tbody').empty(); + response.forEach(function(employee) { + var row = ` + ${employee.name} + ${employee.id} + ${employee.entryDate} + ${employee.jobPosition} + `; + $('#employeeList tbody').append(row); + }); + }, + error: function(jqXHR, textStatus, errorThrown) { + showMessage(`Failed to load employee list. Error: ${errorThrown}`, 'error'); + } + }); + } + + function loadEmployeeDetails(employeeId) { + $.ajax({ + url: `/api/employees/${employeeId}`, + type: 'GET', + success: function(response) { + $('#employeeName').val(response.name); + $('#employeeId').val(response.id); + $('#entryDate').val(response.entryDate); + $('#jobPosition').val(response.jobPosition); + }, + error: function(jqXHR, textStatus, errorThrown) { + showMessage(`Failed to load employee details. Error: ${errorThrown}`, 'error'); + } + }); + } + + function saveEmployee(employee) { + $.ajax({ + url: '/api/employees', + type: 'POST', + data: employee, + success: function(response) { + showMessage(response.message, 'success'); + clearEmployeeForm(); + loadEmployeeList(); + }, + error: function(jqXHR, textStatus, errorThrown) { + showMessage(`Failed to save employee. Error: ${errorThrown}`, 'error'); + } + }); + } + + function deleteEmployee(employeeId) { + $.ajax({ + url: `/api/employees/${employeeId}`, + type: 'DELETE', + success: function(response) { + showMessage(response.message, 'success'); + clearEmployeeForm(); + loadEmployeeList(); + }, + error: function(jqXHR, textStatus, errorThrown) { + showMessage(`Failed to delete employee. Error: ${errorThrown}`, 'error'); + } + }); + } + + function validateEmployee(employee) { + if (employee.name.trim() === '') { + showMessage('Please enter a name.', 'error'); + return false; + } + if (employee.id.trim() === '') { + showMessage('Please enter an ID.', 'error'); + return false; + } + if (employee.entryDate.trim() === '') { + showMessage('Please enter an entry date.', 'error'); + return false; + } + if (employee.jobPosition.trim() === '') { + showMessage('Please enter a job position.', 'error'); + return false; + } + return true; + } + + function clearEmployeeForm() { + $('#employeeName').val(''); + $('#employeeId').val(''); + $('#entryDate').val(''); + $('#jobPosition').val(''); + } + + function showMessage(message, type) { + $('#message').removeClass().addClass('ui message ' + type).text(message); + } +});