This commit is contained in:
19
assets/css/components/color_selection.scss
Normal file
19
assets/css/components/color_selection.scss
Normal file
@ -0,0 +1,19 @@
|
||||
.color-selection {
|
||||
max-width: 400px;
|
||||
|
||||
.color-selection-option {
|
||||
border: none;
|
||||
color: white;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
|
||||
.fa-check {
|
||||
display: none;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
&.selected .fa-check {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
517
assets/css/general.scss
Normal file
517
assets/css/general.scss
Normal file
@ -0,0 +1,517 @@
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Easy!Appointments - Online Appointment Scheduler
|
||||
*
|
||||
* @package EasyAppointments
|
||||
* @author A.Tselegidis <alextselegidis@gmail.com>
|
||||
* @copyright Copyright (c) Alex Tselegidis
|
||||
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
|
||||
* @link https://easyappointments.org
|
||||
* @since v1.5.0
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
select {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
@-moz-document url-prefix() {
|
||||
body .checkbox input[type='checkbox'] {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
body .ui-widget {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
|
||||
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
body .ui-widget-overlay {
|
||||
background: #000 50% 50% repeat-x;
|
||||
opacity: 0.5;
|
||||
filter: Alpha(Opacity=50);
|
||||
}
|
||||
|
||||
body .ui-dialog .ui-dialog-titlebar-close {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body .ui-draggable .ui-dialog-titlebar {
|
||||
background: #429a82;
|
||||
color: #fff;
|
||||
font-size: 1.2em;
|
||||
font-weight: lighter;
|
||||
padding: 12px 10px;
|
||||
margin-bottom: 10px;
|
||||
border: none;
|
||||
border-top-left-radius: 0.25rem;
|
||||
border-top-right-radius: 0.25rem;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
body .ui-dialog {
|
||||
padding: 0;
|
||||
z-index: 2000;
|
||||
border: none !important;
|
||||
box-shadow: 0 0 10px #333;
|
||||
}
|
||||
|
||||
body .ui-dialog .ui-dialog-buttonpane {
|
||||
padding: 0.3em 1em 0.3em 0.4em;
|
||||
border: none;
|
||||
}
|
||||
|
||||
body .ui-button .ui-icon,
|
||||
body .ui-button:hover .ui-icon {
|
||||
background-image: url('../ext/jquery-ui/images/ui-icons_222222_256x240.png');
|
||||
}
|
||||
|
||||
body .ui-dialog #error-technical {
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
body .ui-widget.ui-widget-content {
|
||||
border: 1px solid #429a82;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body .ui-dialog-buttons {
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
body #ui-datepicker-div {
|
||||
margin-top: 5px;
|
||||
z-index: 1100 !important;
|
||||
}
|
||||
|
||||
body .ui-datepicker {
|
||||
width: auto;
|
||||
max-width: 288px;
|
||||
}
|
||||
|
||||
body .ui-datepicker .ui-widget-header {
|
||||
border: none;
|
||||
background: #429a82;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
body .ui-datepicker .ui-widget-header .ui-icon {
|
||||
background-image: url('../vendor/jquery-ui-dist/images/ui-icons_ffffff_256x240.png');
|
||||
}
|
||||
|
||||
body .ui-datepicker .ui-datepicker-title {
|
||||
color: white;
|
||||
padding: 8px 5px;
|
||||
}
|
||||
|
||||
body .ui-datepicker th {
|
||||
background: #429a82;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
body .ui-datepicker tbody tr:first-child td {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
body .ui-datepicker td a,
|
||||
body .ui-datepicker td span {
|
||||
border: none !important;
|
||||
background: none !important;
|
||||
color: #1a865f !important;
|
||||
text-align: center !important;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
html body .ui-datepicker td a.ui-state-active {
|
||||
color: #fff !important;
|
||||
font-weight: bold !important;
|
||||
background: #429a82 !important;
|
||||
border-radius: 50px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
line-height: 1.2;
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
body .ui-datepicker td a.ui-state-highlight {
|
||||
background: #80e3ad !important;
|
||||
border-radius: 67px;
|
||||
color: #fff !important;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
line-height: 1.2;
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
body .ui-datepicker .ui-datepicker-prev-hover {
|
||||
top: 2px !important;
|
||||
left: 2px !important;
|
||||
background: #80e1ac;
|
||||
border-color: #80e1ac;
|
||||
border-radius: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
body .ui-datepicker .ui-datepicker-next-hover {
|
||||
top: 2px !important;
|
||||
right: 2px !important;
|
||||
background: #80e1ac;
|
||||
border-color: #80e1ac;
|
||||
border-radius: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
body .ui-datepicker .ui-slider-handle {
|
||||
border-radius: 0;
|
||||
border-color: #429a82;
|
||||
background-color: #429a82;
|
||||
}
|
||||
|
||||
body .ui-priority-primary,
|
||||
body .ui-widget-content .ui-priority-primary,
|
||||
body .ui-widget-header .ui-priority-primary {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
body .ui-widget input,
|
||||
.ui-widget select,
|
||||
body .ui-widget textarea,
|
||||
body .ui-widget button {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
|
||||
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
body .ui-datepicker .ui-datepicker-buttonpane button {
|
||||
padding: 6px 16px;
|
||||
}
|
||||
|
||||
.breaks tr:hover td {
|
||||
background: #ffffc2 !important;
|
||||
}
|
||||
|
||||
.working-plan td {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.breaks td {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
li.language {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
li.language:hover {
|
||||
color: #005580;
|
||||
}
|
||||
|
||||
#select-language {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
#language-list {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
max-height: 500px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* JQUERY UI DATETIME PICKER ADDON
|
||||
------------------------------------------------------------------------- */
|
||||
|
||||
.ui-timepicker-div .ui-widget-header {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.ui-timepicker-div dl {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.ui-timepicker-div dl dt {
|
||||
float: left;
|
||||
clear: left;
|
||||
padding: 0 0 0 5px;
|
||||
}
|
||||
|
||||
.ui-timepicker-div dl dd {
|
||||
margin: 0 10px 10px 40%;
|
||||
}
|
||||
|
||||
.ui-timepicker-div dl dd.ui_tpicker_time {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.ui-timepicker-div dl dd.ui_tpicker_hour,
|
||||
.ui-timepicker-div dl dd.ui_tpicker_minute {
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
.ui-timepicker-div td {
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
.ui-tpicker-grid-label {
|
||||
background: none;
|
||||
border: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.ui-timepicker-div .ui_tpicker_unit_hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ui-timepicker-div .ui_tpicker_time .ui_tpicker_time_input {
|
||||
background: none;
|
||||
color: inherit;
|
||||
border: none;
|
||||
outline: none;
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
.ui-timepicker-div .ui_tpicker_time .ui_tpicker_time_input:focus {
|
||||
border-bottom-color: #aaa;
|
||||
}
|
||||
|
||||
.ui-timepicker-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
.ui-timepicker-rtl dl {
|
||||
text-align: right;
|
||||
padding: 0 5px 0 0;
|
||||
}
|
||||
|
||||
.ui-timepicker-rtl dl dt {
|
||||
float: right;
|
||||
clear: right;
|
||||
}
|
||||
|
||||
.ui-timepicker-rtl dl dd {
|
||||
margin: 0 40% 10px 10px;
|
||||
}
|
||||
|
||||
/* Shortened version style */
|
||||
.ui-timepicker-div.ui-timepicker-oneLine {
|
||||
padding-right: 2px;
|
||||
}
|
||||
|
||||
.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_time,
|
||||
.ui-timepicker-div.ui-timepicker-oneLine dt {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_time_label {
|
||||
display: block;
|
||||
padding-top: 2px;
|
||||
}
|
||||
|
||||
.ui-timepicker-div.ui-timepicker-oneLine dl {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.ui-timepicker-div.ui-timepicker-oneLine dl dd,
|
||||
.ui-timepicker-div.ui-timepicker-oneLine dl dd > div {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_minute:before,
|
||||
.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_second:before {
|
||||
content: ':';
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_millisec:before,
|
||||
.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_microsec:before {
|
||||
content: '.';
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_unit_hide,
|
||||
.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_unit_hide:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* LOADING SPINNER
|
||||
------------------------------------------------------------------------- */
|
||||
|
||||
.is-loading {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.is-loading:before,
|
||||
.is-loading:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
.animation:after {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin: -25px 0 0 -25px;
|
||||
|
||||
border: 5px solid rgba(0, 0, 0, 0.4);
|
||||
border-radius: 50px;
|
||||
}
|
||||
|
||||
.animation:after {
|
||||
border-bottom-color: transparent;
|
||||
animation: spin 1s infinite linear;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin-reverse {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(-360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.any-element {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
position: fixed;
|
||||
left: 50vw;
|
||||
top: 50vh;
|
||||
margin-left: -30px;
|
||||
margin-bottom: -30px;
|
||||
}
|
||||
|
||||
#message-box pre,
|
||||
#message-box .card {
|
||||
max-height: 250px;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
body .popover {
|
||||
max-width: 430px;
|
||||
}
|
||||
|
||||
body .popover-body strong {
|
||||
min-width: 90px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
body .popover-body button {
|
||||
font-size: 1em;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
height: 2.1em;
|
||||
padding: 0 0.6em;
|
||||
}
|
||||
|
||||
body .popover-body a {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.has-error .control-label,
|
||||
.has-error label {
|
||||
color: #dc3545;
|
||||
}
|
||||
|
||||
.has-error .form-control,
|
||||
.has-error .form-select {
|
||||
border-color: #dc3545;
|
||||
}
|
||||
|
||||
body .clearfix {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.flatpickr-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.flatpickr-calendar {
|
||||
box-shadow: none;
|
||||
|
||||
.flatpickr-monthDropdown-months:hover {
|
||||
background: rgba(0, 0, 0, 0.05) !important;
|
||||
}
|
||||
|
||||
.flatpickr-months {
|
||||
padding: 10px 0;
|
||||
background: #449a82;
|
||||
border-top-left-radius: 3px;
|
||||
border-top-right-radius: 3px;
|
||||
}
|
||||
|
||||
.flatpickr-current-month {
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.flatpickr-innerContainer {
|
||||
border-bottom-left-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
}
|
||||
|
||||
.dayContainer {
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.flatpickr-months .flatpickr-month,
|
||||
.flatpickr-weekdays,
|
||||
.flatpickr-current-month .flatpickr-monthDropdown-months,
|
||||
span.flatpickr-weekday {
|
||||
background: #429a82;
|
||||
color: white;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
.flatpickr-day.endRange,
|
||||
.flatpickr-day.endRange.inRange,
|
||||
.flatpickr-day.endRange.nextMonthDay,
|
||||
.flatpickr-day.endRange.prevMonthDay,
|
||||
.flatpickr-day.endRange:focus,
|
||||
.flatpickr-day.endRange:hover,
|
||||
.flatpickr-day.selected,
|
||||
.flatpickr-day.selected.inRange,
|
||||
.flatpickr-day.selected.nextMonthDay,
|
||||
.flatpickr-day.selected.prevMonthDay,
|
||||
.flatpickr-day.selected:focus,
|
||||
.flatpickr-day.selected:hover,
|
||||
.flatpickr-day.startRange,
|
||||
.flatpickr-day.startRange.inRange,
|
||||
.flatpickr-day.startRange.nextMonthDay,
|
||||
.flatpickr-day.startRange.prevMonthDay,
|
||||
.flatpickr-day.startRange:focus,
|
||||
.flatpickr-day.startRange:hover {
|
||||
background: #429a82;
|
||||
border-color: #429a82;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.flatpickr-day.prevMonthDay,
|
||||
.flatpickr-day.nextMonthDay {
|
||||
height: 0;
|
||||
width: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.cc-revoke,
|
||||
.cc-window {
|
||||
z-index: 999 !important;
|
||||
}
|
||||
10
assets/css/index.html
Normal file
10
assets/css/index.html
Normal file
@ -0,0 +1,10 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>403 Forbidden</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>Directory access is forbidden.</p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
31
assets/css/layouts/account_layout.scss
Normal file
31
assets/css/layouts/account_layout.scss
Normal file
@ -0,0 +1,31 @@
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Easy!Appointments - Online Appointment Scheduler
|
||||
*
|
||||
* @package EasyAppointments
|
||||
* @author A.Tselegidis <alextselegidis@gmail.com>
|
||||
* @copyright Copyright (c) Alex Tselegidis
|
||||
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
|
||||
* @link https://easyappointments.org
|
||||
* @since v1.5.0
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
body {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
#login-frame {
|
||||
width: 630px;
|
||||
margin: auto;
|
||||
border: 1px solid #dddada;
|
||||
padding: 70px;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
#login-frame {
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
1020
assets/css/layouts/backend_layout.scss
Normal file
1020
assets/css/layouts/backend_layout.scss
Normal file
File diff suppressed because it is too large
Load Diff
425
assets/css/layouts/booking_layout.scss
Normal file
425
assets/css/layouts/booking_layout.scss
Normal file
@ -0,0 +1,425 @@
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Easy!Appointments - Online Appointment Scheduler
|
||||
*
|
||||
* @package EasyAppointments
|
||||
* @author A.Tselegidis <alextselegidis@gmail.com>
|
||||
* @copyright Copyright (c) Alex Tselegidis
|
||||
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
|
||||
* @link https://easyappointments.org
|
||||
* @since v1.5.0
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
root {
|
||||
display: block;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#main {
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
/* BOOK APPOINTMENT WIZARD
|
||||
------------------------------------------------------------------------------ */
|
||||
|
||||
#book-appointment-wizard {
|
||||
min-height: 480px;
|
||||
padding: 0;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
#book-appointment-wizard #header {
|
||||
overflow: auto;
|
||||
height: auto;
|
||||
padding: 20px 15px;
|
||||
background: #429a82;
|
||||
}
|
||||
|
||||
#book-appointment-wizard #company-name {
|
||||
float: none;
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
font-weight: lighter;
|
||||
color: #fff;
|
||||
margin: 20px 0;
|
||||
|
||||
#company-logo {
|
||||
display: block;
|
||||
margin: 14px auto;
|
||||
max-height: 56px;
|
||||
}
|
||||
|
||||
.display-booking-selection {
|
||||
color: #225d4d;
|
||||
border-right-color: #225d4d !important;
|
||||
font-size: 60%;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
#book-appointment-wizard #steps {
|
||||
float: none;
|
||||
display: block;
|
||||
overflow: auto;
|
||||
margin: 15px auto;
|
||||
width: 190px;
|
||||
}
|
||||
|
||||
#book-appointment-wizard #book-appointment-form #book-appointment-submit {
|
||||
width: 100%;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
#book-appointment-wizard #form-message {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
#book-appointment-wizard .wizard-frame {
|
||||
height: auto;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
#book-appointment-wizard .wizard-frame .frame-container {
|
||||
height: auto;
|
||||
min-height: 500px;
|
||||
padding: 15px 0;
|
||||
}
|
||||
|
||||
#book-appointment-wizard .frame-container .frame-title {
|
||||
font-weight: lighter;
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
#book-appointment-wizard .frame-container .frame-content {
|
||||
float: none;
|
||||
}
|
||||
|
||||
#book-appointment-wizard .wizard-frame .command-buttons {
|
||||
float: none;
|
||||
margin: 15px auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#book-appointment-wizard .wizard-frame .command-buttons .btn {
|
||||
min-width: 120px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
#book-appointment-wizard .wizard-frame .command-buttons .btn:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
#book-appointment-wizard .wizard-frame .flatpickr-calendar {
|
||||
margin: 25px auto;
|
||||
}
|
||||
|
||||
#book-appointment-wizard .wizard-frame #select-time {
|
||||
max-width: 288px;
|
||||
margin: auto;
|
||||
padding: 15px 0;
|
||||
}
|
||||
|
||||
#book-appointment-wizard .book-step {
|
||||
display: inline-block;
|
||||
height: 35px;
|
||||
width: 35px;
|
||||
float: left;
|
||||
background: #225d4d;
|
||||
padding: 8px;
|
||||
margin-right: 12px;
|
||||
margin-top: 6px;
|
||||
border-radius: 0.25rem;
|
||||
transition: all 0.3s linear;
|
||||
}
|
||||
|
||||
#book-appointment-wizard .book-step:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
#book-appointment-wizard .book-step strong {
|
||||
font-size: 12px;
|
||||
display: block;
|
||||
text-align: center;
|
||||
color: #0bb98d;
|
||||
transition: all 0.3s linear;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
#book-appointment-wizard .active-step {
|
||||
display: inline-block;
|
||||
height: 45px;
|
||||
width: 45px;
|
||||
float: left;
|
||||
background: #fff;
|
||||
padding: 7px;
|
||||
margin-right: 13px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
#book-appointment-wizard .active-step strong {
|
||||
color: #429a82;
|
||||
font-size: 21px;
|
||||
}
|
||||
|
||||
#book-appointment-wizard #frame-footer {
|
||||
padding: 15px;
|
||||
text-align: center;
|
||||
border-top: 1px solid #ebeef1;
|
||||
}
|
||||
|
||||
#book-appointment-wizard #available-hours {
|
||||
overflow: auto;
|
||||
margin: 15px 0;
|
||||
padding-right: 10px;
|
||||
width: auto;
|
||||
max-height: 250px;
|
||||
}
|
||||
|
||||
#book-appointment-wizard #available-hours div {
|
||||
margin-right: 30px;
|
||||
}
|
||||
|
||||
#book-appointment-wizard #available-hours .available-hour {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#book-appointment-wizard #available-hours .selected-hour {
|
||||
background-color: #439a82;
|
||||
border-color: #439a82;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#book-appointment-wizard .span3 {
|
||||
min-width: 270px; /* This is especially needed for ie8 */
|
||||
}
|
||||
|
||||
#book-appointment-wizard #select-timezone {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
#book-appointment-wizard #appointment-details p,
|
||||
#book-appointment-wizard #customer-details p {
|
||||
font-size: 16px;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
#book-appointment-wizard #wizard-frame-1 label {
|
||||
font-size: 19px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
#book-appointment-wizard #wizard-frame-1 select {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
#book-appointment-wizard .captcha-title {
|
||||
float: left;
|
||||
margin: 7px 0 10px 0;
|
||||
}
|
||||
|
||||
#book-appointment-wizard .captcha-title .fa-sync-alt {
|
||||
cursor: pointer;
|
||||
transition: all 0.3s linear;
|
||||
}
|
||||
|
||||
#book-appointment-wizard .captcha-title .fa-sync-alt:hover {
|
||||
color: #1a865f;
|
||||
}
|
||||
|
||||
#book-appointment-wizard .captcha-image {
|
||||
float: left;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
#book-appointment-wizard .captcha-text {
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#book-appointment-wizard #service-description {
|
||||
overflow-y: auto;
|
||||
clear: both;
|
||||
max-height: 153px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
#book-appointment-wizard #select-language,
|
||||
#book-appointment-wizard .backend-link {
|
||||
display: block;
|
||||
min-width: 120px;
|
||||
margin: 15px auto;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.popover .popover-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.popover .popover-content #language-list .language {
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
#book-appointment-wizard #wizard-frame-4 .frame-container .frame-content {
|
||||
max-width: 630px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.wrapper {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
#book-appointment-wizard {
|
||||
border-radius: 0.25rem;
|
||||
overflow: hidden;
|
||||
box-shadow: rgba(138, 195, 255, 0.12) 0 1px 5px 0;
|
||||
}
|
||||
|
||||
#book-appointment-wizard #company-name {
|
||||
text-align: left;
|
||||
display: inline-block;
|
||||
float: left;
|
||||
margin: 0 auto;
|
||||
min-width: 400px;
|
||||
line-height: 1.4;
|
||||
|
||||
#company-logo {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
margin-right: 14px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#book-appointment-wizard #steps {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
margin: 5px auto;
|
||||
}
|
||||
|
||||
#book-appointment-wizard .wizard-frame {
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
#book-appointment-wizard .wizard-frame .command-buttons {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
#book-appointment-wizard .captcha-title {
|
||||
margin-right: 20px;
|
||||
margin-top: 7px;
|
||||
}
|
||||
|
||||
#book-appointment-wizard .captcha-image {
|
||||
float: right;
|
||||
}
|
||||
|
||||
#book-appointment-wizard #select-language {
|
||||
width: 100px;
|
||||
padding: 5px;
|
||||
margin: 5px auto;
|
||||
}
|
||||
|
||||
#book-appointment-wizard #frame-footer small {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#book-appointment-wizard .footer-powered-by,
|
||||
#book-appointment-wizard .footer-options {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
#book-appointment-wizard .footer-powered-by {
|
||||
text-align: left;
|
||||
padding: 5px 5px 5px 0;
|
||||
}
|
||||
|
||||
#book-appointment-wizard .footer-options {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#book-appointment-wizard #select-language {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#book-appointment-wizard .backend-link {
|
||||
display: inline-block;
|
||||
min-width: 120px;
|
||||
padding: 5px;
|
||||
margin: 5px 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* BOOK SUCCESS & MESSAGE
|
||||
------------------------------------------------------------------------- */
|
||||
|
||||
#message-frame,
|
||||
#success-frame {
|
||||
background: var(--bs-body-bg);
|
||||
text-align: center;
|
||||
height: auto;
|
||||
border: none;
|
||||
padding: 35px;
|
||||
}
|
||||
|
||||
#message-frame .alert,
|
||||
#success-frame .alert {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
#message-frame #message-icon,
|
||||
#success-frame #success-icon {
|
||||
margin-top: 20px;
|
||||
margin-right: 20px;
|
||||
width: 64px;
|
||||
display: block;
|
||||
margin: auto;
|
||||
float: none !important;
|
||||
}
|
||||
|
||||
#success-frame .btn {
|
||||
margin-bottom: 10px;
|
||||
width: 80%;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
#message-frame,
|
||||
#success-frame {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* CANCEL APPOINTMENT
|
||||
------------------------------------------------------------------------- */
|
||||
|
||||
.booking-header-bar {
|
||||
padding: 15px 0;
|
||||
margin: 0;
|
||||
background: #f3f2e7;
|
||||
border-bottom: 1px solid #e4e1c9;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ui-dialog .ui-dialog-title {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.booking-header-bar {
|
||||
padding: 15px 0;
|
||||
margin: 0;
|
||||
background: #f3f2e7;
|
||||
border-bottom: 1px solid #e4e1c9;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
10
assets/css/layouts/message_layout.scss
Normal file
10
assets/css/layouts/message_layout.scss
Normal file
@ -0,0 +1,10 @@
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Easy!Appointments - Online Appointment Scheduler
|
||||
*
|
||||
* @package EasyAppointments
|
||||
* @author A.Tselegidis <alextselegidis@gmail.com>
|
||||
* @copyright Copyright (c) Alex Tselegidis
|
||||
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
|
||||
* @link https://easyappointments.org
|
||||
* @since v1.5.0
|
||||
* ---------------------------------------------------------------------------- */
|
||||
51
assets/css/pages/installation.scss
Normal file
51
assets/css/pages/installation.scss
Normal file
@ -0,0 +1,51 @@
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Easy!Appointments - Online Appointment Scheduler
|
||||
*
|
||||
* @package EasyAppointments
|
||||
* @author A.Tselegidis <alextselegidis@gmail.com>
|
||||
* @copyright Copyright (c) Alex Tselegidis
|
||||
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
|
||||
* @link https://easyappointments.org
|
||||
* @since v1.5.0
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
header {
|
||||
background: #daffeb;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
header .page-title {
|
||||
font-weight: lighter;
|
||||
padding: 40px 0;
|
||||
color: #429a82;
|
||||
}
|
||||
|
||||
.content p {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.alert {
|
||||
margin: 25px 0 10px 0;
|
||||
}
|
||||
|
||||
footer {
|
||||
padding: 10px 35px;
|
||||
background-color: #fafafa;
|
||||
margin-top: 20px;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
#loading {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 999999;
|
||||
background: rgba(255, 255, 255, 0.75);
|
||||
}
|
||||
|
||||
#loading img {
|
||||
margin: auto;
|
||||
display: block;
|
||||
}
|
||||
42
assets/css/pages/update.scss
Normal file
42
assets/css/pages/update.scss
Normal file
@ -0,0 +1,42 @@
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Easy!Appointments - Online Appointment Scheduler
|
||||
*
|
||||
* @package EasyAppointments
|
||||
* @author A.Tselegidis <alextselegidis@gmail.com>
|
||||
* @copyright Copyright (c) Alex Tselegidis
|
||||
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
|
||||
* @link https://easyappointments.org
|
||||
* @since v1.5.0
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
html {
|
||||
position: relative;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
header {
|
||||
background: #daffeb;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
header .page-title {
|
||||
font-weight: lighter;
|
||||
padding: 40px 0;
|
||||
color: #429a82;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background-color: #f5f5f5;
|
||||
padding: 15px 40px;
|
||||
}
|
||||
128
assets/css/themes/cosmo.scss
Normal file
128
assets/css/themes/cosmo.scss
Normal file
@ -0,0 +1,128 @@
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Easy!Appointments - Online Appointment Scheduler
|
||||
*
|
||||
* @package EasyAppointments
|
||||
* @author A.Tselegidis <alextselegidis@gmail.com>
|
||||
* @copyright Copyright (c) Alex Tselegidis
|
||||
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
|
||||
* @link https://easyappointments.org
|
||||
* @since v1.5.0
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Cosmo 5.1.3
|
||||
// Bootswatch
|
||||
|
||||
$theme: 'cosmo' !default;
|
||||
|
||||
//
|
||||
// Color system
|
||||
//
|
||||
|
||||
$white: #fff !default;
|
||||
$gray-100: #f8f9fa !default;
|
||||
$gray-200: #e9ecef !default;
|
||||
$gray-300: #dee2e6 !default;
|
||||
$gray-400: #ced4da !default;
|
||||
$gray-500: #adb5bd !default;
|
||||
$gray-600: #868e96 !default;
|
||||
$gray-700: #495057 !default;
|
||||
$gray-800: #373a3c !default;
|
||||
$gray-900: #212529 !default;
|
||||
$black: #000 !default;
|
||||
|
||||
$blue: #2780e3 !default;
|
||||
$indigo: #6610f2 !default;
|
||||
$purple: #613d7c !default;
|
||||
$pink: #e83e8c !default;
|
||||
$red: #ff0039 !default;
|
||||
$orange: #f0ad4e !default;
|
||||
$yellow: #ff7518 !default;
|
||||
$green: #3fb618 !default;
|
||||
$teal: #20c997 !default;
|
||||
$cyan: #9954bb !default;
|
||||
|
||||
$primary: $blue !default;
|
||||
$secondary: $gray-800 !default;
|
||||
$success: $green !default;
|
||||
$info: $cyan !default;
|
||||
$warning: $yellow !default;
|
||||
$danger: $red !default;
|
||||
$light: $gray-100 !default;
|
||||
$dark: $gray-800 !default;
|
||||
|
||||
$min-contrast-ratio: 2.6 !default;
|
||||
|
||||
// Options
|
||||
|
||||
$enable-rounded: false !default;
|
||||
|
||||
// Body
|
||||
|
||||
$body-color: $gray-800 !default;
|
||||
|
||||
// Fonts
|
||||
|
||||
// stylelint-disable-next-line value-keyword-case
|
||||
$font-family-sans-serif:
|
||||
'Source Sans Pro',
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
'Segoe UI',
|
||||
Roboto,
|
||||
'Helvetica Neue',
|
||||
Arial,
|
||||
sans-serif,
|
||||
'Apple Color Emoji',
|
||||
'Segoe UI Emoji',
|
||||
'Segoe UI Symbol' !default;
|
||||
$headings-font-weight: 400 !default;
|
||||
|
||||
// Navbar
|
||||
|
||||
$navbar-dark-hover-color: rgba($white, 1) !default;
|
||||
$navbar-light-hover-color: rgba($black, 0.9) !default;
|
||||
|
||||
// Alerts
|
||||
|
||||
$alert-border-width: 0% !default;
|
||||
|
||||
// Progress bars
|
||||
|
||||
$progress-height: 0.5rem !default;
|
||||
|
||||
@import '../../../node_modules/bootstrap/scss/bootstrap';
|
||||
|
||||
// Cosmo 5.1.3
|
||||
// Bootswatch
|
||||
|
||||
// Variables
|
||||
|
||||
$web-font-path: 'https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;700&display=swap' !default;
|
||||
@if $web-font-path {
|
||||
@import url($web-font-path);
|
||||
}
|
||||
|
||||
// Typography
|
||||
|
||||
body {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
// Indicators
|
||||
|
||||
.badge {
|
||||
&.bg-light {
|
||||
color: $dark;
|
||||
}
|
||||
}
|
||||
|
||||
// Progress bars
|
||||
|
||||
.progress {
|
||||
@include box-shadow(none);
|
||||
|
||||
.progress-bar {
|
||||
font-size: 8px;
|
||||
line-height: 8px;
|
||||
}
|
||||
}
|
||||
273
assets/css/themes/darkly.scss
Normal file
273
assets/css/themes/darkly.scss
Normal file
@ -0,0 +1,273 @@
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Easy!Appointments - Online Appointment Scheduler
|
||||
*
|
||||
* @package EasyAppointments
|
||||
* @author A.Tselegidis <alextselegidis@gmail.com>
|
||||
* @copyright Copyright (c) Alex Tselegidis
|
||||
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
|
||||
* @link https://easyappointments.org
|
||||
* @since v1.5.0
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Darkly 5.1.3
|
||||
// Bootswatch
|
||||
|
||||
$theme: 'darkly' !default;
|
||||
|
||||
//
|
||||
// Color system
|
||||
//
|
||||
|
||||
$white: #fff !default;
|
||||
$gray-100: #f8f9fa !default;
|
||||
$gray-200: #ebebeb !default;
|
||||
$gray-300: #dee2e6 !default;
|
||||
$gray-400: #ced4da !default;
|
||||
$gray-500: #adb5bd !default;
|
||||
$gray-600: #888 !default;
|
||||
$gray-700: #444 !default;
|
||||
$gray-800: #303030 !default;
|
||||
$gray-900: #222 !default;
|
||||
$black: #000 !default;
|
||||
|
||||
$blue: #375a7f !default;
|
||||
$indigo: #6610f2 !default;
|
||||
$purple: #6f42c1 !default;
|
||||
$pink: #e83e8c !default;
|
||||
$red: #e74c3c !default;
|
||||
$orange: #fd7e14 !default;
|
||||
$yellow: #f39c12 !default;
|
||||
$green: #00bc8c !default;
|
||||
$teal: #20c997 !default;
|
||||
$cyan: #3498db !default;
|
||||
|
||||
$primary: $blue !default;
|
||||
$secondary: $gray-700 !default;
|
||||
$success: $green !default;
|
||||
$info: $cyan !default;
|
||||
$warning: $yellow !default;
|
||||
$danger: $red !default;
|
||||
$light: $gray-500 !default;
|
||||
$dark: $gray-800 !default;
|
||||
|
||||
$min-contrast-ratio: 1.9 !default;
|
||||
|
||||
// Body
|
||||
|
||||
$body-bg: $gray-900 !default;
|
||||
$body-color: $white !default;
|
||||
|
||||
// Links
|
||||
|
||||
$link-color: $success !default;
|
||||
|
||||
// Fonts
|
||||
|
||||
// stylelint-disable-next-line value-keyword-case
|
||||
$font-family-sans-serif:
|
||||
Lato,
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
'Segoe UI',
|
||||
Roboto,
|
||||
'Helvetica Neue',
|
||||
Arial,
|
||||
sans-serif,
|
||||
'Apple Color Emoji',
|
||||
'Segoe UI Emoji',
|
||||
'Segoe UI Symbol' !default;
|
||||
$h1-font-size: 3rem !default;
|
||||
$h2-font-size: 2.5rem !default;
|
||||
$h3-font-size: 2rem !default;
|
||||
$text-muted: $gray-600 !default;
|
||||
|
||||
// Tables
|
||||
|
||||
$table-border-color: $gray-700 !default;
|
||||
|
||||
$table-bg-scale: 0% !default;
|
||||
|
||||
// Forms
|
||||
|
||||
$input-bg: $white !default;
|
||||
$input-color: $gray-800 !default;
|
||||
$input-border-color: $body-bg !default;
|
||||
$input-group-addon-color: $gray-500 !default;
|
||||
$input-group-addon-bg: $gray-700 !default;
|
||||
|
||||
$form-check-input-bg: $white !default;
|
||||
$form-check-input-border: none !default;
|
||||
|
||||
$form-file-button-color: $white !default;
|
||||
|
||||
// Dropdowns
|
||||
|
||||
$dropdown-bg: $gray-900 !default;
|
||||
$dropdown-border-color: $gray-700 !default;
|
||||
$dropdown-divider-bg: $gray-700 !default;
|
||||
$dropdown-link-color: $white !default;
|
||||
$dropdown-link-hover-color: $white !default;
|
||||
$dropdown-link-hover-bg: $primary !default;
|
||||
|
||||
// Navs
|
||||
|
||||
$nav-link-padding-x: 2rem !default;
|
||||
$nav-link-disabled-color: $gray-500 !default;
|
||||
$nav-tabs-border-color: $gray-700 !default;
|
||||
$nav-tabs-link-hover-border-color: $nav-tabs-border-color $nav-tabs-border-color transparent !default;
|
||||
$nav-tabs-link-active-color: $white !default;
|
||||
$nav-tabs-link-active-border-color: $nav-tabs-border-color $nav-tabs-border-color transparent !default;
|
||||
|
||||
// Navbar
|
||||
|
||||
$navbar-padding-y: 1rem !default;
|
||||
$navbar-dark-color: rgba($white, 0.6) !default;
|
||||
$navbar-dark-hover-color: $white !default;
|
||||
$navbar-light-color: rgba($gray-900, 0.7) !default;
|
||||
$navbar-light-hover-color: $gray-900 !default;
|
||||
$navbar-light-active-color: $gray-900 !default;
|
||||
$navbar-light-toggler-border-color: rgba($gray-900, 0.1) !default;
|
||||
|
||||
// Pagination
|
||||
|
||||
$pagination-color: $white !default;
|
||||
$pagination-bg: $success !default;
|
||||
$pagination-border-width: 0% !default;
|
||||
$pagination-border-color: transparent !default;
|
||||
$pagination-hover-color: $white !default;
|
||||
$pagination-hover-bg: lighten($success, 10%) !default;
|
||||
$pagination-hover-border-color: transparent !default;
|
||||
$pagination-active-bg: $pagination-hover-bg !default;
|
||||
$pagination-active-border-color: transparent !default;
|
||||
$pagination-disabled-color: $white !default;
|
||||
$pagination-disabled-bg: darken($success, 15%) !default;
|
||||
$pagination-disabled-border-color: transparent !default;
|
||||
|
||||
// Cards
|
||||
|
||||
$card-cap-bg: $gray-700 !default;
|
||||
$card-bg: $gray-800 !default;
|
||||
|
||||
// Popovers
|
||||
|
||||
$popover-bg: $gray-800 !default;
|
||||
$popover-header-bg: $gray-700 !default;
|
||||
|
||||
// Toasts
|
||||
|
||||
$toast-background-color: $gray-700 !default;
|
||||
$toast-header-background-color: $gray-800 !default;
|
||||
|
||||
// Modals
|
||||
|
||||
$modal-content-bg: $gray-800 !default;
|
||||
$modal-content-border-color: $gray-700 !default;
|
||||
$modal-header-border-color: $gray-700 !default;
|
||||
|
||||
// Progress bars
|
||||
|
||||
$progress-bg: $gray-700 !default;
|
||||
|
||||
// List group
|
||||
|
||||
$list-group-color: $body-color !default;
|
||||
$list-group-bg: $gray-800 !default;
|
||||
$list-group-border-color: $gray-700 !default;
|
||||
$list-group-hover-bg: $gray-700 !default;
|
||||
$list-group-action-hover-color: $list-group-color !default;
|
||||
$list-group-action-active-bg: $gray-900 !default;
|
||||
|
||||
// Breadcrumbs
|
||||
|
||||
$breadcrumb-padding-y: 0.375rem !default;
|
||||
$breadcrumb-padding-x: 0.75rem !default;
|
||||
$breadcrumb-bg: $gray-700 !default;
|
||||
$breadcrumb-border-radius: 0.25rem !default;
|
||||
|
||||
// Close
|
||||
|
||||
$btn-close-color: $white !default;
|
||||
$btn-close-opacity: 0.4 !default;
|
||||
$btn-close-hover-opacity: 1 !default;
|
||||
|
||||
// Code
|
||||
|
||||
$pre-color: inherit !default;
|
||||
|
||||
@import '../../../node_modules/bootstrap/scss/bootstrap';
|
||||
|
||||
// Darkly 5.1.3
|
||||
// Bootswatch
|
||||
|
||||
// Variables
|
||||
|
||||
$web-font-path: 'https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400&display=swap' !default;
|
||||
@if $web-font-path {
|
||||
@import url($web-font-path);
|
||||
}
|
||||
|
||||
// Typography
|
||||
|
||||
.blockquote {
|
||||
&-footer {
|
||||
color: $gray-600;
|
||||
}
|
||||
}
|
||||
|
||||
// Forms
|
||||
|
||||
.input-group-addon {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.form-floating > label {
|
||||
color: $gray-700;
|
||||
}
|
||||
|
||||
// Navs
|
||||
|
||||
.nav-tabs,
|
||||
.nav-pills {
|
||||
.nav-link,
|
||||
.nav-link.active,
|
||||
.nav-link.active:focus,
|
||||
.nav-link.active:hover,
|
||||
.nav-item.open .nav-link,
|
||||
.nav-item.open .nav-link:focus,
|
||||
.nav-item.open .nav-link:hover {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.breadcrumb a {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Indicators
|
||||
|
||||
.alert {
|
||||
color: $white;
|
||||
border: none;
|
||||
|
||||
a,
|
||||
.alert-link {
|
||||
color: $white;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
&-#{$color} {
|
||||
@if $enable-gradients {
|
||||
background: $value linear-gradient(180deg, mix($white, $value, 15%), $value) repeat-x;
|
||||
} @else {
|
||||
background-color: $value;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
305
assets/css/themes/default.scss
Normal file
305
assets/css/themes/default.scss
Normal file
@ -0,0 +1,305 @@
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Easy!Appointments - Online Appointment Scheduler
|
||||
*
|
||||
* @package EasyAppointments
|
||||
* @author A.Tselegidis <alextselegidis@gmail.com>
|
||||
* @copyright Copyright (c) Alex Tselegidis
|
||||
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
|
||||
* @link https://easyappointments.org
|
||||
* @since v1.5.0
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Lux 5.1.3
|
||||
// Bootswatch
|
||||
|
||||
$theme: 'lux' !default;
|
||||
|
||||
//
|
||||
// Color system
|
||||
//
|
||||
|
||||
$white: #fff !default;
|
||||
$gray-100: #f8f9fa !default;
|
||||
$gray-200: #f7f7f9 !default;
|
||||
$gray-300: #eceeef !default;
|
||||
$gray-400: #ced4da !default;
|
||||
$gray-500: #adb5bd !default;
|
||||
$gray-600: #919aa1 !default;
|
||||
$gray-700: #55595c !default;
|
||||
$gray-800: #343a40 !default;
|
||||
$gray-900: #1a1a1a !default;
|
||||
$black: #000 !default;
|
||||
|
||||
$blue: #007bff !default;
|
||||
$indigo: #6610f2 !default;
|
||||
$purple: #6f42c1 !default;
|
||||
$pink: #e83e8c !default;
|
||||
$red: #d9534f !default;
|
||||
$orange: #fd7e14 !default;
|
||||
$yellow: #f0ad4e !default;
|
||||
$green: #4bbf73 !default;
|
||||
$teal: #20c997 !default;
|
||||
$cyan: #1f9bcf !default;
|
||||
|
||||
$primary: #439982 !default;
|
||||
$secondary: $white !default;
|
||||
$success: $green !default;
|
||||
$info: $cyan !default;
|
||||
$warning: $yellow !default;
|
||||
$danger: $red !default;
|
||||
$light: $gray-100 !default;
|
||||
$dark: $gray-800 !default;
|
||||
|
||||
$min-contrast-ratio: 2.3 !default;
|
||||
|
||||
// Options
|
||||
|
||||
$enable-rounded: true !default;
|
||||
|
||||
// Body
|
||||
|
||||
$body-color: $gray-800 !default;
|
||||
|
||||
// Fonts
|
||||
|
||||
// stylelint-disable-next-line value-keyword-case
|
||||
//$font-family-sans-serif: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
|
||||
$h1-font-size: 2rem !default;
|
||||
$h2-font-size: 1.75rem !default;
|
||||
$h3-font-size: 1.5rem !default;
|
||||
$h4-font-size: 1.25rem !default;
|
||||
$h5-font-size: 1rem !default;
|
||||
$h6-font-size: 0.75rem !default;
|
||||
$headings-font-weight: 600 !default;
|
||||
$headings-color: $gray-900 !default;
|
||||
|
||||
// Tables
|
||||
|
||||
$table-border-color: rgba(0, 0, 0, 0.05) !default;
|
||||
|
||||
// Buttons + Forms
|
||||
|
||||
$input-btn-border-width: 1px !default;
|
||||
|
||||
// Buttons
|
||||
|
||||
$btn-line-height: 1.25rem !default;
|
||||
$input-btn-padding-y: 0.6rem !default;
|
||||
$input-btn-padding-x: 1rem !default;
|
||||
$input-btn-padding-y-sm: 0.35rem !default;
|
||||
$input-btn-padding-x-sm: 0.5rem !default;
|
||||
$input-btn-padding-y-lg: 1.85rem !default;
|
||||
$input-btn-padding-x-lg: 1.5rem !default;
|
||||
$btn-font-weight: 600 !default;
|
||||
|
||||
// Forms
|
||||
|
||||
$input-line-height: 1.25 !default;
|
||||
$input-bg: $white !default;
|
||||
$input-disabled-bg: $gray-300 !default;
|
||||
$input-group-addon-bg: $gray-300 !default;
|
||||
|
||||
// Navbar
|
||||
|
||||
$navbar-padding-y: 1.5rem !default;
|
||||
$navbar-dark-hover-color: $white !default;
|
||||
$navbar-light-color: rgba($black, 0.3) !default;
|
||||
$navbar-light-hover-color: $gray-900 !default;
|
||||
$navbar-light-active-color: $gray-900 !default;
|
||||
|
||||
// Pagination
|
||||
|
||||
$pagination-border-color: transparent !default;
|
||||
$pagination-hover-border-color: $pagination-border-color !default;
|
||||
$pagination-disabled-border-color: $pagination-border-color !default;
|
||||
|
||||
@import '../../../node_modules/bootstrap/scss/bootstrap';
|
||||
|
||||
// Bootswatch (Lux)
|
||||
|
||||
// Variables
|
||||
|
||||
// Hint: Use the following $var to load a custom font.
|
||||
// $web-font-path: "https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600&display=swap" !default;
|
||||
// @if $web-font-path {
|
||||
// @import url($web-font-path);
|
||||
// }
|
||||
|
||||
// Navbar
|
||||
|
||||
.navbar {
|
||||
font-size: $font-size-sm;
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
|
||||
&-nav {
|
||||
.nav-link {
|
||||
padding-top: 0.715rem;
|
||||
padding-bottom: 0.715rem;
|
||||
}
|
||||
}
|
||||
|
||||
&-brand {
|
||||
margin-right: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-light {
|
||||
border: 1px solid $gray-400 !important;
|
||||
|
||||
&.navbar-fixed-top {
|
||||
border-width: 0 0 1px;
|
||||
}
|
||||
|
||||
&.navbar-bottom-top {
|
||||
border-width: 1px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Buttons
|
||||
|
||||
.btn {
|
||||
font-size: $font-size-sm;
|
||||
text-transform: uppercase;
|
||||
|
||||
&-sm {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
&-warning {
|
||||
&,
|
||||
&:hover,
|
||||
&:not([disabled]):not(.disabled):active,
|
||||
&:focus {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
//color: #45927d;
|
||||
color: darken($primary, 5);
|
||||
}
|
||||
|
||||
.btn-outline-secondary {
|
||||
background: none;
|
||||
border-color: #777;
|
||||
color: #777;
|
||||
|
||||
&:not([disabled]):not(.disabled):hover,
|
||||
&:not([disabled]):not(.disabled):focus,
|
||||
&:not([disabled]):not(.disabled):active {
|
||||
background-color: $gray-400;
|
||||
border-color: $gray-400;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&:not([disabled]):not(.disabled):focus {
|
||||
box-shadow: 0 0 0 0.2rem rgba($gray-400, 0.5);
|
||||
}
|
||||
|
||||
&[disabled],
|
||||
&.disabled {
|
||||
color: $gray-400;
|
||||
border-color: $gray-400;
|
||||
}
|
||||
}
|
||||
|
||||
[class*='btn-outline-'] {
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
.border-secondary {
|
||||
border: 1px solid $gray-400 !important;
|
||||
}
|
||||
|
||||
.btn-close {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
// Typography
|
||||
|
||||
body {
|
||||
//font-weight: 200;
|
||||
letter-spacing: 0.05rem;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 3px;
|
||||
}
|
||||
|
||||
.text-secondary {
|
||||
color: $body-color !important;
|
||||
}
|
||||
|
||||
// Tables
|
||||
|
||||
th {
|
||||
font-size: $font-size-sm;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
// Navs
|
||||
|
||||
.dropdown-menu {
|
||||
font-size: $font-size-sm;
|
||||
text-transform: uppercase;
|
||||
border: 1px solid rgb(0 0 0 / 30%);
|
||||
|
||||
.dropdown-item {
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Indicators
|
||||
|
||||
.badge {
|
||||
padding-top: 0.28rem;
|
||||
|
||||
&-pill {
|
||||
border-radius: 10rem;
|
||||
}
|
||||
|
||||
&.bg-secondary,
|
||||
&.bg-light {
|
||||
color: $dark;
|
||||
}
|
||||
}
|
||||
|
||||
// Containers
|
||||
|
||||
.list-group-item {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
.h1,
|
||||
.h2,
|
||||
.h3,
|
||||
.h4,
|
||||
.h5,
|
||||
.h6 {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
&-title,
|
||||
&-header {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
// Forms
|
||||
|
||||
.form-label {
|
||||
font-weight: bold;
|
||||
}
|
||||
226
assets/css/themes/flatly.scss
Normal file
226
assets/css/themes/flatly.scss
Normal file
@ -0,0 +1,226 @@
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Easy!Appointments - Online Appointment Scheduler
|
||||
*
|
||||
* @package EasyAppointments
|
||||
* @author A.Tselegidis <alextselegidis@gmail.com>
|
||||
* @copyright Copyright (c) Alex Tselegidis
|
||||
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
|
||||
* @link https://easyappointments.org
|
||||
* @since v1.5.0
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Flatly 5.1.3
|
||||
// Bootswatch
|
||||
|
||||
$theme: 'flatly' !default;
|
||||
|
||||
//
|
||||
// Color system
|
||||
//
|
||||
|
||||
$white: #fff !default;
|
||||
$gray-100: #f8f9fa !default;
|
||||
$gray-200: #ecf0f1 !default;
|
||||
$gray-300: #dee2e6 !default;
|
||||
$gray-400: #ced4da !default;
|
||||
$gray-500: #b4bcc2 !default;
|
||||
$gray-600: #95a5a6 !default;
|
||||
$gray-700: #7b8a8b !default;
|
||||
$gray-800: #343a40 !default;
|
||||
$gray-900: #212529 !default;
|
||||
$black: #000 !default;
|
||||
|
||||
$blue: #2c3e50 !default;
|
||||
$indigo: #6610f2 !default;
|
||||
$purple: #6f42c1 !default;
|
||||
$pink: #e83e8c !default;
|
||||
$red: #e74c3c !default;
|
||||
$orange: #fd7e14 !default;
|
||||
$yellow: #f39c12 !default;
|
||||
$green: #18bc9c !default;
|
||||
$teal: #20c997 !default;
|
||||
$cyan: #3498db !default;
|
||||
|
||||
$primary: $blue !default;
|
||||
$secondary: $gray-600 !default;
|
||||
$success: $green !default;
|
||||
$info: $cyan !default;
|
||||
$warning: $yellow !default;
|
||||
$danger: $red !default;
|
||||
$light: $gray-200 !default;
|
||||
$dark: $gray-700 !default;
|
||||
|
||||
$min-contrast-ratio: 2.05 !default;
|
||||
|
||||
// Links
|
||||
|
||||
$link-color: $success !default;
|
||||
|
||||
// Fonts
|
||||
|
||||
// stylelint-disable-next-line value-keyword-case
|
||||
$font-family-sans-serif:
|
||||
Lato,
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
'Segoe UI',
|
||||
Roboto,
|
||||
'Helvetica Neue',
|
||||
Arial,
|
||||
sans-serif,
|
||||
'Apple Color Emoji',
|
||||
'Segoe UI Emoji',
|
||||
'Segoe UI Symbol' !default;
|
||||
$h1-font-size: 3rem !default;
|
||||
$h2-font-size: 2.5rem !default;
|
||||
$h3-font-size: 2rem !default;
|
||||
|
||||
// Tables
|
||||
|
||||
$table-bg-scale: 0% !default;
|
||||
|
||||
// Dropdowns
|
||||
|
||||
$dropdown-link-color: $gray-700 !default;
|
||||
$dropdown-link-hover-color: $white !default;
|
||||
$dropdown-link-hover-bg: $primary !default;
|
||||
|
||||
// Navs
|
||||
|
||||
$nav-link-padding-y: 0.5rem !default;
|
||||
$nav-link-padding-x: 2rem !default;
|
||||
$nav-link-disabled-color: $gray-600 !default;
|
||||
$nav-tabs-border-color: $gray-200 !default;
|
||||
|
||||
// Navbar
|
||||
|
||||
$navbar-padding-y: 1rem !default;
|
||||
$navbar-dark-color: $white !default;
|
||||
$navbar-dark-hover-color: $primary !default;
|
||||
$navbar-dark-active-color: $primary !default;
|
||||
|
||||
$navbar-dark-brand-color: $white !default;
|
||||
$navbar-dark-brand-hover-color: $navbar-dark-brand-color !default;
|
||||
|
||||
// Pagination
|
||||
|
||||
$pagination-color: $white !default;
|
||||
$pagination-bg: $success !default;
|
||||
$pagination-border-width: 0% !default;
|
||||
$pagination-border-color: transparent !default;
|
||||
$pagination-hover-color: $white !default;
|
||||
$pagination-hover-bg: darken($success, 15%) !default;
|
||||
$pagination-hover-border-color: transparent !default;
|
||||
$pagination-active-bg: $pagination-hover-bg !default;
|
||||
$pagination-active-border-color: transparent !default;
|
||||
$pagination-disabled-color: $gray-200 !default;
|
||||
$pagination-disabled-bg: lighten($success, 15%) !default;
|
||||
$pagination-disabled-border-color: transparent !default;
|
||||
|
||||
// List group
|
||||
|
||||
$list-group-hover-bg: $gray-200 !default;
|
||||
$list-group-disabled-bg: $gray-200 !default;
|
||||
|
||||
// Breadcrumbs
|
||||
|
||||
$breadcrumb-padding-y: 0.375rem !default;
|
||||
$breadcrumb-padding-x: 0.75rem !default;
|
||||
$breadcrumb-border-radius: 0.25rem !default;
|
||||
|
||||
// Close
|
||||
|
||||
$btn-close-color: $white !default;
|
||||
$btn-close-opacity: 0.4 !default;
|
||||
$btn-close-hover-opacity: 1 !default;
|
||||
|
||||
@import '../../../node_modules/bootstrap/scss/bootstrap';
|
||||
|
||||
// Flatly 5.1.3
|
||||
// Bootswatch
|
||||
|
||||
// Variables
|
||||
|
||||
$web-font-path: 'https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400&display=swap' !default;
|
||||
@if $web-font-path {
|
||||
@import url($web-font-path);
|
||||
}
|
||||
|
||||
// Navbar
|
||||
|
||||
.bg-primary {
|
||||
.navbar-nav .show > .nav-link,
|
||||
.navbar-nav .nav-link.active,
|
||||
.navbar-nav .nav-link:hover,
|
||||
.navbar-nav .nav-link:focus {
|
||||
color: $success !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Navs
|
||||
|
||||
.nav-tabs {
|
||||
.nav-link.active,
|
||||
.nav-link.active:focus,
|
||||
.nav-link.active:hover,
|
||||
.nav-item.open .nav-link,
|
||||
.nav-item.open .nav-link:focus,
|
||||
.nav-item.open .nav-link:hover {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
.pagination {
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Indicators
|
||||
|
||||
.badge {
|
||||
&.bg-light {
|
||||
color: $dark;
|
||||
}
|
||||
}
|
||||
|
||||
.alert {
|
||||
color: $white;
|
||||
border: none;
|
||||
|
||||
a,
|
||||
.alert-link {
|
||||
color: $white;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
&-#{$color} {
|
||||
@if $enable-gradients {
|
||||
background: $value linear-gradient(180deg, mix($body-bg, $value, 15%), $value) repeat-x;
|
||||
} @else {
|
||||
background-color: $value;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-light {
|
||||
&,
|
||||
a,
|
||||
.alert-link {
|
||||
color: $body-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Containers
|
||||
|
||||
.modal,
|
||||
.toast,
|
||||
.offcanvas {
|
||||
.btn-close {
|
||||
background-image: escape-svg(
|
||||
url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$black}'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/></svg>")
|
||||
);
|
||||
}
|
||||
}
|
||||
227
assets/css/themes/litera.scss
Normal file
227
assets/css/themes/litera.scss
Normal file
@ -0,0 +1,227 @@
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Easy!Appointments - Online Appointment Scheduler
|
||||
*
|
||||
* @package EasyAppointments
|
||||
* @author A.Tselegidis <alextselegidis@gmail.com>
|
||||
* @copyright Copyright (c) Alex Tselegidis
|
||||
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
|
||||
* @link https://easyappointments.org
|
||||
* @since v1.5.0
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Litera 5.1.3
|
||||
// Bootswatch
|
||||
|
||||
$theme: 'litera' !default;
|
||||
|
||||
//
|
||||
// Color system
|
||||
//
|
||||
|
||||
$white: #fff !default;
|
||||
$gray-100: #f8f9fa !default;
|
||||
$gray-200: #e9ecef !default;
|
||||
$gray-300: #ddd !default;
|
||||
$gray-400: #ced4da !default;
|
||||
$gray-500: #adb5bd !default;
|
||||
$gray-600: #868e96 !default;
|
||||
$gray-700: #495057 !default;
|
||||
$gray-800: #343a40 !default;
|
||||
$gray-900: #212529 !default;
|
||||
$black: #000 !default;
|
||||
|
||||
$blue: #4582ec !default;
|
||||
$indigo: #6610f2 !default;
|
||||
$purple: #6f42c1 !default;
|
||||
$pink: #e83e8c !default;
|
||||
$red: #d9534f !default;
|
||||
$orange: #fd7e14 !default;
|
||||
$yellow: #f0ad4e !default;
|
||||
$green: #02b875 !default;
|
||||
$teal: #20c997 !default;
|
||||
$cyan: #17a2b8 !default;
|
||||
|
||||
$primary: $blue !default;
|
||||
$secondary: $gray-500 !default;
|
||||
$success: $green !default;
|
||||
$info: $cyan !default;
|
||||
$warning: $yellow !default;
|
||||
$danger: $red !default;
|
||||
$light: $gray-100 !default;
|
||||
$dark: $gray-800 !default;
|
||||
|
||||
$min-contrast-ratio: 1.85 !default;
|
||||
|
||||
// Body
|
||||
|
||||
$body-color: $gray-800 !default;
|
||||
|
||||
// Fonts
|
||||
|
||||
// stylelint-disable value-keyword-case
|
||||
$font-family-sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans',
|
||||
sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' !default;
|
||||
$font-family-serif: Georgia, Cambria, 'Times New Roman', Times, serif !default;
|
||||
// stylelint-enable
|
||||
|
||||
$font-size-base: 1.1rem !default;
|
||||
$headings-font-weight: 700 !default;
|
||||
|
||||
// Tables
|
||||
|
||||
$table-border-color: rgba(0, 0, 0, 0.1) !default;
|
||||
|
||||
$table-bg-scale: 0% !default;
|
||||
|
||||
// Buttons
|
||||
|
||||
$input-btn-padding-y: 0.5rem !default;
|
||||
$input-btn-padding-x: 1.1rem !default;
|
||||
$btn-font-family: $font-family-sans-serif !default;
|
||||
$btn-font-size: 0.875rem !default;
|
||||
$btn-font-size-sm: 0.688rem !default;
|
||||
|
||||
$btn-border-radius: 1.078em !default;
|
||||
$btn-border-radius-lg: 2.688em !default;
|
||||
$btn-border-radius-sm: 0.844em !default;
|
||||
|
||||
// Forms
|
||||
|
||||
$input-border-color: rgba(0, 0, 0, 0.1) !default;
|
||||
$input-group-addon-bg: $gray-200 !default;
|
||||
|
||||
// Navbar
|
||||
|
||||
$navbar-dark-color: rgba($white, 0.6) !default;
|
||||
$navbar-dark-hover-color: $white !default;
|
||||
$navbar-light-hover-color: $body-color !default;
|
||||
$navbar-light-active-color: $body-color !default;
|
||||
|
||||
// Tooltips
|
||||
|
||||
$tooltip-font-size: 11px !default;
|
||||
|
||||
// Badges
|
||||
|
||||
$badge-font-weight: 400 !default;
|
||||
$badge-padding-y: 0.6em !default;
|
||||
$badge-padding-x: 1.2em !default;
|
||||
|
||||
// Alerts
|
||||
|
||||
$alert-border-width: 0 !default;
|
||||
|
||||
@import '../../../node_modules/bootstrap/scss/bootstrap';
|
||||
|
||||
// Litera 5.1.3
|
||||
// Bootswatch
|
||||
|
||||
// Navbar
|
||||
|
||||
.navbar {
|
||||
font-size: $font-size-sm;
|
||||
|
||||
&.bg-dark {
|
||||
background-color: $success !important;
|
||||
}
|
||||
|
||||
&.bg-light {
|
||||
background-color: $white !important;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
|
||||
&.navbar-fixed-top {
|
||||
border-width: 0 0 1px;
|
||||
}
|
||||
|
||||
&.navbar-fixed-bottom {
|
||||
border-width: 1px 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Typography
|
||||
|
||||
p {
|
||||
font-family: $font-family-serif;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
footer {
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
|
||||
.lead {
|
||||
font-family: $font-family-sans-serif;
|
||||
color: $gray-600;
|
||||
}
|
||||
|
||||
// Tables
|
||||
|
||||
table,
|
||||
.table {
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
|
||||
// Navs
|
||||
|
||||
.nav,
|
||||
.breadcrumb,
|
||||
.pagination {
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
|
||||
// Indicators
|
||||
|
||||
.alert {
|
||||
font-size: $font-size-sm;
|
||||
color: $white;
|
||||
|
||||
&,
|
||||
p {
|
||||
font-family: $font-family-sans-serif;
|
||||
}
|
||||
|
||||
a,
|
||||
.alert-link {
|
||||
font-weight: 400;
|
||||
color: $white;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
&-#{$color} {
|
||||
@if $enable-gradients {
|
||||
background: $value linear-gradient($value, mix($body-bg, $value, 15%)) repeat-x;
|
||||
} @else {
|
||||
background-color: $value;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-light {
|
||||
&,
|
||||
a,
|
||||
.alert-link {
|
||||
color: $body-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.badge {
|
||||
&.bg-light {
|
||||
color: $dark;
|
||||
}
|
||||
}
|
||||
|
||||
// Containers
|
||||
|
||||
.list-group {
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
444
assets/css/themes/lumen.scss
Normal file
444
assets/css/themes/lumen.scss
Normal file
@ -0,0 +1,444 @@
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Easy!Appointments - Online Appointment Scheduler
|
||||
*
|
||||
* @package EasyAppointments
|
||||
* @author A.Tselegidis <alextselegidis@gmail.com>
|
||||
* @copyright Copyright (c) Alex Tselegidis
|
||||
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
|
||||
* @link https://easyappointments.org
|
||||
* @since v1.5.0
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Lumen 5.1.3
|
||||
// Bootswatch
|
||||
|
||||
$theme: 'lumen' !default;
|
||||
|
||||
//
|
||||
// Color system
|
||||
//
|
||||
|
||||
$white: #fff !default;
|
||||
$gray-100: #f6f6f6 !default;
|
||||
$gray-200: #f0f0f0 !default;
|
||||
$gray-300: #dee2e6 !default;
|
||||
$gray-400: #ced4da !default;
|
||||
$gray-500: #adb5bd !default;
|
||||
$gray-600: #999 !default;
|
||||
$gray-700: #555 !default;
|
||||
$gray-800: #333 !default;
|
||||
$gray-900: #222 !default;
|
||||
$black: #000 !default;
|
||||
|
||||
$blue: #158cba !default;
|
||||
$indigo: #6610f2 !default;
|
||||
$purple: #6f42c1 !default;
|
||||
$pink: #e83e8c !default;
|
||||
$red: #ff4136 !default;
|
||||
$orange: #fd7e14 !default;
|
||||
$yellow: #ff851b !default;
|
||||
$green: #28b62c !default;
|
||||
$teal: #20c997 !default;
|
||||
$cyan: #75caeb !default;
|
||||
|
||||
$primary: $blue !default;
|
||||
$secondary: $gray-600 !default;
|
||||
$success: $green !default;
|
||||
$info: $cyan !default;
|
||||
$warning: $yellow !default;
|
||||
$danger: $red !default;
|
||||
$light: $gray-100 !default;
|
||||
$dark: $gray-700 !default;
|
||||
|
||||
$min-contrast-ratio: 1.75 !default;
|
||||
|
||||
// Fonts
|
||||
|
||||
// stylelint-disable-next-line value-keyword-case
|
||||
$font-family-sans-serif:
|
||||
'Source Sans Pro',
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
'Segoe UI',
|
||||
Roboto,
|
||||
'Helvetica Neue',
|
||||
Arial,
|
||||
sans-serif,
|
||||
'Apple Color Emoji',
|
||||
'Segoe UI Emoji',
|
||||
'Segoe UI Symbol' !default;
|
||||
|
||||
// Tables
|
||||
|
||||
$table-bg-scale: 0% !default;
|
||||
|
||||
// Buttons
|
||||
|
||||
$btn-font-weight: 700 !default;
|
||||
|
||||
// Dropdowns
|
||||
|
||||
$dropdown-link-color: rgba(0, 0, 0, 0.5) !default;
|
||||
|
||||
// Navs
|
||||
|
||||
$nav-tabs-border-color: $gray-200 !default;
|
||||
$nav-tabs-link-hover-border-color: $nav-tabs-border-color !default;
|
||||
$nav-tabs-link-active-color: $gray-900 !default;
|
||||
$nav-tabs-link-active-border-color: $nav-tabs-border-color !default;
|
||||
|
||||
// Pagination
|
||||
|
||||
$pagination-color: $gray-700 !default;
|
||||
$pagination-bg: $gray-200 !default;
|
||||
$pagination-hover-color: $pagination-color !default;
|
||||
$pagination-hover-bg: $pagination-bg !default;
|
||||
$pagination-active-border-color: darken($primary, 5%) !default;
|
||||
$pagination-disabled-color: $gray-600 !default;
|
||||
$pagination-disabled-bg: $pagination-bg !default;
|
||||
|
||||
// Breadcrumbs
|
||||
|
||||
$breadcrumb-padding-y: 0.375rem !default;
|
||||
$breadcrumb-padding-x: 0.75rem !default;
|
||||
$breadcrumb-bg: $pagination-bg !default;
|
||||
$breadcrumb-border-radius: 0.25rem !default;
|
||||
|
||||
// Modals
|
||||
|
||||
$modal-content-border-color: rgba($black, 0.1) !default;
|
||||
|
||||
// Close
|
||||
|
||||
$btn-close-color: $white !default;
|
||||
$btn-close-opacity: 0.4 !default;
|
||||
$btn-close-hover-opacity: 1 !default;
|
||||
|
||||
@import '../../../node_modules/bootstrap/scss/bootstrap';
|
||||
|
||||
// Lumen 5.1.3
|
||||
// Bootswatch
|
||||
|
||||
// Variables
|
||||
|
||||
$web-font-path: 'https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,300;0,400;0,700;1,400&display=swap' !default;
|
||||
@if $web-font-path {
|
||||
@import url($web-font-path);
|
||||
}
|
||||
|
||||
// Mixins
|
||||
|
||||
@mixin shadow($width: 4px) {
|
||||
border-style: solid;
|
||||
border-width: 0 1px $width 1px;
|
||||
}
|
||||
|
||||
// Navbar
|
||||
|
||||
.navbar {
|
||||
@include shadow();
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
&.bg-#{$color} {
|
||||
border-color: shade-color($value, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Buttons
|
||||
|
||||
.btn {
|
||||
@include shadow();
|
||||
text-transform: uppercase;
|
||||
|
||||
&:not(.disabled):hover {
|
||||
margin-top: 1px;
|
||||
border-bottom-width: 3px;
|
||||
}
|
||||
|
||||
&:not(.disabled):active {
|
||||
margin-top: 2px;
|
||||
border-bottom-width: 2px;
|
||||
@include box-shadow(none);
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
&-#{$color} {
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
background-color: $value;
|
||||
}
|
||||
|
||||
&,
|
||||
&:not(.disabled):hover,
|
||||
&:not(.disabled):active,
|
||||
&:focus {
|
||||
border-color: shade-color($value, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[class*='btn-outline'] {
|
||||
border-top-width: 1px;
|
||||
}
|
||||
|
||||
.btn-group-vertical {
|
||||
.btn + .btn {
|
||||
&:hover {
|
||||
margin-top: -1px;
|
||||
border-top-width: 1px;
|
||||
}
|
||||
|
||||
&:active {
|
||||
margin-top: -1px;
|
||||
border-top-width: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Typography
|
||||
|
||||
.text-secondary {
|
||||
color: $gray-700 !important;
|
||||
}
|
||||
|
||||
.blockquote-footer {
|
||||
color: $gray-600;
|
||||
}
|
||||
|
||||
// Forms
|
||||
|
||||
.form-control {
|
||||
box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.075);
|
||||
}
|
||||
|
||||
// Navs
|
||||
|
||||
.nav {
|
||||
.open > a,
|
||||
.open > a:hover,
|
||||
.open > a:focus {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-tabs {
|
||||
.nav-link {
|
||||
color: $body-color;
|
||||
|
||||
&,
|
||||
&.disabled,
|
||||
&.disabled:hover,
|
||||
&.disabled:focus {
|
||||
margin-top: 6px;
|
||||
border-color: $nav-tabs-border-color;
|
||||
transition:
|
||||
padding-bottom 0.2s ease-in-out,
|
||||
margin-top 0.2s ease-in-out,
|
||||
border-bottom 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
&:not(.disabled):hover,
|
||||
&:not(.disabled):focus,
|
||||
&.active {
|
||||
padding-bottom: add(0.5rem, 6px);
|
||||
margin-top: 0;
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&.nav-justified > li {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
margin-top: 0;
|
||||
@include shadow();
|
||||
border-top-width: 1px;
|
||||
@include box-shadow(none);
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
border-color: shade-color($breadcrumb-bg, 10%);
|
||||
@include shadow();
|
||||
}
|
||||
|
||||
.pagination {
|
||||
> li > a,
|
||||
> li > span {
|
||||
position: relative;
|
||||
top: 0;
|
||||
font-weight: 700;
|
||||
color: $pagination-color;
|
||||
text-transform: uppercase;
|
||||
@include shadow();
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
top: 1px;
|
||||
text-decoration: none;
|
||||
border-bottom-width: 3px;
|
||||
}
|
||||
|
||||
&:active {
|
||||
top: 2px;
|
||||
border-bottom-width: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
> .disabled > a,
|
||||
> .disabled > span {
|
||||
&:hover {
|
||||
top: 0;
|
||||
@include shadow();
|
||||
}
|
||||
|
||||
&:active {
|
||||
top: 0;
|
||||
@include shadow();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pager {
|
||||
> li > a,
|
||||
> li > span,
|
||||
> .disabled > a,
|
||||
> .disabled > span {
|
||||
&,
|
||||
&:hover,
|
||||
&:active {
|
||||
border-right-width: 2px;
|
||||
border-left-width: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Indicators
|
||||
|
||||
.btn-close {
|
||||
text-decoration: none;
|
||||
opacity: 0.4;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.alert {
|
||||
color: $white;
|
||||
@include shadow();
|
||||
|
||||
&-primary {
|
||||
background-color: $primary;
|
||||
border-color: shade-color($primary, 10%);
|
||||
}
|
||||
|
||||
&-secondary {
|
||||
background-color: $secondary;
|
||||
border-color: shade-color($secondary, 10%);
|
||||
}
|
||||
|
||||
&-success {
|
||||
background-color: $success;
|
||||
border-color: shade-color($success, 10%);
|
||||
}
|
||||
|
||||
&-info {
|
||||
background-color: $info;
|
||||
border-color: shade-color($info, 10%);
|
||||
}
|
||||
|
||||
&-danger {
|
||||
background-color: $danger;
|
||||
border-color: shade-color($danger, 10%);
|
||||
}
|
||||
|
||||
&-warning {
|
||||
background-color: $warning;
|
||||
border-color: shade-color($warning, 10%);
|
||||
}
|
||||
|
||||
&-dark {
|
||||
background-color: $dark;
|
||||
border-color: shade-color($dark, 10%);
|
||||
}
|
||||
|
||||
&-light {
|
||||
background-color: $light;
|
||||
border-color: shade-color($light, 10%);
|
||||
}
|
||||
|
||||
.alert-link {
|
||||
font-weight: 400;
|
||||
color: $white;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&-secondary,
|
||||
&-light {
|
||||
&,
|
||||
a,
|
||||
.alert-link {
|
||||
color: $body-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.badge {
|
||||
&.bg-secondary,
|
||||
&.bg-light {
|
||||
color: $dark;
|
||||
}
|
||||
}
|
||||
|
||||
// Containers
|
||||
|
||||
a.list-group-item {
|
||||
&-success {
|
||||
&.active {
|
||||
background-color: $success;
|
||||
}
|
||||
|
||||
&.active:hover,
|
||||
&.active:focus {
|
||||
background-color: shade-color($success, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
&-warning {
|
||||
&.active {
|
||||
background-color: $warning;
|
||||
}
|
||||
|
||||
&.active:hover,
|
||||
&.active:focus {
|
||||
background-color: shade-color($warning, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
&-danger {
|
||||
&.active {
|
||||
background-color: $danger;
|
||||
}
|
||||
|
||||
&.active:hover,
|
||||
&.active:focus {
|
||||
background-color: shade-color($danger, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal,
|
||||
.toast,
|
||||
.offcanvas {
|
||||
.btn-close {
|
||||
background-image: escape-svg(
|
||||
url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$black}'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/></svg>")
|
||||
);
|
||||
}
|
||||
}
|
||||
806
assets/css/themes/materia.scss
Normal file
806
assets/css/themes/materia.scss
Normal file
@ -0,0 +1,806 @@
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Easy!Appointments - Online Appointment Scheduler
|
||||
*
|
||||
* @package EasyAppointments
|
||||
* @author A.Tselegidis <alextselegidis@gmail.com>
|
||||
* @copyright Copyright (c) Alex Tselegidis
|
||||
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
|
||||
* @link https://easyappointments.org
|
||||
* @since v1.5.0
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Materia 5.1.3
|
||||
// Bootswatch
|
||||
|
||||
$theme: 'materia' !default;
|
||||
|
||||
//
|
||||
// Color system
|
||||
//
|
||||
|
||||
$white: #fff !default;
|
||||
$gray-100: #f8f9fa !default;
|
||||
$gray-200: #eee !default;
|
||||
$gray-300: #dee2e6 !default;
|
||||
$gray-400: #ced4da !default;
|
||||
$gray-500: #bbb !default;
|
||||
$gray-600: #666 !default;
|
||||
$gray-700: #444 !default;
|
||||
$gray-800: #222 !default;
|
||||
$gray-900: #212121 !default;
|
||||
$black: #000 !default;
|
||||
|
||||
$blue: #2196f3 !default;
|
||||
$indigo: #6610f2 !default;
|
||||
$purple: #6f42c1 !default;
|
||||
$pink: #e83e8c !default;
|
||||
$red: #e51c23 !default;
|
||||
$orange: #fd7e14 !default;
|
||||
$yellow: #ff9800 !default;
|
||||
$green: #4caf50 !default;
|
||||
$teal: #20c997 !default;
|
||||
$cyan: #9c27b0 !default;
|
||||
|
||||
$primary: $blue !default;
|
||||
$secondary: $white !default;
|
||||
$success: $green !default;
|
||||
$info: $cyan !default;
|
||||
$warning: $yellow !default;
|
||||
$danger: $red !default;
|
||||
$light: $gray-100 !default;
|
||||
$dark: $gray-800 !default;
|
||||
|
||||
$min-contrast-ratio: 2.15 !default;
|
||||
|
||||
$enable-gradients: true !default;
|
||||
|
||||
// Body
|
||||
|
||||
$body-color: $gray-700 !default;
|
||||
|
||||
// Fonts
|
||||
|
||||
// stylelint-disable-next-line value-keyword-case
|
||||
$font-family-sans-serif:
|
||||
Roboto,
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
'Segoe UI',
|
||||
'Helvetica Neue',
|
||||
Arial,
|
||||
sans-serif !default;
|
||||
$font-size-base: 1rem !default;
|
||||
$font-weight-base: 400 !default;
|
||||
|
||||
// Buttons
|
||||
|
||||
$input-btn-padding-y: 0.8rem !default;
|
||||
$input-btn-padding-x: 1rem !default;
|
||||
|
||||
// Forms
|
||||
|
||||
$input-padding-y: 1rem !default;
|
||||
$input-padding-x: 0% !default;
|
||||
$input-padding-y-sm: 0% !default;
|
||||
$input-padding-x-sm: 0% !default;
|
||||
$input-padding-y-lg: ($font-size-base * 1.25) !default;
|
||||
$input-padding-x-lg: 0% !default;
|
||||
$input-bg: transparent !default;
|
||||
$input-disabled-bg: transparent !default;
|
||||
$input-color: $gray-600 !default;
|
||||
$input-border-color: transparent !default;
|
||||
$input-border-width: 0% !default;
|
||||
$input-border-radius: 0% !default;
|
||||
$input-border-radius-lg: 0% !default;
|
||||
$input-border-radius-sm: 0% !default;
|
||||
$input-placeholder-color: rgba(0, 0, 0, 0.4) !default;
|
||||
$input-group-addon-bg: transparent !default;
|
||||
|
||||
// Navs
|
||||
|
||||
$nav-link-disabled-color: $gray-500 !default;
|
||||
$nav-tabs-border-color: transparent !default;
|
||||
|
||||
// Navbar
|
||||
|
||||
$navbar-padding-y: 1rem !default;
|
||||
$navbar-dark-color: rgba($white, 0.75) !default;
|
||||
$navbar-dark-hover-color: $white !default;
|
||||
|
||||
// Cards
|
||||
|
||||
$card-border-width: 0 !default;
|
||||
$card-border-color: transparent !default;
|
||||
|
||||
// Tooltips
|
||||
|
||||
$tooltip-bg: $gray-700 !default;
|
||||
|
||||
// Modals
|
||||
|
||||
$modal-content-border-color: transparent !default;
|
||||
|
||||
// Progress bars
|
||||
|
||||
$progress-height: 0.375rem !default;
|
||||
$progress-border-radius: 0% !default;
|
||||
|
||||
// Close
|
||||
|
||||
$btn-close-color: $white !default;
|
||||
$btn-close-opacity: 0.6 !default;
|
||||
$btn-close-hover-opacity: 1 !default;
|
||||
|
||||
@import '../../../node_modules/bootstrap/scss/bootstrap';
|
||||
|
||||
// Materia 5.1.3
|
||||
// Bootswatch
|
||||
|
||||
// Variables
|
||||
|
||||
$web-font-path: 'https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap' !default;
|
||||
@if $web-font-path {
|
||||
@import url($web-font-path);
|
||||
}
|
||||
|
||||
// Mixins
|
||||
|
||||
@mixin ripple($color) {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-left: 0;
|
||||
pointer-events: none;
|
||||
content: '';
|
||||
background-position: 50%;
|
||||
background-size: 1000% 1000%;
|
||||
border: none;
|
||||
opacity: 0;
|
||||
transition:
|
||||
background 0.5s,
|
||||
opacity 1s;
|
||||
@include gradient-radial($color 10%, transparent 10.01%);
|
||||
}
|
||||
|
||||
&:active::before {
|
||||
background-size: 0 0;
|
||||
opacity: 0.2;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&[disabled] {
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin btn($class, $bg, $color) {
|
||||
.btn-#{$class} {
|
||||
&:focus {
|
||||
background-color: $bg;
|
||||
box-shadow: 0 0 0 2px rgba(204, 204, 204, 0.5);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active:hover {
|
||||
background-color: shade-color($bg, 12%);
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
@include ripple($color);
|
||||
}
|
||||
|
||||
.btn-outline-#{$class} {
|
||||
@include ripple($color);
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-toggle::after,
|
||||
.dropup .dropdown-toggle::after,
|
||||
.dropstart .dropdown-toggle::after,
|
||||
.dropend .dropdown-toggle::after {
|
||||
border-width: 4px;
|
||||
}
|
||||
|
||||
// Navbar
|
||||
|
||||
.navbar {
|
||||
border: none;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
|
||||
|
||||
&-brand {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
&-nav .nav-link {
|
||||
padding-top: 0.9rem;
|
||||
padding-bottom: 0.9rem;
|
||||
}
|
||||
|
||||
&.bg-dark,
|
||||
&.bg-primary {
|
||||
input[type='search'],
|
||||
input[type='text'],
|
||||
input[type='password'],
|
||||
input[type='email'],
|
||||
input[type='number'],
|
||||
input[type='tel'] {
|
||||
color: $white;
|
||||
box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.5);
|
||||
|
||||
&:focus {
|
||||
box-shadow: inset 0 -2px 0 $white;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Buttons
|
||||
|
||||
@include btn(primary, $primary, $white);
|
||||
@include btn(secondary, $secondary, $gray-500);
|
||||
@include btn(success, $success, $white);
|
||||
@include btn(info, $info, $white);
|
||||
@include btn(warning, $warning, $white);
|
||||
@include btn(danger, $danger, $white);
|
||||
@include btn(dark, $dark, $white);
|
||||
@include btn(light, $light, $white);
|
||||
|
||||
.btn {
|
||||
text-transform: uppercase;
|
||||
border: none;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
|
||||
transition:
|
||||
color 0.4s,
|
||||
background-color 0.4s,
|
||||
border-color 0.4s,
|
||||
box-shadow 0.4s;
|
||||
|
||||
&-link {
|
||||
color: $link-color;
|
||||
box-shadow: none;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $link-hover-color;
|
||||
text-decoration: $link-hover-decoration;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.disabled, // Although btn-link is intended for buttons, which want to look like link, I include here a.disable for the sake of consistency
|
||||
&[disabled],
|
||||
fieldset[disabled] & {
|
||||
&:hover,
|
||||
&:active:hover {
|
||||
color: $btn-link-disabled-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-secondary {
|
||||
&.disabled,
|
||||
&[disabled],
|
||||
fieldset[disabled] & {
|
||||
color: rgba(0, 0, 0, 0.4);
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
opacity: 1;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-outline-secondary {
|
||||
color: $gray-300;
|
||||
border-color: $gray-200;
|
||||
}
|
||||
|
||||
&-warning {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
.btn + .btn,
|
||||
.btn + .btn-group,
|
||||
.btn-group + .btn,
|
||||
.btn-group + .btn-group {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&-vertical {
|
||||
> .btn + .btn,
|
||||
> .btn + .btn-group,
|
||||
> .btn-group + .btn,
|
||||
> .btn-group + .btn-group {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.btn + .btn,
|
||||
.btn + .btn-group > .dropdown-toggle {
|
||||
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
.border-secondary {
|
||||
border: 1px solid #dfdfdf !important;
|
||||
}
|
||||
|
||||
// Typography
|
||||
|
||||
body,
|
||||
input,
|
||||
button {
|
||||
letter-spacing: 0.1px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 0 1em;
|
||||
}
|
||||
|
||||
.text-secondary {
|
||||
color: $gray-500 !important;
|
||||
}
|
||||
|
||||
// Tables
|
||||
|
||||
.table-hover {
|
||||
> tbody > tr,
|
||||
> tbody > tr > th,
|
||||
> tbody > tr > td {
|
||||
transition:
|
||||
background-color 0.2s,
|
||||
color 0.2s;
|
||||
}
|
||||
}
|
||||
|
||||
.thead-inverse th {
|
||||
color: $white;
|
||||
background-color: $primary;
|
||||
}
|
||||
|
||||
// Forms
|
||||
|
||||
.col-form-label {
|
||||
font-size: 16px;
|
||||
|
||||
&-sm {
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
|
||||
&-lg {
|
||||
font-size: $font-size-lg;
|
||||
}
|
||||
}
|
||||
|
||||
textarea,
|
||||
textarea.form-control,
|
||||
input.form-control,
|
||||
input[type='text'],
|
||||
input[type='password'],
|
||||
input[type='email'],
|
||||
input[type='number'],
|
||||
[type='text'].form-control,
|
||||
[type='password'].form-control,
|
||||
[type='email'].form-control,
|
||||
[type='tel'].form-control,
|
||||
[contenteditable].form-control {
|
||||
box-shadow: inset 0 -1px 0 #ddd;
|
||||
transition: box-shadow 0.2s;
|
||||
|
||||
&:focus {
|
||||
box-shadow: inset 0 -2px 0 $primary;
|
||||
}
|
||||
|
||||
&[disabled],
|
||||
&[readonly] {
|
||||
border-bottom: 1px dotted #ddd;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&[disabled],
|
||||
&[disabled]::placeholder {
|
||||
color: #ddd;
|
||||
}
|
||||
}
|
||||
|
||||
select,
|
||||
select.form-control {
|
||||
padding: 0.5rem 0;
|
||||
background-image: escape-svg(
|
||||
url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 4'><path fill='#{$gray-600}' d='M8 0 4 4 0 0z'/></svg>")
|
||||
);
|
||||
background-repeat: no-repeat;
|
||||
background-position: right center;
|
||||
background-size: 8px 4px;
|
||||
box-shadow: inset 0 -1px 0 #ddd;
|
||||
appearance: none;
|
||||
|
||||
&.input {
|
||||
&-sm {
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
|
||||
&-lg {
|
||||
font-size: $font-size-lg;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background-image: escape-svg(
|
||||
url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 4'><path fill='#{$gray-900}' d='M8 0 4 4 0 0z'/></svg>")
|
||||
);
|
||||
box-shadow: inset 0 -2px 0 $primary;
|
||||
}
|
||||
|
||||
&[multiple] {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
.form-check-input {
|
||||
width: 1.25em;
|
||||
height: 1.25em;
|
||||
margin-top: 1px;
|
||||
border: 2px solid $gray-400;
|
||||
|
||||
&:checked[type='radio'] {
|
||||
background-image: escape-svg(
|
||||
url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$blue}' stroke='#{$white}'/></svg>")
|
||||
),
|
||||
var(--bs-gradient);
|
||||
background-size: 1.8em;
|
||||
}
|
||||
}
|
||||
|
||||
.form-switch {
|
||||
.form-check-input {
|
||||
position: relative;
|
||||
height: 0.8em;
|
||||
margin-top: 0.29em;
|
||||
background-color: $gray-400;
|
||||
background-image: none;
|
||||
border: none;
|
||||
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: -0.2em;
|
||||
left: -0.2em;
|
||||
width: 1.2em;
|
||||
height: 1.2em;
|
||||
content: '';
|
||||
background-color: $white;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
|
||||
transition: left 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: -0.2em;
|
||||
left: -0.2em;
|
||||
z-index: -1;
|
||||
width: 1.2em;
|
||||
height: 1.2em;
|
||||
content: '';
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 0 9px rgba(0, 0, 0, 0.05);
|
||||
transition:
|
||||
left 0.15s ease-in-out,
|
||||
transform 0.15s ease-in-out,
|
||||
box-shadow 0.15s ease-in-out;
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
&:hover:not(.disabled),
|
||||
&:focus:not(.disabled) {
|
||||
&::after {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus:not(.disabled) {
|
||||
&::after {
|
||||
box-shadow: 0 0 0 9px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
&:checked {
|
||||
background-color: rgba(33, 150, 243, 0.3);
|
||||
|
||||
&::before {
|
||||
left: calc(100% - 0.8em);
|
||||
background-color: rgba(33, 150, 243, 1);
|
||||
}
|
||||
|
||||
&::after {
|
||||
left: calc(100% - 0.8em);
|
||||
box-shadow: 0 0 0 9px rgba(33, 150, 243, 0.1);
|
||||
}
|
||||
|
||||
&:hover:not(.disabled),
|
||||
&:focus:not(.disabled) {
|
||||
&::after {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus:not(.disabled) {
|
||||
&::after {
|
||||
box-shadow: 0 0 0 9px rgba(33, 150, 243, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-check:not(.form-switch) {
|
||||
.form-check-input {
|
||||
&:checked[type='checkbox'] {
|
||||
background-image: escape-svg(
|
||||
url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$white}' stroke-width='2' d='m6 10 3 3 6-6'/></svg>")
|
||||
),
|
||||
var(--bs-gradient);
|
||||
background-size: 1.6em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.has-warning {
|
||||
input:not([type='checkbox']),
|
||||
.form-control,
|
||||
input.form-control[readonly],
|
||||
input[type='text'][readonly],
|
||||
[type='text'].form-control[readonly],
|
||||
input:not([type='checkbox']):focus,
|
||||
.form-control:focus {
|
||||
border-bottom: none;
|
||||
box-shadow: inset 0 -2px 0 $warning;
|
||||
}
|
||||
}
|
||||
|
||||
.has-danger {
|
||||
input:not([type='checkbox']),
|
||||
.form-control,
|
||||
input.form-control[readonly],
|
||||
input[type='text'][readonly],
|
||||
[type='text'].form-control[readonly],
|
||||
input:not([type='checkbox']):focus,
|
||||
.form-control:focus {
|
||||
border-bottom: none;
|
||||
box-shadow: inset 0 -2px 0 $danger;
|
||||
}
|
||||
}
|
||||
|
||||
.has-success {
|
||||
input:not([type='checkbox']),
|
||||
.form-control,
|
||||
input.form-control[readonly],
|
||||
input[type='text'][readonly],
|
||||
[type='text'].form-control[readonly],
|
||||
input:not([type='checkbox']):focus,
|
||||
.form-control:focus {
|
||||
border-bottom: none;
|
||||
box-shadow: inset 0 -2px 0 $success;
|
||||
}
|
||||
}
|
||||
|
||||
// Remove the Bootstrap feedback styles for input addons
|
||||
.input-group-addon {
|
||||
.has-warning &,
|
||||
.has-danger &,
|
||||
.has-success & {
|
||||
color: $input-color;
|
||||
background-color: $input-group-addon-bg;
|
||||
border-color: $input-group-addon-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
.form-group-lg {
|
||||
select,
|
||||
select.form-control {
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
// Navs
|
||||
|
||||
.nav-tabs {
|
||||
.nav-item + .nav-item {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.nav-link,
|
||||
.nav-link:focus {
|
||||
margin-right: 0;
|
||||
color: $body-color;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
box-shadow: inset 0 -1px 0 #ddd;
|
||||
transition:
|
||||
color 0.2s,
|
||||
box-shadow 0.2s;
|
||||
|
||||
&:hover {
|
||||
color: $primary;
|
||||
background-color: transparent;
|
||||
box-shadow: inset 0 -2px 0 $primary;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link.active,
|
||||
.nav-link.active:focus {
|
||||
color: $primary;
|
||||
border: none;
|
||||
box-shadow: inset 0 -2px 0 $primary;
|
||||
|
||||
&:hover {
|
||||
color: $primary;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link.disabled {
|
||||
box-shadow: inset 0 -1px 0 #ddd;
|
||||
}
|
||||
|
||||
&.nav-justified {
|
||||
.nav-link,
|
||||
.nav-link:hover,
|
||||
.nav-link:focus,
|
||||
.nav-link.active,
|
||||
.nav-link.active:hover,
|
||||
.nav-link.active:focus {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
margin-top: 0;
|
||||
border: none;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
// Indicators
|
||||
|
||||
.alert {
|
||||
padding-right: 2.5rem;
|
||||
border: none;
|
||||
|
||||
&,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
&-#{$color} {
|
||||
@if $enable-gradients {
|
||||
background: $value linear-gradient(180deg, mix($body-bg, $value, 15%), $value) repeat-x;
|
||||
} @else {
|
||||
background-color: $value;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a:not(.btn),
|
||||
.alert-link {
|
||||
font-weight: 700;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&-secondary,
|
||||
&-light {
|
||||
&,
|
||||
a:not(.btn),
|
||||
.alert-link {
|
||||
color: $body-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.badge {
|
||||
&.bg-secondary,
|
||||
&.bg-light {
|
||||
color: $dark;
|
||||
}
|
||||
}
|
||||
|
||||
.tag {
|
||||
padding: 4px 6px;
|
||||
}
|
||||
|
||||
// Containers
|
||||
|
||||
.card {
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
|
||||
|
||||
&.border-primary,
|
||||
&.border-secondary,
|
||||
&.border-success,
|
||||
&.border-info,
|
||||
&.border-warning,
|
||||
&.border-danger,
|
||||
&.border-light,
|
||||
&.border-dark {
|
||||
border-width: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.list-group {
|
||||
&-item-action.active {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
border-radius: 0.2rem;
|
||||
box-shadow: 0 6px 36px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.modal,
|
||||
.toast,
|
||||
.offcanvas {
|
||||
.btn-close {
|
||||
background-image: escape-svg(
|
||||
url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$black}'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/></svg>")
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.popover {
|
||||
border: none;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.carousel {
|
||||
&-caption {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
271
assets/css/themes/minty.scss
Normal file
271
assets/css/themes/minty.scss
Normal file
@ -0,0 +1,271 @@
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Easy!Appointments - Online Appointment Scheduler
|
||||
*
|
||||
* @package EasyAppointments
|
||||
* @author A.Tselegidis <alextselegidis@gmail.com>
|
||||
* @copyright Copyright (c) Alex Tselegidis
|
||||
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
|
||||
* @link https://easyappointments.org
|
||||
* @since v1.5.0
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Minty 5.1.3
|
||||
// Bootswatch
|
||||
|
||||
$theme: 'minty' !default;
|
||||
|
||||
//
|
||||
// Color system
|
||||
//
|
||||
|
||||
$white: #fff !default;
|
||||
$gray-100: #f8f9fa !default;
|
||||
$gray-200: #f7f7f9 !default;
|
||||
$gray-300: #eceeef !default;
|
||||
$gray-400: #ced4da !default;
|
||||
$gray-500: #aaa !default;
|
||||
$gray-600: #888 !default;
|
||||
$gray-700: #5a5a5a !default;
|
||||
$gray-800: #343a40 !default;
|
||||
$gray-900: #212529 !default;
|
||||
$black: #000 !default;
|
||||
|
||||
$blue: #007bff !default;
|
||||
$indigo: #6610f2 !default;
|
||||
$purple: #6f42c1 !default;
|
||||
$pink: #e83e8c !default;
|
||||
$red: #ff7851 !default;
|
||||
$orange: #fd7e14 !default;
|
||||
$yellow: #ffce67 !default;
|
||||
$green: #56cc9d !default;
|
||||
$teal: #20c997 !default;
|
||||
$cyan: #6cc3d5 !default;
|
||||
|
||||
$primary: #78c2ad !default;
|
||||
$secondary: #f3969a !default;
|
||||
$success: $green !default;
|
||||
$info: $cyan !default;
|
||||
$warning: $yellow !default;
|
||||
$danger: $red !default;
|
||||
$light: $gray-100 !default;
|
||||
$dark: $gray-800 !default;
|
||||
|
||||
$min-contrast-ratio: 1.45 !default;
|
||||
|
||||
// Body
|
||||
|
||||
$body-color: $gray-600 !default;
|
||||
|
||||
// Components
|
||||
|
||||
$border-radius: 0.4rem !default;
|
||||
$border-radius-lg: 0.6rem !default;
|
||||
$border-radius-sm: 0.3rem !default;
|
||||
|
||||
// Fonts
|
||||
|
||||
// stylelint-disable-next-line value-keyword-case
|
||||
$headings-font-family:
|
||||
Montserrat,
|
||||
-apple-system,
|
||||
system-ui,
|
||||
BlinkMacSystemFont,
|
||||
'Segoe UI',
|
||||
Roboto,
|
||||
'Helvetica Neue',
|
||||
Arial,
|
||||
sans-serif !default;
|
||||
$headings-color: $gray-700 !default;
|
||||
|
||||
// Tables
|
||||
|
||||
$table-border-color: rgba(0, 0, 0, 0.05) !default;
|
||||
|
||||
$table-bg-scale: 0% !default;
|
||||
|
||||
// Dropdowns
|
||||
|
||||
$dropdown-link-hover-color: $white !default;
|
||||
$dropdown-link-hover-bg: $secondary !default;
|
||||
|
||||
// Navbar
|
||||
|
||||
$navbar-dark-color: rgba($white, 0.6) !default;
|
||||
$navbar-dark-hover-color: $white !default;
|
||||
$navbar-light-color: rgba($black, 0.3) !default;
|
||||
$navbar-light-hover-color: $gray-700 !default;
|
||||
$navbar-light-active-color: $gray-700 !default;
|
||||
$navbar-light-disabled-color: rgba($black, 0.1) !default;
|
||||
|
||||
// Pagination
|
||||
|
||||
$pagination-color: $white !default;
|
||||
$pagination-bg: $primary !default;
|
||||
$pagination-border-color: $primary !default;
|
||||
$pagination-hover-color: $white !default;
|
||||
$pagination-hover-bg: $secondary !default;
|
||||
$pagination-hover-border-color: $pagination-hover-bg !default;
|
||||
$pagination-active-bg: $secondary !default;
|
||||
$pagination-active-border-color: $pagination-active-bg !default;
|
||||
$pagination-disabled-color: $white !default;
|
||||
$pagination-disabled-bg: #cce8e0 !default;
|
||||
$pagination-disabled-border-color: $pagination-disabled-bg !default;
|
||||
|
||||
// Alerts
|
||||
|
||||
$alert-color-scale: 0% !default;
|
||||
$alert-bg-scale: 0% !default;
|
||||
|
||||
// Breadcrumbs
|
||||
|
||||
$breadcrumb-padding-y: 0.375rem !default;
|
||||
$breadcrumb-padding-x: 0.75rem !default;
|
||||
$breadcrumb-bg: $primary !default;
|
||||
$breadcrumb-divider-color: $white !default;
|
||||
$breadcrumb-active-color: $breadcrumb-divider-color !default;
|
||||
$breadcrumb-border-radius: 0.25rem !default;
|
||||
|
||||
@import '../../../node_modules/bootstrap/scss/bootstrap';
|
||||
|
||||
// Minty 5.1.3
|
||||
// Bootswatch
|
||||
|
||||
// Variables
|
||||
|
||||
$web-font-path: 'https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap' !default;
|
||||
@if $web-font-path {
|
||||
@import url($web-font-path);
|
||||
}
|
||||
|
||||
// Navbar
|
||||
|
||||
.navbar {
|
||||
font-family: $headings-font-family;
|
||||
}
|
||||
|
||||
.bg-dark {
|
||||
background-color: $secondary !important;
|
||||
}
|
||||
|
||||
.border-dark {
|
||||
border-color: $secondary !important;
|
||||
}
|
||||
|
||||
// Buttons
|
||||
|
||||
.btn {
|
||||
font-family: $headings-font-family;
|
||||
|
||||
&,
|
||||
&:hover {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&-light,
|
||||
&-light:hover {
|
||||
color: $gray-700;
|
||||
}
|
||||
|
||||
&-link,
|
||||
&-link:hover {
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
&-link.disabled:hover {
|
||||
color: $gray-600;
|
||||
}
|
||||
|
||||
&-outline-primary {
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
&-outline-secondary {
|
||||
color: $secondary;
|
||||
}
|
||||
|
||||
&-outline-success {
|
||||
color: $success;
|
||||
}
|
||||
|
||||
&-outline-info {
|
||||
color: $info;
|
||||
}
|
||||
|
||||
&-outline-warning {
|
||||
color: $warning;
|
||||
}
|
||||
|
||||
&-outline-danger {
|
||||
color: $danger;
|
||||
}
|
||||
|
||||
&-outline-dark {
|
||||
color: $dark;
|
||||
}
|
||||
|
||||
&-outline-light {
|
||||
color: $light;
|
||||
}
|
||||
}
|
||||
|
||||
// Forms
|
||||
|
||||
legend {
|
||||
font-family: $headings-font-family;
|
||||
}
|
||||
|
||||
// Navs
|
||||
|
||||
.dropdown-menu {
|
||||
font-family: $font-family-sans-serif;
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
a {
|
||||
color: $navbar-dark-color;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: $white;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Indicators
|
||||
|
||||
.alert {
|
||||
a,
|
||||
.alert-link {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&-light {
|
||||
&,
|
||||
a:not(.btn),
|
||||
.alert-link {
|
||||
color: $body-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.badge {
|
||||
color: $white;
|
||||
|
||||
&.bg-light {
|
||||
color: $gray-700;
|
||||
}
|
||||
}
|
||||
|
||||
// Containers
|
||||
|
||||
.card,
|
||||
.list-group-item {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
645
assets/css/themes/sketchy.scss
Normal file
645
assets/css/themes/sketchy.scss
Normal file
@ -0,0 +1,645 @@
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Easy!Appointments - Online Appointment Scheduler
|
||||
*
|
||||
* @package EasyAppointments
|
||||
* @author A.Tselegidis <alextselegidis@gmail.com>
|
||||
* @copyright Copyright (c) Alex Tselegidis
|
||||
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
|
||||
* @link https://easyappointments.org
|
||||
* @since v1.5.0
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Sketchy 5.1.3
|
||||
// Bootswatch
|
||||
|
||||
$theme: 'sketchy' !default;
|
||||
|
||||
//
|
||||
// Color system
|
||||
//
|
||||
|
||||
$white: #fff !default;
|
||||
$gray-100: #f8f9fa !default;
|
||||
$gray-200: #f7f7f9 !default;
|
||||
$gray-300: #dee2e6 !default;
|
||||
$gray-400: #ccc !default;
|
||||
$gray-500: #aaa !default;
|
||||
$gray-600: #868e96 !default;
|
||||
$gray-700: #555 !default;
|
||||
$gray-800: #333 !default;
|
||||
$gray-900: #212529 !default;
|
||||
$black: #000 !default;
|
||||
|
||||
$blue: #007bff !default;
|
||||
$indigo: #6610f2 !default;
|
||||
$purple: #6f42c1 !default;
|
||||
$pink: #e83e8c !default;
|
||||
$red: #dc3545 !default;
|
||||
$orange: #fd7e14 !default;
|
||||
$yellow: #ffc107 !default;
|
||||
$green: #28a745 !default;
|
||||
$teal: #20c997 !default;
|
||||
$cyan: #17a2b8 !default;
|
||||
|
||||
$primary: $gray-800 !default;
|
||||
$secondary: $gray-700 !default;
|
||||
$success: $green !default;
|
||||
$info: $cyan !default;
|
||||
$warning: $yellow !default;
|
||||
$danger: $red !default;
|
||||
$light: $white !default;
|
||||
$dark: $gray-700 !default;
|
||||
|
||||
$min-contrast-ratio: 1.6 !default;
|
||||
|
||||
// Links
|
||||
|
||||
$link-decoration: underline !default;
|
||||
|
||||
// Components
|
||||
|
||||
$border-width: 2px !default;
|
||||
$border-radius: 25px !default;
|
||||
$border-radius-lg: 35px !default;
|
||||
$border-radius-sm: 15px !default;
|
||||
|
||||
// Fonts
|
||||
|
||||
// stylelint-disable-next-line value-keyword-case
|
||||
$font-family-sans-serif:
|
||||
Neucha,
|
||||
-apple-system,
|
||||
system-ui,
|
||||
BlinkMacSystemFont,
|
||||
'Segoe UI',
|
||||
Roboto,
|
||||
'Helvetica Neue',
|
||||
Arial,
|
||||
sans-serif !default;
|
||||
$font-weight-base: 700 !default;
|
||||
$headings-font-family: 'Cabin Sketch', cursive !default;
|
||||
|
||||
$blockquote-small-color: $gray-800 !default;
|
||||
|
||||
// Tables
|
||||
|
||||
$table-hover-bg: $white !default;
|
||||
$table-border-width: 2px !default;
|
||||
$table-border-color: $gray-800 !default;
|
||||
|
||||
// Forms
|
||||
|
||||
$input-border-color: $gray-800 !default;
|
||||
$input-focus-border-color: $input-border-color !default;
|
||||
|
||||
// Dropdowns
|
||||
|
||||
$dropdown-border-color: $gray-800 !default;
|
||||
$dropdown-divider-bg: $gray-800 !default;
|
||||
$dropdown-link-hover-color: $white !default;
|
||||
$dropdown-link-hover-bg: $gray-800 !default;
|
||||
|
||||
// Navs
|
||||
|
||||
$nav-tabs-border-color: $gray-800 !default;
|
||||
$nav-tabs-link-hover-border-color: $gray-800 !default;
|
||||
$nav-tabs-link-active-color: $gray-800 !default;
|
||||
$nav-tabs-link-active-border-color: $gray-800 !default;
|
||||
|
||||
// Navbar
|
||||
|
||||
$navbar-dark-color: $white !default;
|
||||
$navbar-dark-hover-color: $white !default;
|
||||
$navbar-dark-toggler-border-color: $white !default;
|
||||
$navbar-light-color: $gray-800 !default;
|
||||
$navbar-light-hover-color: $gray-800 !default;
|
||||
$navbar-light-active-color: $gray-800 !default;
|
||||
$navbar-light-toggler-border-color: $gray-800 !default;
|
||||
|
||||
// Pagination
|
||||
|
||||
$pagination-border-color: $gray-800 !default;
|
||||
$pagination-hover-color: $white !default;
|
||||
$pagination-hover-bg: $gray-800 !default;
|
||||
$pagination-hover-border-color: $gray-800 !default;
|
||||
$pagination-disabled-color: $gray-400 !default;
|
||||
$pagination-disabled-border-color: $gray-800 !default;
|
||||
|
||||
// Cards
|
||||
|
||||
$card-border-width: 2px !default;
|
||||
$card-border-color: $gray-800 !default;
|
||||
|
||||
// Popovers
|
||||
|
||||
$popover-border-color: $gray-800 !default;
|
||||
|
||||
// Badges
|
||||
|
||||
$badge-padding-y: 0.5em !default;
|
||||
$badge-padding-x: 1.2em !default;
|
||||
|
||||
// Toasts
|
||||
|
||||
$toast-border-width: 2px !default;
|
||||
$toast-border-color: $gray-800 !default;
|
||||
$toast-header-color: $gray-800 !default;
|
||||
$toast-header-border-color: $toast-border-color !default;
|
||||
|
||||
// Modals
|
||||
|
||||
$modal-content-border-color: $gray-800 !default;
|
||||
$modal-header-border-color: $gray-800 !default;
|
||||
|
||||
// Progress bars
|
||||
|
||||
$progress-bg: $white !default;
|
||||
$progress-bar-bg: $gray-400 !default;
|
||||
|
||||
// List group
|
||||
|
||||
$list-group-border-color: $gray-800 !default;
|
||||
$list-group-hover-bg: $gray-300 !default;
|
||||
$list-group-active-color: $white !default;
|
||||
$list-group-active-bg: $gray-800 !default;
|
||||
$list-group-action-color: $gray-800 !default;
|
||||
|
||||
// Breadcrumbs
|
||||
|
||||
$breadcrumb-padding-y: 0.375rem !default;
|
||||
$breadcrumb-padding-x: 0.75rem !default;
|
||||
$breadcrumb-divider-color: $gray-800 !default;
|
||||
$breadcrumb-active-color: $gray-800 !default;
|
||||
$breadcrumb-border-radius: 0.25rem !default;
|
||||
|
||||
// Close
|
||||
|
||||
$btn-close-color: inherit !default;
|
||||
$btn-close-opacity: 1 !default;
|
||||
$btn-close-hover-opacity: 1 !default;
|
||||
$btn-close-focus-shadow: none !default;
|
||||
|
||||
@import '../../../node_modules/bootstrap/scss/bootstrap';
|
||||
|
||||
// Sketchy 5.1.3
|
||||
// Bootswatch
|
||||
|
||||
// Variables
|
||||
|
||||
$web-font-path: 'https://fonts.googleapis.com/css?family=Neucha|Cabin+Sketch&display=swap' !default;
|
||||
@if $web-font-path {
|
||||
@import url($web-font-path);
|
||||
}
|
||||
|
||||
// stylelint-disable scss/dollar-variable-default
|
||||
$border-radius-sketchy: 255px 25px 225px 25px / 25px 225px 25px 255px;
|
||||
$border-radius-lg-sketchy: 55px 225px 15px 25px / 25px 25px 35px 355px;
|
||||
$border-radius-sm-sketchy: 255px 25px 225px 25px / 25px 225px 25px 255px;
|
||||
// style-enable scss/dollar-variable-default
|
||||
|
||||
// Navbar
|
||||
|
||||
.navbar {
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
border-radius: 25px 25px 55px 5px/5px 55px 25px 25px;
|
||||
|
||||
&.bg-light {
|
||||
border-color: $gray-800;
|
||||
}
|
||||
|
||||
&.fixed-top {
|
||||
border-width: 0 0 2px;
|
||||
border-radius: 0 25px 225px 0/25px 0 25px 255px;
|
||||
}
|
||||
|
||||
&.fixed-bottom {
|
||||
border-width: 2px 0 0;
|
||||
border-radius: 255px 25px 0 25px/25px 225px 25px 0;
|
||||
}
|
||||
|
||||
&-brand {
|
||||
font-family: $headings-font-family;
|
||||
font-weight: 400;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Buttons
|
||||
|
||||
.btn {
|
||||
text-decoration: none;
|
||||
border-radius: $border-radius-sketchy;
|
||||
|
||||
&-lg {
|
||||
border-radius: $border-radius-lg-sketchy;
|
||||
}
|
||||
|
||||
&-sm {
|
||||
border-radius: $border-radius-sm-sketchy;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-check {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Typography
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: $font-family-sans-serif;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-radius: 15px 27px 25px 25px/25px 25px 305px 635px;
|
||||
}
|
||||
|
||||
// Tables
|
||||
|
||||
table {
|
||||
th,
|
||||
td {
|
||||
background-color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.table-bordered {
|
||||
overflow: hidden;
|
||||
border-spacing: 0;
|
||||
border-collapse: separate;
|
||||
background-color: $gray-800;
|
||||
border-radius: 5px 25px 5px 25px/25px 5px 25px 5px;
|
||||
|
||||
th,
|
||||
td {
|
||||
border-radius: 5px 5px 25px 4px/5px 4px 3px 5px;
|
||||
}
|
||||
|
||||
.table-success,
|
||||
.table-success:hover {
|
||||
td,
|
||||
th {
|
||||
color: $white;
|
||||
background-color: $success;
|
||||
}
|
||||
}
|
||||
|
||||
.table-info,
|
||||
.table-info:hover {
|
||||
td,
|
||||
th {
|
||||
color: $white;
|
||||
background-color: $info;
|
||||
}
|
||||
}
|
||||
|
||||
.table-warning,
|
||||
.table-warning:hover {
|
||||
td,
|
||||
th {
|
||||
color: $white;
|
||||
background-color: $warning;
|
||||
}
|
||||
}
|
||||
|
||||
.table-danger,
|
||||
.table-danger:hover {
|
||||
td,
|
||||
th {
|
||||
color: $white;
|
||||
background-color: $danger;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-dark {
|
||||
th,
|
||||
td,
|
||||
&.table-hover .table-active:hover > th,
|
||||
&.table-hover .table-active:hover > td {
|
||||
background-color: $gray-800;
|
||||
}
|
||||
}
|
||||
|
||||
// Forms
|
||||
|
||||
input,
|
||||
.form-control,
|
||||
.input-group-text {
|
||||
border-radius: $border-radius-sketchy;
|
||||
}
|
||||
|
||||
textarea,
|
||||
textarea.form-control,
|
||||
select,
|
||||
select.form-control {
|
||||
border-radius: $border-radius-lg-sketchy !important;
|
||||
}
|
||||
|
||||
[type='checkbox'] {
|
||||
position: relative;
|
||||
width: 0;
|
||||
height: 0;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
appearance: none;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: -0.1em;
|
||||
left: 0;
|
||||
display: inline-block;
|
||||
width: 15px;
|
||||
height: 16px;
|
||||
content: '';
|
||||
border: 2px solid $gray-800;
|
||||
border-radius: 2px 8px 2px 4px / 5px 3px 5px 3px;
|
||||
}
|
||||
|
||||
&:checked::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0.1em;
|
||||
font-size: 1.5rem;
|
||||
line-height: 0.5;
|
||||
color: $gray-800;
|
||||
content: 'x';
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
&::before {
|
||||
border: 2px solid $gray-500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[type='radio'] {
|
||||
position: relative;
|
||||
width: 0;
|
||||
height: 0;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
appearance: none;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: -0.1em;
|
||||
left: 0;
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
content: '';
|
||||
border: 2px solid $gray-800;
|
||||
border-radius: 50% 45% 40% 50% / 40% 50% 50% 45%;
|
||||
}
|
||||
|
||||
&:checked::before {
|
||||
background-color: $gray-800;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
&::before {
|
||||
border: 2px solid $gray-500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-check-input {
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.form-switch {
|
||||
padding-left: 0;
|
||||
|
||||
.form-check-input {
|
||||
position: relative;
|
||||
margin-left: 0;
|
||||
|
||||
&::before {
|
||||
width: 32px;
|
||||
border-radius: 30% 35% 30% 30% / 30% 50% 30% 45%;
|
||||
}
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: inline-block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
content: '';
|
||||
background-color: $white;
|
||||
border: 2px solid #333;
|
||||
border-radius: 50% 45% 40% 50% / 40% 50% 50% 45%;
|
||||
transition: left 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
&:checked::after {
|
||||
top: 0;
|
||||
left: 18px;
|
||||
background-color: $gray-800;
|
||||
}
|
||||
}
|
||||
|
||||
.form-check-label {
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
// Navs
|
||||
|
||||
.dropdown-menu {
|
||||
overflow: hidden;
|
||||
border-radius: 555px 25px 25px 25px/25px 25px 25px 555px;
|
||||
}
|
||||
|
||||
.dropdown-divider {
|
||||
border-top-width: 2px;
|
||||
}
|
||||
|
||||
.list-group {
|
||||
overflow: hidden;
|
||||
background-color: $gray-800;
|
||||
border: 2px solid $gray-800;
|
||||
border-radius: 45px 15px 35px 5px/15px 5px 15px 65px;
|
||||
|
||||
&-item {
|
||||
border-top: 2px solid $gray-800;
|
||||
border-right: none;
|
||||
border-left: none;
|
||||
border-radius: 255px 5px 225px 5px/25px 225px 25px 255px;
|
||||
|
||||
&:first-child {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-pills .nav-link {
|
||||
border-radius: $border-radius-sketchy;
|
||||
}
|
||||
|
||||
.nav-link,
|
||||
.page-link,
|
||||
.list-group-item,
|
||||
.dropdown-item {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.nav-tabs {
|
||||
.nav-link {
|
||||
border-radius: 45px 15px 225px 5px/25px 225px 25px 255px;
|
||||
}
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
border: 2px solid $gray-800;
|
||||
border-radius: $border-radius-sketchy;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
.page-link {
|
||||
border-radius: 425px 255px 25px 25px/25px 25px 5px 25px;
|
||||
}
|
||||
}
|
||||
|
||||
// Indicators
|
||||
|
||||
.badge {
|
||||
border-radius: $border-radius-sm-sketchy;
|
||||
|
||||
&-pill {
|
||||
border-radius: 7rem 8rem 8rem 8rem / 4rem 5rem 6rem 6rem;
|
||||
}
|
||||
|
||||
&.bg-light {
|
||||
color: $dark;
|
||||
}
|
||||
}
|
||||
|
||||
.alert {
|
||||
border-radius: $border-radius-sketchy;
|
||||
|
||||
.btn-close {
|
||||
&::before {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Progress bars
|
||||
|
||||
.progress {
|
||||
border: 2px solid $gray-800;
|
||||
border-radius: $border-radius-sm-sketchy;
|
||||
}
|
||||
|
||||
// Containers
|
||||
|
||||
.card {
|
||||
border-radius: 5px 5px 5px 5px/25px 25px 25px 5px;
|
||||
|
||||
&-outline {
|
||||
&-primary,
|
||||
&-success,
|
||||
&-info,
|
||||
&-warning,
|
||||
&-danger {
|
||||
border-width: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
&-header {
|
||||
border-color: inherit;
|
||||
border-bottom-width: 2px;
|
||||
|
||||
&:first-child {
|
||||
border-radius: 3px 3px 0 0/23px 23px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-footer {
|
||||
border-top-width: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.toast {
|
||||
border-radius: 10px 10px 15px 5px/5px 15px 5px 15px;
|
||||
|
||||
&-header {
|
||||
font-family: $headings-font-family;
|
||||
}
|
||||
}
|
||||
|
||||
.modal {
|
||||
&-content {
|
||||
border-radius: 15px 5px 5px 25px/5px 25px 25px 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.popover {
|
||||
padding: 0;
|
||||
border-radius: 45px 85px 15px 25px/15px 10px 35px 555px;
|
||||
|
||||
&-title {
|
||||
border-bottom: 2px solid $gray-800;
|
||||
}
|
||||
|
||||
&.bs-popover-start::before,
|
||||
&.bs-tether-element-attached-right::before {
|
||||
right: -13px;
|
||||
}
|
||||
|
||||
&.bs-popover-top::before,
|
||||
&.bs-tether-element-attached-bottom::before {
|
||||
bottom: -13px;
|
||||
}
|
||||
|
||||
&.bs-popover-bottom::before,
|
||||
&.bs-tether-element-attached-top::before {
|
||||
top: -13px;
|
||||
}
|
||||
|
||||
&.bs-popover-end::before,
|
||||
&.bs-tether-element-attached-left::before {
|
||||
left: -13px;
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
&-inner {
|
||||
border-radius: $border-radius-sm-sketchy;
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
border: 2px solid $gray-800;
|
||||
border-radius: 15px 5px 5px 25px/5px 25px 25px 5px;
|
||||
}
|
||||
|
||||
.btn-close {
|
||||
background-image: none;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0.8rem;
|
||||
right: 1rem;
|
||||
content: 'X';
|
||||
}
|
||||
}
|
||||
|
||||
.img {
|
||||
&-thumbnail {
|
||||
border-radius: $border-radius-sketchy;
|
||||
}
|
||||
}
|
||||
396
assets/css/themes/zephyr.scss
Normal file
396
assets/css/themes/zephyr.scss
Normal file
@ -0,0 +1,396 @@
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Easy!Appointments - Online Appointment Scheduler
|
||||
*
|
||||
* @package EasyAppointments
|
||||
* @author A.Tselegidis <alextselegidis@gmail.com>
|
||||
* @copyright Copyright (c) Alex Tselegidis
|
||||
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
|
||||
* @link https://easyappointments.org
|
||||
* @since v1.5.0
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Zephyr 5.1.3
|
||||
// Bootswatch
|
||||
|
||||
$theme: 'zephyr' !default;
|
||||
|
||||
//
|
||||
// Color system
|
||||
//
|
||||
|
||||
$white: #fff !default;
|
||||
$gray-100: #f8f9fa !default;
|
||||
$gray-200: #e9ecef !default;
|
||||
$gray-300: #dee2e6 !default;
|
||||
$gray-400: #ced4da !default;
|
||||
$gray-500: #adb5bd !default;
|
||||
$gray-600: #6c757d !default;
|
||||
$gray-700: #495057 !default;
|
||||
$gray-800: #343a40 !default;
|
||||
$gray-900: #212529 !default;
|
||||
$black: #000 !default;
|
||||
|
||||
$blue: #3459e6 !default;
|
||||
$indigo: #6610f2 !default;
|
||||
$purple: #6f42c1 !default;
|
||||
$pink: #d63384 !default;
|
||||
$red: #da292e !default;
|
||||
$orange: #f8765f !default;
|
||||
$yellow: #f4bd61 !default;
|
||||
$green: #2fb380 !default;
|
||||
$teal: #20c997 !default;
|
||||
$cyan: #287bb5 !default;
|
||||
|
||||
$primary: $blue !default;
|
||||
$secondary: $white !default;
|
||||
$success: $green !default;
|
||||
$info: $cyan !default;
|
||||
$warning: $yellow !default;
|
||||
$danger: $red !default;
|
||||
$light: $gray-100 !default;
|
||||
$dark: $gray-900 !default;
|
||||
|
||||
$min-contrast-ratio: 1.65 !default;
|
||||
|
||||
$enable-shadows: true !default;
|
||||
|
||||
// Body
|
||||
|
||||
$body-color: $gray-700 !default;
|
||||
|
||||
$headings-color: $gray-900 !default;
|
||||
|
||||
// Fonts
|
||||
|
||||
// stylelint-disable-next-line value-keyword-case
|
||||
$font-family-sans-serif:
|
||||
Inter,
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
'Segoe UI',
|
||||
Roboto,
|
||||
'Helvetica Neue',
|
||||
Arial,
|
||||
sans-serif,
|
||||
'Apple Color Emoji',
|
||||
'Segoe UI Emoji',
|
||||
'Segoe UI Symbol' !default;
|
||||
$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
|
||||
$font-size-sm: $font-size-base * 0.875 !default;
|
||||
|
||||
// Components
|
||||
|
||||
$box-shadow: 0 1px 2px rgba($black, 0.05) !default;
|
||||
$box-shadow-lg:
|
||||
0 1px 3px 0 rgba(0, 0, 0, 0.1),
|
||||
0 1px 2px 0 rgba(0, 0, 0, 0.06) !default;
|
||||
|
||||
// Tables
|
||||
|
||||
$table-cell-padding-y: 1rem !default;
|
||||
$table-cell-padding-x: 1rem !default;
|
||||
$table-cell-padding-y-sm: 0.5rem !default;
|
||||
$table-cell-padding-x-sm: 0.5rem !default;
|
||||
|
||||
$table-th-font-weight: 500 !default;
|
||||
|
||||
// Buttons + Forms
|
||||
|
||||
$input-btn-padding-y: 0.5rem !default;
|
||||
$input-btn-padding-x: 1rem !default;
|
||||
$input-btn-font-size: $font-size-sm !default;
|
||||
|
||||
// Buttons
|
||||
|
||||
$btn-font-weight: 500 !default;
|
||||
$btn-box-shadow: $box-shadow !default;
|
||||
$btn-focus-box-shadow: $box-shadow !default;
|
||||
$btn-active-box-shadow: $box-shadow !default;
|
||||
|
||||
// Forms
|
||||
|
||||
$form-label-font-weight: 500 !default;
|
||||
|
||||
$input-box-shadow: $box-shadow !default;
|
||||
|
||||
$input-group-addon-bg: $gray-100 !default;
|
||||
|
||||
// Navs
|
||||
|
||||
$nav-link-color: $body-color !default;
|
||||
$nav-link-hover-color: $body-color !default;
|
||||
|
||||
$nav-tabs-border-radius: 0 !default;
|
||||
$nav-tabs-link-active-color: $primary !default;
|
||||
|
||||
// Navbar
|
||||
|
||||
$navbar-padding-y: 0.85rem !default;
|
||||
|
||||
$navbar-nav-link-padding-x: 0.75rem !default;
|
||||
|
||||
$navbar-dark-color: $white !default;
|
||||
$navbar-dark-hover-color: $white !default;
|
||||
$navbar-dark-active-color: $white !default;
|
||||
|
||||
$navbar-light-color: $black !default;
|
||||
$navbar-light-hover-color: $black !default;
|
||||
$navbar-light-active-color: $black !default;
|
||||
|
||||
// Dropdowns
|
||||
|
||||
$dropdown-font-size: $font-size-sm !default;
|
||||
$dropdown-border-color: $gray-300 !default;
|
||||
$dropdown-divider-bg: $gray-200 !default;
|
||||
|
||||
$dropdown-link-hover-color: $white !default;
|
||||
$dropdown-link-hover-bg: $primary !default;
|
||||
|
||||
$dropdown-item-padding-y: 0.5rem !default;
|
||||
$dropdown-item-padding-x: 1rem !default;
|
||||
|
||||
// Pagination
|
||||
|
||||
$pagination-padding-y: 0.5rem !default;
|
||||
$pagination-padding-x: 1rem !default;
|
||||
|
||||
$pagination-color: $gray-700 !default;
|
||||
|
||||
$pagination-focus-color: $pagination-color !default;
|
||||
|
||||
$pagination-hover-color: $pagination-color !default;
|
||||
$pagination-hover-bg: $gray-100 !default;
|
||||
|
||||
// Cards
|
||||
$card-spacer-x: 1.5rem !default;
|
||||
$card-cap-padding-y: 1rem !default;
|
||||
$card-cap-padding-x: 1.5rem !default;
|
||||
|
||||
// Toasts
|
||||
|
||||
$toast-header-color: $headings-color !default;
|
||||
|
||||
// Modals
|
||||
|
||||
$modal-content-border-color: $gray-300 !default;
|
||||
$modal-header-border-width: 0 !default;
|
||||
|
||||
// List group
|
||||
|
||||
$list-group-item-padding-y: 1rem !default;
|
||||
$list-group-item-padding-x: 1.5rem !default;
|
||||
|
||||
// Breadcrumbs
|
||||
|
||||
$breadcrumb-padding-x: 1rem !default;
|
||||
|
||||
$breadcrumb-divider: quote('>') !default;
|
||||
|
||||
@import '../../../node_modules/bootstrap/scss/bootstrap';
|
||||
|
||||
// Zephyr 5.1.3
|
||||
// Bootswatch
|
||||
|
||||
// Variables
|
||||
|
||||
$web-font-path: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap' !default;
|
||||
@if $web-font-path {
|
||||
@import url($web-font-path);
|
||||
}
|
||||
|
||||
// Navbar
|
||||
|
||||
.navbar {
|
||||
font-size: $font-size-sm;
|
||||
font-weight: 500;
|
||||
|
||||
.nav-item {
|
||||
margin-right: 0.5rem;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
.nav-link {
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-dark {
|
||||
.navbar-nav {
|
||||
.nav-link {
|
||||
&:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-light {
|
||||
.navbar-nav {
|
||||
.nav-link {
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Buttons
|
||||
|
||||
.btn-secondary,
|
||||
.btn-light,
|
||||
.btn-outline-secondary,
|
||||
.btn-outline-light {
|
||||
color: $gray-900;
|
||||
|
||||
&:disabled,
|
||||
&.disabled {
|
||||
border: 1px solid shade-color($secondary, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-secondary,
|
||||
.btn-outline-secondary {
|
||||
border-color: shade-color($secondary, 10%);
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
background-color: shade-color($secondary, 10%);
|
||||
border-color: shade-color($secondary, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-light,
|
||||
.btn-outline-light {
|
||||
border-color: shade-color($light, 10%);
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
background-color: shade-color($light, 10%);
|
||||
border-color: shade-color($light, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
// Tables
|
||||
|
||||
.table {
|
||||
font-size: $font-size-sm;
|
||||
box-shadow: $box-shadow-lg;
|
||||
}
|
||||
|
||||
thead th {
|
||||
font-size: $font-size-sm;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
// Forms
|
||||
|
||||
.input-group-text {
|
||||
box-shadow: $box-shadow;
|
||||
}
|
||||
|
||||
// Navs
|
||||
|
||||
.nav-tabs {
|
||||
font-weight: 500;
|
||||
|
||||
.nav-link {
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
border-width: 0 0 1px;
|
||||
}
|
||||
|
||||
.nav-link.active,
|
||||
.nav-item.show .nav-link {
|
||||
box-shadow: inset 0 -2px 0 $primary;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-pills {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
font-size: $font-size-sm;
|
||||
font-weight: 500;
|
||||
|
||||
.page-link {
|
||||
box-shadow: $box-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
font-size: $font-size-sm;
|
||||
font-weight: 500;
|
||||
border: 1px solid $gray-300;
|
||||
border-radius: $border-radius;
|
||||
box-shadow: $box-shadow;
|
||||
|
||||
&-item {
|
||||
padding: 1rem 0.5rem 1rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
.breadcrumb-item + .breadcrumb-item::before {
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
// Indicators
|
||||
|
||||
.alert {
|
||||
.btn-close {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.badge {
|
||||
&.bg-secondary,
|
||||
&.bg-light {
|
||||
color: $gray-900;
|
||||
}
|
||||
}
|
||||
|
||||
// Containers
|
||||
|
||||
.list-group-item,
|
||||
.card {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
.h1,
|
||||
.h2,
|
||||
.h3,
|
||||
.h4,
|
||||
.h5,
|
||||
.h6 {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.list-group {
|
||||
box-shadow: $box-shadow-lg;
|
||||
}
|
||||
|
||||
.card {
|
||||
box-shadow: $box-shadow-lg;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
background-color: $gray-100;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
box-shadow: $box-shadow-lg;
|
||||
}
|
||||
BIN
assets/img/alextselegidis-logo-16x16.png
Normal file
BIN
assets/img/alextselegidis-logo-16x16.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
assets/img/break.jpg
Normal file
BIN
assets/img/break.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 144 KiB |
BIN
assets/img/custom.jpg
Normal file
BIN
assets/img/custom.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 156 KiB |
BIN
assets/img/error.png
Normal file
BIN
assets/img/error.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
BIN
assets/img/favicon.ico
Normal file
BIN
assets/img/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
assets/img/glyphicons-halflings-white.png
Normal file
BIN
assets/img/glyphicons-halflings-white.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.6 KiB |
BIN
assets/img/glyphicons-halflings.png
Normal file
BIN
assets/img/glyphicons-halflings.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
10
assets/img/index.html
Normal file
10
assets/img/index.html
Normal file
@ -0,0 +1,10 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>403 Forbidden</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>Directory access is forbidden.</p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
BIN
assets/img/loading.gif
Normal file
BIN
assets/img/loading.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
BIN
assets/img/logo-16x16.png
Normal file
BIN
assets/img/logo-16x16.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 806 B |
BIN
assets/img/logo.png
Normal file
BIN
assets/img/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.4 KiB |
BIN
assets/img/social-card.png
Normal file
BIN
assets/img/social-card.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 80 KiB |
BIN
assets/img/success.png
Normal file
BIN
assets/img/success.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
BIN
assets/img/unavailability.jpg
Normal file
BIN
assets/img/unavailability.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 100 KiB |
10
assets/index.html
Normal file
10
assets/index.html
Normal file
@ -0,0 +1,10 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>403 Forbidden</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>Directory access is forbidden.</p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
62
assets/js/app.js
Normal file
62
assets/js/app.js
Normal file
@ -0,0 +1,62 @@
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Easy!Appointments - Online Appointment Scheduler
|
||||
*
|
||||
* @author A.Tselegidis <alextselegidis@gmail.com>
|
||||
* @copyright Copyright (c) Alex Tselegidis
|
||||
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
|
||||
* @link https://easyappointments.org
|
||||
* @since v1.5.0
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
/**
|
||||
* App global namespace object.
|
||||
*
|
||||
* This script should be loaded before the other modules in order to define the global application namespace.
|
||||
*/
|
||||
window.App = (function () {
|
||||
function onAjaxError(event, jqXHR, textStatus, errorThrown) {
|
||||
console.error('Unexpected HTTP Error: ', jqXHR, textStatus, errorThrown);
|
||||
|
||||
let response;
|
||||
|
||||
try {
|
||||
response = JSON.parse(jqXHR.responseText); // JSON response
|
||||
} catch (error) {
|
||||
response = {message: jqXHR.responseText}; // String response
|
||||
}
|
||||
|
||||
if (!response || !response.message) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (App.Utils.Message) {
|
||||
App.Utils.Message.show(lang('unexpected_issues'), lang('unexpected_issues_message'));
|
||||
|
||||
$('<div/>', {
|
||||
'class': 'card',
|
||||
'html': [
|
||||
$('<div/>', {
|
||||
'class': 'card-body overflow-auto',
|
||||
'html': response.message,
|
||||
}),
|
||||
],
|
||||
}).appendTo('#message-modal .modal-body');
|
||||
}
|
||||
}
|
||||
|
||||
$(document).ajaxError(onAjaxError);
|
||||
|
||||
$(function () {
|
||||
if (window.moment) {
|
||||
window.moment.locale(vars('language_code'));
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
Components: {},
|
||||
Http: {},
|
||||
Layouts: {},
|
||||
Pages: {},
|
||||
Utils: {},
|
||||
};
|
||||
})();
|
||||
124
assets/js/components/appointment_status_options.js
Normal file
124
assets/js/components/appointment_status_options.js
Normal file
@ -0,0 +1,124 @@
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Easy!Appointments - Online Appointment Scheduler
|
||||
*
|
||||
* @package EasyAppointments
|
||||
* @author A.Tselegidis <alextselegidis@gmail.com>
|
||||
* @copyright Copyright (c) Alex Tselegidis
|
||||
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
|
||||
* @link https://easyappointments.org
|
||||
* @since v1.5.0
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
/**
|
||||
* Appointment status options component.
|
||||
*
|
||||
* This module implements the appointment status options.
|
||||
*/
|
||||
App.Components.AppointmentStatusOptions = (function () {
|
||||
/**
|
||||
* Render an appointment status option.
|
||||
*
|
||||
* @param {String} [appointmentStatusOption]
|
||||
*
|
||||
* @return {jQuery} Returns a jQuery selector with the list group item markup.
|
||||
*/
|
||||
function renderListGroupItem(appointmentStatusOption = '') {
|
||||
return $(`
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center p-0 border-0 mb-3 appointment-status-option">
|
||||
<label class="w-100 me-2">
|
||||
<input class="form-control" value="${appointmentStatusOption}">
|
||||
</label>
|
||||
|
||||
<button type="button" class="btn btn-outline-danger delete-appointment-status-option">
|
||||
<i class="fas fa-trash"></i>
|
||||
</button>
|
||||
</li>
|
||||
`);
|
||||
}
|
||||
|
||||
/**
|
||||
* Event: Delete Appointment Status Option "Click"
|
||||
*
|
||||
* @param {jQuery.Event} event
|
||||
*/
|
||||
function onDeleteAppointmentStatusOptionClick(event) {
|
||||
$(event.currentTarget).closest('li').remove();
|
||||
}
|
||||
|
||||
/**
|
||||
* Event: Add Appointment Status Option "Click"
|
||||
*
|
||||
* @param {jQuery.Event} event
|
||||
*/
|
||||
function onAddAppointmentStatusOptionClick(event) {
|
||||
const $target = $(event.currentTarget);
|
||||
|
||||
const $listGroup = $target.closest('.appointment-status-options').find('.list-group');
|
||||
|
||||
if (!$listGroup.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
renderListGroupItem().appendTo($listGroup);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get target options.
|
||||
*
|
||||
* @param {jQuery} $target Container element ".status-list" selector.
|
||||
*
|
||||
* @return {String[]}
|
||||
*/
|
||||
function getOptions($target) {
|
||||
const $listGroup = $target.find('.list-group');
|
||||
|
||||
const appointmentStatusOptions = [];
|
||||
|
||||
$listGroup.find('li').each((index, listGroupItemEl) => {
|
||||
const $listGroupItem = $(listGroupItemEl);
|
||||
const appointmentStatusOption = $listGroupItem.find('input:text').val();
|
||||
appointmentStatusOptions.push(appointmentStatusOption);
|
||||
});
|
||||
|
||||
return appointmentStatusOptions;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set target options.
|
||||
*
|
||||
* @param {jQuery} $target Container element ".status-list" selector.
|
||||
* @param {String[]} appointmentStatusOptions Appointment status options.
|
||||
*/
|
||||
function setOptions($target, appointmentStatusOptions) {
|
||||
if (!$target.length || !appointmentStatusOptions || !appointmentStatusOptions.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
const $listGroup = $target.find('.list-group');
|
||||
|
||||
if (!$listGroup.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
$listGroup.empty();
|
||||
|
||||
appointmentStatusOptions.forEach((appointmentStatusOption) => {
|
||||
renderListGroupItem(appointmentStatusOption).appendTo($listGroup);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize the module.
|
||||
*/
|
||||
function initialize() {
|
||||
$(document).on('click', '.delete-appointment-status-option', onDeleteAppointmentStatusOptionClick);
|
||||
$(document).on('click', '.add-appointment-status-option', onAddAppointmentStatusOptionClick);
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', initialize);
|
||||
|
||||
return {
|
||||
getOptions,
|
||||
setOptions,
|
||||
};
|
||||
})();
|
||||
585
assets/js/components/appointments_modal.js
Normal file
585
assets/js/components/appointments_modal.js
Normal file
@ -0,0 +1,585 @@
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Easy!Appointments - Online Appointment Scheduler
|
||||
*
|
||||
* @package EasyAppointments
|
||||
* @author A.Tselegidis <alextselegidis@gmail.com>
|
||||
* @copyright Copyright (c) Alex Tselegidis
|
||||
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
|
||||
* @link https://easyappointments.org
|
||||
* @since v1.5.0
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
/**
|
||||
* Appointments modal component.
|
||||
*
|
||||
* This module implements the appointments modal functionality.
|
||||
*
|
||||
* Old Name: BackendCalendarAppointmentsModal
|
||||
*/
|
||||
App.Components.AppointmentsModal = (function () {
|
||||
const $appointmentsModal = $('#appointments-modal');
|
||||
const $startDatetime = $('#start-datetime');
|
||||
const $endDatetime = $('#end-datetime');
|
||||
const $filterExistingCustomers = $('#filter-existing-customers');
|
||||
const $customerId = $('#customer-id');
|
||||
const $firstName = $('#first-name');
|
||||
const $lastName = $('#last-name');
|
||||
const $email = $('#email');
|
||||
const $phoneNumber = $('#phone-number');
|
||||
const $address = $('#address');
|
||||
const $city = $('#city');
|
||||
const $zipCode = $('#zip-code');
|
||||
const $language = $('#language');
|
||||
const $timezone = $('#timezone');
|
||||
const $customerNotes = $('#customer-notes');
|
||||
const $selectCustomer = $('#select-customer');
|
||||
const $saveAppointment = $('#save-appointment');
|
||||
const $appointmentId = $('#appointment-id');
|
||||
const $appointmentLocation = $('#appointment-location');
|
||||
const $appointmentStatus = $('#appointment-status');
|
||||
const $appointmentColor = $('#appointment-color');
|
||||
const $appointmentNotes = $('#appointment-notes');
|
||||
const $reloadAppointments = $('#reload-appointments');
|
||||
const $selectFilterItem = $('#select-filter-item');
|
||||
const $selectService = $('#select-service');
|
||||
const $selectProvider = $('#select-provider');
|
||||
const $insertAppointment = $('#insert-appointment');
|
||||
const $existingCustomersList = $('#existing-customers-list');
|
||||
const $newCustomer = $('#new-customer');
|
||||
const $customField1 = $('#custom-field-1');
|
||||
const $customField2 = $('#custom-field-2');
|
||||
const $customField3 = $('#custom-field-3');
|
||||
const $customField4 = $('#custom-field-4');
|
||||
const $customField5 = $('#custom-field-5');
|
||||
|
||||
const moment = window.moment;
|
||||
|
||||
/**
|
||||
* Update the displayed timezone.
|
||||
*/
|
||||
function updateTimezone() {
|
||||
const providerId = $selectProvider.val();
|
||||
|
||||
const provider = vars('available_providers').find(
|
||||
(availableProvider) => Number(availableProvider.id) === Number(providerId),
|
||||
);
|
||||
|
||||
if (provider && provider.timezone) {
|
||||
$('.provider-timezone').text(vars('timezones')[provider.timezone]);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the component event listeners.
|
||||
*/
|
||||
function addEventListeners() {
|
||||
/**
|
||||
* Event: Manage Appointments Dialog Save Button "Click"
|
||||
*
|
||||
* Stores the appointment changes or inserts a new appointment depending on the dialog mode.
|
||||
*/
|
||||
$saveAppointment.on('click', () => {
|
||||
// Before doing anything the appointment data need to be validated.
|
||||
if (!App.Components.AppointmentsModal.validateAppointmentForm()) {
|
||||
return;
|
||||
}
|
||||
|
||||
// ID must exist on the object in order for the model to update the record and not to perform
|
||||
// an insert operation.
|
||||
|
||||
const startDateTimeObject = App.Utils.UI.getDateTimePickerValue($startDatetime);
|
||||
const startDatetime = moment(startDateTimeObject).format('YYYY-MM-DD HH:mm:ss');
|
||||
|
||||
const endDateTimeObject = App.Utils.UI.getDateTimePickerValue($endDatetime);
|
||||
const endDatetime = moment(endDateTimeObject).format('YYYY-MM-DD HH:mm:ss');
|
||||
|
||||
const appointment = {
|
||||
id_services: $selectService.val(),
|
||||
id_users_provider: $selectProvider.val(),
|
||||
start_datetime: startDatetime,
|
||||
end_datetime: endDatetime,
|
||||
location: $appointmentLocation.val(),
|
||||
color: App.Components.ColorSelection.getColor($appointmentColor),
|
||||
status: $appointmentStatus.val(),
|
||||
notes: $appointmentNotes.val(),
|
||||
is_unavailability: Number(false),
|
||||
};
|
||||
|
||||
if ($appointmentId.val() !== '') {
|
||||
// Set the id value, only if we are editing an appointment.
|
||||
appointment.id = $appointmentId.val();
|
||||
}
|
||||
|
||||
const customer = {
|
||||
first_name: $firstName.val(),
|
||||
last_name: $lastName.val(),
|
||||
email: $email.val(),
|
||||
phone_number: $phoneNumber.val(),
|
||||
address: $address.val(),
|
||||
city: $city.val(),
|
||||
zip_code: $zipCode.val(),
|
||||
language: $language.val(),
|
||||
timezone: $timezone.val(),
|
||||
notes: $customerNotes.val(),
|
||||
custom_field_1: $customField1.val(),
|
||||
custom_field_2: $customField2.val(),
|
||||
custom_field_3: $customField3.val(),
|
||||
custom_field_4: $customField4.val(),
|
||||
custom_field_5: $customField5.val(),
|
||||
};
|
||||
|
||||
if ($customerId.val() !== '') {
|
||||
// Set the id value, only if we are editing an appointment.
|
||||
customer.id = $customerId.val();
|
||||
appointment.id_users_customer = customer.id;
|
||||
}
|
||||
|
||||
// Define success callback.
|
||||
const successCallback = () => {
|
||||
// Display success message to the user.
|
||||
App.Layouts.Backend.displayNotification(lang('appointment_saved'));
|
||||
|
||||
// Close the modal dialog and refresh the calendar appointments.
|
||||
$appointmentsModal.find('.alert').addClass('d-none');
|
||||
$appointmentsModal.modal('hide');
|
||||
$reloadAppointments.trigger('click');
|
||||
};
|
||||
|
||||
// Define error callback.
|
||||
const errorCallback = () => {
|
||||
$appointmentsModal.find('.modal-message').text(lang('service_communication_error'));
|
||||
$appointmentsModal.find('.modal-message').addClass('alert-danger').removeClass('d-none');
|
||||
$appointmentsModal.find('.modal-body').scrollTop(0);
|
||||
};
|
||||
|
||||
// Save appointment data.
|
||||
App.Http.Calendar.saveAppointment(appointment, customer, successCallback, errorCallback);
|
||||
});
|
||||
|
||||
/**
|
||||
* Event: Insert Appointment Button "Click"
|
||||
*
|
||||
* When the user presses this button, the manage appointment dialog opens and lets the user create a new
|
||||
* appointment.
|
||||
*/
|
||||
$insertAppointment.on('click', () => {
|
||||
$('.popover').remove();
|
||||
|
||||
App.Components.AppointmentsModal.resetModal();
|
||||
|
||||
// Set the selected filter item and find the next appointment time as the default modal values.
|
||||
if ($selectFilterItem.find('option:selected').attr('type') === 'provider') {
|
||||
const providerId = $('#select-filter-item').val();
|
||||
|
||||
const providers = vars('available_providers').filter(
|
||||
(provider) => Number(provider.id) === Number(providerId),
|
||||
);
|
||||
|
||||
if (providers.length) {
|
||||
$selectService.val(providers[0].services[0]).trigger('change');
|
||||
$selectProvider.val(providerId);
|
||||
}
|
||||
} else if ($selectFilterItem.find('option:selected').attr('type') === 'service') {
|
||||
$selectService.find('option[value="' + $selectFilterItem.val() + '"]').prop('selected', true);
|
||||
} else {
|
||||
$selectService.find('option:first').prop('selected', true).trigger('change');
|
||||
}
|
||||
|
||||
$selectProvider.trigger('change');
|
||||
|
||||
const serviceId = $selectService.val();
|
||||
|
||||
const service = vars('available_services').find(
|
||||
(availableService) => Number(availableService.id) === Number(serviceId),
|
||||
);
|
||||
|
||||
const duration = service ? service.duration : 60;
|
||||
|
||||
const startMoment = moment();
|
||||
|
||||
const currentMin = parseInt(startMoment.format('mm'));
|
||||
|
||||
if (currentMin > 0 && currentMin < 15) {
|
||||
startMoment.set({minutes: 15});
|
||||
} else if (currentMin > 15 && currentMin < 30) {
|
||||
startMoment.set({minutes: 30});
|
||||
} else if (currentMin > 30 && currentMin < 45) {
|
||||
startMoment.set({minutes: 45});
|
||||
} else {
|
||||
startMoment.add(1, 'hour').set({minutes: 0});
|
||||
}
|
||||
|
||||
App.Utils.UI.setDateTimePickerValue($startDatetime, startMoment.toDate());
|
||||
App.Utils.UI.setDateTimePickerValue($endDatetime, startMoment.add(duration, 'minutes').toDate());
|
||||
|
||||
// Display modal form.
|
||||
$appointmentsModal.find('.modal-header h3').text(lang('new_appointment_title'));
|
||||
|
||||
$appointmentsModal.modal('show');
|
||||
});
|
||||
|
||||
/**
|
||||
* Event: Pick Existing Customer Button "Click"
|
||||
*
|
||||
* @param {jQuery.Event} event
|
||||
*/
|
||||
$selectCustomer.on('click', (event) => {
|
||||
if (!$existingCustomersList.is(':visible')) {
|
||||
$(event.target).find('span').text(lang('hide'));
|
||||
$existingCustomersList.empty();
|
||||
$existingCustomersList.slideDown('slow');
|
||||
$filterExistingCustomers.fadeIn('slow').val('');
|
||||
vars('customers').forEach((customer) => {
|
||||
$('<div/>', {
|
||||
'data-id': customer.id,
|
||||
'text':
|
||||
(customer.first_name || '[No First Name]') + ' ' + (customer.last_name || '[No Last Name]'),
|
||||
}).appendTo($existingCustomersList);
|
||||
});
|
||||
} else {
|
||||
$existingCustomersList.slideUp('slow');
|
||||
$filterExistingCustomers.fadeOut('slow');
|
||||
$(event.target).find('span').text(lang('select'));
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Event: Select Existing Customer From List "Click"
|
||||
*
|
||||
* @param {jQuery.Event}
|
||||
*/
|
||||
$appointmentsModal.on('click', '#existing-customers-list div', (event) => {
|
||||
const customerId = $(event.target).attr('data-id');
|
||||
|
||||
const customer = vars('customers').find((customer) => Number(customer.id) === Number(customerId));
|
||||
|
||||
if (customer) {
|
||||
$customerId.val(customer.id);
|
||||
$firstName.val(customer.first_name);
|
||||
$lastName.val(customer.last_name);
|
||||
$email.val(customer.email);
|
||||
$phoneNumber.val(customer.phone_number);
|
||||
$address.val(customer.address);
|
||||
$city.val(customer.city);
|
||||
$zipCode.val(customer.zip_code);
|
||||
$language.val(customer.language);
|
||||
$timezone.val(customer.timezone);
|
||||
$customerNotes.val(customer.notes);
|
||||
$customField1.val(customer.custom_field_1);
|
||||
$customField2.val(customer.custom_field_2);
|
||||
$customField3.val(customer.custom_field_3);
|
||||
$customField4.val(customer.custom_field_4);
|
||||
$customField5.val(customer.custom_field_5);
|
||||
}
|
||||
|
||||
$selectCustomer.trigger('click'); // Hide the list.
|
||||
});
|
||||
|
||||
let filterExistingCustomersTimeout = null;
|
||||
|
||||
/**
|
||||
* Event: Filter Existing Customers "Change"
|
||||
*
|
||||
* @param {jQuery.Event}
|
||||
*/
|
||||
$filterExistingCustomers.on('keyup', (event) => {
|
||||
if (filterExistingCustomersTimeout) {
|
||||
clearTimeout(filterExistingCustomersTimeout);
|
||||
}
|
||||
|
||||
const keyword = $(event.target).val().toLowerCase();
|
||||
|
||||
filterExistingCustomersTimeout = setTimeout(() => {
|
||||
$('#loading').css('visibility', 'hidden');
|
||||
|
||||
App.Http.Customers.search(keyword, 50)
|
||||
.done((response) => {
|
||||
$existingCustomersList.empty();
|
||||
|
||||
response.forEach((customer) => {
|
||||
$('<div/>', {
|
||||
'data-id': customer.id,
|
||||
'text':
|
||||
(customer.first_name || '[No First Name]') +
|
||||
' ' +
|
||||
(customer.last_name || '[No Last Name]'),
|
||||
}).appendTo($existingCustomersList);
|
||||
|
||||
// Verify if this customer is on the old customer list.
|
||||
const result = vars('customers').filter((existingCustomer) => {
|
||||
return Number(existingCustomer.id) === Number(customer.id);
|
||||
});
|
||||
|
||||
// Add it to the customer list.
|
||||
if (!result.length) {
|
||||
vars('customers').push(customer);
|
||||
}
|
||||
});
|
||||
})
|
||||
.fail(() => {
|
||||
// If there is any error on the request, search by the local client database.
|
||||
$existingCustomersList.empty();
|
||||
|
||||
vars('customers').forEach((customer) => {
|
||||
if (
|
||||
customer.first_name.toLowerCase().indexOf(keyword) !== -1 ||
|
||||
customer.last_name.toLowerCase().indexOf(keyword) !== -1 ||
|
||||
customer.email.toLowerCase().indexOf(keyword) !== -1 ||
|
||||
customer.phone_number.toLowerCase().indexOf(keyword) !== -1 ||
|
||||
customer.address.toLowerCase().indexOf(keyword) !== -1 ||
|
||||
customer.city.toLowerCase().indexOf(keyword) !== -1 ||
|
||||
customer.zip_code.toLowerCase().indexOf(keyword) !== -1 ||
|
||||
customer.notes.toLowerCase().indexOf(keyword) !== -1
|
||||
) {
|
||||
$('<div/>', {
|
||||
'data-id': customer.id,
|
||||
'text':
|
||||
(customer.first_name || '[No First Name]') +
|
||||
' ' +
|
||||
(customer.last_name || '[No Last Name]'),
|
||||
}).appendTo($existingCustomersList);
|
||||
}
|
||||
});
|
||||
})
|
||||
.always(() => {
|
||||
$('#loading').css('visibility', '');
|
||||
});
|
||||
}, 1000);
|
||||
});
|
||||
|
||||
/**
|
||||
* Event: Selected Service "Change"
|
||||
*
|
||||
* When the user clicks on a service, its available providers should become visible. We also need to
|
||||
* update the start and end time of the appointment.
|
||||
*/
|
||||
$selectService.on('change', () => {
|
||||
const serviceId = $selectService.val();
|
||||
|
||||
const providerId = $selectProvider.val();
|
||||
|
||||
$selectProvider.empty();
|
||||
|
||||
// Automatically update the service duration.
|
||||
const service = vars('available_services').find((availableService) => {
|
||||
return Number(availableService.id) === Number(serviceId);
|
||||
});
|
||||
|
||||
if (service?.color) {
|
||||
App.Components.ColorSelection.setColor($appointmentColor, service.color);
|
||||
}
|
||||
|
||||
const duration = service ? service.duration : 60;
|
||||
|
||||
const startDateTimeObject = App.Utils.UI.getDateTimePickerValue($startDatetime);
|
||||
const endDateTimeObject = new Date(startDateTimeObject.getTime() + duration * 60000);
|
||||
App.Utils.UI.setDateTimePickerValue($endDatetime, endDateTimeObject);
|
||||
|
||||
// Update the providers select box.
|
||||
|
||||
vars('available_providers').forEach((provider) => {
|
||||
provider.services.forEach((providerServiceId) => {
|
||||
if (
|
||||
vars('role_slug') === App.Layouts.Backend.DB_SLUG_PROVIDER &&
|
||||
Number(provider.id) !== vars('user_id')
|
||||
) {
|
||||
return; // continue
|
||||
}
|
||||
|
||||
if (
|
||||
vars('role_slug') === App.Layouts.Backend.DB_SLUG_SECRETARY &&
|
||||
vars('secretary_providers').indexOf(Number(provider.id)) === -1
|
||||
) {
|
||||
return; // continue
|
||||
}
|
||||
|
||||
// If the current provider is able to provide the selected service, add him to the list box.
|
||||
if (Number(providerServiceId) === Number(serviceId)) {
|
||||
$selectProvider.append(new Option(provider.first_name + ' ' + provider.last_name, provider.id));
|
||||
}
|
||||
});
|
||||
|
||||
if ($selectProvider.find(`option[value="${providerId}"]`).length) {
|
||||
$selectProvider.val(providerId);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* Event: Provider "Change"
|
||||
*/
|
||||
$selectProvider.on('change', () => {
|
||||
updateTimezone();
|
||||
});
|
||||
|
||||
/**
|
||||
* Event: Enter New Customer Button "Click"
|
||||
*/
|
||||
$newCustomer.on('click', () => {
|
||||
$customerId.val('');
|
||||
$firstName.val('');
|
||||
$lastName.val('');
|
||||
$email.val('');
|
||||
$phoneNumber.val('');
|
||||
$address.val('');
|
||||
$city.val('');
|
||||
$zipCode.val('');
|
||||
$language.val(vars('default_language'));
|
||||
$timezone.val(vars('default_timezone'));
|
||||
$customerNotes.val('');
|
||||
$customField1.val('');
|
||||
$customField2.val('');
|
||||
$customField3.val('');
|
||||
$customField4.val('');
|
||||
$customField5.val('');
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Reset Appointment Dialog
|
||||
*
|
||||
* This method resets the manage appointment dialog modal to its initial state. After that you can make
|
||||
* any modification might be necessary in order to bring the dialog to the desired state.
|
||||
*/
|
||||
function resetModal() {
|
||||
// Empty form fields.
|
||||
$appointmentsModal.find('input, textarea').val('');
|
||||
$appointmentsModal.find('.modal-message').addClass('.d-none');
|
||||
|
||||
const defaultStatusValue = $appointmentStatus.find('option:first').val();
|
||||
$appointmentStatus.val(defaultStatusValue);
|
||||
|
||||
$language.val(vars('default_language'));
|
||||
$timezone.val(vars('default_timezone'));
|
||||
|
||||
// Reset color.
|
||||
$appointmentColor.find('.color-selection-option:first').trigger('click');
|
||||
|
||||
// Prepare service and provider select boxes.
|
||||
$selectService.val($selectService.eq(0).attr('value'));
|
||||
|
||||
// Fill the providers list box with providers that can serve the appointment's service and then select the
|
||||
// user's provider.
|
||||
$selectProvider.empty();
|
||||
vars('available_providers').forEach((provider) => {
|
||||
const serviceId = $selectService.val();
|
||||
|
||||
const canProvideService =
|
||||
provider.services.filter((providerServiceId) => {
|
||||
return Number(providerServiceId) === Number(serviceId);
|
||||
}).length > 0;
|
||||
|
||||
if (canProvideService) {
|
||||
// Add the provider to the list box.
|
||||
$selectProvider.append(new Option(provider.first_name + ' ' + provider.last_name, provider.id));
|
||||
}
|
||||
});
|
||||
|
||||
// Close existing customers-filter frame.
|
||||
$existingCustomersList.slideUp('slow');
|
||||
$filterExistingCustomers.fadeOut('slow');
|
||||
$selectCustomer.find('span').text(lang('select'));
|
||||
|
||||
// Setup start and datetimepickers.
|
||||
// Get the selected service duration. It will be needed in order to calculate the appointment end datetime.
|
||||
const serviceId = $selectService.val();
|
||||
|
||||
const service = vars('available_services').forEach((service) => Number(service.id) === Number(serviceId));
|
||||
|
||||
const duration = service ? service.duration : 0;
|
||||
|
||||
const startDatetime = new Date();
|
||||
const endDatetime = moment().add(duration, 'minutes').toDate();
|
||||
|
||||
App.Utils.UI.initializeDateTimePicker($startDatetime, {
|
||||
onClose: () => {
|
||||
const serviceId = $selectService.val();
|
||||
|
||||
// Automatically update the #end-datetime DateTimePicker based on service duration.
|
||||
const service = vars('available_services').find(
|
||||
(availableService) => Number(availableService.id) === Number(serviceId),
|
||||
);
|
||||
|
||||
const startDateTimeObject = App.Utils.UI.getDateTimePickerValue($startDatetime);
|
||||
const endDateTimeObject = new Date(startDateTimeObject.getTime() + service.duration * 60000);
|
||||
App.Utils.UI.setDateTimePickerValue($endDatetime, endDateTimeObject);
|
||||
},
|
||||
});
|
||||
|
||||
App.Utils.UI.setDateTimePickerValue($startDatetime, startDatetime);
|
||||
|
||||
App.Utils.UI.initializeDateTimePicker($endDatetime);
|
||||
App.Utils.UI.setDateTimePickerValue($endDatetime, endDatetime);
|
||||
}
|
||||
|
||||
/**
|
||||
* Validate the manage appointment dialog data.
|
||||
*
|
||||
* Validation checks need to run every time the data are going to be saved.
|
||||
*
|
||||
* @return {Boolean} Returns the validation result.
|
||||
*/
|
||||
function validateAppointmentForm() {
|
||||
// Reset previous validation css formatting.
|
||||
$appointmentsModal.find('.is-invalid').removeClass('is-invalid');
|
||||
$appointmentsModal.find('.modal-message').addClass('d-none');
|
||||
|
||||
try {
|
||||
// Check required fields.
|
||||
let missingRequiredField = false;
|
||||
|
||||
$appointmentsModal.find('.required').each((index, requiredField) => {
|
||||
if ($(requiredField).val() === '' || $(requiredField).val() === null) {
|
||||
$(requiredField).addClass('is-invalid');
|
||||
missingRequiredField = true;
|
||||
}
|
||||
});
|
||||
|
||||
if (missingRequiredField) {
|
||||
throw new Error(lang('fields_are_required'));
|
||||
}
|
||||
|
||||
// Check email address.
|
||||
if (
|
||||
$appointmentsModal.find('#email').val() &&
|
||||
!App.Utils.Validation.email($appointmentsModal.find('#email').val())
|
||||
) {
|
||||
$appointmentsModal.find('#email').addClass('is-invalid');
|
||||
throw new Error(lang('invalid_email'));
|
||||
}
|
||||
|
||||
// Check appointment start and end time.
|
||||
const startDateTimeObject = App.Utils.UI.getDateTimePickerValue($startDatetime);
|
||||
const endDateTimeObject = App.Utils.UI.getDateTimePickerValue($endDatetime);
|
||||
|
||||
if (startDateTimeObject > endDateTimeObject) {
|
||||
$startDatetime.addClass('is-invalid');
|
||||
$endDatetime.addClass('is-invalid');
|
||||
throw new Error(lang('start_date_before_end_error'));
|
||||
}
|
||||
|
||||
return true;
|
||||
} catch (error) {
|
||||
$appointmentsModal
|
||||
.find('.modal-message')
|
||||
.addClass('alert-danger')
|
||||
.text(error.message)
|
||||
.removeClass('d-none');
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize the module.
|
||||
*/
|
||||
function initialize() {
|
||||
addEventListeners();
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', initialize);
|
||||
|
||||
return {
|
||||
resetModal,
|
||||
validateAppointmentForm,
|
||||
};
|
||||
})();
|
||||
110
assets/js/components/color_selection.js
Normal file
110
assets/js/components/color_selection.js
Normal file
@ -0,0 +1,110 @@
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Easy!Appointments - Online Appointment Scheduler
|
||||
*
|
||||
* @package EasyAppointments
|
||||
* @author A.Tselegidis <alextselegidis@gmail.com>
|
||||
* @copyright Copyright (c) Alex Tselegidis
|
||||
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
|
||||
* @link https://easyappointments.org
|
||||
* @since v1.5.0
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
/**
|
||||
* Color selection component.
|
||||
*
|
||||
* This module implements the color selection functionality.
|
||||
*/
|
||||
App.Components.ColorSelection = (function () {
|
||||
/**
|
||||
* Event: Color Selection Option "Click"
|
||||
*
|
||||
* @param {jQuery.Event} event
|
||||
*/
|
||||
function onColorSelectionOptionClick(event) {
|
||||
const $target = $(event.currentTarget);
|
||||
|
||||
const $colorSelection = $target.closest('.color-selection');
|
||||
|
||||
$colorSelection.find('.color-selection-option.selected').removeClass('selected');
|
||||
|
||||
$target.addClass('selected');
|
||||
}
|
||||
|
||||
/**
|
||||
* Get target color.
|
||||
*
|
||||
* @param {jQuery} $target Container element ".color-selection" selector.
|
||||
*/
|
||||
function getColor($target) {
|
||||
return $target.find('.color-selection-option.selected').data('value');
|
||||
}
|
||||
|
||||
/**
|
||||
* Set target color.
|
||||
*
|
||||
* @param {jQuery} $target Container element ".color-selection" selector.
|
||||
* @param {String} color Color value.
|
||||
*/
|
||||
function setColor($target, color) {
|
||||
$target
|
||||
.find('.color-selection-option')
|
||||
.removeClass('selected')
|
||||
.each((index, colorSelectionOptionEl) => {
|
||||
var $colorSelectionOption = $(colorSelectionOptionEl);
|
||||
|
||||
if ($colorSelectionOption.data('value') === color) {
|
||||
$colorSelectionOption.addClass('selected');
|
||||
return false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Disable the color selection for the target element.
|
||||
*
|
||||
* @param {jQuery} $target
|
||||
*/
|
||||
function disable($target) {
|
||||
$target.find('.color-selection-option').prop('disabled', true).removeClass('selected');
|
||||
$target.find('.color-selection-option:first').addClass('selected');
|
||||
}
|
||||
|
||||
/**
|
||||
* Enable the color selection for the target element.
|
||||
*
|
||||
* @param {jQuery} $target
|
||||
*/
|
||||
function enable($target) {
|
||||
$target.find('.color-selection-option').prop('disabled', false);
|
||||
}
|
||||
|
||||
function applyBackgroundColors() {
|
||||
$(document)
|
||||
.find('.color-selection-option')
|
||||
.each((index, colorSelectionOptionEl) => {
|
||||
const $colorSelectionOption = $(colorSelectionOptionEl);
|
||||
|
||||
const color = $colorSelectionOption.data('value');
|
||||
|
||||
$colorSelectionOption.css('background-color', color);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize the module.
|
||||
*/
|
||||
function initialize() {
|
||||
$(document).on('click', '.color-selection-option', onColorSelectionOptionClick);
|
||||
|
||||
applyBackgroundColors();
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', initialize);
|
||||
|
||||
return {
|
||||
disable,
|
||||
enable,
|
||||
getColor,
|
||||
setColor,
|
||||
};
|
||||
})();
|
||||
198
assets/js/components/ldap_import_modal.js
Normal file
198
assets/js/components/ldap_import_modal.js
Normal file
@ -0,0 +1,198 @@
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Easy!Appointments - Online Appointment Scheduler
|
||||
*
|
||||
* @package EasyAppointments
|
||||
* @author A.Tselegidis <alextselegidis@gmail.com>
|
||||
* @copyright Copyright (c) Alex Tselegidis
|
||||
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
|
||||
* @link https://easyappointments.org
|
||||
* @since v1.5.0
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
/**
|
||||
* LDAP import modal component.
|
||||
*
|
||||
* This module implements the LDAP import modal functionality.
|
||||
*
|
||||
* This module requires the following scripts:
|
||||
*
|
||||
* - App.Http.Customers
|
||||
* - App.Http.Providers
|
||||
* - App.Http.Secretaries
|
||||
* - App.Http.Admins
|
||||
*/
|
||||
App.Components.LdapImportModal = (function () {
|
||||
const $modal = $('#ldap-import-modal');
|
||||
const $save = $('#ldap-import-save');
|
||||
const $firstName = $('#ldap-import-first-name');
|
||||
const $lastName = $('#ldap-import-last-name');
|
||||
const $email = $('#ldap-import-email');
|
||||
const $phoneNumber = $('#ldap-import-phone-number');
|
||||
const $username = $('#ldap-import-username');
|
||||
const $ldapDn = $('#ldap-import-ldap-dn');
|
||||
const $roleSlug = $('#ldap-import-role-slug');
|
||||
const $password = $('#ldap-import-password');
|
||||
|
||||
let deferred;
|
||||
|
||||
/**
|
||||
* Validate the import modal form.
|
||||
*
|
||||
* @return {Boolean}
|
||||
*/
|
||||
function validate() {
|
||||
$modal.find('.is-invalid').removeClass('is-invalid');
|
||||
|
||||
// Check required fields.
|
||||
let missingRequiredField = false;
|
||||
|
||||
$modal.find('.required').each((index, requiredField) => {
|
||||
if ($(requiredField).val() === '' || $(requiredField).val() === null) {
|
||||
$(requiredField).addClass('is-invalid');
|
||||
missingRequiredField = true;
|
||||
}
|
||||
});
|
||||
|
||||
return !missingRequiredField;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the right HTTP client for the create-user request.
|
||||
*
|
||||
* @param {String} roleSlug
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
function getHttpClient(roleSlug) {
|
||||
switch (roleSlug) {
|
||||
case App.Layouts.Backend.DB_SLUG_CUSTOMER:
|
||||
return App.Http.Customers;
|
||||
case App.Layouts.Backend.DB_SLUG_PROVIDER:
|
||||
return App.Http.Providers;
|
||||
case App.Layouts.Backend.DB_SLUG_SECRETARY:
|
||||
return App.Http.Secretaries;
|
||||
case App.Layouts.Backend.DB_SLUG_ADMIN:
|
||||
return App.Http.Admins;
|
||||
default:
|
||||
throw new Error(`Unsupported role slug provided: ${roleSlug}`);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the user data object, based on the form values the user provided.
|
||||
*
|
||||
* @param {String} roleSlug
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
function getUser(roleSlug) {
|
||||
const user = {
|
||||
first_name: $firstName.val(),
|
||||
last_name: $lastName.val(),
|
||||
email: $email.val(),
|
||||
phone_number: $phoneNumber.val(),
|
||||
ldap_dn: $ldapDn.val(),
|
||||
};
|
||||
|
||||
if (roleSlug !== App.Layouts.Backend.DB_SLUG_CUSTOMER) {
|
||||
user.settings = {
|
||||
username: $username.val(),
|
||||
password: $password.val(),
|
||||
notification: 1,
|
||||
};
|
||||
}
|
||||
|
||||
return user;
|
||||
}
|
||||
|
||||
/**
|
||||
* Go through the available values and try to load as many as possible based on the provided mapping.
|
||||
*
|
||||
* @param {Object} entry
|
||||
* @param {Object} ldapFieldMapping
|
||||
*/
|
||||
function loadEntry(entry, ldapFieldMapping) {
|
||||
$ldapDn.val(entry.dn);
|
||||
$firstName.val(entry?.[ldapFieldMapping?.first_name] ?? '');
|
||||
$lastName.val(entry?.[ldapFieldMapping?.last_name] ?? '');
|
||||
$email.val(entry?.[ldapFieldMapping?.email] ?? '');
|
||||
$phoneNumber.val(entry?.[ldapFieldMapping?.phone_number] ?? '');
|
||||
$username.val(entry?.[ldapFieldMapping?.username] ?? '');
|
||||
$password.val('');
|
||||
}
|
||||
|
||||
/**
|
||||
* Save the current user data.
|
||||
*/
|
||||
function onSaveClick() {
|
||||
if (!validate()) {
|
||||
return;
|
||||
}
|
||||
|
||||
const roleSlug = $roleSlug.val();
|
||||
|
||||
const user = getUser(roleSlug);
|
||||
|
||||
const httpClient = getHttpClient(roleSlug);
|
||||
|
||||
httpClient.store(user).done(() => {
|
||||
deferred.resolve();
|
||||
deferred = undefined;
|
||||
$modal.modal('hide');
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Reset the modal every time it's hidden.
|
||||
*/
|
||||
function onModalHidden() {
|
||||
resetModal();
|
||||
|
||||
if (deferred) {
|
||||
deferred.reject();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Reset the modal fields and state.
|
||||
*/
|
||||
function resetModal() {
|
||||
$modal.find('input, select, textarea').val('');
|
||||
$modal.find(':checkbox').prop('checked', false);
|
||||
$roleSlug.val(App.Layouts.Backend.DB_SLUG_PROVIDER);
|
||||
}
|
||||
|
||||
/**
|
||||
* Open the import modal for an LDAP entry.
|
||||
*
|
||||
* @param {Object} entry
|
||||
* @param {Object} ldapFieldMapping
|
||||
*
|
||||
* @return {Object} $.Deferred
|
||||
*/
|
||||
function open(entry, ldapFieldMapping) {
|
||||
resetModal();
|
||||
|
||||
deferred = $.Deferred();
|
||||
|
||||
loadEntry(entry, ldapFieldMapping);
|
||||
|
||||
$modal.modal('show');
|
||||
|
||||
return deferred.promise();
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize the module.
|
||||
*/
|
||||
function initialize() {
|
||||
$save.on('click', onSaveClick);
|
||||
$modal.on('hidden.bs.modal', onModalHidden);
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', initialize);
|
||||
|
||||
return {
|
||||
open,
|
||||
};
|
||||
})();
|
||||
218
assets/js/components/unavailabilities_modal.js
Normal file
218
assets/js/components/unavailabilities_modal.js
Normal file
@ -0,0 +1,218 @@
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Easy!Appointments - Online Appointment Scheduler
|
||||
*
|
||||
* @package EasyAppointments
|
||||
* @author A.Tselegidis <alextselegidis@gmail.com>
|
||||
* @copyright Copyright (c) Alex Tselegidis
|
||||
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
|
||||
* @link https://easyappointments.org
|
||||
* @since v1.5.0
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
/**
|
||||
* Unavailabilities modal component.
|
||||
*
|
||||
* This module implements the unavailabilities modal functionality.
|
||||
*
|
||||
* Old Name: BackendCalendarUnavailabilityEventsModal
|
||||
*/
|
||||
App.Components.UnavailabilitiesModal = (function () {
|
||||
const $unavailabilitiesModal = $('#unavailabilities-modal');
|
||||
const $id = $('#unavailability-id');
|
||||
const $startDatetime = $('#unavailability-start');
|
||||
const $endDatetime = $('#unavailability-end');
|
||||
const $selectProvider = $('#unavailability-provider');
|
||||
const $notes = $('#unavailability-notes');
|
||||
const $saveUnavailability = $('#save-unavailability');
|
||||
const $insertUnavailability = $('#insert-unavailability');
|
||||
const $selectFilterItem = $('#select-filter-item');
|
||||
const $reloadAppointments = $('#reload-appointments');
|
||||
|
||||
const moment = window.moment;
|
||||
|
||||
/**
|
||||
* Update the displayed timezone.
|
||||
*/
|
||||
function updateTimezone() {
|
||||
const providerId = $selectProvider.val();
|
||||
|
||||
const provider = vars('available_providers').find(
|
||||
(availableProvider) => Number(availableProvider.id) === Number(providerId),
|
||||
);
|
||||
|
||||
if (provider && provider.timezone) {
|
||||
$unavailabilitiesModal.find('.provider-timezone').text(vars('timezones')[provider.timezone]);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the component event listeners.
|
||||
*/
|
||||
function addEventListeners() {
|
||||
/**
|
||||
* Event: Provider "Change"
|
||||
*/
|
||||
$selectProvider.on('change', () => {
|
||||
updateTimezone();
|
||||
});
|
||||
|
||||
/**
|
||||
* Event: Manage Unavailability Dialog Save Button "Click"
|
||||
*
|
||||
* Stores the unavailability period changes or inserts a new record.
|
||||
*/
|
||||
$saveUnavailability.on('click', () => {
|
||||
$unavailabilitiesModal.find('.modal-message').addClass('d-none');
|
||||
$unavailabilitiesModal.find('.is-invalid').removeClass('is-invalid');
|
||||
|
||||
if (!$selectProvider.val()) {
|
||||
$selectProvider.addClass('is-invalid');
|
||||
return;
|
||||
}
|
||||
|
||||
const startDateTimeMoment = moment(App.Utils.UI.getDateTimePickerValue($startDatetime));
|
||||
|
||||
if (!startDateTimeMoment.isValid()) {
|
||||
$startDatetime.addClass('is-invalid');
|
||||
return;
|
||||
}
|
||||
|
||||
const endDateTimeMoment = moment(App.Utils.UI.getDateTimePickerValue($endDatetime));
|
||||
|
||||
if (!endDateTimeMoment.isValid()) {
|
||||
$endDatetime.addClass('is-invalid');
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if (startDateTimeMoment.isAfter(endDateTimeMoment)) {
|
||||
// Start time is after end time - display message to user.
|
||||
$unavailabilitiesModal
|
||||
.find('.modal-message')
|
||||
.text(lang('start_date_before_end_error'))
|
||||
.addClass('alert-danger')
|
||||
.removeClass('d-none');
|
||||
|
||||
$startDatetime.addClass('is-invalid');
|
||||
|
||||
$endDatetime.addClass('is-invalid');
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
// Unavailability period records go to the appointments table.
|
||||
const unavailability = {
|
||||
start_datetime: startDateTimeMoment.format('YYYY-MM-DD HH:mm:ss'),
|
||||
end_datetime: endDateTimeMoment.format('YYYY-MM-DD HH:mm:ss'),
|
||||
notes: $unavailabilitiesModal.find('#unavailability-notes').val(),
|
||||
id_users_provider: $selectProvider.val(),
|
||||
};
|
||||
|
||||
if ($id.val() !== '') {
|
||||
// Set the id value, only if we are editing an appointment.
|
||||
unavailability.id = $id.val();
|
||||
}
|
||||
|
||||
const successCallback = () => {
|
||||
// Display success message to the user.
|
||||
App.Layouts.Backend.displayNotification(lang('unavailability_saved'));
|
||||
|
||||
// Close the modal dialog and refresh the calendar appointments.
|
||||
$unavailabilitiesModal.find('.alert').addClass('d-none');
|
||||
|
||||
$unavailabilitiesModal.modal('hide');
|
||||
|
||||
$reloadAppointments.trigger('click');
|
||||
};
|
||||
|
||||
App.Http.Calendar.saveUnavailability(unavailability, successCallback, null);
|
||||
});
|
||||
|
||||
/**
|
||||
* Event : Insert Unavailability Time Period Button "Click"
|
||||
*
|
||||
* When the user clicks this button a popup dialog appears and the use can set a time period where
|
||||
* he cannot accept any appointments.
|
||||
*/
|
||||
$insertUnavailability.on('click', () => {
|
||||
resetModal();
|
||||
|
||||
const $dialog = $('#unavailabilities-modal');
|
||||
|
||||
// Set the default datetime values.
|
||||
const startMoment = moment();
|
||||
|
||||
const currentMin = parseInt(startMoment.format('mm'));
|
||||
|
||||
if (currentMin > 0 && currentMin < 15) {
|
||||
startMoment.set({minutes: 15});
|
||||
} else if (currentMin > 15 && currentMin < 30) {
|
||||
startMoment.set({minutes: 30});
|
||||
} else if (currentMin > 30 && currentMin < 45) {
|
||||
startMoment.set({minutes: 45});
|
||||
} else {
|
||||
startMoment.add(1, 'hour').set({minutes: 0});
|
||||
}
|
||||
|
||||
if ($('.calendar-view').length === 0) {
|
||||
$selectProvider.val($selectFilterItem.val()).closest('.form-group').hide();
|
||||
}
|
||||
|
||||
App.Utils.UI.setDateTimePickerValue($startDatetime, startMoment.toDate());
|
||||
App.Utils.UI.setDateTimePickerValue($endDatetime, startMoment.add(1, 'hour').toDate());
|
||||
|
||||
$dialog.find('.modal-header h3').text(lang('new_unavailability_title'));
|
||||
$dialog.modal('show');
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Reset unavailability dialog form.
|
||||
*
|
||||
* Reset the "#unavailabilities-modal" dialog. Use this method to bring the dialog to the initial state
|
||||
* before it becomes visible to the user.
|
||||
*/
|
||||
function resetModal() {
|
||||
$id.val('');
|
||||
|
||||
// Set default time values
|
||||
const start = App.Utils.Date.format(moment().toDate(), vars('date_format'), vars('time_format'), true);
|
||||
|
||||
const end = App.Utils.Date.format(
|
||||
moment().add(1, 'hour').toDate(),
|
||||
vars('date_format'),
|
||||
vars('time_format'),
|
||||
true,
|
||||
);
|
||||
|
||||
App.Utils.UI.initializeDateTimePicker($startDatetime);
|
||||
|
||||
$startDatetime.val(start);
|
||||
|
||||
App.Utils.UI.initializeDateTimePicker($endDatetime);
|
||||
|
||||
$endDatetime.val(end);
|
||||
|
||||
// Clear the unavailability notes field.
|
||||
$notes.val('');
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize the module.
|
||||
*/
|
||||
function initialize() {
|
||||
for (const index in vars('available_providers')) {
|
||||
const provider = vars('available_providers')[index];
|
||||
|
||||
$selectProvider.append(new Option(provider.first_name + ' ' + provider.last_name, provider.id));
|
||||
}
|
||||
|
||||
addEventListeners();
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', initialize);
|
||||
|
||||
return {
|
||||
resetModal,
|
||||
};
|
||||
})();
|
||||
493
assets/js/components/working_plan_exceptions_modal.js
Normal file
493
assets/js/components/working_plan_exceptions_modal.js
Normal file
@ -0,0 +1,493 @@
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Easy!Appointments - Online Appointment Scheduler
|
||||
*
|
||||
* @package EasyAppointments
|
||||
* @author A.Tselegidis <alextselegidis@gmail.com>
|
||||
* @copyright Copyright (c) Alex Tselegidis
|
||||
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
|
||||
* @link https://easyappointments.org
|
||||
* @since v1.5.0
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
/**
|
||||
* Working plan exceptions modal component.
|
||||
*
|
||||
* This module implements the working plan exceptions modal functionality.
|
||||
*/
|
||||
App.Components.WorkingPlanExceptionsModal = (function () {
|
||||
const $modal = $('#working-plan-exceptions-modal');
|
||||
const $date = $('#working-plan-exceptions-date');
|
||||
const $start = $('#working-plan-exceptions-start');
|
||||
const $end = $('#working-plan-exceptions-end');
|
||||
const $breaks = $('#working-plan-exceptions-breaks');
|
||||
const $save = $('#working-plan-exceptions-save');
|
||||
const $addBreak = $('.working-plan-exceptions-add-break');
|
||||
const $isNonWorkingDay = $('#working-plan-exceptions-is-non-working-day');
|
||||
|
||||
const moment = window.moment;
|
||||
|
||||
let deferred = null;
|
||||
let enableSubmit = false;
|
||||
let enableCancel = false;
|
||||
|
||||
/**
|
||||
* Reset the modal fields back to the original empty state.
|
||||
*/
|
||||
function resetModal() {
|
||||
$addBreak.prop('disabled', false);
|
||||
$date.val('');
|
||||
$start.val('');
|
||||
$end.val('');
|
||||
$breaks.find('tbody').html(renderNoBreaksRow());
|
||||
$isNonWorkingDay.prop('checked', false);
|
||||
toggleFieldsByNonWorkingDay(false);
|
||||
}
|
||||
|
||||
/**
|
||||
* Render a single table row as a placeholder to empty breaks table.
|
||||
*/
|
||||
function renderNoBreaksRow() {
|
||||
return $(`
|
||||
<tr class="no-breaks-row">
|
||||
<td colspan="3" class="text-center">
|
||||
${lang('no_breaks')}
|
||||
</td>
|
||||
</tr>
|
||||
`);
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle the state of the fields depending on the non-working day checkbox value.
|
||||
*
|
||||
* @param {Boolean} isNonWorkingDay
|
||||
*/
|
||||
function toggleFieldsByNonWorkingDay(isNonWorkingDay) {
|
||||
$start.prop('disabled', isNonWorkingDay).toggleClass('text-decoration-line-through', isNonWorkingDay);
|
||||
$end.prop('disabled', isNonWorkingDay).toggleClass('text-decoration-line-through', isNonWorkingDay);
|
||||
$addBreak.prop('disabled', isNonWorkingDay);
|
||||
$breaks.find('button').prop('disabled', isNonWorkingDay);
|
||||
$breaks.toggleClass('text-decoration-line-through', isNonWorkingDay);
|
||||
}
|
||||
|
||||
/**
|
||||
* Validate the modal form fields and return false if the validation fails.
|
||||
*
|
||||
* @returns {Boolean}
|
||||
*/
|
||||
function validate() {
|
||||
$modal.find('.is-invalid').removeClass('is-invalid');
|
||||
|
||||
const date = App.Utils.UI.getDateTimePickerValue($date);
|
||||
|
||||
if (!date) {
|
||||
$date.addClass('is-invalid');
|
||||
}
|
||||
|
||||
const start = App.Utils.UI.getDateTimePickerValue($start);
|
||||
|
||||
if (!start) {
|
||||
$start.addClass('is-invalid');
|
||||
}
|
||||
|
||||
const end = App.Utils.UI.getDateTimePickerValue($end);
|
||||
|
||||
if (!end) {
|
||||
$end.addClass('is-invalid');
|
||||
}
|
||||
|
||||
return !$modal.find('.is-invalid').length;
|
||||
}
|
||||
|
||||
/**
|
||||
* Event: On Modal "Hidden"
|
||||
*
|
||||
* This event is used to automatically reset the modal back to the original state.
|
||||
*/
|
||||
function onModalHidden() {
|
||||
resetModal();
|
||||
}
|
||||
|
||||
/**
|
||||
* Serialize the entered break entries.
|
||||
*
|
||||
* @returns {Array}
|
||||
*/
|
||||
function getBreaks() {
|
||||
const breaks = [];
|
||||
|
||||
$breaks
|
||||
.find('tbody tr')
|
||||
.not('.no-breaks-row')
|
||||
.each((index, tr) => {
|
||||
const $tr = $(tr);
|
||||
|
||||
if ($tr.find('input:text').length) {
|
||||
return true;
|
||||
}
|
||||
|
||||
const start = $tr.find('.working-plan-exceptions-break-start').text();
|
||||
const end = $tr.find('.working-plan-exceptions-break-end').text();
|
||||
|
||||
breaks.push({
|
||||
start: moment(start, vars('time_format') === 'regular' ? 'h:mm a' : 'HH:mm').format('HH:mm'),
|
||||
end: moment(end, vars('time_format') === 'regular' ? 'h:mm a' : 'HH:mm').format('HH:mm'),
|
||||
});
|
||||
});
|
||||
|
||||
// Sort breaks increasingly by hour within day
|
||||
breaks.sort((break1, break2) => {
|
||||
// We can do a direct string comparison since we have time based on 24 hours clock.
|
||||
return break1.start.localeCompare(break2.start);
|
||||
});
|
||||
|
||||
return breaks;
|
||||
}
|
||||
|
||||
/**
|
||||
* Event: On Save "Click"
|
||||
*
|
||||
* Serialize the entire working plan exception and resolved the promise so that external code can save it.
|
||||
*/
|
||||
function onSaveClick() {
|
||||
if (!deferred) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!validate()) {
|
||||
return;
|
||||
}
|
||||
|
||||
const date = moment(App.Utils.UI.getDateTimePickerValue($date)).format('YYYY-MM-DD');
|
||||
|
||||
const isNonWorkingDay = $isNonWorkingDay.prop('checked');
|
||||
|
||||
const workingPlanException = isNonWorkingDay
|
||||
? null
|
||||
: {
|
||||
start: moment(App.Utils.UI.getDateTimePickerValue($start)).format('HH:mm'),
|
||||
end: moment(App.Utils.UI.getDateTimePickerValue($end)).format('HH:mm'),
|
||||
breaks: getBreaks(),
|
||||
};
|
||||
|
||||
deferred.resolve(date, workingPlanException);
|
||||
|
||||
$modal.modal('hide');
|
||||
|
||||
resetModal();
|
||||
}
|
||||
|
||||
/**
|
||||
* Enable the inline-editable table cell functionality for the provided target element..
|
||||
*
|
||||
* @param {jQuery} $target
|
||||
*/
|
||||
function editableTimeCell($target) {
|
||||
$target.editable(
|
||||
(value) => {
|
||||
// Do not return the value because the user needs to press the "Save" button.
|
||||
return value;
|
||||
},
|
||||
{
|
||||
event: 'edit',
|
||||
height: '30px',
|
||||
submit: $('<button/>', {
|
||||
'type': 'button',
|
||||
'class': 'd-none submit-editable',
|
||||
'text': lang('save'),
|
||||
}).get(0).outerHTML,
|
||||
cancel: $('<button/>', {
|
||||
'type': 'button',
|
||||
'class': 'd-none cancel-editable',
|
||||
'text': lang('cancel'),
|
||||
}).get(0).outerHTML,
|
||||
onblur: 'ignore',
|
||||
onreset: () => {
|
||||
if (!enableCancel) {
|
||||
return false; // disable ESC button
|
||||
}
|
||||
},
|
||||
onsubmit: () => {
|
||||
if (!enableSubmit) {
|
||||
return false; // disable Enter button
|
||||
}
|
||||
},
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
function resetTimeSelection() {
|
||||
App.Utils.UI.setDateTimePickerValue($start, moment('08:00', 'HH:mm').toDate());
|
||||
App.Utils.UI.setDateTimePickerValue($end, moment('20:00', 'HH:mm').toDate());
|
||||
}
|
||||
|
||||
/**
|
||||
* Open the modal and start adding a new working plan exception.
|
||||
*
|
||||
* @returns {*|jQuery.Deferred}
|
||||
*/
|
||||
function add() {
|
||||
deferred = $.Deferred();
|
||||
|
||||
App.Utils.UI.setDateTimePickerValue($date, new Date());
|
||||
|
||||
resetTimeSelection();
|
||||
|
||||
$isNonWorkingDay.prop('checked', false);
|
||||
|
||||
$breaks.find('tbody').html(renderNoBreaksRow());
|
||||
|
||||
$modal.modal('show');
|
||||
|
||||
return deferred.promise();
|
||||
}
|
||||
|
||||
/**
|
||||
* Modify the provided working plan exception for the selected date.
|
||||
*
|
||||
* @param {String} date
|
||||
* @param {Object} workingPlanException
|
||||
*
|
||||
* @return {*|jQuery.Deferred}
|
||||
*/
|
||||
function edit(date, workingPlanException) {
|
||||
deferred = $.Deferred();
|
||||
|
||||
const isNonWorkingDay = !Boolean(workingPlanException);
|
||||
|
||||
App.Utils.UI.setDateTimePickerValue($date, moment(date, 'YYYY-MM-DD').toDate());
|
||||
|
||||
if (isNonWorkingDay === false) {
|
||||
App.Utils.UI.setDateTimePickerValue($start, moment(workingPlanException.start, 'HH:mm').toDate());
|
||||
App.Utils.UI.setDateTimePickerValue($end, moment(workingPlanException.end, 'HH:mm').toDate());
|
||||
|
||||
if (!workingPlanException.breaks) {
|
||||
$breaks.find('tbody').html(renderNoBreaksRow());
|
||||
}
|
||||
|
||||
workingPlanException.breaks.forEach((workingPlanExceptionBreak) => {
|
||||
renderBreakRow(workingPlanExceptionBreak).appendTo($breaks.find('tbody'));
|
||||
});
|
||||
|
||||
editableTimeCell(
|
||||
$breaks.find('tbody .working-plan-exceptions-break-start, tbody .working-plan-exceptions-break-end'),
|
||||
);
|
||||
} else {
|
||||
App.Utils.UI.setDateTimePickerValue($start, moment('08:00', 'HH:mm').toDate());
|
||||
App.Utils.UI.setDateTimePickerValue($end, moment('20:00', 'HH:mm').toDate());
|
||||
$breaks.find('tbody').html(renderNoBreaksRow());
|
||||
}
|
||||
|
||||
$isNonWorkingDay.prop('checked', isNonWorkingDay);
|
||||
|
||||
toggleFieldsByNonWorkingDay(isNonWorkingDay);
|
||||
|
||||
$modal.modal('show');
|
||||
|
||||
return deferred.promise();
|
||||
}
|
||||
|
||||
/**
|
||||
* Render a break table row based on the provided break period object.
|
||||
*
|
||||
* @param {Object} breakPeriod
|
||||
*
|
||||
* @return {jQuery}
|
||||
*/
|
||||
function renderBreakRow(breakPeriod) {
|
||||
const timeFormat = vars('time_format') === 'regular' ? 'h:mm a' : 'HH:mm';
|
||||
|
||||
return $('<tr/>', {
|
||||
'html': [
|
||||
$('<td/>', {
|
||||
'class': 'working-plan-exceptions-break-start editable',
|
||||
'text': moment(breakPeriod.start, 'HH:mm').format(timeFormat),
|
||||
}),
|
||||
$('<td/>', {
|
||||
'class': 'working-plan-exceptions-break-end editable',
|
||||
'text': moment(breakPeriod.end, 'HH:mm').format(timeFormat),
|
||||
}),
|
||||
$('<td/>', {
|
||||
'html': [
|
||||
$('<button/>', {
|
||||
'type': 'button',
|
||||
'class': 'btn btn-outline-secondary btn-sm me-2 working-plan-exceptions-edit-break',
|
||||
'title': lang('edit'),
|
||||
'html': [
|
||||
$('<span/>', {
|
||||
'class': 'fas fa-edit',
|
||||
}),
|
||||
],
|
||||
}),
|
||||
$('<button/>', {
|
||||
'type': 'button',
|
||||
'class': 'btn btn-outline-secondary btn-sm working-plan-exceptions-delete-break',
|
||||
'title': lang('delete'),
|
||||
'html': [
|
||||
$('<span/>', {
|
||||
'class': 'fas fa-trash-alt',
|
||||
}),
|
||||
],
|
||||
}),
|
||||
$('<button/>', {
|
||||
'type': 'button',
|
||||
'class': 'btn btn-outline-secondary btn-sm me-2 working-plan-exceptions-save-break d-none',
|
||||
'title': lang('save'),
|
||||
'html': [
|
||||
$('<span/>', {
|
||||
'class': 'fas fa-check-circle',
|
||||
}),
|
||||
],
|
||||
}),
|
||||
$('<button/>', {
|
||||
'type': 'button',
|
||||
'class': 'btn btn-outline-secondary btn-sm working-plan-exceptions-cancel-break d-none',
|
||||
'title': lang('cancel'),
|
||||
'html': [
|
||||
$('<span/>', {
|
||||
'class': 'fas fa-ban',
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Event: Add Break "Click"
|
||||
*/
|
||||
function onAddBreakClick() {
|
||||
const $newBreak = renderBreakRow({
|
||||
start: '12:00',
|
||||
end: '14:00',
|
||||
}).appendTo('#working-plan-exceptions-breaks tbody');
|
||||
|
||||
// Bind editable and event handlers.
|
||||
editableTimeCell($newBreak.find('.working-plan-exceptions-break-start, .working-plan-exceptions-break-end'));
|
||||
$newBreak.find('.working-plan-exceptions-edit-break').trigger('click');
|
||||
$addBreak.prop('disabled', true);
|
||||
}
|
||||
|
||||
/**
|
||||
* Event: Edit Break "Click"
|
||||
*/
|
||||
function onEditBreakClick() {
|
||||
// Reset previous editable table cells.
|
||||
const $previousEdits = $(this).closest('table').find('.editable');
|
||||
|
||||
$previousEdits.each((index, editable) => {
|
||||
if (editable.reset) {
|
||||
editable.reset();
|
||||
}
|
||||
});
|
||||
|
||||
// Make all cells in current row editable.
|
||||
let $tr = $(this).closest('tr');
|
||||
$tr.children().trigger('edit');
|
||||
App.Utils.UI.initializeTimePicker(
|
||||
$tr.find('.working-plan-exceptions-break-start input, .working-plan-exceptions-break-end input'),
|
||||
);
|
||||
$(this).closest('tr').find('.working-plan-exceptions-break-start').focus();
|
||||
|
||||
// Show save - cancel buttons.
|
||||
$tr = $(this).closest('tr');
|
||||
$tr.find('.working-plan-exceptions-edit-break, .working-plan-exceptions-delete-break').addClass('d-none');
|
||||
$tr.find('.working-plan-exceptions-save-break, .working-plan-exceptions-cancel-break').removeClass('d-none');
|
||||
$tr.find('select,input:text').addClass('form-control input-sm');
|
||||
|
||||
$addBreak.prop('disabled', true);
|
||||
}
|
||||
|
||||
/**
|
||||
* Event: Delete Break "Click"
|
||||
*/
|
||||
function onDeleteBreakClick() {
|
||||
$(this).closest('tr').remove();
|
||||
}
|
||||
|
||||
/**
|
||||
* Event: Save Break "Click"
|
||||
*/
|
||||
function onSaveBreakClick() {
|
||||
// Break's start time must always be prior to break's end.
|
||||
const $tr = $(this).closest('tr');
|
||||
const start = moment(
|
||||
$tr.find('.working-plan-exceptions-break-start input').val(),
|
||||
vars('time_format') === 'regular' ? 'h:mm a' : 'HH:mm',
|
||||
);
|
||||
const end = moment(
|
||||
$tr.find('.working-plan-exceptions-break-end input').val(),
|
||||
vars('time_format') === 'regular' ? 'h:mm a' : 'HH:mm',
|
||||
);
|
||||
|
||||
if (start > end) {
|
||||
$tr.find('.working-plan-exceptions-break-end input').val(
|
||||
start.add(1, 'hour').format(vars('time_format') === 'regular' ? 'h:mm a' : 'HH:mm'),
|
||||
);
|
||||
}
|
||||
|
||||
enableSubmit = true;
|
||||
$tr.find('.editable .submit-editable').trigger('click');
|
||||
enableSubmit = false;
|
||||
|
||||
$tr.find('.working-plan-exceptions-save-break, .working-plan-exceptions-cancel-break').addClass('d-none');
|
||||
$tr.closest('table')
|
||||
.find('.working-plan-exceptions-edit-break, .working-plan-exceptions-delete-break')
|
||||
.removeClass('d-none');
|
||||
$addBreak.prop('disabled', false);
|
||||
}
|
||||
|
||||
/**
|
||||
* Event: Cancel Break "Click"
|
||||
*/
|
||||
function onCancelBreakClick() {
|
||||
const $tr = $(this).closest('tr');
|
||||
enableCancel = true;
|
||||
$tr.find('.cancel-editable').trigger('click');
|
||||
enableCancel = false;
|
||||
|
||||
$breaks
|
||||
.find('.working-plan-exceptions-edit-break, .working-plan-exceptions-delete-break')
|
||||
.removeClass('d-none');
|
||||
$tr.find('.working-plan-exceptions-save-break, .working-plan-exceptions-cancel-break').addClass('d-none');
|
||||
$addBreak.prop('disabled', false);
|
||||
}
|
||||
|
||||
/**
|
||||
* Event: Is Non-Working Day "Change"
|
||||
*/
|
||||
function onIsNonWorkingDayChange() {
|
||||
const isNonWorkingDay = $isNonWorkingDay.prop('checked');
|
||||
resetTimeSelection();
|
||||
toggleFieldsByNonWorkingDay(isNonWorkingDay);
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize the module.
|
||||
*/
|
||||
function initialize() {
|
||||
App.Utils.UI.initializeDatePicker($date);
|
||||
App.Utils.UI.initializeTimePicker($start);
|
||||
App.Utils.UI.initializeTimePicker($end);
|
||||
|
||||
$modal
|
||||
.on('hidden.bs.modal', onModalHidden)
|
||||
.on('click', '.working-plan-exceptions-add-break', onAddBreakClick)
|
||||
.on('click', '.working-plan-exceptions-edit-break', onEditBreakClick)
|
||||
.on('click', '.working-plan-exceptions-delete-break', onDeleteBreakClick)
|
||||
.on('click', '.working-plan-exceptions-save-break', onSaveBreakClick)
|
||||
.on('click', '.working-plan-exceptions-cancel-break', onCancelBreakClick);
|
||||
|
||||
$save.on('click', onSaveClick);
|
||||
|
||||
$isNonWorkingDay.on('change', onIsNonWorkingDayChange);
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', initialize);
|
||||
|
||||
return {
|
||||
add,
|
||||
edit,
|
||||
};
|
||||
})();
|
||||
60
assets/js/http/account_http_client.js
Normal file
60
assets/js/http/account_http_client.js
Normal file
@ -0,0 +1,60 @@
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Easy!Appointments - Online Appointment Scheduler
|
||||
*
|
||||
* @package EasyAppointments
|
||||
* @author A.Tselegidis <alextselegidis@gmail.com>
|
||||
* @copyright Copyright (c) Alex Tselegidis
|
||||
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
|
||||
* @link https://easyappointments.org
|
||||
* @since v1.5.0
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
/**
|
||||
* Account HTTP client.
|
||||
*
|
||||
* This module implements the account related HTTP requests.
|
||||
*/
|
||||
App.Http.Account = (function () {
|
||||
/**
|
||||
* Save account.
|
||||
*
|
||||
* @param {Object} account
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
function save(account) {
|
||||
const url = App.Utils.Url.siteUrl('account/save');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
account,
|
||||
};
|
||||
|
||||
return $.post(url, data);
|
||||
}
|
||||
|
||||
/**
|
||||
* Validate username.
|
||||
*
|
||||
* @param {Number} userId
|
||||
* @param {String} username
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
function validateUsername(userId, username) {
|
||||
const url = App.Utils.Url.siteUrl('account/validate_username');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
user_id: userId,
|
||||
username,
|
||||
};
|
||||
|
||||
return $.post(url, data);
|
||||
}
|
||||
|
||||
return {
|
||||
save,
|
||||
validateUsername,
|
||||
};
|
||||
})();
|
||||
133
assets/js/http/admins_http_client.js
Normal file
133
assets/js/http/admins_http_client.js
Normal file
@ -0,0 +1,133 @@
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Easy!Appointments - Online Appointment Scheduler
|
||||
*
|
||||
* @package EasyAppointments
|
||||
* @author A.Tselegidis <alextselegidis@gmail.com>
|
||||
* @copyright Copyright (c) Alex Tselegidis
|
||||
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
|
||||
* @link https://easyappointments.org
|
||||
* @since v1.5.0
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
/**
|
||||
* Admins HTTP client.
|
||||
*
|
||||
* This module implements the admins related HTTP requests.
|
||||
*/
|
||||
App.Http.Admins = (function () {
|
||||
/**
|
||||
* Save (create or update) a admin.
|
||||
*
|
||||
* @param {Object} admin
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
function save(admin) {
|
||||
return admin.id ? update(admin) : store(admin);
|
||||
}
|
||||
|
||||
/**
|
||||
* Create an admin.
|
||||
*
|
||||
* @param {Object} admin
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
function store(admin) {
|
||||
const url = App.Utils.Url.siteUrl('admins/store');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
admin: admin,
|
||||
};
|
||||
|
||||
return $.post(url, data);
|
||||
}
|
||||
|
||||
/**
|
||||
* Update an admin.
|
||||
*
|
||||
* @param {Object} admin
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
function update(admin) {
|
||||
const url = App.Utils.Url.siteUrl('admins/update');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
admin: admin,
|
||||
};
|
||||
|
||||
return $.post(url, data);
|
||||
}
|
||||
|
||||
/**
|
||||
* Delete an admin.
|
||||
*
|
||||
* @param {Number} adminId
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
function destroy(adminId) {
|
||||
const url = App.Utils.Url.siteUrl('admins/destroy');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
admin_id: adminId,
|
||||
};
|
||||
|
||||
return $.post(url, data);
|
||||
}
|
||||
|
||||
/**
|
||||
* Search admins by keyword.
|
||||
*
|
||||
* @param {String} keyword
|
||||
* @param {Number} [limit]
|
||||
* @param {Number} [offset]
|
||||
* @param {String} [orderBy]
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
function search(keyword, limit = null, offset = null, orderBy = null) {
|
||||
const url = App.Utils.Url.siteUrl('admins/search');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
keyword,
|
||||
limit,
|
||||
offset,
|
||||
order_by: orderBy || undefined,
|
||||
};
|
||||
|
||||
return $.post(url, data);
|
||||
}
|
||||
|
||||
/**
|
||||
* Find an admin.
|
||||
*
|
||||
* @param {Number} adminId
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
function find(adminId) {
|
||||
const url = App.Utils.Url.siteUrl('admins/find');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
admin_id: adminId,
|
||||
};
|
||||
|
||||
return $.post(url, data);
|
||||
}
|
||||
|
||||
return {
|
||||
save,
|
||||
store,
|
||||
update,
|
||||
destroy,
|
||||
search,
|
||||
find,
|
||||
};
|
||||
})();
|
||||
39
assets/js/http/api_settings_http_client.js
Normal file
39
assets/js/http/api_settings_http_client.js
Normal file
@ -0,0 +1,39 @@
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Easy!Appointments - Online Appointment Scheduler
|
||||
*
|
||||
* @package EasyAppointments
|
||||
* @author A.Tselegidis <alextselegidis@gmail.com>
|
||||
* @copyright Copyright (c) Alex Tselegidis
|
||||
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
|
||||
* @link https://easyappointments.org
|
||||
* @since v1.5.0
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
/**
|
||||
* API Settings HTTP client.
|
||||
*
|
||||
* This module implements the API settings related HTTP requests.
|
||||
*/
|
||||
App.Http.ApiSettings = (function () {
|
||||
/**
|
||||
* Save API settings.
|
||||
*
|
||||
* @param {Object} apiSettings
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
function save(apiSettings) {
|
||||
const url = App.Utils.Url.siteUrl('api_settings/save');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
api_settings: apiSettings,
|
||||
};
|
||||
|
||||
return $.post(url, data);
|
||||
}
|
||||
|
||||
return {
|
||||
save,
|
||||
};
|
||||
})();
|
||||
133
assets/js/http/appointments_http_client.js
Normal file
133
assets/js/http/appointments_http_client.js
Normal file
@ -0,0 +1,133 @@
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Easy!Appointments - Online Appointment Scheduler
|
||||
*
|
||||
* @package EasyAppointments
|
||||
* @author A.Tselegidis <alextselegidis@gmail.com>
|
||||
* @copyright Copyright (c) Alex Tselegidis
|
||||
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
|
||||
* @link https://easyappointments.org
|
||||
* @since v1.5.0
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
/**
|
||||
* Appointments HTTP client.
|
||||
*
|
||||
* This module implements the appointments related HTTP requests.
|
||||
*/
|
||||
App.Http.Appointments = (function () {
|
||||
/**
|
||||
* Save (create or update) an appointment.
|
||||
*
|
||||
* @param {Object} appointment
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
function save(appointment) {
|
||||
return appointment.id ? update(appointment) : store(appointment);
|
||||
}
|
||||
|
||||
/**
|
||||
* Create an appointment.
|
||||
*
|
||||
* @param {Object} appointment
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
function store(appointment) {
|
||||
const url = App.Utils.Url.siteUrl('appointments/store');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
appointment: appointment,
|
||||
};
|
||||
|
||||
return $.post(url, data);
|
||||
}
|
||||
|
||||
/**
|
||||
* Update an appointment.
|
||||
*
|
||||
* @param {Object} appointment
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
function update(appointment) {
|
||||
const url = App.Utils.Url.siteUrl('appointments/update');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
appointment: appointment,
|
||||
};
|
||||
|
||||
return $.post(url, data);
|
||||
}
|
||||
|
||||
/**
|
||||
* Delete an appointment.
|
||||
*
|
||||
* @param {Number} appointmentId
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
function destroy(appointmentId) {
|
||||
const url = App.Utils.Url.siteUrl('appointments/destroy');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
appointment_id: appointmentId,
|
||||
};
|
||||
|
||||
return $.post(url, data);
|
||||
}
|
||||
|
||||
/**
|
||||
* Search appointments by keyword.
|
||||
*
|
||||
* @param {String} keyword
|
||||
* @param {Number} [limit]
|
||||
* @param {Number} [offset]
|
||||
* @param {String} [orderBy]
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
function search(keyword, limit = null, offset = null, orderBy = null) {
|
||||
const url = App.Utils.Url.siteUrl('appointments/search');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
keyword,
|
||||
limit,
|
||||
offset,
|
||||
order_by: orderBy || undefined,
|
||||
};
|
||||
|
||||
return $.post(url, data);
|
||||
}
|
||||
|
||||
/**
|
||||
* Find an appointment.
|
||||
*
|
||||
* @param {Number} appointmentId
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
function find(appointmentId) {
|
||||
const url = App.Utils.Url.siteUrl('appointments/find');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
appointment_id: appointmentId,
|
||||
};
|
||||
|
||||
return $.post(url, data);
|
||||
}
|
||||
|
||||
return {
|
||||
save,
|
||||
store,
|
||||
update,
|
||||
destroy,
|
||||
search,
|
||||
find,
|
||||
};
|
||||
})();
|
||||
133
assets/js/http/blocked_periods_http_client.js
Normal file
133
assets/js/http/blocked_periods_http_client.js
Normal file
@ -0,0 +1,133 @@
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Easy!Appointments - Online Appointment Scheduler
|
||||
*
|
||||
* @package EasyAppointments
|
||||
* @author A.Tselegidis <alextselegidis@gmail.com>
|
||||
* @copyright Copyright (c) Alex Tselegidis
|
||||
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
|
||||
* @link https://easyappointments.org
|
||||
* @since v1.5.0
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
/**
|
||||
* Blocked-periods HTTP client.
|
||||
*
|
||||
* This module implements the blocked-periods related HTTP requests.
|
||||
*/
|
||||
App.Http.BlockedPeriods = (function () {
|
||||
/**
|
||||
* Save (create or update) a blocked-period.
|
||||
*
|
||||
* @param {Object} blockedPeriod
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
function save(blockedPeriod) {
|
||||
return blockedPeriod.id ? update(blockedPeriod) : store(blockedPeriod);
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a blocked-period.
|
||||
*
|
||||
* @param {Object} blockedPeriod
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
function store(blockedPeriod) {
|
||||
const url = App.Utils.Url.siteUrl('blocked_periods/store');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
blocked_period: blockedPeriod,
|
||||
};
|
||||
|
||||
return $.post(url, data);
|
||||
}
|
||||
|
||||
/**
|
||||
* Update a blocked-period.
|
||||
*
|
||||
* @param {Object} blockedPeriod
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
function update(blockedPeriod) {
|
||||
const url = App.Utils.Url.siteUrl('blocked_periods/update');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
blocked_period: blockedPeriod,
|
||||
};
|
||||
|
||||
return $.post(url, data);
|
||||
}
|
||||
|
||||
/**
|
||||
* Delete a blocked-period.
|
||||
*
|
||||
* @param {Number} blockedPeriodId
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
function destroy(blockedPeriodId) {
|
||||
const url = App.Utils.Url.siteUrl('blocked_periods/destroy');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
blocked_period_id: blockedPeriodId,
|
||||
};
|
||||
|
||||
return $.post(url, data);
|
||||
}
|
||||
|
||||
/**
|
||||
* Search blocked-periods by keyword.
|
||||
*
|
||||
* @param {String} keyword
|
||||
* @param {Number} [limit]
|
||||
* @param {Number} [offset]
|
||||
* @param {String} [orderBy]
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
function search(keyword, limit = null, offset = null, orderBy = null) {
|
||||
const url = App.Utils.Url.siteUrl('blocked_periods/search');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
keyword,
|
||||
limit,
|
||||
offset,
|
||||
order_by: orderBy || undefined,
|
||||
};
|
||||
|
||||
return $.post(url, data);
|
||||
}
|
||||
|
||||
/**
|
||||
* Find a blocked-period.
|
||||
*
|
||||
* @param {Number} blockedPeriodId
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
function find(blockedPeriodId) {
|
||||
const url = App.Utils.Url.siteUrl('blocked_periods/find');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
blocked_period_id: blockedPeriodId,
|
||||
};
|
||||
|
||||
return $.post(url, data);
|
||||
}
|
||||
|
||||
return {
|
||||
save,
|
||||
store,
|
||||
update,
|
||||
destroy,
|
||||
search,
|
||||
find,
|
||||
};
|
||||
})();
|
||||
400
assets/js/http/booking_http_client.js
Normal file
400
assets/js/http/booking_http_client.js
Normal file
@ -0,0 +1,400 @@
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Easy!Appointments - Online Appointment Scheduler
|
||||
*
|
||||
* @package EasyAppointments
|
||||
* @author A.Tselegidis <alextselegidis@gmail.com>
|
||||
* @copyright Copyright (c) Alex Tselegidis
|
||||
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
|
||||
* @link https://easyappointments.org
|
||||
* @since v1.5.0
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
/**
|
||||
* Booking HTTP client.
|
||||
*
|
||||
* This module implements the booking related HTTP requests.
|
||||
*
|
||||
* Old Name: FrontendBookApi
|
||||
*/
|
||||
App.Http.Booking = (function () {
|
||||
const $selectDate = $('#select-date');
|
||||
const $selectService = $('#select-service');
|
||||
const $selectProvider = $('#select-provider');
|
||||
const $availableHours = $('#available-hours');
|
||||
const $captchaHint = $('#captcha-hint');
|
||||
const $captchaTitle = $('.captcha-title');
|
||||
|
||||
const MONTH_SEARCH_LIMIT = 2; // Months in the future
|
||||
|
||||
const moment = window.moment;
|
||||
|
||||
let unavailableDatesBackup;
|
||||
let selectedDateStringBackup;
|
||||
let processingUnavailableDates = false;
|
||||
let searchedMonthStart;
|
||||
let searchedMonthCounter = 0;
|
||||
|
||||
/**
|
||||
* Get Available Hours
|
||||
*
|
||||
* This function makes an AJAX call and returns the available hours for the selected service,
|
||||
* provider and date.
|
||||
*
|
||||
* @param {String} selectedDate The selected date of the available hours we need.
|
||||
*/
|
||||
function getAvailableHours(selectedDate) {
|
||||
$availableHours.empty();
|
||||
|
||||
// Find the selected service duration (it is going to be send within the "data" object).
|
||||
const serviceId = $selectService.val();
|
||||
|
||||
// Default value of duration (in minutes).
|
||||
let serviceDuration = 15;
|
||||
|
||||
const service = vars('available_services').find(
|
||||
(availableService) => Number(availableService.id) === Number(serviceId),
|
||||
);
|
||||
|
||||
if (service) {
|
||||
serviceDuration = service.duration;
|
||||
}
|
||||
|
||||
// If the manage mode is true then the appointment's start date should return as available too.
|
||||
const appointmentId = vars('manage_mode') ? vars('appointment_data').id : null;
|
||||
|
||||
// Make ajax post request and get the available hours.
|
||||
const url = App.Utils.Url.siteUrl('booking/get_available_hours');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
service_id: $selectService.val(),
|
||||
provider_id: $selectProvider.val(),
|
||||
selected_date: selectedDate,
|
||||
service_duration: serviceDuration,
|
||||
manage_mode: Number(vars('manage_mode') || 0),
|
||||
appointment_id: appointmentId,
|
||||
};
|
||||
|
||||
$.post(url, data).done((response) => {
|
||||
$availableHours.empty();
|
||||
|
||||
// The response contains the available hours for the selected provider and service. Fill the available
|
||||
// hours div with response data.
|
||||
if (response.length > 0) {
|
||||
let providerId = $selectProvider.val();
|
||||
|
||||
if (providerId === 'any-provider') {
|
||||
for (const availableProvider of vars('available_providers')) {
|
||||
if (availableProvider.services.indexOf(Number(serviceId)) !== -1) {
|
||||
providerId = availableProvider.id; // Use first available provider.
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const provider = vars('available_providers').find(
|
||||
(availableProvider) => Number(providerId) === Number(availableProvider.id),
|
||||
);
|
||||
|
||||
if (!provider) {
|
||||
throw new Error('Could not find provider.');
|
||||
}
|
||||
|
||||
const providerTimezone = provider.timezone;
|
||||
const selectedTimezone = $('#select-timezone').val();
|
||||
const timeFormat = vars('time_format') === 'regular' ? 'h:mm a' : 'HH:mm';
|
||||
|
||||
response.forEach((availableHour) => {
|
||||
const availableHourMoment = moment
|
||||
.tz(selectedDate + ' ' + availableHour + ':00', providerTimezone)
|
||||
.tz(selectedTimezone);
|
||||
|
||||
if (availableHourMoment.format('YYYY-MM-DD') !== selectedDate) {
|
||||
return; // Due to the selected timezone the available hour belongs to another date.
|
||||
}
|
||||
|
||||
$availableHours.append(
|
||||
$('<button/>', {
|
||||
'class': 'btn btn-outline-secondary w-100 shadow-none available-hour',
|
||||
'data': {
|
||||
'value': availableHour,
|
||||
},
|
||||
'text': availableHourMoment.format(timeFormat),
|
||||
}),
|
||||
);
|
||||
});
|
||||
|
||||
if (App.Pages.Booking.manageMode) {
|
||||
// Set the appointment's start time as the default selection.
|
||||
$('.available-hour')
|
||||
.removeClass('selected-hour')
|
||||
.filter(
|
||||
(index, availableHourEl) =>
|
||||
$(availableHourEl).text() ===
|
||||
moment(vars('appointment_data').start_datetime).format(timeFormat),
|
||||
)
|
||||
.addClass('selected-hour');
|
||||
} else {
|
||||
// Set the first available hour as the default selection.
|
||||
$('.available-hour:eq(0)').addClass('selected-hour');
|
||||
}
|
||||
|
||||
App.Pages.Booking.updateConfirmFrame();
|
||||
}
|
||||
|
||||
if (!$availableHours.find('.available-hour').length) {
|
||||
$availableHours.text(lang('no_available_hours'));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Register an appointment to the database.
|
||||
*
|
||||
* This method will make an ajax call to the appointments controller that will register
|
||||
* the appointment to the database.
|
||||
*/
|
||||
function registerAppointment() {
|
||||
const $captchaText = $('.captcha-text');
|
||||
|
||||
if ($captchaText.length > 0) {
|
||||
$captchaText.removeClass('is-invalid');
|
||||
if ($captchaText.val() === '') {
|
||||
$captchaText.addClass('is-invalid');
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const formData = JSON.parse($('input[name="post_data"]').val());
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
post_data: formData,
|
||||
};
|
||||
|
||||
if ($captchaText.length > 0) {
|
||||
data.captcha = $captchaText.val();
|
||||
}
|
||||
|
||||
if (vars('manage_mode')) {
|
||||
data.exclude_appointment_id = vars('appointment_data').id;
|
||||
}
|
||||
|
||||
const url = App.Utils.Url.siteUrl('booking/register');
|
||||
|
||||
const $layer = $('<div/>');
|
||||
|
||||
$.ajax({
|
||||
url: url,
|
||||
method: 'post',
|
||||
data: data,
|
||||
dataType: 'json',
|
||||
beforeSend: () => {
|
||||
$layer.appendTo('body').css({
|
||||
background: 'white',
|
||||
position: 'fixed',
|
||||
top: '0',
|
||||
left: '0',
|
||||
height: '100vh',
|
||||
width: '100vw',
|
||||
opacity: '0.5',
|
||||
});
|
||||
},
|
||||
})
|
||||
.done((response) => {
|
||||
if (response.captcha_verification === false) {
|
||||
$captchaHint.text(lang('captcha_is_wrong')).fadeTo(400, 1);
|
||||
|
||||
setTimeout(() => {
|
||||
$captchaHint.fadeTo(400, 0);
|
||||
}, 3000);
|
||||
|
||||
$captchaTitle.find('button').trigger('click');
|
||||
|
||||
$captchaText.addClass('is-invalid');
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
window.location.href = App.Utils.Url.siteUrl('booking_confirmation/of/' + response.appointment_hash);
|
||||
})
|
||||
.fail(() => {
|
||||
$captchaTitle.find('button').trigger('click');
|
||||
})
|
||||
.always(() => {
|
||||
$layer.remove();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the unavailable dates of a provider.
|
||||
*
|
||||
* This method will fetch the unavailable dates of the selected provider and service and then it will
|
||||
* select the first available date (if any). It uses the "FrontendBookApi.getAvailableHours" method to
|
||||
* fetch the appointment* hours of the selected date.
|
||||
*
|
||||
* @param {Number} providerId The selected provider ID.
|
||||
* @param {Number} serviceId The selected service ID.
|
||||
* @param {String} selectedDateString Y-m-d value of the selected date.
|
||||
* @param {Number} [monthChangeStep] Whether to add or subtract months.
|
||||
*/
|
||||
function getUnavailableDates(providerId, serviceId, selectedDateString, monthChangeStep = 1) {
|
||||
if (processingUnavailableDates) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!providerId || !serviceId) {
|
||||
return;
|
||||
}
|
||||
|
||||
const appointmentId = App.Pages.Booking.manageMode ? vars('appointment_data').id : null;
|
||||
|
||||
const url = App.Utils.Url.siteUrl('booking/get_unavailable_dates');
|
||||
|
||||
const data = {
|
||||
provider_id: providerId,
|
||||
service_id: serviceId,
|
||||
selected_date: encodeURIComponent(selectedDateString),
|
||||
csrf_token: vars('csrf_token'),
|
||||
manage_mode: Number(App.Pages.Booking.manageMode),
|
||||
appointment_id: appointmentId,
|
||||
};
|
||||
|
||||
$.ajax({
|
||||
url: url,
|
||||
type: 'GET',
|
||||
data: data,
|
||||
dataType: 'json',
|
||||
})
|
||||
.done((response) => {
|
||||
// In case the current month has no availability, the app will try the next one or the one after in order to
|
||||
// find a date that has at least one slot
|
||||
|
||||
if (response.is_month_unavailable) {
|
||||
if (!searchedMonthStart) {
|
||||
searchedMonthStart = selectedDateString;
|
||||
}
|
||||
|
||||
if (searchedMonthCounter >= MONTH_SEARCH_LIMIT) {
|
||||
// Need to mark the current month dates as unavailable
|
||||
const selectedDateMoment = moment(searchedMonthStart);
|
||||
const startOfMonthMoment = selectedDateMoment.clone().startOf('month');
|
||||
const endOfMonthMoment = selectedDateMoment.clone().endOf('month');
|
||||
const unavailableDates = [];
|
||||
|
||||
while (startOfMonthMoment.isSameOrBefore(endOfMonthMoment)) {
|
||||
unavailableDates.push(startOfMonthMoment.format('YYYY-MM-DD'));
|
||||
startOfMonthMoment.add(Math.abs(monthChangeStep), 'days'); // Move to the next day
|
||||
}
|
||||
|
||||
applyUnavailableDates(unavailableDates, searchedMonthStart, true);
|
||||
searchedMonthStart = undefined;
|
||||
searchedMonthCounter = 0;
|
||||
|
||||
return; // Stop searching
|
||||
}
|
||||
|
||||
searchedMonthCounter++;
|
||||
|
||||
const selectedDateMoment = moment(selectedDateString);
|
||||
selectedDateMoment.add(1, 'month');
|
||||
|
||||
const nextSelectedDate = selectedDateMoment.format('YYYY-MM-DD');
|
||||
getUnavailableDates(providerId, serviceId, nextSelectedDate, monthChangeStep);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
unavailableDatesBackup = response;
|
||||
selectedDateStringBackup = selectedDateString;
|
||||
applyUnavailableDates(response, selectedDateString, true);
|
||||
})
|
||||
.fail(() => {
|
||||
$selectDate.parent().fadeTo(400, 1);
|
||||
});
|
||||
}
|
||||
|
||||
function applyPreviousUnavailableDates() {
|
||||
applyUnavailableDates(unavailableDatesBackup, selectedDateStringBackup);
|
||||
}
|
||||
|
||||
function applyUnavailableDates(unavailableDates, selectedDateString, setDate) {
|
||||
setDate = setDate || false;
|
||||
|
||||
$selectDate.parent().fadeTo(400, 1);
|
||||
|
||||
processingUnavailableDates = true;
|
||||
|
||||
// Select first enabled date.
|
||||
const selectedDateMoment = moment(selectedDateString);
|
||||
const selectedDate = selectedDateMoment.toDate();
|
||||
const numberOfDays = selectedDateMoment.daysInMonth();
|
||||
|
||||
// If all the days are unavailable then hide the appointments hours.
|
||||
if (unavailableDates.length === numberOfDays) {
|
||||
$availableHours.text(lang('no_available_hours'));
|
||||
}
|
||||
|
||||
// Grey out unavailable dates.
|
||||
$selectDate[0]._flatpickr.set(
|
||||
'disable',
|
||||
unavailableDates.map((unavailableDate) => new Date(unavailableDate + 'T00:00')),
|
||||
);
|
||||
|
||||
if (setDate && !vars('manage_mode')) {
|
||||
for (let i = 1; i <= numberOfDays; i++) {
|
||||
const currentDate = new Date(selectedDate.getFullYear(), selectedDate.getMonth(), i);
|
||||
|
||||
if (unavailableDates.indexOf(moment(currentDate).format('YYYY-MM-DD')) === -1) {
|
||||
App.Utils.UI.setDateTimePickerValue($selectDate, currentDate);
|
||||
getAvailableHours(moment(currentDate).format('YYYY-MM-DD'));
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const dateQueryParam = App.Utils.Url.queryParam('date');
|
||||
|
||||
if (dateQueryParam) {
|
||||
const dateQueryParamMoment = moment(dateQueryParam);
|
||||
|
||||
if (
|
||||
dateQueryParamMoment.isValid() &&
|
||||
!unavailableDates.includes(dateQueryParam) &&
|
||||
dateQueryParamMoment.format('YYYY-MM') === selectedDateMoment.format('YYYY-MM')
|
||||
) {
|
||||
App.Utils.UI.setDateTimePickerValue($selectDate, dateQueryParamMoment.toDate());
|
||||
}
|
||||
}
|
||||
|
||||
searchedMonthStart = undefined;
|
||||
searchedMonthCounter = 0;
|
||||
processingUnavailableDates = false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Delete personal information.
|
||||
*
|
||||
* @param {Number} customerToken Customer unique token.
|
||||
*/
|
||||
function deletePersonalInformation(customerToken) {
|
||||
const url = App.Utils.Url.siteUrl('privacy/delete_personal_information');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
customer_token: customerToken,
|
||||
};
|
||||
|
||||
$.post(url, data).done(() => {
|
||||
window.location.href = vars('base_url');
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
registerAppointment,
|
||||
getAvailableHours,
|
||||
getUnavailableDates,
|
||||
applyPreviousUnavailableDates,
|
||||
deletePersonalInformation,
|
||||
};
|
||||
})();
|
||||
39
assets/js/http/booking_settings_http_client.js
Normal file
39
assets/js/http/booking_settings_http_client.js
Normal file
@ -0,0 +1,39 @@
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Easy!Appointments - Online Appointment Scheduler
|
||||
*
|
||||
* @package EasyAppointments
|
||||
* @author A.Tselegidis <alextselegidis@gmail.com>
|
||||
* @copyright Copyright (c) Alex Tselegidis
|
||||
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
|
||||
* @link https://easyappointments.org
|
||||
* @since v1.5.0
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
/**
|
||||
* Booking Settings HTTP client.
|
||||
*
|
||||
* This module implements the booking settings related HTTP requests.
|
||||
*/
|
||||
App.Http.BookingSettings = (function () {
|
||||
/**
|
||||
* Save booking settings.
|
||||
*
|
||||
* @param {Object} bookingSettings
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
function save(bookingSettings) {
|
||||
const url = App.Utils.Url.siteUrl('booking_settings/save');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
booking_settings: bookingSettings,
|
||||
};
|
||||
|
||||
return $.post(url, data);
|
||||
}
|
||||
|
||||
return {
|
||||
save,
|
||||
};
|
||||
})();
|
||||
58
assets/js/http/business_settings_http_client.js
Normal file
58
assets/js/http/business_settings_http_client.js
Normal file
@ -0,0 +1,58 @@
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Easy!Appointments - Online Appointment Scheduler
|
||||
*
|
||||
* @package EasyAppointments
|
||||
* @author A.Tselegidis <alextselegidis@gmail.com>
|
||||
* @copyright Copyright (c) Alex Tselegidis
|
||||
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
|
||||
* @link https://easyappointments.org
|
||||
* @since v1.5.0
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
/**
|
||||
* Business Settings HTTP client.
|
||||
*
|
||||
* This module implements the business settings related HTTP requests.
|
||||
*/
|
||||
App.Http.BusinessSettings = (function () {
|
||||
/**
|
||||
* Save business settings.
|
||||
*
|
||||
* @param {Object} businessSettings
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
function save(businessSettings) {
|
||||
const url = App.Utils.Url.siteUrl('business_settings/save');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
business_settings: businessSettings,
|
||||
};
|
||||
|
||||
return $.post(url, data);
|
||||
}
|
||||
|
||||
/**
|
||||
* Apply global working plan.
|
||||
*
|
||||
* @param {Object} workingPlan
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
function applyGlobalWorkingPlan(workingPlan) {
|
||||
const url = App.Utils.Url.siteUrl('business_settings/apply_global_working_plan');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
working_plan: JSON.stringify(workingPlan),
|
||||
};
|
||||
|
||||
return $.post(url, data);
|
||||
}
|
||||
|
||||
return {
|
||||
save,
|
||||
applyGlobalWorkingPlan,
|
||||
};
|
||||
})();
|
||||
108
assets/js/http/caldav_http_client.js
Normal file
108
assets/js/http/caldav_http_client.js
Normal file
@ -0,0 +1,108 @@
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Easy!Appointments - Online Appointment Scheduler
|
||||
*
|
||||
* @package EasyAppointments
|
||||
* @author A.Tselegidis <alextselegidis@gmail.com>
|
||||
* @copyright Copyright (c) Alex Tselegidis
|
||||
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
|
||||
* @link https://easyappointments.org
|
||||
* @since v1.5.0
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
/**
|
||||
* Caldav HTTP client.
|
||||
*
|
||||
* This module implements the Caldav Calendar related HTTP requests.
|
||||
*/
|
||||
App.Http.Caldav = (function () {
|
||||
/**
|
||||
* Select the Caldav Calendar for the synchronization with a provider.
|
||||
*
|
||||
* @param {Number} providerId
|
||||
* @param {String} caldavCalendarId
|
||||
*
|
||||
* @return {*|jQuery}
|
||||
*/
|
||||
function selectCaldavCalendar(providerId, caldavCalendarId) {
|
||||
const url = App.Utils.Url.siteUrl('caldav/select_caldav_calendar');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
provider_id: providerId,
|
||||
calendar_id: caldavCalendarId,
|
||||
};
|
||||
|
||||
return $.post(url, data);
|
||||
}
|
||||
|
||||
/**
|
||||
* Disable the Caldav Calendar syncing of a provider.
|
||||
*
|
||||
* @param {Number} providerId
|
||||
*
|
||||
* @return {*|jQuery}
|
||||
*/
|
||||
function disableProviderSync(providerId) {
|
||||
const url = App.Utils.Url.siteUrl('caldav/disable_provider_sync');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
provider_id: providerId,
|
||||
};
|
||||
|
||||
return $.post(url, data);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the available Caldav Calendars of the connected provider's account.
|
||||
*
|
||||
* @param {Number} providerId
|
||||
*
|
||||
* @return {*|jQuery}
|
||||
*/
|
||||
function getCaldavCalendars(providerId) {
|
||||
const url = App.Utils.Url.siteUrl('caldav/get_caldav_calendars');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
provider_id: providerId,
|
||||
};
|
||||
|
||||
return $.post(url, data);
|
||||
}
|
||||
|
||||
/**
|
||||
* Trigger the sync process between Easy!Appointments and Caldav Calendar.
|
||||
*
|
||||
* @param {Number} providerId
|
||||
*
|
||||
* @return {*|jQuery}
|
||||
*/
|
||||
function syncWithCaldav(providerId) {
|
||||
const url = App.Utils.Url.siteUrl('caldav/sync/' + providerId);
|
||||
|
||||
return $.get(url);
|
||||
}
|
||||
|
||||
function connectToServer(providerId, caldavUrl, caldavUsername, caldavPassword) {
|
||||
const url = App.Utils.Url.siteUrl('caldav/connect_to_server');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
provider_id: providerId,
|
||||
caldav_url: caldavUrl,
|
||||
caldav_username: caldavUsername,
|
||||
caldav_password: caldavPassword,
|
||||
};
|
||||
|
||||
return $.post(url, data);
|
||||
}
|
||||
|
||||
return {
|
||||
getCaldavCalendars,
|
||||
selectCaldavCalendar,
|
||||
disableProviderSync,
|
||||
syncWithCaldav,
|
||||
connectToServer,
|
||||
};
|
||||
})();
|
||||
255
assets/js/http/calendar_http_client.js
Normal file
255
assets/js/http/calendar_http_client.js
Normal file
@ -0,0 +1,255 @@
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Easy!Appointments - Online Appointment Scheduler
|
||||
*
|
||||
* @package EasyAppointments
|
||||
* @author A.Tselegidis <alextselegidis@gmail.com>
|
||||
* @copyright Copyright (c) Alex Tselegidis
|
||||
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
|
||||
* @link https://easyappointments.org
|
||||
* @since v1.5.0
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
/**
|
||||
* Calendar HTTP client.
|
||||
*
|
||||
* This module implements the calendar related HTTP requests.
|
||||
*
|
||||
* Old Name: BackendCalendarApi
|
||||
*/
|
||||
App.Http.Calendar = (function () {
|
||||
/**
|
||||
* Save Appointment
|
||||
*
|
||||
* This method stores the changes of an already registered appointment into the database, via an ajax call.
|
||||
*
|
||||
* @param {Object} appointment Contain the new appointment data. The ID of the appointment must be already included.
|
||||
* The rest values must follow the database structure.
|
||||
* @param {Object} [customer] Optional, contains the customer data.
|
||||
* @param {Function} [successCallback] Optional, if defined, this function is going to be executed on post success.
|
||||
* @param {Function} [errorCallback] Optional, if defined, this function is going to be executed on post failure.
|
||||
*
|
||||
* @return {*|jQuery}
|
||||
*/
|
||||
function saveAppointment(appointment, customer, successCallback, errorCallback) {
|
||||
const url = App.Utils.Url.siteUrl('calendar/save_appointment');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
appointment_data: appointment,
|
||||
};
|
||||
|
||||
if (customer) {
|
||||
data.customer_data = customer;
|
||||
}
|
||||
|
||||
return $.post(url, data)
|
||||
.done((response) => {
|
||||
if (successCallback) {
|
||||
successCallback(response);
|
||||
}
|
||||
})
|
||||
.fail(() => {
|
||||
if (errorCallback) {
|
||||
errorCallback();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove an appointment.
|
||||
*
|
||||
* @param {Number} appointmentId
|
||||
* @param {String} cancellationReason
|
||||
*
|
||||
* @return {*|jQuery}
|
||||
*/
|
||||
function deleteAppointment(appointmentId, cancellationReason) {
|
||||
const url = App.Utils.Url.siteUrl('calendar/delete_appointment');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
appointment_id: appointmentId,
|
||||
cancellation_reason: cancellationReason,
|
||||
};
|
||||
|
||||
return $.post(url, data);
|
||||
}
|
||||
|
||||
/**
|
||||
* Save unavailability period to database.
|
||||
*
|
||||
* @param {Object} unavailability Contains the unavailability period data.
|
||||
* @param {Function} [successCallback] The ajax success callback function.
|
||||
* @param {Function} [errorCallback] The ajax failure callback function.
|
||||
*
|
||||
* @return {*|jQuery}
|
||||
*/
|
||||
function saveUnavailability(unavailability, successCallback, errorCallback) {
|
||||
const url = App.Utils.Url.siteUrl('calendar/save_unavailability');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
unavailability: unavailability,
|
||||
};
|
||||
|
||||
return $.post(url, data)
|
||||
.done((response) => {
|
||||
if (successCallback) {
|
||||
successCallback(response);
|
||||
}
|
||||
})
|
||||
.fail(() => {
|
||||
if (errorCallback) {
|
||||
errorCallback();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove an unavailability.
|
||||
*
|
||||
* @param {Number} unavailabilityId
|
||||
*
|
||||
* @return {*|jQuery}
|
||||
*/
|
||||
function deleteUnavailability(unavailabilityId) {
|
||||
const url = App.Utils.Url.siteUrl('calendar/delete_unavailability');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
unavailability_id: unavailabilityId,
|
||||
};
|
||||
|
||||
return $.post(url, data);
|
||||
}
|
||||
|
||||
/**
|
||||
* Save working plan exception of work to database.
|
||||
*
|
||||
* @param {Date} date Contains the working plan exceptions data.
|
||||
* @param {Object} workingPlanException Contains the working plan exceptions data.
|
||||
* @param {Number} providerId Contains the working plan exceptions data.
|
||||
* @param {Function} successCallback The ajax success callback function.
|
||||
* @param {Function} errorCallback The ajax failure callback function.
|
||||
* @param {Date} [originalDate] On edit, provide the original date.
|
||||
*
|
||||
* @return {*|jQuery}
|
||||
*/
|
||||
function saveWorkingPlanException(
|
||||
date,
|
||||
workingPlanException,
|
||||
providerId,
|
||||
successCallback,
|
||||
errorCallback,
|
||||
originalDate,
|
||||
) {
|
||||
const url = App.Utils.Url.siteUrl('calendar/save_working_plan_exception');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
date: date,
|
||||
working_plan_exception: workingPlanException,
|
||||
provider_id: providerId,
|
||||
original_date: originalDate,
|
||||
};
|
||||
|
||||
return $.post(url, data)
|
||||
.done((response) => {
|
||||
if (successCallback) {
|
||||
successCallback(response);
|
||||
}
|
||||
})
|
||||
.fail(() => {
|
||||
if (errorCallback) {
|
||||
errorCallback();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Delete working plan exception
|
||||
*
|
||||
* @param {String} date
|
||||
* @param {Number} providerId
|
||||
* @param {Function} [successCallback]
|
||||
* @param {Function} [errorCallback]
|
||||
*
|
||||
* @return {*|jQuery}
|
||||
*/
|
||||
function deleteWorkingPlanException(date, providerId, successCallback, errorCallback) {
|
||||
const url = App.Utils.Url.siteUrl('calendar/delete_working_plan_exception');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
date: date,
|
||||
provider_id: providerId,
|
||||
};
|
||||
|
||||
return $.post(url, data)
|
||||
.done((response) => {
|
||||
if (successCallback) {
|
||||
successCallback(response);
|
||||
}
|
||||
})
|
||||
.fail(() => {
|
||||
if (errorCallback) {
|
||||
errorCallback();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the appointments for the displayed calendar period.
|
||||
*
|
||||
* @param {Number} recordId Record ID (provider or service).
|
||||
* @param {String} filterType The filter type, could be either "provider" or "service".
|
||||
* @param {String} startDate Visible start date of the calendar.
|
||||
* @param {String} endDate Visible end date of the calendar.
|
||||
*
|
||||
* @returns {jQuery.jqXHR}
|
||||
*/
|
||||
function getCalendarAppointments(recordId, startDate, endDate, filterType) {
|
||||
const url = App.Utils.Url.siteUrl('calendar/get_calendar_appointments');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
record_id: recordId,
|
||||
start_date: moment(startDate).format('YYYY-MM-DD'),
|
||||
end_date: moment(endDate).format('YYYY-MM-DD'),
|
||||
filter_type: filterType,
|
||||
};
|
||||
|
||||
return $.post(url, data);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the calendar appointments for the table view (different data structure).
|
||||
*
|
||||
* @param {Date} startDate
|
||||
* @param {Date} endDate
|
||||
*
|
||||
* @return {*|jQuery}
|
||||
*/
|
||||
function getCalendarAppointmentsForTableView(startDate, endDate) {
|
||||
const url = App.Utils.Url.siteUrl('calendar/get_calendar_appointments_for_table_view');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
start_date: moment(startDate).format('YYYY-MM-DD'),
|
||||
end_date: moment(endDate).format('YYYY-MM-DD'),
|
||||
};
|
||||
|
||||
return $.post(url, data);
|
||||
}
|
||||
|
||||
return {
|
||||
saveAppointment,
|
||||
deleteAppointment,
|
||||
saveUnavailability,
|
||||
deleteUnavailability,
|
||||
saveWorkingPlanException,
|
||||
deleteWorkingPlanException,
|
||||
getCalendarAppointments,
|
||||
getCalendarAppointmentsForTableView,
|
||||
};
|
||||
})();
|
||||
133
assets/js/http/customers_http_client.js
Normal file
133
assets/js/http/customers_http_client.js
Normal file
@ -0,0 +1,133 @@
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Easy!Appointments - Online Appointment Scheduler
|
||||
*
|
||||
* @package EasyAppointments
|
||||
* @author A.Tselegidis <alextselegidis@gmail.com>
|
||||
* @copyright Copyright (c) Alex Tselegidis
|
||||
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
|
||||
* @link https://easyappointments.org
|
||||
* @since v1.5.0
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
/**
|
||||
* Customers HTTP client.
|
||||
*
|
||||
* This module implements the customers related HTTP requests.
|
||||
*/
|
||||
App.Http.Customers = (function () {
|
||||
/**
|
||||
* Save (create or update) a customer.
|
||||
*
|
||||
* @param {Object} customer
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
function save(customer) {
|
||||
return customer.id ? update(customer) : store(customer);
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a customer.
|
||||
*
|
||||
* @param {Object} customer
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
function store(customer) {
|
||||
const url = App.Utils.Url.siteUrl('customers/store');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
customer: customer,
|
||||
};
|
||||
|
||||
return $.post(url, data);
|
||||
}
|
||||
|
||||
/**
|
||||
* Update a customer.
|
||||
*
|
||||
* @param {Object} customer
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
function update(customer) {
|
||||
const url = App.Utils.Url.siteUrl('customers/update');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
customer: customer,
|
||||
};
|
||||
|
||||
return $.post(url, data);
|
||||
}
|
||||
|
||||
/**
|
||||
* Delete a customer.
|
||||
*
|
||||
* @param {Number} customerId
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
function destroy(customerId) {
|
||||
const url = App.Utils.Url.siteUrl('customers/destroy');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
customer_id: customerId,
|
||||
};
|
||||
|
||||
return $.post(url, data);
|
||||
}
|
||||
|
||||
/**
|
||||
* Search customers by keyword.
|
||||
*
|
||||
* @param {String} keyword
|
||||
* @param {Number} [limit]
|
||||
* @param {Number} [offset]
|
||||
* @param {String} [orderBy]
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
function search(keyword, limit = null, offset = null, orderBy = null) {
|
||||
const url = App.Utils.Url.siteUrl('customers/search');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
keyword,
|
||||
limit,
|
||||
offset,
|
||||
order_by: orderBy || undefined,
|
||||
};
|
||||
|
||||
return $.post(url, data);
|
||||
}
|
||||
|
||||
/**
|
||||
* Find a customer.
|
||||
*
|
||||
* @param {Number} customerId
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
function find(customerId) {
|
||||
const url = App.Utils.Url.siteUrl('customers/find');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
customer_id: customerId,
|
||||
};
|
||||
|
||||
return $.post(url, data);
|
||||
}
|
||||
|
||||
return {
|
||||
save,
|
||||
store,
|
||||
update,
|
||||
destroy,
|
||||
search,
|
||||
find,
|
||||
};
|
||||
})();
|
||||
39
assets/js/http/general_settings_http_client.js
Normal file
39
assets/js/http/general_settings_http_client.js
Normal file
@ -0,0 +1,39 @@
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Easy!Appointments - Online Appointment Scheduler
|
||||
*
|
||||
* @package EasyAppointments
|
||||
* @author A.Tselegidis <alextselegidis@gmail.com>
|
||||
* @copyright Copyright (c) Alex Tselegidis
|
||||
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
|
||||
* @link https://easyappointments.org
|
||||
* @since v1.5.0
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
/**
|
||||
* General Settings HTTP client.
|
||||
*
|
||||
* This module implements the general settings related HTTP requests.
|
||||
*/
|
||||
App.Http.GeneralSettings = (function () {
|
||||
/**
|
||||
* Save general settings.
|
||||
*
|
||||
* @param {Object} generalSettings
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
function save(generalSettings) {
|
||||
const url = App.Utils.Url.siteUrl('general_settings/save');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
general_settings: generalSettings,
|
||||
};
|
||||
|
||||
return $.post(url, data);
|
||||
}
|
||||
|
||||
return {
|
||||
save,
|
||||
};
|
||||
})();
|
||||
39
assets/js/http/google_analytics_settings_http_client.js
Normal file
39
assets/js/http/google_analytics_settings_http_client.js
Normal file
@ -0,0 +1,39 @@
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Easy!Appointments - Online Appointment Scheduler
|
||||
*
|
||||
* @package EasyAppointments
|
||||
* @author A.Tselegidis <alextselegidis@gmail.com>
|
||||
* @copyright Copyright (c) Alex Tselegidis
|
||||
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
|
||||
* @link https://easyappointments.org
|
||||
* @since v1.5.0
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
/**
|
||||
* Google Analytics Settings HTTP client.
|
||||
*
|
||||
* This module implements the Google Analytics settings related HTTP requests.
|
||||
*/
|
||||
App.Http.GoogleAnalyticsSettings = (function () {
|
||||
/**
|
||||
* Save Google Analytics settings.
|
||||
*
|
||||
* @param {Object} googleAnalyticsSettings
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
function save(googleAnalyticsSettings) {
|
||||
const url = App.Utils.Url.siteUrl('google_analytics_settings/save');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
google_analytics_settings: googleAnalyticsSettings,
|
||||
};
|
||||
|
||||
return $.post(url, data);
|
||||
}
|
||||
|
||||
return {
|
||||
save,
|
||||
};
|
||||
})();
|
||||
93
assets/js/http/google_http_client.js
Normal file
93
assets/js/http/google_http_client.js
Normal file
@ -0,0 +1,93 @@
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Easy!Appointments - Online Appointment Scheduler
|
||||
*
|
||||
* @package EasyAppointments
|
||||
* @author A.Tselegidis <alextselegidis@gmail.com>
|
||||
* @copyright Copyright (c) Alex Tselegidis
|
||||
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
|
||||
* @link https://easyappointments.org
|
||||
* @since v1.5.0
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
/**
|
||||
* Google HTTP client.
|
||||
*
|
||||
* This module implements the Google Calendar related HTTP requests.
|
||||
*/
|
||||
App.Http.Google = (function () {
|
||||
/**
|
||||
* Select the Google Calendar for the synchronization with a provider.
|
||||
*
|
||||
* @param {Number} providerId
|
||||
* @param {String} googleCalendarId
|
||||
*
|
||||
* @return {*|jQuery}
|
||||
*/
|
||||
function selectGoogleCalendar(providerId, googleCalendarId) {
|
||||
const url = App.Utils.Url.siteUrl('google/select_google_calendar');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
provider_id: providerId,
|
||||
calendar_id: googleCalendarId,
|
||||
};
|
||||
|
||||
return $.post(url, data);
|
||||
}
|
||||
|
||||
/**
|
||||
* Disable the Google Calendar syncing of a provider.
|
||||
*
|
||||
* @param {Number} providerId
|
||||
*
|
||||
* @return {*|jQuery}
|
||||
*/
|
||||
function disableProviderSync(providerId) {
|
||||
const url = App.Utils.Url.siteUrl('google/disable_provider_sync');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
provider_id: providerId,
|
||||
};
|
||||
|
||||
return $.post(url, data);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the available Google Calendars of the connected provider's account.
|
||||
*
|
||||
* @param {Number} providerId
|
||||
*
|
||||
* @return {*|jQuery}
|
||||
*/
|
||||
function getGoogleCalendars(providerId) {
|
||||
const url = App.Utils.Url.siteUrl('google/get_google_calendars');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
provider_id: providerId,
|
||||
};
|
||||
|
||||
return $.post(url, data);
|
||||
}
|
||||
|
||||
/**
|
||||
* Trigger the sync process between Easy!Appointments and Google Calendar.
|
||||
*
|
||||
* @param {Number} providerId
|
||||
*
|
||||
* @return {*|jQuery}
|
||||
*/
|
||||
function syncWithGoogle(providerId) {
|
||||
const url = App.Utils.Url.siteUrl('google/sync/' + providerId);
|
||||
|
||||
return $.get(url);
|
||||
}
|
||||
|
||||
return {
|
||||
getGoogleCalendars,
|
||||
selectGoogleCalendar,
|
||||
disableProviderSync,
|
||||
syncWithGoogle,
|
||||
};
|
||||
})();
|
||||
58
assets/js/http/ldap_settings_http_client.js
Normal file
58
assets/js/http/ldap_settings_http_client.js
Normal file
@ -0,0 +1,58 @@
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Easy!Appointments - Online Appointment Scheduler
|
||||
*
|
||||
* @package EasyAppointments
|
||||
* @author A.Tselegidis <alextselegidis@gmail.com>
|
||||
* @copyright Copyright (c) Alex Tselegidis
|
||||
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
|
||||
* @link https://easyappointments.org
|
||||
* @since v1.5.0
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
/**
|
||||
* LDAP Settings HTTP client.
|
||||
*
|
||||
* This module implements the LDAP settings related HTTP requests.
|
||||
*/
|
||||
App.Http.LdapSettings = (function () {
|
||||
/**
|
||||
* Save LDAP settings.
|
||||
*
|
||||
* @param {Object} ldapSettings
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
function save(ldapSettings) {
|
||||
const url = App.Utils.Url.siteUrl('ldap_settings/save');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
ldap_settings: ldapSettings,
|
||||
};
|
||||
|
||||
return $.post(url, data);
|
||||
}
|
||||
|
||||
/**
|
||||
* Search LDAP server.
|
||||
*
|
||||
* @param {String} keyword
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
function search(keyword) {
|
||||
const url = App.Utils.Url.siteUrl('ldap_settings/search');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
keyword,
|
||||
};
|
||||
|
||||
return $.post(url, data);
|
||||
}
|
||||
|
||||
return {
|
||||
save,
|
||||
search,
|
||||
};
|
||||
})();
|
||||
39
assets/js/http/legal_settings_http_client.js
Normal file
39
assets/js/http/legal_settings_http_client.js
Normal file
@ -0,0 +1,39 @@
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Easy!Appointments - Online Appointment Scheduler
|
||||
*
|
||||
* @package EasyAppointments
|
||||
* @author A.Tselegidis <alextselegidis@gmail.com>
|
||||
* @copyright Copyright (c) Alex Tselegidis
|
||||
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
|
||||
* @link https://easyappointments.org
|
||||
* @since v1.5.0
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
/**
|
||||
* Legal Settings HTTP client.
|
||||
*
|
||||
* This module implements the legal settings related HTTP requests.
|
||||
*/
|
||||
App.Http.LegalSettings = (function () {
|
||||
/**
|
||||
* Save legal settings.
|
||||
*
|
||||
* @param {Object} legalSettings
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
function save(legalSettings) {
|
||||
const url = App.Utils.Url.siteUrl('legal_settings/save');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
legal_settings: legalSettings,
|
||||
};
|
||||
|
||||
return $.post(url, data);
|
||||
}
|
||||
|
||||
return {
|
||||
save,
|
||||
};
|
||||
})();
|
||||
37
assets/js/http/localization_http_client.js
Normal file
37
assets/js/http/localization_http_client.js
Normal file
@ -0,0 +1,37 @@
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Easy!Appointments - Online Appointment Scheduler
|
||||
*
|
||||
* @package EasyAppointments
|
||||
* @author A.Tselegidis <alextselegidis@gmail.com>
|
||||
* @copyright Copyright (c) Alex Tselegidis
|
||||
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
|
||||
* @link https://easyappointments.org
|
||||
* @since v1.5.0
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
/**
|
||||
* Localization HTTP client.
|
||||
*
|
||||
* This module implements the account related HTTP requests.
|
||||
*/
|
||||
App.Http.Localization = (function () {
|
||||
/**
|
||||
* Change language.
|
||||
*
|
||||
* @param {String} language
|
||||
*/
|
||||
function changeLanguage(language) {
|
||||
const url = App.Utils.Url.siteUrl('localization/change_language');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
language,
|
||||
};
|
||||
|
||||
return $.post(url, data);
|
||||
}
|
||||
|
||||
return {
|
||||
changeLanguage,
|
||||
};
|
||||
})();
|
||||
41
assets/js/http/login_http_client.js
Normal file
41
assets/js/http/login_http_client.js
Normal file
@ -0,0 +1,41 @@
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Easy!Appointments - Online Appointment Scheduler
|
||||
*
|
||||
* @package EasyAppointments
|
||||
* @author A.Tselegidis <alextselegidis@gmail.com>
|
||||
* @copyright Copyright (c) Alex Tselegidis
|
||||
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
|
||||
* @link https://easyappointments.org
|
||||
* @since v1.5.0
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
/**
|
||||
* Login HTTP client.
|
||||
*
|
||||
* This module implements the account login related HTTP requests.
|
||||
*/
|
||||
App.Http.Login = (function () {
|
||||
/**
|
||||
* Perform an account recovery.
|
||||
*
|
||||
* @param {String} username
|
||||
* @param {String} password
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
function validate(username, password) {
|
||||
const url = App.Utils.Url.siteUrl('login/validate');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
username,
|
||||
password,
|
||||
};
|
||||
|
||||
return $.post(url, data);
|
||||
}
|
||||
|
||||
return {
|
||||
validate,
|
||||
};
|
||||
})();
|
||||
39
assets/js/http/matomo_analytics_settings_http_client.js
Normal file
39
assets/js/http/matomo_analytics_settings_http_client.js
Normal file
@ -0,0 +1,39 @@
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Easy!Appointments - Online Appointment Scheduler
|
||||
*
|
||||
* @package EasyAppointments
|
||||
* @author A.Tselegidis <alextselegidis@gmail.com>
|
||||
* @copyright Copyright (c) Alex Tselegidis
|
||||
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
|
||||
* @link https://easyappointments.org
|
||||
* @since v1.5.0
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
/**
|
||||
* Matomo Analytics Settings HTTP client.
|
||||
*
|
||||
* This module implements the Matomo Analytics settings related HTTP requests.
|
||||
*/
|
||||
App.Http.MatomoAnalyticsSettings = (function () {
|
||||
/**
|
||||
* Save Matomo Analytics settings.
|
||||
*
|
||||
* @param {Object} matomoAnalyticsSettings
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
function save(matomoAnalyticsSettings) {
|
||||
const url = App.Utils.Url.siteUrl('matomo_analytics_settings/save');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
matomo_analytics_settings: matomoAnalyticsSettings,
|
||||
};
|
||||
|
||||
return $.post(url, data);
|
||||
}
|
||||
|
||||
return {
|
||||
save,
|
||||
};
|
||||
})();
|
||||
133
assets/js/http/providers_http_client.js
Normal file
133
assets/js/http/providers_http_client.js
Normal file
@ -0,0 +1,133 @@
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Easy!Appointments - Online Appointment Scheduler
|
||||
*
|
||||
* @package EasyAppointments
|
||||
* @author A.Tselegidis <alextselegidis@gmail.com>
|
||||
* @copyright Copyright (c) Alex Tselegidis
|
||||
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
|
||||
* @link https://easyappointments.org
|
||||
* @since v1.5.0
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
/**
|
||||
* Providers HTTP client.
|
||||
*
|
||||
* This module implements the providers related HTTP requests.
|
||||
*/
|
||||
App.Http.Providers = (function () {
|
||||
/**
|
||||
* Save (create or update) a provider.
|
||||
*
|
||||
* @param {Object} provider
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
function save(provider) {
|
||||
return provider.id ? update(provider) : store(provider);
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a provider.
|
||||
*
|
||||
* @param {Object} provider
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
function store(provider) {
|
||||
const url = App.Utils.Url.siteUrl('providers/store');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
provider: provider,
|
||||
};
|
||||
|
||||
return $.post(url, data);
|
||||
}
|
||||
|
||||
/**
|
||||
* Update a provider.
|
||||
*
|
||||
* @param {Object} provider
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
function update(provider) {
|
||||
const url = App.Utils.Url.siteUrl('providers/update');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
provider: provider,
|
||||
};
|
||||
|
||||
return $.post(url, data);
|
||||
}
|
||||
|
||||
/**
|
||||
* Delete a provider.
|
||||
*
|
||||
* @param {Number} providerId
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
function destroy(providerId) {
|
||||
const url = App.Utils.Url.siteUrl('providers/destroy');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
provider_id: providerId,
|
||||
};
|
||||
|
||||
return $.post(url, data);
|
||||
}
|
||||
|
||||
/**
|
||||
* Search providers by keyword.
|
||||
*
|
||||
* @param {String} keyword
|
||||
* @param {Number} [limit]
|
||||
* @param {Number} [offset]
|
||||
* @param {String} [orderBy]
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
function search(keyword, limit = null, offset = null, orderBy = null) {
|
||||
const url = App.Utils.Url.siteUrl('providers/search');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
keyword,
|
||||
limit,
|
||||
offset,
|
||||
order_by: orderBy || undefined,
|
||||
};
|
||||
|
||||
return $.post(url, data);
|
||||
}
|
||||
|
||||
/**
|
||||
* Find a provider.
|
||||
*
|
||||
* @param {Number} providerId
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
function find(providerId) {
|
||||
const url = App.Utils.Url.siteUrl('providers/find');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
provider_id: providerId,
|
||||
};
|
||||
|
||||
return $.post(url, data);
|
||||
}
|
||||
|
||||
return {
|
||||
save,
|
||||
store,
|
||||
update,
|
||||
destroy,
|
||||
search,
|
||||
find,
|
||||
};
|
||||
})();
|
||||
41
assets/js/http/recovery_http_client.js
Normal file
41
assets/js/http/recovery_http_client.js
Normal file
@ -0,0 +1,41 @@
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Easy!Appointments - Online Appointment Scheduler
|
||||
*
|
||||
* @package EasyAppointments
|
||||
* @author A.Tselegidis <alextselegidis@gmail.com>
|
||||
* @copyright Copyright (c) Alex Tselegidis
|
||||
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
|
||||
* @link https://easyappointments.org
|
||||
* @since v1.5.0
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
/**
|
||||
* Recovery HTTP client.
|
||||
*
|
||||
* This module implements the account recovery related HTTP requests.
|
||||
*/
|
||||
App.Http.Recovery = (function () {
|
||||
/**
|
||||
* Perform an account recovery.
|
||||
*
|
||||
* @param {String} username
|
||||
* @param {String} email
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
function perform(username, email) {
|
||||
const url = App.Utils.Url.siteUrl('recovery/perform');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
username,
|
||||
email,
|
||||
};
|
||||
|
||||
return $.post(url, data);
|
||||
}
|
||||
|
||||
return {
|
||||
perform,
|
||||
};
|
||||
})();
|
||||
133
assets/js/http/secretaries_http_client.js
Normal file
133
assets/js/http/secretaries_http_client.js
Normal file
@ -0,0 +1,133 @@
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Easy!Appointments - Online Appointment Scheduler
|
||||
*
|
||||
* @package EasyAppointments
|
||||
* @author A.Tselegidis <alextselegidis@gmail.com>
|
||||
* @copyright Copyright (c) Alex Tselegidis
|
||||
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
|
||||
* @link https://easyappointments.org
|
||||
* @since v1.5.0
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
/**
|
||||
* Secretaries HTTP client.
|
||||
*
|
||||
* This module implements the secretaries related HTTP requests.
|
||||
*/
|
||||
App.Http.Secretaries = (function () {
|
||||
/**
|
||||
* Save (create or update) a secretary.
|
||||
*
|
||||
* @param {Object} secretary
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
function save(secretary) {
|
||||
return secretary.id ? update(secretary) : store(secretary);
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a secretary.
|
||||
*
|
||||
* @param {Object} secretary
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
function store(secretary) {
|
||||
const url = App.Utils.Url.siteUrl('secretaries/store');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
secretary: secretary,
|
||||
};
|
||||
|
||||
return $.post(url, data);
|
||||
}
|
||||
|
||||
/**
|
||||
* Update a secretary.
|
||||
*
|
||||
* @param {Object} secretary
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
function update(secretary) {
|
||||
const url = App.Utils.Url.siteUrl('secretaries/update');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
secretary: secretary,
|
||||
};
|
||||
|
||||
return $.post(url, data);
|
||||
}
|
||||
|
||||
/**
|
||||
* Delete a secretary.
|
||||
*
|
||||
* @param {Number} secretaryId
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
function destroy(secretaryId) {
|
||||
const url = App.Utils.Url.siteUrl('secretaries/destroy');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
secretary_id: secretaryId,
|
||||
};
|
||||
|
||||
return $.post(url, data);
|
||||
}
|
||||
|
||||
/**
|
||||
* Search secretaries by keyword.
|
||||
*
|
||||
* @param {String} keyword
|
||||
* @param {Number} [limit]
|
||||
* @param {Number} [offset]
|
||||
* @param {String} [orderBy]
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
function search(keyword, limit = null, offset = null, orderBy = null) {
|
||||
const url = App.Utils.Url.siteUrl('secretaries/search');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
keyword,
|
||||
limit,
|
||||
offset,
|
||||
order_by: orderBy || undefined,
|
||||
};
|
||||
|
||||
return $.post(url, data);
|
||||
}
|
||||
|
||||
/**
|
||||
* Find a secretary.
|
||||
*
|
||||
* @param {Number} secretaryId
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
function find(secretaryId) {
|
||||
const url = App.Utils.Url.siteUrl('secretaries/find');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
secretary_id: secretaryId,
|
||||
};
|
||||
|
||||
return $.post(url, data);
|
||||
}
|
||||
|
||||
return {
|
||||
save,
|
||||
store,
|
||||
update,
|
||||
destroy,
|
||||
search,
|
||||
find,
|
||||
};
|
||||
})();
|
||||
133
assets/js/http/service_categories_http_client.js
Normal file
133
assets/js/http/service_categories_http_client.js
Normal file
@ -0,0 +1,133 @@
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Easy!Appointments - Online Appointment Scheduler
|
||||
*
|
||||
* @package EasyAppointments
|
||||
* @author A.Tselegidis <alextselegidis@gmail.com>
|
||||
* @copyright Copyright (c) Alex Tselegidis
|
||||
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
|
||||
* @link https://easyappointments.org
|
||||
* @since v1.5.0
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
/**
|
||||
* Service-categories HTTP client.
|
||||
*
|
||||
* This module implements the service-categories related HTTP requests.
|
||||
*/
|
||||
App.Http.ServiceCategories = (function () {
|
||||
/**
|
||||
* Save (create or update) a service-category.
|
||||
*
|
||||
* @param {Object} serviceCategory
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
function save(serviceCategory) {
|
||||
return serviceCategory.id ? update(serviceCategory) : store(serviceCategory);
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a service-category.
|
||||
*
|
||||
* @param {Object} serviceCategory
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
function store(serviceCategory) {
|
||||
const url = App.Utils.Url.siteUrl('service_categories/store');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
service_category: serviceCategory,
|
||||
};
|
||||
|
||||
return $.post(url, data);
|
||||
}
|
||||
|
||||
/**
|
||||
* Update a service-category.
|
||||
*
|
||||
* @param {Object} serviceCategory
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
function update(serviceCategory) {
|
||||
const url = App.Utils.Url.siteUrl('service_categories/update');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
service_category: serviceCategory,
|
||||
};
|
||||
|
||||
return $.post(url, data);
|
||||
}
|
||||
|
||||
/**
|
||||
* Delete a service-category.
|
||||
*
|
||||
* @param {Number} serviceCategoryId
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
function destroy(serviceCategoryId) {
|
||||
const url = App.Utils.Url.siteUrl('service_categories/destroy');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
service_category_id: serviceCategoryId,
|
||||
};
|
||||
|
||||
return $.post(url, data);
|
||||
}
|
||||
|
||||
/**
|
||||
* Search service-categories by keyword.
|
||||
*
|
||||
* @param {String} keyword
|
||||
* @param {Number} [limit]
|
||||
* @param {Number} [offset]
|
||||
* @param {String} [orderBy]
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
function search(keyword, limit = null, offset = null, orderBy = null) {
|
||||
const url = App.Utils.Url.siteUrl('service_categories/search');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
keyword,
|
||||
limit,
|
||||
offset,
|
||||
order_by: orderBy || undefined,
|
||||
};
|
||||
|
||||
return $.post(url, data);
|
||||
}
|
||||
|
||||
/**
|
||||
* Find a service-category.
|
||||
*
|
||||
* @param {Number} serviceCategoryId
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
function find(serviceCategoryId) {
|
||||
const url = App.Utils.Url.siteUrl('service_categories/find');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
service_category_id: serviceCategoryId,
|
||||
};
|
||||
|
||||
return $.post(url, data);
|
||||
}
|
||||
|
||||
return {
|
||||
save,
|
||||
store,
|
||||
update,
|
||||
destroy,
|
||||
search,
|
||||
find,
|
||||
};
|
||||
})();
|
||||
133
assets/js/http/services_http_client.js
Normal file
133
assets/js/http/services_http_client.js
Normal file
@ -0,0 +1,133 @@
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Easy!Appointments - Online Appointment Scheduler
|
||||
*
|
||||
* @package EasyAppointments
|
||||
* @author A.Tselegidis <alextselegidis@gmail.com>
|
||||
* @copyright Copyright (c) Alex Tselegidis
|
||||
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
|
||||
* @link https://easyappointments.org
|
||||
* @since v1.5.0
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
/**
|
||||
* Services HTTP client.
|
||||
*
|
||||
* This module implements the services related HTTP requests.
|
||||
*/
|
||||
App.Http.Services = (function () {
|
||||
/**
|
||||
* Save (create or update) a service.
|
||||
*
|
||||
* @param {Object} service
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
function save(service) {
|
||||
return service.id ? update(service) : store(service);
|
||||
}
|
||||
|
||||
/**
|
||||
* Create an service.
|
||||
*
|
||||
* @param {Object} service
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
function store(service) {
|
||||
const url = App.Utils.Url.siteUrl('services/store');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
service: service,
|
||||
};
|
||||
|
||||
return $.post(url, data);
|
||||
}
|
||||
|
||||
/**
|
||||
* Update an service.
|
||||
*
|
||||
* @param {Object} service
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
function update(service) {
|
||||
const url = App.Utils.Url.siteUrl('services/update');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
service: service,
|
||||
};
|
||||
|
||||
return $.post(url, data);
|
||||
}
|
||||
|
||||
/**
|
||||
* Delete an service.
|
||||
*
|
||||
* @param {Number} serviceId
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
function destroy(serviceId) {
|
||||
const url = App.Utils.Url.siteUrl('services/destroy');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
service_id: serviceId,
|
||||
};
|
||||
|
||||
return $.post(url, data);
|
||||
}
|
||||
|
||||
/**
|
||||
* Search services by keyword.
|
||||
*
|
||||
* @param {String} keyword
|
||||
* @param {Number} [limit]
|
||||
* @param {Number} [offset]
|
||||
* @param {String} [orderBy]
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
function search(keyword, limit = null, offset = null, orderBy = null) {
|
||||
const url = App.Utils.Url.siteUrl('services/search');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
keyword,
|
||||
limit,
|
||||
offset,
|
||||
order_by: orderBy || undefined,
|
||||
};
|
||||
|
||||
return $.post(url, data);
|
||||
}
|
||||
|
||||
/**
|
||||
* Find an service.
|
||||
*
|
||||
* @param {Number} serviceId
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
function find(serviceId) {
|
||||
const url = App.Utils.Url.siteUrl('services/find');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
service_id: serviceId,
|
||||
};
|
||||
|
||||
return $.post(url, data);
|
||||
}
|
||||
|
||||
return {
|
||||
save,
|
||||
store,
|
||||
update,
|
||||
destroy,
|
||||
search,
|
||||
find,
|
||||
};
|
||||
})();
|
||||
133
assets/js/http/settings_http_client.js
Normal file
133
assets/js/http/settings_http_client.js
Normal file
@ -0,0 +1,133 @@
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Easy!Appointments - Online Appointment Scheduler
|
||||
*
|
||||
* @package EasyAppointments
|
||||
* @author A.Tselegidis <alextselegidis@gmail.com>
|
||||
* @copyright Copyright (c) Alex Tselegidis
|
||||
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
|
||||
* @link https://easyappointments.org
|
||||
* @since v1.5.0
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
/**
|
||||
* Settings HTTP client.
|
||||
*
|
||||
* This module implements the settings related HTTP requests.
|
||||
*/
|
||||
App.Http.Settings = (function () {
|
||||
/**
|
||||
* Save (create or update) a setting.
|
||||
*
|
||||
* @param {Object} setting
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
function save(setting) {
|
||||
return setting.id ? update(setting) : create(setting);
|
||||
}
|
||||
|
||||
/**
|
||||
* Create an setting.
|
||||
*
|
||||
* @param {Object} setting
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
function create(setting) {
|
||||
const url = App.Utils.Url.siteUrl('settings/create');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
setting: setting,
|
||||
};
|
||||
|
||||
return $.post(url, data);
|
||||
}
|
||||
|
||||
/**
|
||||
* Update an setting.
|
||||
*
|
||||
* @param {Object} setting
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
function update(setting) {
|
||||
const url = App.Utils.Url.siteUrl('settings/update');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
setting: setting,
|
||||
};
|
||||
|
||||
return $.post(url, data);
|
||||
}
|
||||
|
||||
/**
|
||||
* Delete an setting.
|
||||
*
|
||||
* @param {Number} settingId
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
function destroy(settingId) {
|
||||
const url = App.Utils.Url.siteUrl('settings/destroy');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
setting_id: settingId,
|
||||
};
|
||||
|
||||
return $.post(url, data);
|
||||
}
|
||||
|
||||
/**
|
||||
* Search settings by keyword.
|
||||
*
|
||||
* @param {String} keyword
|
||||
* @param {Number} [limit]
|
||||
* @param {Number} [offset]
|
||||
* @param {String} [orderBy]
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
function search(keyword, limit = null, offset = null, orderBy = null) {
|
||||
const url = App.Utils.Url.siteUrl('settings/search');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
keyword,
|
||||
limit,
|
||||
offset,
|
||||
order_by: orderBy || undefined,
|
||||
};
|
||||
|
||||
return $.post(url, data);
|
||||
}
|
||||
|
||||
/**
|
||||
* Find an setting.
|
||||
*
|
||||
* @param {Number} settingId
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
function find(settingId) {
|
||||
const url = App.Utils.Url.siteUrl('settings/find');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
setting_id: settingId,
|
||||
};
|
||||
|
||||
return $.post(url, data);
|
||||
}
|
||||
|
||||
return {
|
||||
save,
|
||||
create,
|
||||
update,
|
||||
destroy,
|
||||
search,
|
||||
find,
|
||||
};
|
||||
})();
|
||||
133
assets/js/http/unavailabilities_http_client.js
Normal file
133
assets/js/http/unavailabilities_http_client.js
Normal file
@ -0,0 +1,133 @@
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Easy!Appointments - Online Appointment Scheduler
|
||||
*
|
||||
* @package EasyAppointments
|
||||
* @author A.Tselegidis <alextselegidis@gmail.com>
|
||||
* @copyright Copyright (c) Alex Tselegidis
|
||||
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
|
||||
* @link https://easyappointments.org
|
||||
* @since v1.5.0
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
/**
|
||||
* Unavailabilities HTTP client.
|
||||
*
|
||||
* This module implements the unavailabilities related HTTP requests.
|
||||
*/
|
||||
App.Http.Unavailabilities = (function () {
|
||||
/**
|
||||
* Save (create or update) an unavailability.
|
||||
*
|
||||
* @param {Object} unavailability
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
function save(unavailability) {
|
||||
return unavailability.id ? update(unavailability) : store(unavailability);
|
||||
}
|
||||
|
||||
/**
|
||||
* Create an unavailability.
|
||||
*
|
||||
* @param {Object} unavailability
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
function store(unavailability) {
|
||||
const url = App.Utils.Url.siteUrl('unavailabilities/store');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
unavailability: unavailability,
|
||||
};
|
||||
|
||||
return $.post(url, data);
|
||||
}
|
||||
|
||||
/**
|
||||
* Update an unavailability.
|
||||
*
|
||||
* @param {Object} unavailability
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
function update(unavailability) {
|
||||
const url = App.Utils.Url.siteUrl('unavailabilities/update');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
unavailability: unavailability,
|
||||
};
|
||||
|
||||
return $.post(url, data);
|
||||
}
|
||||
|
||||
/**
|
||||
* Delete an unavailability.
|
||||
*
|
||||
* @param {Number} unavailabilityId
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
function destroy(unavailabilityId) {
|
||||
const url = App.Utils.Url.siteUrl('unavailabilities/destroy');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
unavailability_id: unavailabilityId,
|
||||
};
|
||||
|
||||
return $.post(url, data);
|
||||
}
|
||||
|
||||
/**
|
||||
* Search unavailabilities by keyword.
|
||||
*
|
||||
* @param {String} keyword
|
||||
* @param {Number} [limit]
|
||||
* @param {Number} [offset]
|
||||
* @param {String} [orderBy]
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
function search(keyword, limit = null, offset = null, orderBy = null) {
|
||||
const url = App.Utils.Url.siteUrl('unavailabilities/search');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
keyword,
|
||||
limit,
|
||||
offset,
|
||||
order_by: orderBy || undefined,
|
||||
};
|
||||
|
||||
return $.post(url, data);
|
||||
}
|
||||
|
||||
/**
|
||||
* Find an unavailability.
|
||||
*
|
||||
* @param {Number} unavailabilityId
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
function find(unavailabilityId) {
|
||||
const url = App.Utils.Url.siteUrl('unavailabilities/find');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
unavailability_id: unavailabilityId,
|
||||
};
|
||||
|
||||
return $.post(url, data);
|
||||
}
|
||||
|
||||
return {
|
||||
save,
|
||||
store,
|
||||
update,
|
||||
destroy,
|
||||
search,
|
||||
find,
|
||||
};
|
||||
})();
|
||||
133
assets/js/http/webhooks_http_client.js
Normal file
133
assets/js/http/webhooks_http_client.js
Normal file
@ -0,0 +1,133 @@
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Easy!Appointments - Online Appointment Scheduler
|
||||
*
|
||||
* @package EasyAppointments
|
||||
* @author A.Tselegidis <alextselegidis@gmail.com>
|
||||
* @copyright Copyright (c) Alex Tselegidis
|
||||
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
|
||||
* @link https://easyappointments.org
|
||||
* @since v1.5.0
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
/**
|
||||
* Webhooks HTTP client.
|
||||
*
|
||||
* This module implements the webhooks related HTTP requests.
|
||||
*/
|
||||
App.Http.Webhooks = (function () {
|
||||
/**
|
||||
* Save (create or update) a webhook.
|
||||
*
|
||||
* @param {Object} webhook
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
function save(webhook) {
|
||||
return webhook.id ? update(webhook) : store(webhook);
|
||||
}
|
||||
|
||||
/**
|
||||
* Create an webhook.
|
||||
*
|
||||
* @param {Object} webhook
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
function store(webhook) {
|
||||
const url = App.Utils.Url.siteUrl('webhooks/store');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
webhook: webhook,
|
||||
};
|
||||
|
||||
return $.post(url, data);
|
||||
}
|
||||
|
||||
/**
|
||||
* Update an webhook.
|
||||
*
|
||||
* @param {Object} webhook
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
function update(webhook) {
|
||||
const url = App.Utils.Url.siteUrl('webhooks/update');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
webhook: webhook,
|
||||
};
|
||||
|
||||
return $.post(url, data);
|
||||
}
|
||||
|
||||
/**
|
||||
* Delete an webhook.
|
||||
*
|
||||
* @param {Number} webhookId
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
function destroy(webhookId) {
|
||||
const url = App.Utils.Url.siteUrl('webhooks/destroy');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
webhook_id: webhookId,
|
||||
};
|
||||
|
||||
return $.post(url, data);
|
||||
}
|
||||
|
||||
/**
|
||||
* Search webhooks by keyword.
|
||||
*
|
||||
* @param {String} keyword
|
||||
* @param {Number} [limit]
|
||||
* @param {Number} [offset]
|
||||
* @param {String} [orderBy]
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
function search(keyword, limit = null, offset = null, orderBy = null) {
|
||||
const url = App.Utils.Url.siteUrl('webhooks/search');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
keyword,
|
||||
limit,
|
||||
offset,
|
||||
order_by: orderBy || undefined,
|
||||
};
|
||||
|
||||
return $.post(url, data);
|
||||
}
|
||||
|
||||
/**
|
||||
* Find an webhook.
|
||||
*
|
||||
* @param {Number} webhookId
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
function find(webhookId) {
|
||||
const url = App.Utils.Url.siteUrl('webhooks/find');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
webhook_id: webhookId,
|
||||
};
|
||||
|
||||
return $.post(url, data);
|
||||
}
|
||||
|
||||
return {
|
||||
save,
|
||||
store,
|
||||
update,
|
||||
destroy,
|
||||
search,
|
||||
find,
|
||||
};
|
||||
})();
|
||||
10
assets/js/index.html
Normal file
10
assets/js/index.html
Normal file
@ -0,0 +1,10 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>403 Forbidden</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>Directory access is forbidden.</p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
30
assets/js/layouts/account_layout.js
Normal file
30
assets/js/layouts/account_layout.js
Normal file
@ -0,0 +1,30 @@
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Easy!Appointments - Online Appointment Scheduler
|
||||
*
|
||||
* @package EasyAppointments
|
||||
* @author A.Tselegidis <alextselegidis@gmail.com>
|
||||
* @copyright Copyright (c) Alex Tselegidis
|
||||
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
|
||||
* @link https://easyappointments.org
|
||||
* @since v1.5.0
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
/**
|
||||
* Account layout.
|
||||
*
|
||||
* This module implements the account layout functionality.
|
||||
*/
|
||||
window.App.Layouts.Account = (function () {
|
||||
const $selectLanguage = $('#select-language');
|
||||
|
||||
/**
|
||||
* Initialize the module.
|
||||
*/
|
||||
function initialize() {
|
||||
App.Utils.Lang.enableLanguageSelection($selectLanguage);
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', initialize);
|
||||
|
||||
return {};
|
||||
})();
|
||||
120
assets/js/layouts/backend_layout.js
Normal file
120
assets/js/layouts/backend_layout.js
Normal file
@ -0,0 +1,120 @@
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Easy!Appointments - Online Appointment Scheduler
|
||||
*
|
||||
* @package EasyAppointments
|
||||
* @author A.Tselegidis <alextselegidis@gmail.com>
|
||||
* @copyright Copyright (c) Alex Tselegidis
|
||||
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
|
||||
* @link https://easyappointments.org
|
||||
* @since v1.5.0
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
/**
|
||||
* Backend layout.
|
||||
*
|
||||
* This module implements the backend layout functionality.
|
||||
*/
|
||||
window.App.Layouts.Backend = (function () {
|
||||
const $selectLanguage = $('#select-language');
|
||||
const $notification = $('#notification');
|
||||
const $loading = $('#loading');
|
||||
const $footer = $('#footer');
|
||||
|
||||
const DB_SLUG_ADMIN = 'admin';
|
||||
const DB_SLUG_PROVIDER = 'provider';
|
||||
const DB_SLUG_SECRETARY = 'secretary';
|
||||
const DB_SLUG_CUSTOMER = 'customer';
|
||||
|
||||
const PRIV_VIEW = 1;
|
||||
const PRIV_ADD = 2;
|
||||
const PRIV_EDIT = 4;
|
||||
const PRIV_DELETE = 8;
|
||||
|
||||
const PRIV_APPOINTMENTS = 'appointments';
|
||||
const PRIV_CUSTOMERS = 'customers';
|
||||
const PRIV_SERVICES = 'services';
|
||||
const PRIV_USERS = 'users';
|
||||
const PRIV_SYSTEM_SETTINGS = 'system_settings';
|
||||
const PRIV_USER_SETTINGS = 'user_settings';
|
||||
|
||||
/**
|
||||
* Display backend notifications to user.
|
||||
*
|
||||
* Using this method you can display notifications to the use with custom messages. If the 'actions' array is
|
||||
* provided then an action link will be displayed too.
|
||||
*
|
||||
* @param {String} message Notification message
|
||||
* @param {Array} [actions] An array with custom actions that will be available to the user. Every array item is an
|
||||
* object that contains the 'label' and 'function' key values.
|
||||
*/
|
||||
function displayNotification(message, actions = []) {
|
||||
if (!message) {
|
||||
return;
|
||||
}
|
||||
|
||||
const $toast = $(`
|
||||
<div class="toast bg-dark d-flex align-items-center mb-2 fade show position-fixed p-1 m-4 bottom-0 end-0 backend-notification" role="alert" aria-live="assertive" aria-atomic="true">
|
||||
<div class="toast-body w-100 text-white">
|
||||
${message}
|
||||
</div>
|
||||
<button type="button" class="btn-close btn-close-white me-2" data-bs-dismiss="toast" aria-label="Close"></button>
|
||||
</div>
|
||||
`).appendTo('body');
|
||||
|
||||
actions.forEach(function (action) {
|
||||
$('<button/>', {
|
||||
class: 'btn btn-light btn-sm ms-2',
|
||||
text: action.label,
|
||||
on: {
|
||||
click: action.function,
|
||||
},
|
||||
}).prependTo($toast);
|
||||
});
|
||||
|
||||
const toast = new bootstrap.Toast($toast[0]);
|
||||
|
||||
toast.show();
|
||||
|
||||
setTimeout(() => {
|
||||
toast.dispose();
|
||||
$toast.remove();
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize the module.
|
||||
*/
|
||||
function initialize() {
|
||||
$(document).ajaxStart(() => {
|
||||
$loading.show();
|
||||
});
|
||||
|
||||
$(document).ajaxStop(() => {
|
||||
$loading.hide();
|
||||
});
|
||||
|
||||
tippy('[data-tippy-content]');
|
||||
|
||||
App.Utils.Lang.enableLanguageSelection($selectLanguage);
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', initialize);
|
||||
|
||||
return {
|
||||
DB_SLUG_ADMIN,
|
||||
DB_SLUG_PROVIDER,
|
||||
DB_SLUG_SECRETARY,
|
||||
DB_SLUG_CUSTOMER,
|
||||
PRIV_VIEW,
|
||||
PRIV_ADD,
|
||||
PRIV_EDIT,
|
||||
PRIV_DELETE,
|
||||
PRIV_APPOINTMENTS,
|
||||
PRIV_CUSTOMERS,
|
||||
PRIV_SERVICES,
|
||||
PRIV_USERS,
|
||||
PRIV_SYSTEM_SETTINGS,
|
||||
PRIV_USER_SETTINGS,
|
||||
displayNotification,
|
||||
};
|
||||
})();
|
||||
30
assets/js/layouts/booking_layout.js
Normal file
30
assets/js/layouts/booking_layout.js
Normal file
@ -0,0 +1,30 @@
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Easy!Appointments - Online Appointment Scheduler
|
||||
*
|
||||
* @package EasyAppointments
|
||||
* @author A.Tselegidis <alextselegidis@gmail.com>
|
||||
* @copyright Copyright (c) Alex Tselegidis
|
||||
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
|
||||
* @link https://easyappointments.org
|
||||
* @since v1.5.0
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
/**
|
||||
* Booking layout.
|
||||
*
|
||||
* This module implements the booking layout functionality.
|
||||
*/
|
||||
window.App.Layouts.Booking = (function () {
|
||||
const $selectLanguage = $('#select-language');
|
||||
|
||||
/**
|
||||
* Initialize the module.
|
||||
*/
|
||||
function initialize() {
|
||||
App.Utils.Lang.enableLanguageSelection($selectLanguage);
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', initialize);
|
||||
|
||||
return {};
|
||||
})();
|
||||
19
assets/js/layouts/message_layout.js
Normal file
19
assets/js/layouts/message_layout.js
Normal file
@ -0,0 +1,19 @@
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Easy!Appointments - Online Appointment Scheduler
|
||||
*
|
||||
* @package EasyAppointments
|
||||
* @author A.Tselegidis <alextselegidis@gmail.com>
|
||||
* @copyright Copyright (c) Alex Tselegidis
|
||||
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
|
||||
* @link https://easyappointments.org
|
||||
* @since v1.5.0
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
/**
|
||||
* Message layout.
|
||||
*
|
||||
* This module implements the message layout functionality.
|
||||
*/
|
||||
window.App.Layouts.Message = (function () {
|
||||
return {};
|
||||
})();
|
||||
198
assets/js/pages/account.js
Normal file
198
assets/js/pages/account.js
Normal file
@ -0,0 +1,198 @@
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Easy!Appointments - Online Appointment Scheduler
|
||||
*
|
||||
* @package EasyAppointments
|
||||
* @author A.Tselegidis <alextselegidis@gmail.com>
|
||||
* @copyright Copyright (c) Alex Tselegidis
|
||||
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
|
||||
* @link https://easyappointments.org
|
||||
* @since v1.5.0
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
/**
|
||||
* Account page.
|
||||
*
|
||||
* This module implements the functionality of the account page.
|
||||
*/
|
||||
App.Pages.Account = (function () {
|
||||
const $userId = $('#user-id');
|
||||
const $firstName = $('#first-name');
|
||||
const $lastName = $('#last-name');
|
||||
const $email = $('#email');
|
||||
const $mobileNumber = $('#mobile-number');
|
||||
const $phoneNumber = $('#phone-number');
|
||||
const $address = $('#address');
|
||||
const $city = $('#city');
|
||||
const $state = $('#state');
|
||||
const $zipCode = $('#zip-code');
|
||||
const $notes = $('#notes');
|
||||
const $language = $('#language');
|
||||
const $timezone = $('#timezone');
|
||||
const $username = $('#username');
|
||||
const $password = $('#password');
|
||||
const $retypePassword = $('#retype-password');
|
||||
const $calendarView = $('#calendar-view');
|
||||
const notifications = $('#notifications');
|
||||
const $saveSettings = $('#save-settings');
|
||||
const $footerUserDisplayName = $('#footer-user-display-name');
|
||||
|
||||
/**
|
||||
* Check if the form has invalid values.
|
||||
*
|
||||
* @return {Boolean}
|
||||
*/
|
||||
function isInvalid() {
|
||||
try {
|
||||
$('#account .is-invalid').removeClass('is-invalid');
|
||||
|
||||
// Validate required fields.
|
||||
|
||||
let missingRequiredFields = false;
|
||||
|
||||
$('#account .required').each((index, requiredField) => {
|
||||
const $requiredField = $(requiredField);
|
||||
|
||||
if (!$requiredField.val()) {
|
||||
$requiredField.addClass('is-invalid');
|
||||
missingRequiredFields = true;
|
||||
}
|
||||
});
|
||||
|
||||
if (missingRequiredFields) {
|
||||
throw new Error(lang('fields_are_required'));
|
||||
}
|
||||
|
||||
// Validate passwords (if values provided).
|
||||
|
||||
if ($password.val() && $password.val() !== $retypePassword.val()) {
|
||||
$password.addClass('is-invalid');
|
||||
$retypePassword.addClass('is-invalid');
|
||||
throw new Error(lang('passwords_mismatch'));
|
||||
}
|
||||
|
||||
// Validate user email.
|
||||
|
||||
const emailValue = $email.val();
|
||||
|
||||
if (!App.Utils.Validation.email(emailValue)) {
|
||||
$email.addClass('is-invalid');
|
||||
throw new Error(lang('invalid_email'));
|
||||
}
|
||||
|
||||
if ($username.hasClass('is-invalid')) {
|
||||
throw new Error(lang('username_already_exists'));
|
||||
}
|
||||
|
||||
return false;
|
||||
} catch (error) {
|
||||
App.Layouts.Backend.displayNotification(error.message);
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Apply the account values to the form.
|
||||
*
|
||||
* @param {Object} account
|
||||
*/
|
||||
function deserialize(account) {
|
||||
$userId.val(account.id);
|
||||
$firstName.val(account.first_name);
|
||||
$lastName.val(account.last_name);
|
||||
$email.val(account.email);
|
||||
$mobileNumber.val(account.mobile_number);
|
||||
$phoneNumber.val(account.phone_number);
|
||||
$address.val(account.address);
|
||||
$city.val(account.city);
|
||||
$state.val(account.state);
|
||||
$zipCode.val(account.zip_code);
|
||||
$notes.val(account.notes);
|
||||
$language.val(account.language);
|
||||
$timezone.val(account.timezone);
|
||||
$username.val(account.settings.username);
|
||||
$password.val('');
|
||||
$retypePassword.val('');
|
||||
$calendarView.val(account.settings.calendar_view);
|
||||
notifications.prop('checked', Boolean(Number(account.settings.notifications)));
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the account information from the form.
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
function serialize() {
|
||||
return {
|
||||
id: $userId.val(),
|
||||
first_name: $firstName.val(),
|
||||
last_name: $lastName.val(),
|
||||
email: $email.val(),
|
||||
mobile_number: $mobileNumber.val(),
|
||||
phone_number: $phoneNumber.val(),
|
||||
address: $address.val(),
|
||||
city: $city.val(),
|
||||
state: $state.val(),
|
||||
zip_code: $zipCode.val(),
|
||||
notes: $notes.val(),
|
||||
language: $language.val(),
|
||||
timezone: $timezone.val(),
|
||||
settings: {
|
||||
username: $username.val(),
|
||||
password: $password.val() || undefined,
|
||||
calendar_view: $calendarView.val(),
|
||||
notifications: Number(notifications.prop('checked')),
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Save the account information.
|
||||
*/
|
||||
function onSaveSettingsClick() {
|
||||
if (isInvalid()) {
|
||||
App.Layouts.Backend.displayNotification(lang('user_settings_are_invalid'));
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
const account = serialize();
|
||||
|
||||
App.Http.Account.save(account).done(() => {
|
||||
App.Layouts.Backend.displayNotification(lang('settings_saved'));
|
||||
|
||||
$footerUserDisplayName.text('Hello, ' + $firstName.val() + ' ' + $lastName.val() + '!');
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Make sure the username is unique.
|
||||
*/
|
||||
function onUsernameChange() {
|
||||
const username = $username.val();
|
||||
|
||||
App.Http.Account.validateUsername(vars('user_id'), username).done((response) => {
|
||||
const isValid = response.is_valid;
|
||||
$username.toggleClass('is-invalid', !isValid);
|
||||
if (!isValid) {
|
||||
App.Layouts.Backend.displayNotification(lang('username_already_exists'));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize the page.
|
||||
*/
|
||||
function initialize() {
|
||||
const account = vars('account');
|
||||
|
||||
deserialize(account);
|
||||
|
||||
$saveSettings.on('click', onSaveSettingsClick);
|
||||
|
||||
$username.on('change', onUsernameChange);
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', initialize);
|
||||
|
||||
return {};
|
||||
})();
|
||||
496
assets/js/pages/admins.js
Normal file
496
assets/js/pages/admins.js
Normal file
@ -0,0 +1,496 @@
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Easy!Appointments - Online Appointment Scheduler
|
||||
*
|
||||
* @package EasyAppointments
|
||||
* @author A.Tselegidis <alextselegidis@gmail.com>
|
||||
* @copyright Copyright (c) Alex Tselegidis
|
||||
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
|
||||
* @link https://easyappointments.org
|
||||
* @since v1.5.0
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
/**
|
||||
* Admins page.
|
||||
*
|
||||
* This module implements the functionality of admins page.
|
||||
*/
|
||||
App.Pages.Admins = (function () {
|
||||
const $admins = $('#admins');
|
||||
const $id = $('#id');
|
||||
const $firstName = $('#first-name');
|
||||
const $lastName = $('#last-name');
|
||||
const $email = $('#email');
|
||||
const $mobileNumber = $('#mobile-number');
|
||||
const $phoneNumber = $('#phone-number');
|
||||
const $address = $('#address');
|
||||
const $city = $('#city');
|
||||
const $state = $('#state');
|
||||
const $zipCode = $('#zip-code');
|
||||
const $notes = $('#notes');
|
||||
const $language = $('#language');
|
||||
const $timezone = $('#timezone');
|
||||
const $ldapDn = $('#ldap-dn');
|
||||
const $username = $('#username');
|
||||
const $password = $('#password');
|
||||
const $passwordConfirmation = $('#password-confirm');
|
||||
const $notifications = $('#notifications');
|
||||
const $calendarView = $('#calendar-view');
|
||||
const $filterAdmins = $('#filter-admins');
|
||||
let filterResults = {};
|
||||
let filterLimit = 20;
|
||||
|
||||
/**
|
||||
* Add the page event listeners.
|
||||
*/
|
||||
function addEventListeners() {
|
||||
/**
|
||||
* Event: Admin Username "Blur"
|
||||
*
|
||||
* When the admin leaves the username input field we will need to check if the username
|
||||
* is not taken by another record in the system.
|
||||
*
|
||||
* @param {jQuery.Event} event
|
||||
*/
|
||||
$admins.on('blur', '#username', (event) => {
|
||||
const $input = $(event.currentTarget);
|
||||
|
||||
if ($input.prop('readonly') === true || $input.val() === '') {
|
||||
return;
|
||||
}
|
||||
|
||||
const adminId = $input.parents().eq(2).find('.record-id').val();
|
||||
|
||||
if (!adminId) {
|
||||
return;
|
||||
}
|
||||
|
||||
const username = $input.val();
|
||||
|
||||
App.Http.Account.validateUsername(adminId, username).done((response) => {
|
||||
if (response.is_valid === 'false') {
|
||||
$input.addClass('is-invalid');
|
||||
$input.attr('already-exists', 'true');
|
||||
$input.parents().eq(3).find('.form-message').text(lang('username_already_exists'));
|
||||
$input.parents().eq(3).find('.form-message').show();
|
||||
} else {
|
||||
$input.removeClass('is-invalid');
|
||||
$input.attr('already-exists', 'false');
|
||||
if ($input.parents().eq(3).find('.form-message').text() === lang('username_already_exists')) {
|
||||
$input.parents().eq(3).find('.form-message').hide();
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* Event: Filter Admins Form "Submit"
|
||||
*
|
||||
* Filter the admin records with the given key string.
|
||||
*
|
||||
* @param {jQuery.Event} event
|
||||
*/
|
||||
$admins.on('submit', '#filter-admins form', (event) => {
|
||||
event.preventDefault();
|
||||
const key = $('#filter-admins .key').val();
|
||||
$('#filter-admins .selected').removeClass('selected');
|
||||
App.Pages.Admins.resetForm();
|
||||
App.Pages.Admins.filter(key);
|
||||
});
|
||||
|
||||
/**
|
||||
* Event: Filter Admin Row "Click"
|
||||
*
|
||||
* Display the selected admin data to the user.
|
||||
*/
|
||||
$admins.on('click', '.admin-row', (event) => {
|
||||
if ($('#filter-admins .filter').prop('disabled')) {
|
||||
$('#filter-admins .results').css('color', '#AAA');
|
||||
return; // exit because we are currently on edit mode
|
||||
}
|
||||
|
||||
const adminId = $(event.currentTarget).attr('data-id');
|
||||
|
||||
const admin = filterResults.find((filterResult) => Number(filterResult.id) === Number(adminId));
|
||||
|
||||
App.Pages.Admins.display(admin);
|
||||
$('#filter-admins .selected').removeClass('selected');
|
||||
$(event.currentTarget).addClass('selected');
|
||||
$('#edit-admin, #delete-admin').prop('disabled', false);
|
||||
});
|
||||
|
||||
/**
|
||||
* Event: Add New Admin Button "Click"
|
||||
*/
|
||||
$admins.on('click', '#add-admin', () => {
|
||||
App.Pages.Admins.resetForm();
|
||||
$admins.find('.add-edit-delete-group').hide();
|
||||
$admins.find('.save-cancel-group').show();
|
||||
$admins.find('.record-details').find('input, select, textarea').prop('disabled', false);
|
||||
$admins.find('.record-details .form-label span').prop('hidden', false);
|
||||
$('#password, #password-confirm').addClass('required');
|
||||
$('#filter-admins button').prop('disabled', true);
|
||||
$('#filter-admins .results').css('color', '#AAA');
|
||||
});
|
||||
|
||||
/**
|
||||
* Event: Edit Admin Button "Click"
|
||||
*/
|
||||
$admins.on('click', '#edit-admin', () => {
|
||||
$admins.find('.add-edit-delete-group').hide();
|
||||
$admins.find('.save-cancel-group').show();
|
||||
$admins.find('.record-details').find('input, select, textarea').prop('disabled', false);
|
||||
$admins.find('.record-details .form-label span').prop('hidden', false);
|
||||
$('#password, #password-confirm').removeClass('required');
|
||||
$('#filter-admins button').prop('disabled', true);
|
||||
$('#filter-admins .results').css('color', '#AAA');
|
||||
});
|
||||
|
||||
/**
|
||||
* Event: Delete Admin Button "Click"
|
||||
*/
|
||||
$admins.on('click', '#delete-admin', () => {
|
||||
const adminId = $id.val();
|
||||
|
||||
const buttons = [
|
||||
{
|
||||
text: lang('cancel'),
|
||||
click: (event, messageModal) => {
|
||||
messageModal.hide();
|
||||
},
|
||||
},
|
||||
{
|
||||
text: lang('delete'),
|
||||
click: (event, messageModal) => {
|
||||
App.Pages.Admins.remove(adminId);
|
||||
messageModal.hide();
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
App.Utils.Message.show(lang('delete_admin'), lang('delete_record_prompt'), buttons);
|
||||
});
|
||||
|
||||
/**
|
||||
* Event: Save Admin Button "Click"
|
||||
*/
|
||||
$admins.on('click', '#save-admin', () => {
|
||||
const admin = {
|
||||
first_name: $firstName.val(),
|
||||
last_name: $lastName.val(),
|
||||
email: $email.val(),
|
||||
mobile_number: $mobileNumber.val(),
|
||||
phone_number: $phoneNumber.val(),
|
||||
address: $address.val(),
|
||||
city: $city.val(),
|
||||
state: $state.val(),
|
||||
zip_code: $zipCode.val(),
|
||||
notes: $notes.val(),
|
||||
language: $language.val(),
|
||||
timezone: $timezone.val(),
|
||||
ldap_dn: $ldapDn.val(),
|
||||
settings: {
|
||||
username: $username.val(),
|
||||
notifications: Number($notifications.prop('checked')),
|
||||
calendar_view: $calendarView.val(),
|
||||
},
|
||||
};
|
||||
|
||||
// Include password if changed.
|
||||
if ($password.val() !== '') {
|
||||
admin.settings.password = $password.val();
|
||||
}
|
||||
|
||||
// Include id if changed.
|
||||
if ($id.val() !== '') {
|
||||
admin.id = $id.val();
|
||||
}
|
||||
|
||||
if (!App.Pages.Admins.validate()) {
|
||||
return;
|
||||
}
|
||||
|
||||
App.Pages.Admins.save(admin);
|
||||
});
|
||||
|
||||
/**
|
||||
* Event: Cancel Admin Button "Click"
|
||||
*
|
||||
* Cancel add or edit of an admin record.
|
||||
*/
|
||||
$admins.on('click', '#cancel-admin', () => {
|
||||
const id = $id.val();
|
||||
|
||||
App.Pages.Admins.resetForm();
|
||||
|
||||
if (id) {
|
||||
App.Pages.Admins.select(id, true);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Save admin record to database.
|
||||
*
|
||||
* @param {Object} admin Contains the admin record data. If an 'id' value is provided
|
||||
* then the update operation is going to be executed.
|
||||
*/
|
||||
function save(admin) {
|
||||
App.Http.Admins.save(admin).then((response) => {
|
||||
App.Layouts.Backend.displayNotification(lang('admin_saved'));
|
||||
App.Pages.Admins.resetForm();
|
||||
$('#filter-admins .key').val('');
|
||||
App.Pages.Admins.filter('', response.id, true);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Delete an admin record from database.
|
||||
*
|
||||
* @param {Number} id Record id to be deleted.
|
||||
*/
|
||||
function remove(id) {
|
||||
App.Http.Admins.destroy(id).then(() => {
|
||||
App.Layouts.Backend.displayNotification(lang('admin_deleted'));
|
||||
App.Pages.Admins.resetForm();
|
||||
App.Pages.Admins.filter($('#filter-admins .key').val());
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Validates an admin record.
|
||||
*
|
||||
* @return {Boolean} Returns the validation result.
|
||||
*/
|
||||
function validate() {
|
||||
$admins.find('.is-invalid').removeClass('is-invalid');
|
||||
|
||||
try {
|
||||
// Validate required fields.
|
||||
let missingRequired = false;
|
||||
|
||||
$admins.find('.required').each((index, requiredField) => {
|
||||
if (!$(requiredField).val()) {
|
||||
$(requiredField).addClass('is-invalid');
|
||||
missingRequired = true;
|
||||
}
|
||||
});
|
||||
|
||||
if (missingRequired) {
|
||||
throw new Error('Fields with * are required.');
|
||||
}
|
||||
|
||||
// Validate passwords.
|
||||
if ($password.val() !== $passwordConfirmation.val()) {
|
||||
$('#password, #password-confirm').addClass('is-invalid');
|
||||
throw new Error(lang('passwords_mismatch'));
|
||||
}
|
||||
|
||||
if ($password.val().length < vars('min_password_length') && $password.val() !== '') {
|
||||
$('#password, #password-confirm').addClass('is-invalid');
|
||||
throw new Error(lang('password_length_notice').replace('$number', vars('min_password_length')));
|
||||
}
|
||||
|
||||
// Validate user email.
|
||||
if (!App.Utils.Validation.email($email.val())) {
|
||||
$email.addClass('is-invalid');
|
||||
throw new Error(lang('invalid_email'));
|
||||
}
|
||||
|
||||
// Validate phone number.
|
||||
const phoneNumber = $phoneNumber.val();
|
||||
|
||||
if (phoneNumber && !App.Utils.Validation.phone(phoneNumber)) {
|
||||
$phoneNumber.addClass('is-invalid');
|
||||
throw new Error(lang('invalid_phone'));
|
||||
}
|
||||
|
||||
// Validate mobile number.
|
||||
const mobileNumber = $mobileNumber.val();
|
||||
|
||||
if (mobileNumber && !App.Utils.Validation.phone(mobileNumber)) {
|
||||
$mobileNumber.addClass('is-invalid');
|
||||
throw new Error(lang('invalid_phone'));
|
||||
}
|
||||
|
||||
// Check if username exists
|
||||
if ($username.attr('already-exists') === 'true') {
|
||||
$username.addClass('is-invalid');
|
||||
throw new Error(lang('username_already_exists'));
|
||||
}
|
||||
|
||||
return true;
|
||||
} catch (error) {
|
||||
$admins.find('.form-message').addClass('alert-danger').text(error.message).show();
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Resets the admin form back to its initial state.
|
||||
*/
|
||||
function resetForm() {
|
||||
$('#filter-admins .selected').removeClass('selected');
|
||||
$('#filter-admins button').prop('disabled', false);
|
||||
$('#filter-admins .results').css('color', '');
|
||||
|
||||
$admins.find('.add-edit-delete-group').show();
|
||||
$admins.find('.save-cancel-group').hide();
|
||||
$admins.find('.record-details').find('input, select, textarea').val('').prop('disabled', true);
|
||||
$admins.find('.record-details .form-label span').prop('hidden', true);
|
||||
$admins.find('.record-details #calendar-view').val('default');
|
||||
$admins.find('.record-details #language').val(vars('default_language'));
|
||||
$admins.find('.record-details #timezone').val(vars('default_timezone'));
|
||||
$admins.find('.record-details #notifications').prop('checked', true);
|
||||
$('#edit-admin, #delete-admin').prop('disabled', true);
|
||||
|
||||
$('#admins .is-invalid').removeClass('is-invalid');
|
||||
$('#admins .form-message').hide();
|
||||
}
|
||||
|
||||
/**
|
||||
* Display a admin record into the admin form.
|
||||
*
|
||||
* @param {Object} admin Contains the admin record data.
|
||||
*/
|
||||
function display(admin) {
|
||||
$id.val(admin.id);
|
||||
$firstName.val(admin.first_name);
|
||||
$lastName.val(admin.last_name);
|
||||
$email.val(admin.email);
|
||||
$mobileNumber.val(admin.mobile_number);
|
||||
$phoneNumber.val(admin.phone_number);
|
||||
$address.val(admin.address);
|
||||
$city.val(admin.city);
|
||||
$state.val(admin.state);
|
||||
$zipCode.val(admin.zip_code);
|
||||
$notes.val(admin.notes);
|
||||
$language.val(admin.language);
|
||||
$timezone.val(admin.timezone);
|
||||
$ldapDn.val(admin.ldap_dn);
|
||||
|
||||
$username.val(admin.settings.username);
|
||||
$calendarView.val(admin.settings.calendar_view);
|
||||
$notifications.prop('checked', Boolean(Number(admin.settings.notifications)));
|
||||
}
|
||||
|
||||
/**
|
||||
* Filters admin records by a keyword string.
|
||||
*
|
||||
* @param {String} keyword This string is used to filter the admin records of the database.
|
||||
* @param {Number} [selectId] (OPTIONAL = undefined) This record id will be selected when
|
||||
* the filter operation is finished.
|
||||
* @param {Boolean} [show] (OPTIONAL = false) If true the selected record data are going
|
||||
* to be displayed on the details column (requires a selected record though).
|
||||
*/
|
||||
function filter(keyword, selectId = null, show = false) {
|
||||
App.Http.Admins.search(keyword, filterLimit).then((response) => {
|
||||
filterResults = response;
|
||||
|
||||
$filterAdmins.find('.results').empty();
|
||||
|
||||
response.forEach((admin) => {
|
||||
$filterAdmins.find('.results').append(App.Pages.Admins.getFilterHtml(admin)).append($('<hr/>'));
|
||||
});
|
||||
|
||||
if (!response.length) {
|
||||
$filterAdmins.find('.results').append(
|
||||
$('<em/>', {
|
||||
'text': lang('no_records_found'),
|
||||
}),
|
||||
);
|
||||
} else if (response.length === filterLimit) {
|
||||
$('<button/>', {
|
||||
'type': 'button',
|
||||
'class': 'btn btn-outline-secondary w-100 load-more text-center',
|
||||
'text': lang('load_more'),
|
||||
'click': () => {
|
||||
filterLimit += 20;
|
||||
App.Pages.Admins.filter(keyword, selectId, show);
|
||||
},
|
||||
}).appendTo('#filter-admins .results');
|
||||
}
|
||||
|
||||
if (selectId) {
|
||||
App.Pages.Admins.select(selectId, show);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Get an admin row html code that is going to be displayed on the filter results list.
|
||||
*
|
||||
* @param {Object} admin Contains the admin record data.
|
||||
*
|
||||
* @return {String} The html code that represents the record on the filter results list.
|
||||
*/
|
||||
function getFilterHtml(admin) {
|
||||
const name = admin.first_name + ' ' + admin.last_name;
|
||||
|
||||
let info = admin.email;
|
||||
|
||||
info = admin.mobile_number ? info + ', ' + admin.mobile_number : info;
|
||||
|
||||
info = admin.phone_number ? info + ', ' + admin.phone_number : info;
|
||||
|
||||
return $('<div/>', {
|
||||
'class': 'admin-row entry',
|
||||
'data-id': admin.id,
|
||||
'html': [
|
||||
$('<strong/>', {
|
||||
'text': name,
|
||||
}),
|
||||
$('<br/>'),
|
||||
$('<small/>', {
|
||||
'class': 'text-muted',
|
||||
'text': info,
|
||||
}),
|
||||
$('<br/>'),
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Select a specific record from the current filter results. If the admin id does not exist
|
||||
* in the list then no record will be selected.
|
||||
*
|
||||
* @param {Number} id The record id to be selected from the filter results.
|
||||
* @param {Boolean} show Optional (false), if true then the method will display the record
|
||||
* on the form.
|
||||
*/
|
||||
function select(id, show = false) {
|
||||
$filterAdmins.find('.selected').removeClass('selected');
|
||||
|
||||
$filterAdmins.find('.admin-row[data-id="' + id + '"]').addClass('selected');
|
||||
|
||||
if (show) {
|
||||
const admin = filterResults.find((filterResult) => Number(filterResult.id) === Number(id));
|
||||
|
||||
App.Pages.Admins.display(admin);
|
||||
|
||||
$('#edit-admin, #delete-admin').prop('disabled', false);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize the module.
|
||||
*/
|
||||
function initialize() {
|
||||
App.Pages.Admins.resetForm();
|
||||
App.Pages.Admins.filter('');
|
||||
App.Pages.Admins.addEventListeners();
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', initialize);
|
||||
|
||||
return {
|
||||
filter,
|
||||
save,
|
||||
remove,
|
||||
validate,
|
||||
getFilterHtml,
|
||||
resetForm,
|
||||
display,
|
||||
select,
|
||||
addEventListeners,
|
||||
};
|
||||
})();
|
||||
109
assets/js/pages/api_settings.js
Normal file
109
assets/js/pages/api_settings.js
Normal file
@ -0,0 +1,109 @@
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Easy!Appointments - Online Appointment Scheduler
|
||||
*
|
||||
* @package EasyAppointments
|
||||
* @author A.Tselegidis <alextselegidis@gmail.com>
|
||||
* @copyright Copyright (c) Alex Tselegidis
|
||||
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
|
||||
* @link https://easyappointments.org
|
||||
* @since v1.5.0
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
/**
|
||||
* API settings page.
|
||||
*
|
||||
* This module implements the functionality of the API settings page.
|
||||
*/
|
||||
App.Pages.ApiSettings = (function () {
|
||||
const $saveSettings = $('#save-settings');
|
||||
|
||||
/**
|
||||
* Check if the form has invalid values.
|
||||
*
|
||||
* @return {Boolean}
|
||||
*/
|
||||
function isInvalid() {
|
||||
try {
|
||||
$('#api-settings .is-invalid').removeClass('is-invalid');
|
||||
|
||||
// Validate required fields.
|
||||
|
||||
let missingRequiredFields = false;
|
||||
|
||||
$('#api-settings .required').each((index, requiredField) => {
|
||||
const $requiredField = $(requiredField);
|
||||
|
||||
if (!$requiredField.val()) {
|
||||
$requiredField.addClass('is-invalid');
|
||||
missingRequiredFields = true;
|
||||
}
|
||||
});
|
||||
|
||||
if (missingRequiredFields) {
|
||||
throw new Error(lang('fields_are_required'));
|
||||
}
|
||||
|
||||
return false;
|
||||
} catch (error) {
|
||||
App.Layouts.Backend.displayNotification(error.message);
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
function deserialize(apiSettings) {
|
||||
apiSettings.forEach((apiSetting) => {
|
||||
const $field = $('[data-field="' + apiSetting.name + '"]');
|
||||
|
||||
$field.is(':checkbox')
|
||||
? $field.prop('checked', Boolean(Number(apiSetting.value)))
|
||||
: $field.val(apiSetting.value);
|
||||
});
|
||||
}
|
||||
|
||||
function serialize() {
|
||||
const apiSettings = [];
|
||||
|
||||
$('[data-field]').each((index, field) => {
|
||||
const $field = $(field);
|
||||
|
||||
apiSettings.push({
|
||||
name: $field.data('field'),
|
||||
value: $field.is(':checkbox') ? Number($field.prop('checked')) : $field.val(),
|
||||
});
|
||||
});
|
||||
|
||||
return apiSettings;
|
||||
}
|
||||
|
||||
/**
|
||||
* Save the account information.
|
||||
*/
|
||||
function onSaveSettingsClick() {
|
||||
if (isInvalid()) {
|
||||
App.Layouts.Backend.displayNotification(lang('settings_are_invalid'));
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
const apiSettings = serialize();
|
||||
|
||||
App.Http.ApiSettings.save(apiSettings).done(() => {
|
||||
App.Layouts.Backend.displayNotification(lang('settings_saved'));
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize the module.
|
||||
*/
|
||||
function initialize() {
|
||||
$saveSettings.on('click', onSaveSettingsClick);
|
||||
|
||||
const apiSettings = vars('api_settings');
|
||||
|
||||
deserialize(apiSettings);
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', initialize);
|
||||
|
||||
return {};
|
||||
})();
|
||||
395
assets/js/pages/blocked_periods.js
Normal file
395
assets/js/pages/blocked_periods.js
Normal file
@ -0,0 +1,395 @@
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Easy!Appointments - Online Appointment Scheduler
|
||||
*
|
||||
* @package EasyAppointments
|
||||
* @author A.Tselegidis <alextselegidis@gmail.com>
|
||||
* @copyright Copyright (c) Alex Tselegidis
|
||||
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
|
||||
* @link https://easyappointments.org
|
||||
* @since v1.5.0
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
/**
|
||||
* Blocked-periods page.
|
||||
*
|
||||
* This module implements the functionality of the blocked-periods page.
|
||||
*/
|
||||
App.Pages.BlockedPeriods = (function () {
|
||||
const $blockedPeriods = $('#blocked-periods');
|
||||
const $filterBlockedPeriods = $('#filter-blocked-periods');
|
||||
const $id = $('#id');
|
||||
const $name = $('#name');
|
||||
const $startDateTime = $('#start-date-time');
|
||||
const $endDateTime = $('#end-date-time');
|
||||
const $notes = $('#notes');
|
||||
const moment = window.moment;
|
||||
|
||||
let filterResults = {};
|
||||
let filterLimit = 20;
|
||||
let backupStartDateTimeObject = undefined;
|
||||
|
||||
/**
|
||||
* Add the page event listeners.
|
||||
*/
|
||||
function addEventListeners() {
|
||||
/**
|
||||
* Event: Filter Blocked Periods Form "Submit"
|
||||
*
|
||||
* @param {jQuery.Event} event
|
||||
*/
|
||||
$blockedPeriods.on('submit', '#filter-blocked-periods form', (event) => {
|
||||
event.preventDefault();
|
||||
const key = $('#filter-blocked-periods .key').val();
|
||||
$('.selected').removeClass('selected');
|
||||
App.Pages.BlockedPeriods.resetForm();
|
||||
App.Pages.BlockedPeriods.filter(key);
|
||||
});
|
||||
|
||||
/**
|
||||
* Event: Filter Blocked-Periods Row "Click"
|
||||
*
|
||||
* Displays the selected row data on the right side of the page.
|
||||
*
|
||||
* @param {jQuery.Event} event
|
||||
*/
|
||||
$blockedPeriods.on('click', '.blocked-period-row', (event) => {
|
||||
if ($('#filter-blocked-periods .filter').prop('disabled')) {
|
||||
$('#filter-blocked-periods .results').css('color', '#AAA');
|
||||
return; // exit because we are on edit mode
|
||||
}
|
||||
|
||||
const blockedPeriodId = $(event.currentTarget).attr('data-id');
|
||||
|
||||
const blockedPeriod = filterResults.find(
|
||||
(filterResult) => Number(filterResult.id) === Number(blockedPeriodId),
|
||||
);
|
||||
|
||||
App.Pages.BlockedPeriods.display(blockedPeriod);
|
||||
$('#filter-blocked-periods .selected').removeClass('selected');
|
||||
$(event.currentTarget).addClass('selected');
|
||||
$('#edit-blocked-period, #delete-blocked-period').prop('disabled', false);
|
||||
});
|
||||
|
||||
/**
|
||||
* Event: Add Blocked-Period Button "Click"
|
||||
*/
|
||||
$blockedPeriods.on('click', '#add-blocked-period', () => {
|
||||
App.Pages.BlockedPeriods.resetForm();
|
||||
$blockedPeriods.find('.add-edit-delete-group').hide();
|
||||
$blockedPeriods.find('.save-cancel-group').show();
|
||||
$blockedPeriods.find('.record-details').find('input, select, textarea').prop('disabled', false);
|
||||
$blockedPeriods.find('.record-details .form-label span').prop('hidden', false);
|
||||
$filterBlockedPeriods.find('button').prop('disabled', true);
|
||||
$filterBlockedPeriods.find('.results').css('color', '#AAA');
|
||||
|
||||
App.Utils.UI.setDateTimePickerValue($startDateTime, moment('00:00', 'HH:mm').toDate());
|
||||
App.Utils.UI.setDateTimePickerValue($endDateTime, moment('00:00', 'HH:mm').add(1, 'day').toDate());
|
||||
});
|
||||
|
||||
/**
|
||||
* Event: Edit Blocked-Period Button "Click"
|
||||
*/
|
||||
$blockedPeriods.on('click', '#edit-blocked-period', () => {
|
||||
$blockedPeriods.find('.add-edit-delete-group').hide();
|
||||
$blockedPeriods.find('.save-cancel-group').show();
|
||||
$blockedPeriods.find('.record-details').find('input, select, textarea').prop('disabled', false);
|
||||
$blockedPeriods.find('.record-details .form-label span').prop('hidden', false);
|
||||
$filterBlockedPeriods.find('button').prop('disabled', true);
|
||||
$filterBlockedPeriods.find('.results').css('color', '#AAA');
|
||||
});
|
||||
|
||||
/**
|
||||
* Event: Delete Blocked-Period Button "Click"
|
||||
*/
|
||||
$blockedPeriods.on('click', '#delete-blocked-period', () => {
|
||||
const blockedPeriodId = $id.val();
|
||||
|
||||
const buttons = [
|
||||
{
|
||||
text: lang('cancel'),
|
||||
click: (event, messageModal) => {
|
||||
messageModal.hide();
|
||||
},
|
||||
},
|
||||
{
|
||||
text: lang('delete'),
|
||||
click: (event, messageModal) => {
|
||||
App.Pages.BlockedPeriods.remove(blockedPeriodId);
|
||||
messageModal.hide();
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
App.Utils.Message.show(lang('delete_blocked_period'), lang('delete_record_prompt'), buttons);
|
||||
});
|
||||
|
||||
/**
|
||||
* Event: Blocked period Save Button "Click"
|
||||
*/
|
||||
$blockedPeriods.on('click', '#save-blocked-period', () => {
|
||||
const startDateTimeObject = App.Utils.UI.getDateTimePickerValue($startDateTime);
|
||||
const startDateTimeMoment = moment(startDateTimeObject);
|
||||
const endDateTimeObject = App.Utils.UI.getDateTimePickerValue($endDateTime);
|
||||
const endDateTimeMoment = moment(endDateTimeObject);
|
||||
|
||||
const blockedPeriod = {
|
||||
name: $name.val(),
|
||||
start_datetime: startDateTimeMoment.format('YYYY-MM-DD HH:mm:ss'),
|
||||
end_datetime: endDateTimeMoment.format('YYYY-MM-DD HH:mm:ss'),
|
||||
notes: $notes.val(),
|
||||
};
|
||||
|
||||
if ($id.val() !== '') {
|
||||
blockedPeriod.id = $id.val();
|
||||
}
|
||||
|
||||
if (!App.Pages.BlockedPeriods.validate()) {
|
||||
return;
|
||||
}
|
||||
|
||||
App.Pages.BlockedPeriods.save(blockedPeriod);
|
||||
});
|
||||
|
||||
/**
|
||||
* Event: Cancel Blocked-Period Button "Click"
|
||||
*/
|
||||
$blockedPeriods.on('click', '#cancel-blocked-period', () => {
|
||||
const id = $id.val();
|
||||
App.Pages.BlockedPeriods.resetForm();
|
||||
if (id !== '') {
|
||||
App.Pages.BlockedPeriods.select(id, true);
|
||||
}
|
||||
});
|
||||
|
||||
$blockedPeriods.on('focus', '#start-date-time', () => {
|
||||
backupStartDateTimeObject = App.Utils.UI.getDateTimePickerValue($startDateTime);
|
||||
});
|
||||
|
||||
/**
|
||||
* Event: Start Date Time Input "Change"
|
||||
*/
|
||||
$blockedPeriods.on('change', '#start-date-time', (event) => {
|
||||
const endDateTimeObject = App.Utils.UI.getDateTimePickerValue($endDateTime);
|
||||
|
||||
if (!backupStartDateTimeObject || !endDateTimeObject) {
|
||||
return;
|
||||
}
|
||||
|
||||
const endDateTimeMoment = moment(endDateTimeObject);
|
||||
const backupStartDateTimeMoment = moment(backupStartDateTimeObject);
|
||||
const diff = endDateTimeMoment.diff(backupStartDateTimeMoment);
|
||||
const newEndDateTimeMoment = endDateTimeMoment.clone().add(diff, 'milliseconds');
|
||||
App.Utils.UI.setDateTimePickerValue($endDateTime, newEndDateTimeMoment.toDate());
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Filter blocked periods records.
|
||||
*
|
||||
* @param {String} keyword This key string is used to filter the blocked-period records.
|
||||
* @param {Number} selectId Optional, if set then after the filter operation the record with the given ID will be
|
||||
* selected (but not displayed).
|
||||
* @param {Boolean} show Optional (false), if true then the selected record will be displayed on the form.
|
||||
*/
|
||||
function filter(keyword, selectId = null, show = false) {
|
||||
App.Http.BlockedPeriods.search(keyword, filterLimit).then((response) => {
|
||||
filterResults = response;
|
||||
|
||||
$('#filter-blocked-periods .results').empty();
|
||||
|
||||
response.forEach((blockedPeriod) => {
|
||||
$('#filter-blocked-periods .results')
|
||||
.append(App.Pages.BlockedPeriods.getFilterHtml(blockedPeriod))
|
||||
.append($('<hr/>'));
|
||||
});
|
||||
|
||||
if (response.length === 0) {
|
||||
$('#filter-blocked-periods .results').append(
|
||||
$('<em/>', {
|
||||
'text': lang('no_records_found'),
|
||||
}),
|
||||
);
|
||||
} else if (response.length === filterLimit) {
|
||||
$('<button/>', {
|
||||
'type': 'button',
|
||||
'class': 'btn btn-outline-secondary w-100 load-more text-center',
|
||||
'text': lang('load_more'),
|
||||
'click': () => {
|
||||
filterLimit += 20;
|
||||
App.Pages.BlockedPeriods.filter(keyword, selectId, show);
|
||||
},
|
||||
}).appendTo('#filter-blocked-periods .results');
|
||||
}
|
||||
|
||||
if (selectId) {
|
||||
App.Pages.BlockedPeriods.select(selectId, show);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Save a blocked-period record to the database (via AJAX post).
|
||||
*
|
||||
* @param {Object} blockedPeriod Contains the blocked-period data.
|
||||
*/
|
||||
function save(blockedPeriod) {
|
||||
App.Http.BlockedPeriods.save(blockedPeriod).then((response) => {
|
||||
App.Layouts.Backend.displayNotification(lang('blocked_period_saved'));
|
||||
App.Pages.BlockedPeriods.resetForm();
|
||||
$filterBlockedPeriods.find('.key').val('');
|
||||
App.Pages.BlockedPeriods.filter('', response.id, true);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Delete blocked-period record.
|
||||
*
|
||||
* @param {Number} id Record ID to be deleted.
|
||||
*/
|
||||
function remove(id) {
|
||||
App.Http.BlockedPeriods.destroy(id).then(() => {
|
||||
App.Layouts.Backend.displayNotification(lang('blocked_period_deleted'));
|
||||
App.Pages.BlockedPeriods.resetForm();
|
||||
App.Pages.BlockedPeriods.filter($('#filter-blocked-periods .key').val());
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Display a blocked-period record on the form.
|
||||
*
|
||||
* @param {Object} blockedPeriod Contains the blocked-period data.
|
||||
*/
|
||||
function display(blockedPeriod) {
|
||||
$id.val(blockedPeriod.id);
|
||||
$name.val(blockedPeriod.name);
|
||||
App.Utils.UI.setDateTimePickerValue($startDateTime, new Date(blockedPeriod.start_datetime));
|
||||
App.Utils.UI.setDateTimePickerValue($endDateTime, new Date(blockedPeriod.end_datetime));
|
||||
$notes.val(blockedPeriod.notes);
|
||||
}
|
||||
|
||||
/**
|
||||
* Validate blocked-period data before save (insert or update).
|
||||
*
|
||||
* @return {Boolean} Returns the validation result.
|
||||
*/
|
||||
function validate() {
|
||||
$blockedPeriods.find('.is-invalid').removeClass('is-invalid');
|
||||
$blockedPeriods.find('.form-message').removeClass('alert-danger').hide();
|
||||
|
||||
try {
|
||||
let missingRequired = false;
|
||||
|
||||
$blockedPeriods.find('.required').each((index, fieldEl) => {
|
||||
if (!$(fieldEl).val()) {
|
||||
$(fieldEl).addClass('is-invalid');
|
||||
missingRequired = true;
|
||||
}
|
||||
});
|
||||
|
||||
if (missingRequired) {
|
||||
throw new Error(lang('fields_are_required'));
|
||||
}
|
||||
|
||||
const startDateTimeObject = App.Utils.UI.getDateTimePickerValue($startDateTime);
|
||||
const endDateTimeObject = App.Utils.UI.getDateTimePickerValue($endDateTime);
|
||||
|
||||
if (startDateTimeObject >= endDateTimeObject) {
|
||||
$startDateTime.addClass('is-invalid');
|
||||
$endDateTime.addClass('is-invalid');
|
||||
throw new Error(lang('start_date_before_end_error'));
|
||||
}
|
||||
|
||||
return true;
|
||||
} catch (error) {
|
||||
$blockedPeriods.find('.form-message').addClass('alert-danger').text(error.message).show();
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Bring the blocked-period form back to its initial state.
|
||||
*/
|
||||
function resetForm() {
|
||||
$filterBlockedPeriods.find('.selected').removeClass('selected');
|
||||
$filterBlockedPeriods.find('button').prop('disabled', false);
|
||||
$filterBlockedPeriods.find('.results').css('color', '');
|
||||
|
||||
$blockedPeriods.find('.add-edit-delete-group').show();
|
||||
$blockedPeriods.find('.save-cancel-group').hide();
|
||||
$blockedPeriods.find('.record-details').find('input, select, textarea').val('').prop('disabled', true);
|
||||
$blockedPeriods.find('.record-details .form-label span').prop('hidden', true);
|
||||
$('#edit-blocked-period, #delete-blocked-period').prop('disabled', true);
|
||||
|
||||
$blockedPeriods.find('.record-details .is-invalid').removeClass('is-invalid');
|
||||
$blockedPeriods.find('.record-details .form-message').hide();
|
||||
|
||||
backupStartDateTimeObject = undefined;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the filter results row HTML code.
|
||||
*
|
||||
* @param {Object} blockedPeriod Contains the blocked-period data.
|
||||
*
|
||||
* @return {String} Returns the record HTML code.
|
||||
*/
|
||||
function getFilterHtml(blockedPeriod) {
|
||||
return $('<div/>', {
|
||||
'class': 'blocked-period-row entry',
|
||||
'data-id': blockedPeriod.id,
|
||||
'html': [
|
||||
$('<strong/>', {
|
||||
'text': blockedPeriod.name,
|
||||
}),
|
||||
$('<br/>'),
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Select a specific record from the current filter results.
|
||||
*
|
||||
* If the blocked-period ID does not exist in the list then no record will be selected.
|
||||
*
|
||||
* @param {Number} id The record ID to be selected from the filter results.
|
||||
* @param {Boolean} show Optional (false), if true then the method will display the record on the form.
|
||||
*/
|
||||
function select(id, show = false) {
|
||||
$filterBlockedPeriods.find('.selected').removeClass('selected');
|
||||
|
||||
$filterBlockedPeriods.find('.blocked-period-row[data-id="' + id + '"]').addClass('selected');
|
||||
|
||||
if (show) {
|
||||
const blockedPeriod = filterResults.find((blockedPeriod) => Number(blockedPeriod.id) === Number(id));
|
||||
|
||||
App.Pages.BlockedPeriods.display(blockedPeriod);
|
||||
|
||||
$('#edit-blocked-period, #delete-blocked-period').prop('disabled', false);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize the module.
|
||||
*/
|
||||
function initialize() {
|
||||
App.Pages.BlockedPeriods.resetForm();
|
||||
App.Pages.BlockedPeriods.filter('');
|
||||
App.Pages.BlockedPeriods.addEventListeners();
|
||||
App.Utils.UI.initializeDateTimePicker($startDateTime);
|
||||
App.Utils.UI.initializeDateTimePicker($endDateTime);
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', initialize);
|
||||
|
||||
return {
|
||||
filter,
|
||||
save,
|
||||
remove,
|
||||
validate,
|
||||
getFilterHtml,
|
||||
resetForm,
|
||||
display,
|
||||
select,
|
||||
addEventListeners,
|
||||
};
|
||||
})();
|
||||
974
assets/js/pages/booking.js
Normal file
974
assets/js/pages/booking.js
Normal file
@ -0,0 +1,974 @@
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Easy!Appointments - Online Appointment Scheduler
|
||||
*
|
||||
* @package EasyAppointments
|
||||
* @author A.Tselegidis <alextselegidis@gmail.com>
|
||||
* @copyright Copyright (c) Alex Tselegidis
|
||||
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
|
||||
* @link https://easyappointments.org
|
||||
* @since v1.5.0
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
/**
|
||||
* Booking page.
|
||||
*
|
||||
* This module implements the functionality of the booking page
|
||||
*
|
||||
* Old Name: FrontendBook
|
||||
*/
|
||||
App.Pages.Booking = (function () {
|
||||
const $selectDate = $('#select-date');
|
||||
const $selectService = $('#select-service');
|
||||
const $selectProvider = $('#select-provider');
|
||||
const $selectTimezone = $('#select-timezone');
|
||||
const $firstName = $('#first-name');
|
||||
const $lastName = $('#last-name');
|
||||
const $email = $('#email');
|
||||
const $phoneNumber = $('#phone-number');
|
||||
const $address = $('#address');
|
||||
const $city = $('#city');
|
||||
const $zipCode = $('#zip-code');
|
||||
const $notes = $('#notes');
|
||||
const $captchaTitle = $('.captcha-title');
|
||||
const $availableHours = $('#available-hours');
|
||||
const $bookAppointmentSubmit = $('#book-appointment-submit');
|
||||
const $deletePersonalInformation = $('#delete-personal-information');
|
||||
const $customField1 = $('#custom-field-1');
|
||||
const $customField2 = $('#custom-field-2');
|
||||
const $customField3 = $('#custom-field-3');
|
||||
const $customField4 = $('#custom-field-4');
|
||||
const $customField5 = $('#custom-field-5');
|
||||
const $displayBookingSelection = $('.display-booking-selection');
|
||||
const tippy = window.tippy;
|
||||
const moment = window.moment;
|
||||
|
||||
/**
|
||||
* Determines the functionality of the page.
|
||||
*
|
||||
* @type {Boolean}
|
||||
*/
|
||||
let manageMode = vars('manage_mode') || false;
|
||||
|
||||
/**
|
||||
* Detect the month step.
|
||||
*
|
||||
* @param previousDateTimeMoment
|
||||
* @param nextDateTimeMoment
|
||||
*
|
||||
* @returns {Number}
|
||||
*/
|
||||
function detectDatepickerMonthChangeStep(previousDateTimeMoment, nextDateTimeMoment) {
|
||||
return previousDateTimeMoment.isAfter(nextDateTimeMoment) ? -1 : 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize the module.
|
||||
*/
|
||||
function initialize() {
|
||||
if (Boolean(Number(vars('display_cookie_notice'))) && window?.cookieconsent) {
|
||||
cookieconsent.initialise({
|
||||
palette: {
|
||||
popup: {
|
||||
background: '#ffffffbd',
|
||||
text: '#666666',
|
||||
},
|
||||
button: {
|
||||
background: '#429a82',
|
||||
text: '#ffffff',
|
||||
},
|
||||
},
|
||||
content: {
|
||||
message: lang('website_using_cookies_to_ensure_best_experience'),
|
||||
dismiss: 'OK',
|
||||
},
|
||||
});
|
||||
|
||||
const $cookieNoticeLink = $('.cc-link');
|
||||
|
||||
$cookieNoticeLink.replaceWith(
|
||||
$('<a/>', {
|
||||
'data-bs-toggle': 'modal',
|
||||
'data-bs-target': '#cookie-notice-modal',
|
||||
'href': '#',
|
||||
'class': 'cc-link',
|
||||
'text': $cookieNoticeLink.text(),
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
manageMode = vars('manage_mode');
|
||||
|
||||
// Initialize page's components (tooltips, date pickers etc).
|
||||
tippy('[data-tippy-content]');
|
||||
|
||||
let monthTimeout;
|
||||
|
||||
App.Utils.UI.initializeDatePicker($selectDate, {
|
||||
inline: true,
|
||||
minDate: moment().subtract(1, 'day').set({hours: 23, minutes: 59, seconds: 59}).toDate(),
|
||||
maxDate: moment().add(vars('future_booking_limit'), 'days').toDate(),
|
||||
onChange: (selectedDates) => {
|
||||
App.Http.Booking.getAvailableHours(moment(selectedDates[0]).format('YYYY-MM-DD'));
|
||||
App.Pages.Booking.updateConfirmFrame();
|
||||
},
|
||||
|
||||
onMonthChange: (selectedDates, dateStr, instance) => {
|
||||
$selectDate.parent().fadeTo(400, 0.3); // Change opacity during loading
|
||||
|
||||
if (monthTimeout) {
|
||||
clearTimeout(monthTimeout);
|
||||
}
|
||||
|
||||
monthTimeout = setTimeout(() => {
|
||||
const previousMoment = moment(instance.selectedDates[0]);
|
||||
|
||||
const displayedMonthMoment = moment(
|
||||
instance.currentYearElement.value +
|
||||
'-' +
|
||||
String(Number(instance.monthsDropdownContainer.value) + 1).padStart(2, '0') +
|
||||
'-01',
|
||||
);
|
||||
|
||||
const monthChangeStep = detectDatepickerMonthChangeStep(previousMoment, displayedMonthMoment);
|
||||
|
||||
App.Http.Booking.getUnavailableDates(
|
||||
$selectProvider.val(),
|
||||
$selectService.val(),
|
||||
displayedMonthMoment.format('YYYY-MM-DD'),
|
||||
monthChangeStep,
|
||||
);
|
||||
}, 500);
|
||||
},
|
||||
|
||||
onYearChange: (selectedDates, dateStr, instance) => {
|
||||
setTimeout(() => {
|
||||
const previousMoment = moment(instance.selectedDates[0]);
|
||||
|
||||
const displayedMonthMoment = moment(
|
||||
instance.currentYearElement.value +
|
||||
'-' +
|
||||
(Number(instance.monthsDropdownContainer.value) + 1) +
|
||||
'-01',
|
||||
);
|
||||
|
||||
const monthChangeStep = detectDatepickerMonthChangeStep(previousMoment, displayedMonthMoment);
|
||||
|
||||
App.Http.Booking.getUnavailableDates(
|
||||
$selectProvider.val(),
|
||||
$selectService.val(),
|
||||
displayedMonthMoment.format('YYYY-MM-DD'),
|
||||
monthChangeStep,
|
||||
);
|
||||
}, 500);
|
||||
},
|
||||
});
|
||||
|
||||
App.Utils.UI.setDateTimePickerValue($selectDate, new Date());
|
||||
|
||||
const browserTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
|
||||
const isTimezoneSupported = $selectTimezone.find(`option[value="${browserTimezone}"]`).length > 0;
|
||||
$selectTimezone.val(isTimezoneSupported ? browserTimezone : 'UTC');
|
||||
|
||||
// Bind the event handlers (might not be necessary every time we use this class).
|
||||
addEventListeners();
|
||||
|
||||
optimizeContactInfoDisplay();
|
||||
|
||||
const serviceOptionCount = $selectService.find('option').length;
|
||||
|
||||
if (serviceOptionCount === 2) {
|
||||
$selectService.find('option[value=""]').remove();
|
||||
const firstServiceId = $selectService.find('option:first').attr('value');
|
||||
$selectService.val(firstServiceId).trigger('change');
|
||||
}
|
||||
|
||||
// If the manage mode is true, the appointment data should be loaded by default.
|
||||
if (manageMode) {
|
||||
applyAppointmentData(vars('appointment_data'), vars('provider_data'), vars('customer_data'));
|
||||
|
||||
$('#wizard-frame-1')
|
||||
.css({
|
||||
'visibility': 'visible',
|
||||
'display': 'none',
|
||||
})
|
||||
.fadeIn();
|
||||
} else {
|
||||
// Check if a specific service was selected (via URL parameter).
|
||||
const selectedServiceId = App.Utils.Url.queryParam('service');
|
||||
|
||||
if (selectedServiceId && $selectService.find('option[value="' + selectedServiceId + '"]').length > 0) {
|
||||
$selectService.val(selectedServiceId);
|
||||
}
|
||||
|
||||
$selectService.trigger('change'); // Load the available hours.
|
||||
|
||||
// Check if a specific provider was selected.
|
||||
const selectedProviderId = App.Utils.Url.queryParam('provider');
|
||||
|
||||
if (selectedProviderId && $selectProvider.find('option[value="' + selectedProviderId + '"]').length === 0) {
|
||||
// Select a service of this provider in order to make the provider available in the select box.
|
||||
for (const index in vars('available_providers')) {
|
||||
const provider = vars('available_providers')[index];
|
||||
|
||||
if (Number(provider.id) === Number(selectedProviderId) && provider.services.length > 0) {
|
||||
$selectService.val(provider.services[0]).trigger('change');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (selectedProviderId && $selectProvider.find('option[value="' + selectedProviderId + '"]').length > 0) {
|
||||
$selectProvider.val(selectedProviderId).trigger('change');
|
||||
}
|
||||
|
||||
if (
|
||||
(selectedServiceId && selectedProviderId) ||
|
||||
(vars('available_services').length === 1 && vars('available_providers').length === 1)
|
||||
) {
|
||||
if (!selectedServiceId) {
|
||||
$selectService.val(vars('available_services')[0].id).trigger('change');
|
||||
}
|
||||
|
||||
if (!selectedProviderId) {
|
||||
$selectProvider.val(vars('available_providers')[0].id).trigger('change');
|
||||
}
|
||||
|
||||
$('.active-step').removeClass('active-step');
|
||||
$('#step-2').addClass('active-step');
|
||||
$('#wizard-frame-1').hide();
|
||||
$('#wizard-frame-2').fadeIn();
|
||||
|
||||
$selectService.closest('.wizard-frame').find('.button-next').trigger('click');
|
||||
|
||||
$(document).find('.book-step:first').hide();
|
||||
|
||||
$(document).find('.button-back:first').css('visibility', 'hidden');
|
||||
|
||||
$(document)
|
||||
.find('.book-step:not(:first)')
|
||||
.each((index, bookStepEl) =>
|
||||
$(bookStepEl)
|
||||
.find('strong')
|
||||
.text(index + 1),
|
||||
);
|
||||
} else {
|
||||
$('#wizard-frame-1')
|
||||
.css({
|
||||
'visibility': 'visible',
|
||||
'display': 'none',
|
||||
})
|
||||
.fadeIn();
|
||||
}
|
||||
|
||||
prefillFromQueryParam('#first-name', 'first_name');
|
||||
prefillFromQueryParam('#last-name', 'last_name');
|
||||
prefillFromQueryParam('#email', 'email');
|
||||
prefillFromQueryParam('#phone-number', 'phone');
|
||||
prefillFromQueryParam('#address', 'address');
|
||||
prefillFromQueryParam('#city', 'city');
|
||||
prefillFromQueryParam('#zip-code', 'zip');
|
||||
}
|
||||
}
|
||||
|
||||
function prefillFromQueryParam(field, param) {
|
||||
const $target = $(field);
|
||||
|
||||
if (!$target.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
$target.val(App.Utils.Url.queryParam(param));
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove empty columns and center elements if needed.
|
||||
*/
|
||||
function optimizeContactInfoDisplay() {
|
||||
// If a column has only one control shown then move the control to the other column.
|
||||
|
||||
const $firstCol = $('#wizard-frame-3 .field-col:first');
|
||||
const $firstColControls = $firstCol.find('.form-control');
|
||||
const $secondCol = $('#wizard-frame-3 .field-col:last');
|
||||
const $secondColControls = $secondCol.find('.form-control');
|
||||
|
||||
if ($firstColControls.length === 1 && $secondColControls.length > 1) {
|
||||
$firstColControls.each((index, controlEl) => {
|
||||
$(controlEl).parent().insertBefore($secondColControls.first().parent());
|
||||
});
|
||||
}
|
||||
|
||||
if ($secondColControls.length === 1 && $firstColControls.length > 1) {
|
||||
$secondColControls.each((index, controlEl) => {
|
||||
$(controlEl).parent().insertAfter($firstColControls.last().parent());
|
||||
});
|
||||
}
|
||||
|
||||
// Hide columns that do not have any controls displayed.
|
||||
|
||||
const $fieldCols = $(document).find('#wizard-frame-3 .field-col');
|
||||
|
||||
$fieldCols.each((index, fieldColEl) => {
|
||||
const $fieldCol = $(fieldColEl);
|
||||
|
||||
if (!$fieldCol.find('.form-control').length) {
|
||||
$fieldCol.hide();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the page event listeners.
|
||||
*/
|
||||
function addEventListeners() {
|
||||
/**
|
||||
* Event: Timezone "Changed"
|
||||
*/
|
||||
$selectTimezone.on('change', () => {
|
||||
const date = App.Utils.UI.getDateTimePickerValue($selectDate);
|
||||
|
||||
if (!date) {
|
||||
return;
|
||||
}
|
||||
|
||||
App.Http.Booking.getAvailableHours(moment(date).format('YYYY-MM-DD'));
|
||||
|
||||
App.Pages.Booking.updateConfirmFrame();
|
||||
});
|
||||
|
||||
/**
|
||||
* Event: Selected Provider "Changed"
|
||||
*
|
||||
* Whenever the provider changes the available appointment date - time periods must be updated.
|
||||
*/
|
||||
$selectProvider.on('change', (event) => {
|
||||
const $target = $(event.target);
|
||||
|
||||
const todayDateTimeObject = new Date();
|
||||
const todayDateTimeMoment = moment(todayDateTimeObject);
|
||||
|
||||
App.Utils.UI.setDateTimePickerValue($selectDate, todayDateTimeObject);
|
||||
|
||||
App.Http.Booking.getUnavailableDates(
|
||||
$target.val(),
|
||||
$selectService.val(),
|
||||
todayDateTimeMoment.format('YYYY-MM-DD'),
|
||||
);
|
||||
|
||||
App.Pages.Booking.updateConfirmFrame();
|
||||
});
|
||||
|
||||
/**
|
||||
* Event: Selected Service "Changed"
|
||||
*
|
||||
* When the user clicks on a service, its available providers should
|
||||
* become visible.
|
||||
*/
|
||||
$selectService.on('change', (event) => {
|
||||
const $target = $(event.target);
|
||||
const serviceId = $selectService.val();
|
||||
$selectProvider.parent().prop('hidden', !Boolean(serviceId));
|
||||
|
||||
$selectProvider.empty();
|
||||
|
||||
$selectProvider.append(new Option(lang('please_select'), ''));
|
||||
|
||||
vars('available_providers').forEach((provider) => {
|
||||
// If the current provider is able to provide the selected service, add him to the list box.
|
||||
const canServeService =
|
||||
provider.services.filter((providerServiceId) => Number(providerServiceId) === Number(serviceId))
|
||||
.length > 0;
|
||||
|
||||
if (canServeService) {
|
||||
$selectProvider.append(new Option(provider.first_name + ' ' + provider.last_name, provider.id));
|
||||
}
|
||||
});
|
||||
|
||||
const providerOptionCount = $selectProvider.find('option').length;
|
||||
|
||||
// Remove the "Please Select" option, if there is only one provider available
|
||||
|
||||
if (providerOptionCount === 2) {
|
||||
$selectProvider.find('option[value=""]').remove();
|
||||
}
|
||||
|
||||
// Add the "Any Provider" entry
|
||||
|
||||
if (providerOptionCount > 2 && Boolean(Number(vars('display_any_provider')))) {
|
||||
$(new Option(lang('any_provider'), 'any-provider')).insertAfter($selectProvider.find('option:first'));
|
||||
}
|
||||
|
||||
App.Http.Booking.getUnavailableDates(
|
||||
$selectProvider.val(),
|
||||
$target.val(),
|
||||
moment(App.Utils.UI.getDateTimePickerValue($selectDate)).format('YYYY-MM-DD'),
|
||||
);
|
||||
|
||||
App.Pages.Booking.updateConfirmFrame();
|
||||
|
||||
App.Pages.Booking.updateServiceDescription(serviceId);
|
||||
});
|
||||
|
||||
/**
|
||||
* Event: Next Step Button "Clicked"
|
||||
*
|
||||
* This handler is triggered every time the user pressed the "next" button on the book wizard.
|
||||
* Some special tasks might be performed, depending on the current wizard step.
|
||||
*/
|
||||
$('.button-next').on('click', (event) => {
|
||||
const $target = $(event.currentTarget);
|
||||
|
||||
// If we are on the first step and there is no provider selected do not continue with the next step.
|
||||
if ($target.attr('data-step_index') === '1' && !$selectProvider.val()) {
|
||||
return;
|
||||
}
|
||||
|
||||
// If we are on the 2nd tab then the user should have an appointment hour selected.
|
||||
if ($target.attr('data-step_index') === '2') {
|
||||
if (!$('.selected-hour').length) {
|
||||
if (!$('#select-hour-prompt').length) {
|
||||
$('<div/>', {
|
||||
'id': 'select-hour-prompt',
|
||||
'class': 'text-danger mb-4',
|
||||
'text': lang('appointment_hour_missing'),
|
||||
}).prependTo('#available-hours');
|
||||
}
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// If we are on the 3rd tab then we will need to validate the user's input before proceeding to the next
|
||||
// step.
|
||||
if ($target.attr('data-step_index') === '3') {
|
||||
if (!App.Pages.Booking.validateCustomerForm()) {
|
||||
return; // Validation failed, do not continue.
|
||||
} else {
|
||||
App.Pages.Booking.updateConfirmFrame();
|
||||
}
|
||||
}
|
||||
|
||||
// Display the next step tab (uses jquery animation effect).
|
||||
const nextTabIndex = parseInt($target.attr('data-step_index')) + 1;
|
||||
|
||||
$target
|
||||
.parents()
|
||||
.eq(1)
|
||||
.fadeOut(() => {
|
||||
$('.active-step').removeClass('active-step');
|
||||
$('#step-' + nextTabIndex).addClass('active-step');
|
||||
$('#wizard-frame-' + nextTabIndex).fadeIn();
|
||||
});
|
||||
|
||||
// Scroll to the top of the page. On a small screen, especially on a mobile device, this is very useful.
|
||||
const scrollingElement = document.scrollingElement || document.body;
|
||||
if (window.innerHeight < scrollingElement.scrollHeight) {
|
||||
scrollingElement.scrollTop = 0;
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Event: Back Step Button "Clicked"
|
||||
*
|
||||
* This handler is triggered every time the user pressed the "back" button on the
|
||||
* book wizard.
|
||||
*/
|
||||
$('.button-back').on('click', (event) => {
|
||||
const prevTabIndex = parseInt($(event.currentTarget).attr('data-step_index')) - 1;
|
||||
|
||||
$(event.currentTarget)
|
||||
.parents()
|
||||
.eq(1)
|
||||
.fadeOut(() => {
|
||||
$('.active-step').removeClass('active-step');
|
||||
$('#step-' + prevTabIndex).addClass('active-step');
|
||||
$('#wizard-frame-' + prevTabIndex).fadeIn();
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* Event: Available Hour "Click"
|
||||
*
|
||||
* Triggered whenever the user clicks on an available hour for his appointment.
|
||||
*/
|
||||
$availableHours.on('click', '.available-hour', (event) => {
|
||||
$availableHours.find('.selected-hour').removeClass('selected-hour');
|
||||
$(event.target).addClass('selected-hour');
|
||||
App.Pages.Booking.updateConfirmFrame();
|
||||
});
|
||||
|
||||
if (manageMode) {
|
||||
/**
|
||||
* Event: Cancel Appointment Button "Click"
|
||||
*
|
||||
* When the user clicks the "Cancel" button this form is going to be submitted. We need
|
||||
* the user to confirm this action because once the appointment is cancelled, it will be
|
||||
* deleted from the database.
|
||||
*
|
||||
* @param {jQuery.Event} event
|
||||
*/
|
||||
$('#cancel-appointment').on('click', () => {
|
||||
const $cancelAppointmentForm = $('#cancel-appointment-form');
|
||||
|
||||
let $cancellationReason;
|
||||
|
||||
const buttons = [
|
||||
{
|
||||
text: lang('close'),
|
||||
click: (event, messageModal) => {
|
||||
messageModal.hide();
|
||||
},
|
||||
},
|
||||
{
|
||||
text: lang('confirm'),
|
||||
click: () => {
|
||||
if ($cancellationReason.val() === '') {
|
||||
$cancellationReason.css('border', '2px solid #DC3545');
|
||||
return;
|
||||
}
|
||||
$cancelAppointmentForm.find('#hidden-cancellation-reason').val($cancellationReason.val());
|
||||
$cancelAppointmentForm.submit();
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
App.Utils.Message.show(
|
||||
lang('cancel_appointment_title'),
|
||||
lang('write_appointment_removal_reason'),
|
||||
buttons,
|
||||
);
|
||||
|
||||
$cancellationReason = $('<textarea/>', {
|
||||
'class': 'form-control mt-2',
|
||||
'id': 'cancellation-reason',
|
||||
'rows': '3',
|
||||
'css': {
|
||||
'width': '100%',
|
||||
},
|
||||
}).appendTo('#message-modal .modal-body');
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
$deletePersonalInformation.on('click', () => {
|
||||
const buttons = [
|
||||
{
|
||||
text: lang('cancel'),
|
||||
click: (event, messageModal) => {
|
||||
messageModal.hide();
|
||||
},
|
||||
},
|
||||
{
|
||||
text: lang('delete'),
|
||||
click: () => {
|
||||
App.Http.Booking.deletePersonalInformation(vars('customer_token'));
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
App.Utils.Message.show(
|
||||
lang('delete_personal_information'),
|
||||
lang('delete_personal_information_prompt'),
|
||||
buttons,
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Event: Book Appointment Form "Submit"
|
||||
*
|
||||
* Before the form is submitted to the server we need to make sure that in the meantime the selected appointment
|
||||
* date/time wasn't reserved by another customer or event.
|
||||
*
|
||||
* @param {jQuery.Event} event
|
||||
*/
|
||||
$bookAppointmentSubmit.on('click', () => {
|
||||
const $acceptToTermsAndConditions = $('#accept-to-terms-and-conditions');
|
||||
|
||||
$acceptToTermsAndConditions.removeClass('is-invalid');
|
||||
|
||||
if ($acceptToTermsAndConditions.length && !$acceptToTermsAndConditions.prop('checked')) {
|
||||
$acceptToTermsAndConditions.addClass('is-invalid');
|
||||
return;
|
||||
}
|
||||
|
||||
const $acceptToPrivacyPolicy = $('#accept-to-privacy-policy');
|
||||
|
||||
$acceptToPrivacyPolicy.removeClass('is-invalid');
|
||||
|
||||
if ($acceptToPrivacyPolicy.length && !$acceptToPrivacyPolicy.prop('checked')) {
|
||||
$acceptToPrivacyPolicy.addClass('is-invalid');
|
||||
return;
|
||||
}
|
||||
|
||||
App.Http.Booking.registerAppointment();
|
||||
});
|
||||
|
||||
/**
|
||||
* Event: Refresh captcha image.
|
||||
*/
|
||||
$captchaTitle.on('click', 'button', () => {
|
||||
$('.captcha-image').attr('src', App.Utils.Url.siteUrl('captcha?' + Date.now()));
|
||||
});
|
||||
|
||||
$selectDate.on('mousedown', '.ui-datepicker-calendar td', () => {
|
||||
setTimeout(() => {
|
||||
App.Http.Booking.applyPreviousUnavailableDates();
|
||||
}, 300);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* This function validates the customer's data input. The user cannot continue without passing all the validation
|
||||
* checks.
|
||||
*
|
||||
* @return {Boolean} Returns the validation result.
|
||||
*/
|
||||
function validateCustomerForm() {
|
||||
$('#wizard-frame-3 .is-invalid').removeClass('is-invalid');
|
||||
$('#wizard-frame-3 label.text-danger').removeClass('text-danger');
|
||||
|
||||
// Validate required fields.
|
||||
let missingRequiredField = false;
|
||||
|
||||
$('.required').each((index, requiredField) => {
|
||||
if (!$(requiredField).val()) {
|
||||
$(requiredField).addClass('is-invalid');
|
||||
missingRequiredField = true;
|
||||
}
|
||||
});
|
||||
|
||||
if (missingRequiredField) {
|
||||
$('#form-message').text(lang('fields_are_required'));
|
||||
return false;
|
||||
}
|
||||
|
||||
// Validate email address.
|
||||
if ($email.val() && !App.Utils.Validation.email($email.val())) {
|
||||
$email.addClass('is-invalid');
|
||||
$('#form-message').text(lang('invalid_email'));
|
||||
return false;
|
||||
}
|
||||
|
||||
// Validate phone number.
|
||||
const phoneNumber = $phoneNumber.val();
|
||||
|
||||
if (phoneNumber && !App.Utils.Validation.phone(phoneNumber)) {
|
||||
$phoneNumber.addClass('is-invalid');
|
||||
$('#form-message').text(lang('invalid_phone'));
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Every time this function is executed, it updates the confirmation page with the latest
|
||||
* customer settings and input for the appointment booking.
|
||||
*/
|
||||
function updateConfirmFrame() {
|
||||
const serviceId = $selectService.val();
|
||||
const providerId = $selectProvider.val();
|
||||
|
||||
$displayBookingSelection.text(`${lang('service')} │ ${lang('provider')}`); // Notice: "│" is a custom ASCII char
|
||||
|
||||
const serviceOptionText = serviceId ? $selectService.find('option:selected').text() : lang('service');
|
||||
const providerOptionText = providerId ? $selectProvider.find('option:selected').text() : lang('provider');
|
||||
|
||||
if (serviceId || providerId) {
|
||||
$displayBookingSelection.text(`${serviceOptionText} │ ${providerOptionText}`);
|
||||
}
|
||||
|
||||
if (!$availableHours.find('.selected-hour').text()) {
|
||||
return; // No time is selected, skip the rest of this function...
|
||||
}
|
||||
|
||||
// Render the appointment details
|
||||
|
||||
const service = vars('available_services').find(
|
||||
(availableService) => Number(availableService.id) === Number(serviceId),
|
||||
);
|
||||
|
||||
if (!service) {
|
||||
return; // Service was not found
|
||||
}
|
||||
|
||||
const selectedDateObject = App.Utils.UI.getDateTimePickerValue($selectDate);
|
||||
const selectedDateMoment = moment(selectedDateObject);
|
||||
const selectedDate = selectedDateMoment.format('YYYY-MM-DD');
|
||||
const selectedTime = $availableHours.find('.selected-hour').text();
|
||||
|
||||
let formattedSelectedDate = '';
|
||||
|
||||
if (selectedDateObject) {
|
||||
formattedSelectedDate =
|
||||
App.Utils.Date.format(selectedDate, vars('date_format'), vars('time_format'), false) +
|
||||
' ' +
|
||||
selectedTime;
|
||||
}
|
||||
|
||||
const timezoneOptionText = $selectTimezone.find('option:selected').text();
|
||||
|
||||
$('#appointment-details').html(`
|
||||
<div>
|
||||
<div class="mb-2 fw-bold fs-3">
|
||||
${serviceOptionText}
|
||||
</div>
|
||||
<div class="mb-2 fw-bold text-muted">
|
||||
${providerOptionText}
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<i class="fas fa-calendar-day me-2"></i>
|
||||
${formattedSelectedDate}
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<i class="fas fa-clock me-2"></i>
|
||||
${service.duration} ${lang('minutes')}
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<i class="fas fa-globe me-2"></i>
|
||||
${timezoneOptionText}
|
||||
</div>
|
||||
<div class="mb-2" ${!Number(service.price) ? 'hidden' : ''}>
|
||||
<i class="fas fa-cash-register me-2"></i>
|
||||
${Number(service.price).toFixed(2)} ${service.currency}
|
||||
</div>
|
||||
</div>
|
||||
`);
|
||||
|
||||
// Render the customer information
|
||||
|
||||
const firstName = App.Utils.String.escapeHtml($firstName.val());
|
||||
const lastName = App.Utils.String.escapeHtml($lastName.val());
|
||||
const fullName = `${firstName} ${lastName}`.trim();
|
||||
const email = App.Utils.String.escapeHtml($email.val());
|
||||
const phoneNumber = App.Utils.String.escapeHtml($phoneNumber.val());
|
||||
const address = App.Utils.String.escapeHtml($address.val());
|
||||
const city = App.Utils.String.escapeHtml($city.val());
|
||||
const zipCode = App.Utils.String.escapeHtml($zipCode.val());
|
||||
|
||||
const addressParts = [];
|
||||
|
||||
if (city) {
|
||||
addressParts.push(city);
|
||||
}
|
||||
|
||||
if (zipCode) {
|
||||
addressParts.push(zipCode);
|
||||
}
|
||||
|
||||
$('#customer-details').html(`
|
||||
<div>
|
||||
<div class="mb-2 fw-bold fs-3">
|
||||
${lang('contact_info')}
|
||||
</div>
|
||||
<div class="mb-2 fw-bold text-muted" ${!fullName ? 'hidden' : ''}>
|
||||
${fullName}
|
||||
</div>
|
||||
<div class="mb-2" ${!email ? 'hidden' : ''}>
|
||||
${email}
|
||||
</div>
|
||||
<div class="mb-2" ${!email ? 'hidden' : ''}>
|
||||
${phoneNumber}
|
||||
</div>
|
||||
<div class="mb-2" ${!address ? 'hidden' : ''}>
|
||||
${address}
|
||||
</div>
|
||||
<div class="mb-2" ${!addressParts.length ? 'hidden' : ''}>
|
||||
${addressParts.join(', ')}
|
||||
</div>
|
||||
</div>
|
||||
`);
|
||||
|
||||
// Update appointment form data for submission to server when the user confirms the appointment.
|
||||
|
||||
const data = {};
|
||||
|
||||
data.customer = {
|
||||
last_name: $lastName.val(),
|
||||
first_name: $firstName.val(),
|
||||
email: $email.val(),
|
||||
phone_number: $phoneNumber.val(),
|
||||
address: $address.val(),
|
||||
city: $city.val(),
|
||||
zip_code: $zipCode.val(),
|
||||
timezone: $selectTimezone.val(),
|
||||
custom_field_1: $customField1.val(),
|
||||
custom_field_2: $customField2.val(),
|
||||
custom_field_3: $customField3.val(),
|
||||
custom_field_4: $customField4.val(),
|
||||
custom_field_5: $customField5.val(),
|
||||
};
|
||||
|
||||
data.appointment = {
|
||||
start_datetime:
|
||||
moment(App.Utils.UI.getDateTimePickerValue($selectDate)).format('YYYY-MM-DD') +
|
||||
' ' +
|
||||
moment($('.selected-hour').data('value'), 'HH:mm').format('HH:mm') +
|
||||
':00',
|
||||
end_datetime: calculateEndDatetime(),
|
||||
notes: $notes.val(),
|
||||
is_unavailability: false,
|
||||
id_users_provider: $selectProvider.val(),
|
||||
id_services: $selectService.val(),
|
||||
};
|
||||
|
||||
data.manage_mode = Number(manageMode);
|
||||
|
||||
if (manageMode) {
|
||||
data.appointment.id = vars('appointment_data').id;
|
||||
data.customer.id = vars('customer_data').id;
|
||||
}
|
||||
|
||||
$('input[name="post_data"]').val(JSON.stringify(data));
|
||||
}
|
||||
|
||||
/**
|
||||
* This method calculates the end datetime of the current appointment.
|
||||
*
|
||||
* End datetime is depending on the service and start datetime fields.
|
||||
*
|
||||
* @return {String} Returns the end datetime in string format.
|
||||
*/
|
||||
function calculateEndDatetime() {
|
||||
// Find selected service duration.
|
||||
const serviceId = $selectService.val();
|
||||
|
||||
const service = vars('available_services').find(
|
||||
(availableService) => Number(availableService.id) === Number(serviceId),
|
||||
);
|
||||
|
||||
// Add the duration to the start datetime.
|
||||
const selectedDate = moment(App.Utils.UI.getDateTimePickerValue($selectDate)).format('YYYY-MM-DD');
|
||||
|
||||
const selectedHour = $('.selected-hour').data('value'); // HH:mm
|
||||
|
||||
const startMoment = moment(selectedDate + ' ' + selectedHour);
|
||||
|
||||
let endMoment;
|
||||
|
||||
if (service.duration && startMoment) {
|
||||
endMoment = startMoment.clone().add({'minutes': parseInt(service.duration)});
|
||||
} else {
|
||||
endMoment = moment();
|
||||
}
|
||||
|
||||
return endMoment.format('YYYY-MM-DD HH:mm:ss');
|
||||
}
|
||||
|
||||
/**
|
||||
* This method applies the appointment's data to the wizard so
|
||||
* that the user can start making changes on an existing record.
|
||||
*
|
||||
* @param {Object} appointment Selected appointment's data.
|
||||
* @param {Object} provider Selected provider's data.
|
||||
* @param {Object} customer Selected customer's data.
|
||||
*
|
||||
* @return {Boolean} Returns the operation result.
|
||||
*/
|
||||
function applyAppointmentData(appointment, provider, customer) {
|
||||
try {
|
||||
// Select Service & Provider
|
||||
$selectService.val(appointment.id_services).trigger('change');
|
||||
$selectProvider.val(appointment.id_users_provider);
|
||||
|
||||
// Set Appointment Date
|
||||
const startMoment = moment(appointment.start_datetime);
|
||||
App.Utils.UI.setDateTimePickerValue($selectDate, startMoment.toDate());
|
||||
App.Http.Booking.getAvailableHours(startMoment.format('YYYY-MM-DD'));
|
||||
|
||||
// Apply Customer's Data
|
||||
$lastName.val(customer.last_name);
|
||||
$firstName.val(customer.first_name);
|
||||
$email.val(customer.email);
|
||||
$phoneNumber.val(customer.phone_number);
|
||||
$address.val(customer.address);
|
||||
$city.val(customer.city);
|
||||
$zipCode.val(customer.zip_code);
|
||||
if (customer.timezone) {
|
||||
$selectTimezone.val(customer.timezone);
|
||||
}
|
||||
const appointmentNotes = appointment.notes !== null ? appointment.notes : '';
|
||||
$notes.val(appointmentNotes);
|
||||
|
||||
$customField1.val(customer.custom_field_1);
|
||||
$customField2.val(customer.custom_field_2);
|
||||
$customField3.val(customer.custom_field_3);
|
||||
$customField4.val(customer.custom_field_4);
|
||||
$customField5.val(customer.custom_field_5);
|
||||
|
||||
App.Pages.Booking.updateConfirmFrame();
|
||||
|
||||
return true;
|
||||
} catch (exc) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Update the service description and information.
|
||||
*
|
||||
* This method updates the HTML content with a brief description of the
|
||||
* user selected service (only if available in db). This is useful for the
|
||||
* customers upon selecting the correct service.
|
||||
*
|
||||
* @param {Number} serviceId The selected service record id.
|
||||
*/
|
||||
function updateServiceDescription(serviceId) {
|
||||
const $serviceDescription = $('#service-description');
|
||||
|
||||
$serviceDescription.empty();
|
||||
|
||||
const service = vars('available_services').find(
|
||||
(availableService) => Number(availableService.id) === Number(serviceId),
|
||||
);
|
||||
|
||||
if (!service) {
|
||||
return; // Service not found
|
||||
}
|
||||
|
||||
// Render the additional service information
|
||||
|
||||
const additionalInfoParts = [];
|
||||
|
||||
if (service.duration) {
|
||||
additionalInfoParts.push(`${lang('duration')}: ${service.duration} ${lang('minutes')}`);
|
||||
}
|
||||
|
||||
if (Number(service.price) > 0) {
|
||||
additionalInfoParts.push(`${lang('price')}: ${Number(service.price).toFixed(2)} ${service.currency}`);
|
||||
}
|
||||
|
||||
if (service.location) {
|
||||
additionalInfoParts.push(`${lang('location')}: ${service.location}`);
|
||||
}
|
||||
|
||||
if (additionalInfoParts.length) {
|
||||
$(`
|
||||
<div class="mb-2 fst-italic">
|
||||
${additionalInfoParts.join(', ')}
|
||||
</div>
|
||||
`).appendTo($serviceDescription);
|
||||
}
|
||||
|
||||
// Render the service description
|
||||
|
||||
if (service.description?.length) {
|
||||
const escapedDescription = App.Utils.String.escapeHtml(service.description);
|
||||
|
||||
const multiLineDescription = escapedDescription.replaceAll('\n', '<br/>');
|
||||
|
||||
$(`
|
||||
<div class="text-muted">
|
||||
${multiLineDescription}
|
||||
</div>
|
||||
`).appendTo($serviceDescription);
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', initialize);
|
||||
|
||||
return {
|
||||
manageMode,
|
||||
updateConfirmFrame,
|
||||
updateServiceDescription,
|
||||
validateCustomerForm,
|
||||
};
|
||||
})();
|
||||
235
assets/js/pages/booking_settings.js
Normal file
235
assets/js/pages/booking_settings.js
Normal file
@ -0,0 +1,235 @@
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Easy!Appointments - Online Appointment Scheduler
|
||||
*
|
||||
* @package EasyAppointments
|
||||
* @author A.Tselegidis <alextselegidis@gmail.com>
|
||||
* @copyright Copyright (c) Alex Tselegidis
|
||||
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
|
||||
* @link https://easyappointments.org
|
||||
* @since v1.5.0
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
/**
|
||||
* Booking settings page.
|
||||
*
|
||||
* This module implements the functionality of the booking settings page.
|
||||
*/
|
||||
App.Pages.BookingSettings = (function () {
|
||||
const $bookingSettings = $('#booking-settings');
|
||||
const $saveSettings = $('#save-settings');
|
||||
const $disableBooking = $('#disable-booking');
|
||||
const $disableBookingMessage = $('#disable-booking-message');
|
||||
|
||||
/**
|
||||
* Check if the form has invalid values.
|
||||
*
|
||||
* @return {Boolean}
|
||||
*/
|
||||
function isInvalid() {
|
||||
try {
|
||||
$('#booking-settings .is-invalid').removeClass('is-invalid');
|
||||
|
||||
// Validate required fields.
|
||||
|
||||
let missingRequiredFields = false;
|
||||
|
||||
$('#booking-settings .required').each((index, requiredField) => {
|
||||
const $requiredField = $(requiredField);
|
||||
|
||||
if (!$requiredField.val()) {
|
||||
$requiredField.addClass('is-invalid');
|
||||
missingRequiredFields = true;
|
||||
}
|
||||
});
|
||||
|
||||
if (missingRequiredFields) {
|
||||
throw new Error(lang('fields_are_required'));
|
||||
}
|
||||
|
||||
// Ensure there is at least one field displayed.
|
||||
|
||||
if (!$('.display-switch:checked').length) {
|
||||
throw new Error(lang('at_least_one_field'));
|
||||
}
|
||||
|
||||
// Ensure there is at least one field required.
|
||||
|
||||
if (!$('.require-switch:checked').length) {
|
||||
throw new Error(lang('at_least_one_field_required'));
|
||||
}
|
||||
|
||||
return false;
|
||||
} catch (error) {
|
||||
App.Layouts.Backend.displayNotification(error.message);
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Apply the booking settings into the page.
|
||||
*
|
||||
* @param {Object} bookingSettings
|
||||
*/
|
||||
function deserialize(bookingSettings) {
|
||||
bookingSettings.forEach((bookingSetting) => {
|
||||
if (bookingSetting.name === 'disable_booking_message') {
|
||||
$disableBookingMessage.trumbowyg('html', bookingSetting.value);
|
||||
return;
|
||||
}
|
||||
|
||||
const $field = $('[data-field="' + bookingSetting.name + '"]');
|
||||
|
||||
if ($field.is(':checkbox')) {
|
||||
$field.prop('checked', Boolean(Number(bookingSetting.value)));
|
||||
} else {
|
||||
$field.val(bookingSetting.value);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Serialize the page values into an array.
|
||||
*
|
||||
* @returns {Array}
|
||||
*/
|
||||
function serialize() {
|
||||
const bookingSettings = [];
|
||||
|
||||
$('[data-field]').each((index, field) => {
|
||||
const $field = $(field);
|
||||
|
||||
bookingSettings.push({
|
||||
name: $field.data('field'),
|
||||
value: $field.is(':checkbox') ? Number($field.prop('checked')) : $field.val(),
|
||||
});
|
||||
});
|
||||
|
||||
bookingSettings.push({
|
||||
name: 'disable_booking_message',
|
||||
value: $disableBookingMessage.trumbowyg('html'),
|
||||
});
|
||||
|
||||
return bookingSettings;
|
||||
}
|
||||
|
||||
/**
|
||||
* Update the UI based on the display switch state.
|
||||
*
|
||||
* @param {jQuery} $displaySwitch
|
||||
*/
|
||||
function updateDisplaySwitch($displaySwitch) {
|
||||
const isChecked = $displaySwitch.prop('checked');
|
||||
|
||||
const $formGroup = $displaySwitch.closest('.form-group');
|
||||
|
||||
$formGroup.find('.require-switch').prop('disabled', !isChecked);
|
||||
|
||||
$formGroup.find('.form-label, .form-control').toggleClass('opacity-25', !isChecked);
|
||||
|
||||
if (!isChecked) {
|
||||
$formGroup.find('.require-switch').prop('checked', false);
|
||||
$formGroup.find('.text-danger').hide();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Update the UI based on the require switch state.
|
||||
*
|
||||
* @param {jQuery} $requireSwitch
|
||||
*/
|
||||
function updateRequireSwitch($requireSwitch) {
|
||||
const isChecked = $requireSwitch.prop('checked');
|
||||
|
||||
const $formGroup = $requireSwitch.closest('.form-group');
|
||||
|
||||
$formGroup.find('.text-danger').toggle(isChecked);
|
||||
}
|
||||
|
||||
/**
|
||||
* Update the UI based on the initial values.
|
||||
*/
|
||||
function applyInitialState() {
|
||||
$bookingSettings.find('.display-switch').each((index, displaySwitchEl) => {
|
||||
const $displaySwitch = $(displaySwitchEl);
|
||||
|
||||
updateDisplaySwitch($displaySwitch);
|
||||
});
|
||||
|
||||
$bookingSettings.find('.require-switch').each((index, requireSwitchEl) => {
|
||||
const $requireSwitch = $(requireSwitchEl);
|
||||
|
||||
updateRequireSwitch($requireSwitch);
|
||||
});
|
||||
|
||||
$disableBookingMessage.closest('.form-group').prop('hidden', !$disableBooking.prop('checked'));
|
||||
}
|
||||
|
||||
/**
|
||||
* Save the account information.
|
||||
*/
|
||||
function onSaveSettingsClick() {
|
||||
if (isInvalid()) {
|
||||
return;
|
||||
}
|
||||
|
||||
const bookingSettings = serialize();
|
||||
|
||||
App.Http.BookingSettings.save(bookingSettings).done(() => {
|
||||
App.Layouts.Backend.displayNotification(lang('settings_saved'));
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Update the UI.
|
||||
*
|
||||
* @param {jQuery} event
|
||||
*/
|
||||
function onDisplaySwitchClick(event) {
|
||||
const $displaySwitch = $(event.target);
|
||||
|
||||
updateDisplaySwitch($displaySwitch);
|
||||
}
|
||||
|
||||
/**
|
||||
* Update the UI.
|
||||
*
|
||||
* @param {Event} event
|
||||
*/
|
||||
function onRequireSwitchClick(event) {
|
||||
const $requireSwitch = $(event.target);
|
||||
|
||||
updateRequireSwitch($requireSwitch);
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle the message container.
|
||||
*/
|
||||
function onDisableBookingClick() {
|
||||
$disableBookingMessage.closest('.form-group').prop('hidden', !$disableBooking.prop('checked'));
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize the module.
|
||||
*/
|
||||
function initialize() {
|
||||
const bookingSettings = vars('booking_settings');
|
||||
|
||||
$saveSettings.on('click', onSaveSettingsClick);
|
||||
|
||||
$disableBooking.on('click', onDisableBookingClick);
|
||||
|
||||
$bookingSettings
|
||||
.on('click', '.display-switch', onDisplaySwitchClick)
|
||||
.on('click', '.require-switch', onRequireSwitchClick);
|
||||
|
||||
$disableBookingMessage.trumbowyg();
|
||||
|
||||
deserialize(bookingSettings);
|
||||
|
||||
applyInitialState();
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', initialize);
|
||||
|
||||
return {};
|
||||
})();
|
||||
178
assets/js/pages/business_settings.js
Normal file
178
assets/js/pages/business_settings.js
Normal file
@ -0,0 +1,178 @@
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Easy!Appointments - Online Appointment Scheduler
|
||||
*
|
||||
* @package EasyAppointments
|
||||
* @author A.Tselegidis <alextselegidis@gmail.com>
|
||||
* @copyright Copyright (c) Alex Tselegidis
|
||||
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
|
||||
* @link https://easyappointments.org
|
||||
* @since v1.5.0
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
/**
|
||||
* Business settings page.
|
||||
*
|
||||
* This module implements the functionality of the business settings page.
|
||||
*/
|
||||
App.Pages.BusinessSettings = (function () {
|
||||
const $saveSettings = $('#save-settings');
|
||||
const $applyGlobalWorkingPlan = $('#apply-global-working-plan');
|
||||
const $appointmentStatusOptions = $('#appointment-status-options');
|
||||
let workingPlanManager = null;
|
||||
|
||||
/**
|
||||
* Check if the form has invalid values.
|
||||
*
|
||||
* @return {Boolean}
|
||||
*/
|
||||
function isInvalid() {
|
||||
try {
|
||||
$('#business-settings .is-invalid').removeClass('is-invalid');
|
||||
|
||||
// Validate required fields.
|
||||
|
||||
let missingRequiredFields = false;
|
||||
|
||||
$('#business-settings .required').each((index, requiredField) => {
|
||||
const $requiredField = $(requiredField);
|
||||
|
||||
if (!$requiredField.val()) {
|
||||
$requiredField.addClass('is-invalid');
|
||||
missingRequiredFields = true;
|
||||
}
|
||||
});
|
||||
|
||||
if (missingRequiredFields) {
|
||||
throw new Error(lang('fields_are_required'));
|
||||
}
|
||||
|
||||
return false;
|
||||
} catch (error) {
|
||||
App.Layouts.Backend.displayNotification(error.message);
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
function deserialize(businessSettings) {
|
||||
businessSettings.forEach((businessSetting) => {
|
||||
const $field = $('[data-field="' + businessSetting.name + '"]');
|
||||
|
||||
$field.is(':checkbox')
|
||||
? $field.prop('checked', Boolean(Number(businessSetting.value)))
|
||||
: $field.val(businessSetting.value);
|
||||
});
|
||||
}
|
||||
|
||||
function serialize() {
|
||||
const businessSettings = [];
|
||||
|
||||
$('[data-field]').each((index, field) => {
|
||||
const $field = $(field);
|
||||
|
||||
businessSettings.push({
|
||||
name: $field.data('field'),
|
||||
value: $field.is(':checkbox') ? Number($field.prop('checked')) : $field.val(),
|
||||
});
|
||||
});
|
||||
|
||||
const workingPlan = workingPlanManager.get();
|
||||
|
||||
businessSettings.push({
|
||||
name: 'company_working_plan',
|
||||
value: JSON.stringify(workingPlan),
|
||||
});
|
||||
|
||||
const appointmentStatusOptions = App.Components.AppointmentStatusOptions.getOptions($appointmentStatusOptions);
|
||||
|
||||
businessSettings.push({
|
||||
name: 'appointment_status_options',
|
||||
value: JSON.stringify(appointmentStatusOptions),
|
||||
});
|
||||
|
||||
return businessSettings;
|
||||
}
|
||||
|
||||
/**
|
||||
* Save the account information.
|
||||
*/
|
||||
function onSaveSettingsClick() {
|
||||
if (isInvalid()) {
|
||||
App.Layouts.Backend.displayNotification(lang('settings_are_invalid'));
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
const businessSettings = serialize();
|
||||
|
||||
App.Http.BusinessSettings.save(businessSettings).done(() => {
|
||||
App.Layouts.Backend.displayNotification(lang('settings_saved'));
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Save the global working plan information.
|
||||
*/
|
||||
function onApplyGlobalWorkingPlan() {
|
||||
const buttons = [
|
||||
{
|
||||
text: lang('cancel'),
|
||||
click: (event, messageModal) => {
|
||||
messageModal.hide();
|
||||
},
|
||||
},
|
||||
{
|
||||
text: 'OK',
|
||||
click: (event, messageModal) => {
|
||||
const workingPlan = workingPlanManager.get();
|
||||
|
||||
App.Http.BusinessSettings.applyGlobalWorkingPlan(workingPlan)
|
||||
.done(() => {
|
||||
App.Layouts.Backend.displayNotification(lang('working_plans_got_updated'));
|
||||
})
|
||||
.always(() => {
|
||||
messageModal.hide();
|
||||
});
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
App.Utils.Message.show(lang('working_plan'), lang('overwrite_existing_working_plans'), buttons);
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize the module.
|
||||
*/
|
||||
function initialize() {
|
||||
const businessSettings = vars('business_settings');
|
||||
|
||||
deserialize(businessSettings);
|
||||
|
||||
let companyWorkingPlan = {};
|
||||
let appointmentStatusOptions = [];
|
||||
|
||||
vars('business_settings').forEach((businessSetting) => {
|
||||
if (businessSetting.name === 'company_working_plan') {
|
||||
companyWorkingPlan = JSON.parse(businessSetting.value);
|
||||
}
|
||||
|
||||
if (businessSetting.name === 'appointment_status_options') {
|
||||
appointmentStatusOptions = JSON.parse(businessSetting.value);
|
||||
}
|
||||
});
|
||||
|
||||
workingPlanManager = new App.Utils.WorkingPlan();
|
||||
workingPlanManager.setup(companyWorkingPlan);
|
||||
workingPlanManager.timepickers(false);
|
||||
workingPlanManager.addEventListeners();
|
||||
|
||||
App.Components.AppointmentStatusOptions.setOptions($appointmentStatusOptions, appointmentStatusOptions);
|
||||
|
||||
$saveSettings.on('click', onSaveSettingsClick);
|
||||
|
||||
$applyGlobalWorkingPlan.on('click', onApplyGlobalWorkingPlan);
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', initialize);
|
||||
|
||||
return {};
|
||||
})();
|
||||
164
assets/js/pages/calendar.js
Normal file
164
assets/js/pages/calendar.js
Normal file
@ -0,0 +1,164 @@
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Easy!Appointments - Online Appointment Scheduler
|
||||
*
|
||||
* @package EasyAppointments
|
||||
* @author A.Tselegidis <alextselegidis@gmail.com>
|
||||
* @copyright Copyright (c) Alex Tselegidis
|
||||
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
|
||||
* @link https://easyappointments.org
|
||||
* @since v1.5.0
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
/**
|
||||
* Calendar page.
|
||||
*
|
||||
* This module implements the functionality of the backend calendar page.
|
||||
*/
|
||||
App.Pages.Calendar = (function () {
|
||||
const $insertWorkingPlanException = $('#insert-working-plan-exception');
|
||||
|
||||
const moment = window.moment;
|
||||
|
||||
/**
|
||||
* Add the page event listeners.
|
||||
*/
|
||||
function addEventListeners() {
|
||||
const $calendarPage = $('#calendar-page');
|
||||
|
||||
$calendarPage.on('click', '#toggle-fullscreen', (event) => {
|
||||
const $toggleFullscreen = $(event.target);
|
||||
const element = document.documentElement;
|
||||
const isFullScreen =
|
||||
document.fullScreenElement || document.mozFullScreen || document.webkitIsFullScreen || false;
|
||||
|
||||
if (isFullScreen) {
|
||||
// Exit fullscreen mode.
|
||||
if (document.exitFullscreen) {
|
||||
document.exitFullscreen();
|
||||
} else if (document.msExitFullscreen) {
|
||||
document.msExitFullscreen();
|
||||
} else if (document.mozCancelFullScreen) {
|
||||
document.mozCancelFullScreen();
|
||||
} else if (document.webkitExitFullscreen) {
|
||||
document.webkitExitFullscreen();
|
||||
}
|
||||
|
||||
$toggleFullscreen.removeClass('btn-success').addClass('btn-light');
|
||||
} else {
|
||||
// Switch to fullscreen mode.
|
||||
if (element.requestFullscreen) {
|
||||
element.requestFullscreen();
|
||||
} else if (element.msRequestFullscreen) {
|
||||
element.msRequestFullscreen();
|
||||
} else if (element.mozRequestFullScreen) {
|
||||
element.mozRequestFullScreen();
|
||||
} else if (element.webkitRequestFullscreen) {
|
||||
element.webkitRequestFullscreen();
|
||||
}
|
||||
$toggleFullscreen.removeClass('btn-light').addClass('btn-success');
|
||||
}
|
||||
});
|
||||
|
||||
$insertWorkingPlanException.on('click', () => {
|
||||
const providerId = $('#select-filter-item').val();
|
||||
|
||||
if (providerId === App.Utils.CalendarDefaultView.FILTER_TYPE_ALL) {
|
||||
return;
|
||||
}
|
||||
|
||||
const provider = vars('available_providers').find((availableProvider) => {
|
||||
return Number(availableProvider.id) === Number(providerId);
|
||||
});
|
||||
|
||||
if (!provider) {
|
||||
throw new Error('Provider could not be found: ' + providerId);
|
||||
}
|
||||
|
||||
App.Components.WorkingPlanExceptionsModal.add().done((date, workingPlanException) => {
|
||||
const successCallback = () => {
|
||||
App.Layouts.Backend.displayNotification(lang('working_plan_exception_saved'));
|
||||
|
||||
const workingPlanExceptions = JSON.parse(provider.settings.working_plan_exceptions) || {};
|
||||
|
||||
workingPlanExceptions[date] = workingPlanException;
|
||||
|
||||
for (let index in vars('available_providers')) {
|
||||
const availableProvider = vars('available_providers')[index];
|
||||
|
||||
if (Number(availableProvider.id) === Number(providerId)) {
|
||||
vars('available_providers')[index].settings.working_plan_exceptions =
|
||||
JSON.stringify(workingPlanExceptions);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
$('#select-filter-item').trigger('change'); // Update the calendar.
|
||||
};
|
||||
|
||||
App.Http.Calendar.saveWorkingPlanException(
|
||||
date,
|
||||
workingPlanException,
|
||||
providerId,
|
||||
successCallback,
|
||||
null,
|
||||
);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Get calendar selection end date.
|
||||
*
|
||||
* On calendar slot selection, calculate the end date based on the provided start date.
|
||||
*
|
||||
* @param {Object} info Holding the "start" and "end" props, as provided by FullCalendar.
|
||||
*
|
||||
* @return {Date}
|
||||
*/
|
||||
function getSelectionEndDate(info) {
|
||||
const startMoment = moment(info.start);
|
||||
const endMoment = moment(info.end);
|
||||
const startTillEndDiff = endMoment.diff(startMoment);
|
||||
const startTillEndDuration = moment.duration(startTillEndDiff);
|
||||
const durationInMinutes = startTillEndDuration.asMinutes();
|
||||
const minDurationInMinutes = 15;
|
||||
|
||||
if (durationInMinutes <= minDurationInMinutes) {
|
||||
const serviceId = $('#select-service').val();
|
||||
const service = vars('available_services').find(
|
||||
(availableService) => Number(availableService.id) === Number(serviceId),
|
||||
);
|
||||
|
||||
if (service) {
|
||||
endMoment.add(service.duration - durationInMinutes, 'minutes');
|
||||
}
|
||||
}
|
||||
|
||||
return endMoment.toDate();
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize the module.
|
||||
*
|
||||
* This function makes the necessary initialization for the default backend calendar page.
|
||||
*
|
||||
* If this module is used in another page then this function might not be needed.
|
||||
*/
|
||||
function initialize() {
|
||||
// Load and initialize the calendar view.
|
||||
if (vars('calendar_view') === 'table') {
|
||||
App.Utils.CalendarTableView.initialize();
|
||||
} else {
|
||||
App.Utils.CalendarDefaultView.initialize();
|
||||
}
|
||||
|
||||
App.Pages.Calendar.addEventListeners();
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', initialize);
|
||||
|
||||
return {
|
||||
addEventListeners,
|
||||
getSelectionEndDate,
|
||||
};
|
||||
})();
|
||||
502
assets/js/pages/customers.js
Normal file
502
assets/js/pages/customers.js
Normal file
@ -0,0 +1,502 @@
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Easy!Appointments - Online Appointment Scheduler
|
||||
*
|
||||
* @package EasyAppointments
|
||||
* @author A.Tselegidis <alextselegidis@gmail.com>
|
||||
* @copyright Copyright (c) Alex Tselegidis
|
||||
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
|
||||
* @link https://easyappointments.org
|
||||
* @since v1.5.0
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
/**
|
||||
* Customers page.
|
||||
*
|
||||
* This module implements the functionality of the customers page.
|
||||
*/
|
||||
App.Pages.Customers = (function () {
|
||||
const $customers = $('#customers');
|
||||
const $filterCustomers = $('#filter-customers');
|
||||
const $id = $('#customer-id');
|
||||
const $firstName = $('#first-name');
|
||||
const $lastName = $('#last-name');
|
||||
const $email = $('#email');
|
||||
const $phoneNumber = $('#phone-number');
|
||||
const $address = $('#address');
|
||||
const $city = $('#city');
|
||||
const $zipCode = $('#zip-code');
|
||||
const $timezone = $('#timezone');
|
||||
const $language = $('#language');
|
||||
const $ldapDn = $('#ldap-dn');
|
||||
const $customField1 = $('#custom-field-1');
|
||||
const $customField2 = $('#custom-field-2');
|
||||
const $customField3 = $('#custom-field-3');
|
||||
const $customField4 = $('#custom-field-4');
|
||||
const $customField5 = $('#custom-field-5');
|
||||
const $notes = $('#notes');
|
||||
const $formMessage = $('#form-message');
|
||||
const $customerAppointments = $('#customer-appointments');
|
||||
|
||||
const moment = window.moment;
|
||||
|
||||
let filterResults = {};
|
||||
let filterLimit = 20;
|
||||
|
||||
/**
|
||||
* Add the page event listeners.
|
||||
*/
|
||||
function addEventListeners() {
|
||||
/**
|
||||
* Event: Filter Customers Form "Submit"
|
||||
*
|
||||
* @param {jQuery.Event} event
|
||||
*/
|
||||
$customers.on('submit', '#filter-customers form', (event) => {
|
||||
event.preventDefault();
|
||||
const key = $filterCustomers.find('.key').val();
|
||||
$filterCustomers.find('.selected').removeClass('selected');
|
||||
filterLimit = 20;
|
||||
App.Pages.Customers.resetForm();
|
||||
App.Pages.Customers.filter(key);
|
||||
});
|
||||
|
||||
/**
|
||||
* Event: Filter Entry "Click"
|
||||
*
|
||||
* Display the customer data of the selected row.
|
||||
*
|
||||
* @param {jQuery.Event} event
|
||||
*/
|
||||
$customers.on('click', '.customer-row', (event) => {
|
||||
if ($filterCustomers.find('.filter').prop('disabled')) {
|
||||
return; // Do nothing when user edits a customer record.
|
||||
}
|
||||
|
||||
const customerId = $(event.currentTarget).attr('data-id');
|
||||
const customer = filterResults.find((filterResult) => Number(filterResult.id) === Number(customerId));
|
||||
|
||||
App.Pages.Customers.display(customer);
|
||||
$('#filter-customers .selected').removeClass('selected');
|
||||
$(event.currentTarget).addClass('selected');
|
||||
$('#edit-customer, #delete-customer').prop('disabled', false);
|
||||
});
|
||||
|
||||
/**
|
||||
* Event: Add Customer Button "Click"
|
||||
*/
|
||||
$customers.on('click', '#add-customer', () => {
|
||||
App.Pages.Customers.resetForm();
|
||||
$customers.find('#add-edit-delete-group').hide();
|
||||
$customers.find('#save-cancel-group').show();
|
||||
$customers.find('.record-details').find('input, select, textarea').prop('disabled', false);
|
||||
$customers.find('.record-details .form-label span').prop('hidden', false);
|
||||
$filterCustomers.find('button').prop('disabled', true);
|
||||
$filterCustomers.find('.results').css('color', '#AAA');
|
||||
});
|
||||
|
||||
/**
|
||||
* Event: Edit Customer Button "Click"
|
||||
*/
|
||||
$customers.on('click', '#edit-customer', () => {
|
||||
$customers.find('.record-details').find('input, select, textarea').prop('disabled', false);
|
||||
$customers.find('.record-details .form-label span').prop('hidden', false);
|
||||
$customers.find('#add-edit-delete-group').hide();
|
||||
$customers.find('#save-cancel-group').show();
|
||||
$filterCustomers.find('button').prop('disabled', true);
|
||||
$filterCustomers.find('.results').css('color', '#AAA');
|
||||
});
|
||||
|
||||
/**
|
||||
* Event: Cancel Customer Add/Edit Operation Button "Click"
|
||||
*/
|
||||
$customers.on('click', '#cancel-customer', () => {
|
||||
const id = $id.val();
|
||||
|
||||
App.Pages.Customers.resetForm();
|
||||
|
||||
if (id) {
|
||||
select(id, true);
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Event: Save Add/Edit Customer Operation "Click"
|
||||
*/
|
||||
$customers.on('click', '#save-customer', () => {
|
||||
const customer = {
|
||||
first_name: $firstName.val(),
|
||||
last_name: $lastName.val(),
|
||||
email: $email.val(),
|
||||
phone_number: $phoneNumber.val(),
|
||||
address: $address.val(),
|
||||
city: $city.val(),
|
||||
zip_code: $zipCode.val(),
|
||||
notes: $notes.val(),
|
||||
timezone: $timezone.val(),
|
||||
language: $language.val() || 'english',
|
||||
custom_field_1: $customField1.val(),
|
||||
custom_field_2: $customField2.val(),
|
||||
custom_field_3: $customField3.val(),
|
||||
custom_field_4: $customField4.val(),
|
||||
custom_field_5: $customField5.val(),
|
||||
ldap_dn: $ldapDn.val(),
|
||||
};
|
||||
|
||||
if ($id.val()) {
|
||||
customer.id = $id.val();
|
||||
}
|
||||
|
||||
if (!App.Pages.Customers.validate()) {
|
||||
return;
|
||||
}
|
||||
|
||||
App.Pages.Customers.save(customer);
|
||||
});
|
||||
|
||||
/**
|
||||
* Event: Delete Customer Button "Click"
|
||||
*/
|
||||
$customers.on('click', '#delete-customer', () => {
|
||||
const customerId = $id.val();
|
||||
const buttons = [
|
||||
{
|
||||
text: lang('cancel'),
|
||||
click: (event, messageModal) => {
|
||||
messageModal.hide();
|
||||
},
|
||||
},
|
||||
{
|
||||
text: lang('delete'),
|
||||
click: (event, messageModal) => {
|
||||
App.Pages.Customers.remove(customerId);
|
||||
messageModal.hide();
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
App.Utils.Message.show(lang('delete_customer'), lang('delete_record_prompt'), buttons);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Save a customer record to the database (via ajax post).
|
||||
*
|
||||
* @param {Object} customer Contains the customer data.
|
||||
*/
|
||||
function save(customer) {
|
||||
App.Http.Customers.save(customer).then((response) => {
|
||||
App.Layouts.Backend.displayNotification(lang('customer_saved'));
|
||||
App.Pages.Customers.resetForm();
|
||||
$('#filter-customers .key').val('');
|
||||
App.Pages.Customers.filter('', response.id, true);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Delete a customer record from database.
|
||||
*
|
||||
* @param {Number} id Record id to be deleted.
|
||||
*/
|
||||
function remove(id) {
|
||||
App.Http.Customers.destroy(id).then(() => {
|
||||
App.Layouts.Backend.displayNotification(lang('customer_deleted'));
|
||||
App.Pages.Customers.resetForm();
|
||||
App.Pages.Customers.filter($('#filter-customers .key').val());
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Validate customer data before save (insert or update).
|
||||
*/
|
||||
function validate() {
|
||||
$formMessage.removeClass('alert-danger').hide();
|
||||
$('.is-invalid').removeClass('is-invalid');
|
||||
|
||||
try {
|
||||
// Validate required fields.
|
||||
let missingRequired = false;
|
||||
|
||||
$('.required').each((index, requiredField) => {
|
||||
if ($(requiredField).val() === '') {
|
||||
$(requiredField).addClass('is-invalid');
|
||||
missingRequired = true;
|
||||
}
|
||||
});
|
||||
|
||||
if (missingRequired) {
|
||||
throw new Error(lang('fields_are_required'));
|
||||
}
|
||||
|
||||
// Validate email address.
|
||||
const email = $email.val();
|
||||
|
||||
if (email && !App.Utils.Validation.email(email)) {
|
||||
$email.addClass('is-invalid');
|
||||
throw new Error(lang('invalid_email'));
|
||||
}
|
||||
|
||||
// Validate phone number.
|
||||
const phoneNumber = $phoneNumber.val();
|
||||
|
||||
if (phoneNumber && !App.Utils.Validation.phone(phoneNumber)) {
|
||||
$phoneNumber.addClass('is-invalid');
|
||||
throw new Error(lang('invalid_phone'));
|
||||
}
|
||||
|
||||
return true;
|
||||
} catch (error) {
|
||||
$formMessage.addClass('alert-danger').text(error.message).show();
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Bring the customer form back to its initial state.
|
||||
*/
|
||||
function resetForm() {
|
||||
$customers.find('.record-details').find('input, select, textarea').val('').prop('disabled', true);
|
||||
$customers.find('.record-details .form-label span').prop('hidden', true);
|
||||
$customers.find('.record-details #timezone').val(vars('default_timezone'));
|
||||
$customers.find('.record-details #language').val(vars('default_language'));
|
||||
|
||||
$customerAppointments.empty();
|
||||
|
||||
$customers.find('#edit-customer, #delete-customer').prop('disabled', true);
|
||||
$customers.find('#add-edit-delete-group').show();
|
||||
$customers.find('#save-cancel-group').hide();
|
||||
|
||||
$customers.find('.record-details .is-invalid').removeClass('is-invalid');
|
||||
$customers.find('.record-details #form-message').hide();
|
||||
|
||||
$filterCustomers.find('button').prop('disabled', false);
|
||||
$filterCustomers.find('.selected').removeClass('selected');
|
||||
$filterCustomers.find('.results').css('color', '');
|
||||
}
|
||||
|
||||
/**
|
||||
* Display a customer record into the form.
|
||||
*
|
||||
* @param {Object} customer Contains the customer record data.
|
||||
*/
|
||||
function display(customer) {
|
||||
$id.val(customer.id);
|
||||
$firstName.val(customer.first_name);
|
||||
$lastName.val(customer.last_name);
|
||||
$email.val(customer.email);
|
||||
$phoneNumber.val(customer.phone_number);
|
||||
$address.val(customer.address);
|
||||
$city.val(customer.city);
|
||||
$zipCode.val(customer.zip_code);
|
||||
$notes.val(customer.notes);
|
||||
$timezone.val(customer.timezone);
|
||||
$language.val(customer.language || 'english');
|
||||
$ldapDn.val(customer.ldap_dn);
|
||||
$customField1.val(customer.custom_field_1);
|
||||
$customField2.val(customer.custom_field_2);
|
||||
$customField3.val(customer.custom_field_3);
|
||||
$customField4.val(customer.custom_field_4);
|
||||
$customField5.val(customer.custom_field_5);
|
||||
|
||||
$customerAppointments.empty();
|
||||
|
||||
if (!customer.appointments.length) {
|
||||
$('<p/>', {
|
||||
'text': lang('no_records_found'),
|
||||
}).appendTo($customerAppointments);
|
||||
}
|
||||
|
||||
customer.appointments.forEach((appointment) => {
|
||||
if (
|
||||
vars('role_slug') === App.Layouts.Backend.DB_SLUG_PROVIDER &&
|
||||
parseInt(appointment.id_users_provider) !== vars('user_id')
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (
|
||||
vars('role_slug') === App.Layouts.Backend.DB_SLUG_SECRETARY &&
|
||||
vars('secretary_providers').indexOf(appointment.id_users_provider) === -1
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
const start = App.Utils.Date.format(
|
||||
moment(appointment.start_datetime).toDate(),
|
||||
vars('date_format'),
|
||||
vars('time_format'),
|
||||
true,
|
||||
);
|
||||
|
||||
const end = App.Utils.Date.format(
|
||||
moment(appointment.end_datetime).toDate(),
|
||||
vars('date_format'),
|
||||
vars('time_format'),
|
||||
true,
|
||||
);
|
||||
|
||||
$('<div/>', {
|
||||
'class': 'appointment-row',
|
||||
'data-id': appointment.id,
|
||||
'html': [
|
||||
// Service - Provider
|
||||
|
||||
$('<a/>', {
|
||||
'href': App.Utils.Url.siteUrl(`calendar/reschedule/${appointment.hash}`),
|
||||
'html': [
|
||||
$('<i/>', {
|
||||
'class': 'fas fa-edit me-1',
|
||||
}),
|
||||
$('<strong/>', {
|
||||
'text':
|
||||
appointment.service.name +
|
||||
' - ' +
|
||||
appointment.provider.first_name +
|
||||
' ' +
|
||||
appointment.provider.last_name,
|
||||
}),
|
||||
$('<br/>'),
|
||||
],
|
||||
}),
|
||||
|
||||
// Start
|
||||
|
||||
$('<small/>', {
|
||||
'text': start,
|
||||
}),
|
||||
$('<br/>'),
|
||||
|
||||
// End
|
||||
|
||||
$('<small/>', {
|
||||
'text': end,
|
||||
}),
|
||||
$('<br/>'),
|
||||
|
||||
// Timezone
|
||||
|
||||
$('<small/>', {
|
||||
'text': vars('timezones')[appointment.provider.timezone],
|
||||
}),
|
||||
],
|
||||
}).appendTo('#customer-appointments');
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Filter customer records.
|
||||
*
|
||||
* @param {String} keyword This keyword string is used to filter the customer records.
|
||||
* @param {Number} selectId Optional, if set then after the filter operation the record with the given
|
||||
* ID will be selected (but not displayed).
|
||||
* @param {Boolean} show Optional (false), if true then the selected record will be displayed on the form.
|
||||
*/
|
||||
function filter(keyword, selectId = null, show = false) {
|
||||
App.Http.Customers.search(keyword, filterLimit).then((response) => {
|
||||
filterResults = response;
|
||||
|
||||
$filterCustomers.find('.results').empty();
|
||||
|
||||
response.forEach((customer) => {
|
||||
$('#filter-customers .results').append(App.Pages.Customers.getFilterHtml(customer)).append($('<hr/>'));
|
||||
});
|
||||
|
||||
if (!response.length) {
|
||||
$filterCustomers.find('.results').append(
|
||||
$('<em/>', {
|
||||
'text': lang('no_records_found'),
|
||||
}),
|
||||
);
|
||||
} else if (response.length === filterLimit) {
|
||||
$('<button/>', {
|
||||
'type': 'button',
|
||||
'class': 'btn btn-outline-secondary w-100 load-more text-center',
|
||||
'text': lang('load_more'),
|
||||
'click': () => {
|
||||
filterLimit += 20;
|
||||
App.Pages.Customers.filter(keyword, selectId, show);
|
||||
},
|
||||
}).appendTo('#filter-customers .results');
|
||||
}
|
||||
|
||||
if (selectId) {
|
||||
App.Pages.Customers.select(selectId, show);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the filter results row HTML code.
|
||||
*
|
||||
* @param {Object} customer Contains the customer data.
|
||||
*
|
||||
* @return {String} Returns the record HTML code.
|
||||
*/
|
||||
function getFilterHtml(customer) {
|
||||
const name = (customer.first_name || '[No First Name]') + ' ' + (customer.last_name || '[No Last Name]');
|
||||
|
||||
let info = customer.email || '[No Email]';
|
||||
|
||||
info = customer.phone_number ? info + ', ' + customer.phone_number : info;
|
||||
|
||||
return $('<div/>', {
|
||||
'class': 'customer-row entry',
|
||||
'data-id': customer.id,
|
||||
'html': [
|
||||
$('<strong/>', {
|
||||
'text': name,
|
||||
}),
|
||||
$('<br/>'),
|
||||
$('<small/>', {
|
||||
'class': 'text-muted',
|
||||
'text': info,
|
||||
}),
|
||||
$('<br/>'),
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Select a specific record from the current filter results.
|
||||
*
|
||||
* If the customer id does not exist in the list then no record will be selected.
|
||||
*
|
||||
* @param {Number} id The record id to be selected from the filter results.
|
||||
* @param {Boolean} show Optional (false), if true then the method will display the record on the form.
|
||||
*/
|
||||
function select(id, show = false) {
|
||||
$('#filter-customers .selected').removeClass('selected');
|
||||
|
||||
$('#filter-customers .entry[data-id="' + id + '"]').addClass('selected');
|
||||
|
||||
if (show) {
|
||||
const customer = filterResults.find((filterResult) => Number(filterResult.id) === Number(id));
|
||||
|
||||
App.Pages.Customers.display(customer);
|
||||
|
||||
$('#edit-customer, #delete-customer').prop('disabled', false);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize the module.
|
||||
*/
|
||||
function initialize() {
|
||||
App.Pages.Customers.resetForm();
|
||||
App.Pages.Customers.addEventListeners();
|
||||
App.Pages.Customers.filter('');
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', initialize);
|
||||
|
||||
return {
|
||||
filter,
|
||||
save,
|
||||
remove,
|
||||
validate,
|
||||
getFilterHtml,
|
||||
resetForm,
|
||||
display,
|
||||
select,
|
||||
addEventListeners,
|
||||
};
|
||||
})();
|
||||
188
assets/js/pages/general_settings.js
Normal file
188
assets/js/pages/general_settings.js
Normal file
@ -0,0 +1,188 @@
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Easy!Appointments - Online Appointment Scheduler
|
||||
*
|
||||
* @package EasyAppointments
|
||||
* @author A.Tselegidis <alextselegidis@gmail.com>
|
||||
* @copyright Copyright (c) Alex Tselegidis
|
||||
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
|
||||
* @link https://easyappointments.org
|
||||
* @since v1.5.0
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
/**
|
||||
* General settings page.
|
||||
*
|
||||
* This module implements the functionality of the general settings page.
|
||||
*/
|
||||
App.Pages.GeneralSettings = (function () {
|
||||
const $saveSettings = $('#save-settings');
|
||||
const $companyLogo = $('#company-logo');
|
||||
const $companyLogoPreview = $('#company-logo-preview');
|
||||
const $removeCompanyLogo = $('#remove-company-logo');
|
||||
const $companyColor = $('#company-color');
|
||||
const $resetCompanyColor = $('#reset-company-color');
|
||||
let companyLogoBase64 = '';
|
||||
|
||||
/**
|
||||
* Check if the form has invalid values.
|
||||
*
|
||||
* @return {Boolean}
|
||||
*/
|
||||
function isInvalid() {
|
||||
try {
|
||||
$('#general-settings .is-invalid').removeClass('is-invalid');
|
||||
|
||||
// Validate required fields.
|
||||
|
||||
let missingRequiredFields = false;
|
||||
|
||||
$('#general-settings .required').each((index, requiredField) => {
|
||||
const $requiredField = $(requiredField);
|
||||
|
||||
if (!$requiredField.val()) {
|
||||
$requiredField.addClass('is-invalid');
|
||||
missingRequiredFields = true;
|
||||
}
|
||||
});
|
||||
|
||||
if (missingRequiredFields) {
|
||||
throw new Error(lang('fields_are_required'));
|
||||
}
|
||||
|
||||
return false;
|
||||
} catch (error) {
|
||||
App.Layouts.Backend.displayNotification(error.message);
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
function deserialize(generalSettings) {
|
||||
generalSettings.forEach((generalSetting) => {
|
||||
if (generalSetting.name === 'company_logo' && generalSetting.value) {
|
||||
companyLogoBase64 = generalSetting.value;
|
||||
$companyLogoPreview.attr('src', generalSetting.value);
|
||||
$companyLogoPreview.prop('hidden', false);
|
||||
$removeCompanyLogo.prop('hidden', false);
|
||||
return;
|
||||
}
|
||||
|
||||
if (generalSetting.name === 'company_color' && generalSetting.value !== '#ffffff') {
|
||||
$resetCompanyColor.prop('hidden', false);
|
||||
}
|
||||
|
||||
const $field = $('[data-field="' + generalSetting.name + '"]');
|
||||
|
||||
$field.is(':checkbox')
|
||||
? $field.prop('checked', Boolean(Number(generalSetting.value)))
|
||||
: $field.val(generalSetting.value);
|
||||
});
|
||||
}
|
||||
|
||||
function serialize() {
|
||||
const generalSettings = [];
|
||||
|
||||
$('[data-field]').each((index, field) => {
|
||||
const $field = $(field);
|
||||
|
||||
generalSettings.push({
|
||||
name: $field.data('field'),
|
||||
value: $field.is(':checkbox') ? Number($field.prop('checked')) : $field.val(),
|
||||
});
|
||||
});
|
||||
|
||||
generalSettings.push({
|
||||
name: 'company_logo',
|
||||
value: companyLogoBase64,
|
||||
});
|
||||
|
||||
return generalSettings;
|
||||
}
|
||||
|
||||
/**
|
||||
* Save the account information.
|
||||
*/
|
||||
function onSaveSettingsClick() {
|
||||
if (isInvalid()) {
|
||||
App.Layouts.Backend.displayNotification(lang('settings_are_invalid'));
|
||||
return;
|
||||
}
|
||||
|
||||
const generalSettings = serialize();
|
||||
|
||||
App.Http.GeneralSettings.save(generalSettings).done(() => {
|
||||
App.Layouts.Backend.displayNotification(lang('settings_saved'), [
|
||||
{
|
||||
label: lang('reload'), // Reload Page
|
||||
function: () => window.location.reload(),
|
||||
},
|
||||
]);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Convert the selected image to a base64 encoded string.
|
||||
*/
|
||||
function onCompanyLogoChange() {
|
||||
const file = $companyLogo[0].files[0];
|
||||
|
||||
if (!file) {
|
||||
$removeCompanyLogo.trigger('click');
|
||||
return;
|
||||
}
|
||||
|
||||
App.Utils.File.toBase64(file).then((base64) => {
|
||||
companyLogoBase64 = base64;
|
||||
$companyLogoPreview.attr('src', base64);
|
||||
$companyLogoPreview.prop('hidden', false);
|
||||
$removeCompanyLogo.prop('hidden', false);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the company logo data.
|
||||
*/
|
||||
function onRemoveCompanyLogoClick() {
|
||||
companyLogoBase64 = '';
|
||||
$companyLogo.val('');
|
||||
$companyLogoPreview.attr('src', '#');
|
||||
$companyLogoPreview.prop('hidden', true);
|
||||
$removeCompanyLogo.prop('hidden', true);
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle the reset company color button.
|
||||
*/
|
||||
function onCompanyColorChange() {
|
||||
$resetCompanyColor.prop('hidden', $companyColor.val() === '#ffffff');
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the company color value to "#ffffff" which is the default one.
|
||||
*/
|
||||
function onResetCompanyColorClick() {
|
||||
$companyColor.val('#ffffff');
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize the module.
|
||||
*/
|
||||
function initialize() {
|
||||
$saveSettings.on('click', onSaveSettingsClick);
|
||||
|
||||
$companyLogo.on('change', onCompanyLogoChange);
|
||||
|
||||
$removeCompanyLogo.on('click', onRemoveCompanyLogoClick);
|
||||
|
||||
$companyColor.on('change', onCompanyColorChange);
|
||||
|
||||
$resetCompanyColor.on('click', onResetCompanyColorClick);
|
||||
|
||||
const generalSettings = vars('general_settings');
|
||||
|
||||
deserialize(generalSettings);
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', initialize);
|
||||
|
||||
return {};
|
||||
})();
|
||||
109
assets/js/pages/google_analytics_settings.js
Normal file
109
assets/js/pages/google_analytics_settings.js
Normal file
@ -0,0 +1,109 @@
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Easy!Appointments - Online Appointment Scheduler
|
||||
*
|
||||
* @package EasyAppointments
|
||||
* @author A.Tselegidis <alextselegidis@gmail.com>
|
||||
* @copyright Copyright (c) Alex Tselegidis
|
||||
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
|
||||
* @link https://easyappointments.org
|
||||
* @since v1.5.0
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
/**
|
||||
* Google Analytics settings page.
|
||||
*
|
||||
* This module implements the functionality of the Google Analytics settings page.
|
||||
*/
|
||||
App.Pages.GoogleAnalyticsSettings = (function () {
|
||||
const $saveSettings = $('#save-settings');
|
||||
|
||||
/**
|
||||
* Check if the form has invalid values.
|
||||
*
|
||||
* @return {Boolean}
|
||||
*/
|
||||
function isInvalid() {
|
||||
try {
|
||||
$('#google-analytics-settings .is-invalid').removeClass('is-invalid');
|
||||
|
||||
// Validate required fields.
|
||||
|
||||
let missingRequiredFields = false;
|
||||
|
||||
$('#google-analytics-settings .required').each((index, requiredField) => {
|
||||
const $requiredField = $(requiredField);
|
||||
|
||||
if (!$requiredField.val()) {
|
||||
$requiredField.addClass('is-invalid');
|
||||
missingRequiredFields = true;
|
||||
}
|
||||
});
|
||||
|
||||
if (missingRequiredFields) {
|
||||
throw new Error(lang('fields_are_required'));
|
||||
}
|
||||
|
||||
return false;
|
||||
} catch (error) {
|
||||
App.Layouts.Backend.displayNotification(error.message);
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
function deserialize(googleAnalyticsSettings) {
|
||||
googleAnalyticsSettings.forEach((googleAnalyticsSetting) => {
|
||||
const $field = $('[data-field="' + googleAnalyticsSetting.name + '"]');
|
||||
|
||||
$field.is(':checkbox')
|
||||
? $field.prop('checked', Boolean(Number(googleAnalyticsSetting.value)))
|
||||
: $field.val(googleAnalyticsSetting.value);
|
||||
});
|
||||
}
|
||||
|
||||
function serialize() {
|
||||
const googleAnalyticsSettings = [];
|
||||
|
||||
$('[data-field]').each((index, field) => {
|
||||
const $field = $(field);
|
||||
|
||||
googleAnalyticsSettings.push({
|
||||
name: $field.data('field'),
|
||||
value: $field.is(':checkbox') ? Number($field.prop('checked')) : $field.val(),
|
||||
});
|
||||
});
|
||||
|
||||
return googleAnalyticsSettings;
|
||||
}
|
||||
|
||||
/**
|
||||
* Save the account information.
|
||||
*/
|
||||
function onSaveSettingsClick() {
|
||||
if (isInvalid()) {
|
||||
App.Layouts.Backend.displayNotification(lang('settings_are_invalid'));
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
const googleAnalyticsSettings = serialize();
|
||||
|
||||
App.Http.GoogleAnalyticsSettings.save(googleAnalyticsSettings).done(() => {
|
||||
App.Layouts.Backend.displayNotification(lang('settings_saved'));
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize the module.
|
||||
*/
|
||||
function initialize() {
|
||||
$saveSettings.on('click', onSaveSettingsClick);
|
||||
|
||||
const googleAnalyticsSettings = vars('google_analytics_settings');
|
||||
|
||||
deserialize(googleAnalyticsSettings);
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', initialize);
|
||||
|
||||
return {};
|
||||
})();
|
||||
176
assets/js/pages/installation.js
Normal file
176
assets/js/pages/installation.js
Normal file
@ -0,0 +1,176 @@
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Easy!Appointments - Online Appointment Scheduler
|
||||
*
|
||||
* @package EasyAppointments
|
||||
* @author A.Tselegidis <alextselegidis@gmail.com>
|
||||
* @copyright Copyright (c) Alex Tselegidis
|
||||
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
|
||||
* @link https://easyappointments.org
|
||||
* @since v1.5.0
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
/**
|
||||
* Installation page.
|
||||
*
|
||||
* This module implements the functionality of the installation page.
|
||||
*/
|
||||
App.Pages.Installation = (function () {
|
||||
const MIN_PASSWORD_LENGTH = 7;
|
||||
const $install = $('#install');
|
||||
const $alert = $('.alert');
|
||||
const $loading = $('#loading');
|
||||
const $firstName = $('#first-name');
|
||||
const $lastName = $('#last-name');
|
||||
const $email = $('#email');
|
||||
const $phoneNumber = $('#phone-number');
|
||||
const $username = $('#username');
|
||||
const $password = $('#password');
|
||||
const $passwordConfirm = $('#password-confirm');
|
||||
const $language = $('#language');
|
||||
const $companyName = $('#company-name');
|
||||
const $companyEmail = $('#company-email');
|
||||
const $companyLink = $('#company-link');
|
||||
|
||||
$(document).ajaxStart(() => {
|
||||
$loading.removeClass('d-none');
|
||||
});
|
||||
|
||||
$(document).ajaxStop(() => {
|
||||
$loading.addClass('d-none');
|
||||
});
|
||||
|
||||
/**
|
||||
* Event: Install Easy!Appointments Button "Click"
|
||||
*/
|
||||
$install.on('click', () => {
|
||||
if (!validate()) {
|
||||
return;
|
||||
}
|
||||
|
||||
const url = App.Utils.Url.siteUrl('installation/perform');
|
||||
|
||||
const data = {
|
||||
csrf_token: vars('csrf_token'),
|
||||
admin: getAdminData(),
|
||||
company: getCompanyData(),
|
||||
};
|
||||
|
||||
$.ajax({
|
||||
url: url,
|
||||
type: 'POST',
|
||||
data: data,
|
||||
dataType: 'json',
|
||||
}).done(() => {
|
||||
$alert
|
||||
.text('Easy!Appointments has been successfully installed!')
|
||||
.addClass('alert-success')
|
||||
.prop('hidden', false);
|
||||
|
||||
setTimeout(() => {
|
||||
window.location.href = App.Utils.Url.siteUrl('calendar');
|
||||
}, 1000);
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* Validates the user input.
|
||||
*
|
||||
* Use this before executing the installation procedure.
|
||||
*
|
||||
* @return {Boolean} Returns the validation result.
|
||||
*/
|
||||
function validate() {
|
||||
try {
|
||||
const $fields = $('input');
|
||||
|
||||
$alert.removeClass('alert-danger').prop('hidden', true);
|
||||
|
||||
$fields.removeClass('is-invalid');
|
||||
|
||||
// Check for empty fields.
|
||||
let missingRequired = false;
|
||||
|
||||
$fields.each((index, field) => {
|
||||
if (!$(field).val()) {
|
||||
$(field).addClass('is-invalid');
|
||||
missingRequired = true;
|
||||
}
|
||||
});
|
||||
|
||||
if (missingRequired) {
|
||||
throw new Error(lang('fields_are_required'));
|
||||
}
|
||||
|
||||
// Validate Passwords
|
||||
if ($password.val() !== $passwordConfirm.val()) {
|
||||
$password.addClass('is-invalid');
|
||||
$passwordConfirm.addClass('is-invalid');
|
||||
throw new Error(lang('passwords_mismatch'));
|
||||
}
|
||||
|
||||
if ($password.val().length < MIN_PASSWORD_LENGTH) {
|
||||
$password.addClass('is-invalid');
|
||||
$passwordConfirm.addClass('is-invalid');
|
||||
throw new Error(lang('password_length_notice').replace('$number', MIN_PASSWORD_LENGTH));
|
||||
}
|
||||
|
||||
// Validate Email
|
||||
if (!App.Utils.Validation.email($email.val())) {
|
||||
$email.addClass('is-invalid');
|
||||
throw new Error(lang('invalid_email'));
|
||||
}
|
||||
|
||||
if (!App.Utils.Validation.email($companyEmail.val())) {
|
||||
$companyEmail.addClass('is-invalid');
|
||||
throw new Error(lang('invalid_email'));
|
||||
}
|
||||
|
||||
return true;
|
||||
} catch (error) {
|
||||
$alert.addClass('alert-danger').text(error.message).prop('hidden', false);
|
||||
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the admin data as an object.
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
function getAdminData() {
|
||||
return {
|
||||
first_name: $firstName.val(),
|
||||
last_name: $lastName.val(),
|
||||
email: $email.val(),
|
||||
phone_number: $phoneNumber.val(),
|
||||
username: $username.val(),
|
||||
password: $password.val(),
|
||||
language: $language.val(),
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the company data as an object.
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
function getCompanyData() {
|
||||
return {
|
||||
company_name: $companyName.val(),
|
||||
company_email: $companyEmail.val(),
|
||||
company_link: $companyLink.val(),
|
||||
};
|
||||
}
|
||||
|
||||
// Validate the base URL setting (must not contain any trailing slash).
|
||||
if (vars('base_url').slice(-1) === '/') {
|
||||
App.Utils.Message.show(
|
||||
'Invalid Configuration Detected',
|
||||
'Please remove any trailing slashes from your "BASE_URL" setting of the root "config.php" file and try again.',
|
||||
);
|
||||
$install.prop('disabled', true).fadeTo('0.4');
|
||||
}
|
||||
|
||||
return {};
|
||||
})();
|
||||
256
assets/js/pages/ldap_settings.js
Normal file
256
assets/js/pages/ldap_settings.js
Normal file
@ -0,0 +1,256 @@
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Easy!Appointments - Online Appointment Scheduler
|
||||
*
|
||||
* @package EasyAppointments
|
||||
* @author A.Tselegidis <alextselegidis@gmail.com>
|
||||
* @copyright Copyright (c) Alex Tselegidis
|
||||
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
|
||||
* @link https://easyappointments.org
|
||||
* @since v1.5.0
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
/**
|
||||
* LDAP settings page.
|
||||
*
|
||||
* This module implements the functionality of the LDAP settings page.
|
||||
*/
|
||||
App.Pages.LdapSettings = (function () {
|
||||
const $saveSettings = $('#save-settings');
|
||||
const $searchForm = $('#ldap-search-form');
|
||||
const $searchKeyword = $('#ldap-search-keyword');
|
||||
const $searchResults = $('#ldap-search-results');
|
||||
const $ldapFilter = $('#ldap-filter');
|
||||
const $ldapFieldMapping = $('#ldap-field-mapping');
|
||||
const $resetFilter = $('#ldap-reset-filter');
|
||||
const $resetFieldMapping = $('#ldap-reset-field-mapping');
|
||||
|
||||
/**
|
||||
* Check if the form has invalid values.
|
||||
*
|
||||
* @return {Boolean}
|
||||
*/
|
||||
function isInvalid() {
|
||||
try {
|
||||
$('#ldap-settings .is-invalid').removeClass('is-invalid');
|
||||
|
||||
// Validate required fields.
|
||||
|
||||
let missingRequiredFields = false;
|
||||
|
||||
$('#ldap-settings .required').each((index, requiredField) => {
|
||||
const $requiredField = $(requiredField);
|
||||
|
||||
if (!$requiredField.val()) {
|
||||
$requiredField.addClass('is-invalid');
|
||||
missingRequiredFields = true;
|
||||
}
|
||||
});
|
||||
|
||||
if (missingRequiredFields) {
|
||||
throw new Error(lang('fields_are_required'));
|
||||
}
|
||||
|
||||
return false;
|
||||
} catch (error) {
|
||||
App.Layouts.Backend.displayNotification(error.message);
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Apply the setting values to the UI form.
|
||||
*
|
||||
* @param {Array} ldapSettings
|
||||
*/
|
||||
function deserialize(ldapSettings) {
|
||||
ldapSettings.forEach((ldapSetting) => {
|
||||
const $field = $('[data-field="' + ldapSetting.name + '"]');
|
||||
|
||||
$field.is(':checkbox')
|
||||
? $field.prop('checked', Boolean(Number(ldapSetting.value)))
|
||||
: $field.val(ldapSetting.value);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Prepare an array of setting values based on the UI form.
|
||||
*
|
||||
* @return {Array}
|
||||
*/
|
||||
function serialize() {
|
||||
const ldapSettings = [];
|
||||
|
||||
$('[data-field]').each((index, field) => {
|
||||
const $field = $(field);
|
||||
|
||||
ldapSettings.push({
|
||||
name: $field.data('field'),
|
||||
value: $field.is(':checkbox') ? Number($field.prop('checked')) : $field.val(),
|
||||
});
|
||||
});
|
||||
|
||||
return ldapSettings;
|
||||
}
|
||||
|
||||
function getLdapFieldMapping() {
|
||||
const jsonLdapFieldMapping = $ldapFieldMapping.val();
|
||||
return JSON.parse(jsonLdapFieldMapping);
|
||||
}
|
||||
|
||||
/**
|
||||
* Save the current server settings.
|
||||
*/
|
||||
function saveSettings() {
|
||||
if (isInvalid()) {
|
||||
App.Layouts.Backend.displayNotification(lang('settings_are_invalid'));
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
const ldapSettings = serialize();
|
||||
|
||||
return App.Http.LdapSettings.save(ldapSettings);
|
||||
}
|
||||
|
||||
/**
|
||||
* Search the LDAP server based on a keyword.
|
||||
*/
|
||||
function searchServer() {
|
||||
$searchResults.empty();
|
||||
|
||||
const keyword = $searchKeyword.val();
|
||||
|
||||
if (!keyword) {
|
||||
return;
|
||||
}
|
||||
|
||||
App.Http.LdapSettings.search(keyword).done((entries) => {
|
||||
$searchResults.empty();
|
||||
|
||||
if (!entries?.length) {
|
||||
renderNoRecordsFound().appendTo($searchResults);
|
||||
return;
|
||||
}
|
||||
|
||||
entries.forEach((entry) => {
|
||||
renderEntry(entry).appendTo($searchResults);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Save the account information.
|
||||
*/
|
||||
function onSaveSettingsClick() {
|
||||
saveSettings().done(() => {
|
||||
App.Layouts.Backend.displayNotification(lang('settings_saved'));
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the field value back to the original state.
|
||||
*/
|
||||
function onResetFilterClick() {
|
||||
$ldapFilter.val(vars('ldap_default_filter'));
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the field value back to the original state.
|
||||
*/
|
||||
function onResetFieldMappingClick() {
|
||||
const defaultFieldMapping = vars('ldap_default_field_mapping');
|
||||
const jsonDefaultFieldMapping = JSON.stringify(defaultFieldMapping, null, 2);
|
||||
$ldapFieldMapping.val(jsonDefaultFieldMapping);
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle the LDAP import button click
|
||||
*/
|
||||
function onLdapImportClick(event) {
|
||||
const $target = $(event.target);
|
||||
const $card = $target.closest('.card');
|
||||
const entry = $card.data('entry');
|
||||
const ldapFieldMapping = getLdapFieldMapping();
|
||||
|
||||
App.Components.LdapImportModal.open(entry, ldapFieldMapping).done(() => {
|
||||
App.Layouts.Backend.displayNotification(lang('user_imported'));
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Render the no-records-found message
|
||||
*/
|
||||
function renderNoRecordsFound() {
|
||||
return $(`
|
||||
<div class="text-muted fst-italic">
|
||||
${lang('no_records_found')}
|
||||
</div>
|
||||
`);
|
||||
}
|
||||
|
||||
/**
|
||||
* Render the LDAP entry data on screen
|
||||
*
|
||||
* @param {Object} entry
|
||||
*/
|
||||
function renderEntry(entry) {
|
||||
if (!entry?.dn) {
|
||||
return;
|
||||
}
|
||||
|
||||
const $entry = $(`
|
||||
<div class="card small mb-2">
|
||||
<div class="card-header p-2 fw-bold">
|
||||
${entry.dn}
|
||||
</div>
|
||||
<div class="card-body p-2">
|
||||
<p class="d-block mb-2">${lang('content')}</p>
|
||||
|
||||
<pre class="overflow-y-auto bg-light rounded p-2" style="max-height: 200px">${JSON.stringify(entry, null, 2)}</pre>
|
||||
|
||||
<div class="d-lg-flex">
|
||||
<button class="btn btn-outline-primary btn-sm px-4 ldap-import ms-lg-auto">
|
||||
${lang('import')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`);
|
||||
|
||||
$entry.data('entry', entry);
|
||||
|
||||
return $entry;
|
||||
}
|
||||
|
||||
/**
|
||||
* Save the current connection settings and then search the directory based on the provided keyword.
|
||||
*
|
||||
* @param {Object} event
|
||||
*/
|
||||
function onSearchFormSubmit(event) {
|
||||
event.preventDefault();
|
||||
|
||||
saveSettings().done(() => {
|
||||
searchServer();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize the module.
|
||||
*/
|
||||
function initialize() {
|
||||
$saveSettings.on('click', onSaveSettingsClick);
|
||||
$resetFilter.on('click', onResetFilterClick);
|
||||
$resetFieldMapping.on('click', onResetFieldMappingClick);
|
||||
$searchForm.on('submit', onSearchFormSubmit);
|
||||
$searchResults.on('click', '.ldap-import', onLdapImportClick);
|
||||
|
||||
const ldapSettings = vars('ldap_settings');
|
||||
|
||||
deserialize(ldapSettings);
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', initialize);
|
||||
|
||||
return {};
|
||||
})();
|
||||
158
assets/js/pages/legal_settings.js
Normal file
158
assets/js/pages/legal_settings.js
Normal file
@ -0,0 +1,158 @@
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Easy!Appointments - Online Appointment Scheduler
|
||||
*
|
||||
* @package EasyAppointments
|
||||
* @author A.Tselegidis <alextselegidis@gmail.com>
|
||||
* @copyright Copyright (c) Alex Tselegidis
|
||||
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
|
||||
* @link https://easyappointments.org
|
||||
* @since v1.5.0
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
/**
|
||||
* Legal settings page.
|
||||
*
|
||||
* This module implements the functionality of the legal settings page.
|
||||
*/
|
||||
App.Pages.LegalSettings = (function () {
|
||||
const $saveSettings = $('#save-settings');
|
||||
const $displayCookieNotice = $('#display-cookie-notice');
|
||||
const $cookieNoticeContent = $('#cookie-notice-content');
|
||||
const $displayTermsAndConditions = $('#display-terms-and-conditions');
|
||||
const $termsAndConditionsContent = $('#terms-and-conditions-content');
|
||||
const $displayPrivacyPolicy = $('#display-privacy-policy');
|
||||
const $privacyPolicyContent = $('#privacy-policy-content');
|
||||
|
||||
/**
|
||||
* Check if the form has invalid values.
|
||||
*
|
||||
* @return {Boolean}
|
||||
*/
|
||||
function isInvalid() {
|
||||
try {
|
||||
$('#legal-settings .is-invalid').removeClass('is-invalid');
|
||||
|
||||
// Validate required fields.
|
||||
|
||||
let missingRequiredFields = false;
|
||||
|
||||
$('#legal-settings .required').each((index, requiredField) => {
|
||||
const $requiredField = $(requiredField);
|
||||
|
||||
if (!$requiredField.val()) {
|
||||
$requiredField.addClass('is-invalid');
|
||||
missingRequiredFields = true;
|
||||
}
|
||||
});
|
||||
|
||||
if (missingRequiredFields) {
|
||||
throw new Error(lang('fields_are_required'));
|
||||
}
|
||||
|
||||
return false;
|
||||
} catch (error) {
|
||||
App.Layouts.Backend.displayNotification(error.message);
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
function deserialize(legalSettings) {
|
||||
legalSettings.forEach((legalSetting) => {
|
||||
if (legalSetting.name === 'display_cookie_notice') {
|
||||
$displayCookieNotice.prop('checked', Boolean(Number(legalSetting.value)));
|
||||
}
|
||||
|
||||
if (legalSetting.name === 'cookie_notice_content') {
|
||||
$cookieNoticeContent.trumbowyg('html', legalSetting.value);
|
||||
}
|
||||
|
||||
if (legalSetting.name === 'display_terms_and_conditions') {
|
||||
$displayTermsAndConditions.prop('checked', Boolean(Number(legalSetting.value)));
|
||||
}
|
||||
|
||||
if (legalSetting.name === 'terms_and_conditions_content') {
|
||||
$termsAndConditionsContent.trumbowyg('html', legalSetting.value);
|
||||
}
|
||||
|
||||
if (legalSetting.name === 'display_privacy_policy') {
|
||||
$displayPrivacyPolicy.prop('checked', Boolean(Number(legalSetting.value)));
|
||||
}
|
||||
|
||||
if (legalSetting.name === 'privacy_policy_content') {
|
||||
$privacyPolicyContent.trumbowyg('html', legalSetting.value);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function serialize() {
|
||||
const legalSettings = [];
|
||||
|
||||
legalSettings.push({
|
||||
name: 'display_cookie_notice',
|
||||
value: $displayCookieNotice.prop('checked') ? '1' : '0',
|
||||
});
|
||||
|
||||
legalSettings.push({
|
||||
name: 'cookie_notice_content',
|
||||
value: $cookieNoticeContent.trumbowyg('html'),
|
||||
});
|
||||
|
||||
legalSettings.push({
|
||||
name: 'display_terms_and_conditions',
|
||||
value: $displayTermsAndConditions.prop('checked') ? '1' : '0',
|
||||
});
|
||||
|
||||
legalSettings.push({
|
||||
name: 'terms_and_conditions_content',
|
||||
value: $termsAndConditionsContent.trumbowyg('html'),
|
||||
});
|
||||
|
||||
legalSettings.push({
|
||||
name: 'display_privacy_policy',
|
||||
value: $displayPrivacyPolicy.prop('checked') ? '1' : '0',
|
||||
});
|
||||
|
||||
legalSettings.push({
|
||||
name: 'privacy_policy_content',
|
||||
value: $privacyPolicyContent.trumbowyg('html'),
|
||||
});
|
||||
|
||||
return legalSettings;
|
||||
}
|
||||
|
||||
/**
|
||||
* Save the account information.
|
||||
*/
|
||||
function onSaveSettingsClick() {
|
||||
if (isInvalid()) {
|
||||
App.Layouts.Backend.displayNotification(lang('settings_are_invalid'));
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
const legalSettings = serialize();
|
||||
|
||||
App.Http.LegalSettings.save(legalSettings).done(() => {
|
||||
App.Layouts.Backend.displayNotification(lang('settings_saved'));
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize the module.
|
||||
*/
|
||||
function initialize() {
|
||||
App.Utils.UI.initializeTextEditor($cookieNoticeContent);
|
||||
App.Utils.UI.initializeTextEditor($termsAndConditionsContent);
|
||||
App.Utils.UI.initializeTextEditor($privacyPolicyContent);
|
||||
|
||||
const legalSettings = vars('legal_settings');
|
||||
|
||||
deserialize(legalSettings);
|
||||
|
||||
$saveSettings.on('click', onSaveSettingsClick);
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', initialize);
|
||||
|
||||
return {};
|
||||
})();
|
||||
56
assets/js/pages/login.js
Normal file
56
assets/js/pages/login.js
Normal file
@ -0,0 +1,56 @@
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Easy!Appointments - Online Appointment Scheduler
|
||||
*
|
||||
* @package EasyAppointments
|
||||
* @author A.Tselegidis <alextselegidis@gmail.com>
|
||||
* @copyright Copyright (c) Alex Tselegidis
|
||||
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
|
||||
* @link https://easyappointments.org
|
||||
* @since v1.5.0
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
/**
|
||||
* Login page.
|
||||
*
|
||||
* This module implements the functionality of the login page.
|
||||
*/
|
||||
App.Pages.Login = (function () {
|
||||
const $loginForm = $('#login-form');
|
||||
const $username = $('#username');
|
||||
const $password = $('#password');
|
||||
|
||||
/**
|
||||
* Login Button "Click"
|
||||
*
|
||||
* Make an ajax call to the server and check whether the user's credentials are right.
|
||||
*
|
||||
* If yes then redirect him to his desired page, otherwise display a message.
|
||||
*/
|
||||
function onLoginFormSubmit(event) {
|
||||
event.preventDefault();
|
||||
|
||||
const username = $username.val();
|
||||
const password = $password.val();
|
||||
|
||||
if (!username || !password) {
|
||||
return;
|
||||
}
|
||||
|
||||
const $alert = $('.alert');
|
||||
|
||||
$alert.addClass('d-none');
|
||||
|
||||
App.Http.Login.validate(username, password).done((response) => {
|
||||
if (response.success) {
|
||||
window.location.href = vars('dest_url');
|
||||
} else {
|
||||
$alert.text(lang('login_failed'));
|
||||
$alert.removeClass('d-none alert-danger alert-success').addClass('alert-danger');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
$loginForm.on('submit', onLoginFormSubmit);
|
||||
|
||||
return {};
|
||||
})();
|
||||
109
assets/js/pages/matomo_analytics_settings.js
Normal file
109
assets/js/pages/matomo_analytics_settings.js
Normal file
@ -0,0 +1,109 @@
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Easy!Appointments - Online Appointment Scheduler
|
||||
*
|
||||
* @package EasyAppointments
|
||||
* @author A.Tselegidis <alextselegidis@gmail.com>
|
||||
* @copyright Copyright (c) Alex Tselegidis
|
||||
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
|
||||
* @link https://easyappointments.org
|
||||
* @since v1.5.0
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
/**
|
||||
* Matomo Analytics settings page.
|
||||
*
|
||||
* This module implements the functionality of the Matomo Analytics settings page.
|
||||
*/
|
||||
App.Pages.MatomoAnalyticsSettings = (function () {
|
||||
const $saveSettings = $('#save-settings');
|
||||
|
||||
/**
|
||||
* Check if the form has invalid values.
|
||||
*
|
||||
* @return {Boolean}
|
||||
*/
|
||||
function isInvalid() {
|
||||
try {
|
||||
$('#matomo-analytics-settings .is-invalid').removeClass('is-invalid');
|
||||
|
||||
// Validate required fields.
|
||||
|
||||
let missingRequiredFields = false;
|
||||
|
||||
$('#matomo-analytics-settings .required').each((index, requiredField) => {
|
||||
const $requiredField = $(requiredField);
|
||||
|
||||
if (!$requiredField.val()) {
|
||||
$requiredField.addClass('is-invalid');
|
||||
missingRequiredFields = true;
|
||||
}
|
||||
});
|
||||
|
||||
if (missingRequiredFields) {
|
||||
throw new Error(lang('fields_are_required'));
|
||||
}
|
||||
|
||||
return false;
|
||||
} catch (error) {
|
||||
App.Layouts.Backend.displayNotification(error.message);
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
function deserialize(matomoAnalyticsSettings) {
|
||||
matomoAnalyticsSettings.forEach((matomoAnalyticsSetting) => {
|
||||
const $field = $('[data-field="' + matomoAnalyticsSetting.name + '"]');
|
||||
|
||||
$field.is(':checkbox')
|
||||
? $field.prop('checked', Boolean(Number(matomoAnalyticsSetting.value)))
|
||||
: $field.val(matomoAnalyticsSetting.value);
|
||||
});
|
||||
}
|
||||
|
||||
function serialize() {
|
||||
const matomoAnalyticsSettings = [];
|
||||
|
||||
$('[data-field]').each((index, field) => {
|
||||
const $field = $(field);
|
||||
|
||||
matomoAnalyticsSettings.push({
|
||||
name: $field.data('field'),
|
||||
value: $field.is(':checkbox') ? Number($field.prop('checked')) : $field.val(),
|
||||
});
|
||||
});
|
||||
|
||||
return matomoAnalyticsSettings;
|
||||
}
|
||||
|
||||
/**
|
||||
* Save the account information.
|
||||
*/
|
||||
function onSaveSettingsClick() {
|
||||
if (isInvalid()) {
|
||||
App.Layouts.Backend.displayNotification(lang('settings_are_invalid'));
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
const matomoAnalyticsSettings = serialize();
|
||||
|
||||
App.Http.MatomoAnalyticsSettings.save(matomoAnalyticsSettings).done(() => {
|
||||
App.Layouts.Backend.displayNotification(lang('settings_saved'));
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize the module.
|
||||
*/
|
||||
function initialize() {
|
||||
$saveSettings.on('click', onSaveSettingsClick);
|
||||
|
||||
const matomoAnalyticsSettings = vars('matomo_analytics_settings');
|
||||
|
||||
deserialize(matomoAnalyticsSettings);
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', initialize);
|
||||
|
||||
return {};
|
||||
})();
|
||||
608
assets/js/pages/providers.js
Normal file
608
assets/js/pages/providers.js
Normal file
@ -0,0 +1,608 @@
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Easy!Appointments - Online Appointment Scheduler
|
||||
*
|
||||
* @package EasyAppointments
|
||||
* @author A.Tselegidis <alextselegidis@gmail.com>
|
||||
* @copyright Copyright (c) Alex Tselegidis
|
||||
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
|
||||
* @link https://easyappointments.org
|
||||
* @since v1.5.0
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
/**
|
||||
* Providers page.
|
||||
*
|
||||
* This module implements the functionality of the providers page.
|
||||
*/
|
||||
App.Pages.Providers = (function () {
|
||||
const $providers = $('#providers');
|
||||
const $id = $('#id');
|
||||
const $firstName = $('#first-name');
|
||||
const $lastName = $('#last-name');
|
||||
const $email = $('#email');
|
||||
const $mobileNumber = $('#mobile-number');
|
||||
const $phoneNumber = $('#phone-number');
|
||||
const $address = $('#address');
|
||||
const $city = $('#city');
|
||||
const $state = $('#state');
|
||||
const $zipCode = $('#zip-code');
|
||||
const $isPrivate = $('#is-private');
|
||||
const $notes = $('#notes');
|
||||
const $language = $('#language');
|
||||
const $timezone = $('#timezone');
|
||||
const $ldapDn = $('#ldap-dn');
|
||||
const $username = $('#username');
|
||||
const $password = $('#password');
|
||||
const $passwordConfirmation = $('#password-confirm');
|
||||
const $notifications = $('#notifications');
|
||||
const $calendarView = $('#calendar-view');
|
||||
const $filterProviders = $('#filter-providers');
|
||||
let filterResults = {};
|
||||
let filterLimit = 20;
|
||||
let workingPlanManager;
|
||||
|
||||
/**
|
||||
* Add the page event listeners.
|
||||
*/
|
||||
function addEventListeners() {
|
||||
/**
|
||||
* Event: Filter Providers Form "Submit"
|
||||
*
|
||||
* Filter the provider records with the given key string.
|
||||
*
|
||||
* @param {jQuery.Event} event
|
||||
*/
|
||||
$providers.on('submit', '#filter-providers form', (event) => {
|
||||
event.preventDefault();
|
||||
const key = $('#filter-providers .key').val();
|
||||
$('.selected').removeClass('selected');
|
||||
App.Pages.Providers.resetForm();
|
||||
App.Pages.Providers.filter(key);
|
||||
});
|
||||
|
||||
/**
|
||||
* Event: Filter Provider Row "Click"
|
||||
*
|
||||
* Display the selected provider data to the user.
|
||||
*/
|
||||
$providers.on('click', '.provider-row', (event) => {
|
||||
if ($filterProviders.find('.filter').prop('disabled')) {
|
||||
$filterProviders.find('.results').css('color', '#AAA');
|
||||
return; // Exit because we are currently on edit mode.
|
||||
}
|
||||
|
||||
const providerId = $(event.currentTarget).attr('data-id');
|
||||
const provider = filterResults.find((filterResult) => Number(filterResult.id) === Number(providerId));
|
||||
|
||||
App.Pages.Providers.display(provider);
|
||||
$filterProviders.find('.selected').removeClass('selected');
|
||||
$(event.currentTarget).addClass('selected');
|
||||
$('#edit-provider, #delete-provider').prop('disabled', false);
|
||||
});
|
||||
|
||||
/**
|
||||
* Event: Add New Provider Button "Click"
|
||||
*/
|
||||
$providers.on('click', '#add-provider', () => {
|
||||
App.Pages.Providers.resetForm();
|
||||
$filterProviders.find('button').prop('disabled', true);
|
||||
$filterProviders.find('.results').css('color', '#AAA');
|
||||
$providers.find('.add-edit-delete-group').hide();
|
||||
$providers.find('.save-cancel-group').show();
|
||||
$providers.find('.record-details').find('input, select, textarea').prop('disabled', false);
|
||||
$providers.find('.record-details .form-label span').prop('hidden', false);
|
||||
$('#password, #password-confirm').addClass('required');
|
||||
$providers
|
||||
.find(
|
||||
'.add-break, .edit-break, .delete-break, .add-working-plan-exception, .edit-working-plan-exception, .delete-working-plan-exception, #reset-working-plan',
|
||||
)
|
||||
.prop('disabled', false);
|
||||
$('#provider-services input:checkbox').prop('disabled', false);
|
||||
|
||||
// Apply default working plan
|
||||
const companyWorkingPlan = JSON.parse(vars('company_working_plan'));
|
||||
workingPlanManager.setup(companyWorkingPlan);
|
||||
workingPlanManager.timepickers(false);
|
||||
});
|
||||
|
||||
/**
|
||||
* Event: Edit Provider Button "Click"
|
||||
*/
|
||||
$providers.on('click', '#edit-provider', () => {
|
||||
$providers.find('.add-edit-delete-group').hide();
|
||||
$providers.find('.save-cancel-group').show();
|
||||
$filterProviders.find('button').prop('disabled', true);
|
||||
$filterProviders.find('.results').css('color', '#AAA');
|
||||
$providers.find('.record-details').find('input, select, textarea').prop('disabled', false);
|
||||
$providers.find('.record-details .form-label span').prop('hidden', false);
|
||||
$('#password, #password-confirm').removeClass('required');
|
||||
$('#provider-services input:checkbox').prop('disabled', false);
|
||||
$providers
|
||||
.find(
|
||||
'.add-break, .edit-break, .delete-break, .add-working-plan-exception, .edit-working-plan-exception, .delete-working-plan-exception, #reset-working-plan',
|
||||
)
|
||||
.prop('disabled', false);
|
||||
$('#providers input:checkbox').prop('disabled', false);
|
||||
workingPlanManager.timepickers(false);
|
||||
});
|
||||
|
||||
/**
|
||||
* Event: Delete Provider Button "Click"
|
||||
*/
|
||||
$providers.on('click', '#delete-provider', () => {
|
||||
const providerId = $id.val();
|
||||
|
||||
const buttons = [
|
||||
{
|
||||
text: lang('cancel'),
|
||||
click: (event, messageModal) => {
|
||||
messageModal.hide();
|
||||
},
|
||||
},
|
||||
{
|
||||
text: lang('delete'),
|
||||
click: (event, messageModal) => {
|
||||
App.Pages.Providers.remove(providerId);
|
||||
messageModal.hide();
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
App.Utils.Message.show(lang('delete_provider'), lang('delete_record_prompt'), buttons);
|
||||
});
|
||||
|
||||
/**
|
||||
* Event: Save Provider Button "Click"
|
||||
*/
|
||||
$providers.on('click', '#save-provider', () => {
|
||||
const provider = {
|
||||
first_name: $firstName.val(),
|
||||
last_name: $lastName.val(),
|
||||
email: $email.val(),
|
||||
mobile_number: $mobileNumber.val(),
|
||||
phone_number: $phoneNumber.val(),
|
||||
address: $address.val(),
|
||||
city: $city.val(),
|
||||
state: $state.val(),
|
||||
zip_code: $zipCode.val(),
|
||||
is_private: Number($isPrivate.prop('checked')),
|
||||
notes: $notes.val(),
|
||||
language: $language.val(),
|
||||
timezone: $timezone.val(),
|
||||
ldap_dn: $ldapDn.val(),
|
||||
settings: {
|
||||
username: $username.val(),
|
||||
working_plan: JSON.stringify(workingPlanManager.get()),
|
||||
working_plan_exceptions: JSON.stringify(workingPlanManager.getWorkingPlanExceptions()),
|
||||
notifications: Number($notifications.prop('checked')),
|
||||
calendar_view: $calendarView.val(),
|
||||
},
|
||||
};
|
||||
|
||||
// Include provider services.
|
||||
provider.services = [];
|
||||
$('#provider-services input:checkbox').each((index, checkboxEl) => {
|
||||
if ($(checkboxEl).prop('checked')) {
|
||||
provider.services.push($(checkboxEl).attr('data-id'));
|
||||
}
|
||||
});
|
||||
|
||||
// Include password if changed.
|
||||
if ($password.val() !== '') {
|
||||
provider.settings.password = $password.val();
|
||||
}
|
||||
|
||||
// Include id if changed.
|
||||
if ($id.val() !== '') {
|
||||
provider.id = $id.val();
|
||||
}
|
||||
|
||||
if (!App.Pages.Providers.validate()) {
|
||||
return;
|
||||
}
|
||||
|
||||
App.Pages.Providers.save(provider);
|
||||
});
|
||||
|
||||
/**
|
||||
* Event: Cancel Provider Button "Click"
|
||||
*
|
||||
* Cancel add or edit of an provider record.
|
||||
*/
|
||||
$providers.on('click', '#cancel-provider', () => {
|
||||
const id = $('#filter-providers .selected').attr('data-id');
|
||||
App.Pages.Providers.resetForm();
|
||||
if (id) {
|
||||
App.Pages.Providers.select(id, true);
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Event: Reset Working Plan Button "Click".
|
||||
*/
|
||||
$providers.on('click', '#reset-working-plan', () => {
|
||||
$('.breaks tbody').empty();
|
||||
$('.working-plan-exceptions tbody').empty();
|
||||
$('.work-start, .work-end').val('');
|
||||
const companyWorkingPlan = JSON.parse(vars('company_working_plan'));
|
||||
workingPlanManager.setup(companyWorkingPlan);
|
||||
workingPlanManager.timepickers(false);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Save provider record to database.
|
||||
*
|
||||
* @param {Object} provider Contains the provider record data. If an 'id' value is provided
|
||||
* then the update operation is going to be executed.
|
||||
*/
|
||||
function save(provider) {
|
||||
App.Http.Providers.save(provider).then((response) => {
|
||||
App.Layouts.Backend.displayNotification(lang('provider_saved'));
|
||||
App.Pages.Providers.resetForm();
|
||||
$('#filter-providers .key').val('');
|
||||
App.Pages.Providers.filter('', response.id, true);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Delete a provider record from database.
|
||||
*
|
||||
* @param {Number} id Record id to be deleted.
|
||||
*/
|
||||
function remove(id) {
|
||||
App.Http.Providers.destroy(id).then(() => {
|
||||
App.Layouts.Backend.displayNotification(lang('provider_deleted'));
|
||||
App.Pages.Providers.resetForm();
|
||||
App.Pages.Providers.filter($('#filter-providers .key').val());
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Validates a provider record.
|
||||
*
|
||||
* @return {Boolean} Returns the validation result.
|
||||
*/
|
||||
function validate() {
|
||||
$providers.find('.is-invalid').removeClass('is-invalid');
|
||||
$providers.find('.form-message').removeClass('alert-danger').hide();
|
||||
|
||||
try {
|
||||
// Validate required fields.
|
||||
let missingRequired = false;
|
||||
|
||||
$providers.find('.required').each((index, requiredFieldEl) => {
|
||||
if (!$(requiredFieldEl).val()) {
|
||||
$(requiredFieldEl).addClass('is-invalid');
|
||||
missingRequired = true;
|
||||
}
|
||||
});
|
||||
|
||||
if (missingRequired) {
|
||||
throw new Error(lang('fields_are_required'));
|
||||
}
|
||||
|
||||
// Validate passwords.
|
||||
if ($password.val() !== $passwordConfirmation.val()) {
|
||||
$('#password, #password-confirm').addClass('is-invalid');
|
||||
throw new Error(lang('passwords_mismatch'));
|
||||
}
|
||||
|
||||
if ($password.val().length < vars('min_password_length') && $password.val() !== '') {
|
||||
$('#password, #password-confirm').addClass('is-invalid');
|
||||
throw new Error(lang('password_length_notice').replace('$number', vars('min_password_length')));
|
||||
}
|
||||
|
||||
// Validate user email.
|
||||
if (!App.Utils.Validation.email($email.val())) {
|
||||
$email.addClass('is-invalid');
|
||||
throw new Error(lang('invalid_email'));
|
||||
}
|
||||
|
||||
// Validate phone number.
|
||||
const phoneNumber = $phoneNumber.val();
|
||||
|
||||
if (phoneNumber && !App.Utils.Validation.phone(phoneNumber)) {
|
||||
$phoneNumber.addClass('is-invalid');
|
||||
throw new Error(lang('invalid_phone'));
|
||||
}
|
||||
|
||||
// Validate mobile number.
|
||||
const mobileNumber = $mobileNumber.val();
|
||||
|
||||
if (mobileNumber && !App.Utils.Validation.phone(mobileNumber)) {
|
||||
$mobileNumber.addClass('is-invalid');
|
||||
throw new Error(lang('invalid_phone'));
|
||||
}
|
||||
|
||||
// Check if username exists
|
||||
if ($username.attr('already-exists') === 'true') {
|
||||
$username.addClass('is-invalid');
|
||||
throw new Error(lang('username_already_exists'));
|
||||
}
|
||||
|
||||
return true;
|
||||
} catch (error) {
|
||||
$('#providers .form-message').addClass('alert-danger').text(error.message).show();
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Resets the provider tab form back to its initial state.
|
||||
*/
|
||||
function resetForm() {
|
||||
$filterProviders.find('.selected').removeClass('selected');
|
||||
$filterProviders.find('button').prop('disabled', false);
|
||||
$filterProviders.find('.results').css('color', '');
|
||||
|
||||
$providers.find('.add-edit-delete-group').show();
|
||||
$providers.find('.save-cancel-group').hide();
|
||||
$providers.find('.record-details h4 a').remove();
|
||||
$providers.find('.record-details').find('input, select, textarea').val('').prop('disabled', true);
|
||||
$providers.find('.record-details .form-label span').prop('hidden', true);
|
||||
$providers.find('.record-details #calendar-view').val('default');
|
||||
$providers.find('.record-details #language').val(vars('default_language'));
|
||||
$providers.find('.record-details #timezone').val(vars('default_timezone'));
|
||||
$providers.find('.record-details #is-private').prop('checked', false);
|
||||
$providers.find('.record-details #notifications').prop('checked', true);
|
||||
$providers.find('.add-break, .add-working-plan-exception, #reset-working-plan').prop('disabled', true);
|
||||
|
||||
workingPlanManager.timepickers(true);
|
||||
$providers.find('#providers .working-plan input:checkbox').prop('disabled', true);
|
||||
$('.breaks').find('.edit-break, .delete-break').prop('disabled', true);
|
||||
$('.working-plan-exceptions')
|
||||
.find('.edit-working-plan-exception, .delete-working-plan-exception')
|
||||
.prop('disabled', true);
|
||||
|
||||
$providers.find('.record-details .is-invalid').removeClass('is-invalid');
|
||||
$providers.find('.record-details .form-message').hide();
|
||||
|
||||
$('#edit-provider, #delete-provider').prop('disabled', true);
|
||||
$('#provider-services input:checkbox').prop('disabled', true).prop('checked', false);
|
||||
$('#provider-services a').remove();
|
||||
$('#providers .working-plan tbody').empty();
|
||||
$('#providers .breaks tbody').empty();
|
||||
$('#providers .working-plan-exceptions tbody').empty();
|
||||
}
|
||||
|
||||
/**
|
||||
* Display a provider record into the provider form.
|
||||
*
|
||||
* @param {Object} provider Contains the provider record data.
|
||||
*/
|
||||
function display(provider) {
|
||||
$id.val(provider.id);
|
||||
$firstName.val(provider.first_name);
|
||||
$lastName.val(provider.last_name);
|
||||
$email.val(provider.email);
|
||||
$mobileNumber.val(provider.mobile_number);
|
||||
$phoneNumber.val(provider.phone_number);
|
||||
$address.val(provider.address);
|
||||
$city.val(provider.city);
|
||||
$state.val(provider.state);
|
||||
$zipCode.val(provider.zip_code);
|
||||
$isPrivate.prop('checked', provider.is_private);
|
||||
$notes.val(provider.notes);
|
||||
$language.val(provider.language);
|
||||
$timezone.val(provider.timezone);
|
||||
$ldapDn.val(provider.ldap_dn);
|
||||
|
||||
$username.val(provider.settings.username);
|
||||
$calendarView.val(provider.settings.calendar_view);
|
||||
$notifications.prop('checked', Boolean(Number(provider.settings.notifications)));
|
||||
|
||||
// Add dedicated provider link.
|
||||
let dedicatedUrl = App.Utils.Url.siteUrl('?provider=' + encodeURIComponent(provider.id));
|
||||
let $link = $('<a/>', {
|
||||
'href': dedicatedUrl,
|
||||
'target': '_blank',
|
||||
'html': [
|
||||
$('<i/>', {
|
||||
'class': 'fas fa-link me-2',
|
||||
}),
|
||||
|
||||
$('<span/>', {
|
||||
'text': lang('booking_link'),
|
||||
}),
|
||||
],
|
||||
});
|
||||
|
||||
$providers.find('.details-view h4').find('a').remove().end().append($link);
|
||||
|
||||
$('#provider-services a').remove();
|
||||
$('#provider-services input:checkbox').prop('checked', false);
|
||||
|
||||
provider.services.forEach((providerServiceId) => {
|
||||
const $checkbox = $('#provider-services input[data-id="' + providerServiceId + '"]');
|
||||
|
||||
if (!$checkbox.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
$checkbox.prop('checked', true);
|
||||
|
||||
// Add dedicated service-provider link.
|
||||
dedicatedUrl = App.Utils.Url.siteUrl(
|
||||
'?provider=' + encodeURIComponent(provider.id) + '&service=' + encodeURIComponent(providerServiceId),
|
||||
);
|
||||
|
||||
$link = $('<a/>', {
|
||||
'href': dedicatedUrl,
|
||||
'target': '_blank',
|
||||
'html': [
|
||||
$('<i/>', {
|
||||
'class': 'fas fa-link me-2',
|
||||
}),
|
||||
|
||||
$('<span/>', {
|
||||
'text': lang('booking_link'),
|
||||
}),
|
||||
],
|
||||
});
|
||||
|
||||
$checkbox.parent().append($link);
|
||||
});
|
||||
|
||||
// Display working plan
|
||||
const workingPlan = JSON.parse(provider.settings.working_plan);
|
||||
workingPlanManager.setup(workingPlan);
|
||||
$('.working-plan').find('input').prop('disabled', true);
|
||||
$('.breaks').find('.edit-break, .delete-break').prop('disabled', true);
|
||||
$providers.find('.working-plan-exceptions tbody').empty();
|
||||
const workingPlanExceptions = JSON.parse(provider.settings.working_plan_exceptions);
|
||||
workingPlanManager.setupWorkingPlanExceptions(workingPlanExceptions);
|
||||
$('.working-plan-exceptions')
|
||||
.find('.edit-working-plan-exception, .delete-working-plan-exception')
|
||||
.prop('disabled', true);
|
||||
$providers.find('.working-plan input:checkbox').prop('disabled', true);
|
||||
}
|
||||
|
||||
/**
|
||||
* Filters provider records depending a string keyword.
|
||||
*
|
||||
* @param {string} keyword This is used to filter the provider records of the database.
|
||||
* @param {numeric} selectId Optional, if set, when the function is complete a result row can be set as selected.
|
||||
* @param {bool} show Optional (false), if true the selected record will be also displayed.
|
||||
*/
|
||||
function filter(keyword, selectId = null, show = false) {
|
||||
App.Http.Providers.search(keyword, filterLimit).then((response) => {
|
||||
filterResults = response;
|
||||
|
||||
$filterProviders.find('.results').empty();
|
||||
response.forEach((provider) => {
|
||||
$('#filter-providers .results').append(App.Pages.Providers.getFilterHtml(provider)).append($('<hr/>'));
|
||||
});
|
||||
|
||||
if (!response.length) {
|
||||
$filterProviders.find('.results').append(
|
||||
$('<em/>', {
|
||||
'text': lang('no_records_found'),
|
||||
}),
|
||||
);
|
||||
} else if (response.length === filterLimit) {
|
||||
$('<button/>', {
|
||||
'type': 'button',
|
||||
'class': 'btn btn-outline-secondary w-100 load-more text-center',
|
||||
'text': lang('load_more'),
|
||||
'click': () => {
|
||||
filterLimit += 20;
|
||||
App.Pages.Providers.filter(keyword, selectId, show);
|
||||
},
|
||||
}).appendTo('#filter-providers .results');
|
||||
}
|
||||
|
||||
if (selectId) {
|
||||
App.Pages.Providers.select(selectId, show);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Get an provider row html code that is going to be displayed on the filter results list.
|
||||
*
|
||||
* @param {Object} provider Contains the provider record data.
|
||||
*
|
||||
* @return {String} The html code that represents the record on the filter results list.
|
||||
*/
|
||||
function getFilterHtml(provider) {
|
||||
const name = provider.first_name + ' ' + provider.last_name;
|
||||
|
||||
let info = provider.email;
|
||||
|
||||
info = provider.mobile_number ? info + ', ' + provider.mobile_number : info;
|
||||
|
||||
info = provider.phone_number ? info + ', ' + provider.phone_number : info;
|
||||
|
||||
return $('<div/>', {
|
||||
'class': 'provider-row entry',
|
||||
'data-id': provider.id,
|
||||
'html': [
|
||||
$('<strong/>', {
|
||||
'text': name,
|
||||
}),
|
||||
$('<br/>'),
|
||||
$('<small/>', {
|
||||
'class': 'text-muted',
|
||||
'text': info,
|
||||
}),
|
||||
$('<br/>'),
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Select and display a providers filter result on the form.
|
||||
*
|
||||
* @param {Number} id Record id to be selected.
|
||||
* @param {Boolean} show Optional (false), if true the record will be displayed on the form.
|
||||
*/
|
||||
function select(id, show = false) {
|
||||
// Select record in filter results.
|
||||
$filterProviders.find('.provider-row[data-id="' + id + '"]').addClass('selected');
|
||||
|
||||
// Display record in form (if display = true).
|
||||
if (show) {
|
||||
const provider = filterResults.find((filterResult) => Number(filterResult.id) === Number(id));
|
||||
|
||||
App.Pages.Providers.display(provider);
|
||||
|
||||
$('#edit-provider, #delete-provider').prop('disabled', false);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize the module.
|
||||
*/
|
||||
function initialize() {
|
||||
workingPlanManager = new App.Utils.WorkingPlan();
|
||||
workingPlanManager.addEventListeners();
|
||||
|
||||
App.Pages.Providers.resetForm();
|
||||
App.Pages.Providers.filter('');
|
||||
App.Pages.Providers.addEventListeners();
|
||||
|
||||
vars('services').forEach((service) => {
|
||||
const checkboxId = `provider-service-${service.id}`;
|
||||
|
||||
$('<div/>', {
|
||||
'class': 'checkbox',
|
||||
'html': [
|
||||
$('<div/>', {
|
||||
'class': 'checkbox form-check',
|
||||
'html': [
|
||||
$('<input/>', {
|
||||
'id': checkboxId,
|
||||
'class': 'form-check-input',
|
||||
'type': 'checkbox',
|
||||
'data-id': service.id,
|
||||
'prop': {
|
||||
'disabled': true,
|
||||
},
|
||||
}),
|
||||
$('<label/>', {
|
||||
'class': 'form-check-label',
|
||||
'text': service.name,
|
||||
'for': checkboxId,
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}).appendTo('#provider-services');
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', initialize);
|
||||
|
||||
return {
|
||||
filter,
|
||||
save,
|
||||
remove,
|
||||
validate,
|
||||
getFilterHtml,
|
||||
resetForm,
|
||||
display,
|
||||
select,
|
||||
addEventListeners,
|
||||
};
|
||||
})();
|
||||
64
assets/js/pages/recovery.js
Normal file
64
assets/js/pages/recovery.js
Normal file
@ -0,0 +1,64 @@
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Easy!Appointments - Online Appointment Scheduler
|
||||
*
|
||||
* @package EasyAppointments
|
||||
* @author A.Tselegidis <alextselegidis@gmail.com>
|
||||
* @copyright Copyright (c) Alex Tselegidis
|
||||
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
|
||||
* @link https://easyappointments.org
|
||||
* @since v1.5.0
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
/**
|
||||
* Recovery page.
|
||||
*
|
||||
* This module implements the functionality of the recovery page.
|
||||
*/
|
||||
App.Pages.Recovery = (function () {
|
||||
const $form = $('form');
|
||||
const $username = $('#username');
|
||||
const $email = $('#email');
|
||||
const $getNewPassword = $('#get-new-password');
|
||||
|
||||
/**
|
||||
* Event: Login Button "Click"
|
||||
*
|
||||
* Make an HTTP request to the server and check whether the user's credentials are right. If yes then redirect the
|
||||
* user to the destination page, otherwise display an error message.
|
||||
*/
|
||||
function onFormSubmit(event) {
|
||||
event.preventDefault();
|
||||
|
||||
const $alert = $('.alert');
|
||||
|
||||
$alert.addClass('d-none');
|
||||
|
||||
$getNewPassword.prop('disabled', true);
|
||||
|
||||
const username = $username.val();
|
||||
const email = $email.val();
|
||||
|
||||
App.Http.Recovery.perform(username, email)
|
||||
.done((response) => {
|
||||
$alert.removeClass('d-none alert-danger alert-success');
|
||||
|
||||
if (response.success) {
|
||||
$alert.addClass('alert-success');
|
||||
$alert.text(lang('new_password_sent_with_email'));
|
||||
} else {
|
||||
$alert.addClass('alert-danger');
|
||||
$alert.text(
|
||||
'The operation failed! Please enter a valid username ' +
|
||||
'and email address in order to get a new password.',
|
||||
);
|
||||
}
|
||||
})
|
||||
.always(() => {
|
||||
$getNewPassword.prop('disabled', false);
|
||||
});
|
||||
}
|
||||
|
||||
$form.on('submit', onFormSubmit);
|
||||
|
||||
return {};
|
||||
})();
|
||||
548
assets/js/pages/secretaries.js
Normal file
548
assets/js/pages/secretaries.js
Normal file
@ -0,0 +1,548 @@
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Easy!Appointments - Online Appointment Scheduler
|
||||
*
|
||||
* @package EasyAppointments
|
||||
* @author A.Tselegidis <alextselegidis@gmail.com>
|
||||
* @copyright Copyright (c) Alex Tselegidis
|
||||
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
|
||||
* @link https://easyappointments.org
|
||||
* @since v1.5.0
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
/**
|
||||
* Secretaries page.
|
||||
*
|
||||
* This module implements the functionality of the secretaries page.
|
||||
*/
|
||||
App.Pages.Secretaries = (function () {
|
||||
const $secretaries = $('#secretaries');
|
||||
const $id = $('#id');
|
||||
const $firstName = $('#first-name');
|
||||
const $lastName = $('#last-name');
|
||||
const $email = $('#email');
|
||||
const $mobileNumber = $('#mobile-number');
|
||||
const $phoneNumber = $('#phone-number');
|
||||
const $address = $('#address');
|
||||
const $city = $('#city');
|
||||
const $state = $('#state');
|
||||
const $zipCode = $('#zip-code');
|
||||
const $notes = $('#notes');
|
||||
const $language = $('#language');
|
||||
const $timezone = $('#timezone');
|
||||
const $ldapDn = $('#ldap-dn');
|
||||
const $username = $('#username');
|
||||
const $password = $('#password');
|
||||
const $passwordConfirmation = $('#password-confirm');
|
||||
const $notifications = $('#notifications');
|
||||
const $calendarView = $('#calendar-view');
|
||||
const $filterSecretaries = $('#filter-secretaries');
|
||||
let filterResults = {};
|
||||
let filterLimit = 20;
|
||||
|
||||
/**
|
||||
* Add the page event listeners.
|
||||
*/
|
||||
function addEventListeners() {
|
||||
/**
|
||||
* Event: Admin Username "Blur"
|
||||
*
|
||||
* When the admin leaves the username input field we will need to check if the username
|
||||
* is not taken by another record in the system.
|
||||
*
|
||||
* @param {jQuery.Event} event
|
||||
*/
|
||||
$secretaries.on('blur', '#username', (event) => {
|
||||
const $input = $(event.target);
|
||||
|
||||
if ($input.prop('readonly') === true || $input.val() === '') {
|
||||
return;
|
||||
}
|
||||
|
||||
const secretaryId = $input.parents().eq(2).find('.record-id').val();
|
||||
|
||||
if (!secretaryId) {
|
||||
return;
|
||||
}
|
||||
|
||||
const username = $input.val();
|
||||
|
||||
App.Http.Account.validateUsername(secretaryId, username).done((response) => {
|
||||
if (response.is_valid === 'false') {
|
||||
$input.addClass('is-invalid');
|
||||
$input.attr('already-exists', 'true');
|
||||
$input.parents().eq(3).find('.form-message').text(lang('username_already_exists'));
|
||||
$input.parents().eq(3).find('.form-message').show();
|
||||
} else {
|
||||
$input.removeClass('is-invalid');
|
||||
$input.attr('already-exists', 'false');
|
||||
if ($input.parents().eq(3).find('.form-message').text() === lang('username_already_exists')) {
|
||||
$input.parents().eq(3).find('.form-message').hide();
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* Event: Filter Secretaries Form "Submit"
|
||||
*
|
||||
* Filter the secretary records with the given key string.
|
||||
*
|
||||
* @param {jQuery.Event} event
|
||||
*/
|
||||
$secretaries.on('submit', '#filter-secretaries form', (event) => {
|
||||
event.preventDefault();
|
||||
const key = $('#filter-secretaries .key').val();
|
||||
$filterSecretaries.find('.selected').removeClass('selected');
|
||||
App.Pages.Secretaries.resetForm();
|
||||
App.Pages.Secretaries.filter(key);
|
||||
});
|
||||
|
||||
/**
|
||||
* Event: Filter Secretary Row "Click"
|
||||
*
|
||||
* Display the selected secretary data to the user.
|
||||
*/
|
||||
$secretaries.on('click', '.secretary-row', (event) => {
|
||||
if ($('#filter-secretaries .filter').prop('disabled')) {
|
||||
$('#filter-secretaries .results').css('color', '#AAA');
|
||||
return; // exit because we are currently on edit mode
|
||||
}
|
||||
|
||||
const secretaryId = $(event.currentTarget).attr('data-id');
|
||||
|
||||
const secretary = filterResults.find((filterResult) => Number(filterResult.id) === Number(secretaryId));
|
||||
|
||||
App.Pages.Secretaries.display(secretary);
|
||||
|
||||
$('#filter-secretaries .selected').removeClass('selected');
|
||||
$(event.currentTarget).addClass('selected');
|
||||
$('#edit-secretary, #delete-secretary').prop('disabled', false);
|
||||
});
|
||||
|
||||
/**
|
||||
* Event: Add New Secretary Button "Click"
|
||||
*/
|
||||
$secretaries.on('click', '#add-secretary', () => {
|
||||
App.Pages.Secretaries.resetForm();
|
||||
$filterSecretaries.find('button').prop('disabled', true);
|
||||
$filterSecretaries.find('.results').css('color', '#AAA');
|
||||
|
||||
$secretaries.find('.add-edit-delete-group').hide();
|
||||
$secretaries.find('.save-cancel-group').show();
|
||||
$secretaries.find('.record-details').find('input, select, textarea').prop('disabled', false);
|
||||
$secretaries.find('.record-details .form-label span').prop('hidden', false);
|
||||
$('#password, #password-confirm').addClass('required');
|
||||
$('#secretary-providers input:checkbox').prop('disabled', false);
|
||||
});
|
||||
|
||||
/**
|
||||
* Event: Edit Secretary Button "Click"
|
||||
*/
|
||||
$secretaries.on('click', '#edit-secretary', () => {
|
||||
$filterSecretaries.find('button').prop('disabled', true);
|
||||
$filterSecretaries.find('.results').css('color', '#AAA');
|
||||
$secretaries.find('.add-edit-delete-group').hide();
|
||||
$secretaries.find('.save-cancel-group').show();
|
||||
$secretaries.find('.record-details').find('input, select, textarea').prop('disabled', false);
|
||||
$secretaries.find('.record-details .form-label span').prop('hidden', false);
|
||||
$('#password, #password-confirm').removeClass('required');
|
||||
$('#secretary-providers input:checkbox').prop('disabled', false);
|
||||
});
|
||||
|
||||
/**
|
||||
* Event: Delete Secretary Button "Click"
|
||||
*/
|
||||
$secretaries.on('click', '#delete-secretary', () => {
|
||||
const secretaryId = $id.val();
|
||||
|
||||
const buttons = [
|
||||
{
|
||||
text: lang('cancel'),
|
||||
click: (event, messageModal) => {
|
||||
messageModal.hide();
|
||||
},
|
||||
},
|
||||
{
|
||||
text: lang('delete'),
|
||||
click: (event, messageModal) => {
|
||||
remove(secretaryId);
|
||||
messageModal.hide();
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
App.Utils.Message.show(lang('delete_secretary'), lang('delete_record_prompt'), buttons);
|
||||
});
|
||||
|
||||
/**
|
||||
* Event: Save Secretary Button "Click"
|
||||
*/
|
||||
$secretaries.on('click', '#save-secretary', () => {
|
||||
const secretary = {
|
||||
first_name: $firstName.val(),
|
||||
last_name: $lastName.val(),
|
||||
email: $email.val(),
|
||||
mobile_number: $mobileNumber.val(),
|
||||
phone_number: $phoneNumber.val(),
|
||||
address: $address.val(),
|
||||
city: $city.val(),
|
||||
state: $state.val(),
|
||||
zip_code: $zipCode.val(),
|
||||
notes: $notes.val(),
|
||||
language: $language.val(),
|
||||
timezone: $timezone.val(),
|
||||
ldap_dn: $ldapDn.val(),
|
||||
settings: {
|
||||
username: $username.val(),
|
||||
notifications: Number($notifications.prop('checked')),
|
||||
calendar_view: $calendarView.val(),
|
||||
},
|
||||
};
|
||||
|
||||
// Include secretary services.
|
||||
secretary.providers = [];
|
||||
|
||||
$('#secretary-providers input:checkbox').each((index, checkbox) => {
|
||||
if ($(checkbox).prop('checked')) {
|
||||
secretary.providers.push($(checkbox).attr('data-id'));
|
||||
}
|
||||
});
|
||||
|
||||
// Include password if changed.
|
||||
if ($password.val() !== '') {
|
||||
secretary.settings.password = $password.val();
|
||||
}
|
||||
|
||||
// Include ID if changed.
|
||||
if ($id.val() !== '') {
|
||||
secretary.id = $id.val();
|
||||
}
|
||||
|
||||
if (!App.Pages.Secretaries.validate()) {
|
||||
return;
|
||||
}
|
||||
|
||||
App.Pages.Secretaries.save(secretary);
|
||||
});
|
||||
|
||||
/**
|
||||
* Event: Cancel Secretary Button "Click"
|
||||
*
|
||||
* Cancel add or edit of an secretary record.
|
||||
*/
|
||||
$secretaries.on('click', '#cancel-secretary', () => {
|
||||
const id = $id.val();
|
||||
resetForm();
|
||||
if (id) {
|
||||
select(id, true);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Save secretary record to database.
|
||||
*
|
||||
* @param {Object} secretary Contains the secretary record data. If an 'id' value is provided
|
||||
* then the update operation is going to be executed.
|
||||
*/
|
||||
function save(secretary) {
|
||||
App.Http.Secretaries.save(secretary).done((response) => {
|
||||
App.Layouts.Backend.displayNotification(lang('secretary_saved'));
|
||||
App.Pages.Secretaries.resetForm();
|
||||
$('#filter-secretaries .key').val('');
|
||||
App.Pages.Secretaries.filter('', response.id, true);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Delete a secretary record from database.
|
||||
*
|
||||
* @param {Number} id Record id to be deleted.
|
||||
*/
|
||||
function remove(id) {
|
||||
App.Http.Secretaries.destroy(id).done(() => {
|
||||
App.Layouts.Backend.displayNotification(lang('secretary_deleted'));
|
||||
App.Pages.Secretaries.resetForm();
|
||||
App.Pages.Secretaries.filter($('#filter-secretaries .key').val());
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Validates a secretary record.
|
||||
*
|
||||
* @return {Boolean} Returns the validation result.
|
||||
*/
|
||||
function validate() {
|
||||
$('#secretaries .is-invalid').removeClass('is-invalid');
|
||||
$secretaries.find('.form-message').removeClass('alert-danger');
|
||||
|
||||
try {
|
||||
// Validate required fields.
|
||||
let missingRequired = false;
|
||||
|
||||
$secretaries.find('.required').each((index, requiredField) => {
|
||||
if (!$(requiredField).val()) {
|
||||
$(requiredField).addClass('is-invalid');
|
||||
missingRequired = true;
|
||||
}
|
||||
});
|
||||
if (missingRequired) {
|
||||
throw new Error(lang('fields_are_required'));
|
||||
}
|
||||
|
||||
// Validate passwords.
|
||||
if ($password.val() !== $passwordConfirmation.val()) {
|
||||
$('#password, #password-confirm').addClass('is-invalid');
|
||||
throw new Error(lang('passwords_mismatch'));
|
||||
}
|
||||
|
||||
if ($password.val().length < vars('min_password_length') && $password.val() !== '') {
|
||||
$('#password, #password-confirm').addClass('is-invalid');
|
||||
throw new Error(lang('password_length_notice').replace('$number', vars('min_password_length')));
|
||||
}
|
||||
|
||||
// Validate user email.
|
||||
if (!App.Utils.Validation.email($email.val())) {
|
||||
$email.addClass('is-invalid');
|
||||
throw new Error(lang('invalid_email'));
|
||||
}
|
||||
|
||||
// Validate phone number.
|
||||
const phoneNumber = $phoneNumber.val();
|
||||
|
||||
if (phoneNumber && !App.Utils.Validation.phone(phoneNumber)) {
|
||||
$phoneNumber.addClass('is-invalid');
|
||||
throw new Error(lang('invalid_phone'));
|
||||
}
|
||||
|
||||
// Validate mobile number.
|
||||
const mobileNumber = $mobileNumber.val();
|
||||
|
||||
if (mobileNumber && !App.Utils.Validation.phone(mobileNumber)) {
|
||||
$mobileNumber.addClass('is-invalid');
|
||||
throw new Error(lang('invalid_phone'));
|
||||
}
|
||||
|
||||
// Check if username exists
|
||||
if ($username.attr('already-exists') === 'true') {
|
||||
$username.addClass('is-invalid');
|
||||
throw new Error(lang('username_already_exists'));
|
||||
}
|
||||
|
||||
return true;
|
||||
} catch (error) {
|
||||
$('#secretaries .form-message').addClass('alert-danger').text(error.message).show();
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Resets the secretary tab form back to its initial state.
|
||||
*/
|
||||
function resetForm() {
|
||||
$filterSecretaries.find('.selected').removeClass('selected');
|
||||
$filterSecretaries.find('button').prop('disabled', false);
|
||||
$filterSecretaries.find('.results').css('color', '');
|
||||
$secretaries.find('.record-details').find('input, select, textarea').val('').prop('disabled', true);
|
||||
$secretaries.find('.record-details .form-label span').prop('hidden', true);
|
||||
$secretaries.find('.record-details #calendar-view').val('default');
|
||||
$secretaries.find('.record-details #timezone').val(vars('default_timezone'));
|
||||
$secretaries.find('.record-details #language').val(vars('default_language'));
|
||||
$secretaries.find('.record-details #notifications').prop('checked', true);
|
||||
$secretaries.find('.add-edit-delete-group').show();
|
||||
$secretaries.find('.save-cancel-group').hide();
|
||||
$secretaries.find('.form-message').hide();
|
||||
$secretaries.find('.is-invalid').removeClass('is-invalid');
|
||||
$('#edit-secretary, #delete-secretary').prop('disabled', true);
|
||||
$('#secretary-providers input:checkbox').prop('disabled', true).prop('checked', false);
|
||||
}
|
||||
|
||||
/**
|
||||
* Display a secretary record into the secretary form.
|
||||
*
|
||||
* @param {Object} secretary Contains the secretary record data.
|
||||
*/
|
||||
function display(secretary) {
|
||||
$id.val(secretary.id);
|
||||
$firstName.val(secretary.first_name);
|
||||
$lastName.val(secretary.last_name);
|
||||
$email.val(secretary.email);
|
||||
$mobileNumber.val(secretary.mobile_number);
|
||||
$phoneNumber.val(secretary.phone_number);
|
||||
$address.val(secretary.address);
|
||||
$city.val(secretary.city);
|
||||
$state.val(secretary.state);
|
||||
$zipCode.val(secretary.zip_code);
|
||||
$notes.val(secretary.notes);
|
||||
$language.val(secretary.language);
|
||||
$timezone.val(secretary.timezone);
|
||||
$ldapDn.val(secretary.ldap_dn);
|
||||
|
||||
$username.val(secretary.settings.username);
|
||||
$calendarView.val(secretary.settings.calendar_view);
|
||||
$notifications.prop('checked', Boolean(Number(secretary.settings.notifications)));
|
||||
|
||||
$('#secretary-providers input:checkbox').prop('checked', false);
|
||||
|
||||
secretary.providers.forEach((secretaryProviderId) => {
|
||||
const $checkbox = $('#secretary-providers input[data-id="' + secretaryProviderId + '"]');
|
||||
|
||||
if (!$checkbox.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
$checkbox.prop('checked', true);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Filters secretary records based on a string keyword.
|
||||
*
|
||||
* @param {String} keyword This is used to filter the secretary records of the database.
|
||||
* @param {Number} selectId Optional, if provided the given ID will be selected in the filter results
|
||||
* (only selected, not displayed).
|
||||
* @param {Boolean} show Optional (false).
|
||||
*/
|
||||
function filter(keyword, selectId = null, show = false) {
|
||||
App.Http.Secretaries.search(keyword, filterLimit).done((response) => {
|
||||
filterResults = response;
|
||||
|
||||
$filterSecretaries.find('.results').empty();
|
||||
|
||||
response.forEach((secretary) => {
|
||||
$filterSecretaries
|
||||
.find('.results')
|
||||
.append(App.Pages.Secretaries.getFilterHtml(secretary))
|
||||
.append($('<hr/>'));
|
||||
});
|
||||
|
||||
if (!response.length) {
|
||||
$('#filter-secretaries .results').append(
|
||||
$('<em/>', {
|
||||
'text': lang('no_records_found'),
|
||||
}),
|
||||
);
|
||||
} else if (response.length === filterLimit) {
|
||||
$('<button/>', {
|
||||
'type': 'button',
|
||||
'class': 'btn btn-outline-secondary w-100 load-more text-center',
|
||||
'text': lang('load_more'),
|
||||
'click': () => {
|
||||
filterLimit += 20;
|
||||
App.Pages.Customers.filter(keyword, selectId, show);
|
||||
},
|
||||
}).appendTo('#filter-secretaries .results');
|
||||
}
|
||||
|
||||
if (selectId) {
|
||||
select(selectId, show);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Get an secretary row html code that is going to be displayed on the filter results list.
|
||||
*
|
||||
* @param {Object} secretary Contains the secretary record data.
|
||||
*
|
||||
* @return {String} The html code that represents the record on the filter results list.
|
||||
*/
|
||||
function getFilterHtml(secretary) {
|
||||
const name = secretary.first_name + ' ' + secretary.last_name;
|
||||
|
||||
let info = secretary.email;
|
||||
|
||||
info = secretary.mobile_number ? info + ', ' + secretary.mobile_number : info;
|
||||
|
||||
info = secretary.phone_number ? info + ', ' + secretary.phone_number : info;
|
||||
|
||||
return $('<div/>', {
|
||||
'class': 'secretary-row entry',
|
||||
'data-id': secretary.id,
|
||||
'html': [
|
||||
$('<strong/>', {
|
||||
'text': name,
|
||||
}),
|
||||
$('<br/>'),
|
||||
$('<small/>', {
|
||||
'class': 'text-muted',
|
||||
'text': info,
|
||||
}),
|
||||
$('<br/>'),
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Select a specific record from the current filter results. If the secretary id does not exist
|
||||
* in the list then no record will be selected.
|
||||
*
|
||||
* @param {Number} id The record id to be selected from the filter results.
|
||||
* @param {Boolean} show Optional (false), if true the method will display the record in the form.
|
||||
*/
|
||||
function select(id, show = false) {
|
||||
$filterSecretaries.find('.selected').removeClass('selected');
|
||||
|
||||
$('#filter-secretaries .secretary-row[data-id="' + id + '"]').addClass('selected');
|
||||
|
||||
if (show) {
|
||||
const secretary = filterResults.find((filterResult) => Number(filterResult.id) === Number(id));
|
||||
|
||||
App.Pages.Secretaries.display(secretary);
|
||||
|
||||
$('#edit-secretary, #delete-secretary').prop('disabled', false);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize the module.
|
||||
*/
|
||||
function initialize() {
|
||||
App.Pages.Secretaries.resetForm();
|
||||
App.Pages.Secretaries.filter('');
|
||||
App.Pages.Secretaries.addEventListeners();
|
||||
|
||||
vars('providers').forEach((provider) => {
|
||||
const checkboxId = `provider-service-${provider.id}`;
|
||||
|
||||
$('<div/>', {
|
||||
'class': 'checkbox',
|
||||
'html': [
|
||||
$('<div/>', {
|
||||
'class': 'checkbox form-check',
|
||||
'html': [
|
||||
$('<input/>', {
|
||||
'id': checkboxId,
|
||||
'class': 'form-check-input',
|
||||
'type': 'checkbox',
|
||||
'data-id': provider.id,
|
||||
'prop': {
|
||||
'disabled': true,
|
||||
},
|
||||
}),
|
||||
$('<label/>', {
|
||||
'class': 'form-check-label',
|
||||
'text': provider.first_name + ' ' + provider.last_name,
|
||||
'for': checkboxId,
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}).appendTo('#secretary-providers');
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', initialize);
|
||||
|
||||
return {
|
||||
filter,
|
||||
save,
|
||||
remove,
|
||||
validate,
|
||||
getFilterHtml,
|
||||
resetForm,
|
||||
display,
|
||||
select,
|
||||
addEventListeners,
|
||||
};
|
||||
})();
|
||||
344
assets/js/pages/service_categories.js
Normal file
344
assets/js/pages/service_categories.js
Normal file
@ -0,0 +1,344 @@
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Easy!Appointments - Online Appointment Scheduler
|
||||
*
|
||||
* @package EasyAppointments
|
||||
* @author A.Tselegidis <alextselegidis@gmail.com>
|
||||
* @copyright Copyright (c) Alex Tselegidis
|
||||
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
|
||||
* @link https://easyappointments.org
|
||||
* @since v1.5.0
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
/**
|
||||
* Service-categories page.
|
||||
*
|
||||
* This module implements the functionality of the service-categories page.
|
||||
*/
|
||||
App.Pages.ServiceCategories = (function () {
|
||||
const $serviceCategories = $('#service-categories');
|
||||
const $filterServiceCategories = $('#filter-service-categories');
|
||||
const $id = $('#id');
|
||||
const $name = $('#name');
|
||||
const $description = $('#description');
|
||||
let filterResults = {};
|
||||
let filterLimit = 20;
|
||||
|
||||
/**
|
||||
* Add the page event listeners.
|
||||
*/
|
||||
function addEventListeners() {
|
||||
/**
|
||||
* Event: Filter Service-Categories Form "Submit"
|
||||
*
|
||||
* @param {jQuery.Event} event
|
||||
*/
|
||||
$serviceCategories.on('submit', '#filter-service-categories form', (event) => {
|
||||
event.preventDefault();
|
||||
const key = $('#filter-service-categories .key').val();
|
||||
$('.selected').removeClass('selected');
|
||||
App.Pages.ServiceCategories.resetForm();
|
||||
App.Pages.ServiceCategories.filter(key);
|
||||
});
|
||||
|
||||
/**
|
||||
* Event: Filter Service-Categories Row "Click"
|
||||
*
|
||||
* Displays the selected row data on the right side of the page.
|
||||
*
|
||||
* @param {jQuery.Event} event
|
||||
*/
|
||||
$serviceCategories.on('click', '.service-category-row', (event) => {
|
||||
if ($('#filter-service-categories .filter').prop('disabled')) {
|
||||
$('#filter-service-categories .results').css('color', '#AAA');
|
||||
return; // exit because we are on edit mode
|
||||
}
|
||||
|
||||
const serviceCategoryId = $(event.currentTarget).attr('data-id');
|
||||
|
||||
const serviceCategory = filterResults.find(
|
||||
(filterResult) => Number(filterResult.id) === Number(serviceCategoryId),
|
||||
);
|
||||
|
||||
App.Pages.ServiceCategories.display(serviceCategory);
|
||||
$('#filter-service-categories .selected').removeClass('selected');
|
||||
$(event.currentTarget).addClass('selected');
|
||||
$('#edit-service-category, #delete-service-category').prop('disabled', false);
|
||||
});
|
||||
|
||||
/**
|
||||
* Event: Add Service-Category Button "Click"
|
||||
*/
|
||||
$serviceCategories.on('click', '#add-service-category', () => {
|
||||
App.Pages.ServiceCategories.resetForm();
|
||||
$serviceCategories.find('.add-edit-delete-group').hide();
|
||||
$serviceCategories.find('.save-cancel-group').show();
|
||||
$serviceCategories.find('.record-details').find('input, select, textarea').prop('disabled', false);
|
||||
$serviceCategories.find('.record-details .form-label span').prop('hidden', false);
|
||||
$filterServiceCategories.find('button').prop('disabled', true);
|
||||
$filterServiceCategories.find('.results').css('color', '#AAA');
|
||||
});
|
||||
|
||||
/**
|
||||
* Event: Edit Service-Category Button "Click"
|
||||
*/
|
||||
$serviceCategories.on('click', '#edit-service-category', () => {
|
||||
$serviceCategories.find('.add-edit-delete-group').hide();
|
||||
$serviceCategories.find('.save-cancel-group').show();
|
||||
$serviceCategories.find('.record-details').find('input, select, textarea').prop('disabled', false);
|
||||
$serviceCategories.find('.record-details .form-label span').prop('hidden', false);
|
||||
$filterServiceCategories.find('button').prop('disabled', true);
|
||||
$filterServiceCategories.find('.results').css('color', '#AAA');
|
||||
});
|
||||
|
||||
/**
|
||||
* Event: Delete Service-Category Button "Click"
|
||||
*/
|
||||
$serviceCategories.on('click', '#delete-service-category', () => {
|
||||
const serviceCategoryId = $id.val();
|
||||
|
||||
const buttons = [
|
||||
{
|
||||
text: lang('cancel'),
|
||||
click: (event, messageModal) => {
|
||||
messageModal.hide();
|
||||
},
|
||||
},
|
||||
{
|
||||
text: lang('delete'),
|
||||
click: (event, messageModal) => {
|
||||
remove(serviceCategoryId);
|
||||
messageModal.hide();
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
App.Utils.Message.show(lang('delete_service_category'), lang('delete_record_prompt'), buttons);
|
||||
});
|
||||
|
||||
/**
|
||||
* Event: Categories Save Button "Click"
|
||||
*/
|
||||
$serviceCategories.on('click', '#save-service-category', () => {
|
||||
const serviceCategory = {
|
||||
name: $name.val(),
|
||||
description: $description.val(),
|
||||
};
|
||||
|
||||
if ($id.val() !== '') {
|
||||
serviceCategory.id = $id.val();
|
||||
}
|
||||
|
||||
if (!validate()) {
|
||||
return;
|
||||
}
|
||||
|
||||
App.Pages.ServiceCategories.save(serviceCategory);
|
||||
});
|
||||
|
||||
/**
|
||||
* Event: Cancel Service-Category Button "Click"
|
||||
*/
|
||||
$serviceCategories.on('click', '#cancel-service-category', () => {
|
||||
const id = $id.val();
|
||||
App.Pages.ServiceCategories.resetForm();
|
||||
if (id !== '') {
|
||||
select(id, true);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Filter service categories records.
|
||||
*
|
||||
* @param {String} keyword This key string is used to filter the service-category records.
|
||||
* @param {Number} selectId Optional, if set then after the filter operation the record with the given
|
||||
* ID will be selected (but not displayed).
|
||||
* @param {Boolean} show Optional (false), if true then the selected record will be displayed on the form.
|
||||
*/
|
||||
function filter(keyword, selectId = null, show = false) {
|
||||
App.Http.ServiceCategories.search(keyword, filterLimit).then((response) => {
|
||||
filterResults = response;
|
||||
|
||||
$('#filter-service-categories .results').empty();
|
||||
|
||||
response.forEach((serviceCategory) => {
|
||||
$('#filter-service-categories .results')
|
||||
.append(App.Pages.ServiceCategories.getFilterHtml(serviceCategory))
|
||||
.append($('<hr/>'));
|
||||
});
|
||||
|
||||
if (response.length === 0) {
|
||||
$('#filter-service-categories .results').append(
|
||||
$('<em/>', {
|
||||
'text': lang('no_records_found'),
|
||||
}),
|
||||
);
|
||||
} else if (response.length === filterLimit) {
|
||||
$('<button/>', {
|
||||
'type': 'button',
|
||||
'class': 'btn btn-outline-secondary w-100 load-more text-center',
|
||||
'text': lang('load_more'),
|
||||
'click': () => {
|
||||
filterLimit += 20;
|
||||
App.Pages.ServiceCategories.filter(keyword, selectId, show);
|
||||
},
|
||||
}).appendTo('#filter-service-categories .results');
|
||||
}
|
||||
|
||||
if (selectId) {
|
||||
select(selectId, show);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Save a service-category record to the database (via AJAX post).
|
||||
*
|
||||
* @param {Object} serviceCategory Contains the service-category data.
|
||||
*/
|
||||
function save(serviceCategory) {
|
||||
App.Http.ServiceCategories.save(serviceCategory).then((response) => {
|
||||
App.Layouts.Backend.displayNotification(lang('service_category_saved'));
|
||||
App.Pages.ServiceCategories.resetForm();
|
||||
$filterServiceCategories.find('.key').val('');
|
||||
App.Pages.ServiceCategories.filter('', response.id, true);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Delete service-category record.
|
||||
*
|
||||
* @param {Number} id Record ID to be deleted.
|
||||
*/
|
||||
function remove(id) {
|
||||
App.Http.ServiceCategories.destroy(id).then(() => {
|
||||
App.Layouts.Backend.displayNotification(lang('service_category_deleted'));
|
||||
App.Pages.ServiceCategories.resetForm();
|
||||
App.Pages.ServiceCategories.filter($('#filter-service-categories .key').val());
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Display a service-category record on the form.
|
||||
*
|
||||
* @param {Object} serviceCategory Contains the service-category data.
|
||||
*/
|
||||
function display(serviceCategory) {
|
||||
$id.val(serviceCategory.id);
|
||||
$name.val(serviceCategory.name);
|
||||
$description.val(serviceCategory.description);
|
||||
}
|
||||
|
||||
/**
|
||||
* Validate service-category data before save (insert or update).
|
||||
*
|
||||
* @return {Boolean} Returns the validation result.
|
||||
*/
|
||||
function validate() {
|
||||
$serviceCategories.find('.is-invalid').removeClass('is-invalid');
|
||||
$serviceCategories.find('.form-message').removeClass('alert-danger').hide();
|
||||
|
||||
try {
|
||||
let missingRequired = false;
|
||||
|
||||
$serviceCategories.find('.required').each((index, fieldEl) => {
|
||||
if (!$(fieldEl).val()) {
|
||||
$(fieldEl).addClass('is-invalid');
|
||||
missingRequired = true;
|
||||
}
|
||||
});
|
||||
|
||||
if (missingRequired) {
|
||||
throw new Error(lang('fields_are_required'));
|
||||
}
|
||||
|
||||
return true;
|
||||
} catch (error) {
|
||||
$serviceCategories.find('.form-message').addClass('alert-danger').text(error.message).show();
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Bring the service-category form back to its initial state.
|
||||
*/
|
||||
function resetForm() {
|
||||
$filterServiceCategories.find('.selected').removeClass('selected');
|
||||
$filterServiceCategories.find('button').prop('disabled', false);
|
||||
$filterServiceCategories.find('.results').css('color', '');
|
||||
|
||||
$serviceCategories.find('.add-edit-delete-group').show();
|
||||
$serviceCategories.find('.save-cancel-group').hide();
|
||||
$serviceCategories.find('.record-details').find('input, select, textarea').val('').prop('disabled', true);
|
||||
$serviceCategories.find('.record-details .form-label span').prop('hidden', true);
|
||||
$('#edit-service-category, #delete-service-category').prop('disabled', true);
|
||||
|
||||
$serviceCategories.find('.record-details .is-invalid').removeClass('is-invalid');
|
||||
$serviceCategories.find('.record-details .form-message').hide();
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the filter results row HTML code.
|
||||
*
|
||||
* @param {Object} serviceCategory Contains the service-category data.
|
||||
*
|
||||
* @return {String} Returns the record HTML code.
|
||||
*/
|
||||
function getFilterHtml(serviceCategory) {
|
||||
return $('<div/>', {
|
||||
'class': 'service-category-row entry',
|
||||
'data-id': serviceCategory.id,
|
||||
'html': [
|
||||
$('<strong/>', {
|
||||
'text': serviceCategory.name,
|
||||
}),
|
||||
$('<br/>'),
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Select a specific record from the current filter results.
|
||||
*
|
||||
* If the service-category ID does not exist in the list then no record will be selected.
|
||||
*
|
||||
* @param {Number} id The record ID to be selected from the filter results.
|
||||
* @param {Boolean} show Optional (false), if true then the method will display the record on the form.
|
||||
*/
|
||||
function select(id, show = false) {
|
||||
$filterServiceCategories.find('.selected').removeClass('selected');
|
||||
|
||||
$filterServiceCategories.find('.service-category-row[data-id="' + id + '"]').addClass('selected');
|
||||
|
||||
if (show) {
|
||||
const serviceCategory = filterResults.find((serviceCategory) => Number(serviceCategory.id) === Number(id));
|
||||
|
||||
App.Pages.ServiceCategories.display(serviceCategory);
|
||||
|
||||
$('#edit-service-category, #delete-service-category').prop('disabled', false);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize the module.
|
||||
*/
|
||||
function initialize() {
|
||||
App.Pages.ServiceCategories.resetForm();
|
||||
App.Pages.ServiceCategories.filter('');
|
||||
App.Pages.ServiceCategories.addEventListeners();
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', initialize);
|
||||
|
||||
return {
|
||||
filter,
|
||||
save,
|
||||
remove,
|
||||
validate,
|
||||
getFilterHtml,
|
||||
resetForm,
|
||||
display,
|
||||
select,
|
||||
addEventListeners,
|
||||
};
|
||||
})();
|
||||
441
assets/js/pages/services.js
Normal file
441
assets/js/pages/services.js
Normal file
@ -0,0 +1,441 @@
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Easy!Appointments - Online Appointment Scheduler
|
||||
*
|
||||
* @package EasyAppointments
|
||||
* @author A.Tselegidis <alextselegidis@gmail.com>
|
||||
* @copyright Copyright (c) Alex Tselegidis
|
||||
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
|
||||
* @link https://easyappointments.org
|
||||
* @since v1.5.0
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
/**
|
||||
* Services page.
|
||||
*
|
||||
* This module implements the functionality of the services page.
|
||||
*/
|
||||
App.Pages.Services = (function () {
|
||||
const $services = $('#services');
|
||||
const $id = $('#id');
|
||||
const $name = $('#name');
|
||||
const $duration = $('#duration');
|
||||
const $price = $('#price');
|
||||
const $currency = $('#currency');
|
||||
const $serviceCategoryId = $('#service-category-id');
|
||||
const $availabilitiesType = $('#availabilities-type');
|
||||
const $attendantsNumber = $('#attendants-number');
|
||||
const $isPrivate = $('#is-private');
|
||||
const $location = $('#location');
|
||||
const $description = $('#description');
|
||||
const $filterServices = $('#filter-services');
|
||||
const $color = $('#color');
|
||||
let filterResults = {};
|
||||
let filterLimit = 20;
|
||||
|
||||
/**
|
||||
* Add page event listeners.
|
||||
*/
|
||||
function addEventListeners() {
|
||||
/**
|
||||
* Event: Filter Services Form "Submit"
|
||||
*
|
||||
* @param {jQuery.Event} event
|
||||
*/
|
||||
$services.on('submit', '#filter-services form', (event) => {
|
||||
event.preventDefault();
|
||||
const key = $filterServices.find('.key').val();
|
||||
$filterServices.find('.selected').removeClass('selected');
|
||||
App.Pages.Services.resetForm();
|
||||
App.Pages.Services.filter(key);
|
||||
});
|
||||
|
||||
/**
|
||||
* Event: Filter Service Row "Click"
|
||||
*
|
||||
* Display the selected service data to the user.
|
||||
*/
|
||||
$services.on('click', '.service-row', (event) => {
|
||||
if ($filterServices.find('.filter').prop('disabled')) {
|
||||
$filterServices.find('.results').css('color', '#AAA');
|
||||
return; // exit because we are on edit mode
|
||||
}
|
||||
|
||||
const serviceId = $(event.currentTarget).attr('data-id');
|
||||
|
||||
const service = filterResults.find((filterResult) => Number(filterResult.id) === Number(serviceId));
|
||||
|
||||
// Add dedicated provider link.
|
||||
const dedicatedUrl = App.Utils.Url.siteUrl('?service=' + encodeURIComponent(service.id));
|
||||
|
||||
const $link = $('<a/>', {
|
||||
'href': dedicatedUrl,
|
||||
'target': '_blank',
|
||||
'html': [
|
||||
$('<i/>', {
|
||||
'class': 'fas fa-link me-2',
|
||||
}),
|
||||
|
||||
$('<span/>', {
|
||||
'text': lang('booking_link'),
|
||||
}),
|
||||
],
|
||||
});
|
||||
|
||||
$services.find('.record-details h4').find('a').remove().end().append($link);
|
||||
|
||||
App.Pages.Services.display(service);
|
||||
$filterServices.find('.selected').removeClass('selected');
|
||||
$(event.currentTarget).addClass('selected');
|
||||
$('#edit-service, #delete-service').prop('disabled', false);
|
||||
});
|
||||
|
||||
/**
|
||||
* Event: Add New Service Button "Click"
|
||||
*/
|
||||
$services.on('click', '#add-service', () => {
|
||||
App.Pages.Services.resetForm();
|
||||
$services.find('.add-edit-delete-group').hide();
|
||||
$services.find('.save-cancel-group').show();
|
||||
$services.find('.record-details').find('input, select, textarea').prop('disabled', false);
|
||||
$services.find('.record-details .form-label span').prop('hidden', false);
|
||||
$filterServices.find('button').prop('disabled', true);
|
||||
$filterServices.find('.results').css('color', '#AAA');
|
||||
App.Components.ColorSelection.enable($color);
|
||||
|
||||
// Default values
|
||||
$name.val('Service');
|
||||
$duration.val('30');
|
||||
$price.val('0');
|
||||
$currency.val('');
|
||||
$serviceCategoryId.val('');
|
||||
$availabilitiesType.val('flexible');
|
||||
$attendantsNumber.val('1');
|
||||
});
|
||||
|
||||
/**
|
||||
* Event: Cancel Service Button "Click"
|
||||
*
|
||||
* Cancel add or edit of a service record.
|
||||
*/
|
||||
$services.on('click', '#cancel-service', () => {
|
||||
const id = $id.val();
|
||||
|
||||
App.Pages.Services.resetForm();
|
||||
|
||||
if (id !== '') {
|
||||
App.Pages.Services.select(id, true);
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Event: Save Service Button "Click"
|
||||
*/
|
||||
$services.on('click', '#save-service', () => {
|
||||
const service = {
|
||||
name: $name.val(),
|
||||
duration: $duration.val(),
|
||||
price: $price.val(),
|
||||
currency: $currency.val(),
|
||||
description: $description.val(),
|
||||
location: $location.val(),
|
||||
color: App.Components.ColorSelection.getColor($color),
|
||||
availabilities_type: $availabilitiesType.val(),
|
||||
attendants_number: $attendantsNumber.val(),
|
||||
is_private: Number($isPrivate.prop('checked')),
|
||||
id_service_categories: $serviceCategoryId.val() || undefined,
|
||||
};
|
||||
|
||||
if ($id.val() !== '') {
|
||||
service.id = $id.val();
|
||||
}
|
||||
|
||||
if (!App.Pages.Services.validate()) {
|
||||
return;
|
||||
}
|
||||
|
||||
App.Pages.Services.save(service);
|
||||
});
|
||||
|
||||
/**
|
||||
* Event: Edit Service Button "Click"
|
||||
*/
|
||||
$services.on('click', '#edit-service', () => {
|
||||
$services.find('.add-edit-delete-group').hide();
|
||||
$services.find('.save-cancel-group').show();
|
||||
$services.find('.record-details').find('input, select, textarea').prop('disabled', false);
|
||||
$services.find('.record-details .form-label span').prop('hidden', false);
|
||||
$filterServices.find('button').prop('disabled', true);
|
||||
$filterServices.find('.results').css('color', '#AAA');
|
||||
App.Components.ColorSelection.enable($color);
|
||||
});
|
||||
|
||||
/**
|
||||
* Event: Delete Service Button "Click"
|
||||
*/
|
||||
$services.on('click', '#delete-service', () => {
|
||||
const serviceId = $id.val();
|
||||
const buttons = [
|
||||
{
|
||||
text: lang('cancel'),
|
||||
click: (event, messageModal) => {
|
||||
messageModal.hide();
|
||||
},
|
||||
},
|
||||
{
|
||||
text: lang('delete'),
|
||||
click: (event, messageModal) => {
|
||||
App.Pages.Services.remove(serviceId);
|
||||
messageModal.hide();
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
App.Utils.Message.show(lang('delete_service'), lang('delete_record_prompt'), buttons);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Save service record to database.
|
||||
*
|
||||
* @param {Object} service Contains the service record data. If an 'id' value is provided
|
||||
* then the update operation is going to be executed.
|
||||
*/
|
||||
function save(service) {
|
||||
App.Http.Services.save(service).then((response) => {
|
||||
App.Layouts.Backend.displayNotification(lang('service_saved'));
|
||||
App.Pages.Services.resetForm();
|
||||
$filterServices.find('.key').val('');
|
||||
App.Pages.Services.filter('', response.id, true);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Delete a service record from database.
|
||||
*
|
||||
* @param {Number} id Record ID to be deleted.
|
||||
*/
|
||||
function remove(id) {
|
||||
App.Http.Services.destroy(id).then(() => {
|
||||
App.Layouts.Backend.displayNotification(lang('service_deleted'));
|
||||
App.Pages.Services.resetForm();
|
||||
App.Pages.Services.filter($filterServices.find('.key').val());
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Validates a service record.
|
||||
*
|
||||
* @return {Boolean} Returns the validation result.
|
||||
*/
|
||||
function validate() {
|
||||
$services.find('.is-invalid').removeClass('is-invalid');
|
||||
$services.find('.form-message').removeClass('alert-danger').hide();
|
||||
|
||||
try {
|
||||
// Validate required fields.
|
||||
let missingRequired = false;
|
||||
|
||||
$services.find('.required').each((index, requiredField) => {
|
||||
if (!$(requiredField).val()) {
|
||||
$(requiredField).addClass('is-invalid');
|
||||
missingRequired = true;
|
||||
}
|
||||
});
|
||||
|
||||
if (missingRequired) {
|
||||
throw new Error(lang('fields_are_required'));
|
||||
}
|
||||
|
||||
// Validate the duration.
|
||||
if (Number($duration.val()) < vars('event_minimum_duration')) {
|
||||
$duration.addClass('is-invalid');
|
||||
throw new Error(lang('invalid_duration'));
|
||||
}
|
||||
|
||||
return true;
|
||||
} catch (error) {
|
||||
$services.find('.form-message').addClass('alert-danger').text(error.message).show();
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Resets the service tab form back to its initial state.
|
||||
*/
|
||||
function resetForm() {
|
||||
$filterServices.find('.selected').removeClass('selected');
|
||||
$filterServices.find('button').prop('disabled', false);
|
||||
$filterServices.find('.results').css('color', '');
|
||||
|
||||
$services.find('.record-details').find('input, select, textarea').val('').prop('disabled', true);
|
||||
$services.find('.record-details .form-label span').prop('hidden', true);
|
||||
$services.find('.record-details #is-private').prop('checked', false);
|
||||
$services.find('.record-details h4 a').remove();
|
||||
|
||||
$services.find('.add-edit-delete-group').show();
|
||||
$services.find('.save-cancel-group').hide();
|
||||
$('#edit-service, #delete-service').prop('disabled', true);
|
||||
|
||||
$services.find('.record-details .is-invalid').removeClass('is-invalid');
|
||||
$services.find('.record-details .form-message').hide();
|
||||
|
||||
App.Components.ColorSelection.disable($color);
|
||||
}
|
||||
|
||||
/**
|
||||
* Display a service record into the service form.
|
||||
*
|
||||
* @param {Object} service Contains the service record data.
|
||||
*/
|
||||
function display(service) {
|
||||
$id.val(service.id);
|
||||
$name.val(service.name);
|
||||
$duration.val(service.duration);
|
||||
$price.val(service.price);
|
||||
$currency.val(service.currency);
|
||||
$description.val(service.description);
|
||||
$location.val(service.location);
|
||||
$availabilitiesType.val(service.availabilities_type);
|
||||
$attendantsNumber.val(service.attendants_number);
|
||||
$isPrivate.prop('checked', service.is_private);
|
||||
App.Components.ColorSelection.setColor($color, service.color);
|
||||
|
||||
const serviceCategoryId = service.id_service_categories !== null ? service.id_service_categories : '';
|
||||
$serviceCategoryId.val(serviceCategoryId);
|
||||
}
|
||||
|
||||
/**
|
||||
* Filters service records depending on a string keyword.
|
||||
*
|
||||
* @param {String} keyword This is used to filter the service records of the database.
|
||||
* @param {Number} selectId Optional, if set then after the filter operation the record with this
|
||||
* ID will be selected (but not displayed).
|
||||
* @param {Boolean} show Optional (false), if true then the selected record will be displayed on the form.
|
||||
*/
|
||||
function filter(keyword, selectId = null, show = false) {
|
||||
App.Http.Services.search(keyword, filterLimit).then((response) => {
|
||||
filterResults = response;
|
||||
|
||||
$filterServices.find('.results').empty();
|
||||
|
||||
response.forEach((service) => {
|
||||
$filterServices.find('.results').append(App.Pages.Services.getFilterHtml(service)).append($('<hr/>'));
|
||||
});
|
||||
|
||||
if (response.length === 0) {
|
||||
$filterServices.find('.results').append(
|
||||
$('<em/>', {
|
||||
'text': lang('no_records_found'),
|
||||
}),
|
||||
);
|
||||
} else if (response.length === filterLimit) {
|
||||
$('<button/>', {
|
||||
'type': 'button',
|
||||
'class': 'btn btn-outline-secondary w-100 load-more text-center',
|
||||
'text': lang('load_more'),
|
||||
'click': () => {
|
||||
filterLimit += 20;
|
||||
App.Pages.Services.filter(keyword, selectId, show);
|
||||
},
|
||||
}).appendTo('#filter-services .results');
|
||||
}
|
||||
|
||||
if (selectId) {
|
||||
App.Pages.Services.select(selectId, show);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Get Filter HTML
|
||||
*
|
||||
* Get a service row HTML code that is going to be displayed on the filter results list.
|
||||
*
|
||||
* @param {Object} service Contains the service record data.
|
||||
*
|
||||
* @return {String} The HTML code that represents the record on the filter results list.
|
||||
*/
|
||||
function getFilterHtml(service) {
|
||||
const name = service.name;
|
||||
|
||||
const info = service.duration + ' min - ' + service.price + ' ' + service.currency;
|
||||
|
||||
return $('<div/>', {
|
||||
'class': 'service-row entry',
|
||||
'data-id': service.id,
|
||||
'html': [
|
||||
$('<strong/>', {
|
||||
'text': name,
|
||||
}),
|
||||
$('<br/>'),
|
||||
$('<small/>', {
|
||||
'class': 'text-muted',
|
||||
'text': info,
|
||||
}),
|
||||
$('<br/>'),
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Select a specific record from the current filter results. If the service id does not exist
|
||||
* in the list then no record will be selected.
|
||||
*
|
||||
* @param {Number} id The record id to be selected from the filter results.
|
||||
* @param {Boolean} show Optional (false), if true then the method will display the record on the form.
|
||||
*/
|
||||
function select(id, show = false) {
|
||||
$filterServices.find('.selected').removeClass('selected');
|
||||
|
||||
$filterServices.find('.service-row[data-id="' + id + '"]').addClass('selected');
|
||||
|
||||
if (show) {
|
||||
const service = filterResults.find((filterResult) => Number(filterResult.id) === Number(id));
|
||||
|
||||
App.Pages.Services.display(service);
|
||||
|
||||
$('#edit-service, #delete-service').prop('disabled', false);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Update the service-category list box.
|
||||
*
|
||||
* Use this method every time a change is made to the service categories db table.
|
||||
*/
|
||||
function updateAvailableServiceCategories() {
|
||||
App.Http.ServiceCategories.search('', 999).then((response) => {
|
||||
$serviceCategoryId.empty();
|
||||
|
||||
$serviceCategoryId.append(new Option('', '')).val('');
|
||||
|
||||
response.forEach((serviceCategory) => {
|
||||
$serviceCategoryId.append(new Option(serviceCategory.name, serviceCategory.id));
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize the module.
|
||||
*/
|
||||
function initialize() {
|
||||
App.Pages.Services.resetForm();
|
||||
App.Pages.Services.filter('');
|
||||
App.Pages.Services.addEventListeners();
|
||||
updateAvailableServiceCategories();
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', initialize);
|
||||
|
||||
return {
|
||||
filter,
|
||||
save,
|
||||
remove,
|
||||
validate,
|
||||
getFilterHtml,
|
||||
resetForm,
|
||||
display,
|
||||
select,
|
||||
addEventListeners,
|
||||
};
|
||||
})();
|
||||
389
assets/js/pages/webhooks.js
Normal file
389
assets/js/pages/webhooks.js
Normal file
@ -0,0 +1,389 @@
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Easy!Appointments - Online Appointment Scheduler
|
||||
*
|
||||
* @package EasyAppointments
|
||||
* @author A.Tselegidis <alextselegidis@gmail.com>
|
||||
* @copyright Copyright (c) Alex Tselegidis
|
||||
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
|
||||
* @link https://easyappointments.org
|
||||
* @since v1.5.0
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
/**
|
||||
* Webhooks page.
|
||||
*
|
||||
* This module implements the functionality of the webhooks page.
|
||||
*/
|
||||
App.Pages.Webhooks = (function () {
|
||||
const $webhooks = $('#webhooks');
|
||||
const $id = $('#id');
|
||||
const $name = $('#name');
|
||||
const $url = $('#url');
|
||||
const $actions = $('#actions');
|
||||
const $secretHeader = $('#secret-header');
|
||||
const $secretToken = $('#secret-token');
|
||||
const $isSslVerified = $('#is-ssl-verified');
|
||||
const $notes = $('#notes');
|
||||
const $filterWebhooks = $('#filter-webhooks');
|
||||
let filterResults = {};
|
||||
let filterLimit = 20;
|
||||
|
||||
/**
|
||||
* Add page event listeners.
|
||||
*/
|
||||
function addEventListeners() {
|
||||
/**
|
||||
* Event: Filter Webhooks Form "Submit"
|
||||
*
|
||||
* @param {jQuery.Event} event
|
||||
*/
|
||||
$webhooks.on('submit', '#filter-webhooks form', (event) => {
|
||||
event.preventDefault();
|
||||
const key = $filterWebhooks.find('.key').val();
|
||||
$filterWebhooks.find('.selected').removeClass('selected');
|
||||
App.Pages.Webhooks.resetForm();
|
||||
App.Pages.Webhooks.filter(key);
|
||||
});
|
||||
|
||||
/**
|
||||
* Event: Filter Webhook Row "Click"
|
||||
*
|
||||
* Display the selected webhook data to the user.
|
||||
*/
|
||||
$webhooks.on('click', '.webhook-row', (event) => {
|
||||
if ($filterWebhooks.find('.filter').prop('disabled')) {
|
||||
$filterWebhooks.find('.results').css('color', '#AAA');
|
||||
return; // exit because we are on edit mode
|
||||
}
|
||||
|
||||
const webhookId = $(event.currentTarget).attr('data-id');
|
||||
|
||||
const webhook = filterResults.find((filterResult) => Number(filterResult.id) === Number(webhookId));
|
||||
|
||||
App.Pages.Webhooks.display(webhook);
|
||||
|
||||
$filterWebhooks.find('.selected').removeClass('selected');
|
||||
$(event.currentTarget).addClass('selected');
|
||||
$('#edit-webhook, #delete-webhook').prop('disabled', false);
|
||||
});
|
||||
|
||||
/**
|
||||
* Event: Add New Webhook Button "Click"
|
||||
*/
|
||||
$webhooks.on('click', '#add-webhook', () => {
|
||||
App.Pages.Webhooks.resetForm();
|
||||
$webhooks.find('.add-edit-delete-group').hide();
|
||||
$webhooks.find('.save-cancel-group').show();
|
||||
$webhooks.find('.record-details').find('input, select, textarea').prop('disabled', false);
|
||||
$webhooks.find('.record-details .form-label span').prop('hidden', false);
|
||||
$filterWebhooks.find('button').prop('disabled', true);
|
||||
$filterWebhooks.find('.results').css('color', '#AAA');
|
||||
});
|
||||
|
||||
/**
|
||||
* Event: Cancel Webhook Button "Click"
|
||||
*
|
||||
* Cancel add or edit of a webhook record.
|
||||
*/
|
||||
$webhooks.on('click', '#cancel-webhook', () => {
|
||||
const id = $id.val();
|
||||
|
||||
App.Pages.Webhooks.resetForm();
|
||||
|
||||
if (id !== '') {
|
||||
select(id, true);
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Event: Save Webhook Button "Click"
|
||||
*/
|
||||
$webhooks.on('click', '#save-webhook', () => {
|
||||
const webhook = {
|
||||
name: $name.val(),
|
||||
url: $url.val(),
|
||||
actions: '',
|
||||
secret_header: $secretHeader.val(),
|
||||
secret_token: $secretToken.val(),
|
||||
is_ssl_verified: Number($isSslVerified.prop('checked')),
|
||||
notes: $notes.val(),
|
||||
};
|
||||
|
||||
const actions = [];
|
||||
|
||||
$actions.find('input:checked').each((index, checkbox) => {
|
||||
var action = $(checkbox).data('action');
|
||||
actions.push(action);
|
||||
});
|
||||
|
||||
webhook.actions = actions.join(',');
|
||||
|
||||
if ($id.val() !== '') {
|
||||
webhook.id = $id.val();
|
||||
}
|
||||
|
||||
if (!App.Pages.Webhooks.validate()) {
|
||||
return;
|
||||
}
|
||||
|
||||
App.Pages.Webhooks.save(webhook);
|
||||
});
|
||||
|
||||
/**
|
||||
* Event: Edit Webhook Button "Click"
|
||||
*/
|
||||
$webhooks.on('click', '#edit-webhook', () => {
|
||||
$webhooks.find('.add-edit-delete-group').hide();
|
||||
$webhooks.find('.save-cancel-group').show();
|
||||
$webhooks.find('.record-details').find('input, select, textarea').prop('disabled', false);
|
||||
$webhooks.find('.record-details .form-label span').prop('hidden', false);
|
||||
$filterWebhooks.find('button').prop('disabled', true);
|
||||
$filterWebhooks.find('.results').css('color', '#AAA');
|
||||
});
|
||||
|
||||
/**
|
||||
* Event: Delete Webhook Button "Click"
|
||||
*/
|
||||
$webhooks.on('click', '#delete-webhook', () => {
|
||||
const webhookId = $id.val();
|
||||
const buttons = [
|
||||
{
|
||||
text: lang('cancel'),
|
||||
click: (event, messageModal) => {
|
||||
messageModal.hide();
|
||||
},
|
||||
},
|
||||
{
|
||||
text: lang('delete'),
|
||||
click: (event, messageModal) => {
|
||||
App.Pages.Webhooks.remove(webhookId);
|
||||
messageModal.hide();
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
App.Utils.Message.show(lang('delete_webhook'), lang('delete_record_prompt'), buttons);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Save webhook record to database.
|
||||
*
|
||||
* @param {Object} webhook Contains the webhook record data. If an 'id' value is provided
|
||||
* then the update operation is going to be executed.
|
||||
*/
|
||||
function save(webhook) {
|
||||
App.Http.Webhooks.save(webhook).then((response) => {
|
||||
App.Layouts.Backend.displayNotification(lang('webhook_saved'));
|
||||
App.Pages.Webhooks.resetForm();
|
||||
$filterWebhooks.find('.key').val('');
|
||||
App.Pages.Webhooks.filter('', response.id, true);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Delete a webhook record from database.
|
||||
*
|
||||
* @param {Number} id Record ID to be deleted.
|
||||
*/
|
||||
function remove(id) {
|
||||
App.Http.Webhooks.destroy(id).then(() => {
|
||||
App.Layouts.Backend.displayNotification(lang('webhook_deleted'));
|
||||
App.Pages.Webhooks.resetForm();
|
||||
App.Pages.Webhooks.filter($filterWebhooks.find('.key').val());
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Validates a webhook record.
|
||||
*
|
||||
* @return {Boolean} Returns the validation result.
|
||||
*/
|
||||
function validate() {
|
||||
$webhooks.find('.is-invalid').removeClass('is-invalid');
|
||||
$webhooks.find('.form-message').removeClass('alert-danger').hide();
|
||||
|
||||
try {
|
||||
// Validate required fields.
|
||||
let missingRequired = false;
|
||||
|
||||
$webhooks.find('.required').each((index, requiredField) => {
|
||||
if (!$(requiredField).val()) {
|
||||
$(requiredField).addClass('is-invalid');
|
||||
missingRequired = true;
|
||||
}
|
||||
});
|
||||
|
||||
if (missingRequired) {
|
||||
throw new Error(lang('fields_are_required'));
|
||||
}
|
||||
|
||||
return true;
|
||||
} catch (error) {
|
||||
$webhooks.find('.form-message').addClass('alert-danger').text(error.message).show();
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Resets the webhook tab form back to its initial state.
|
||||
*/
|
||||
function resetForm() {
|
||||
$filterWebhooks.find('.selected').removeClass('selected');
|
||||
$filterWebhooks.find('button').prop('disabled', false);
|
||||
$filterWebhooks.find('.results').css('color', '');
|
||||
|
||||
$webhooks.find('.record-details').find('input, select, textarea').val('').prop('disabled', true);
|
||||
$webhooks.find('.record-details .form-label span').prop('hidden', true);
|
||||
$webhooks.find('.record-details h3 a').remove();
|
||||
|
||||
$webhooks.find('.add-edit-delete-group').show();
|
||||
$webhooks.find('.save-cancel-group').hide();
|
||||
$('#edit-webhook, #delete-webhook').prop('disabled', true);
|
||||
|
||||
$webhooks.find('.record-details .is-invalid').removeClass('is-invalid');
|
||||
$webhooks.find('.record-details .form-message').hide();
|
||||
|
||||
$actions.find('input:checkbox').prop('checked', false);
|
||||
}
|
||||
|
||||
/**
|
||||
* Display a webhook record into the webhook form.
|
||||
*
|
||||
* @param {Object} webhook Contains the webhook record data.
|
||||
*/
|
||||
function display(webhook) {
|
||||
$id.val(webhook.id);
|
||||
$name.val(webhook.name);
|
||||
$url.val(webhook.url);
|
||||
$secretHeader.val(webhook.secret_header);
|
||||
$secretToken.val(webhook.secret_token);
|
||||
$isSslVerified.prop('checked', Boolean(Number(webhook.is_ssl_verified)));
|
||||
|
||||
$actions.find('input:checkbox').prop('checked', false);
|
||||
|
||||
if (webhook.actions && webhook.actions.length) {
|
||||
const actions = webhook.actions.split(',');
|
||||
actions.forEach((action) => $(`[data-action="${action}"]`).prop('checked', true));
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Filters webhook records depending a string keyword.
|
||||
*
|
||||
* @param {String} keyword This is used to filter the webhook records of the database.
|
||||
* @param {Number} selectId Optional, if set then after the filter operation the record with this
|
||||
* ID will be selected (but not displayed).
|
||||
* @param {Boolean} show Optional (false), if true then the selected record will be displayed on the form.
|
||||
*/
|
||||
function filter(keyword, selectId = null, show = false) {
|
||||
App.Http.Webhooks.search(keyword, filterLimit).then((response) => {
|
||||
filterResults = response;
|
||||
|
||||
$filterWebhooks.find('.results').empty();
|
||||
|
||||
response.forEach((webhook) => {
|
||||
$filterWebhooks.find('.results').append(App.Pages.Webhooks.getFilterHtml(webhook)).append($('<hr/>'));
|
||||
});
|
||||
|
||||
if (response.length === 0) {
|
||||
$filterWebhooks.find('.results').append(
|
||||
$('<em/>', {
|
||||
'text': lang('no_records_found'),
|
||||
}),
|
||||
);
|
||||
} else if (response.length === filterLimit) {
|
||||
$('<button/>', {
|
||||
'type': 'button',
|
||||
'class': 'btn btn-outline-secondary w-100 load-more text-center',
|
||||
'text': lang('load_more'),
|
||||
'click': () => {
|
||||
filterLimit += 20;
|
||||
App.Pages.Webhooks.filter(keyword, selectId, show);
|
||||
},
|
||||
}).appendTo('#filter-webhooks .results');
|
||||
}
|
||||
|
||||
if (selectId) {
|
||||
App.Pages.Webhooks.select(selectId, show);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Get Filter HTML
|
||||
*
|
||||
* Get a webhook row HTML code that is going to be displayed on the filter results list.
|
||||
*
|
||||
* @param {Object} webhook Contains the webhook record data.
|
||||
*
|
||||
* @return {String} The HTML code that represents the record on the filter results list.
|
||||
*/
|
||||
function getFilterHtml(webhook) {
|
||||
const name = webhook.name;
|
||||
|
||||
const actionCount = webhook.actions && webhook.actions.length ? webhook.actions.split(',').length : 0;
|
||||
|
||||
const info = `${actionCount} ${lang('actions')}`;
|
||||
|
||||
return $('<div/>', {
|
||||
'class': 'webhook-row entry',
|
||||
'data-id': webhook.id,
|
||||
'html': [
|
||||
$('<strong/>', {
|
||||
'text': name,
|
||||
}),
|
||||
$('<br/>'),
|
||||
$('<small/>', {
|
||||
'class': 'text-muted',
|
||||
'text': info,
|
||||
}),
|
||||
$('<br/>'),
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Select a specific record from the current filter results. If the webhook id does not exist
|
||||
* in the list then no record will be selected.
|
||||
*
|
||||
* @param {Number} id The record id to be selected from the filter results.
|
||||
* @param {Boolean} show Optional (false), if true then the method will display the record on the form.
|
||||
*/
|
||||
function select(id, show = false) {
|
||||
$filterWebhooks.find('.selected').removeClass('selected');
|
||||
|
||||
$filterWebhooks.find('.webhook-row[data-id="' + id + '"]').addClass('selected');
|
||||
|
||||
if (show) {
|
||||
const webhook = filterResults.find((filterResult) => Number(filterResult.id) === Number(id));
|
||||
|
||||
App.Pages.Webhooks.display(webhook);
|
||||
|
||||
$('#edit-webhook, #delete-webhook').prop('disabled', false);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize the module.
|
||||
*/
|
||||
function initialize() {
|
||||
App.Pages.Webhooks.resetForm();
|
||||
App.Pages.Webhooks.filter('');
|
||||
App.Pages.Webhooks.addEventListeners();
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', initialize);
|
||||
|
||||
return {
|
||||
filter,
|
||||
save,
|
||||
remove,
|
||||
validate,
|
||||
getFilterHtml,
|
||||
resetForm,
|
||||
display,
|
||||
select,
|
||||
addEventListeners,
|
||||
};
|
||||
})();
|
||||
1668
assets/js/utils/calendar_default_view.js
Normal file
1668
assets/js/utils/calendar_default_view.js
Normal file
File diff suppressed because it is too large
Load Diff
140
assets/js/utils/calendar_event_popover.js
Normal file
140
assets/js/utils/calendar_event_popover.js
Normal file
@ -0,0 +1,140 @@
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Easy!Appointments - Online Appointment Scheduler
|
||||
*
|
||||
* @package EasyAppointments
|
||||
* @author A.Tselegidis <alextselegidis@gmail.com>
|
||||
* @copyright Copyright (c) Alex Tselegidis
|
||||
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
|
||||
* @link https://easyappointments.org
|
||||
* @since v1.5.0
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
/**
|
||||
* Calendar event popover utility.
|
||||
*
|
||||
* This module implements the functionality of calendar event popovers.
|
||||
*/
|
||||
App.Utils.CalendarEventPopover = (function () {
|
||||
/**
|
||||
* Render a map icon that links to Google maps.
|
||||
*
|
||||
* Old Name: GeneralFunctions.renderMapIcon
|
||||
*
|
||||
* @param {Object} user Should have the address, city, etc properties.
|
||||
*
|
||||
* @return {String} The rendered HTML.
|
||||
*/
|
||||
function renderMapIcon(user) {
|
||||
const data = [];
|
||||
|
||||
if (user.address) {
|
||||
data.push(user.address);
|
||||
}
|
||||
|
||||
if (user.city) {
|
||||
data.push(user.city);
|
||||
}
|
||||
|
||||
if (user.state) {
|
||||
data.push(user.state);
|
||||
}
|
||||
|
||||
if (user.zip_code) {
|
||||
data.push(user.zip_code);
|
||||
}
|
||||
|
||||
if (!data.length) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return $('<div/>', {
|
||||
'html': [
|
||||
$('<a/>', {
|
||||
'href': 'https://google.com/maps/place/' + data.join(','),
|
||||
'target': '_blank',
|
||||
'html': [
|
||||
$('<span/>', {
|
||||
'class': 'fas fa-map-marker-alt',
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}).html();
|
||||
}
|
||||
|
||||
/**
|
||||
* Render a mail icon.
|
||||
*
|
||||
* Old Name: GeneralFunctions.renderMailIcon
|
||||
*
|
||||
* @param {String} email
|
||||
*
|
||||
* @return {String} The rendered HTML.
|
||||
*/
|
||||
function renderMailIcon(email) {
|
||||
if (!email) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return $('<div/>', {
|
||||
'html': [
|
||||
$('<a/>', {
|
||||
'href': 'mailto:' + email,
|
||||
'target': '_blank',
|
||||
'html': [
|
||||
$('<span/>', {
|
||||
'class': 'fas fa-envelope',
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}).html();
|
||||
}
|
||||
|
||||
/**
|
||||
* Render a phone icon.
|
||||
*
|
||||
* Old Name: GeneralFunctions.renderPhoneIcon
|
||||
*
|
||||
* @param {String} phone
|
||||
*
|
||||
* @return {String} The rendered HTML.
|
||||
*/
|
||||
function renderPhoneIcon(phone) {
|
||||
if (!phone) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return $('<div/>', {
|
||||
'html': [
|
||||
$('<a/>', {
|
||||
'href': 'tel:' + phone,
|
||||
'target': '_blank',
|
||||
'html': [
|
||||
$('<span/>', {
|
||||
'class': 'fas fa-phone-alt',
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}).html();
|
||||
}
|
||||
|
||||
/**
|
||||
* Render custom content into the popover of events.
|
||||
*
|
||||
* @param {Object} info The info object as passed from FullCalendar
|
||||
*
|
||||
* @return {Object|String|null} Return HTML string, a jQuery selector or null for nothing.
|
||||
*/
|
||||
function renderCustomContent(info) {
|
||||
return null; // Default behavior
|
||||
}
|
||||
|
||||
return {
|
||||
renderPhoneIcon,
|
||||
renderMapIcon,
|
||||
renderMailIcon,
|
||||
renderCustomContent,
|
||||
};
|
||||
})();
|
||||
416
assets/js/utils/calendar_sync.js
Normal file
416
assets/js/utils/calendar_sync.js
Normal file
@ -0,0 +1,416 @@
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Easy!Appointments - Online Appointment Scheduler
|
||||
*
|
||||
* @package EasyAppointments
|
||||
* @author A.Tselegidis <alextselegidis@gmail.com>
|
||||
* @copyright Copyright (c) Alex Tselegidis
|
||||
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
|
||||
* @link https://easyappointments.org
|
||||
* @since v1.5.0
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
/**
|
||||
* Calendar sync utility.
|
||||
*
|
||||
* This module implements the functionality of calendar sync.
|
||||
*
|
||||
* Old Name: BackendCalendarSync
|
||||
*/
|
||||
App.Utils.CalendarSync = (function () {
|
||||
const $selectFilterItem = $('#select-filter-item');
|
||||
const $enableSync = $('#enable-sync');
|
||||
const $disableSync = $('#disable-sync');
|
||||
const $triggerSync = $('#trigger-sync');
|
||||
const $syncButtonGroup = $('#sync-button-group');
|
||||
const $reloadAppointments = $('#reload-appointments');
|
||||
|
||||
const FILTER_TYPE_PROVIDER = 'provider';
|
||||
let isSyncing = false;
|
||||
|
||||
function hasSync(type) {
|
||||
const $selectedOption = $selectFilterItem.find('option:selected');
|
||||
|
||||
return Boolean(Number($selectedOption.attr(`${type}-sync`)));
|
||||
}
|
||||
|
||||
function updateSyncButtons() {
|
||||
const $selectedOption = $selectFilterItem.find('option:selected');
|
||||
const type = $selectedOption.attr('type');
|
||||
const isProvider = type === FILTER_TYPE_PROVIDER;
|
||||
const hasGoogleSync = Boolean(Number($selectedOption.attr('google-sync')));
|
||||
const hasCaldavSync = Boolean(Number($selectedOption.attr('caldav-sync')));
|
||||
const hasSync = hasGoogleSync || hasCaldavSync;
|
||||
|
||||
$enableSync.prop('hidden', !isProvider || hasSync);
|
||||
$syncButtonGroup.prop('hidden', !isProvider || !hasSync);
|
||||
}
|
||||
|
||||
function enableGoogleSync() {
|
||||
// Enable synchronization for selected provider.
|
||||
|
||||
const authUrl = App.Utils.Url.siteUrl('google/oauth/' + $('#select-filter-item').val());
|
||||
|
||||
const redirectUrl = App.Utils.Url.siteUrl('google/oauth_callback');
|
||||
|
||||
const windowHandle = window.open(authUrl, 'Easy!Appointments', 'width=800, height=600');
|
||||
|
||||
const authInterval = window.setInterval(() => {
|
||||
// When the browser redirects to the Google user consent page the "window.document" variable
|
||||
// becomes "undefined" and when it comes back to the redirect URL it changes back. So check
|
||||
// whether the variable is undefined to avoid javascript errors.
|
||||
try {
|
||||
if (windowHandle.document) {
|
||||
if (windowHandle.document.URL.indexOf(redirectUrl) !== -1) {
|
||||
// The user has granted access to his data.
|
||||
windowHandle.close();
|
||||
|
||||
window.clearInterval(authInterval);
|
||||
|
||||
const $selectedOption = $selectFilterItem.find('option:selected');
|
||||
|
||||
$selectedOption.attr('google-sync', '1');
|
||||
|
||||
updateSyncButtons();
|
||||
|
||||
selectGoogleCalendar();
|
||||
}
|
||||
}
|
||||
} catch (Error) {
|
||||
// Accessing the document object before the window is loaded throws an error, but it will only
|
||||
// happen during the initialization of the window. Attaching "load" event handling is not
|
||||
// possible due to CORS restrictions.
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
|
||||
function disableGoogleSync() {
|
||||
App.Utils.Message.show(lang('disable_sync'), lang('disable_sync_prompt'), [
|
||||
{
|
||||
text: lang('cancel'),
|
||||
click: (event, messageModal) => {
|
||||
messageModal.hide();
|
||||
},
|
||||
},
|
||||
{
|
||||
text: lang('confirm'),
|
||||
click: (event, messageModal) => {
|
||||
// Disable synchronization for selected provider.
|
||||
const providerId = $selectFilterItem.val();
|
||||
|
||||
const provider = vars('available_providers').find(
|
||||
(availableProvider) => Number(availableProvider.id) === Number(providerId),
|
||||
);
|
||||
|
||||
if (!provider) {
|
||||
throw new Error('Provider not found: ' + providerId);
|
||||
}
|
||||
|
||||
provider.settings.google_sync = '0';
|
||||
provider.settings.google_token = null;
|
||||
|
||||
App.Http.Google.disableProviderSync(provider.id);
|
||||
|
||||
const $selectedOption = $selectFilterItem.find('option:selected');
|
||||
|
||||
$selectedOption.attr('google-sync', '0');
|
||||
|
||||
updateSyncButtons();
|
||||
|
||||
messageModal.hide();
|
||||
},
|
||||
},
|
||||
]);
|
||||
}
|
||||
|
||||
function selectGoogleCalendar() {
|
||||
const providerId = $selectFilterItem.val();
|
||||
|
||||
App.Http.Google.getGoogleCalendars(providerId).done((googleCalendars) => {
|
||||
const $selectGoogleCalendar = $(`
|
||||
<select class="form-control">
|
||||
<!-- JS -->
|
||||
</select>
|
||||
`);
|
||||
|
||||
googleCalendars.forEach((googleCalendar) => {
|
||||
$selectGoogleCalendar.append(new Option(googleCalendar.summary, googleCalendar.id));
|
||||
});
|
||||
|
||||
const $messageModal = App.Utils.Message.show(
|
||||
lang('select_sync_calendar'),
|
||||
lang('select_sync_calendar_prompt'),
|
||||
[
|
||||
{
|
||||
text: lang('select'),
|
||||
click: (event, messageModal) => {
|
||||
const googleCalendarId = $selectGoogleCalendar.val();
|
||||
|
||||
App.Http.Google.selectGoogleCalendar(providerId, googleCalendarId).done(() => {
|
||||
App.Layouts.Backend.displayNotification(lang('sync_calendar_selected'));
|
||||
});
|
||||
|
||||
messageModal.hide();
|
||||
},
|
||||
},
|
||||
],
|
||||
);
|
||||
|
||||
$selectGoogleCalendar.appendTo($messageModal.find('.modal-body'));
|
||||
});
|
||||
}
|
||||
|
||||
function triggerGoogleSync() {
|
||||
const providerId = $selectFilterItem.val();
|
||||
|
||||
App.Http.Google.syncWithGoogle(providerId)
|
||||
.done(() => {
|
||||
App.Layouts.Backend.displayNotification(lang('calendar_sync_completed'));
|
||||
$reloadAppointments.trigger('click');
|
||||
})
|
||||
.fail(() => {
|
||||
App.Layouts.Backend.displayNotification(lang('calendar_sync_failed'));
|
||||
})
|
||||
.always(() => {
|
||||
isSyncing = false;
|
||||
});
|
||||
}
|
||||
|
||||
function enableCaldavSync(defaultCaldavUrl = '', defaultCaldavUsername = '', defaultCaldavPassword = '') {
|
||||
const $container = $(`
|
||||
<div>
|
||||
<div class="mb-3">
|
||||
<label for="caldav-url" class="form-label">
|
||||
${lang('calendar_url')}
|
||||
</label>
|
||||
<input type="text" class="form-control" id="caldav-url" value="${defaultCaldavUrl}"/>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="caldav-username" class="form-label">
|
||||
${lang('username')}
|
||||
</label>
|
||||
<input type="text" class="form-control" id="caldav-username" value="${defaultCaldavUsername}"/>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="caldav-password" class="form-label">
|
||||
${lang('password')}
|
||||
</label>
|
||||
<input type="password" class="form-control" id="caldav-password" value="${defaultCaldavPassword}"/>
|
||||
</div>
|
||||
|
||||
<div class="alert alert-danger" hidden>
|
||||
<!-- JS -->
|
||||
</div>
|
||||
</div>
|
||||
`);
|
||||
|
||||
const $messageModal = App.Utils.Message.show(lang('caldav_server'), lang('caldav_connection_info_prompt'), [
|
||||
{
|
||||
text: lang('cancel'),
|
||||
click: (event, messageModal) => {
|
||||
messageModal.hide();
|
||||
},
|
||||
},
|
||||
{
|
||||
text: lang('connect'),
|
||||
click: (event, messageModal) => {
|
||||
const providerId = $selectFilterItem.val();
|
||||
|
||||
$messageModal.find('.is-invalid').removeClass('is-invalid');
|
||||
|
||||
const $alert = $messageModal.find('.alert');
|
||||
$alert.text('').prop('hidden', true);
|
||||
|
||||
const $caldavUrl = $container.find('#caldav-url');
|
||||
const caldavUrl = $caldavUrl.val();
|
||||
|
||||
if (!caldavUrl) {
|
||||
$caldavUrl.addClass('is-invalid');
|
||||
return;
|
||||
}
|
||||
|
||||
const $caldavUsername = $container.find('#caldav-username');
|
||||
const caldavUsername = $caldavUsername.val();
|
||||
|
||||
if (!caldavUsername) {
|
||||
$caldavUsername.addClass('is-invalid');
|
||||
return;
|
||||
}
|
||||
|
||||
const $caldavPassword = $container.find('#caldav-password');
|
||||
const caldavPassword = $caldavPassword.val();
|
||||
|
||||
if (!caldavPassword) {
|
||||
$caldavPassword.addClass('is-invalid');
|
||||
return;
|
||||
}
|
||||
|
||||
App.Http.Caldav.connectToServer(providerId, caldavUrl, caldavUsername, caldavPassword).done(
|
||||
(response) => {
|
||||
if (!response.success) {
|
||||
$caldavUrl.addClass('is-invalid');
|
||||
$caldavUsername.addClass('is-invalid');
|
||||
$caldavPassword.addClass('is-invalid');
|
||||
|
||||
$alert.text(lang('login_failed') + ' ' + response.message).prop('hidden', false);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
const $selectedOption = $selectFilterItem.find('option:selected');
|
||||
|
||||
$selectedOption.attr('caldav-sync', '1');
|
||||
|
||||
updateSyncButtons();
|
||||
|
||||
App.Layouts.Backend.displayNotification(lang('sync_calendar_selected'));
|
||||
|
||||
messageModal.hide();
|
||||
},
|
||||
);
|
||||
},
|
||||
},
|
||||
]);
|
||||
|
||||
$messageModal.find('.modal-body').append($container);
|
||||
}
|
||||
|
||||
function disableCaldavSync() {
|
||||
App.Utils.Message.show(lang('disable_sync'), lang('disable_sync_prompt'), [
|
||||
{
|
||||
text: lang('cancel'),
|
||||
click: (event, messageModal) => {
|
||||
messageModal.hide();
|
||||
},
|
||||
},
|
||||
{
|
||||
text: lang('confirm'),
|
||||
click: (event, messageModal) => {
|
||||
// Disable synchronization for selected provider.
|
||||
const providerId = $selectFilterItem.val();
|
||||
|
||||
const provider = vars('available_providers').find(
|
||||
(availableProvider) => Number(availableProvider.id) === Number(providerId),
|
||||
);
|
||||
|
||||
if (!provider) {
|
||||
throw new Error('Provider not found: ' + providerId);
|
||||
}
|
||||
|
||||
provider.settings.caldav_sync = '0';
|
||||
provider.settings.caldav_url = null;
|
||||
provider.settings.caldav_username = null;
|
||||
provider.settings.caldav_password = null;
|
||||
|
||||
App.Http.Caldav.disableProviderSync(provider.id);
|
||||
|
||||
const $selectedOption = $selectFilterItem.find('option:selected');
|
||||
|
||||
$selectedOption.attr('caldav-sync', '0');
|
||||
|
||||
updateSyncButtons();
|
||||
|
||||
messageModal.hide();
|
||||
},
|
||||
},
|
||||
]);
|
||||
}
|
||||
|
||||
function triggerCaldavSync() {
|
||||
const providerId = $selectFilterItem.val();
|
||||
|
||||
App.Http.Caldav.syncWithCaldav(providerId)
|
||||
.done(() => {
|
||||
App.Layouts.Backend.displayNotification(lang('calendar_sync_completed'));
|
||||
$reloadAppointments.trigger('click');
|
||||
})
|
||||
.fail(() => {
|
||||
App.Layouts.Backend.displayNotification(lang('calendar_sync_failed'));
|
||||
})
|
||||
.always(() => {
|
||||
isSyncing = false;
|
||||
});
|
||||
}
|
||||
|
||||
function onSelectFilterItemChange() {
|
||||
updateSyncButtons();
|
||||
}
|
||||
|
||||
function onEnableSyncClick() {
|
||||
const isGoogleSyncFeatureEnabled = vars('google_sync_feature');
|
||||
|
||||
if (!isGoogleSyncFeatureEnabled) {
|
||||
enableCaldavSync();
|
||||
return;
|
||||
}
|
||||
|
||||
App.Utils.Message.show(lang('enable_sync'), lang('sync_method_prompt'), [
|
||||
{
|
||||
text: 'CalDAV Calendar',
|
||||
className: 'btn btn-outline-primary me-auto',
|
||||
click: (event, messageModal) => {
|
||||
messageModal.hide();
|
||||
enableCaldavSync();
|
||||
},
|
||||
},
|
||||
{
|
||||
text: 'Google Calendar',
|
||||
click: (event, messageModal) => {
|
||||
messageModal.hide();
|
||||
enableGoogleSync();
|
||||
},
|
||||
},
|
||||
]);
|
||||
}
|
||||
|
||||
function onDisableSyncClick() {
|
||||
const hasGoogleSync = hasSync('google');
|
||||
|
||||
if (hasGoogleSync) {
|
||||
disableGoogleSync();
|
||||
return;
|
||||
}
|
||||
|
||||
const hasCalSync = hasSync('caldav');
|
||||
|
||||
if (hasCalSync) {
|
||||
disableCaldavSync();
|
||||
}
|
||||
}
|
||||
|
||||
function onTriggerSyncClick() {
|
||||
const hasGoogleSync = hasSync('google');
|
||||
isSyncing = true;
|
||||
|
||||
if (hasGoogleSync) {
|
||||
triggerGoogleSync();
|
||||
return;
|
||||
}
|
||||
|
||||
const hasCalSync = hasSync('caldav');
|
||||
|
||||
if (hasCalSync) {
|
||||
triggerCaldavSync();
|
||||
}
|
||||
}
|
||||
|
||||
function isCurrentlySyncing() {
|
||||
return isSyncing;
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize the module.
|
||||
*/
|
||||
function initialize() {
|
||||
$selectFilterItem.on('change', onSelectFilterItemChange);
|
||||
$enableSync.on('click', onEnableSyncClick);
|
||||
$disableSync.on('click', onDisableSyncClick);
|
||||
$triggerSync.on('click', onTriggerSyncClick);
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', initialize);
|
||||
|
||||
return {
|
||||
initialize,
|
||||
isCurrentlySyncing,
|
||||
};
|
||||
})();
|
||||
1904
assets/js/utils/calendar_table_view.js
Normal file
1904
assets/js/utils/calendar_table_view.js
Normal file
File diff suppressed because it is too large
Load Diff
198
assets/js/utils/date.js
Normal file
198
assets/js/utils/date.js
Normal file
@ -0,0 +1,198 @@
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Easy!Appointments - Online Appointment Scheduler
|
||||
*
|
||||
* @package EasyAppointments
|
||||
* @author A.Tselegidis <alextselegidis@gmail.com>
|
||||
* @copyright Copyright (c) Alex Tselegidis
|
||||
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
|
||||
* @link https://easyappointments.org
|
||||
* @since v1.5.0
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
/**
|
||||
* Date utility.
|
||||
*
|
||||
* This module implements the functionality of dates.
|
||||
*/
|
||||
window.App.Utils.Date = (function () {
|
||||
/**
|
||||
* Format a YYYY-MM-DD HH:mm:ss date string.
|
||||
*
|
||||
* @param {String|Date} dateValue The date string to be formatted.
|
||||
* @param {String} [dateFormatType] The date format type value ("DMY", "MDY" or "YMD").
|
||||
* @param {String} [timeFormatType] The time format type value ("regular", "military").
|
||||
* @param {Boolean} [withHours] Whether to add hours to the returned string.
|
||||
|
||||
* @return {String} Returns the formatted string.
|
||||
*/
|
||||
function format(dateValue, dateFormatType = 'YMD', timeFormatType = 'regular', withHours = false) {
|
||||
const dateMoment = moment(dateValue);
|
||||
|
||||
if (!dateMoment.isValid()) {
|
||||
throw new Error(`Invalid date value provided: ${dateValue}`);
|
||||
}
|
||||
|
||||
let dateFormat;
|
||||
|
||||
switch (dateFormatType) {
|
||||
case 'DMY':
|
||||
dateFormat = 'DD/MM/YYYY';
|
||||
break;
|
||||
|
||||
case 'MDY':
|
||||
dateFormat = 'MM/DD/YYYY';
|
||||
break;
|
||||
|
||||
case 'YMD':
|
||||
dateFormat = 'YYYY/MM/DD';
|
||||
break;
|
||||
|
||||
default:
|
||||
throw new Error(`Invalid date format type provided: ${dateFormatType}`);
|
||||
}
|
||||
|
||||
let timeFormat;
|
||||
|
||||
switch (timeFormatType) {
|
||||
case 'regular':
|
||||
timeFormat = 'h:mm a';
|
||||
break;
|
||||
case 'military':
|
||||
timeFormat = 'HH:mm';
|
||||
break;
|
||||
default:
|
||||
throw new Error(`Invalid time format type provided: ${timeFormatType}`);
|
||||
}
|
||||
|
||||
const format = withHours ? `${dateFormat} ${timeFormat}` : dateFormat;
|
||||
|
||||
return dateMoment.format(format);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the Id of a Weekday using the US week format and day names (Sunday=0) as used in the JS code of the
|
||||
* application, case-insensitive, short and long names supported.
|
||||
*
|
||||
* @param {String} weekDayName The weekday name among Sunday, Monday, Tuesday, Wednesday, Thursday, Friday,
|
||||
* Saturday.
|
||||
|
||||
* @return {Number} Returns the ID of the weekday.
|
||||
*/
|
||||
function getWeekdayId(weekDayName) {
|
||||
let result;
|
||||
|
||||
switch (weekDayName.toLowerCase()) {
|
||||
case 'sunday':
|
||||
case 'sun':
|
||||
result = 0;
|
||||
break;
|
||||
|
||||
case 'monday':
|
||||
case 'mon':
|
||||
result = 1;
|
||||
break;
|
||||
|
||||
case 'tuesday':
|
||||
case 'tue':
|
||||
result = 2;
|
||||
break;
|
||||
|
||||
case 'wednesday':
|
||||
case 'wed':
|
||||
result = 3;
|
||||
break;
|
||||
|
||||
case 'thursday':
|
||||
case 'thu':
|
||||
result = 4;
|
||||
break;
|
||||
|
||||
case 'friday':
|
||||
case 'fri':
|
||||
result = 5;
|
||||
break;
|
||||
|
||||
case 'saturday':
|
||||
case 'sat':
|
||||
result = 6;
|
||||
break;
|
||||
|
||||
default:
|
||||
throw new Error(`Invalid weekday name provided: ${weekDayName}`);
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
/**
|
||||
* Sort a dictionary where keys are weekdays
|
||||
*
|
||||
* @param {Object} weekDictionary A dictionary with weekdays as keys.
|
||||
* @param {Number} startDayId Id of the first day to start sorting (From 0 for sunday to 6 for saturday).
|
||||
|
||||
* @return {Object} Returns a sorted dictionary
|
||||
*/
|
||||
function sortWeekDictionary(weekDictionary, startDayId) {
|
||||
const sortedWeekDictionary = {};
|
||||
|
||||
for (let i = startDayId; i < startDayId + 7; i++) {
|
||||
const weekdayName = getWeekdayName(i % 7);
|
||||
sortedWeekDictionary[weekdayName] = weekDictionary[weekdayName];
|
||||
}
|
||||
|
||||
return sortedWeekDictionary;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the name in lowercase of a Weekday using its Id.
|
||||
*
|
||||
* @param {Number} weekDayId The Id (From 0 for sunday to 6 for saturday).
|
||||
|
||||
* @return {String} Returns the name of the weekday.
|
||||
*/
|
||||
function getWeekdayName(weekDayId) {
|
||||
let result;
|
||||
|
||||
switch (weekDayId) {
|
||||
case 0:
|
||||
result = 'sunday';
|
||||
break;
|
||||
|
||||
case 1:
|
||||
result = 'monday';
|
||||
break;
|
||||
|
||||
case 2:
|
||||
result = 'tuesday';
|
||||
break;
|
||||
|
||||
case 3:
|
||||
result = 'wednesday';
|
||||
break;
|
||||
|
||||
case 4:
|
||||
result = 'thursday';
|
||||
break;
|
||||
|
||||
case 5:
|
||||
result = 'friday';
|
||||
break;
|
||||
|
||||
case 6:
|
||||
result = 'saturday';
|
||||
break;
|
||||
|
||||
default:
|
||||
throw new Error(`Invalid weekday Id provided: ${weekDayId}`);
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
return {
|
||||
format,
|
||||
getWeekdayId,
|
||||
sortWeekDictionary,
|
||||
getWeekdayName,
|
||||
};
|
||||
})();
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user