This portal only for GCC Officers. Based on there roles and Group ID they can view there module`s Like PGR, QR Public Asset Feedback, Makkalai Thedi Mayor,etc...
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.

578 lines
27 KiB

​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
  1. <!DOCTYPE html>
  2. <html lang="en" dir="">
  3. <html xmlns:th="http://www.thymeleaf.org">
  4. <head th:replace="~{fragments/modules/base/head :: head}"></head>
  5. <body>
  6. <!--[if lt IE 8]>
  7. <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>
  8. <![endif]-->
  9. <div class="wrapper">
  10. <!-- header top menu Start -->
  11. <header th:replace="~{fragments/modules/base/header :: header}"></header>
  12. <!-- header top menu end -->
  13. <div class="page-wrap">
  14. <!--=============== Left Menu side Start ================-->
  15. <div th:replace="~{fragments/modules/base/menu :: menu}"></div>
  16. <!--=============== Left side End ================-->
  17. <div class="main-content">
  18. <div class="container-fluid">
  19. <div class="page-header mb-2">
  20. <div class="row align-items-end">
  21. <div class="col-lg-8">
  22. <div class="page-header-title">
  23. <i class="ik ik-bar-chart-2 bg-blue"></i>
  24. <div class="d-inline">
  25. <h5>QR Asset Feedback Module</h5>
  26. <span>Public asset QR feedback application</span>
  27. </div>
  28. </div>
  29. </div>
  30. <div class="col-lg-4">
  31. <nav class="breadcrumb-container" aria-label="breadcrumb">
  32. <ol class="breadcrumb">
  33. <li class="breadcrumb-item">
  34. <a href="index"><i class="ik ik-home"></i></a>
  35. </li>
  36. <li class="breadcrumb-item active" aria-current="page">Dashboard</li>
  37. </ol>
  38. </nav>
  39. </div>
  40. </div>
  41. </div>
  42. <h4 class="h4 text-right text-mute" style="font-size: 12px;">Auot refresh in <font id="refresh-countdown">00</font> seconds</h4>
  43. <div class="row">
  44. <!-- analytic card start - First Tile Start -->
  45. <div class="col-xl-3 col-md-6">
  46. <a href="javascript:void(0)">
  47. <div class="card social-card">
  48. <div class="card-body text-center">
  49. <h2 class="text-facebook mb-20"><i class="ik ik-layers"></i></h2>
  50. <h3 class="text-facebook fw-700" id="assetcount">0</h3>
  51. <p>Assets</p>
  52. <p class="mb-0 mt-15">View Assets List<i class="fas fa-arrow-right ml-5 f-10 text-facebook"></i></p>
  53. </div>
  54. </div>
  55. </a>
  56. </div>
  57. <div class="col-xl-3 col-md-6">
  58. <a href="javascript:void(0)">
  59. <div class="card social-card">
  60. <div class="card-body text-center">
  61. <h2 class="text-twitter mb-20"><i class="fas fa-comments"></i></h2>
  62. <h3 class="text-twitter fw-700" id="feedbackcount">0</h3>
  63. <p>Feedbacks</p>
  64. <p class="mb-0 mt-15">View Feedbacks List<i class="fas fa-arrow-right ml-5 f-10 text-twitter"></i></p>
  65. </div>
  66. </div>
  67. </a>
  68. </div>
  69. <div class="col-xl-3 col-md-6">
  70. <a href="javascript:void(0)">
  71. <div class="card social-card">
  72. <div class="card-body text-center">
  73. <h2 class="text-green mb-20"><i class="far fa-smile-beam"></i></h2>
  74. <h3 class="text-green fw-700" id="positivecount">0</h3>
  75. <p>Positive Feedbacks</p>
  76. <p class="mb-0 mt-15">View Positive Feedbacks<i class="fas fa-arrow-right ml-5 f-10 text-green"></i></p>
  77. </div>
  78. </div>
  79. </a>
  80. </div>
  81. <div class="col-xl-3 col-md-6">
  82. <a href="javascript:void(0)">
  83. <div class="card social-card">
  84. <div class="card-body text-center">
  85. <h2 class="text-red mb-20"><i class="far fa-frown"></i></h2>
  86. <h3 class="text-red fw-700" id="negativecount">0</h3>
  87. <p>Negative Feedbacks</p>
  88. <p class="mb-0 mt-15">View Negative Feedbacks<i class="fas fa-arrow-right ml-5 f-10 text-red"></i></p>
  89. </div>
  90. </div>
  91. </a>
  92. </div>
  93. <!-- First Tile End -->
  94. <div class="col-md-12">
  95. <div class="card sale-card">
  96. <div class="card-header">
  97. <h3>Deals Analytics</h3>
  98. </div>
  99. <div class="card-block">
  100. <div id="deal-analytic-chart" class="chart-shadow" style="height:300px"></div>
  101. </div>
  102. </div>
  103. </div>
  104. <!--
  105. <div class="col-md-12">
  106. <div class="card">
  107. <div class="card-header">
  108. <h3>Calander</h3>
  109. </div>
  110. <div class="card-block">
  111. <div id="calendar"></div>
  112. </div>
  113. </div>
  114. </div>
  115. <div class="col-md-12">
  116. <div class="card">
  117. <div class="card-header">
  118. <h3>Page Title</h3>
  119. </div>
  120. <div class="card-block">
  121. </div>
  122. </div>
  123. </div>
  124. -->
  125. </div>
  126. </div>
  127. </div>
  128. <footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
  129. </div>
  130. </div>
  131. <!-- Model Box -->
  132. <div class="modal" id="editEvent" tabindex="-1" role="dialog" aria-labelledby="editEventLabel" aria-hidden="true">
  133. <div class="modal-dialog" role="document">
  134. <form class="editEventForm">
  135. <div class="modal-content">
  136. <div class="modal-header">
  137. <h5 class="modal-title" id="editEventLabel">Edit Event</h5>
  138. <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  139. </div>
  140. <div class="modal-body">
  141. <div class="form-group">
  142. <label for="editEname">Event Title</label>
  143. <input type="text" class="form-control" id="editEname" name="editEname" placeholder="Please enter event title">
  144. </div>
  145. <div class="form-group">
  146. <label for="editStarts">Start</label>
  147. <input type="text" class="form-control datetimepicker-input" id="editStarts" name="editStarts" data-toggle="datetimepicker" data-target="#editStarts">
  148. </div>
  149. </div>
  150. <div class="modal-footer">
  151. <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
  152. <button class="btn btn-danger delete-event" type="submit">Delete</button>
  153. <button class="btn btn-success save-event" type="submit">Save</button>
  154. </div>
  155. </div>
  156. </form>
  157. </div>
  158. </div>
  159. <div class="modal" id="addEvent" tabindex="-1" role="dialog" aria-labelledby="addEventLabel" aria-hidden="true">
  160. <div class="modal-dialog" role="document">
  161. <div class="modal-content">
  162. <div class="modal-header">
  163. <h5 class="modal-title" id="addEventLabel">Add New Event</h5>
  164. <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  165. </div>
  166. <div class="modal-body">
  167. <form id="addEventForm">
  168. <div class="form-group">
  169. <label for="eventName">Event Title</label>
  170. <input type="text" class="form-control" id="eventName" name="eventName" placeholder="Please enter event title">
  171. </div>
  172. <div class="form-group">
  173. <label for="eventStarts">Starts</label>
  174. <input type="text" class="form-control datetimepicker-input" id="eventStarts" name="eventStarts" data-toggle="datetimepicker" data-target="#eventStarts">
  175. </div>
  176. <div class="form-group mb-0" id="addColor">
  177. <label for="colors">Choose Color</label>
  178. <ul class="color-selector">
  179. <li class="bg-aqua">
  180. <input type="radio" data-color="bg-aqua" checked name="colorChosen" id="addColorAqua">
  181. <label for="addColorAqua"></label>
  182. </li>
  183. <li class="bg-blue">
  184. <input type="radio" data-color="bg-blue" name="colorChosen" id="addColorBlue">
  185. <label for="addColorBlue"></label>
  186. </li>
  187. <li class="bg-light-blue">
  188. <input type="radio" data-color="bg-light-blue" name="colorChosen" id="addColorLightblue">
  189. <label for="addColorLightblue"></label>
  190. </li>
  191. <li class="bg-teal">
  192. <input type="radio" data-color="bg-teal" name="colorChosen" id="addColorTeal">
  193. <label for="addColorTeal"></label>
  194. </li>
  195. <li class="bg-yellow">
  196. <input type="radio" data-color="bg-yellow" name="colorChosen" id="addColorYellow">
  197. <label for="addColorYellow"></label>
  198. </li>
  199. <li class="bg-orange">
  200. <input type="radio" data-color="bg-orange" name="colorChosen" id="addColorOrange">
  201. <label for="addColorOrange"></label>
  202. </li>
  203. <li class="bg-green">
  204. <input type="radio" data-color="bg-green" name="colorChosen" id="addColorGreen">
  205. <label for="addColorGreen"></label>
  206. </li>
  207. <li class="bg-lime">
  208. <input type="radio" data-color="bg-lime" name="colorChosen" id="addColorLime">
  209. <label for="addColorLime"></label>
  210. </li>
  211. <li class="bg-red">
  212. <input type="radio" data-color="bg-red" name="colorChosen" id="addColorRed">
  213. <label for="addColorRed"></label>
  214. </li>
  215. <li class="bg-purple">
  216. <input type="radio" data-color="bg-purple" name="colorChosen" id="addColorPurple">
  217. <label for="addColorPurple"></label>
  218. </li>
  219. <li class="bg-fuchsia">
  220. <input type="radio" data-color="bg-fuchsia" name="colorChosen" id="addColorFuchsia">
  221. <label for="addColorFuchsia"></label>
  222. </li>
  223. <li class="bg-muted">
  224. <input type="radio" data-color="bg-muted" name="colorChosen" id="addColorMuted">
  225. <label for="addColorMuted"></label>
  226. </li>
  227. <li class="bg-navy">
  228. <input type="radio" data-color="bg-navy" name="colorChosen" id="addColorNavy">
  229. <label for="addColorNavy"></label>
  230. </li>
  231. </ul>
  232. </div>
  233. </form>
  234. </div>
  235. <div class="modal-footer">
  236. <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
  237. <button type="button" class="btn btn-success save-event">Save</button>
  238. <button type="button" class="btn btn-danger delete-event" data-dismiss="modal">Delete</button>
  239. </div>
  240. </div>
  241. </div>
  242. <div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div>
  243. <script th:replace="~{fragments/modules/base/script :: script}"></script>
  244. <script src="node_modules/amcharts3/amcharts/amcharts.js"></script>
  245. <script src="node_modules/amcharts3/amcharts/serial.js"></script>
  246. <script src="node_modules/amcharts3/amcharts/themes/light.js"></script>
  247. <script src="node_modules/fullcalendar/dist/fullcalendar.min.js"></script>
  248. <script src="node_modules/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.min.js"></script>
  249. <script>
  250. function fetchDashboardSummary(){
  251. call_loading('assetcount','start');
  252. call_loading('feedbackcount','start');
  253. call_loading('positivecount','start');
  254. call_loading('negativecount','start');
  255. var apiUrl = '/gcc/api/qrfeedback/dashboard-summary';
  256. $.ajax({
  257. url: apiUrl,
  258. type: 'GET',
  259. dataType: 'json',
  260. success: function(jsonResponse) {
  261. // Handle the API response data here
  262. console.log('Data from API:', jsonResponse);
  263. //for (var i = 0; i < jsonResponse.length; i++) {
  264. //var data = jsonResponse[i];
  265. var assetcount = jsonResponse.totalAssets;
  266. var feedbackcount = jsonResponse.totalFeedbacks;
  267. var positivecount = jsonResponse.totalYesFeedbacks;
  268. var negativecount = jsonResponse.totalNoFeedbacks;
  269. //}
  270. $("#assetcount").html(assetcount);
  271. $("#feedbackcount").html(feedbackcount);
  272. $("#positivecount").html(positivecount);
  273. $("#negativecount").html(negativecount);
  274. },
  275. error: function(xhr, status, error) {
  276. // Handle errors here
  277. console.error('Error fetching data:', status, error);
  278. }
  279. });
  280. }
  281. let refreshInterval;
  282. let remainingTime = 60; // Initial countdown time in seconds
  283. function updateCountdown() {
  284. let remainingTimetxt = remainingTime;
  285. if(remainingTime<10){
  286. remainingTimetxt = "0"+remainingTime;
  287. }
  288. document.getElementById("refresh-countdown").textContent = remainingTimetxt;
  289. remainingTime--;
  290. if (remainingTime < 0) {
  291. clearInterval(refreshInterval);
  292. remainingTime = 60;
  293. fetchDashboardSummary();
  294. refreshInterval = setInterval(updateCountdown, 1000);
  295. }
  296. }
  297. // Initial fetch and countdown start
  298. fetchDashboardSummary();
  299. refreshInterval = setInterval(updateCountdown, 1000);
  300. </script>
  301. <script>
  302. var chartData = [];
  303. var currentDate = new Date();
  304. var currentMonth = currentDate.getMonth() + 1;
  305. var currentYear = currentDate.getFullYear();
  306. var daysInMonth = new Date(currentYear, currentMonth, 0).getDate();
  307. // Generate random data for each date in the current month
  308. for (var i = 1; i <= daysInMonth; i++) {
  309. var randomValue1 = Math.floor(Math.random() * 100); // Replace 100 with the maximum value you want
  310. var randomValue2 = Math.floor(Math.random() * 100); // Replace 100 with the maximum value you want
  311. var dateString = currentYear + '-' + (currentMonth < 10 ? '0' : '') + currentMonth + '-' + (i < 10 ? '0' : '') + i;
  312. var dataPoint = {
  313. "date": dateString,
  314. "market1": randomValue1,
  315. "market2": randomValue2
  316. };
  317. chartData.push(dataPoint);
  318. }
  319. // deal-analytic-chart
  320. var chart = AmCharts.makeChart("deal-analytic-chart", {
  321. "type": "serial",
  322. "theme": "light",
  323. "dataDateFormat": "YYYY-MM-DD",
  324. "precision": 2,
  325. "valueAxes": [{
  326. "id": "v1",
  327. "position": "left",
  328. "autoGridCount": false,
  329. "labelFunction": function(value) {
  330. return "$" + Math.round(value) + "M";
  331. }
  332. }, {
  333. "id": "v2",
  334. "gridAlpha": 0,
  335. "autoGridCount": false
  336. }],
  337. "graphs": [{
  338. "id": "g1",
  339. "valueAxis": "v2",
  340. /*"bullet": "round",
  341. "bulletBorderAlpha": 1,
  342. "bulletColor": "#FFFFFF",
  343. "bulletSize": 8,
  344. "hideBulletsCount": 50,
  345. "lineThickness": 3,
  346. "lineColor": "#2ed8b6",*/
  347. "lineColor": "#2ed8b6",
  348. "fillColors": "#2ed8b6",
  349. "type": "column",
  350. "fillAlphas": 0.3,
  351. "columnWidth": 0.5,
  352. "title": "Positive Feedback",
  353. "useLineColorForBulletBorder": true,
  354. "valueField": "market1",
  355. "balloonText": "[[[[title]]]]<br /><b style='font-size: 130%'>[[[[value]]]]</b>"
  356. }, {
  357. "id": "g2",
  358. "valueAxis": "v2",
  359. //"bullet": "round",
  360. //"bulletBorderAlpha": 1,
  361. //"bulletColor": "#FFFFFF",
  362. //"bulletSize": 8,
  363. //"hideBulletsCount": 50,
  364. //"lineThickness": 3,
  365. //"lineColor": "#e95753",
  366. "lineColor": "#F22613",
  367. "fillColors": "#F22613",
  368. "type": "column",
  369. "fillAlphas": 0.3,
  370. "columnWidth": 0.5,
  371. "title": "Negative Feedback",
  372. "useLineColorForBulletBorder": true,
  373. "valueField": "market2",
  374. "balloonText": "[[[[title]]]]<br /><b style='font-size: 130%'>[[[[value]]]]</b>"
  375. }],
  376. "chartCursor": {
  377. "pan": true,
  378. "valueLineEnabled": true,
  379. "valueLineBalloonEnabled": true,
  380. "cursorAlpha": 0,
  381. "valueLineAlpha": 0.2
  382. },
  383. "categoryField": "date",
  384. "categoryAxis": {
  385. "parseDates": true,
  386. "dashLength": 1,
  387. "minorGridEnabled": true
  388. },
  389. "legend": {
  390. "useGraphSettings": true,
  391. "position": "top"
  392. },
  393. "balloon": {
  394. "borderThickness": 1,
  395. "shadowAlpha": 0
  396. },
  397. "dataProvider": chartData,
  398. });
  399. </script>
  400. <script>
  401. /*
  402. // For Calendar
  403. $(document).ready(function(t, e, i) {
  404. function t(t) {
  405. t.each(function() {
  406. var t = {
  407. title: $.trim($(this).text())
  408. };
  409. $(this).data("eventObject", t), $(this).draggable({
  410. zIndex: 1070,
  411. revert: !0,
  412. revertDuration: 0
  413. })
  414. })
  415. }
  416. t($("#external-events div.external-event"));
  417. var e = new Date,
  418. i = e.getDate(),
  419. n = e.getMonth(),
  420. r = e.getFullYear();
  421. $("#calendar").fullCalendar({
  422. header: {
  423. left: "prev,next today",
  424. center: "title",
  425. right: "month,agendaWeek,agendaDay"
  426. },
  427. buttonText: {
  428. today: "today",
  429. month: "month",
  430. week: "week",
  431. day: "day"
  432. },
  433. events: [{
  434. title: "All Day Event",
  435. start: new Date(r, n, 1),
  436. className: "bg-purple"
  437. }, {
  438. title: "Long Event",
  439. start: new Date(r, n, i - 5),
  440. end: new Date(r, n, i - 2),
  441. className: "bg-yellow"
  442. }, {
  443. title: "Meeting",
  444. start: new Date(r, n, i, 10, 30),
  445. allDay: !1,
  446. className: "bg-red"
  447. }, {
  448. title: "Lunch",
  449. start: new Date(r, n, i, 12, 0),
  450. end: new Date(r, n, i, 14, 0),
  451. allDay: !1,
  452. className: "bg-navy"
  453. }, {
  454. title: "Birthday Party",
  455. start: new Date(r, n, i + 1, 19, 0),
  456. end: new Date(r, n, i + 1, 22, 30),
  457. allDay: !1,
  458. className: "bg-green"
  459. }, {
  460. title: "Click for Google",
  461. start: new Date(r, n, 28),
  462. end: new Date(r, n, 29),
  463. url: "http://google.com/",
  464. className: "bg-lime"
  465. }],
  466. editable: !0,
  467. selectable: !0,
  468. droppable: !0,
  469. drop: function(t, e) {
  470. var i = $(this).data("eventObject"),
  471. n = $.extend({}, i);
  472. 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()
  473. },
  474. eventClick: function(calEvent, jsEvent, view) {
  475. var $this = this;
  476. $("#editEname").val(calEvent.title)
  477. $("#editStarts").datetimepicker("date", calEvent.start._d)
  478. $("#editEvent").modal({
  479. backdrop: 'static'
  480. });
  481. $("#editEvent").find('.delete-event').show().end().find('.delete-event').unbind('click').click(function() {
  482. $("#calendar").fullCalendar('removeEvents', function(ev) {
  483. return (ev._id == calEvent._id);
  484. });
  485. $("#editEvent").modal('hide');
  486. });
  487. $("#editEvent").find('form').on('submit', function() {
  488. calEvent.title = $("#editEname").val();
  489. calEvent.start = new Date($("#editStarts").data("datetimepicker").date())
  490. $("#calendar").fullCalendar('updateEvent', calEvent);
  491. $("#editEvent").modal('hide');
  492. return false;
  493. });
  494. },
  495. select: function(start, end, allDay) {
  496. var $this = this;
  497. $("#addEvent").modal({
  498. backdrop: 'static'
  499. });
  500. $("#eventStarts").datetimepicker("date", start)
  501. var form = $("#addEventForm");
  502. $("#addEvent").find('.delete-event').hide().end().find('.save-event').show().end().find('.save-event').unbind('click').click(function() {
  503. form.submit();
  504. });
  505. $("#addEvent").find('form').on('submit', function() {
  506. var title = form.find("#eventName").val();
  507. var start = form.find("#eventStarts").val();
  508. var end = form.find("input[name='ending']").val();
  509. var categoryClass = form.find("#addColor [type=radio]:checked").data("color");
  510. if (title !== null && title.length != 0) {
  511. $("#calendar").fullCalendar('renderEvent', {
  512. title: title,
  513. start: start,
  514. end: end,
  515. allDay: false,
  516. className: categoryClass
  517. }, true);
  518. $("#addEvent").modal('hide');
  519. } else {
  520. alert('You have to give a title to your event');
  521. }
  522. return false;
  523. });
  524. $("#calendar").fullCalendar('unselect');
  525. }
  526. });
  527. var a = "#3c8dbc";
  528. $("#color-chooser-btn");
  529. $("#color-chooser > li > a").on("click", function(t) {
  530. t.preventDefault(), a = $(this).css("color"), $("#add-new-event").css({
  531. "background-color": a,
  532. "border-color": a
  533. })
  534. }), $("#add-new-event").on("click", function(e) {
  535. e.preventDefault();
  536. var i = $("#new-event").val();
  537. if (0 != i.length) {
  538. var n = $("<div />");
  539. n.css({
  540. "background-color": a,
  541. "border-color": a,
  542. color: "#fff"
  543. }).addClass("external-event"), n.html(i), $("#external-events").prepend(n), t(n), $("#new-event").val("")
  544. }
  545. });
  546. })*/
  547. </script>
  548. </body>
  549. </html>