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.

576 lines
27 KiB

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