API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Jan 10th, 2021
90
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 31.06 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://thymeleaf.org">
  3. <head>
  4. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
  5. integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
  6. <meta charset="UTF-8">
  7. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  8.  
  9. </head>
  10. <body class="bg-light">
  11. <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  12. <a class="navbar-brand" href="#"><p th:text="${oneUser.username}"></p></a>
  13. <div class="collapse navbar-collapse" id="navbarText">
  14. <ul class="navbar-nav mr-auto">
  15. <li class="nav-item">
  16. <a class="nav-link" href="#">with roles:<span class="sr-only"></span></span></a>
  17. </li>
  18. <li class="nav-item">
  19. <a class="nav-link" href="#"><p th:each="userRole: ${oneUser.roles}">
  20. <span th:text="${userRole.getName()}">role</span>
  21. </p></a>
  22.  
  23. </li>
  24. </ul>
  25. <span class="navbar-text">
  26. <a th:href="@{/logout}">Logout</a>
  27. </span>
  28. </div>
  29. </nav>
  30. </br>
  31. <div class="container-fluid">
  32. <div class="row">
  33. <div class="col col-2 bg-white vh-100 text-center">
  34. <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
  35. <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-admin" role="tab"
  36. aria-controls="v-pills-home" aria-selected="true">Admin</a>
  37. <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-user" role="tab"
  38. aria-controls="v-pills-profile" aria-selected="false">User</a>
  39. </div>
  40. </div>
  41. <div class="col mx-auto p-4">
  42. <div class="tab-content" id="v-pills-tabContent">
  43. <div class="tab-pane fade show active" id="v-pills-admin" role="tabpanel"
  44. aria-labelledby="v-pills-admin-tab">
  45. <h1>Admin table</h1>
  46. <nav>
  47. <div class="nav nav-tabs" id="nav-tab" role="tablist">
  48. <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab"
  49. href="#nav-usersTable" role="tab" aria-controls="nav-home" aria-selected="true">
  50. Users table</a>
  51. <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab"
  52. href="#nav-addUser"
  53. role="tab" aria-controls="nav-profile" aria-selected="false">New User Add</a>
  54.  
  55. </div>
  56. </nav>
  57. <div class="tab-content" id="nav-tabContent">
  58. <div class="tab-pane fade show active" id="nav-usersTable" role="tabpanel"
  59. aria-labelledby="nav-home-tab">
  60. <nav class="navbar navbar-expand-lg navbar-light bg-light">
  61. <a class="navbar-brand" href="#">All Users</a>
  62. </nav>
  63. <div class="card">
  64. <div class="block">
  65. <table class="table table-hover">
  66. <thead>
  67. <tr>
  68. <th>ID</th>
  69. <th>Username</th>
  70. <th>Surname</th>
  71. <th>Age</th>
  72. <th>Role</th>
  73. <th>Edit</th>
  74. <th>Delete</th>
  75.  
  76. </tr>
  77. </thead>
  78. <tbody id="asd">
  79. <!-- <tr id="exampleTest" style="display: none"><td id= "username" ></td></tr>-->
  80. <tr id="exampleTest" style="display: none" th:each=user:${allUsers}>
  81. <td id="userId" th:text="${user.getId()}"></td>
  82. <td id="uasdqwe"></td>
  83. <td th:text="${user.lastname}"></td>
  84. <td th:text="${user.age}"></td>
  85. <td>
  86. <p th:each="userRole: ${user.roles}">
  87. <span th:text="${userRole.getName()}"></span></p></td>
  88. <td class="editTD">
  89. <div class="text-left">
  90. <button class="btn btn-info" data-toggle="modal"
  91. th:data-target="${'#editModal'+user.getId()}"
  92. type="button">Edit
  93. </button>
  94.  
  95. </div>
  96. <div class="modal fade" id="editModal" tabindex="-1"
  97. role="dialog"
  98. aria-hidden="true" th:attrappend="id=${user.getId()}">
  99. <div class="modal-dialog" role="document">
  100. <div class="modal-content">
  101. <div class="modal-header">
  102. <h5 class="modal-title" id="modalLabel">
  103. Edit
  104. user</h5>
  105. <button type="button" class="ui-icon-close"
  106. data-dismiss="modal" aria-label="Close">
  107. <span aria-hidden="true">x</span>
  108. </button>
  109. </div>
  110. <form th:method="POST" th:action="@{admin/edit/}"
  111. th:object="${editUser}">
  112. <div class="modal-body">
  113. <div class="form-group col-sm-10 offset-sm-1 text-center">
  114. <div class="text center">
  115. <strong>ID</strong><br>
  116. <input class="form-control"
  117. type="number" name="id"
  118. th:value="${user.getId()}">
  119. </div>
  120. <div class="text center">
  121. <strong>Username</strong><br>
  122. <input class="form-control"
  123. type="text" name="username"
  124. th:value="${user.username}">
  125.  
  126. </div>
  127. <div class="text center">
  128. <strong>LastName</strong><br>
  129. <input class="form-control"
  130. type="text" name="lastname"
  131. th:value="${user.lastname}">
  132. </div>
  133. <div class="text center">
  134. <strong>Age</strong><br>
  135. <input class="form-control"
  136. type="number" name="age"
  137. th:value="${user.age}">
  138. </div>
  139. <div class="text center">
  140. <strong>Password</strong><br>
  141. <input class="form-control"
  142. type="text" name="password"
  143. th:value="${user.password}">
  144. </div>
  145. <div><br>
  146. <strong>Role</strong>
  147. <select multiple
  148. class="custom-select form-control"
  149. th:id="${'role' + user.id}"
  150. name="newRole"
  151. id="newRole"
  152. required>
  153. <option
  154. th:each="z:${listRole}"
  155. th:selected="${#lists.contains(user.roles, z)}"
  156. th:value="${z.getName()}"
  157. th:text="${z.getName()}">
  158. </option>
  159. </select>
  160. </div>
  161. </div>
  162. </div>
  163. <div class="modal-footer">
  164. <button type="button"
  165. class="btn btn-secondary"
  166. data-dismiss="modal">Close
  167. </button>
  168. <input type="submit" class="btn btn-primary"
  169. value="Edit">
  170. </div>
  171. </form>
  172. </div>
  173. </div>
  174. </div>
  175.  
  176. </td>
  177. <td>
  178. <div class="text-left">
  179. <button type="button" class="btn btn-danger"
  180. data-toggle="modal"
  181. th:data-target="${'#deleteModal'+ user.getId()}">
  182. Delete
  183. </button>
  184. </div>
  185. <div class="modal fade" id="deleteModal" tabindex="-1"
  186. role="dialog"
  187. th:attrappend="id=${user.getId}" aria-hidden="true">
  188. <div class="modal-dialog">
  189. <div class="modal-content">
  190. <div class="modal-header">
  191. <h5 class="modal-title" id="modalLbl">Delete
  192. user</h5>
  193. <button type="button" class="ui-icon-close"
  194. data-dismiss="modal" aria-label="Close">
  195. <span aria-hidden="true">x</span>
  196. </button>
  197. </div>
  198. <div class="modal-body">
  199. <div class="form-group col-sm-10 offset-sm-1 text-center">
  200. <div class="text center">
  201. <strong>ID</strong><br>
  202. <input class="form-control" readonly
  203. type="number" name="id"
  204. th:value="${user.getId()}">
  205. </div>
  206. <div class="text center">
  207. <strong>Username</strong><br>
  208. <input class="form-control" readonly
  209. type="text" name="userName"
  210. th:value="${user.username}">
  211. </div>
  212. <div class="text center">
  213. <strong>LastName</strong><br>
  214. <input class="form-control" readonly
  215. type="text" name="lastName"
  216. th:value="${user.lastname}">
  217. </div>
  218. <div class="text center">
  219. <strong>Age</strong><br>
  220. <input class="form-control" readonly
  221. type="number" name="age"
  222. th:value="${user.age}">
  223. </div>
  224. <div class="text center">
  225. <strong>Password</strong><br>
  226. <input class="form-control" readonly
  227. type="password" name="password"
  228. th:value="${user.password}">
  229. </div>
  230. <div><br>
  231. <strong>Role</strong>
  232. <select multiple
  233. class="custom-select form-control"
  234. readonly
  235. th:id="${'role' + user.id}"
  236. name="newRole"
  237. id="newRoles"
  238. required>
  239. <option
  240. th:each="z:${listRole}"
  241. th:selected="${#lists.contains(user.roles, z)}"
  242. th:value="${z.getName()}"
  243. th:text="${z.getName()}">
  244. </option>
  245. </select>
  246. </div>
  247. </div>
  248. </div>
  249. <div class="modal-footer">
  250. <button type="button"
  251. class="btn btn-default"
  252. data-dismiss="modal">Close
  253. </button>
  254. <form th:method="GET"
  255. th:action="@{admin/delete/{id}(id=${user.getId()})}"
  256. th:object="${user}">
  257. <input type="submit"
  258. class="btn btn-danger"
  259. value="Delete">
  260. </form>
  261. </div>
  262. </div>
  263. </div>
  264. </div>
  265.  
  266. </td>
  267. </tr>
  268. </tbody>
  269. </table>
  270. </div>
  271. </div>
  272. </div>
  273. <div class="tab-pane fade show" id="nav-addUser" role="tabpanel"
  274. aria-labelledby="nav-home-tab">
  275. <div>
  276.  
  277. <h5 class="card-header">Add new user</h5>
  278.  
  279. <div class="container">
  280. <div class="row">
  281. <div class="col-sm-3 offset-sm-2 text-center">
  282. <form class="text-cetner fw-bold" th:method="POST" th:action="@{/admin/add}"
  283. th:object="${newUser}">
  284. <div class="form-group">
  285. <div class="text center">
  286. <strong>First Name</strong><br>
  287. <input class="form-control"
  288. type="text" name="username"
  289. th:value="*{username}">
  290. </div>
  291.  
  292. <div class="text-center">
  293. <strong>LastName</strong>
  294. <input class="form-control"
  295. type="text" name="lastname"
  296. th:value="${lastname}">
  297. </div>
  298. <div class="text-center">
  299. <strong>Age</strong>
  300. <input class="form-control"
  301. type="number" name="age"
  302. th:value="${age}">
  303. </div>
  304. <div class="text center">
  305. <strong>Password</strong><br>
  306. <input class="form-control"
  307. type="password" name="password"
  308. th:value="*{password}">
  309. </div>
  310. <div class="form-group">
  311. <label class="col-form-label"
  312. th:for="role">Role</label>
  313. <select class="custom-select form-control"
  314. th:id="role" name="newRole" multiple>
  315. <option
  316. th:each="s: ${listRole}"
  317. th:value="${s.getName()}"
  318. th:selected="${s.getName() == 'ROLE_USER'}"
  319. th:text="${s.getName()}">
  320. </option>
  321. </select>
  322. </div>
  323. </div>
  324.  
  325. <div>
  326. <button type="button submit" class="btn btn-success">Add new
  327. user
  328. </button>
  329. </div>
  330. </form>
  331. </div>
  332. </div>
  333. </div>
  334. </div>
  335. </div>
  336. </div>
  337. </div>
  338. <div class="tab-pane fade" id="v-pills-user" role="tabpanel" aria-labelledby="v-pills-user-tab">
  339. <h2>User Info</h2>
  340. <table class="table table-striped">
  341. <thead>
  342. <nav class="navbar navbar-expand-lg navbar-light bg-light">
  343. <a class="navbar-brand" href="#">User Details</a>
  344. </nav>
  345. <th>Id</th>
  346. <th>Username</th>
  347. <th>LastName</th>
  348. <th>Age</th>
  349. <th>Password</th>
  350. <th>Role</th>
  351. </tr>
  352. </thead>
  353. <tbody>
  354.  
  355. <td th:text="${oneUser.getId()}"></td>
  356. <td th:text="${oneUser.username}"></td>
  357. <td th:text="${oneUser.lastname}"></td>
  358. <td th:text="${oneUser.age}"></td>
  359. <td th:text="${oneUser.password}"></td>
  360. <td>
  361. <span th:text="${#strings.listJoin(oneUser.getRoleFiltered(), ', ')}">role</span>
  362. </td>
  363. </tbody>
  364. </table>
  365. </div>
  366. </div>
  367. </div>
  368. </div>
  369. </div>
  370. </div>
  371.  
  372.  
  373. <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
  374. integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
  375. crossorigin="anonymous"></script>
  376. <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
  377. integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
  378. crossorigin="anonymous"></script>
  379. <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
  380. integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s"
  381. crossorigin="anonymous"></script>
  382. <script type="text/javascript">
  383.  
  384. jQuery(document).ready(function (){
  385.  
  386.  
  387. let NY = $('.btn btn-info')
  388.  
  389. function fetchData() {
  390. fetch('http://localhost:8087/rest')
  391. .then(r => r.json()).then(data => {
  392. buildTable(data)
  393. })
  394. }
  395.  
  396. fetchData()
  397.  
  398.  
  399. function buildTable(data) {
  400. let table = document.getElementById('asd')
  401. for (let i = 0; i < data.length; i++) {
  402.  
  403. let row = `<tr>
  404. <td>${data[i].id}</td>
  405. <td>${data[i].username}</td>
  406. <td>${data[i].lastname}</td>
  407. <td>${data[i].age}</td>
  408. <td>${getRole(data[i].roles)}</td>
  409.  
  410. <td>
  411. $(".editTD")
  412. </td>
  413. <td>
  414.  
  415. </td>
  416. </tr>
  417. `
  418. table.innerHTML += row
  419. }
  420. }
  421.  
  422.  
  423. function getRole(roles) {
  424. let role = ""
  425. for (let i = 0; i < roles.length; i++) {
  426. role += roles[i].name + " "
  427. }
  428. return role.substring(0, role.length - 1).replace(/ROLE_/g, '')
  429. }
  430.  
  431.  
  432. $(document).ready(function () {
  433. $(' .asd .eBtn').on('click', function (event) {
  434. event.preventDefault()
  435. const href = $(this).attr('href')
  436. var text = $(this).text()
  437. if (text === 'Edit') {
  438. // $.get(href, function (country, status) { //main.js:14 Uncaught TypeError: $.get is not a function
  439. for (let i = 0; i < data.length; i++) {
  440.  
  441.  
  442. $.isFunction(href, function (data) {
  443. $('.myForm #id').val(data[i].id)
  444. $('.myForm #username').val(data[i].username)
  445. $('.myForm #lastname').val(data[i].lastname)
  446. });}
  447. $('.myForm #exampleModal').modal()
  448. } else {
  449. $('.myForm #id').val('')
  450. $('.myForm #username').val('')
  451. $('.myForm #lastname').val('')
  452. $('.myForm #exampleModal').modal()
  453. }
  454. });
  455. $('.asd .delBtn').on('click', function (event) {
  456. event.preventDefault()
  457. var href = $(this).attr('href')
  458. $('#myModal #delRef').attr('href', href)
  459. $('#myModal').modal()
  460. });
  461. });
  462.  
  463. const buttonDelete = $("#delBtn");
  464. buttonDelete.click(
  465. function () {
  466. $.ajax("/rest", {
  467. method: "DELETE",
  468. data: {id: $(this).attr("value")}, //в rest-контроллер будет передан id=1 (см. value из тэга button выше)
  469. dataType: "text",
  470. success: function (msg) {
  471. $("#users")
  472. .find("#" + msg) //ищем div с id=1
  473. .remove();
  474. }
  475. })
  476. }
  477. )
  478.  
  479. });
  480. </script>
  481. </body>
  482. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!