locations.html 7.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217
  1. {% load static %}
  2. {% load crispy_forms_tags %}
  3. <html lang="en">
  4. <head>
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  7. <meta name="description" content="">
  8. <meta name="author" content="">
  9. <title>SignatureCare Review Portal</title>
  10. <link rel="canonical" href="https://getbootstrap.com/docs/4.0/examples/dashboard/">
  11. <!-- Bootstrap core CSS -->
  12. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  13. <!-- Custom styles for this template -->
  14. <link rel="stylesheet" type="text/css" href="{% static 'user-dashboard.css' %}">
  15. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  16. <style>
  17. a:link {
  18. text-decoration: none;
  19. color: #050608;
  20. }
  21. a:visited {
  22. text-decoration: none;
  23. color: #013568;
  24. }
  25. a:hover {
  26. text-decoration: none;
  27. color: #51585e;
  28. }
  29. a:active {
  30. text-decoration: none;
  31. color: #272727;
  32. }
  33. </style>
  34. </head>
  35. <body>
  36. <nav class="navbar navbar-dark bg-dark">
  37. <div class="container">
  38. <ul class="navbar-nav px-3">
  39. <li class="nav-item text-nowrap">
  40. <a class="nav-link" href="{% url 'location-list' %}" style="color: white; font-size:20px">SignatureCare Review Portal</a>
  41. </li>
  42. </ul>
  43. <ul class="navbar-nav px-3">
  44. <!-- <li class="nav-item text-nowrap">
  45. <button style="background: center; border-color: dimgrey; padding: 7px;" type="button" class="nav-link btn btn-primary" data-toggle="modal" data-target="#fileUploadModal">Import staff</button>
  46. </li>-->
  47. <li class="nav-item text-nowrap">
  48. <a class="nav-link" href="{% url 'review-analysis-all-platform' %}">Review summary</a>
  49. </li>
  50. </ul>
  51. <ul class="navbar-nav px-3">
  52. <li class="nav-item text-nowrap">
  53. <a class="nav-link" href="{% url 'logout' %}">Sign out</a>
  54. </li>
  55. </ul>
  56. </div>
  57. </nav>
  58. {% if messages %}
  59. {% for message in messages %}
  60. <div class="alert alert-{{ message.tags }} container">
  61. {{ message }}
  62. </div>
  63. {% endfor %}
  64. {% endif %}
  65. <div class="container">
  66. <div class="row">
  67. {% for loc in all_locations %}
  68. <div class="col-sm-4">
  69. <a href="{% url 'location-analytics-man' loc.location_id %}">
  70. <div class="card mt-2 mb-2 graph-card-shadow">
  71. <div class="card-header">
  72. <span style="font-size: larger; font-family: sans-serif; font-weight: bold;">{{ loc.care_name }}</span>
  73. <span style="float: right;">
  74. <i class="fa fa-hospital-o mr-2" aria-hidden="true"></i>
  75. </span>
  76. </div>
  77. <div class="card-body">
  78. <canvas class="my-4" id="id_canvas_{{ loc.care_name }}" width="250" height="150"></canvas>
  79. </div>
  80. </div>
  81. </a>
  82. </div>
  83. {% endfor %}
  84. </div>
  85. <!-- Modal -->
  86. <div class="modal fade" id="fileUploadModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  87. <div class="modal-dialog">
  88. <div class="modal-content">
  89. <div class="modal-header">
  90. <h5 class="modal-title" id="exampleModalLabel">Import Excel File</h5>
  91. <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  92. <span aria-hidden="true">&times;</span>
  93. </button>
  94. </div>
  95. <div class="modal-body">
  96. <form method="POST" enctype="multipart/form-data">
  97. {% csrf_token %}
  98. <fieldset class="form-group">
  99. {{ file_upload_form|crispy }}
  100. </fieldset>
  101. <div class="form-group" style="display: grid;">
  102. <button class="btn btn-outline-info" type="submit">Submit</button>
  103. </div>
  104. </form>
  105. </div>
  106. </div>
  107. </div>
  108. </div>
  109. </div>
  110. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  111. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  112. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  113. <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js" integrity="sha256-TQq84xX6vkwR0Qs1qH5ADkP+MvH0W+9E7TdHJsoIQiM=" crossorigin="anonymous"></script>
  114. <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
  115. <script>
  116. var endpoint = 'graphs/all_location';
  117. params = {
  118. "days": 10
  119. }
  120. $.ajax({
  121. type: "get",
  122. url: endpoint,
  123. data: params,
  124. dataType: 'json',
  125. success: function(data) {
  126. review_counts = data.review_counts;
  127. for (let i = 0; i < review_counts.length; i++) {
  128. var ctx = document.getElementById("id_canvas_"+review_counts[i].name);
  129. var myBarChart = new Chart(ctx, {
  130. type: 'bar',
  131. data: {
  132. labels: data.labels,
  133. datasets: [
  134. {
  135. label: 'Positive',
  136. data: review_counts[i].positive,
  137. borderColor: 'rgb(52, 128, 0 )',
  138. backgroundColor: 'rgb(52, 128, 0 )',
  139. borderWidth: 1,
  140. fill: false
  141. },
  142. {
  143. label: 'Negative',
  144. data: review_counts[i].negative,
  145. borderColor: 'rgb(200, 0, 21)',
  146. backgroundColor: 'rgb(200, 0, 21)',
  147. borderWidth: 1,
  148. fill: false
  149. }]
  150. },
  151. options: {
  152. legend: {
  153. display: false,
  154. },
  155. scales: {
  156. yAxes: [{
  157. display: true,
  158. scaleLabel: {
  159. display: true,
  160. fontSize: 12,
  161. fontStyle: 'italic',
  162. labelString: 'Review count'
  163. },
  164. ticks: {
  165. beginAtZero: true,
  166. stepSize: 1,
  167. }
  168. }],
  169. xAxes: [{
  170. display: true,
  171. scaleLabel: {
  172. display: false,
  173. fontSize: 16,
  174. fontStyle: 'italic',
  175. labelString: 'Day of the month'
  176. },
  177. gridLines: {
  178. drawOnChartArea:false
  179. }
  180. }]
  181. },
  182. title: {
  183. display: false,
  184. fontSize: 16,
  185. text: "Review of this month in all platforms."
  186. }
  187. }
  188. });
  189. }
  190. },
  191. error: function(error_data) {
  192. console.log(error_data);
  193. }
  194. });
  195. </script>
  196. <nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap mt-4">
  197. <span style="color: white;">&copy;2020 SignatureCare Review Portal. - Developed by Byte Trek Ltd. </span>
  198. </nav>
  199. </body>
  200. </html>