API tools faq
paste
Advertisement
obrienj

Untitled

obrienj
Sep 13th, 2017
540
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 128.61 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
  6.  
  7. <link rel="stylesheet" type="text/css" href="../../../distLibs/css/DataTables/datatables.css">
  8.  
  9. <link rel="stylesheet" type="text/css" href="../../../distLibs/css/jQuery/jquery.timepicker.css" />
  10. <link rel="stylesheet" type="text/css" href="../../../distLibs/css/jQuery/jquery.modal.min.css">
  11. <link rel="stylesheet" type="text/css" href="../../../distLibs/css/jQuery/jquery-ui.css">
  12.  
  13. <link rel="stylesheet" type="text/css" href="./pikaday.css">
  14. <link rel="stylesheet" type="text/css" href="./jquery.recurrenceinput.css">
  15.  
  16.  
  17. <script type="text/javascript" language="javascript" src="../../../distLibs/libs/jQuery/jquery.min.js"></script>
  18. <script type="text/javascript" language="javascript" src="../../../distLibs/libs/jQuery/jquery.timepicker.js"></script>
  19.  
  20. <script type="text/javascript" language="javascript" src="../../../distLibs/libs/jQuery/jquery.modal.min.js"></script>
  21. <script type="text/javascript" language="javascript" src="../../../distLibs/libs/jQuery/jquery.browser.js"></script>
  22. <script type="text/javascript" language="javascript" src="../../../distLibs/libs/jQuery/jquery.tools.min.js"></script>
  23. <script type="text/javascript" language="javascript" src="../../../distLibs/libs/jQuery/jquery.tmpl.js"></script>
  24. <script type="text/javascript" language="javascript" src="../../../distLibs/libs/jQuery/jquery-ui.js"></script>
  25. <script type="text/javascript" language="javascript" src="../../../distLibs/libs/jQuery/underscore.js"></script>
  26. <script type="text/javascript" language="javascript" src="../../../distLibs/libs/jQuery/stringifyObject.js"></script>
  27.  
  28.  
  29. <script type="text/javascript" language="javascript" src="../../../distLibs/libs/jQuery/jquery-migrate-3.0.0.min.js"></script>
  30.  
  31. <script type="text/javascript" language="javascript" src='../../../distLibs/libs/Moment/moment-with-locales.min.js'></script>
  32.  
  33. <script type="text/javascript" language="javascript" src="../../../distLibs/libs/CKEditor/ckeditor.js"></script>
  34. <script type="text/javascript" language="javascript" src="../../../distLibs/libs/CKEditor/adapters/jquery.js"></script>
  35. <script type="text/javascript" language="javascript" src="../../../distLibs/libs/Misc/uuid.js"></script>
  36.  
  37. <script type="text/javascript" language="javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBmE8jumNnyJ6JOpWsw_ZxmjcmrL7DGOHY&libraries=places"></script>
  38.  
  39. <!-- script type="text/javascript" language="javascript" src="./OTCalEdit_config.js"></!--script -->
  40.  
  41. <script type="text/javascript" language="javascript" src="./locationpicker.jquery.js"></script>
  42.  
  43. <script type="text/javascript" language="javascript" src="./jquery.recurrenceinput.js"></script>
  44.  
  45. <script type="text/javascript" language="javascript" src="./pikaday.js"></script>
  46. <script type="text/javascript" language="javascript" src="./pikaday.jquery.js"></script>
  47.  
  48. <!------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
  49. <!-- includes all the plugins I need (DataTables 1.10.13, AutoFill 2.1.3, Buttons 1.2.4, Print view 1.2.4, Editor 1.6.1, Responsive 2.1.0, Scroller 1.4.2, Select 1.2.0) -->
  50. <!------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
  51. <script type="text/javascript" language="javascript" src="../../../distLibs/libs/DataTables/datatables.js"></script>
  52.  
  53. <script type="text/javascript" language="javascript" src="../../../distLibs/libs/DataTables/editor.ckeditor.js"></script>
  54.  
  55. <!-- script type="text/javascript" language="javascript" src="../../../distLibs/libs/Rrule/rrule.js"></script>
  56. <script type="text/javascript" language="javascript" src="../../../distLibs/libs/Rrule/nlp.js"></script -->
  57.  
  58. <script type="text/javascript" language="javascript" src="../../../OTSearcher/OTSearcher/jquery.OTSearcher.js"></script>
  59.  
  60. <!------------------------------------------------------------------------------------------------------------------->
  61. <!-- This style override expands and positions the Editor bubble and other popups -->
  62. <!------------------------------------------------------------------------------------------------------------------->
  63. <style>
  64. div.DTED_Lightbox_Wrapper {
  65. left: 1em;
  66. right: 1em;
  67. margin-left: 0;
  68. width: auto;
  69. height: auto;
  70. }
  71.  
  72. div.DTED_Lightbox_Container {
  73. left: 1em;
  74. right: 1em;
  75. margin-left: 0;
  76. width: auto;
  77. height: auto;
  78. }
  79.  
  80. div.editor-datetime {
  81. position: absolute;
  82. background-color: white;
  83. z-index: 2050;
  84. border: 7px solid #555;
  85. box-shadow: 2px 2px 10px #555;
  86. border-radius: 10px;
  87. -webkit-box-sizing: border-box;
  88. -moz-box-sizing: border-box;
  89. box-sizing: border-box;
  90. }
  91.  
  92. .otbuttons {
  93. width: 100px;
  94. position: center;
  95. text-align: center;
  96. display:inline-block;
  97. margin-top: 0;
  98. padding: 5px 15px;
  99. cursor: pointer;
  100. margin-left: 0.75em;
  101. font-size: 14px;
  102. text-shadow: 0 1px 0 white;
  103. border: 1px solid #999;
  104. -webkit-border-radius: 4px;
  105. -moz-border-radius: 4px;
  106. -ms-border-radius: 4px;
  107. -o-border-radius: 4px;
  108. border-radius: 4px;
  109. -webkit-box-shadow: 1px 1px 3px #ccc;
  110. -moz-box-shadow: 1px 1px 3px #ccc;
  111. box-shadow: 1px 1px 3px #ccc;
  112. background-color: #f9f9f9 100%;
  113. /* Fallback */
  114. background-image: -webkit-linear-gradient(top, #ffffff 0%, #eee 65%, #f9f9f9 100%);
  115. /* Chrome 10+, Saf5.1+, iOS 5+ */
  116. background-image: -moz-linear-gradient(top, #ffffff 0%, #eee 65%, #f9f9f9 100%);
  117. /* FF3.6 */
  118. background-image: -ms-linear-gradient(top, #ffffff 0%, #eee 65%, #f9f9f9 100%);
  119. /* IE10 */
  120. background-image: -o-linear-gradient(top, #ffffff 0%, #eee 65%, #f9f9f9 100%);
  121. /* Opera 11.10+ */
  122. background-image: linear-gradient(to bottom, #ffffff 0%, #eee 65%, #f9f9f9 100%);
  123. filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#ffffff', EndColorStr='#f9f9f9');
  124. }
  125.  
  126. div.DTE_Field {
  127. padding-left: 2% !important;
  128. width: 95% !important;
  129. }
  130.  
  131. div.DTE_Field > label {
  132. float: left;
  133. width: 10% !important;
  134. padding-top: 6px;
  135. }
  136.  
  137. div.DTE_Field > div.DTE_Field_Input {
  138. float: right;
  139. width: 90% !important;
  140. }
  141.  
  142. #DTE_Field_whenHolder {
  143. height: 55px !important;
  144. }
  145.  
  146. #DTE_Field_locHolder {
  147. height: 55px !important;
  148. }
  149.  
  150. #DTE_Field_description {
  151. height: 210px !important;
  152. }
  153.  
  154. /* Remove the editor delete "X" */
  155. div.DTED_Lightbox_Close {
  156. display: none;
  157. }
  158.  
  159. /* Center the buttons at the bottom of the editor window */
  160. div.DTE_Form_Buttons {
  161. width: 300px ; /* arbitrary for now until I know the sixe of the buttons */
  162. margin-left: auto ;
  163. margin-right: auto ;
  164. display: inline-block;
  165. text-align: center;
  166.  
  167. }
  168.  
  169. div.DTE_Form_Buttons button {
  170. text-align: center;
  171. width: 100px !important;
  172. float: none !important;
  173. }
  174.  
  175. /*----------------------------------------------------------------------------------------------*/
  176. /* For jQuery.modal so modal appears over Editor */
  177. /*----------------------------------------------------------------------------------------------*/
  178. .blocker {
  179. z-index: 16 !important;
  180. background-color: rgb(0,0,0) !important;
  181. background-color: rgba(0,0,0,0.25) !important;
  182. }
  183.  
  184. .modal {
  185. z-index: 17 !important;
  186. max-width: 1400px !important;
  187. background-color: white !important;
  188. border: 7px solid #555;
  189. box-shadow: 2px 2px 10px #555;
  190. border-radius: 10px;
  191. -webkit-box-sizing: border-box;
  192. -moz-box-sizing: border-box;
  193. box-sizing: border-box;
  194. margin-top: 10px;
  195. margin-bottom: 10px;
  196. }
  197.  
  198. /*----------------------------------------------------------------------------------------------*/
  199. /* For jQuery.recurrenceinput so modal apears over Editor and is same appearance os other popups*/
  200. /*----------------------------------------------------------------------------------------------*/
  201. div.riform {
  202. box-shadow: none !important;
  203. }
  204.  
  205. /*-------------------------------------------------------------------------*/
  206. /* jQuery.recurrenceinput <input tag modification */
  207. /*-------------------------------------------------------------------------*/
  208. /* daily interval */
  209. #ridailyinterval input[name="ridailyinterval"] {
  210. width: 50px !important;
  211. padding-top: 2px !important;
  212. padding-right: 4px !important;
  213. padding-bottom: 2px !important;
  214. padding-left: 4px !important;
  215. }
  216. /* weekly interval */
  217. #riweeklyinterval input[name="riweeklyinterval"] {
  218. width: 50px !important;
  219. padding-top: 2px !important;
  220. padding-right: 4px !important;
  221. padding-bottom: 2px !important;
  222. padding-left: 4px !important;
  223. }
  224. /* monthly interval */
  225. #rimonthlyinterval input[name="rimonthlyinterval"] {
  226. width: 50px !important;
  227. padding-top: 2px !important;
  228. padding-right: 4px !important;
  229. padding-bottom: 2px !important;
  230. padding-left: 4px !important;
  231. }
  232. /* yearly interval */
  233. #riyearlyinterval input[name="riyearlyinterval"] {
  234. width: 50px !important;
  235. padding-top: 2px !important;
  236. padding-right: 4px !important;
  237. padding-bottom: 2px !important;
  238. padding-left: 4px !important;
  239. }
  240. /* occurence value */
  241. #rirangeoptions input[name="rirangebyoccurrencesvalue"] {
  242. width: 50px !important;
  243. padding-top: 2px !important;
  244. padding-right: 4px !important;
  245. padding-bottom: 2px !important;
  246. padding-left: 4px !important;
  247. margin-bottom: 6px !important;
  248. }
  249. /* occurrence calendar */
  250. #rirangeoptions input[name="rirangebyenddatecalendar"] {
  251. width: 200px !important;
  252. padding-top: 2px !important;
  253. padding-right: 4px !important;
  254. padding-bottom: 2px !important;
  255. padding-left: 4px !important;
  256. }
  257. /*-------------------------------------------------------------------------*/
  258. /* jQuery.recurrenceinput <select tag so they appear like <input tags */
  259. /*-------------------------------------------------------------------------*/
  260. /* template selection */
  261. #rirtemplate select[name="rirtemplate"] {
  262. box-sizing: border-box !important;
  263. background-color: white !important;
  264. }
  265. /* monthly template options selection */
  266. #rimonthlyoptions select[name="rimonthlydayofmonthday"] {
  267. box-sizing: border-box !important;
  268. background-color: white !important;
  269. }
  270.  
  271. #rimonthlyoptions select[name="rimonthlyweekdayofmonthindex"] {
  272. box-sizing: border-box !important;
  273. background-color: white !important;
  274. }
  275.  
  276. #rimonthlyoptions select[name="rimonthlyweekdayofmonth"] {
  277. box-sizing: border-box !important;
  278. background-color: white !important;
  279. }
  280. /* yearly template selection options */
  281. #riyearlyoptions select[name="riyearlydayofmonthmonth"] {
  282. background-color: white !important;
  283. }
  284.  
  285. #riyearlyoptions select[name="riyearlydayofmonthday"] {
  286. background-color: white !important;
  287. }
  288.  
  289. #riyearlyoptions select[name="riyearlyweekdayofmonthindex"] {
  290. background-color: white !important;
  291. }
  292.  
  293. #riyearlyoptions select[name="riyearlyweekdayofmonthday"] {
  294. background-color: white !important;
  295. }
  296.  
  297. #riyearlyoptions select[name="riyearlyweekdayofmonthmonth"] {
  298. background-color: white !important;
  299. }
  300.  
  301. .label {
  302. width: 100px !important;
  303. }
  304.  
  305. /*----------------------------------------------------------------------------------------------*/
  306. /* For jquery.datepicker and jquery.timepicker so the popup has appearance is consistant with other popups */
  307. /*----------------------------------------------------------------------------------------------*/
  308. .ui-datepicker {
  309. background-color: white !important;
  310. border: 7px solid #555 !important;
  311. box-shadow: 2px 2px 10px #555 !important;
  312. border-radius: 10px;
  313. -webkit-box-sizing: border-box;
  314. -moz-box-sizing: border-box;
  315. box-sizing: border-box;
  316. margin-top: 10px;
  317. margin-bottom: 10px;
  318. }
  319.  
  320. .ui-timepicker-wrapper {
  321. background-color: white !important;
  322. border: 7px solid #555 !important;
  323. box-shadow: 2px 2px 10px #555 !important;
  324. border-radius: 10px;
  325. -webkit-box-sizing: border-box;
  326. -moz-box-sizing: border-box;
  327. box-sizing: border-box;
  328. margin-top: 10px;
  329. margin-bottom: 10px;
  330. }
  331.  
  332. /*----------------------------------------------------------------------------------------------*/
  333. /* For modals */
  334. /*----------------------------------------------------------------------------------------------*/
  335. .us3-label {
  336. display: inline-block;
  337. width: 120px;
  338. text-align: right;
  339. }
  340.  
  341. #descEditor {
  342. box-sizing: border-box !important;
  343. background-color: white !important;
  344. }
  345.  
  346. #sdate, #edate {
  347. box-sizing: border-box;
  348. background-color: white;
  349. padding-bottom: 6px;
  350. padding-left: 4px;
  351. padding-right: 4px;
  352. padding-top: 6px;
  353. width: 200px;
  354. }
  355.  
  356. #stime, #etime {
  357. box-sizing: border-box;
  358. background-color: white;
  359. padding-bottom: 6px;
  360. padding-left: 4px;
  361. padding-right: 4px;
  362. padding-top: 6px;
  363. width: 75px;
  364. }
  365.  
  366. /*-----------------------------------------------------------------*/
  367. /* styles for flex box in dtrmodal */
  368. /**/
  369. .flex-container {
  370. display: flex;
  371. width: 100%;
  372. height:330px;
  373. background-color: white;
  374. }
  375.  
  376. .section-top, .panel-bottom {
  377. flex-shrink: 0;
  378. }
  379.  
  380. .flex-item {
  381. background-color: white;
  382. margin: 1px;
  383. }
  384.  
  385. .item1 {
  386. -webkit-flex: 46%;
  387. -ms-flex: 46%;
  388. flex: 46%;
  389. }
  390.  
  391. .item2 {
  392. -webkit-flex: 27%;
  393. -ms-flex: 27%;
  394. flex: 27%;
  395. }
  396.  
  397. .item3 {
  398. -webkit-flex: 27%;
  399. -ms-flex: 27%;
  400. flex: 27%;
  401. }
  402.  
  403.  
  404. </style>
  405.  
  406. <!------------------------------------------------------------------------------------------------------------------->
  407. <!-- Main javascript for the OTCalMaint page -->
  408. <!------------------------------------------------------------------------------------------------------------------->
  409. <script type="text/javascript" language="javascript" class="init">
  410. //----------------------------------------------------------------------------------------------------------------
  411. // Global variables
  412. //----------------------------------------------------------------------------------------------------------------
  413. var editor;
  414. var table;
  415. var dbData;
  416. var searcher;
  417. var cnAllDay = "for the rest of the day";
  418. var cnTo = "<b>to</b>";
  419.  
  420. var action;
  421.  
  422. const ACTION_NONE = "0";
  423.  
  424. const ACTION_ADD = "1";
  425.  
  426. const ACTION_DELETE = "10";
  427. const ACTION_DELETE_ALL = "11";
  428. const ACTION_DELETE_ONLY = "12";
  429. const ACTION_DELETE_FORWARD = "13";
  430. const ACTION_DELETE_IGNORE = "14";
  431.  
  432. const ACTION_EDIT = "20";
  433. const ACTION_EDIT_ALL = "21";
  434. const ACTION_EDIT_ONLY = "22";
  435. const ACTION_EDIT_FORWARD = "23";
  436. const ACTION_EDIT_IGNORE = "24";
  437.  
  438. //*************************************************************************************************************
  439. //*************************************************************************************************************
  440. //
  441. // DATATABLE EDITOR DEFINITIONS
  442. //
  443. //*************************************************************************************************************
  444. //*************************************************************************************************************
  445. //
  446. $(document).ready(function () {
  447. editor = new $.fn.dataTable.Editor({
  448. ajax: "OTCalMaint.php",
  449. table: "#cc-list",
  450. idSrc: "RID",
  451. template: '#OTCalMaintEdit',
  452. fields: [
  453. {
  454. label: "ID:",
  455. name: "id",
  456. attr: {
  457. tabindex: -1
  458. },
  459. },
  460. {
  461. label: "Category:",
  462. name: "category",
  463. attr: {
  464. tabindex: -1
  465. },
  466. },
  467. {
  468. label: "Title:",
  469. name: "title",
  470. attr: {
  471. tabindex: 2
  472. }
  473. },
  474. {
  475. label: "When:",
  476. type: "textarea",
  477. name: "whenHolder",
  478. attr: {
  479. tabindex: 3
  480. },
  481. },
  482. {
  483. label: "Location:",
  484. type: "textarea",
  485. name: "locHolder",
  486. attr: {
  487. tabindex: 4
  488. },
  489. },
  490. {
  491. label: "Description:",
  492. name: "description",
  493. type: "textarea",
  494. attr: {
  495. tabindex: 5
  496. },
  497. },
  498. {
  499. label: "Start:",
  500. name: "start",
  501. type: "datetime",
  502. attr: {
  503. tabindex: -1
  504. },
  505. format: 'dddd, MMMM D, YYYY h:mm A'
  506. },
  507. {
  508. label: "End:",
  509. name: "end",
  510. type: "datetime",
  511. attr: {
  512. tabindex: -1
  513. },
  514. format: 'dddd, MMMM D, YYYY h:mm A'
  515. },
  516. {
  517. label: "All Day:",
  518. name: "allDay",
  519. attr: {
  520. tabindex: -1
  521. },
  522. },
  523. {
  524. label: "Action:",
  525. name: "action",
  526. attr: {
  527. tabindex: -1
  528. },
  529. },
  530. {
  531. label: 'Repeats:',
  532. name: 'rfc5545',
  533. attr: {
  534. tabindex: -1
  535. },
  536. },
  537. {
  538. label: 'Repeat Text:',
  539. name: 'rfcText',
  540. attr: {
  541. tabindex: -1
  542. },
  543. },
  544. {
  545. label: "Recurring Event Id:",
  546. name: "rfcid",
  547. attr: {
  548. tabindex: -1
  549. },
  550. },
  551. {
  552. id: "location",
  553. label: "Location:",
  554. name: "location",
  555. attr: {
  556. tabindex: -1
  557. },
  558. },
  559. {
  560. id: "place",
  561. label: "Place:",
  562. name: "placeID",
  563. attr: {
  564. tabindex: -1
  565. },
  566. },
  567. {
  568. id: "institution",
  569. label: "Institution:",
  570. name: "institution",
  571. attr: {
  572. tabindex: -1
  573. },
  574. },
  575. {
  576. id: "address",
  577. label: "Address",
  578. name: "address",
  579. attr: {
  580. tabindex: -1
  581. },
  582. },
  583. {
  584. id: "city",
  585. label: "City",
  586. name: "city",
  587. attr: {
  588. tabindex: -1
  589. },
  590. },
  591. {
  592. label: "State",
  593. name: "state",
  594. attr: {
  595. tabindex: -1
  596. },
  597. },
  598. {
  599. label: "Country",
  600. name: "country",
  601. attr: {
  602. tabindex: -1
  603. },
  604. },
  605. {
  606. label: "Zipcode",
  607. name: "zipcode",
  608. attr: {
  609. tabindex: -1
  610. },
  611. },
  612.  
  613. {
  614. label: "Neighborhood",
  615. name: "neighborhood",
  616. attr: {
  617. tabindex: -1
  618. },
  619. },
  620. {
  621. label: "Phone",
  622. name: "phone",
  623. attr: {
  624. tabindex: -1
  625. },
  626. },
  627. {
  628. label: "Map",
  629. name: "mapURL",
  630. attr: {
  631. tabindex: -1
  632. },
  633. },
  634. {
  635. label: "Website",
  636. name: "webURL",
  637. attr: {
  638. tabindex: -1
  639. },
  640. },
  641. {
  642. label: "Picture",
  643. name: "locPicURL",
  644. attr: {
  645. tabindex: -1
  646. },
  647. },
  648. {
  649. label: "Latitude:",
  650. name: "latitude",
  651. attr: {
  652. tabindex: -1
  653. },
  654. },
  655. {
  656. label: "Longitude:",
  657. name: "longitude",
  658. attr: {
  659. tabindex: -1
  660. },
  661. }
  662. ]
  663. });
  664.  
  665. //*************************************************************************************************************
  666. //*************************************************************************************************************
  667. //
  668. // ROUTINES FOR THE DATATABLES EDITOR "OPEN", "CLOSE", AND MISCELLANOUS EVENT HANDLERS
  669. //
  670. //*************************************************************************************************************
  671. //*************************************************************************************************************
  672. var openVals;
  673. //-----------------------------------------------------------------------------------
  674. // Routine to handle Datatables Editor plugin open
  675. //-----------------------------------------------------------------------------------
  676. editor.on('open', function (e, type) {
  677. // reset item action
  678. action = ACTION_NONE;
  679.  
  680. // make sure several fields that are 'click' targets are readonly
  681. $('#DTE_Field_whenHolder').attr("readonly", true);
  682. $('#DTE_Field_locHolder').attr("readonly", true);
  683. $('#DTE_Field_description').attr("readonly", true);
  684.  
  685. // assign a UUID to the event if one not present
  686. if (editor.field('id').input().val()) {
  687. ;
  688. } else {
  689. editor.field('id').input().val(UUID.generate()).change();
  690. }
  691.  
  692. // set messages
  693. editor.field('whenHolder').fieldInfo("Click here to set or modify the date, time, or repetitions");
  694. editor.field('locHolder').fieldInfo("Click here to set or modify the location");
  695. editor.field('description').fieldInfo("Click here to set or modify the description");
  696.  
  697. // Load rfc5545 into dtrModal
  698. if (editor.field('rfc5545').input().val()) {
  699. var rfc5545 = editor.field('rfc5545').input().val().replace("RDATE:", "\nRDATE:").replace("EXDATE:", "\nEXDATE:");
  700. $('#recurrenceinput1').recurrenceinput().loadData(rfc5545);
  701.  
  702. // and get the description
  703. var rptdata = $('#recurrenceinput1').recurrenceinput().update();
  704. editor.field('rfcText').input().val(rptdata.description);
  705. $('#repeattext').text("Repeating " + editor.field('rfcText').input().val());
  706.  
  707. } else {
  708. $('#recurrenceinput1').val("");
  709. $('#repeattext').text("Does not repeat ");
  710. $('#recurrenceinput1').recurrenceinput().loadData("RRULE:FREQ=NEVER;");
  711. }
  712.  
  713. // build the 'When' pseudo field
  714. editor.field('whenHolder').input().val(buildWhen());
  715.  
  716. // build the 'Location' pseudo field
  717. editor.field('locHolder').input().val(buildLoc());
  718.  
  719. simple_repeats();
  720.  
  721. // Store the values of the fields on open
  722. openVals = JSON.stringify(editor.get());
  723.  
  724. editor.field('title').input().focus();
  725. });
  726.  
  727. editor.on('preBlur', function (e) {
  728.  
  729. /* do this is a check on changes is wanted, but the default is no to allow click outside editor
  730. // On close, check if the values have changed and ask for closing confirmation if they have
  731. if ( openVals !== JSON.stringify( editor.get() ) ) {
  732. return confirm( 'You have unsaved changes. Are you sure you want to exit?' );
  733. }
  734. */
  735. return (false);
  736.  
  737. });
  738.  
  739. //-----------------------------------------------------------------------------------
  740. // Routine to handle Datatables Editor plugin openclose
  741. //-----------------------------------------------------------------------------------
  742. editor.on('close', function (e, type) {
  743. });
  744.  
  745. //-----------------------------------------------------------
  746. // make sure 'title' always has a value
  747. //-----------------------------------------------------------
  748. editor.field('title').input().on('input', function () {
  749. if (editor.field('title').input().val()) {
  750. editor.field('title').error('');
  751. } else {
  752. editor.field('title').error('A title is required for this event');
  753. editor.field('title').focus();
  754. }
  755. });
  756.  
  757.  
  758. //----------------------------------------------------------------------------------------
  759. // make sure "tabbing" to an empty editor field casues the appropriate modal to appear
  760. //----------------------------------------------------------------------------------------
  761. editor.field('whenHolder').input().on('focus', function () {
  762. if (editor.field('whenHolder').input().val()) {
  763. ;
  764. } else {
  765. editor.field('whenHolder').input().trigger('click');
  766. }
  767. });
  768.  
  769. editor.field('locHolder').input().on('focus', function () {
  770. if (editor.field('locHolder').input().val()) {
  771. ;
  772. } else {
  773. editor.field('locHolder').input().trigger('click');
  774. }
  775. });
  776.  
  777. editor.field('description').input().on('focus', function () {
  778. if (editor.field('description').input().val()) {
  779. ;
  780. } else {
  781. editor.field('description').input().trigger('click');
  782. }
  783. });
  784.  
  785.  
  786. //*************************************************************************************************************
  787. //*************************************************************************************************************
  788. //
  789. // ROUTINES FOR THE "NEW EVENT" AND INLINE "EDIT" AND "DELETE" BUTTONS
  790. //
  791. //*************************************************************************************************************
  792. //*************************************************************************************************************
  793. //----------------------------------------------------------------------------------------
  794. // Create event
  795. //----------------------------------------------------------------------------------------
  796. $('#newevent').on('click', function (e) {
  797. e.preventDefault();
  798. editor
  799. .create({
  800. title: 'Create new event',
  801. buttons: [
  802. 'Add',
  803. { label: 'Cancel', fn: function () { this.close(); } }
  804. ]
  805. })
  806. .set({
  807. title: '',
  808. allDay: '0',
  809. action: '0',
  810. webURL: '',
  811. description: '',
  812. placeID: '',
  813. location: '',
  814. institution: '',
  815. address: '',
  816. city: '',
  817. state: '',
  818. country: '',
  819. zipcode: '',
  820. neighborhood: '',
  821. phone: '',
  822. locPicURL: '',
  823. mapURL: '',
  824. latitude: 0.0,
  825. longitude: 0.0
  826. })
  827. });
  828.  
  829. //----------------------------------------------------------------------------------------
  830. // Edit event
  831. //----------------------------------------------------------------------------------------
  832. $('#cc-list').on('click', 'a.editor_edit', function (e) {
  833. e.preventDefault();
  834. editor
  835. .edit({
  836. title: 'Edit event',
  837. buttons: [
  838. 'Update',
  839. { label: 'Cancel', fn: function () { this.close(); } }
  840. ]
  841. })
  842. });
  843.  
  844. //----------------------------------------------------------------------------------------
  845. // Copy event
  846. //----------------------------------------------------------------------------------------
  847. $('#cc-list').on('click', 'a.editor_copy', function (e) {
  848. e.preventDefault();
  849.  
  850. // get the current row
  851. copyrow = $(this).closest('tr');
  852.  
  853. // in case all row data not loaded, get index of selected row
  854. var ix = copyrow["0"]._DT_RowIndex;
  855.  
  856. // get all the data for the selected row
  857. rowdata = table.row(ix).data();
  858.  
  859. // copy actually does a 'create' but with fields populated from the current (copied) row
  860. editor
  861. .create({
  862. title: 'Create event',
  863. buttons: [
  864. 'Add',
  865. { label: 'Cancel', fn: function () { this.close(); } }
  866. ]
  867. })
  868. .set({
  869. title: rowdata['title'],
  870. allDay: '0',
  871. action: '0',
  872. webURL: rowdata['webURL'],
  873. description: rowdata['description'],
  874. placeID: rowdata['placeID'],
  875. location: rowdata['location'],
  876. institution: rowdata['institution'],
  877. address: rowdata['address'],
  878. city: rowdata['city'],
  879. state: rowdata['state'],
  880. country: rowdata['country'],
  881. zipcode: rowdata['zipcode'],
  882. neighborhood: rowdata['neighborhood'],
  883. phone: rowdata['phone'],
  884. locPicURL: rowdata['locPicURL'],
  885. mapURL: rowdata['mapURL'],
  886. latitude: rowdata['latitude'],
  887. longitude: rowdata['longitude']
  888. })
  889. });
  890.  
  891. //-------------------------------------------------------------------------------------
  892. // Delete an event
  893. //-------------------------------------------------------------------------------------
  894. var delrow;
  895. var rowdata;
  896. $('#cc-list').on('click', 'a.editor_remove', function (e) {
  897. e.preventDefault();
  898.  
  899. // save info on row to be deleted
  900. delrow = $(this).closest('tr');
  901.  
  902. // in case all row data not loaded, get index of selected row
  903. var ix = delrow["0"]._DT_RowIndex;
  904.  
  905. // get all the data for the selected row
  906. rowdata = table.row(ix).data();
  907.  
  908. // determne popup based on existance of repeat string or empty
  909. if (rowdata['rfc5545']) {
  910.  
  911. // open the recurring event delete modal
  912. $("#delrptone").prop("checked", false);
  913. $("#delrpttoend").prop("checked", false);
  914. $("#delrptall").prop("checked", false);
  915.  
  916. $("#delrptModal").modal({showClose: false, escapeClose: false, clickClose: false });
  917.  
  918. } else {
  919. // open the single event delete modal
  920. $("#delsglModal").modal({ showClose: false, escapeClose: false, clickClose: false });
  921. }
  922. });
  923.  
  924. //-----------------------------------------------------------------------
  925. // Routine to handle recurring event delete modal "cancel"
  926. //-----------------------------------------------------------------------
  927. $('#delrptCancel').on('click', function () {
  928.  
  929. // close the delete modal
  930. $.modal.close();
  931. });
  932.  
  933. //-----------------------------------------------------------------------
  934. // Routine to handle single event delete modal "cancel"
  935. //-----------------------------------------------------------------------
  936. $('#delsglCancel').on('click', function () {
  937.  
  938. // close the delete modal
  939. $.modal.close();
  940. });
  941.  
  942. //------------------------------------------------------------------------------------
  943. // Routine to handle recurring event delete modal "OK" and update editor action field
  944. //-----------------------------------------------------------------------
  945. $('#delrptOK').on('click', function () {
  946.  
  947. // decode delete modal radio buttons
  948. if ($("#delrptone").prop('checked')) {
  949. rowdata['action'] = ACTION_DELETE_ONLY;
  950.  
  951. } else if ($("#delrpttoend").prop('checked')) {
  952. rowdata['action'] = ACTION_DELETE_FORWARD;
  953.  
  954. } else if ($("#delrptall").prop('checked')) {
  955. rowdata['action'] = ACTION_DELETE_ALL;
  956.  
  957. } else {
  958. alert("Select an option and press ok or press cancel")
  959. return;
  960. }
  961.  
  962. // close the delete modal
  963. $.modal.close();
  964.  
  965. // tell the editor server code to do the requested delete
  966. editor
  967. .remove(delrow, false, {})
  968. .submit();
  969. });
  970.  
  971. //-----------------------------------------------------------------------------------
  972. // Routine to handle recurring event delete modal "OK" and update editor action field
  973. //-----------------------------------------------------------------------
  974. $('#delsglOK').on('click', function () {
  975.  
  976. // set the action
  977. rowdata['action'] = ACTION_DELETE_ONLY;
  978.  
  979. // close the delete modal
  980. $.modal.close();
  981.  
  982. // tell the editor server code to do the requested delete
  983. editor
  984. .remove(delrow, false, {})
  985. .submit();
  986. });
  987.  
  988.  
  989. //*************************************************************************************************************
  990. //*************************************************************************************************************
  991. //
  992. // ROUTINES FOR THE Editor processing events
  993. //
  994. //*************************************************************************************************************
  995. //*************************************************************************************************************
  996. var editskiprefresh = false;
  997. var editrptaction;
  998. editor
  999. //-----------------------------------------------------------------------
  1000. // On editor page open
  1001. //-----------------------------------------------------------------------
  1002. //.on('open', function (e, mode, action) {
  1003. //})
  1004.  
  1005. //------------------------------------------------------------------------
  1006. // Before data goes to server
  1007. //------------------------------------------------------------------------
  1008. .on('preSubmit', function (e, d, a) {
  1009. var currField;
  1010.  
  1011. // if not a "delete" (remove), validate all required fields
  1012. if (a != "remove" && editskiprefresh == false) {
  1013.  
  1014. // get the new/edited record id
  1015. editrecid = Object.keys(d['data']);
  1016.  
  1017. // title must be present
  1018. if (!d.data[editrecid].title) {
  1019. currField = this.field('title');
  1020. currField.focus();
  1021. currField.error('A title for this event are required.');
  1022. return (false);
  1023. }
  1024.  
  1025. // a start and end time must be present (set the error on 'whenHolder'
  1026. // is start and end time given
  1027. if (!d.data[editrecid].start || !d.data[editrecid].end) {
  1028. currField = this.field('whenHolder');
  1029. currField.focus();
  1030. currField.error('A start and end date and time for this event are required.');
  1031. return (false);
  1032. }
  1033.  
  1034. // a location must be present
  1035. if (!d.data[editrecid].location) {
  1036. currField = this.field('locHolder');
  1037. currField.focus();
  1038. currField.error('A location for this event are required.');
  1039. return (false);
  1040. }
  1041.  
  1042. // a description must be present
  1043. if (!d.data[editrecid].description) {
  1044. currField = this.field('description');
  1045. currField.focus();
  1046. currField.error('A description for this event are required.');
  1047. return (false);
  1048. }
  1049. }
  1050.  
  1051. //----------------------------------------------------------------------
  1052. // Process record add
  1053. //----------------------------------------------------------------------
  1054. if (a == "create") {
  1055.  
  1056. // tell the server it's an 'add'
  1057. d.data['0'].action = ACTION_ADD;
  1058.  
  1059.  
  1060. //----------------------------------------------------------------------
  1061. // Process record edit
  1062. //----------------------------------------------------------------------
  1063. } else if (a == "edit") {
  1064.  
  1065. // if have we already been through preSubmit, submit the edit now
  1066. if (editskiprefresh == true) {
  1067.  
  1068. // get the edited record id
  1069. editrecid = Object.keys(d['data']);
  1070.  
  1071. // tell the server what kind of 'update'
  1072. d.data[editrecid].action = editrptaction;
  1073.  
  1074. // and besure to refresh the list after the update
  1075. editskiprefresh = false
  1076.  
  1077. // now do the update
  1078. return (true);
  1079.  
  1080. // otherwise do the edit span pop-up
  1081. } else {
  1082.  
  1083. // get the edited record id
  1084. editrecid = Object.keys(d['data']);
  1085.  
  1086. // is this a single record, no repeats
  1087. if (!d.data[editrecid].rfc5545) {
  1088. editskiprefresh = false;
  1089. d.data[editrecid].action = ACTION_EDIT_ONLY;
  1090. return (true);
  1091. }
  1092.  
  1093. // after the update type selection, come back here bu don't refreesh the list
  1094. editskiprefresh = true;
  1095. d.data[editrecid].action = ACTION_NONE;
  1096.  
  1097. // reset the options and open the recurring event modal
  1098. $("#editrptone").prop("checked", false);
  1099. $("#editrpttoend").prop("checked", false);
  1100. $("#editrptall").prop("checked", false);
  1101.  
  1102. // open the edit span selection modal;
  1103. $("#editrptModal").modal({ showClose: false, escapeClose: false, clickClose: false });
  1104.  
  1105. // do no processing on the server for now
  1106. return (false);
  1107. }
  1108.  
  1109. //----------------------------------------------------------------------
  1110. // Process record deletion
  1111. //----------------------------------------------------------------------
  1112. } else if (a == "remove") {
  1113.  
  1114.  
  1115. //----------------------------------------------------------------------
  1116. // The proverbial "should never get here"
  1117. //----------------------------------------------------------------------
  1118. } else {
  1119. ;
  1120. }
  1121. })
  1122.  
  1123. //----------------------------------------------------------------------
  1124. // Post-erver processing
  1125. //----------------------------------------------------------------------
  1126. .on('postSubmit', function (e, json, data, action) {
  1127.  
  1128. // for the edit span selection modal, the first time thru do no refresh
  1129. if (editskiprefresh) {
  1130. ;
  1131.  
  1132. // otherwise reload the table with new data
  1133. } else {
  1134. table.ajax.reload(null, true); // try false to hold position
  1135. }
  1136. });
  1137.  
  1138. //------------------------------------------------------------------------
  1139. // routine to implement circular tabbing
  1140. //------------------------------------------------------------------------
  1141. editor.field('description').input().on('focusout', function () {
  1142. editor.field('title').input().focus();
  1143. });
  1144.  
  1145. //-------------------------------------------------------------------------
  1146. // Routine to handle recurring event edit modal "cancel"
  1147. //-------------------------------------------------------------------------
  1148. $('#editrptCancel').on('click', function () {
  1149.  
  1150. // close the edit modal
  1151. editrptaction = ACTION_EDIT_IGNORE;
  1152. $.modal.close();
  1153. });
  1154.  
  1155. //-----------------------------------------------------------------------------------
  1156. // Routine to handle recurring event edit modal "OK" and update editor action field
  1157. //-----------------------------------------------------------------------------------
  1158. $('#editrptOK').on('click', function () {
  1159.  
  1160. // decode edit modal radio buttons
  1161. if ($("#editrptone").prop('checked')) {
  1162. editrptaction = ACTION_EDIT_ONLY;
  1163.  
  1164. } else if ($("#editrpttoend").prop('checked')) {
  1165. editrptaction = ACTION_EDIT_FORWARD;
  1166.  
  1167. } else if ($("#editrptall").prop('checked')) {
  1168. editrptaction = ACTION_EDIT_ALL;
  1169.  
  1170. } else {
  1171. alert("Select an option and press ok or press cancel")
  1172. return;
  1173. }
  1174.  
  1175. // close the edit modal
  1176. $.modal.close();
  1177. editor
  1178. .submit();
  1179. });
  1180.  
  1181.  
  1182. //*************************************************************************************************************
  1183. //*************************************************************************************************************
  1184. //
  1185. // ROUTINES FOR THE "LOCATION" FIELD PROCESSING
  1186. //
  1187. //*************************************************************************************************************
  1188. //*************************************************************************************************************
  1189.  
  1190. //---------------------------------------------------------------------------------------------------------------
  1191. // Routine to handle click on location input field and open "locationpicker" modal
  1192. //---------------------------------------------------------------------------------------------------------------
  1193. editor.field('locHolder').input().on('click', function () {
  1194.  
  1195. // copy input field to modal address field
  1196. var pid = editor.field('placeID').input().val();
  1197. var addr = editor.field('location').input().val();
  1198. var inst = editor.field('institution').input().val();
  1199. var neigh = editor.field('neighborhood').input().val();
  1200. var phone = editor.field('phone').input().val();
  1201. var lat = editor.field('latitude').input().val();
  1202. var lon = editor.field('longitude').input().val();
  1203.  
  1204.  
  1205. // store values into the location modal fields
  1206. $('#us3-address').val(addr);
  1207. $('#us3-institution').val(inst);
  1208. $('#us3-neighborhood').val(neigh);
  1209. $('#us3-phone').val(phone);
  1210. $('#us3-lat').val(lat);
  1211. $('#us3-lon').val(lon);
  1212.  
  1213. // initialize the location picker
  1214. $('#us3').locationpicker({
  1215. location: {
  1216. latitude: lat,
  1217. longitude: lon
  1218. },
  1219. locationName: addr,
  1220. placeId: pid,
  1221. radius: 300,
  1222. inputBinding: {
  1223. //latitudeInput: $('#us3-lat'),
  1224. //longitudeInput: $('#us3-lon'),
  1225. //radiusInput: $('#us3-radius'),
  1226. locationNameInput: $('#us3-address')
  1227. },
  1228.  
  1229. enableAutocomplete: true,
  1230. enableAutocompleteBlur: false,
  1231. enableReverseGeocode: true,
  1232.  
  1233. autocompleteOptions: {
  1234. componentRestrictions: { country: 'us' }
  1235. },
  1236.  
  1237. addressFormat: 'address',
  1238.  
  1239. markerInCenter: true,
  1240.  
  1241. // update location modal when a new location is found
  1242. onchanged: function (currentLocation, radius, isMarkerDropped) {
  1243. var addressComponents = $(this).locationpicker('map').location.addressComponents;
  1244. $('#us3-institution').val(addressComponents.institution).change();
  1245. $('#us3-neighborhood').val(addressComponents.neighborhood).change();
  1246. $('#us3-phone').val(addressComponents.phone).change();
  1247. }
  1248. });
  1249.  
  1250. // open the location modal
  1251. $("#locModal").modal({ showClose: false, escapeClose: false, clickClose: false });
  1252.  
  1253. // if the address field in the modal is empty, give it focus
  1254. if ($('#us3-address').val()) {
  1255. ;
  1256. } else {
  1257. $('#us3-address').focus();
  1258. }
  1259.  
  1260. $('#locModal').on($.modal.OPEN, function (event, modal) {
  1261. $('#us3').locationpicker('autosize');
  1262. });
  1263.  
  1264. });
  1265.  
  1266. //------------------------------------------------------------------------------------
  1267. // Routine to handle location modal "cancel"
  1268. //------------------------------------------------------------------------------------
  1269. $('#locCancel').on('click', function (e) {
  1270. $.modal.close();
  1271. });
  1272.  
  1273. //------------------------------------------------------------------------------------
  1274. // Routine to handle location modal "save" and update editor location fields
  1275. //------------------------------------------------------------------------------------
  1276. $('#locSave').on('click', function () {
  1277. var work = JSON.parse($('#us3').locationpicker('save'));
  1278.  
  1279. editor.field('location').input().val(work.full_location).change();
  1280.  
  1281. // make sure we keep local changes in the modal
  1282. editor.field('institution').input().val($('#us3-institution').val()).change();
  1283. editor.field("neighborhood").input().val($('#us3-neighborhood').val()).change();
  1284. editor.field("phone").input().val($('#us3-phone').val()).change();
  1285.  
  1286. editor.field('placeID').input().val(work.full_placeid).change();
  1287.  
  1288. editor.field("address").input().val(work.addressLine1).change();
  1289.  
  1290. editor.field("city").input().val(work.city).change();
  1291.  
  1292. editor.field("state").input().val(work.stateOrProvince).change();
  1293.  
  1294. editor.field("country").input().val(work.country).change();
  1295.  
  1296. editor.field("zipcode").input().val(work.postalCode).change();
  1297.  
  1298. editor.field("webURL").input().val(work.weburl).change();
  1299.  
  1300. editor.field("mapURL").input().val(work.mapurl).change();
  1301.  
  1302. editor.field("locPicURL").input().val(work.picurl).change();
  1303.  
  1304. editor.field("latitude").input().val(work.lat).change();
  1305.  
  1306. editor.field("longitude").input().val(work.lon).change();
  1307.  
  1308. editor.field('locHolder').error("");
  1309.  
  1310. $.modal.close();
  1311.  
  1312. // build the 'Location' pseudo field
  1313. editor.field('locHolder').input().val(buildLoc()).change();
  1314. editor.field('locHolder').error("");
  1315.  
  1316. editor.field('locHolder').input().focus();
  1317.  
  1318. });
  1319.  
  1320. //------------------------------------------------------------------------------------------
  1321. // Build the Location pseudo field "locHolder"
  1322. //------------------------------------------------------------------------------------------
  1323. function buildLoc() {
  1324. var retstr = "";
  1325.  
  1326. if (editor.field('location').input().val()) {
  1327. retstr = editor.field('location').input().val();
  1328.  
  1329. if (editor.field('neighborhood').input().val()) {
  1330. retstr = retstr + "\n" + "in the '" + editor.field('neighborhood').input().val() + "' neighborhood";
  1331. } else {
  1332. ;
  1333. }
  1334.  
  1335. if (editor.field('institution').input().val()) {
  1336. //if ( ! editor.field('location').input().val().includes(editor.field('institution').input().val())) {
  1337. retstr = retstr + "\n" + "at '" + editor.field('institution').input().val() + "'";
  1338. //} else {
  1339. // retstr = retstr + "\n";
  1340. //}
  1341. } else {
  1342. retstr = retstr + "\n";
  1343. }
  1344. }
  1345. return (retstr);
  1346. }
  1347.  
  1348. /* save for future use
  1349. var destroyCrappyPlugin = function ($elem, eventNamespace) {
  1350. var isInstantiated = !!$.data($elem.get(0));
  1351.  
  1352. if (isInstantiated) {
  1353. $.removeData($elem.get(0));
  1354. $elem.off(eventNamespace);
  1355. $elem.unbind('.' + eventNamespace);
  1356. }
  1357. };
  1358. */
  1359.  
  1360.  
  1361. //*************************************************************************************************************
  1362. //*************************************************************************************************************
  1363. //
  1364. // ROUTINES FOR THE "DESCRIPTION" EDITOR
  1365. //
  1366. //*************************************************************************************************************
  1367. //*************************************************************************************************************
  1368.  
  1369. var postFocus = "";
  1370.  
  1371. //---------------------------------------------------------------------------------------------------------------
  1372. // Routines to handle click on description input field and oopen CKEditor
  1373. //---------------------------------------------------------------------------------------------------------------
  1374. // open the description editor modal and open CKEditor
  1375. editor.field('description').input().on('click', function () {
  1376.  
  1377. // copy description to modal description editor field
  1378. $('#descEditor').val(editor.field('description').input().val());
  1379.  
  1380. // create an instance of CKEditor
  1381. $('#descEditor').ckeditor({
  1382. customConfig: '../../../OTCalMaint/OTCalMaint/OTCalEdit_config.js',
  1383. extraAllowedContent: 'div',
  1384. height: 300
  1385. });
  1386.  
  1387. // Handle the editor coming ready
  1388. CKEDITOR.instances.descEditor.on("instanceReady", function (event) {
  1389.  
  1390. console.log("Editor instance ready");
  1391.  
  1392. // Output self-closing tags the HTML4 way, like <br>.
  1393. //this.dataProcessor.writer.selfClosingEnd = '>';
  1394.  
  1395. // Use line breaks for block elements, tables, and lists.
  1396. var dtd = CKEDITOR.dtd;
  1397. for (var e in CKEDITOR.tools.extend({}, dtd.$nonBodyContent, dtd.$block, dtd.$listItem, dtd.$tableContent)) {
  1398. this.dataProcessor.writer.setRules(e, {
  1399. indent: false,
  1400. breakBeforeOpen: false,
  1401. breakAfterOpen: false,
  1402. breakBeforeClose: false,
  1403. breakAfterClose: false
  1404. });
  1405. }
  1406.  
  1407. // Start in source mode.
  1408. this.setMode('source');
  1409.  
  1410. // open the description editor modal
  1411. $("#descModal").modal({ showClose: false, escapeClose: false, clickClose: false });
  1412. //$('#descEditor').focus();
  1413. });
  1414.  
  1415. // Handle the editor being destroyed
  1416. CKEDITOR.instances.descEditor.on("destroy", function (event) {
  1417.  
  1418. console.log("Editor destroy entered");
  1419.  
  1420. // close the editor modal
  1421. $.modal.close();
  1422.  
  1423. console.log("Focus goes to '" + postFocus + "'");
  1424.  
  1425. if (postFocus != "") {
  1426. editor.field(postFocus).input().focus();
  1427. postFocus = "";
  1428. }
  1429. });
  1430. });
  1431.  
  1432. // Routine to handle description editor modal "cancel" button
  1433. $('#descCancel').on('click', function () {
  1434.  
  1435. postFocus = "description";
  1436.  
  1437. // get rid of CKEditor
  1438. if (CKEDITOR.instances.descEditor) {
  1439. CKEDITOR.instances.descEditor.destroy();
  1440. }
  1441. });
  1442.  
  1443. // Routine to handle description editor modal "save" button and update description field
  1444. $('#descSave').on('click', function () {
  1445. // set the data from the description editor
  1446. editor.field('description').input().val($('#descEditor').val());
  1447.  
  1448. if (editor.field('description').input().val()) {
  1449. editor.field('description').error('');
  1450. } else {
  1451. editor.field('description').error('A description is required for this event');
  1452. editor.field('description').focus();
  1453. }
  1454.  
  1455. postFocus = 'title';
  1456.  
  1457. // get rid of CKEditor
  1458. if (CKEDITOR.instances.descEditor) {
  1459. CKEDITOR.instances.descEditor.destroy();
  1460. }
  1461. });
  1462.  
  1463.  
  1464. //*************************************************************************************************************
  1465. //*************************************************************************************************************
  1466. //
  1467. // ROUTINES FOR THE 'WHEN", "REPEATS" FIELDS AND DTR MODAL EVENTS
  1468. //
  1469. //*************************************************************************************************************
  1470. //*************************************************************************************************************
  1471. //---------------------------------------------------------------------------------------------------------------
  1472. // Routine to handle click on "when' input field and open date-time-repeat modal
  1473. //---------------------------------------------------------------------------------------------------------------
  1474. // open the date-time-repeat modal modal
  1475. editor.field('whenHolder').input().on('click', function () {
  1476.  
  1477. // set values in the modal
  1478. if (!setDTRModal()) {
  1479. return (false);
  1480. }
  1481.  
  1482. window.addEventListener('resize', winResize);
  1483.  
  1484. window.addEventListener('scroll', winScroll);
  1485.  
  1486. // open the date-time-repeats modal
  1487. $("#dtrModal").modal({ showClose: false, escapeClose: false, clickClose: false });
  1488.  
  1489. });
  1490.  
  1491. function winScroll() {
  1492. $('#sdate').blur();
  1493. $('#edate').blur();
  1494. //$('#rangedatepicker').blur();
  1495. }
  1496.  
  1497. function winResize() {
  1498. $('#sdate').datepicker('hide');
  1499. $('#edate').datepicker('hide');
  1500. //$('#rangedatepicker').datepicker('hide');
  1501. winScroll();
  1502. }
  1503.  
  1504. //------------------------------------------------------------------------------------------
  1505. // process 'cbAllDay' state change
  1506. //------------------------------------------------------------------------------------------
  1507. $('#cbAllDay').on('click', function () {
  1508. if ($('#cbAllDay').prop("checked")) {
  1509. $('#edate').hide();
  1510. $('#etime').hide();
  1511. $('#timeDesc').html(cnAllDay);
  1512. } else {
  1513. if (!setEnd()) {
  1514. return;
  1515. }
  1516. $('#edate').show();
  1517. $('#etime').show();
  1518. $('#etime').focus();
  1519. $('#timeDesc').html(cnTo);
  1520. }
  1521. });
  1522.  
  1523. //------------------------------------------------------------------------------------------
  1524. // Routine to handle date-time-repeat modal "cancel" button
  1525. //------------------------------------------------------------------------------------------
  1526. $('#dtrCancel').on('click', function () {
  1527.  
  1528. // make the cursor stay in this field
  1529. //editor.field('whenHolder').input().focus();
  1530.  
  1531. // close the date-time-repeat editor modal
  1532. $.modal.close();
  1533.  
  1534. });
  1535.  
  1536. //---------------------------------------------------------------------------------------------
  1537. // Routine to handle date-time-repeat modal "save" button and update dates, times, and repeats
  1538. //----------------------------------------------------------------------------------------------
  1539. $('#dtrSave').on('click', function () {
  1540.  
  1541. // update repeat
  1542. var rptdata = $('#recurrenceinput1').recurrenceinput().update();
  1543. $('#recurrenceinput1').val(rptdata.result);
  1544.  
  1545. editor.field('rfc5545').input().val(rptdata.result);
  1546. editor.field('rfcText').input().val(rptdata.description);
  1547.  
  1548. // get the data from the date-time-repeat modal and update db fields
  1549. var wrks = $('#sdate').val() + ' ' + $('#stime').val();
  1550. editor.field('start').input().val(wrks);
  1551.  
  1552. // see if it's an all day event
  1553. if (editor.field('allDay').input().val() == '1') {
  1554. editor.field('end').input().val(null);
  1555. } else {
  1556. var wrke = $('#edate').val() + ' ' + $('#etime').val();
  1557. editor.field('end').input().val(wrke);
  1558. }
  1559.  
  1560. // store repeat field
  1561. editor.field('rfc5545').input().val($('#recurrenceinput1').val());
  1562.  
  1563. // close the editor modal
  1564. $.modal.close();
  1565.  
  1566. // rebuild the 'When' pseudo field
  1567. editor.field('whenHolder').input().val(buildWhen());
  1568. editor.field('whenHolder').error("");
  1569.  
  1570. // keep cursoe in this field
  1571. editor.field('whenHolder').input().focus();
  1572.  
  1573. });
  1574.  
  1575.  
  1576.  
  1577. //---------------------------------------------------------------------------------------------------------------
  1578. // Routine to initialize the repeating date plugin
  1579. //---------------------------------------------------------------------------------------------------------------
  1580. function simple_repeats(e) {
  1581. $('#recurrenceinput1').recurrenceinput({ startField: "connected_start" });
  1582.  
  1583. $("#sdate").datepicker({
  1584. dateFormat: 'DD, MM d, yy'
  1585. });
  1586.  
  1587. $("#edate").datepicker({
  1588. dateFormat: 'DD, MM d, yy'
  1589. });
  1590.  
  1591. $('#stime').timepicker({
  1592. 'showDuration': true,
  1593. 'timeFormat': 'g:i A'
  1594. });
  1595.  
  1596. $('#etime').timepicker({
  1597. 'showDuration': true,
  1598. 'timeFormat': 'g:i A'
  1599. });
  1600.  
  1601. $('#rangedatepicker').datepicker({
  1602. dateFormat: 'DD, MM d, yy'
  1603. });
  1604.  
  1605. $('#specdatespicker').datepicker({
  1606. dateFormat: 'DD, MM d, yy'
  1607. });
  1608. }
  1609.  
  1610. //----------------------------------------------------------------------------------
  1611. // Build the "when' field contents
  1612. //----------------------------------------------------------------------------------
  1613. function buildWhen() {
  1614. var retstr;
  1615. var rpts = "";
  1616.  
  1617. // if there is a start date, use it
  1618. if (editor.field('start').input().val()) {
  1619.  
  1620. // if there is a repeat string, use it
  1621. if (editor.field('rfc5545').input().val()) {
  1622. rpts = "\n" + "and repeats " + editor.field('rfcText').input().val();
  1623.  
  1624. // otherwise, the when field needs to be clicked to open the date-time-repeats modal
  1625. } else {
  1626. rpts = "\n";
  1627. }
  1628.  
  1629. var sdate = editor.field('start').input().val();
  1630.  
  1631. if (editor.field('allDay').input().val() == '1') {
  1632. retstr = sdate + " for the rest of the day" + " " + rpts;
  1633.  
  1634. } else {
  1635. var edate = editor.field('end').input().val();
  1636. retstr = sdate + " to " + edate + " " + rpts;
  1637. }
  1638.  
  1639. // otherwise, the when field needs to be clicked to open the date-time-repeats modal
  1640. } else {
  1641. retstr = "";
  1642. }
  1643. return (retstr);
  1644. }
  1645.  
  1646. //----------------------------------------------------------------------------------
  1647. // Set the values in the dtrModal for dates, times, and repetitions
  1648. //----------------------------------------------------------------------------------
  1649. function setDTRModal() {
  1650.  
  1651. // setup for 'allDay'
  1652. if (editor.field('allDay').input().val() == '1') {
  1653. $('#cbAllDay').prop("checked", true);
  1654. $('#edate').hide();
  1655. $('#etime').hide();
  1656. $('#timeDesc').html(cnAllDay);
  1657. setStart();
  1658. } else {
  1659. $('cbAllDay').prop("checked", false);
  1660. $('#edate').show();
  1661. $('#time').show();
  1662. $('#timeDesc').html(cnTo);
  1663. setStart();
  1664. if (!setEnd()) {
  1665. return (false);
  1666. }
  1667. //return (true);
  1668. }
  1669. return (true);
  1670. }
  1671.  
  1672. //----------------------------------------------------------------------------------
  1673. // Setup the start date and time in the dtrModal
  1674. //----------------------------------------------------------------------------------
  1675. function setStart() {
  1676.  
  1677. if (editor.field('start').input().val()) {
  1678. var wrks = moment(editor.field('start').input().val(), 'dddd, MMMM D, YYYY h:mm A');
  1679. $('#sdate').val(moment(wrks).format('dddd, MMMM D, YYYY'));
  1680. $('#sdate').datepicker('setDate', moment(wrks).format('dddd, MMMM D, YYYY'));
  1681. $('#stime').val(moment(wrks).format('h:mm A'));
  1682. } else {
  1683. var wrks = moment();
  1684. wrks = roundTime(wrks, moment.duration(30, "minutes"), "ceil");
  1685. $('#sdate').val(moment(wrks).format('dddd, MMMM D, YYYY'));
  1686. $('#sdate').datepicker('setDate', moment(wrks).format('dddd, MMMM D, YYYY'));
  1687. $('#stime').val(moment(wrks).format('h:mm A'));
  1688. }
  1689. }
  1690.  
  1691. //----------------------------------------------------------------------------------
  1692. // general time rounding function (up use "ceil", down use "floor")
  1693. //----------------------------------------------------------------------------------
  1694. function roundTime(date, duration, method) {
  1695. return moment(Math[method]((+date) / (+duration)) * (+duration));
  1696. }
  1697.  
  1698. //-------------------------------------------------------------------------------------------------------------
  1699. // Setup end date and time
  1700. //-------------------------------------------------------------------------------------------------------------
  1701. function setEnd() {
  1702.  
  1703. if (editor.field('end').input().val()) {
  1704. if (editor.field('allDay').input().val() == "1") {
  1705. editor.field('end').input().val(null);
  1706. $('#edate').hide();
  1707. $('#etime').hide();
  1708. $('#timeDesc').html(cnAllDay);
  1709. return (true);
  1710. } else {
  1711. var wrks = moment(editor.field('start').input().val(), 'dddd, MMMM D, YYYY h:mm A');
  1712. var wrke = moment(editor.field('end').input().val(), 'dddd, MMMM D, YYYY h:mm A');
  1713.  
  1714. if (moment(wrke).isSameOrAfter(wrks, ' minute')) {
  1715. $('#edate').val(moment(wrke).format('dddd, MMMM D, YYYY'));
  1716. $('#edate').datepicker('setDate', moment(wrke).format('dddd, MMMM D, YYYY'));
  1717. $('#etime').val(moment(wrke).format('h:mm A'));
  1718. return (true);
  1719. } else {
  1720. alert("End date and time must occur after starting date and time.")
  1721. return (false);
  1722. }
  1723.  
  1724. $('#edate').show();
  1725. $('#time').show();
  1726. $('#timeDesc').html(cnTo);
  1727. return (true);
  1728. }
  1729. } else {
  1730. var wrks = moment($('#sdate').val() + ' ' + $('#stime').val(), 'dddd, MMMM D, YYYY h:mm A');
  1731. $('#edate').val(moment(wrks).format('dddd, MMMM D, YYYY'));
  1732. $('#edate').datepicker('setDate', moment(wrks).format('dddd, MMMM D, YYYY'));
  1733. $('#etime').val(moment(wrks).add(1, 'hours').format('h:mm A'));
  1734. return (true);
  1735. }
  1736. }
  1737.  
  1738. //*************************************************************************************************************
  1739. //**************************************************************************************************************
  1740. //
  1741. // ROUTINES FOR THE 'SEARCH" and "RESET" BUTTONS
  1742. //
  1743. //*************************************************************************************************************
  1744. //*************************************************************************************************************
  1745. //---------------------------------------------------------------------------------------------------------------
  1746. // Routine to handle click on "Search' button
  1747. //---------------------------------------------------------------------------------------------------------------
  1748. $('#btnSearch').on('click', function () {
  1749.  
  1750. // clear the search parameters
  1751. $('input.column_filter').val('');
  1752. $('input.global_filter').val('');
  1753.  
  1754. // now the table search parameters
  1755. table.search('').columns().search('').draw();
  1756.  
  1757. // start search modal plugin
  1758. searcher.openSearch();
  1759. });
  1760.  
  1761. //---------------------------------------------------------------------------------------
  1762. // reset the list to unfiltered state
  1763. //---------------------------------------------------------------------------------------
  1764. $('#btnReset').on('click', function () {
  1765.  
  1766. // clear the search parameters
  1767. $('input.column_filter').val('');
  1768. $('input.global_filter').val('');
  1769.  
  1770. // now the table search parameters
  1771. table.search('').columns().search('').draw();
  1772.  
  1773. // finally, reload the table
  1774. table.ajax.reload(null, true); // try false to hold position
  1775. });
  1776.  
  1777.  
  1778.  
  1779. //*************************************************************************************************************
  1780. //*************************************************************************************************************
  1781. //
  1782. // DATATABLES DEFINITIONS
  1783. //
  1784. //*************************************************************************************************************
  1785. table = $('#cc-list').DataTable({
  1786. processing: true,
  1787. serverSide: true,
  1788. paging: true,
  1789. searching: true,
  1790. select: true,
  1791. responsive: true,
  1792. ordering: true,
  1793. orderFixed: [0, 'asc'],
  1794.  
  1795. dom: 'lrtip',
  1796.  
  1797. ajax: {
  1798. url: "OTCalMaint.php",
  1799. type: "POST"
  1800. },
  1801. columns: [
  1802. {
  1803. "name": "start",
  1804. "data": "start",
  1805. "searchable": true
  1806. },
  1807. {
  1808. "name": "end",
  1809. "data": "end",
  1810. "searchable": true
  1811. },
  1812. {
  1813. "name": "title",
  1814. "data": "title",
  1815. "searchable": true
  1816. },
  1817. {
  1818. "name": "description",
  1819. "data": "description",
  1820. "searchable": true,
  1821. "visible": false
  1822. },
  1823. {
  1824. "name": "location",
  1825. "data": "location",
  1826. "searchable": true,
  1827. "visible": false
  1828. },
  1829. {
  1830. "name": "institution",
  1831. "data": "institution",
  1832. "searchable": true,
  1833. "visible": false
  1834. },
  1835. {
  1836. "name": "address",
  1837. "data": "address",
  1838. "searchable": true,
  1839. "visible": false
  1840. },
  1841. {
  1842. "name": "city",
  1843. "data": "city",
  1844. "searchable": true,
  1845. "visible": false
  1846. },
  1847. {
  1848. "name": "state",
  1849. "data": "state",
  1850. "searchable": true,
  1851. "visible": false
  1852. },
  1853. {
  1854. "name": "country",
  1855. "data": "country",
  1856. "searchable": true,
  1857. "visible": false
  1858. },
  1859. {
  1860. "name": "zipcode",
  1861. "data": "zipcode",
  1862. "searchable": true,
  1863. "visible": false
  1864. },
  1865. {
  1866. "name": "neighborhood",
  1867. "data": "neighborhood",
  1868. "searchable": true,
  1869. "visible": false
  1870. },
  1871. {
  1872. "name": "phone",
  1873. "data": "phone",
  1874. "searchable": true,
  1875. "visible": false
  1876. },
  1877. {
  1878. "name": "latitude",
  1879. "data": "latitude",
  1880. "searchable": true,
  1881. "visible": false
  1882. },
  1883. {
  1884. "name": "longitude",
  1885. "data": "longitude",
  1886. "searchable": true,
  1887. "visible": false
  1888. },
  1889. {
  1890. "name": "category",
  1891. "data": "category",
  1892. "searchable": true,
  1893. "visible": false
  1894. },
  1895. {
  1896. "name": "allday",
  1897. "data": "allDay",
  1898. "searchable": true,
  1899. "visible": false
  1900. },
  1901. {
  1902. "name": "whenHold",
  1903. "data": "whenHold",
  1904. "searchable": true,
  1905. "visible": false
  1906. },
  1907. {
  1908. data: null,
  1909. searchable: false,
  1910. className: "center",
  1911. defaultContent: '<a href="" class="editor_edit">Edit</a> / <a href="" class="editor_copy">Copy</a> / <a href="" class="editor_remove">Delete</a>'
  1912. }
  1913. ],
  1914. columnDefs: [
  1915. {
  1916. "targets": 0,
  1917. "searchable": false,
  1918. "data": null,
  1919. "title": "Date",
  1920. "width": "10%",
  1921. "render": function (data, type, row, meta) {
  1922. var wrks = moment(row.start, 'dddd, MMMM D, YYYY h:mm A');
  1923. var wrke = moment(row.end, 'dddd, MMMM D, YYYY h:mm A');
  1924. var wrkd = moment(wrks).format('ddd, MMM D');
  1925. return "" + wrkd;
  1926. }
  1927. },
  1928. {
  1929. "targets": 1,
  1930. "searchable": false,
  1931. "data": null,
  1932. "title": "Time",
  1933. "width": "14%",
  1934. "render": function (data, type, row, meta) {
  1935. var wrks = moment(row.start, 'dddd, MMMM D, YYYY h:mm A');
  1936. var wrke = moment(row.end, 'dddd, MMMM D, YYYY h:mm A');
  1937.  
  1938. if (row.allDay == '1') {
  1939. var wrkd = moment(wrks).format('h:mm A') + " - All Day";
  1940. } else {
  1941. var wrkd = moment(wrks).format('h:mm A') + " - " + moment(wrke).format('h:mm A');
  1942. }
  1943.  
  1944. return "" + wrkd;
  1945. }
  1946. },
  1947. {
  1948. "targets": 2,
  1949. "searchable": false,
  1950. "data": null,
  1951. "title": "Event and Location",
  1952. "width": "60%",
  1953. "render": function (data, type, row, meta) {
  1954. var wloc = "";
  1955. var wrkt = "";
  1956. wrkt = row.title + " - " + row.institution;
  1957. return wrkt;
  1958.  
  1959. //return "" + wrkt.trim();
  1960. }
  1961. }
  1962. ],
  1963. buttons: [
  1964. {
  1965. extend: "create",
  1966. editor: editor,
  1967. formButtons: [
  1968. 'Create',
  1969. { label: 'Cancel', fn: function () { this.close(); } }
  1970. ]
  1971. },
  1972. {
  1973. extend: "edit",
  1974. editor: editor,
  1975. formButtons: [
  1976. 'Edit',
  1977. { label: 'Cancel', fn: function () { this.close(); } }
  1978. ]
  1979. },
  1980. {
  1981. extend: "remove",
  1982. editor: editor,
  1983. formButtons: [
  1984. 'Delete',
  1985. { label: 'Cancel', fn: function () { this.close(); } }
  1986. ]
  1987. }
  1988. ]
  1989. });
  1990.  
  1991. //-----------------------------------------------------------------------------------------------
  1992. // Instantiate the Searcher - NOTE: must be done after Datatable is defined
  1993. //-----------------------------------------------------------------------------------------------
  1994. searcher = new $.OTSearcher($('body'),
  1995. {
  1996. searchTarget: { name: "Datatables", table: table },
  1997. searchType: "static",
  1998. searchColumns: [
  1999. { name: "Start", column: "whenHold" },
  2000. { name: "Title", column: "title" },
  2001. { name: "Description", column: "description" },
  2002. { name: "Location", column: "location" },
  2003. { name: "Institution", column: "institution" },
  2004. { name: "Address", column: "address" },
  2005. { name: "City", column: "city" },
  2006. { name: "State", column: "state" },
  2007. { name: "Country", column: "country" },
  2008. { name: "Zipcode", column: "zipcode" },
  2009. { name: "Neighborhood", column: "neighborhood" },
  2010. { name: "Telephone", column: "phone" }
  2011. ],
  2012. global: true,
  2013. position: "right",
  2014. escapeClose: false,
  2015. clickClose: false,
  2016. showClose: false,
  2017. width: '500px',
  2018. height: '600px',
  2019. debug: false
  2020. });
  2021. });
  2022. </script>
  2023. </head>
  2024.  
  2025. <!-- ************************************************************************************************************ -->
  2026. <!-- ************************************************************************************************************ -->
  2027. <!-- Main datatable and supporting modals HTML defintion -->
  2028. <!-- ************************************************************************************************************ -->
  2029. <!-- ************************************************************************************************************ -->
  2030. <body class="dt-example">
  2031. <div id="OTCalMaintEdit">
  2032. <editor-field name="title"></editor-field>
  2033. <editor-field name="whenHolder"></editor-field>
  2034. <editor-field name="locHolder"></editor-field>
  2035. <editor-field name="description"></editor-field>
  2036.  
  2037. <fieldset class="hiddendata" style="display: block;">
  2038. <editor-field name="id"></editor-field>
  2039. <editor-field name="category"></editor-field>
  2040. <editor-field name="start"></editor-field>
  2041. <editor-field name="end"></editor-field>
  2042. <editor-field name="allDay"></editor-field>
  2043. <editor-field name="action"></editor-field>
  2044. <editor-field name="rfc5545"></editor-field>
  2045. <editor-field name="rfcText"></editor-field>
  2046. <editor-field name="rfcid"></editor-field>
  2047. <editor-field name="location"></editor-field>
  2048. <editor-field name="placeID"></editor-field>
  2049. <editor-field name="institution"></editor-field>
  2050. <editor-field name="address"></editor-field>
  2051. <editor-field name="city"></editor-field>
  2052. <editor-field name="state"></editor-field>
  2053. <editor-field name="country"></editor-field>
  2054. <editor-field name="zipcode"></editor-field>
  2055. <editor-field name="neighborhood"></editor-field>
  2056. <editor-field name="phone"></editor-field>
  2057. <editor-field name="webURL"></editor-field>
  2058. <editor-field name="mapURL"></editor-field>
  2059. <editor-field name="locPicURL"></editor-field>
  2060. <editor-field name="latitude"></editor-field>
  2061. <editor-field name="longitude"></editor-field>
  2062. </fieldset>
  2063. </div>
  2064.  
  2065. <center><h1>Celtic Computing Calendar Event Maintenance</h1></center>
  2066. <br />
  2067. <div>
  2068. <button style="float:left;" id="newevent" class="otbuttons" tabindex="0">New Event</button>
  2069. <button style="float:right;" id="btnReset" class="otbuttons" tabindex="0">Reset</button>
  2070. <button style="float:right;" id="btnSearch" class="otbuttons" tabindex="0">Search</button>
  2071. </div>
  2072. <br />
  2073. <br />
  2074. <table id="cc-list" class="display" cellspacing="0" width="100%">
  2075. <thead>
  2076. <tr>
  2077. <th style="text-align: left;">Date</th>
  2078. <th style="text-align: left;">Time</th>
  2079. <th style="text-align: left;">Event and Location</th>
  2080. <th style="text-align: left; visibility: hidden;">Description</th>
  2081. <th style="text-align: left; visibility: hidden;">Location</th>
  2082. <th style="text-align: left; visibility: hidden;">Institution</th>
  2083. <th style="text-align: left; visibility: hidden;">Address</th>
  2084. <th style="text-align: left; visibility: hidden;">City</th>
  2085. <th style="text-align: left; visibility: hidden;">State</th>
  2086. <th style="text-align: left; visibility: hidden;">Country</th>
  2087. <th style="text-align: left; visibility: hidden;">Zipcode"
  2088. <th style="text-align: left; visibility: hidden;">Neighborhood</th>
  2089. <th style="text-align: left; visibility: hidden;">Phone</th>
  2090. <th style="text-align: left; visibility: hidden;">Latitude</th>
  2091. <th style="text-align: left; visibility: hidden;">Longitude</th>
  2092. <th style="text-align: left; visibility: hidden;">Category</th>
  2093. <th style="text-align: left; visibility: hidden;">Allday</th>
  2094. <th style="text-align: left; visibility: hidden;">Whenhold</th>
  2095. <th style="text-align: left;">Edit / Copy / Delete</th>
  2096. </tr>
  2097. </thead>
  2098. <tbody>
  2099. <tr>
  2100. <td style="text-align: left;"></td>
  2101. <td style="text-align: left;"></td>
  2102. </tr>
  2103. </tbody>
  2104. </table>
  2105.  
  2106. <!------------------------------------------------------------------------------------------------------------------->
  2107. <!-- Modal for Google based location selection -->
  2108. <!------------------------------------------------------------------------------------------------------------------->
  2109. <div class="modal" id="locModal" tabindex="-1" style="display:none; width: 660px">
  2110. <div class="modal-dialog">
  2111. <div class="modal-content">
  2112. <div class="modal-header">
  2113. <center><h4 class="modal-title">Event Location</h4></center>
  2114. </div>
  2115. <div class="modal-body">
  2116. <div class="form-horizontal" style="width: 550px">
  2117. <div class="form-group">
  2118. <label class="us3-label col-sm-2 control-label">Address:&nbsp;&nbsp;</label>
  2119. <input type="text" class="form-control" id="us3-address" style="width: 400px" />
  2120. </div>
  2121. <p></p>
  2122. <div class="form-group">
  2123. <input type="text" class="form-control" style="display:none; width: 400px" id="us3-lat"/>
  2124. <input type="text" class="form-control" style="display:none; width: 400px" id="us3-lon" />
  2125.  
  2126. <label class="us3-label p-r-small col-sm-2 control-label">Neighborhood:&nbsp;&nbsp;</label>
  2127. <input type="text" class="form-control" style="width: 400px" id="us3-neighborhood" />
  2128. <p></p>
  2129. <label class="us3-label p-r-small col-sm-2 control-label">Institution:&nbsp;&nbsp;</label>
  2130. <input type="text" class="form-control" style="width: 400px" id="us3-institution" />
  2131. <p></p>
  2132. <label class="us3-label col-sm-2 control-label">Phone:&nbsp;&nbsp;</label>
  2133. <input type="text" class="form-control" id="us3-phone" style="width: 400px" />
  2134. </div>
  2135. <p></p>
  2136. <center><div id="us3" style="width: 520px; height: 250px;"></div></center>
  2137. </div>
  2138. </div>
  2139. <div class="modal-footer">
  2140. <p></p>
  2141. <center>
  2142. <button type="button" class="otbuttons" id="locSave">Save</button>
  2143. <button type="button" class="otbuttons" id="locCancel">Cancel</button>
  2144. </center>
  2145. </div>
  2146. </div>
  2147. <!-- /.modal-content -->
  2148. </div>
  2149. <!-- /.modal-dialog -->
  2150. </div>
  2151.  
  2152. <!------------------------------------------------------------------------------------------------------------------->
  2153. <!-- Modal for CKEditor event description editing -->
  2154. <!------------------------------------------------------------------------------------------------------------------->
  2155. <div class="modal" id="descModal" tabindex="-1" style="display:none; width: 1000px; height: 625px">
  2156. <div class="modal-dialog">
  2157. <div class="modal-content">
  2158. <div class="modal-header">
  2159. <center><h4 class="modal-title">Event Description Editing</h4></center>
  2160. </div>
  2161. <div class="modal-body">
  2162. <div class="form-horizontal">
  2163. <textarea id="descEditor" name="descEditor"></textarea>
  2164. </div>
  2165. </div>
  2166. <div class="modal-footer">
  2167. <p></p>
  2168. <center>
  2169. <button type="button" class="otbuttons" id="descSave">Save</button>
  2170. <button type="button" class="otbuttons" id="descCancel">Cancel</button>
  2171. </center>
  2172. </div>
  2173. </div>
  2174. <!-- /.modal-content -->
  2175. </div>
  2176. <!-- /.modal-dialog -->
  2177. </div>
  2178.  
  2179. <!------------------------------------------------------------------------------------------------------------------->
  2180. <!-- Modal for date-time-repeat editing -->
  2181. <!------------------------------------------------------------------------------------------------------------------->
  2182. <div class="modal" id="dtrModal" tabindex="-1" style="display: none; width: 1225px; height: 590px;">
  2183. <div class="modal-dialog">
  2184. <div class="modal-content">
  2185. <div class="modal-header" style="height: 150px;">
  2186. <center><h4 class="modal-title">Event Date and Time Editing</h4></center>
  2187. <p id="basicExample" style="text-align:center">
  2188. <span id="timeHdr"><b>From</b></span>&nbsp&nbsp
  2189. <input id="sdate" type="text" class="date start" />&nbsp&nbsp
  2190. <input id="stime" type="text" class="time start" />&nbsp&nbsp&nbsp
  2191. <span id="timeDesc"><b>to</b></span>&nbsp&nbsp
  2192. <input id="etime" type="text" class="time end" />&nbsp&nbsp
  2193. <input id="edate" type="text" class="date end" />&nbsp&nbsp&nbsp
  2194. <span id="timeDesc"><b>OR</b></span>&nbsp&nbsp
  2195. <b><label>All Day</label></b>
  2196. <input type="checkbox" id="cbAllDay">
  2197. <br />
  2198. <br />
  2199. <textarea class="ridisplay" id="repeattext" rows="2" style="width:100%; background-color: white; text-align: center; border: none; resize: none;"></textarea>
  2200. </p>
  2201.  
  2202. <script>
  2203. //---------------------------------------------------------------------------------
  2204. // Routine to handle date time changes to insure start preceeds the end
  2205. //---------------------------------------------------------------------------------
  2206. $("#sdate, #stime, #edate, #etime").on('change', function (e) {
  2207. // e.preventDefault();
  2208.  
  2209. var minutes;
  2210. var wdate;
  2211.  
  2212. if (this.id == "sdate") {
  2213.  
  2214. wdate = moment($('#sdate').val(), 'dddd, MMMM D, YYYY');
  2215.  
  2216. $('#edate').val(moment(wdate).format('dddd, MMMM D, YYYY'));
  2217. $('#edate').datepicker('setDate', moment(wdate).format('dddd, MMMM D, YYYY'));
  2218.  
  2219. }
  2220.  
  2221. if (editor.field('allDay').input().val() != "1") {
  2222. // get the current start and end time from the record
  2223. if (editor.field('start').input().val() && editor.field('end').input().val()) {
  2224. var rsdt = moment(editor.field('start').input().val(), 'dddd, MMMM D, YYYY h:mm A');
  2225. var redt = moment(editor.field('end').input().val(), 'dddd, MMMM D, YYYY h:mm A');
  2226. minutes = redt.diff(rsdt, 'minutes');
  2227.  
  2228. } else {
  2229. minutes = 60;
  2230. }
  2231.  
  2232. var sdt = moment($('#sdate').val() + ' ' + $('#stime').val(), 'dddd, MMMM D, YYYY h:mm A');
  2233. var edt = moment($('#edate').val() + ' ' + $('#etime').val(), 'dddd, MMMM D, YYYY h:mm A');
  2234.  
  2235. if (sdt > edt) {
  2236. if (this.id == "edate" || this.id == "etime") {
  2237. sdt = moment(edt).subtract(minutes, "minutes");
  2238. } else {
  2239. edt = moment(sdt).add(minutes, "minutes");
  2240. }
  2241.  
  2242. } else if (sdt < edt) {
  2243. ;
  2244. } else {
  2245. edt = moment(sdt).add(minutes, "minutes");
  2246. }
  2247.  
  2248. $('#sdate').val(moment(sdt).format('dddd, MMMM D, YYYY'));
  2249. $('#sdate').datepicker('setDate', moment(sdt).format('dddd, MMMM D, YYYY'));
  2250. $('#stime').val(moment(sdt).format('h:mm A'));
  2251.  
  2252. $('#edate').val(moment(edt).format('dddd, MMMM D, YYYY'));
  2253. $('#edate').datepicker('setDate', moment(edt).format('dddd, MMMM D, YYYY'));
  2254. $('#etime').val(moment(edt).format('h:mm A'));
  2255. }
  2256. });
  2257.  
  2258. </script>
  2259.  
  2260. </div>
  2261. <div class="modal-body" style="display: inline;">
  2262. <div class="flex-container">
  2263. <div class="flex-item item1">
  2264. <textarea id='recurrenceinput1' name='repeat' style="display:none; width:100%;"></textarea>
  2265. <div id="recurrarea">
  2266. <div class="riform" id="rishow">
  2267. <form id="biform">
  2268. <div id="messagearea" style="display: none;"> </div>
  2269. <div id="rirtemplate">
  2270. <label for="repeatrtemplate" class="label"> Repeats: </label>
  2271. <select id="rirtemplate" name="rirtemplate" class="field">
  2272. <option value="never">Never </option>
  2273. <option value="daily">Daily </option>
  2274. <option value="weekdays">Weekday </option>
  2275. <option value="weekly">Weekly </option>
  2276. <option value="monthly">Monthly </option>
  2277. <option value="yearly">Yearly </option>
  2278. </select>
  2279. <div>
  2280. <div id="riformfields">
  2281. <div id="ridailyinterval" class="rifield" style="">
  2282. <label for="repeatdailyinterval" class="label"> Repeat every: </label>
  2283. <div class="field"> <input size="2" value="1" name="ridailyinterval" id="repeatdailyinterval" type="text"> days </div>
  2284. </div>
  2285. <div id="riweeklyinterval" class="rifield" style="display: none;">
  2286. <label for="repeatweeklyinterval" class="label"> Repeat every: </label>
  2287. <div class="field"> <input size="2" value="1" name="riweeklyinterval" id="repeatweeklyinterval" type="text"> week(s) </div>
  2288. </div>
  2289. <div id="riweeklyweekdays" class="rifield" style="display: none;">
  2290. <label for="repeatweeklyinterval" class="label">Repeat on:</label>
  2291. <div class="field">
  2292. <div class="riweeklyweekday"> <input name="riweeklyweekdaysSU" id="repeatweeklyWeekdaysSU" value="SU" type="checkbox"> <label for="repeatweeklyWeekdaysSU">Sun</label> </div>
  2293. <div class="riweeklyweekday"> <input name="riweeklyweekdaysMO" id="repeatweeklyWeekdaysMO" value="MO" type="checkbox"> <label for="repeatweeklyWeekdaysMO">Mon</label> </div>
  2294. <div class="riweeklyweekday"> <input name="riweeklyweekdaysTU" id="repeatweeklyWeekdaysTU" value="TU" type="checkbox"> <label for="repeatweeklyWeekdaysTU">Tue</label> </div>
  2295. <div class="riweeklyweekday"> <input name="riweeklyweekdaysWE" id="repeatweeklyWeekdaysWE" value="WE" type="checkbox"> <label for="repeatweeklyWeekdaysWE">Wed</label> </div>
  2296. <div class="riweeklyweekday"> <input name="riweeklyweekdaysTH" id="repeatweeklyWeekdaysTH" value="TH" type="checkbox"> <label for="repeatweeklyWeekdaysTH">Thu</label> </div>
  2297. <div class="riweeklyweekday"> <input name="riweeklyweekdaysFR" id="repeatweeklyWeekdaysFR" value="FR" type="checkbox"> <label for="repeatweeklyWeekdaysFR">Fri</label> </div>
  2298. <div class="riweeklyweekday"> <input name="riweeklyweekdaysSA" id="repeatweeklyWeekdaysSA" value="SA" type="checkbox"> <label for="repeatweeklyWeekdaysSA">Sat</label> </div>
  2299. </div>
  2300. </div>
  2301. <div id="rimonthlyinterval" class="rifield" style="display: none;">
  2302. <label for="rimonthlyinterval" class="label">Repeat every:</label>
  2303. <div class="field"> <input size="2" value="1" name="rimonthlyinterval" type="text"> month(s) </div>
  2304. </div>
  2305. <div id="rimonthlyoptions" class="rifield" style="display: none;">
  2306. <label for="rimonthlytype" class="label">Repeat on:</label>
  2307. <div class="field">
  2308. <div>
  2309. <input value="DAYOFMONTH" name="rimonthlytype" id="repeatmonthlytype:DAYOFMONTH" type="radio"> <label for="repeatmonthlytype:DAYOFMONTH"> Day </label>
  2310. <select name="rimonthlydayofmonthday" id="repeatmonthlydayofmonthday">
  2311. <option value="1">1</option>
  2312. <option value="2">2</option>
  2313. <option value="3">3</option>
  2314. <option value="4">4</option>
  2315. <option value="5">5</option>
  2316. <option value="6">6</option>
  2317. <option value="7">7</option>
  2318. <option value="8">8</option>
  2319. <option value="9">9</option>
  2320. <option value="10">10</option>
  2321. <option value="11">11</option>
  2322. <option value="12">12</option>
  2323. <option value="13">13</option>
  2324. <option value="14">14</option>
  2325. <option value="15">15</option>
  2326. <option value="16">16</option>
  2327. <option value="17">17</option>
  2328. <option value="18">18</option>
  2329. <option value="19">19</option>
  2330. <option value="20">20</option>
  2331. <option value="21">21</option>
  2332. <option value="22">22</option>
  2333. <option value="23">23</option>
  2334. <option value="24">24</option>
  2335. <option value="25">25</option>
  2336. <option value="26">26</option>
  2337. <option value="27">27</option>
  2338. <option value="28">28</option>
  2339. <option value="29">29</option>
  2340. <option value="30">30</option>
  2341. <option value="31">31</option>
  2342. </select>
  2343. of the month
  2344. </div>
  2345. <div>
  2346. <input value="WEEKDAYOFMONTH" name="rimonthlytype" id="repeatmonthlytype:WEEKDAYOFMONTH" type="radio"> <label for="repeatmonthlytype:WEEKDAYOFMONTH"> The </label>
  2347. <select name="rimonthlyweekdayofmonthindex">
  2348. <option value="+1">first</option>
  2349. <option value="+2">second</option>
  2350. <option value="+3">third</option>
  2351. <option value="+4">fourth</option>
  2352. <option value="-1">last</option>
  2353. </select>
  2354. <select name="rimonthlyweekdayofmonth">
  2355. <option value="SU">Sunday</option>
  2356. <option value="MO">Monday</option>
  2357. <option value="TU">Tuesday</option>
  2358. <option value="WE">Wednesday</option>
  2359. <option value="TH">Thursday</option>
  2360. <option value="FR">Friday</option>
  2361. <option value="SA">Saturday</option>
  2362. </select>
  2363. of the month
  2364. </div>
  2365. </div>
  2366. </div>
  2367. <div id="riyearlyinterval" class="rifield" style="display: none;">
  2368. <label for="riyearlyinterval" class="label">Repeat every:</label>
  2369. <div class="field"> <input size="2" value="1" name="riyearlyinterval" type="text"> year(s) </div>
  2370. </div>
  2371. <div id="riyearlyoptions" class="rifield" style="display: none;">
  2372. <label for="riyearlyType" class="label">Repeat on:</label>
  2373. <div class="field">
  2374. <div>
  2375. <input value="DAYOFMONTH" name="riyearlyType" id="repeatyearlytype:DAYOFMONTH" type="radio"> <label for="repeatyearlytype:DAYOFMONTH"> Every </label>
  2376. <select name="riyearlydayofmonthmonth">
  2377. <option value="1">January</option>
  2378. <option value="2">February</option>
  2379. <option value="3">March</option>
  2380. <option value="4">April</option>
  2381. <option value="5">May</option>
  2382. <option value="6">June</option>
  2383. <option value="7">July</option>
  2384. <option value="8">August</option>
  2385. <option value="9">September</option>
  2386. <option value="10">October</option>
  2387. <option value="11">November</option>
  2388. <option value="12">December</option>
  2389. </select>
  2390. <select name="riyearlydayofmonthday">
  2391. <option value="1">1</option>
  2392. <option value="2">2</option>
  2393. <option value="3">3</option>
  2394. <option value="4">4</option>
  2395. <option value="5">5</option>
  2396. <option value="6">6</option>
  2397. <option value="7">7</option>
  2398. <option value="8">8</option>
  2399. <option value="9">9</option>
  2400. <option value="10">10</option>
  2401. <option value="11">11</option>
  2402. <option value="12">12</option>
  2403. <option value="13">13</option>
  2404. <option value="14">14</option>
  2405. <option value="15">15</option>
  2406. <option value="16">16</option>
  2407. <option value="17">17</option>
  2408. <option value="18">18</option>
  2409. <option value="19">19</option>
  2410. <option value="20">20</option>
  2411. <option value="21">21</option>
  2412. <option value="22">22</option>
  2413. <option value="23">23</option>
  2414. <option value="24">24</option>
  2415. <option value="25">25</option>
  2416. <option value="26">26</option>
  2417. <option value="27">27</option>
  2418. <option value="28">28</option>
  2419. <option value="29">29</option>
  2420. <option value="30">30</option>
  2421. <option value="31">31</option>
  2422. </select>
  2423. </div>
  2424. <div>
  2425. <input value="WEEKDAYOFMONTH" name="riyearlyType" id="repeatyearlytype:WEEKDAYOFMONTH" type="radio"> <label for="repeatyearlytype:WEEKDAYOFMONTH"> The </label>
  2426. <select name="riyearlyweekdayofmonthindex">
  2427. <option value="+1">first</option>
  2428. <option value="+2">second</option>
  2429. <option value="+3">third</option>
  2430. <option value="+4">fourth</option>
  2431. <option value="-1">last</option>
  2432. </select>
  2433. <label for="repeatyearlytype:WEEKDAYOFMONTH"> </label>
  2434. <select name="riyearlyweekdayofmonthday">
  2435. <option value="SU">Sunday</option>
  2436. <option value="MO">Monday</option>
  2437. <option value="TU">Tuesday</option>
  2438. <option value="WE">Wednesday</option>
  2439. <option value="TH">Thursday</option>
  2440. <option value="FR">Friday</option>
  2441. <option value="SA">Saturday</option>
  2442. </select>
  2443. of
  2444. <select name="riyearlyweekdayofmonthmonth">
  2445. <option value="1">January</option>
  2446. <option value="2">February</option>
  2447. <option value="3">March</option>
  2448. <option value="4">April</option>
  2449. <option value="5">May</option>
  2450. <option value="6">June</option>
  2451. <option value="7">July</option>
  2452. <option value="8">August</option>
  2453. <option value="9">September</option>
  2454. <option value="10">October</option>
  2455. <option value="11">November</option>
  2456. <option value="12">December</option>
  2457. </select>
  2458. </div>
  2459. </div>
  2460. </div>
  2461. <div id="rirangeoptions" class="rifield" style="">
  2462. <label class="label">Ends:</label>
  2463. <div class="field">
  2464. <div> <input value="NOENDDATE" name="rirangetype" id="repeatrangetype:NOENDDATE" type="radio"> <label for="repeatrangetype:NOENDDATE"> Never </label> </div>
  2465. <div> <input value="BYOCCURRENCES" name="rirangetype" id="repeatrangetype:BYOCCURRENCES" type="radio"> <label for="repeatrangetype:BYOCCURRENCES"> After </label> <input size="3" name="rirangebyoccurrencesvalue" type="text"> occurrence(s) </div>
  2466. <div>
  2467. <input value="BYENDDATE" name="rirangetype" id="repeatrangetype:BYENDDATE" type="radio"> <label for="repeatrangetype:BYENDDATE"> On </label> <input id="rangedatepicker" name="rirangebyenddatecalendar" type="text" readonly>
  2468. </div>
  2469. </div>
  2470. </div>
  2471. </div>
  2472.  
  2473. <!-- insert rioccurances stuff here-->
  2474.  
  2475. </div>
  2476. </div>
  2477. </form>
  2478. <div id="specdates" class="rifield">
  2479. <label class="label">Select date: </label><input id="specdatespicker" style="width: 200px;" type="text" readonly/>&nbsp;&nbsp;<button id="addAdditional" style="width: 75px">Additional</button>&nbsp;&nbsp;<button id="addExclude" style="width: 75px">Excluded</button>
  2480. </div>
  2481. </div>
  2482. </div>
  2483. </div>
  2484. <div class="flex-item item2">
  2485. <H3 style="text-align: center;">Additional Dates</H3>
  2486. <div id="addSpec" style="overflow:scroll;height:80%;width:98%;overflow:auto">
  2487. <center><table id="addDates" style="border: 1px solid black;"></table></center>
  2488. </div>
  2489. </div>
  2490. <div class="flex-item item3">
  2491. <H3 style="text-align: center;">Excluded Dates</H3>
  2492. <div id="exclSpec" style="overflow:scroll;height:80%;width:98%;overflow:auto">
  2493. <table id="exclDates" style="border: 1px solid black;"></table>
  2494. </div>
  2495. </div>
  2496. </div>
  2497.  
  2498. </div>
  2499. <div class="modal-footer" style="height: 55px; text-align: center; background-color:white;">
  2500. <br />
  2501. <button type="button" class="otbuttons" id="dtrSave">Save</button>
  2502. <button type="button" class="otbuttons" id="dtrCancel">Cancel</button>
  2503. </div>
  2504. </div>
  2505. <!-- /.modal-content -->
  2506. </div>
  2507. <!-- /.modal-dialog -->
  2508. </div>
  2509.  
  2510. <!------------------------------------------------------------------------------------------------------------------->
  2511. <!-- Modal for Delete range selection on recurring events -->
  2512. <!------------------------------------------------------------------------------------------------------------------->
  2513. <div class="modal" id="delrptModal" tabindex="-1" style="display:none; width: 500px; height: 250px">
  2514. <div class="modal-dialog">
  2515. <div class="modal-content">
  2516. <div class="modal-header">
  2517. <center><h4 class="modal-title">Select what to delete</h4></center>
  2518. </div>
  2519. <div class="modal-body">
  2520.  
  2521. <p>
  2522. <input type="radio" id="delrptone" name="delAnswer" />
  2523. <label>Delete only this event</label>
  2524. </p>
  2525. <p>
  2526. <input type="radio" id="delrpttoend" name="delAnswer" />
  2527. <label>Delete events from this one to the last in this repeating set</label>
  2528. </p>
  2529. <p>
  2530. <input type="radio" id="delrptall" name="delAnswer" />
  2531. <label>Delete all events in this repeating set</label>
  2532. </p>
  2533.  
  2534. </div>
  2535. <div class="modal-footer">
  2536. <p></p>
  2537. <center>
  2538. <button type="button" class="otbuttons" id="delrptOK">OK</button>
  2539. <button type="button" class="otbuttons" id="delrptCancel">Cancel</button>
  2540. </center>
  2541. </div>
  2542. </div>
  2543. <!-- /.modal-content -->
  2544. </div>
  2545. <!-- /.modal-dialog -->
  2546. </div>
  2547.  
  2548. <!------------------------------------------------------------------------------------------------------------------->
  2549. <!-- Modal for Delete conformation on single events -->
  2550. <!------------------------------------------------------------------------------------------------------------------->
  2551. <div class="modal" id="delsglModal" tabindex="-1" style="display:none; width: 300px; height: 200px">
  2552. <div class="modal-dialog">
  2553. <div class="modal-content">
  2554. <div class="modal-header">
  2555. <center><h4 class="modal-title">Confirm deletion</h4></center>
  2556. </div>
  2557. <div class="modal-body">
  2558. <p>Do you wish to delete this event?</p>
  2559. </div>
  2560. <div class="modal-footer">
  2561. <p></p>
  2562. <center>
  2563. <button type="button" class="otbuttons" id="delsglOK">Yes</button>
  2564. <button type="button" class="otbuttons" id="delsglCancel">No</button>
  2565. </center>
  2566. </div>
  2567. </div>
  2568. <!-- /.modal-content -->
  2569. </div>
  2570. <!-- /.modal-dialog -->
  2571. </div>
  2572.  
  2573. <!------------------------------------------------------------------------------------------------------------------->
  2574. <!-- Modal for Edit range selection on recurring events -->
  2575. <!------------------------------------------------------------------------------------------------------------------->
  2576. <div class="modal" id="editrptModal" tabindex="-1" style="display:none; width: 500px; height: 250px">
  2577. <div class="modal-dialog">
  2578. <div class="modal-content">
  2579. <div class="modal-header">
  2580. <center><h4 class="modal-title">Select what to update</h4></center>
  2581. </div>
  2582. <div class="modal-body">
  2583.  
  2584. <p>
  2585. <input type="radio" id="editrptone" name="editAnswer" />
  2586. <label>Edit only this event</label>
  2587. </p>
  2588. <p>
  2589. <input type="radio" id="editrpttoend" name="editAnswer" />
  2590. <label>Edit events from this one to the last in this repeating set</label>
  2591. </p>
  2592. <p>
  2593. <input type="radio" id="editrptall" name="editAnswer" />
  2594. <label>Edit all events in this repeating set</label>
  2595. </p>
  2596.  
  2597. </div>
  2598. <div class="modal-footer">
  2599. <center>
  2600. <button type="button" class="otbuttons" id="editrptOK">OK</button>
  2601. <button type="button" class="otbuttons" id="editrptCancel">Cancel</button>
  2602. </center>
  2603. </div>
  2604. </div>
  2605. <!-- /.modal-content -->
  2606. </div>
  2607. <!-- /.modal-dialog -->
  2608. </div>
  2609. </body>
  2610. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!