index.html 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  1. <!DOCTYPE html>
  2. <html lang="en" ng-app='crud'>
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.css">
  8. <link rel="stylesheet" href="./app/css/style.css">
  9. </head>
  10. <body>
  11. <div class="container" ng-controller="Form">
  12. <form ng-submit="addComment()" enctype="multipart/form-data">
  13. <div class="form-group">
  14. <textarea placeholder="Comment text" class="form-control form-control-lg" ng-model="newComment.commentText" required></textarea>
  15. <input type="text" class="form-control form-control-sm" placeholder="Author name" ng-model="newComment.authorName" required>
  16. <div class="btn-foto btn btn-secondary" ngf-select ng-model="newComment.foto" name="file" ngf-pattern="'.jpg, .png'" ngf-accept="'.jpg, .png'" ngf-max-size="20MB" ngf-min-height="100" ngf-resize="{width: 100, height: 100}">Select foto</div>
  17. <button type="submit" class="btn-form-comment btn btn-light">Comment</button>
  18. </div>
  19. </form>
  20. <div ng-repeat="comment in mainComments track by $index">
  21. <div ng-show="!comment.isEditMod" class="main-comments">
  22. <img ngf-thumbnail="comment.foto || './app/img/nofoto.jpg'">
  23. <div class="comment-form">
  24. <div class="float-right">
  25. <button class="btn btn-info btn-sm" ng-click="editMainComment(comment.id)">Edit</button>
  26. <button class="btn btn-danger btn-sm" ng-click="deleteMainComment(comment.id)">Delete</button>
  27. </div>
  28. <h2>{{comment.authorName}}</h2>
  29. <span class="block">{{comment.commentText}}</span>
  30. <button class="btn btn-warning btn-sm" ng-click="reply(comment.id)">Reply</button>
  31. <ng-include src="'./app/template/reply.template.html'" ng-show="comment.isReplyMod"></ng-include>
  32. </div>
  33. </div>
  34. <ng-include src="'./app/template/editComment.template.html'" ng-show="comment.isEditMod"></ng-include>
  35. <div class="second-comments" style="padding-left: 50px" ng-repeat="secondComment in comment.secondComments">
  36. <div ng-show="!secondComment.isEditMod">
  37. <img ngf-thumbnail="comment.foto || './app/img/nofoto.jpg'">
  38. <div class="comment-form">
  39. <div class="float-right">
  40. <button class="btn btn-info btn-sm" ng-click="editSecondComment(comment.id, secondComment.id)">Edit</button>
  41. <button class="btn btn-danger btn-sm" ng-click="deleteSecondComment(comment.id, secondComment.id)">Delete</button>
  42. </div>
  43. <h2>{{secondComment.authorName}}</h2>
  44. <span class="block">{{secondComment.commentText}}</span>
  45. </div>
  46. </div>
  47. <ng-include src="'./app/template/editSecondComment.template.html'" ng-show="secondComment.isEditMod"></ng-include>
  48. </div>
  49. </div>
  50. </div>
  51. <script type="text/javascript" src="./node_modules/angular/angular.js"></script>
  52. <script src="./node_modules/ng-file-upload/dist/ng-file-upload-shim.min.js"></script>
  53. <script src="./node_modules/ng-file-upload/dist/ng-file-upload.min.js"></script>
  54. <script type="text/javascript" src="./app/app.module.js"></script>
  55. <script type="text/javascript" src="./app/constans/webApi.com.js"></script>
  56. <script type="text/javascript" src="./app/services/comment.factory.js"></script>
  57. <script type="text/javascript" src="./app/controller/form.controller.js"></script>
  58. <script type="text/javascript" src="./app/controller/edit.controller.js"></script>
  59. <script type="text/javascript" src="./app/controller/editSecond.controller.js"></script>
  60. <script type="text/javascript" src="./app/controller/reply.controller.js"></script>
  61. </body>
  62. </html>