locations.html 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214
  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. </ul>
  48. <ul class="navbar-nav px-3">
  49. <li class="nav-item text-nowrap">
  50. <a class="nav-link" href="{% url 'logout' %}">Sign out</a>
  51. </li>
  52. </ul>
  53. </div>
  54. </nav>
  55. {% if messages %}
  56. {% for message in messages %}
  57. <div class="alert alert-{{ message.tags }} container">
  58. {{ message }}
  59. </div>
  60. {% endfor %}
  61. {% endif %}
  62. <div class="container">
  63. <div class="row">
  64. {% for loc in all_locations %}
  65. <div class="col-sm-4">
  66. <a href="{% url 'location-analytics-man' loc.location_id %}">
  67. <div class="card mt-2 mb-2 graph-card-shadow">
  68. <div class="card-header">
  69. <span style="font-size: larger; font-family: sans-serif; font-weight: bold;">{{ loc.care_name }}</span>
  70. <span style="float: right;">
  71. <i class="fa fa-hospital-o mr-2" aria-hidden="true"></i>
  72. </span>
  73. </div>
  74. <div class="card-body">
  75. <canvas class="my-4" id="id_canvas_{{ loc.care_name }}" width="250" height="150"></canvas>
  76. </div>
  77. </div>
  78. </a>
  79. </div>
  80. {% endfor %}
  81. </div>
  82. <!-- Modal -->
  83. <div class="modal fade" id="fileUploadModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  84. <div class="modal-dialog">
  85. <div class="modal-content">
  86. <div class="modal-header">
  87. <h5 class="modal-title" id="exampleModalLabel">Import Excel File</h5>
  88. <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  89. <span aria-hidden="true">&times;</span>
  90. </button>
  91. </div>
  92. <div class="modal-body">
  93. <form method="POST" enctype="multipart/form-data">
  94. {% csrf_token %}
  95. <fieldset class="form-group">
  96. {{ file_upload_form|crispy }}
  97. </fieldset>
  98. <div class="form-group" style="display: grid;">
  99. <button class="btn btn-outline-info" type="submit">Submit</button>
  100. </div>
  101. </form>
  102. </div>
  103. </div>
  104. </div>
  105. </div>
  106. </div>
  107. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  108. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  109. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  110. <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>
  111. <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
  112. <script>
  113. var endpoint = 'graphs/all_location';
  114. params = {
  115. "days": 10
  116. }
  117. $.ajax({
  118. type: "get",
  119. url: endpoint,
  120. data: params,
  121. dataType: 'json',
  122. success: function(data) {
  123. review_counts = data.review_counts;
  124. for (let i = 0; i < review_counts.length; i++) {
  125. var ctx = document.getElementById("id_canvas_"+review_counts[i].name);
  126. var myBarChart = new Chart(ctx, {
  127. type: 'bar',
  128. data: {
  129. labels: data.labels,
  130. datasets: [
  131. {
  132. label: 'Positive',
  133. data: review_counts[i].positive,
  134. borderColor: 'rgb(52, 128, 0 )',
  135. backgroundColor: 'rgb(52, 128, 0 )',
  136. borderWidth: 1,
  137. fill: false
  138. },
  139. {
  140. label: 'Negative',
  141. data: review_counts[i].negative,
  142. borderColor: 'rgb(200, 0, 21)',
  143. backgroundColor: 'rgb(200, 0, 21)',
  144. borderWidth: 1,
  145. fill: false
  146. }]
  147. },
  148. options: {
  149. legend: {
  150. display: false,
  151. },
  152. scales: {
  153. yAxes: [{
  154. display: true,
  155. scaleLabel: {
  156. display: true,
  157. fontSize: 12,
  158. fontStyle: 'italic',
  159. labelString: 'Review count'
  160. },
  161. ticks: {
  162. beginAtZero: true,
  163. stepSize: 1,
  164. }
  165. }],
  166. xAxes: [{
  167. display: true,
  168. scaleLabel: {
  169. display: false,
  170. fontSize: 16,
  171. fontStyle: 'italic',
  172. labelString: 'Day of the month'
  173. },
  174. gridLines: {
  175. drawOnChartArea:false
  176. }
  177. }]
  178. },
  179. title: {
  180. display: false,
  181. fontSize: 16,
  182. text: "Review of this month in all platforms."
  183. }
  184. }
  185. });
  186. }
  187. },
  188. error: function(error_data) {
  189. console.log(error_data);
  190. }
  191. });
  192. </script>
  193. <nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap mt-4">
  194. <span style="color: white;">&copy;2020 SignatureCare Review Portal. - Developed by Byte Trek Ltd. </span>
  195. </nav>
  196. </body>
  197. </html>