You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

1690 lines
67 KiB

3 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
  1. <!DOCTYPE html>
  2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
  3. <head th:replace="~{fragments/modules/base/head :: head}">
  4. <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  5. <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
  6. </head>
  7. <style>
  8. .chart-container {
  9. display: flex;
  10. justify-content: center;
  11. align-items: center;
  12. height: 100%;
  13. box-sizing:border-box; /* Optionally set the height to fill the container */
  14. }
  15. </style>
  16. <body>
  17. <link rel="stylesheet" href="/assets/node_modules/fullcalendar/dist/fullcalendar.min.css">
  18. <!--[if lt IE 8]>
  19. <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
  20. <![endif]-->
  21. <div class="wrapper">
  22. <!-- header top menu Start -->
  23. <header th:replace="~{fragments/modules/base/header :: header}"></header>
  24. <!-- header top menu end -->
  25. <div class="page-wrap">
  26. <!--=============== Left Menu side Start ================-->
  27. <div th:replace="~{fragments/modules/base/menu :: menu}"></div>
  28. <!--=============== Left side End ================-->
  29. <div class="main-content">
  30. <div class="container-fluid">
  31. <div class="page-header mb-2">
  32. <div class="row align-items-end">
  33. <div class="col-lg-8">
  34. <div class="page-header-title">
  35. <i class="ik ik-bar-chart-2 bg-blue"></i>
  36. <div class="d-inline">
  37. <h5>PGR Report</h5>
  38. <span>Public Grievance Redressal Complaint Report</span>
  39. </div>
  40. </div>
  41. </div>
  42. <div class="col-lg-4">
  43. <nav class="breadcrumb-container" aria-label="breadcrumb">
  44. <ol class="breadcrumb">
  45. <li class="breadcrumb-item"><a href="index"><i
  46. class="ik ik-home"></i></a></li>
  47. <li class="breadcrumb-item active" aria-current="page">Dashboard</li>
  48. </ol>
  49. </nav>
  50. </div>
  51. </div>
  52. </div>
  53. <h4 class="h4 text-right text-mute" style="font-size: 12px;">
  54. Auto refresh in <font id="refresh-countdown">00</font> seconds
  55. </h4>
  56. <br>
  57. <!--
  58. <div class="row">
  59. analytic card start - First Tile Start
  60. <div class="col-xl-3 col-md-6">
  61. <a href="javascript:void(0)">
  62. <div class="card social-card">
  63. <div class="card-body text-center">
  64. <h2 class="text-facebook mb-20"><i class="ik ik-layers"></i></h2>
  65. <h3 class="text-facebook fw-700" id="totalcomplaintcount">0</h3>
  66. <p>Total Complaints</p>
  67. <p class="mb-0 mt-15">View Total Complaints <i class="fas fa-arrow-right ml-5 f-10 text-facebook"></i></p>
  68. </div>
  69. </div>
  70. </a>
  71. </div>
  72. <div class="col-xl-3 col-md-6">
  73. <a href="javascript:void(0)">
  74. <div class="card social-card">
  75. <div class="card-body text-center">
  76. <h2 class="text-twitter mb-20"><i class="fas fa-comments"></i></h2>
  77. <h3 class="text-twitter fw-700" id="completedcomplaintcount">0</h3>
  78. <p>Completed Complaints</p>
  79. <p class="mb-0 mt-15">Completed Complaints<i class="fas fa-arrow-right ml-5 f-10 text-twitter"></i></p>
  80. </div>
  81. </div>
  82. </a>
  83. </div>
  84. <div class="col-xl-3 col-md-6">
  85. <a href="javascript:void(0)">
  86. <div class="card social-card">
  87. <div class="card-body text-center">
  88. <h2 class="text-green mb-20"><i class="far fa-smile-beam"></i></h2>
  89. <h3 class="text-green fw-700" id="pendingcomplaintcount">0</h3>
  90. <p>Pending Complaints</p>
  91. <p class="mb-0 mt-15">View Pending Complaints <i class="fas fa-arrow-right ml-5 f-10 text-green"></i></p>
  92. </div>
  93. </div>
  94. </a>
  95. </div>
  96. <div class="col-xl-3 col-md-6">
  97. <a href="javascript:void(0)">
  98. <div class="card social-card">
  99. <div class="card-body text-center">
  100. <h2 class="text-red mb-20"><i class="far fa-frown"></i></h2>
  101. <h3 class="text-red fw-700" id="reopencomplaintcount">0</h3>
  102. <p>Reopen Complaints</p>
  103. <p class="mb-0 mt-15">View Reopen Complaints<i class="fas fa-arrow-right ml-5 f-10 text-red"></i></p>
  104. </div>
  105. </div>
  106. </a>
  107. </div> -->
  108. <form class="" action="" onsubmit="getByZone()">
  109. <div class="row">
  110. <label for="deptName">Select Age Analysis Department:</label> <select
  111. class="form-control text-center" name="DEPT_NAME" id="zone">
  112. <option value="0">All Zone</option>
  113. <option value="A-Accounts Central Cell"
  114. th:selected="${DEPT_NAME=='A-Accounts Central Cell'}">A-Accounts
  115. Central Cell</option>
  116. <option value="B-Buildings"
  117. th:selected="${DEPT_NAME=='B-Buildings'}">B-Buildings</option>
  118. <option value="BR-Bus Route Roads"
  119. th:selected="${DEPT_NAME=='BR-Bus Route Roads'}">BR-Bus
  120. Route Roads</option>
  121. <option value="C-Council"
  122. th:selected="${DEPT_NAME=='C-Council'}">C-Council</option>
  123. <option value="D-Storm Water Drains"
  124. th:selected="${DEPT_NAME=='D-Storm Water Drains'}">D-Storm
  125. Water Drains</option>
  126. <option value="E-Education"
  127. th:selected="${DEPT_NAME=='E-Education'}">E-Education</option>
  128. <option value="EL-ELECTION"
  129. th:selected="${DEPT_NAME=='EL-ELECTION'}">EL-ELECTION</option>
  130. <option value="G-General"
  131. th:selected="${DEPT_NAME=='G-General'}">G-General</option>
  132. <option value="H-Health" th:selected="${DEPT_NAME=='H-Health'}">H-Health</option>
  133. <option value="HD-District Family Welfare"
  134. th:selected="${DEPT_NAME=='HD-District Family Welfare'}">HD-District
  135. Family Welfare</option>
  136. <option value="J-Bridges"
  137. th:selected="${DEPT_NAME=='J-Bridges'}">J-Bridges</option>
  138. <option
  139. value="JP-Chief Engineer Office (Buildings, Bridges and Planning)"
  140. th:selected="${DEPT_NAME=='JP-Chief Engineer Office (Buildings, Bridges and Planning)'}">JP-Chief
  141. Engineer Office (Buildings, Bridges and Planning)</option>
  142. <option value="L-Electrical"
  143. th:selected="${DEPT_NAME=='L-Electrical'}">L-Electrical</option>
  144. <option value="M-Mechanical"
  145. th:selected="${DEPT_NAME=='M-Mechanical'}">M-Mechanical</option>
  146. <option value="NA-THIRUVOTTIYUR"
  147. th:selected="${DEPT_NAME=='NA-THIRUVOTTIYUR'}">NA-THIRUVOTTIYUR</option>
  148. <option value="NB-MANALI"
  149. th:selected="${DEPT_NAME=='NB-MANALI'}">NB-MANALI</option>
  150. <option value="NC-MADHAVARAM"
  151. th:selected="${DEPT_NAME=='NC-MADHAVARAM'}">NC-MADHAVARAM</option>
  152. <option value="ND-TONDIARPET"
  153. th:selected="${DEPT_NAME=='ND-TONDIARPET'}">ND-TONDIARPET</option>
  154. <option value="NE-ROYAPURAM"
  155. th:selected="${DEPT_NAME=='NE-ROYAPURAM'}">NE-ROYAPURAM</option>
  156. <option value="NF-THIRU-VI-KA NAGAR"
  157. th:selected="${DEPT_NAME=='NF-THIRU-VI-KA NAGAR'}">NF-THIRU-VI-KA
  158. NAGAR</option>
  159. <option value="NG-AMBATTUR"
  160. th:selected="${DEPT_NAME=='NG-AMBATTUR'}">NG-AMBATTUR</option>
  161. <option value="NH-ANNA NAGAR"
  162. th:selected="${DEPT_NAME=='NH-ANNA NAGAR'}">NH-ANNA
  163. NAGAR</option>
  164. <option value="NJ-TEYNAMPET"
  165. th:selected="${DEPT_NAME=='NJ-TEYNAMPET'}">NJ-TEYNAMPET</option>
  166. <option value="NK-KODAMBAKKAM"
  167. th:selected="${DEPT_NAME=='NK-KODAMBAKKAM'}">NK-KODAMBAKKAM</option>
  168. <option value="NL-VALASARAVAKKAM"
  169. th:selected="${DEPT_NAME=='NL-VALASARAVAKKAM'}">NL-VALASARAVAKKAM</option>
  170. <option value="NM-ALANDUR"
  171. th:selected="${DEPT_NAME=='NM-ALANDUR'}">NM-ALANDUR</option>
  172. <option value="NN-ADYAR" th:selected="${DEPT_NAME=='NN-ADYAR'}">NN-ADYAR</option>
  173. <option value="NP-PERUNGUDI"
  174. th:selected="${DEPT_NAME=='NP-PERUNGUDI'}">NP-PERUNGUDI</option>
  175. <option value="NQ-SHOZHINGANALLUR"
  176. th:selected="${DEPT_NAME=='NQ-SHOZHINGANALLUR'}">NQ-SHOZHINGANALLUR</option>
  177. <option value="P-Parks and Playfields"
  178. th:selected="${DEPT_NAME=='P-Parks and Playfields'}">P-Parks
  179. and Playfields</option>
  180. <option value="Q-Solid Waste Management"
  181. th:selected="${DEPT_NAME=='Q-Solid Waste Management'}">Q-Solid
  182. Waste Management</option>
  183. <option value="R-Revenue"
  184. th:selected="${DEPT_NAME=='R-Revenue'}">R-Revenue</option>
  185. <option value="RC-Regional office - Central"
  186. th:selected="${DEPT_NAME=='RC-Regional office - Central'}">RC-Regional
  187. office - Central</option>
  188. <option value="RN-Regional office - North"
  189. th:selected="${DEPT_NAME=='RN-Regional office - North'}">RN-Regional
  190. office - North</option>
  191. <option value="RS-Regional office - South<"
  192. th:selected="${DEPT_NAME=='RS-Regional office - South<'}">RS-Regional
  193. office - South</option>
  194. <option value="S-Chief Engineer Office (SWD, BRR, SP)"
  195. th:selected="${DEPT_NAME=='S-Chief Engineer Office (SWD, BRR, SP)'}">S-Chief
  196. Engineer Office (SWD, BRR, SP)</option>
  197. <option value="SP-SPECIAL PROJECTS"
  198. th:selected="${DEPT_NAME=='SP-SPECIAL PROJECTS'}">SP-SPECIAL
  199. PROJECTS</option>
  200. <option value="T-Taxation Appeals Committee"
  201. th:selected="${DEPT_NAME=='T-Taxation Appeals Committee'}">T-Taxation
  202. Appeals Committee</option>
  203. <option value="X-Chief Engineer Office"
  204. th:selected="${DEPT_NAME=='X-Chief Engineer Office'}">X-Chief
  205. Engineer Office</option>
  206. <option value="V-Land and Estate"
  207. th:selected="${DEPT_NAME=='V-Land and Estate'}">V-Land
  208. and Estate</option>
  209. <option value="W-Works" th:selected="${DEPT_NAME=='W-Works'}">W-Works</option>
  210. <option value="Y-Legal Cell"
  211. th:selected="${DEPT_NAME=='Y-Legal Cell'}">Y-Legal
  212. Cell</option>
  213. <option value="Z-Elementary Education"
  214. th:selected="${DEPT_NAME=='Z-Elementary Education'}">Z-Elementary
  215. Education</option>
  216. </select>
  217. <!-- <div style="display: flex; justify-content: space-between; align-items: center; margin-top:11px;">
  218. <button type="submit" class="btn btn-sm btn-primary">Submit</button>
  219. </div> -->
  220. </div>
  221. <div class="row">
  222. <label for="deptName">Select Zonewise Report Department:</label> <select
  223. class="form-control text-center" name="DEPTID" id="zonewithreopenbar">
  224. <option value="0">All Zone</option>
  225. <option value="32"
  226. th:selected="${DEPTID=='32'}">NA-THIRUVOTTIYUR</option>
  227. <option value="33"
  228. th:selected="${DEPTID=='33'}">NB-MANALI</option>
  229. <option value="34"
  230. th:selected="${DEPTID=='34'}">NC-MADHAVARAM</option>
  231. <option value="35"
  232. th:selected="${DEPTID=='35'}">ND-TONDIARPET</option>
  233. <option value="36"
  234. th:selected="${DEPTID=='36'}">NE-ROYAPURAM</option>
  235. <option value="37"
  236. th:selected="${DEPTID=='37'}">NF-THIRU-VI-KA NAGAR</option>
  237. <option value="38"
  238. th:selected="${DEPTID=='38'}">NG-AMBATTUR</option>
  239. <option value="39"
  240. th:selected="${DEPTID=='39'}">NH-ANNA NAGAR</option>
  241. <option value="40"
  242. th:selected="${DEPTID=='40'}">NJ-TEYNAMPET</option>
  243. <option value="41"
  244. th:selected="${DEPTID=='41'}">NK-KODAMBAKKAM</option>
  245. <option value="42"
  246. th:selected="${DEPTID=='42'}">NL-VALASARAVAKKAM</option>
  247. <option value="43"
  248. th:selected="${DEPTID=='43'}">NM-ALANDUR</option>
  249. <option value="44"
  250. th:selected="${DEPTID=='44'}">NN-ADYAR</option>
  251. <option value="45"
  252. th:selected="${DEPTID=='45'}">NP-PERUNGUDI</option>
  253. <option value="46"
  254. th:selected="${DEPT_NAME=='46'}">NQ-SHOZHINGANALLUR</option>
  255. </select>
  256. <!-- <div style="display: flex; justify-content: space-between; align-items: center; margin-top:11px;">
  257. <button type="submit" class="btn btn-sm btn-primary">Submit</button>
  258. </div> -->
  259. </div>
  260. <div style="display: flex; justify-content: space-between; align-items: center; margin-top:11px;">
  261. <button type="submit" class="btn btn-sm btn-primary">Submit</button>
  262. </div>
  263. </form>
  264. <br>
  265. <!-- <div class="row"
  266. style="padding: 10px; margin-top: 0px; display: flex; flex-wrap: wrap; justify-content: space-around;">
  267. <form class="" action="" onsubmit="getByZone()"> -->
  268. <!-- <div class="row">
  269. <label for="deptName">Select Department:</label> <select
  270. class="form-control text-center" name="DEPT_NAME" id="zone">
  271. <option value="0">All Zone</option>
  272. <option value="A-Accounts Central Cell"
  273. th:selected="${DEPT_NAME=='A-Accounts Central Cell'}">A-Accounts
  274. Central Cell</option>
  275. <option value="B-Buildings"
  276. th:selected="${DEPT_NAME=='B-Buildings'}">B-Buildings</option>
  277. <option value="BR-Bus Route Roads"
  278. th:selected="${DEPT_NAME=='BR-Bus Route Roads'}">BR-Bus
  279. Route Roads</option>
  280. <option value="C-Council"
  281. th:selected="${DEPT_NAME=='C-Council'}">C-Council</option>
  282. <option value="D-Storm Water Drains"
  283. th:selected="${DEPT_NAME=='D-Storm Water Drains'}">D-Storm
  284. Water Drains</option>
  285. <option value="E-Education"
  286. th:selected="${DEPT_NAME=='E-Education'}">E-Education</option>
  287. <option value="EL-ELECTION"
  288. th:selected="${DEPT_NAME=='EL-ELECTION'}">EL-ELECTION</option>
  289. <option value="G-General"
  290. th:selected="${DEPT_NAME=='G-General'}">G-General</option>
  291. <option value="H-Health" th:selected="${DEPT_NAME=='H-Health'}">H-Health</option>
  292. <option value="HD-District Family Welfare"
  293. th:selected="${DEPT_NAME=='HD-District Family Welfare'}">HD-District
  294. Family Welfare</option>
  295. <option value="J-Bridges"
  296. th:selected="${DEPT_NAME=='J-Bridges'}">J-Bridges</option>
  297. <option
  298. value="JP-Chief Engineer Office (Buildings, Bridges and Planning)"
  299. th:selected="${DEPT_NAME=='JP-Chief Engineer Office (Buildings, Bridges and Planning)'}">JP-Chief
  300. Engineer Office (Buildings, Bridges and Planning)</option>
  301. <option value="L-Electrical"
  302. th:selected="${DEPT_NAME=='L-Electrical'}">L-Electrical</option>
  303. <option value="M-Mechanical"
  304. th:selected="${DEPT_NAME=='M-Mechanical'}">M-Mechanical</option>
  305. <option value="NA-THIRUVOTTIYUR"
  306. th:selected="${DEPT_NAME=='NA-THIRUVOTTIYUR'}">NA-THIRUVOTTIYUR</option>
  307. <option value="NB-MANALI"
  308. th:selected="${DEPT_NAME=='NB-MANALI'}">NB-MANALI</option>
  309. <option value="NC-MADHAVARAM"
  310. th:selected="${DEPT_NAME=='NC-MADHAVARAM'}">NC-MADHAVARAM</option>
  311. <option value="ND-TONDIARPET"
  312. th:selected="${DEPT_NAME=='ND-TONDIARPET'}">ND-TONDIARPET</option>
  313. <option value="NE-ROYAPURAM"
  314. th:selected="${DEPT_NAME=='NE-ROYAPURAM'}">NE-ROYAPURAM</option>
  315. <option value="NF-THIRU-VI-KA NAGAR"
  316. th:selected="${DEPT_NAME=='NF-THIRU-VI-KA NAGAR'}">NF-THIRU-VI-KA
  317. NAGAR</option>
  318. <option value="NG-AMBATTUR"
  319. th:selected="${DEPT_NAME=='NG-AMBATTUR'}">NG-AMBATTUR</option>
  320. <option value="NH-ANNA NAGAR"
  321. th:selected="${DEPT_NAME=='NH-ANNA NAGAR'}">NH-ANNA
  322. NAGAR</option>
  323. <option value="NJ-TEYNAMPET"
  324. th:selected="${DEPT_NAME=='NJ-TEYNAMPET'}">NJ-TEYNAMPET</option>
  325. <option value="NK-KODAMBAKKAM"
  326. th:selected="${DEPT_NAME=='NK-KODAMBAKKAM'}">NK-KODAMBAKKAM</option>
  327. <option value="NL-VALASARAVAKKAM"
  328. th:selected="${DEPT_NAME=='NL-VALASARAVAKKAM'}">NL-VALASARAVAKKAM</option>
  329. <option value="NM-ALANDUR"
  330. th:selected="${DEPT_NAME=='NM-ALANDUR'}">NM-ALANDUR</option>
  331. <option value="NN-ADYAR" th:selected="${DEPT_NAME=='NN-ADYAR'}">NN-ADYAR</option>
  332. <option value="NP-PERUNGUDI"
  333. th:selected="${DEPT_NAME=='NP-PERUNGUDI'}">NP-PERUNGUDI</option>
  334. <option value="NQ-SHOZHINGANALLUR"
  335. th:selected="${DEPT_NAME=='NQ-SHOZHINGANALLUR'}">NQ-SHOZHINGANALLUR</option>
  336. <option value="P-Parks and Playfields"
  337. th:selected="${DEPT_NAME=='P-Parks and Playfields'}">P-Parks
  338. and Playfields</option>
  339. <option value="Q-Solid Waste Management"
  340. th:selected="${DEPT_NAME=='Q-Solid Waste Management'}">Q-Solid
  341. Waste Management</option>
  342. <option value="R-Revenue"
  343. th:selected="${DEPT_NAME=='R-Revenue'}">R-Revenue</option>
  344. <option value="RC-Regional office - Central"
  345. th:selected="${DEPT_NAME=='RC-Regional office - Central'}">RC-Regional
  346. office - Central</option>
  347. <option value="RN-Regional office - North"
  348. th:selected="${DEPT_NAME=='RN-Regional office - North'}">RN-Regional
  349. office - North</option>
  350. <option value="RS-Regional office - South<"
  351. th:selected="${DEPT_NAME=='RS-Regional office - South<'}">RS-Regional
  352. office - South</option>
  353. <option value="S-Chief Engineer Office (SWD, BRR, SP)"
  354. th:selected="${DEPT_NAME=='S-Chief Engineer Office (SWD, BRR, SP)'}">S-Chief
  355. Engineer Office (SWD, BRR, SP)</option>
  356. <option value="SP-SPECIAL PROJECTS"
  357. th:selected="${DEPT_NAME=='SP-SPECIAL PROJECTS'}">SP-SPECIAL
  358. PROJECTS</option>
  359. <option value="T-Taxation Appeals Committee"
  360. th:selected="${DEPT_NAME=='T-Taxation Appeals Committee'}">T-Taxation
  361. Appeals Committee</option>
  362. <option value="X-Chief Engineer Office"
  363. th:selected="${DEPT_NAME=='X-Chief Engineer Office'}">X-Chief
  364. Engineer Office</option>
  365. <option value="V-Land and Estate"
  366. th:selected="${DEPT_NAME=='V-Land and Estate'}">V-Land
  367. and Estate</option>
  368. <option value="W-Works" th:selected="${DEPT_NAME=='W-Works'}">W-Works</option>
  369. <option value="Y-Legal Cell"
  370. th:selected="${DEPT_NAME=='Y-Legal Cell'}">Y-Legal
  371. Cell</option>
  372. <option value="Z-Elementary Education"
  373. th:selected="${DEPT_NAME=='Z-Elementary Education'}">Z-Elementary
  374. Education</option>
  375. </select> <br>
  376. <div style="display: flex; justify-content: space-between; align-items: center; margin-top:11px;">
  377. <button type="submit" class="btn btn-sm btn-primary">Submit</button>
  378. </div>
  379. <button type="submit" class="btn btn-sm btn-primary">Submit</button>
  380. </div>
  381. </form> -->
  382. <div class="row"
  383. style="padding: 10px; margin-top: 0px; display: flex; flex-wrap: wrap; justify-content: space-around;">
  384. <div class="col-md-5">
  385. <div class="card-block">
  386. <div id="totalpiechart" ></div>
  387. <!-- <div class="card-body">
  388. </div> -->
  389. </div>
  390. </div>
  391. <div class="col-md-5">
  392. <div class="card-block">
  393. <div id="reopenpiechart"></div>
  394. <!-- <div class="card-body">
  395. </div> -->
  396. </div>
  397. </div>
  398. </div>
  399. <br>
  400. <!-- <form class="" action="" onsubmit="getByWROZone()">
  401. <div class="row">
  402. <label for="deptName">Select Department:</label> <select
  403. class="form-control text-center" name="DEPTID" id="zonewithreopenbar">
  404. <option value="0">All Zone</option>
  405. <option value="32"
  406. th:selected="${DEPTID=='32'}">NA-THIRUVOTTIYUR</option>
  407. <option value="33"
  408. th:selected="${DEPTID=='33'}">NB-MANALI</option>
  409. <option value="34"
  410. th:selected="${DEPTID=='34'}">NC-MADHAVARAM</option>
  411. <option value="35"
  412. th:selected="${DEPTID=='35'}">ND-TONDIARPET</option>
  413. <option value="36"
  414. th:selected="${DEPTID=='36'}">NE-ROYAPURAM</option>
  415. <option value="37"
  416. th:selected="${DEPTID=='37'}">NF-THIRU-VI-KA NAGAR</option>
  417. <option value="38"
  418. th:selected="${DEPTID=='38'}">NG-AMBATTUR</option>
  419. <option value="39"
  420. th:selected="${DEPTID=='39'}">NH-ANNA NAGAR</option>
  421. <option value="40"
  422. th:selected="${DEPTID=='40'}">NJ-TEYNAMPET</option>
  423. <option value="41"
  424. th:selected="${DEPTID=='41'}">NK-KODAMBAKKAM</option>
  425. <option value="42"
  426. th:selected="${DEPTID=='42'}">NL-VALASARAVAKKAM</option>
  427. <option value="43"
  428. th:selected="${DEPTID=='43'}">NM-ALANDUR</option>
  429. <option value="44"
  430. th:selected="${DEPTID=='44'}">NN-ADYAR</option>
  431. <option value="45"
  432. th:selected="${DEPTID=='45'}">NP-PERUNGUDI</option>
  433. <option value="46"
  434. th:selected="${DEPT_NAME=='46'}">NQ-SHOZHINGANALLUR</option>
  435. </select>
  436. <div style="display: flex; justify-content: space-between; align-items: center; margin-top:11px;">
  437. <button type="submit" class="btn btn-sm btn-primary">Submit</button>
  438. </div>
  439. </div>
  440. </form> -->
  441. </div>
  442. <!-- <div class="col-md-5" >
  443. <div class="card-block" >
  444. <div class="chart-container">
  445. <div id="reopenbarchart"></div>
  446. </div>
  447. </div>
  448. </div> -->
  449. <div class="col-md-12">
  450. <div class="card sale-card">
  451. <div class="card-header">
  452. <h3>ZoneWise Reports with Reopen </h3>
  453. </div>
  454. <div class="card-block">
  455. <div class="chart-container" >
  456. <div id="barchart"></div>
  457. </div>
  458. </div>
  459. </div>
  460. </div>
  461. <div class="col-md-12">
  462. <div class="card sale-card">
  463. <div class="card-header">
  464. <h3>ZoneWise Reports Without Reopen </h3>
  465. </div>
  466. <div class="card-block">
  467. <div class="chart-container" >
  468. <div id="reopenbarchart"></div>
  469. </div>
  470. </div>
  471. </div>
  472. </div>
  473. <!-- <div class="col-md-12">
  474. <div class="card sale-card">
  475. <div class="card-header">
  476. <h3>ZoneWise Reports </h3>
  477. </div>
  478. <div class="card-block">
  479. <div class="chart-container" >
  480. <div id="allbarchart"></div>
  481. </div>
  482. </div>
  483. </div>
  484. </div> -->
  485. <!-- <div class="col-md-5">
  486. <div class="card">
  487. <div class="card-body">
  488. <div id="totalbarchart"></div>
  489. </div>
  490. </div>
  491. </div> -->
  492. <!-- <div class="row"
  493. style="padding: 5px; margin-top: 0px; display: relative; flex-wrap: wrap; justify-content: space-around;">
  494. <div class="col-md-5">
  495. <div class="card">
  496. <div class="card-body">
  497. <div id="totalbarchart"></div>
  498. </div>
  499. </div>
  500. </div>
  501. <div class="col-md-5">
  502. <div class="card">
  503. <div id="reopenbarchart"></div>
  504. <div class="card-body">
  505. </div>
  506. </div>
  507. </div> -->
  508. <br>
  509. <!-- <div class="row">
  510. <canvas id="myChart" style="width:100%;max-width:600px">
  511. </canvas>
  512. <h3>hi</h3>
  513. </div> -->
  514. <!-- First Tile End -->
  515. <div class="col-md-12">
  516. <div class="card sale-card">
  517. <div class="card-header">
  518. <h3>ZoneWise Reports </h3>
  519. </div>
  520. <div class="card-block">
  521. <div id="deal-analytic-chart" class="chart-shadow" style="height:300px"></div>
  522. </div>
  523. </div>
  524. </div>
  525. <div class="col-md-12">
  526. <div class="card">
  527. <div class="card-header">
  528. <h3>Calander</h3>
  529. </div>
  530. <div class="card-block">
  531. <div id="calendar"></div>
  532. </div>
  533. </div>
  534. </div>
  535. <div class="col-md-12">
  536. <div class="card">
  537. <div class="card-header">
  538. <h3>Page Title</h3>
  539. </div>
  540. <div class="card-block">
  541. </div>
  542. </div>
  543. </div>
  544. </div>
  545. </div>
  546. </div>
  547. <footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
  548. </div>
  549. <!-- Model Box -->
  550. <div class="modal" id="editEvent" tabindex="-1" role="dialog" aria-labelledby="editEventLabel" aria-hidden="true">
  551. <div class="modal-dialog" role="document">
  552. <form class="editEventForm">
  553. <div class="modal-content">
  554. <div class="modal-header">
  555. <h5 class="modal-title" id="editEventLabel">Edit Event</h5>
  556. <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  557. </div>
  558. <div class="modal-body">
  559. <div class="form-group">
  560. <label for="editEname">Event Title</label>
  561. <input type="text" class="form-control" id="editEname" name="editEname" placeholder="Please enter event title">
  562. </div>
  563. <div class="form-group">
  564. <label for="editStarts">Start</label>
  565. <input type="text" class="form-control datetimepicker-input" id="editStarts" name="editStarts" data-toggle="datetimepicker" data-target="#editStarts">
  566. </div>
  567. </div>
  568. <div class="modal-footer">
  569. <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
  570. <button class="btn btn-danger delete-event" type="submit">Delete</button>
  571. <button class="btn btn-success save-event" type="submit">Save</button>
  572. </div>
  573. </div>
  574. </form>
  575. </div>
  576. </div>
  577. <div class="modal" id="addEvent" tabindex="-1" role="dialog" aria-labelledby="addEventLabel" aria-hidden="true">
  578. <div class="modal-dialog" role="document">
  579. <div class="modal-content">
  580. <div class="modal-header">
  581. <h5 class="modal-title" id="addEventLabel">Add New Event</h5>
  582. <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  583. </div>
  584. <div class="modal-body">
  585. <form id="addEventForm">
  586. <div class="form-group">
  587. <label for="eventName">Event Title</label>
  588. <input type="text" class="form-control" id="eventName" name="eventName" placeholder="Please enter event title">
  589. </div>
  590. <div class="form-group">
  591. <label for="eventStarts">Starts</label>
  592. <input type="text" class="form-control datetimepicker-input" id="eventStarts" name="eventStarts" data-toggle="datetimepicker" data-target="#eventStarts">
  593. </div>
  594. <div class="form-group mb-0" id="addColor">
  595. <label for="colors">Choose Color</label>
  596. <ul class="color-selector">
  597. <li class="bg-aqua">
  598. <input type="radio" data-color="bg-aqua" checked name="colorChosen" id="addColorAqua">
  599. <label for="addColorAqua"></label>
  600. </li>
  601. <li class="bg-blue">
  602. <input type="radio" data-color="bg-blue" name="colorChosen" id="addColorBlue">
  603. <label for="addColorBlue"></label>
  604. </li>
  605. <li class="bg-light-blue">
  606. <input type="radio" data-color="bg-light-blue" name="colorChosen" id="addColorLightblue">
  607. <label for="addColorLightblue"></label>
  608. </li>
  609. <li class="bg-teal">
  610. <input type="radio" data-color="bg-teal" name="colorChosen" id="addColorTeal">
  611. <label for="addColorTeal"></label>
  612. </li>
  613. <li class="bg-yellow">
  614. <input type="radio" data-color="bg-yellow" name="colorChosen" id="addColorYellow">
  615. <label for="addColorYellow"></label>
  616. </li>
  617. <li class="bg-orange">
  618. <input type="radio" data-color="bg-orange" name="colorChosen" id="addColorOrange">
  619. <label for="addColorOrange"></label>
  620. </li>
  621. <li class="bg-green">
  622. <input type="radio" data-color="bg-green" name="colorChosen" id="addColorGreen">
  623. <label for="addColorGreen"></label>
  624. </li>
  625. <li class="bg-lime">
  626. <input type="radio" data-color="bg-lime" name="colorChosen" id="addColorLime">
  627. <label for="addColorLime"></label>
  628. </li>
  629. <li class="bg-red">
  630. <input type="radio" data-color="bg-red" name="colorChosen" id="addColorRed">
  631. <label for="addColorRed"></label>
  632. </li>
  633. <li class="bg-purple">
  634. <input type="radio" data-color="bg-purple" name="colorChosen" id="addColorPurple">
  635. <label for="addColorPurple"></label>
  636. </li>
  637. <li class="bg-fuchsia">
  638. <input type="radio" data-color="bg-fuchsia" name="colorChosen" id="addColorFuchsia">
  639. <label for="addColorFuchsia"></label>
  640. </li>
  641. <li class="bg-muted">
  642. <input type="radio" data-color="bg-muted" name="colorChosen" id="addColorMuted">
  643. <label for="addColorMuted"></label>
  644. </li>
  645. <li class="bg-navy">
  646. <input type="radio" data-color="bg-navy" name="colorChosen" id="addColorNavy">
  647. <label for="addColorNavy"></label>
  648. </li>
  649. </ul>
  650. </div>
  651. </form>
  652. </div>
  653. <div class="modal-footer">
  654. <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
  655. <button type="button" class="btn btn-success save-event">Save</button>
  656. <button type="button" class="btn btn-danger delete-event" data-dismiss="modal">Delete</button>
  657. </div>
  658. </div>
  659. </div>
  660. <div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div>
  661. <script th:replace="~{fragments/modules/base/script :: script}"></script>
  662. <script src="/assets/node_modules/amcharts3/amcharts/amcharts.js"></script>
  663. <script src="/assets/node_modules/amcharts3/amcharts/serial.js"></script>
  664. <script src="/assets/node_modules/amcharts3/amcharts/themes/light.js"></script>
  665. <script src="/assets/node_modules/fullcalendar/dist/fullcalendar.min.js"></script>
  666. <script src="/assets/node_modules/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.min.js"></script>
  667. <script>
  668. function getByZone(){
  669. alert("Wait for response..")
  670. let DEPT_NAME = document.getElementById("zone").value;
  671. let DEPTID = document.getElementById("zonewithreopenbar").value;
  672. window.location.href='/dashboard?zone='+DEPT_NAME +'&zonewithreopenbar='+DEPTID;
  673. }
  674. /* function getByWROZone(){
  675. alert("Wait for zonewreopen response..")
  676. let DEPTID = document.getElementById("zonewithreopenbar").value;
  677. window.location.href='/dashboard?zonewithreopenbar='+DEPTID;
  678. } */
  679. /* function getByZone(){
  680. var zone= $("#zone").val()
  681. if(zone=="0"){
  682. window.location.href="/admin/home";
  683. return false;
  684. }
  685. $.ajax({
  686. type: "GET",
  687. url: '/api/dashboard',
  688. data: {
  689. 'zone':zone
  690. },
  691. success: function(x) {
  692. getPieChartByZone(x);
  693. document.getElementById("licIssuedHide").style.display = "none";
  694. }
  695. });
  696. } */
  697. </script>
  698. <!-- <script type="text/javascript" th:inline="javascript">
  699. var xValues = ["Street Light not burning", "Removal of Garbage", "Road Damaged", "Mosquito Nuisance", "Water Stagnation", "Removal of Debries", "Tree Fallen", "Dog Menace", "Encroachment", "Potshole Property Tax", "Others",];
  700. var yValues = [55, 49, 44, 24, 15, 5, 27, 48, 57, 15, 78];
  701. var barColors = ["red", "green","blue","orange","brown","Pink","yellow","purple","darkblue","gray","skyblue"];
  702. new Chart("myChart", {
  703. type: "bar",
  704. data: {
  705. labels: xValues,
  706. datasets: [{
  707. backgroundColor: barColors,
  708. data: yValues
  709. }]
  710. },
  711. options: {
  712. legend: {display: false},
  713. title: {
  714. display: true,
  715. text: "ZoneWise Report (With Reopen)"
  716. }
  717. }
  718. });
  719. </script> -->
  720. <script>
  721. function fetchDashboardSummary(){
  722. call_loading('totalcomplaintcount','start');
  723. call_loading('completedcomplaintcount','start');
  724. call_loading('pendingcomplaintcount','start');
  725. call_loading('reopencomplaintcount','start');
  726. var apiUrl = '/api/pgr/dashboard-summary';
  727. $.ajax({
  728. url: apiUrl,
  729. type: 'GET',
  730. dataType: 'json',
  731. success: function(jsonResponse) {
  732. // Handle the API response data here
  733. console.log('Data from API:', jsonResponse);
  734. //for (var i = 0; i < jsonResponse.length; i++) {
  735. //var data = jsonResponse[i];
  736. var totalcomplaintcount = jsonResponse.totalcomplaints;
  737. var completedcomplaintcount = jsonResponse.totalcomplaint;
  738. var pendingcomplaintcount = jsonResponse.pendingcomplaint;
  739. var reopencomplaintcount = jsonResponse.reopencomplaint;
  740. //}
  741. $("#totalcomplaintcount").html(totalcomplaintcount);
  742. $("#completedcomplaintcount").html(completedcomplaintcount);
  743. $("#pendingcomplaintcount").html(pendingcomplaintcount);
  744. $("#reopencomplaintcount").html(reopencomplaintcount);
  745. },
  746. error: function(xhr, status, error) {
  747. // Handle errors here
  748. console.error('Error fetching data:', status, error);
  749. }
  750. });
  751. }
  752. let refreshInterval;
  753. let remainingTime = 60; // Initial countdown time in seconds
  754. function updateCountdown() {
  755. let remainingTimetxt = remainingTime;
  756. if(remainingTime<10){
  757. remainingTimetxt = "0"+remainingTime;
  758. }
  759. document.getElementById("refresh-countdown").textContent = remainingTimetxt;
  760. remainingTime--;
  761. if (remainingTime < 0) {
  762. clearInterval(refreshInterval);
  763. remainingTime = 60;
  764. fetchDashboardSummary();
  765. refreshInterval = setInterval(updateCountdown, 1000);
  766. }
  767. }
  768. // Initial fetch and countdown start
  769. fetchDashboardSummary();
  770. refreshInterval = setInterval(updateCountdown, 1000);
  771. </script>
  772. <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  773. <script type="text/javascript" th:inline="javascript">
  774. var daysDataTotal = [
  775. [(${ageanalysisdashboardList[0].DAYS_0_15_PEN})],
  776. [(${ageanalysisdashboardList[0].DAYS_16_30_PEN})],
  777. [(${ageanalysisdashboardList[0].DAYS_31_60_PEN})],
  778. [(${ageanalysisdashboardList[0].DAYS_61_90_PEN})],
  779. [(${ageanalysisdashboardList[0].DAYS_90_PEN})]
  780. ];
  781. /*
  782. var daysDataTotal = [
  783. $("#totalpiechart").val(ageanalysisdashboardList[0]["DAYS_0_15_REOPEN"]),
  784. $("#totalpiechart").val(ageanalysisdashboardList[0]["DAYS_16_30_REOPEN"]),
  785. $("#totalpiechart").val(ageanalysisdashboardList[0]["DAYS_31_60_REOPEN"]),
  786. $("#totalpiechart").val(ageanalysisdashboardList[0]["DAYS_61_90_REOPEN"]),
  787. $("#totalpiechart").val(ageanalysisdashboardList[0]["DAYS_90_REOPEN"])
  788. ]; */
  789. /* var daysDataReopen = [
  790. $("#reopenpiechart").val(ageanalysisdashboardList[0]["DAYS_0_15_REOPEN"]),
  791. $("#reopenpiechart").val(ageanalysisdashboardList[0]["DAYS_16_30_REOPEN"]),
  792. $("#reopenpiechart").val(ageanalysisdashboardList[0]["DAYS_31_60_REOPEN"]),
  793. $("#reopenpiechart").val(ageanalysisdashboardList[0]["DAYS_61_90_REOPEN"]),
  794. $("#reopenpiechart").val(ageanalysisdashboardList[0]["DAYS_90_REOPEN"])
  795. ]; */
  796. var daysDataReopen = [
  797. [(${ageanalysisdashboardList[0].DAYS_0_15_REOPEN})],
  798. [(${ageanalysisdashboardList[0].DAYS_16_30_REOPEN})],
  799. [(${ageanalysisdashboardList[0].DAYS_31_60_REOPEN})],
  800. [(${ageanalysisdashboardList[0].DAYS_61_90_REOPEN})],
  801. [(${ageanalysisdashboardList[0].DAYS_90_REOPEN})]
  802. ];
  803. /* var daysDataReopen = [
  804. '${ageanalysisdashboardList[0].DAYS_0_15_REOPEN}',
  805. '${ageanalysisdashboardList[0].DAYS_16_30_REOPEN}',
  806. '${ageanalysisdashboardList[0].DAYS_31_60_REOPEN}',
  807. '${ageanalysisdashboardList[0].DAYS_61_90_REOPEN}',
  808. '${ageanalysisdashboardList[0].DAYS_90_REOPEN}'
  809. ];
  810. */
  811. google.charts.load('current', {'packages': ['corechart']});
  812. google.charts.setOnLoadCallback(drawPieCharts); // Use a new callback for pie charts
  813. google.charts.setOnLoadCallback(drawBarCharts); // Use a new callback for bar charts
  814. function drawPieCharts() {
  815. console.log("Pie charts");
  816. var dataTotal = google.visualization.arrayToDataTable([
  817. ['Category', 'Count'],
  818. ['0-15 Days Pending', daysDataTotal[0]],
  819. ['16-30 Days Pending', daysDataTotal[1]],
  820. ['31-60 Days Pending', daysDataTotal[2]],
  821. ['61-90 Days Pending', daysDataTotal[3]],
  822. ['Above 90 Days Pending', daysDataTotal[4]],
  823. ]);
  824. var dataReopen = google.visualization.arrayToDataTable([
  825. ['Category', 'Count'],
  826. ['0-15 Days Reopen', daysDataReopen[0]],
  827. ['16-30 Days Reopen', daysDataReopen[1]],
  828. ['31-60 Days Reopen', daysDataReopen[2]],
  829. ['61-90 Days Reopen', daysDataReopen[3]],
  830. ['Above 90 Days Reopen', daysDataReopen[4]],
  831. ]);
  832. var optionspiepen = {
  833. 'title': 'Overall Pending Complaint Info ',
  834. 'legend': 'Right',
  835. 'height': '50%',
  836. 'width': '60%',
  837. 'colors': ['#f4ca47', '#0ebce0', '#aae00e', '#053a4c', '#0ee0ad']
  838. };
  839. var optionspiere = {
  840. 'title': 'Overall Reopen Complaint Info',
  841. 'legend': 'Right',
  842. 'height': '50%',
  843. 'width': '60%',
  844. 'colors': ['#f4ca47', '#0ebce0', '#aae00e', '#053a4c', '#0ee0ad']
  845. };
  846. var piechartTotal = new google.visualization.PieChart(document.getElementById('totalpiechart'));
  847. var piechartReopen = new google.visualization.PieChart(document.getElementById('reopenpiechart'));
  848. piechartTotal.draw(dataTotal, optionspiepen);
  849. piechartReopen.draw(dataReopen, optionspiere);
  850. }
  851. var zoneDatawithReopen = [
  852. [(${zonewisedashboardList[0].NonBURSTLT})],
  853. [(${zonewisedashboardList[0].REOFGAR})],
  854. [(${zonewisedashboardList[0].ROAD})],
  855. [(${zonewisedashboardList[0].MOSQUITE})],
  856. [(${zonewisedashboardList[0].WATER})],
  857. [(${zonewisedashboardList[0].REOFDEB})],
  858. [(${zonewisedashboardList[0].TREE})],
  859. [(${zonewisedashboardList[0].DOGS})],
  860. [(${zonewisedashboardList[0].ENCMTN})],
  861. [(${zonewisedashboardList[0].POT})],
  862. [(${zonewisedashboardList[0].PTAX})],
  863. [(${zonewisedashboardList[0].OTHERS})],
  864. [(${zonewisedashboardList[0].TOTAL})]
  865. ];
  866. var zoneDatawithoutReopen = [
  867. [(${reopenzonewisedashboardList[0].NonBURSTLT})],
  868. [(${reopenzonewisedashboardList[0].REOFGAR})],
  869. [(${reopenzonewisedashboardList[0].ROAD})],
  870. [(${reopenzonewisedashboardList[0].MOSQUITE})],
  871. [(${reopenzonewisedashboardList[0].WATER})],
  872. [(${reopenzonewisedashboardList[0].REOFDEB})],
  873. [(${reopenzonewisedashboardList[0].TREE})],
  874. [(${reopenzonewisedashboardList[0].DOGS})],
  875. [(${reopenzonewisedashboardList[0].ENCMTN})],
  876. [(${reopenzonewisedashboardList[0].POT})],
  877. [(${reopenzonewisedashboardList[0].PTAX})],
  878. [(${reopenzonewisedashboardList[0].OTHERS})],
  879. [(${reopenzonewisedashboardList[0].TOTAL})]
  880. ];
  881. function drawBarCharts() {
  882. console.log("Bar charts");
  883. var zonewithReopen = google.visualization.arrayToDataTable([
  884. ['Category', 'Count'],
  885. ['Street Light not burning', zoneDatawithReopen[0]],
  886. ['Removal of Garbage', zoneDatawithReopen[1]],
  887. ['Road Damaged', zoneDatawithReopen[2]],
  888. ['Mosquito Nuisance', zoneDatawithReopen[3]],
  889. ['Water Stagnation', zoneDatawithReopen[4]],
  890. ['Removal of Debries', zoneDatawithReopen[5]],
  891. ['Tree Fallen', zoneDatawithReopen[6]],
  892. ['Dog Menace', zoneDatawithReopen[7]],
  893. ['Encroachment', zoneDatawithReopen[8]],
  894. ['Potshole', zoneDatawithReopen[9]],
  895. ['Property Tax', zoneDatawithReopen[10]],
  896. ['Others', zoneDatawithReopen[11]],
  897. ['Total', zoneDatawithReopen[12]],
  898. ]);
  899. var zonewithoutReopen = google.visualization.arrayToDataTable([
  900. ['Category', 'Count'],
  901. ['Street Light not burning', zoneDatawithoutReopen[0]],
  902. ['Removal of Garbage', zoneDatawithoutReopen[1]],
  903. ['Road Damaged', zoneDatawithoutReopen[2]],
  904. ['Mosquito Nuisance', zoneDatawithoutReopen[3]],
  905. ['Water Stagnation', zoneDatawithoutReopen[4]],
  906. ['Removal of Debries', zoneDatawithoutReopen[5]],
  907. ['Tree Fallen', zoneDatawithoutReopen[6]],
  908. ['Dog Menace', zoneDatawithoutReopen[7]],
  909. ['Encroachment', zoneDatawithoutReopen[8]],
  910. ['Potshole', zoneDatawithoutReopen[9]],
  911. ['Property Tax', zoneDatawithoutReopen[10]],
  912. ['Others', zoneDatawithoutReopen[11]],
  913. ['Total', zoneDatawithoutReopen[12]],
  914. ]);
  915. var optionszonewithreopencolumn = {
  916. 'title': 'Zonewise (With Reopen) ',
  917. 'legend': 'bottom',
  918. 'height': '450',
  919. 'width': '600',
  920. "useLineColorForBulletBorder": true,
  921. 'colors': ['Green', 'Blue', 'Yellow', 'Brown', 'Pink', 'Orange', 'Purple', 'Grey', 'SkyBlue', 'LightGreen','Violet', 'Gold'],
  922. 'responsive':true
  923. };
  924. var optionszonewithoutreopencolumn = {
  925. 'title': 'Zonewise (Without Reopen) ',
  926. 'legend': 'bottom',
  927. 'height': '450',
  928. 'width': '600',
  929. "useLineColorForBulletBorder": true,
  930. 'colors': ['Red', 'Blue', 'Yellow', 'Brown', 'Pink', 'Orange', 'Purple', 'Grey', 'SkyBlue', 'LightGreen','Violet', 'Gold'],
  931. 'responsive':true
  932. };
  933. /* var optionszonecolumn = {
  934. 'title': 'Zonewise',
  935. 'legend': 'bottom',
  936. 'height': '450',
  937. 'width': '900',
  938. "useLineColorForBulletBorder": true,
  939. 'colors': ['Green', 'Red'], // Set different colors for the two fields
  940. 'responsive': true
  941. }; */
  942. /* var optionszonecolumn = {
  943. 'title': 'Zonewise ',
  944. 'legend': 'bottom',
  945. 'height': '450',
  946. 'width': '1200',
  947. "useLineColorForBulletBorder": true,
  948. 'colors': ['Green', 'Red', 'Green', 'Red', 'Green', 'Red', 'Green', 'Red', 'Green', 'Red', 'Green', 'Red', 'Green', 'Red', 'Green', 'Red', 'Green', 'Red', 'Green', 'Red', 'Green', 'Red', 'Green', 'Red'],
  949. 'responsive':true
  950. }; */
  951. /* var optionszonecolumn = {
  952. 'title': 'Zonewise',
  953. 'legend': 'bottom',
  954. 'height': '450',
  955. 'width': '1200',
  956. "useLineColorForBulletBorder": true,
  957. 'colors': ['Green', 'Red'], // Set different colors for the two fields
  958. 'responsive': true
  959. }; */
  960. var barchartReopen = new google.visualization.ColumnChart(document.getElementById('reopenbarchart'));
  961. var barchartwithReopen = new google.visualization.ColumnChart(document.getElementById('barchart'));
  962. barchartReopen.draw(zonewithoutReopen, optionszonewithoutreopencolumn);
  963. barchartwithReopen.draw(zonewithReopen, optionszonewithreopencolumn);
  964. // barchartover.draw(zonebardata, optionszonecolumn);
  965. // barchartover.draw(zonebardata, optionszonecolumn);
  966. // var barchartover = new google.visualization.ColumnChart(document.getElementById('allbarchart'));
  967. // barchartover.draw(zonebardata, optionszonecolumn);
  968. }
  969. </script>
  970. <script>
  971. var chartData = [];
  972. var currentDate = new Date();
  973. var currentMonth = currentDate.getMonth() + 1;
  974. var currentYear = currentDate.getFullYear();
  975. var daysInMonth = new Date(currentYear, currentMonth, 0).getDate();
  976. // Generate random data for each date in the current month
  977. for (var i = 1; i <= daysInMonth; i++) {
  978. var randomValue1 = Math.floor(Math.random() * 100); // Replace 100 with the maximum value you want
  979. var randomValue2 = Math.floor(Math.random() * 100); // Replace 100 with the maximum value you want
  980. var randomValue3 = Math.floor(Math.random() * 100);
  981. var randomValue4 = Math.floor(Math.random() * 100); // Replace 100 with the maximum value you want
  982. var randomValue5 = Math.floor(Math.random() * 100); // Replace 100 with the maximum value you want
  983. var randomValue6 = Math.floor(Math.random() * 100);
  984. var randomValue7 = Math.floor(Math.random() * 100); // Replace 100 with the maximum value you want
  985. var randomValue8 = Math.floor(Math.random() * 100); // Replace 100 with the maximum value you want
  986. var randomValue9 = Math.floor(Math.random() * 100);
  987. var randomValue10 = Math.floor(Math.random() * 100);
  988. var randomValue11 = Math.floor(Math.random() * 100); // Replace 100 with the maximum value you want
  989. var randomValue12 = Math.floor(Math.random() * 100); // Replace 100 with the maximum value you want
  990. var dateString = currentYear + '-' + (currentMonth < 10 ? '0' : '') + currentMonth + '-' + (i < 10 ? '0' : '') + i;
  991. var dataPoint = {
  992. "date": dateString,
  993. "market1": randomValue1,
  994. "market2": randomValue2,
  995. "market3": randomValue3,
  996. "market4": randomValue4,
  997. "market5": randomValue5,
  998. "market6": randomValue6,
  999. "market7": randomValue7,
  1000. "market8": randomValue8,
  1001. "market9": randomValue9,
  1002. "market10": randomValue10,
  1003. "market11": randomValue11,
  1004. "market12": randomValue12,
  1005. };
  1006. chartData.push(dataPoint);
  1007. }
  1008. // deal-analytic-chart
  1009. var chart = AmCharts.makeChart("deal-analytic-chart", {
  1010. "type": "serial",
  1011. "theme": "light",
  1012. "dataDateFormat": "YYYY-MM-DD",
  1013. "precision": 2,
  1014. "valueAxes": [{
  1015. "id": "v1",
  1016. "position": "left",
  1017. "autoGridCount": false,
  1018. "labelFunction": function(value) {
  1019. return "$" + Math.round(value) + "M";
  1020. }
  1021. }, {
  1022. "id": "v2",
  1023. "gridAlpha": 0,
  1024. "autoGridCount": true
  1025. }],
  1026. "graphs": [{
  1027. "id": "g1",
  1028. "valueAxis": "v2",
  1029. /*"bullet": "round",
  1030. "bulletBorderAlpha": 1,
  1031. "bulletColor": "#FFFFFF",
  1032. "bulletSize": 8,
  1033. "hideBulletsCount": 50,
  1034. "lineThickness": 3,
  1035. "lineColor": "#2ed8b6",*/
  1036. "lineColor": "#2ed8b6",
  1037. "fillColors": "#2ed8b6",
  1038. "type": "column",
  1039. "fillAlphas": 0.3,
  1040. "columnWidth": 0.5,
  1041. "title": "Street Light not burning",
  1042. "useLineColorForBulletBorder": true,
  1043. "valueField": "market1",
  1044. "balloonText": "[[[[title]]]]<br /><b style='font-size: 130%'>[[[[value]]]]</b>"
  1045. },
  1046. {
  1047. "id": "g2",
  1048. "valueAxis": "v2",
  1049. //"bullet": "round",
  1050. //"bulletBorderAlpha": 1,
  1051. //"bulletColor": "#FFFFFF",
  1052. //"bulletSize": 8,
  1053. //"hideBulletsCount": 50,
  1054. //"lineThickness": 3,
  1055. //"lineColor": "#e95753",
  1056. "lineColor": "#F22613",
  1057. "fillColors": "#F22613",
  1058. "type": "column",
  1059. "fillAlphas": 0.3,
  1060. "columnWidth": 0.5,
  1061. "title": "Removal of Garbage",
  1062. "useLineColorForBulletBorder": true,
  1063. "valueField": "market2",
  1064. "balloonText": "[[[[title]]]]<br /><b style='font-size: 130%'>[[[[value]]]]</b>"
  1065. },
  1066. {
  1067. "id": "g3",
  1068. "valueAxis": "v2",
  1069. /*"bullet": "round",
  1070. "bulletBorderAlpha": 1,
  1071. "bulletColor": "#FFFFFF",
  1072. "bulletSize": 8,
  1073. "hideBulletsCount": 50,
  1074. "lineThickness": 3,
  1075. "lineColor": "#2ed8b6",*/
  1076. "lineColor": "Blue",
  1077. "fillColors": "Blue",
  1078. "type": "column",
  1079. "fillAlphas": 0.3,
  1080. "columnWidth": 0.5,
  1081. "title": "Road Damaged",
  1082. "useLineColorForBulletBorder": true,
  1083. "valueField": "market3",
  1084. "balloonText": "[[[[title]]]]<br /><b style='font-size: 130%'>[[[[value]]]]</b>"
  1085. },
  1086. {
  1087. "id": "g4",
  1088. "valueAxis": "v2",
  1089. /*"bullet": "round",
  1090. "bulletBorderAlpha": 1,
  1091. "bulletColor": "#FFFFFF",
  1092. "bulletSize": 8,
  1093. "hideBulletsCount": 50,
  1094. "lineThickness": 3,
  1095. "lineColor": "#2ed8b6",*/
  1096. "lineColor": "Orange",
  1097. "fillColors": "Orange",
  1098. "type": "column",
  1099. "fillAlphas": 0.3,
  1100. "columnWidth": 0.5,
  1101. "title": "Mosquito Nuisance",
  1102. "useLineColorForBulletBorder": true,
  1103. "valueField": "market4",
  1104. "balloonText": "[[[[title]]]]<br /><b style='font-size: 130%'>[[[[value]]]]</b>"
  1105. },
  1106. {
  1107. "id": "g5",
  1108. "valueAxis": "v2",
  1109. /*"bullet": "round",
  1110. "bulletBorderAlpha": 1,
  1111. "bulletColor": "#FFFFFF",
  1112. "bulletSize": 8,
  1113. "hideBulletsCount": 50,
  1114. "lineThickness": 3,
  1115. "lineColor": "#2ed8b6",*/
  1116. "lineColor": "Pink",
  1117. "fillColors": "Pink",
  1118. "type": "column",
  1119. "fillAlphas": 0.3,
  1120. "columnWidth": 0.5,
  1121. "title": "Water Stagnation",
  1122. "useLineColorForBulletBorder": true,
  1123. "valueField": "market5",
  1124. "balloonText": "[[[[title]]]]<br /><b style='font-size: 130%'>[[[[value]]]]</b>"
  1125. },
  1126. {
  1127. "id": "g6",
  1128. "valueAxis": "v2",
  1129. /*"bullet": "round",
  1130. "bulletBorderAlpha": 1,
  1131. "bulletColor": "#FFFFFF",
  1132. "bulletSize": 8,
  1133. "hideBulletsCount": 50,
  1134. "lineThickness": 3,
  1135. "lineColor": "#2ed8b6",*/
  1136. "lineColor": "Brown",
  1137. "fillColors": "Brown",
  1138. "type": "column",
  1139. "fillAlphas": 0.3,
  1140. "columnWidth": 0.5,
  1141. "title": "Removal of Debries",
  1142. "useLineColorForBulletBorder": true,
  1143. "valueField": "market6",
  1144. "balloonText": "[[[[title]]]]<br /><b style='font-size: 130%'>[[[[value]]]]</b>"
  1145. },
  1146. {
  1147. "id": "g7",
  1148. "valueAxis": "v2",
  1149. /*"bullet": "round",
  1150. "bulletBorderAlpha": 1,
  1151. "bulletColor": "#FFFFFF",
  1152. "bulletSize": 8,
  1153. "hideBulletsCount": 50,
  1154. "lineThickness": 3,
  1155. "lineColor": "#2ed8b6",*/
  1156. "lineColor": "Purple",
  1157. "fillColors": "Purple",
  1158. "type": "column",
  1159. "fillAlphas": 0.3,
  1160. "columnWidth": 0.5,
  1161. "title": "Tree Fallen",
  1162. "useLineColorForBulletBorder": true,
  1163. "valueField": "market7",
  1164. "balloonText": "[[[[title]]]]<br /><b style='font-size: 130%'>[[[[value]]]]</b>"
  1165. },
  1166. {
  1167. "id": "g8",
  1168. "valueAxis": "v2",
  1169. /*"bullet": "round",
  1170. "bulletBorderAlpha": 1,
  1171. "bulletColor": "#FFFFFF",
  1172. "bulletSize": 8,
  1173. "hideBulletsCount": 50,
  1174. "lineThickness": 3,
  1175. "lineColor": "#2ed8b6",*/
  1176. "lineColor": "Yellow",
  1177. "fillColors": "Yellow",
  1178. "type": "column",
  1179. "fillAlphas": 0.3,
  1180. "columnWidth": 0.5,
  1181. "title": "Dog Menace",
  1182. "useLineColorForBulletBorder": true,
  1183. "valueField": "market8",
  1184. "balloonText": "[[[[title]]]]<br /><b style='font-size: 130%'>[[[[value]]]]</b>"
  1185. },
  1186. {
  1187. "id": "g9",
  1188. "valueAxis": "v9",
  1189. /*"bullet": "round",
  1190. "bulletBorderAlpha": 1,
  1191. "bulletColor": "#FFFFFF",
  1192. "bulletSize": 8,
  1193. "hideBulletsCount": 50,
  1194. "lineThickness": 3,
  1195. "lineColor": "#2ed8b6",*/
  1196. "lineColor": "Violet",
  1197. "fillColors": "Violet",
  1198. "type": "column",
  1199. "fillAlphas": 0.3,
  1200. "columnWidth": 0.5,
  1201. "title": "Encroachment",
  1202. "useLineColorForBulletBorder": true,
  1203. "valueField": "market9",
  1204. "balloonText": "[[[[title]]]]<br /><b style='font-size: 130%'>[[[[value]]]]</b>"
  1205. },
  1206. {
  1207. "id": "g10",
  1208. "valueAxis": "v2",
  1209. /*"bullet": "round",
  1210. "bulletBorderAlpha": 1,
  1211. "bulletColor": "#FFFFFF",
  1212. "bulletSize": 8,
  1213. "hideBulletsCount": 50,
  1214. "lineThickness": 3,
  1215. "lineColor": "#2ed8b6",*/
  1216. "lineColor": "Grey",
  1217. "fillColors": "Grey",
  1218. "type": "column",
  1219. "fillAlphas": 0.3,
  1220. "columnWidth": 0.5,
  1221. "title": "Potshole",
  1222. "useLineColorForBulletBorder": true,
  1223. "valueField": "market10",
  1224. "balloonText": "[[[[title]]]]<br /><b style='font-size: 130%'>[[[[value]]]]</b>"
  1225. },
  1226. {
  1227. "id": "g11",
  1228. "valueAxis": "v2",
  1229. /*"bullet": "round",
  1230. "bulletBorderAlpha": 1,
  1231. "bulletColor": "#FFFFFF",
  1232. "bulletSize": 8,
  1233. "hideBulletsCount": 50,
  1234. "lineThickness": 3,
  1235. "lineColor": "#2ed8b6",*/
  1236. "lineColor": "Indigo",
  1237. "fillColors": "Indigo",
  1238. "type": "column",
  1239. "fillAlphas": 0.3,
  1240. "columnWidth": 0.5,
  1241. "title": "Property Tax",
  1242. "useLineColorForBulletBorder": true,
  1243. "valueField": "market11",
  1244. "balloonText": "[[[[title]]]]<br /><b style='font-size: 130%'>[[[[value]]]]</b>"
  1245. },
  1246. {
  1247. "id": "g12",
  1248. "valueAxis": "v2",
  1249. /*"bullet": "round",
  1250. "bulletBorderAlpha": 1,
  1251. "bulletColor": "#FFFFFF",
  1252. "bulletSize": 8,
  1253. "hideBulletsCount": 50,
  1254. "lineThickness": 3,
  1255. "lineColor": "#2ed8b6",*/
  1256. "lineColor": "Olive",
  1257. "fillColors": "Olive",
  1258. "type": "column",
  1259. "fillAlphas": 0.3,
  1260. "columnWidth": 0.5,
  1261. "title": "Others",
  1262. "useLineColorForBulletBorder": true,
  1263. "valueField": "market12",
  1264. "balloonText": "[[[[title]]]]<br /><b style='font-size: 130%'>[[[[value]]]]</b>"
  1265. },],
  1266. "chartCursor": {
  1267. "pan": true,
  1268. "valueLineEnabled": true,
  1269. "valueLineBalloonEnabled": true,
  1270. "cursorAlpha": 0,
  1271. "valueLineAlpha": 0.2
  1272. },
  1273. "categoryField": "date",
  1274. "categoryAxis": {
  1275. "parseDates": true,
  1276. "dashLength": 1,
  1277. "minorGridEnabled": true
  1278. },
  1279. "legend": {
  1280. "useGraphSettings": true,
  1281. "position": "top"
  1282. },
  1283. "balloon": {
  1284. "borderThickness": 1,
  1285. "shadowAlpha": 0
  1286. },
  1287. "dataProvider": chartData,
  1288. });
  1289. </script>
  1290. <script>
  1291. // For Calendar
  1292. $(document).ready(function(t, e, i) {
  1293. function t(t) {
  1294. t.each(function() {
  1295. var t = {
  1296. title: $.trim($(this).text())
  1297. };
  1298. $(this).data("eventObject", t), $(this).draggable({
  1299. zIndex: 1070,
  1300. revert: !0,
  1301. revertDuration: 0
  1302. })
  1303. })
  1304. }
  1305. t($("#external-events div.external-event"));
  1306. var e = new Date,
  1307. i = e.getDate(),
  1308. n = e.getMonth(),
  1309. r = e.getFullYear();
  1310. $("#calendar").fullCalendar({
  1311. header: {
  1312. left: "prev,next today",
  1313. center: "title",
  1314. right: "month,agendaWeek,agendaDay"
  1315. },
  1316. buttonText: {
  1317. today: "today",
  1318. month: "month",
  1319. week: "week",
  1320. day: "day"
  1321. },
  1322. events: [{
  1323. title: "All Day Event",
  1324. start: new Date(r, n, 1),
  1325. className: "bg-purple"
  1326. }, {
  1327. title: "Long Event",
  1328. start: new Date(r, n, i - 5),
  1329. end: new Date(r, n, i - 2),
  1330. className: "bg-yellow"
  1331. }, {
  1332. title: "Meeting",
  1333. start: new Date(r, n, i, 10, 30),
  1334. allDay: !1,
  1335. className: "bg-red"
  1336. }, {
  1337. title: "Lunch",
  1338. start: new Date(r, n, i, 12, 0),
  1339. end: new Date(r, n, i, 14, 0),
  1340. allDay: !1,
  1341. className: "bg-navy"
  1342. }, {
  1343. title: "Birthday Party",
  1344. start: new Date(r, n, i + 1, 19, 0),
  1345. end: new Date(r, n, i + 1, 22, 30),
  1346. allDay: !1,
  1347. className: "bg-green"
  1348. }, {
  1349. title: "Click for Google",
  1350. start: new Date(r, n, 28),
  1351. end: new Date(r, n, 29),
  1352. url: "http://google.com/",
  1353. className: "bg-lime"
  1354. }],
  1355. editable: !0,
  1356. selectable: !0,
  1357. droppable: !0,
  1358. drop: function(t, e) {
  1359. var i = $(this).data("eventObject"),
  1360. n = $.extend({}, i);
  1361. n.start = t, n.allDay = e, n.backgroundColor = $(this).css("background-color"), n.borderColor = $(this).css("border-color"), $("#calendar").fullCalendar("renderEvent", n, !0), $("#drop-remove").is(":checked") && $(this).remove()
  1362. },
  1363. eventClick: function(calEvent, jsEvent, view) {
  1364. var $this = this;
  1365. $("#editEname").val(calEvent.title)
  1366. $("#editStarts").datetimepicker("date", calEvent.start._d)
  1367. $("#editEvent").modal({
  1368. backdrop: 'static'
  1369. });
  1370. $("#editEvent").find('.delete-event').show().end().find('.delete-event').unbind('click').click(function() {
  1371. $("#calendar").fullCalendar('removeEvents', function(ev) {
  1372. return (ev._id == calEvent._id);
  1373. });
  1374. $("#editEvent").modal('hide');
  1375. });
  1376. $("#editEvent").find('form').on('submit', function() {
  1377. calEvent.title = $("#editEname").val();
  1378. calEvent.start = new Date($("#editStarts").data("datetimepicker").date())
  1379. $("#calendar").fullCalendar('updateEvent', calEvent);
  1380. $("#editEvent").modal('hide');
  1381. return false;
  1382. });
  1383. },
  1384. select: function(start, end, allDay) {
  1385. var $this = this;
  1386. $("#addEvent").modal({
  1387. backdrop: 'static'
  1388. });
  1389. $("#eventStarts").datetimepicker("date", start)
  1390. var form = $("#addEventForm");
  1391. $("#addEvent").find('.delete-event').hide().end().find('.save-event').show().end().find('.save-event').unbind('click').click(function() {
  1392. form.submit();
  1393. });
  1394. $("#addEvent").find('form').on('submit', function() {
  1395. var title = form.find("#eventName").val();
  1396. var start = form.find("#eventStarts").val();
  1397. var end = form.find("input[name='ending']").val();
  1398. var categoryClass = form.find("#addColor [type=radio]:checked").data("color");
  1399. if (title !== null && title.length != 0) {
  1400. $("#calendar").fullCalendar('renderEvent', {
  1401. title: title,
  1402. start: start,
  1403. end: end,
  1404. allDay: false,
  1405. className: categoryClass
  1406. }, true);
  1407. $("#addEvent").modal('hide');
  1408. } else {
  1409. alert('You have to give a title to your event');
  1410. }
  1411. return false;
  1412. });
  1413. $("#calendar").fullCalendar('unselect');
  1414. }
  1415. });
  1416. var a = "#3c8dbc";
  1417. $("#color-chooser-btn");
  1418. $("#color-chooser > li > a").on("click", function(t) {
  1419. t.preventDefault(), a = $(this).css("color"), $("#add-new-event").css({
  1420. "background-color": a,
  1421. "border-color": a
  1422. })
  1423. }), $("#add-new-event").on("click", function(e) {
  1424. e.preventDefault();
  1425. var i = $("#new-event").val();
  1426. if (0 != i.length) {
  1427. var n = $("<div />");
  1428. n.css({
  1429. "background-color": a,
  1430. "border-color": a,
  1431. color: "#fff"
  1432. }).addClass("external-event"), n.html(i), $("#external-events").prepend(n), t(n), $("#new-event").val("")
  1433. }
  1434. });
  1435. })
  1436. </script>
  1437. </body>
  1438. </html>