kuafuai · yinxinonly · Dec 15, 2023 · Dec 15, 2023
diff --git 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;"]
diff --git 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."
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,33 @@
+<!-- This file contains custom styles for the employee information management application. -->
+
+<style>
+    body {
+        background-color: #f9f9f9;
+        font-family: Arial, sans-serif;
+    }
+
+    /* Container Styles */
+    .employee-container {
+        margin-top: 20px;
+    }
+
+    /* Segment Styles */
+    .employee-segment {
+        padding: 20px;
+    }
+
+    /* Header Styles */
+    .employee-header {
+        margin-top: 0;
+    }
+
+    /* Form Field Styles */
+    .employee-form-field {
+        margin-bottom: 20px;
+    }
+
+    /* Message Styles */
+    .employee-message {
+        margin-top: 20px;
+    }
+</style>
diff --git 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
@@ -0,0 +1,155 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Employee Information Management</title>
+    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
+    <style>
+        body {
+            background-color: #f9f9f9;
+            font-family: Arial, sans-serif;
+        }
+        .ui.container {
+            margin-top: 20px;
+        }
+        .ui.segment {
+            padding: 20px;
+        }
+        .ui.header {
+            margin-top: 0;
+        }
+        .ui.form .field {
+            margin-bottom: 20px;
+        }
+        .ui.message {
+            margin-top: 20px;
+        }
+    </style>
+</head>
+<body>
+    <div class="ui container">
+        <div class="ui segment">
+            <div class="ui menu">
+                <a class="active item" id="addEmployee">Add Employee</a>
+                <a class="item" id="editEmployee">Edit Employee</a>
+                <a class="item" id="deleteEmployee">Delete Employee</a>
+            </div>
+        </div>
+        <div class="ui segment">
+            <h2 class="ui header">Employee Information List</h2>
+            <table class="ui celled table" id="employeeList">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Employee ID</th>
+                        <th>Entry Date</th>
+                        <th>Job Position</th>
+                    </tr>
+                </thead>
+                <tbody>
+                </tbody>
+            </table>
+        </div>
+        <div class="ui segment">
+            <h2 class="ui header">Employee Information Details</h2>
+            <div class="ui form">
+                <div class="field">
+                    <label for="inputEmployeeName">Name</label>
+                    <input type="text" id="inputEmployeeName">
+                </div>
+                <div class="field">
+                    <label for="inputEmployeeId">Employee ID</label>
+                    <input type="text" id="inputEmployeeId">
+                </div>
+                <div class="field">
+                    <label for="inputEntryDate">Entry Date</label>
+                    <input type="text" id="inputEntryDate">
+                </div>
+                <div class="field">
+                    <label for="inputJobPosition">Job Position</label>
+                    <input type="text" id="inputJobPosition">
+                </div>
+                <button class="ui primary button" id="saveEmployee">Save</button>
+                <button class="ui button" id="cancelEmployee">Cancel</button>
+            </div>
+            <div class="ui message" id="message"></div>
+        </div>
+    </div>
+    <script src="js/script.js"></script>
+    <script>
+        // Add comments to explain the purpose and functionality of each section of the code
+
+        // Function to add a new employee
+        function addEmployee() {
+            // Get the input values
+            var name = $('#inputEmployeeName').val();
+            var employeeId = $('#inputEmployeeId').val();
+            var entryDate = $('#inputEntryDate').val();
+            var jobPosition = $('#inputJobPosition').val();
+
+            // Validate the input values
+            if (name === '' || employeeId === '' || entryDate === '' || jobPosition === '') {
+                $('#message').text('Please fill in all fields').removeClass('hidden');
+                return;
+            }
+
+            // Create a new row in the employee list table
+            var newRow = $('<tr>');
+            newRow.append($('<td>').text(name));
+            newRow.append($('<td>').text(employeeId));
+            newRow.append($('<td>').text(entryDate));
+            newRow.append($('<td>').text(jobPosition));
+
+            // Append the new row to the table body
+            $('#employeeList tbody').append(newRow);
+
+            // Clear the input fields
+            $('#inputEmployeeName').val('');
+            $('#inputEmployeeId').val('');
+            $('#inputEntryDate').val('');
+            $('#inputJobPosition').val('');
+
+            // Show success message
+            $('#message').text('Employee added successfully').removeClass('hidden');
+        }
+
+        // Event listener for addEmployee button click
+        $('#addEmployee').on('click', function() {
+            // Hide the message
+            $('#message').addClass('hidden');
+
+            // Show the employee details form
+            $('.ui.form').removeClass('hidden');
+
+            // Clear the input fields
+            $('#inputEmployeeName').val('');
+            $('#inputEmployeeId').val('');
+            $('#inputEntryDate').val('');
+            $('#inputJobPosition').val('');
+
+            // Set focus on the first input field
+            $('#inputEmployeeName').focus();
+        });
+
+        // Event listener for saveEmployee button click
+        $('#saveEmployee').on('click', function() {
+            // Hide the message
+            $('#message').addClass('hidden');
+
+            // Add the employee
+            addEmployee();
+        });
+
+        // Event listener for cancelEmployee button click
+        $('#cancelEmployee').on('click', function() {
+            // Hide the message
+            $('#message').addClass('hidden');
+
+            // Hide the employee details form
+            $('.ui.form').addClass('hidden');
+        });
+    </script>
+</body>
+</html>
diff --git 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 = `<tr data-id="${employee.id}">
+                        <td>${employee.name}</td>
+                        <td>${employee.id}</td>
+                        <td>${employee.entryDate}</td>
+                        <td>${employee.jobPosition}</td>
+                    </tr>`;
+                    $('#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);
+    }
+});
Original file line number	Diff line number	Diff line change
Expand Up		@@ -14,3 +14,4 @@ docker push ${DOCKER_REPO}:${COMMIT_SHA}
		docker push ${DOCKER_REPO}:latest

		echo "kuafuai_docker_image_pushed:${DOCKER_REPO}:${COMMIT_SHA}"