items.html - AWS Code Sample

items.html

<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3"> <html> <head> <title>Modify Items</title> <script th:src="|https://code.jquery.com/jquery-1.12.4.min.js|"></script> <script th:src="|https://code.jquery.com/ui/1.11.4/jquery-ui.min.js|"></script> <script th:src="|https://cdn.datatables.net/v/dt/dt-1.10.20/datatables.min.js|"></script> <script th:src="|https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js|"></script> <script src="../public/js/items.js" th:src="@{/js/items.js}"></script> <!-- CSS files --> <link rel="stylesheet" th:href="|https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css|"/> <link rel="stylesheet" th:href="|https://cdn.datatables.net/v/dt/dt-1.10.20/datatables.min.css|"/> <link rel="stylesheet" href="../public/css/styles.css" th:href="@{/css/styles.css}" /> <link rel="stylesheet" href="../public/css/col.css" th:href="@{/css/col.css}" /> <link rel="stylesheet" href="../public/css/button.css" th:href="@{/css/button.css}" /> <link rel="stylesheet" href="../public/css/all.min.css" th:href="@{/css/all.min.css}" /> </head> <body> <header th:replace="layout :: site-header"/> <div class="container"> <h3>Welcome <span sec:authentication="principal.username">User</span> to AWS DynamoDB Item Tracker</h3> <h3 id="info3">Get Items</h3> <p>You can manage items in this view.</p> <table id="myTable" class="display" style="width:100%"> <thead> <tr> <th>Item Id</th> <th>Name</th> <th>Guide</th> <th>Date Created</th> <th>Description</th> <th>Status</th> </tr> </thead> <tbody> <tr> <td>No Data</td> <td>No Data</td> <td>No Data </td> <td>No Data</td> <td>No Data</td> <td>No Data</td> </tr> </tbody> <tfoot> <tr> <th>Item Id</th> <th>Name</th> <th>Guide</th> <th>Date Created</th> <th>Description</th> <th>Status</th> </tr> </tfoot> <div id="success3"></div> </table> </div> <br> <div id="modform" class="container" > <h3>Modify an Item</h3> <p>You can modify items.</p> <form> <div class="control-group"> <div class="form-group floating-label-form-group controls mb-0 pb-2"> <label>ID</label> <input class="form-control" id="id" type="id" placeholder="Id" readonly data-validation-required-message="Item Id."> <p class="help-block text-danger"></p> </div> </div> <div class="control-group"> <div class="form-group floating-label-form-group controls mb-0 pb-2"> <label>Description</label> <textarea class="form-control" id="description" rows="5" placeholder="Description" readonly data-validation-required-message="Description."></textarea> <p class="help-block text-danger"></p> </div> </div> <div class="control-group"> <div class="form-group floating-label-form-group controls mb-0 pb-2"> <label>Status</label> <textarea class="form-control" id="status" rows="5" placeholder="Status" required="required" data-validation-required-message="Status"></textarea> <p class="help-block text-danger"></p> </div> </div> <br> </form> </div> <div id="dialogtemplate2" border="2" title="Basic dialog"> <table align="center"> <tr> <td> <p>Options:</p> </td> <td> </td> </tr> <tr> <td> <p>Select Manager:</p> </td> <td> </td> </tr> <tr> <td> <select id="manager"> <option value="scmacdon@amazon.com">scmacdon@amazon.com</option> <option value="susfer@amazon.com">swhite@nomail.com</option> </select> </td> <td> </td> </tr> <tr> <tr> <td> <button class="shiny-blue" type="button" onclick="GetItems()">Get Active Items</button> </td> <td> </td> </tr> <tr> <td> <button class="shiny-blue" type="button" onclick="GetArcItems()">Get Archived Items</button> </td> <td> </td> </tr> <tr> <td> <button class="shiny-blue" id="singlebutton" type="button" onclick="ModifyItem()">Get Single Item</button> </td> <td> </td> </tr> <tr> <td> <button class="shiny-blue" id="updatebutton" type="button" onclick="modItem()">Update Item</button> </td> <td> </td> </tr> <tr> <td> <button class="shiny-blue" id="archive" type="button" onclick="archiveItem()">Archive Item</button> </td> <td> </td> </tr> <tr> <td> <button class="shiny-blue" type="button" id="reportbutton" onclick="Report()">Send Report</button> </td> <td> </td> </tr> </table> </div> <style> .ui-widget { font-family: Verdana,Arial,sans-serif; font-size: .8em; } .ui-widget-content { background: #F9F9F9; border: 1px solid #90d93f; color: #222222; } .ui-dialog { left: 0; outline: 0 none; padding: 0 !important; position: absolute; top: 0; } #success { padding: 0; margin: 0; } .ui-dialog .ui-dialog-content { background: none repeat scroll 0 0 transparent; border: 0 none; overflow: auto; position: relative; padding: 0 !important; } .ui-widget-header { background: #000; border: 0; color: #fff; font-weight: normal; } .ui-dialog .ui-dialog-titlebar { padding: 0.1em .5em; position: relative; font-size: 1em; } </style> </body> </html>