mainSupAdminView.html

  
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/css/mainSupAdminView.css">
</head>
<body>
<div id="toolbar">
    <label for="searchName">Name</label>
    <input type="text" class="searchBox" id="searchName" placeholder="type name..." />
    <label for="searchPhone">Phone</label>
    <input type="text" class="searchBox" id="searchPhone" placeholder="type phone..." />
    <select class="searchBox" id="searchStatus">
        <option value="" disabled selected>choose status</option>
        <option value="active">Active</option>
        <option value="inactive">Inactive</option>
    </select>
    <button id="searchButton">Confirm</button>
    <button id="addButton">Add</button>
</div>

<div style=" height: 450px; overflow: auto;">
    <table>
        <thead>
        <tr>
            <th>ID</th>
            <th>NAME</th>
            <th>PHONE</th>
            <th>EMAIL</th>
            <th>STATUS</th>
            <th>OPTION</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="row : ${tableData}"
            th:data-id="${row['id']}"
            th:data-name="${row['name']}"
            th:data-phone="${row['phone']}"
            th:data-email="${row['email']}"
            th:data-status="${row['status_str']}">
            <td th:text="${row['id']}"></td>
            <td th:text="${row['name']}"></td>
            <td th:text="${row['phone']}"></td>
            <td th:text="${row['email']}"></td>
            <td th:text="${row['status_str']}"></td>
            <td class="tdOption">
                <label id="edit" class="btn">Edit</label>
                <label id="delete" class="btn">Delete</label>
                <label id="freeze" class="btn">Freeze</label>
            </td>
        </tr>

        </tbody>
    </table>
</div>


<!-- mask layer -->
<div id="overlay"></div>
<!-- form -->
<div id="formContainer">
    <form id="dynamicForm">
        <label for="name">name:</label>
        <input type="text" id="name" placeholder="Please enter your username">
        <label for="email">email:</label>
        <input type="email" id="email" placeholder="Please enter email">
        <label for="email">phone:</label>
        <input type="text" id="phone" placeholder="Please enter phone">