deving
This commit is contained in:
275
res/assets/js/apps/calendar-init.js
Normal file
275
res/assets/js/apps/calendar-init.js
Normal file
@@ -0,0 +1,275 @@
|
||||
/*========Calender Js=========*/
|
||||
/*==========================*/
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
/*=================*/
|
||||
// Calender Date variable
|
||||
/*=================*/
|
||||
var newDate = new Date();
|
||||
function getDynamicMonth() {
|
||||
getMonthValue = newDate.getMonth();
|
||||
_getUpdatedMonthValue = getMonthValue + 1;
|
||||
if (_getUpdatedMonthValue < 10) {
|
||||
return `0${_getUpdatedMonthValue}`;
|
||||
} else {
|
||||
return `${_getUpdatedMonthValue}`;
|
||||
}
|
||||
}
|
||||
/*=================*/
|
||||
// Calender Modal Elements
|
||||
/*=================*/
|
||||
var getModalTitleEl = document.querySelector("#event-title");
|
||||
var getModalStartDateEl = document.querySelector("#event-start-date");
|
||||
var getModalEndDateEl = document.querySelector("#event-end-date");
|
||||
var getModalAddBtnEl = document.querySelector(".btn-add-event");
|
||||
var getModalUpdateBtnEl = document.querySelector(".btn-update-event");
|
||||
var calendarsEvents = {
|
||||
Danger: "danger",
|
||||
Success: "success",
|
||||
Primary: "primary",
|
||||
Warning: "warning",
|
||||
};
|
||||
/*=====================*/
|
||||
// Calendar Elements and options
|
||||
/*=====================*/
|
||||
var calendarEl = document.querySelector("#calendar");
|
||||
var checkWidowWidth = function () {
|
||||
if (window.innerWidth <= 1199) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
};
|
||||
var calendarHeaderToolbar = {
|
||||
left: "prev next addEventButton",
|
||||
center: "title",
|
||||
right: "dayGridMonth,timeGridWeek,timeGridDay",
|
||||
};
|
||||
var calendarEventsList = [
|
||||
{
|
||||
id: 1,
|
||||
title: "Event Conf.",
|
||||
start: `${newDate.getFullYear()}-${getDynamicMonth()}-01`,
|
||||
extendedProps: { calendar: "Danger" },
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Seminar #4",
|
||||
start: `${newDate.getFullYear()}-${getDynamicMonth()}-07`,
|
||||
end: `${newDate.getFullYear()}-${getDynamicMonth()}-10`,
|
||||
extendedProps: { calendar: "Success" },
|
||||
},
|
||||
{
|
||||
groupId: "999",
|
||||
id: 3,
|
||||
title: "Meeting #5",
|
||||
start: `${newDate.getFullYear()}-${getDynamicMonth()}-09T16:00:00`,
|
||||
extendedProps: { calendar: "Primary" },
|
||||
},
|
||||
{
|
||||
groupId: "999",
|
||||
id: 4,
|
||||
title: "Submission #1",
|
||||
start: `${newDate.getFullYear()}-${getDynamicMonth()}-16T16:00:00`,
|
||||
extendedProps: { calendar: "Warning" },
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: "Seminar #6",
|
||||
start: `${newDate.getFullYear()}-${getDynamicMonth()}-11`,
|
||||
end: `${newDate.getFullYear()}-${getDynamicMonth()}-13`,
|
||||
extendedProps: { calendar: "Danger" },
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: "Meeting 3",
|
||||
start: `${newDate.getFullYear()}-${getDynamicMonth()}-12T10:30:00`,
|
||||
end: `${newDate.getFullYear()}-${getDynamicMonth()}-12T12:30:00`,
|
||||
extendedProps: { calendar: "Success" },
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
title: "Meetup #",
|
||||
start: `${newDate.getFullYear()}-${getDynamicMonth()}-12T12:00:00`,
|
||||
extendedProps: { calendar: "Primary" },
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
title: "Submission",
|
||||
start: `${newDate.getFullYear()}-${getDynamicMonth()}-12T14:30:00`,
|
||||
extendedProps: { calendar: "Warning" },
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
title: "Attend event",
|
||||
start: `${newDate.getFullYear()}-${getDynamicMonth()}-13T07:00:00`,
|
||||
extendedProps: { calendar: "Success" },
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
title: "Project submission #2",
|
||||
start: `${newDate.getFullYear()}-${getDynamicMonth()}-28`,
|
||||
extendedProps: { calendar: "Primary" },
|
||||
},
|
||||
];
|
||||
/*=====================*/
|
||||
// Calendar Select fn.
|
||||
/*=====================*/
|
||||
var calendarSelect = function (info) {
|
||||
getModalAddBtnEl.style.display = "block";
|
||||
getModalUpdateBtnEl.style.display = "none";
|
||||
myModal.show();
|
||||
getModalStartDateEl.value = info.startStr;
|
||||
getModalEndDateEl.value = info.endStr;
|
||||
};
|
||||
/*=====================*/
|
||||
// Calendar AddEvent fn.
|
||||
/*=====================*/
|
||||
var calendarAddEvent = function () {
|
||||
var currentDate = new Date();
|
||||
var dd = String(currentDate.getDate()).padStart(2, "0");
|
||||
var mm = String(currentDate.getMonth() + 1).padStart(2, "0"); //January is 0!
|
||||
var yyyy = currentDate.getFullYear();
|
||||
var combineDate = `${yyyy}-${mm}-${dd}T00:00:00`;
|
||||
getModalAddBtnEl.style.display = "block";
|
||||
getModalUpdateBtnEl.style.display = "none";
|
||||
myModal.show();
|
||||
getModalStartDateEl.value = combineDate;
|
||||
};
|
||||
|
||||
/*=====================*/
|
||||
// Calender Event Function
|
||||
/*=====================*/
|
||||
var calendarEventClick = function (info) {
|
||||
var eventObj = info.event;
|
||||
|
||||
if (eventObj.url) {
|
||||
window.open(eventObj.url);
|
||||
|
||||
info.jsEvent.preventDefault();
|
||||
} else {
|
||||
var getModalEventId = eventObj._def.publicId;
|
||||
var getModalEventLevel = eventObj._def.extendedProps["calendar"];
|
||||
var getModalCheckedRadioBtnEl = document.querySelector(
|
||||
`input[value="${getModalEventLevel}"]`
|
||||
);
|
||||
|
||||
getModalTitleEl.value = eventObj.title;
|
||||
getModalStartDateEl.value = eventObj.startStr.slice(0, 10);
|
||||
getModalEndDateEl.value = eventObj.endStr.slice(0, 10);
|
||||
getModalCheckedRadioBtnEl.checked = true;
|
||||
getModalUpdateBtnEl.setAttribute(
|
||||
"data-fc-event-public-id",
|
||||
getModalEventId
|
||||
);
|
||||
getModalAddBtnEl.style.display = "none";
|
||||
getModalUpdateBtnEl.style.display = "block";
|
||||
myModal.show();
|
||||
}
|
||||
};
|
||||
|
||||
/*=====================*/
|
||||
// Active Calender
|
||||
/*=====================*/
|
||||
var calendar = new FullCalendar.Calendar(calendarEl, {
|
||||
selectable: true,
|
||||
height: checkWidowWidth() ? 900 : 1052,
|
||||
initialView: checkWidowWidth() ? "listWeek" : "dayGridMonth",
|
||||
initialDate: `${newDate.getFullYear()}-${getDynamicMonth()}-07`,
|
||||
headerToolbar: calendarHeaderToolbar,
|
||||
events: calendarEventsList,
|
||||
select: calendarSelect,
|
||||
unselect: function () {
|
||||
console.log("unselected");
|
||||
},
|
||||
customButtons: {
|
||||
addEventButton: {
|
||||
text: "Add Event",
|
||||
click: calendarAddEvent,
|
||||
},
|
||||
},
|
||||
eventClassNames: function ({ event: calendarEvent }) {
|
||||
const getColorValue =
|
||||
calendarsEvents[calendarEvent._def.extendedProps.calendar];
|
||||
return ["event-fc-color fc-bg-" + getColorValue];
|
||||
},
|
||||
|
||||
eventClick: calendarEventClick,
|
||||
windowResize: function (arg) {
|
||||
if (checkWidowWidth()) {
|
||||
calendar.changeView("listWeek");
|
||||
calendar.setOption("height", 900);
|
||||
} else {
|
||||
calendar.changeView("dayGridMonth");
|
||||
calendar.setOption("height", 1052);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
/*=====================*/
|
||||
// Update Calender Event
|
||||
/*=====================*/
|
||||
getModalUpdateBtnEl.addEventListener("click", function () {
|
||||
var getPublicID = this.dataset.fcEventPublicId;
|
||||
var getTitleUpdatedValue = getModalTitleEl.value;
|
||||
var setModalStartDateValue = getModalStartDateEl.value;
|
||||
var setModalEndDateValue = getModalEndDateEl.value;
|
||||
var getEvent = calendar.getEventById(getPublicID);
|
||||
var getModalUpdatedCheckedRadioBtnEl = document.querySelector(
|
||||
'input[name="event-level"]:checked'
|
||||
);
|
||||
|
||||
var getModalUpdatedCheckedRadioBtnValue =
|
||||
getModalUpdatedCheckedRadioBtnEl !== null
|
||||
? getModalUpdatedCheckedRadioBtnEl.value
|
||||
: "";
|
||||
|
||||
getEvent.setProp("title", getTitleUpdatedValue);
|
||||
getEvent.setDates(setModalStartDateValue, setModalEndDateValue);
|
||||
getEvent.setExtendedProp("calendar", getModalUpdatedCheckedRadioBtnValue);
|
||||
myModal.hide();
|
||||
});
|
||||
/*=====================*/
|
||||
// Add Calender Event
|
||||
/*=====================*/
|
||||
getModalAddBtnEl.addEventListener("click", function () {
|
||||
var getModalCheckedRadioBtnEl = document.querySelector(
|
||||
'input[name="event-level"]:checked'
|
||||
);
|
||||
|
||||
var getTitleValue = getModalTitleEl.value;
|
||||
var setModalStartDateValue = getModalStartDateEl.value;
|
||||
var setModalEndDateValue = getModalEndDateEl.value;
|
||||
var getModalCheckedRadioBtnValue =
|
||||
getModalCheckedRadioBtnEl !== null ? getModalCheckedRadioBtnEl.value : "";
|
||||
|
||||
calendar.addEvent({
|
||||
id: 12,
|
||||
title: getTitleValue,
|
||||
start: setModalStartDateValue,
|
||||
end: setModalEndDateValue,
|
||||
allDay: true,
|
||||
extendedProps: { calendar: getModalCheckedRadioBtnValue },
|
||||
});
|
||||
myModal.hide();
|
||||
});
|
||||
/*=====================*/
|
||||
// Calendar Init
|
||||
/*=====================*/
|
||||
calendar.render();
|
||||
var myModal = new bootstrap.Modal(document.getElementById("eventModal"));
|
||||
var modalToggle = document.querySelector(".fc-addEventButton-button ");
|
||||
document
|
||||
.getElementById("eventModal")
|
||||
.addEventListener("hidden.bs.modal", function (event) {
|
||||
getModalTitleEl.value = "";
|
||||
getModalStartDateEl.value = "";
|
||||
getModalEndDateEl.value = "";
|
||||
var getModalIfCheckedRadioBtnEl = document.querySelector(
|
||||
'input[name="event-level"]:checked'
|
||||
);
|
||||
if (getModalIfCheckedRadioBtnEl !== null) {
|
||||
getModalIfCheckedRadioBtnEl.checked = false;
|
||||
}
|
||||
});
|
||||
});
|
||||
162
res/assets/js/apps/chat.js
Normal file
162
res/assets/js/apps/chat.js
Normal file
@@ -0,0 +1,162 @@
|
||||
$(function () {
|
||||
var chatarea = $("#chat");
|
||||
|
||||
$("#chat .message-center a").on("click", function () {
|
||||
var name = $(this).find(".mail-contnet h5").text();
|
||||
var img = $(this).find(".user-img img").attr("src");
|
||||
var id = $(this).attr("data-user-id");
|
||||
var status = $(this).find(".profile-status").attr("data-status");
|
||||
|
||||
if ($(this).hasClass("active")) {
|
||||
$(this).toggleClass("active");
|
||||
$(".chat-windows #user-chat" + id).hide();
|
||||
} else {
|
||||
$(this).toggleClass("active");
|
||||
if ($(".chat-windows #user-chat" + id).length) {
|
||||
$(".chat-windows #user-chat" + id)
|
||||
.removeClass("mini-chat")
|
||||
.show();
|
||||
} else {
|
||||
var msg = msg_receive(
|
||||
"I watched the storm, so beautiful yet terrific."
|
||||
);
|
||||
msg += msg_sent("That is very deep indeed!");
|
||||
var html =
|
||||
"<div class='user-chat' id='user-chat" +
|
||||
id +
|
||||
"' data-user-id='" +
|
||||
id +
|
||||
"'>";
|
||||
html +=
|
||||
"<div class='chat-head'><img src='" +
|
||||
img +
|
||||
"' data-user-id='" +
|
||||
id +
|
||||
"'><span class='status " +
|
||||
status +
|
||||
"'></span><span class='name'>" +
|
||||
name +
|
||||
"</span><span class='opts'><i class='material-icons closeit' data-user-id='" +
|
||||
id +
|
||||
"'>clear</i><i class='material-icons mini-chat' data-user-id='" +
|
||||
id +
|
||||
"'>remove</i></span></div>";
|
||||
html +=
|
||||
"<div class='chat-body'><ul class='chat-list'>" + msg + "</ul></div>";
|
||||
html +=
|
||||
"<div class='chat-footer'><input type='text' data-user-id='" +
|
||||
id +
|
||||
"' placeholder='Type & Enter' class='form-control'></div>";
|
||||
html += "</div>";
|
||||
$(".chat-windows").append(html);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// *******************************************************************
|
||||
// Chat Application
|
||||
// *******************************************************************
|
||||
|
||||
$(".search-chat").on("keyup", function () {
|
||||
var value = $(this).val().toLowerCase();
|
||||
$(".chat-users li").filter(function () {
|
||||
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
|
||||
});
|
||||
});
|
||||
|
||||
$(".app-chat .chat-user ").on("click", function (event) {
|
||||
if ($(this).hasClass(".active")) {
|
||||
return false;
|
||||
} else {
|
||||
var findChat = $(this).attr("data-user-id");
|
||||
var personName = $(this).find(".chat-title").text();
|
||||
var personImage = $(this).find("img").attr("src");
|
||||
var hideTheNonSelectedContent = $(this)
|
||||
.parents(".chat-application")
|
||||
.find(".chat-not-selected")
|
||||
.hide()
|
||||
.siblings(".chatting-box")
|
||||
.show();
|
||||
var showChatInnerContent = $(this)
|
||||
.parents(".chat-application")
|
||||
.find(".chat-container .chat-box-inner-part")
|
||||
.show();
|
||||
|
||||
if (window.innerWidth <= 767) {
|
||||
$(".chat-container .current-chat-user-name .name").html(
|
||||
personName.split(" ")[0]
|
||||
);
|
||||
} else if (window.innerWidth > 767) {
|
||||
$(".chat-container .current-chat-user-name .name").html(personName);
|
||||
}
|
||||
$(".chat-container .current-chat-user-name img").attr("src", personImage);
|
||||
$(".chat").removeClass("active-chat");
|
||||
$(".user-chat-box .chat-user").removeClass("bg-light-subtle");
|
||||
$(this).addClass("bg-light-subtle");
|
||||
$(".chat[data-user-id = " + findChat + "]").addClass("active-chat");
|
||||
}
|
||||
if ($(this).parents(".user-chat-box").hasClass("user-list-box-show")) {
|
||||
$(this).parents(".user-chat-box").removeClass("user-list-box-show");
|
||||
}
|
||||
$(".chat-meta-user").addClass("chat-active");
|
||||
$(".chat-send-message-footer").addClass("chat-active");
|
||||
});
|
||||
|
||||
// Send Messages
|
||||
$(".message-type-box").on("keydown", function (event) {
|
||||
if (event.key === "Enter") {
|
||||
// Start getting time
|
||||
var now = new Date();
|
||||
var hh = now.getHours();
|
||||
var min = now.getMinutes();
|
||||
|
||||
var ampm = hh >= 12 ? "pm" : "am";
|
||||
hh = hh % 12;
|
||||
hh = hh ? hh : 12;
|
||||
hh = hh < 10 ? "0" + hh : hh;
|
||||
min = min < 10 ? "0" + min : min;
|
||||
|
||||
var time = hh + ":" + min + " " + ampm;
|
||||
// End
|
||||
|
||||
var chatInput = $(this);
|
||||
var chatMessageValue = chatInput.val();
|
||||
if (chatMessageValue === "") {
|
||||
return;
|
||||
}
|
||||
$messageHtml =
|
||||
'<div class="text-end mb-3"> <div class="p-2 bg-info-subtle text-dark rounded-1 d-inline-block fs-3">' +
|
||||
chatMessageValue +
|
||||
'</div> <div class="d-block fs-2">' +
|
||||
time +
|
||||
"</div> </div>";
|
||||
var appendMessage = $(this)
|
||||
.parents(".chat-application")
|
||||
.find(".active-chat")
|
||||
.append($messageHtml);
|
||||
var clearChatInput = chatInput.val("");
|
||||
}
|
||||
});
|
||||
|
||||
// *******************************************************************
|
||||
// Email Application
|
||||
// *******************************************************************
|
||||
|
||||
$(document).ready(function () {
|
||||
$(".back-btn").click(function () {
|
||||
$(".app-email-chatting-box").hide();
|
||||
});
|
||||
$(".chat-user").click(function () {
|
||||
$(".app-email-chatting-box").show();
|
||||
});
|
||||
});
|
||||
|
||||
// *******************************************************************
|
||||
// chat Offcanvas
|
||||
// *******************************************************************
|
||||
|
||||
$("body").on("click", ".chat-menu", function () {
|
||||
$(".parent-chat-box").toggleClass("app-chat-right");
|
||||
$(this).toggleClass("app-chat-active");
|
||||
});
|
||||
356
res/assets/js/apps/contact.js
Normal file
356
res/assets/js/apps/contact.js
Normal file
@@ -0,0 +1,356 @@
|
||||
$(function () {
|
||||
function checkall(clickchk, relChkbox) {
|
||||
var checker = $("#" + clickchk);
|
||||
var multichk = $("." + relChkbox);
|
||||
|
||||
checker.click(function () {
|
||||
multichk.prop("checked", $(this).prop("checked"));
|
||||
$(".show-btn").toggle();
|
||||
});
|
||||
}
|
||||
|
||||
checkall("contact-check-all", "contact-chkbox");
|
||||
|
||||
$("#input-search").on("keyup", function () {
|
||||
var rex = new RegExp($(this).val(), "i");
|
||||
$(".search-table .search-items:not(.header-item)").hide();
|
||||
$(".search-table .search-items:not(.header-item)")
|
||||
.filter(function () {
|
||||
return rex.test($(this).text());
|
||||
})
|
||||
.show();
|
||||
});
|
||||
|
||||
$("#btn-add-contact").on("click", function (event) {
|
||||
$("#addContactModal #btn-add").show();
|
||||
$("#addContactModal #btn-edit").hide();
|
||||
$("#addContactModal").modal("show");
|
||||
});
|
||||
|
||||
function deleteContact() {
|
||||
$(".delete").on("click", function (event) {
|
||||
event.preventDefault();
|
||||
/* Act on the event */
|
||||
$(this).parents(".search-items").remove();
|
||||
});
|
||||
}
|
||||
|
||||
function addContact() {
|
||||
$("#btn-add").click(function () {
|
||||
var getParent = $(this).parents(".modal-content");
|
||||
|
||||
var $_name = getParent.find("#c-name");
|
||||
var $_email = getParent.find("#c-email");
|
||||
var $_occupation = getParent.find("#c-occupation");
|
||||
var $_phone = getParent.find("#c-phone");
|
||||
var $_location = getParent.find("#c-location");
|
||||
|
||||
var $_getValidationField =
|
||||
document.getElementsByClassName("validation-text");
|
||||
var reg = /^.+@[^\.].*\.[a-z]{2,}$/;
|
||||
var phoneReg = /^\d*\.?\d*$/;
|
||||
|
||||
var $_nameValue = $_name.val();
|
||||
var $_emailValue = $_email.val();
|
||||
var $_occupationValue = $_occupation.val();
|
||||
var $_phoneValue = $_phone.val();
|
||||
var $_locationValue = $_location.val();
|
||||
|
||||
if ($_nameValue == "") {
|
||||
$_getValidationField[0].innerHTML = "Name must be filled out";
|
||||
$_getValidationField[0].style.display = "block";
|
||||
} else {
|
||||
$_getValidationField[0].style.display = "none";
|
||||
}
|
||||
|
||||
if ($_emailValue == "") {
|
||||
$_getValidationField[1].innerHTML = "Email Id must be filled out";
|
||||
$_getValidationField[1].style.display = "block";
|
||||
} else if (reg.test($_emailValue) == false) {
|
||||
$_getValidationField[1].innerHTML = "Invalid Email";
|
||||
$_getValidationField[1].style.display = "block";
|
||||
} else {
|
||||
$_getValidationField[1].style.display = "none";
|
||||
}
|
||||
|
||||
if ($_phoneValue == "") {
|
||||
$_getValidationField[2].innerHTML = "Invalid (Enter 10 Digits)";
|
||||
$_getValidationField[2].style.display = "block";
|
||||
} else if (phoneReg.test($_phoneValue) == false) {
|
||||
$_getValidationField[2].innerHTML = "Please Enter A numeric value";
|
||||
$_getValidationField[2].style.display = "block";
|
||||
} else {
|
||||
$_getValidationField[2].style.display = "none";
|
||||
}
|
||||
|
||||
if (
|
||||
$_nameValue == "" ||
|
||||
$_emailValue == "" ||
|
||||
reg.test($_emailValue) == false ||
|
||||
$_phoneValue == "" ||
|
||||
phoneReg.test($_phoneValue) == false
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
|
||||
var today = new Date();
|
||||
var dd = String(today.getDate()).padStart(2, "0");
|
||||
var mm = String(today.getMonth()); //January is 0!
|
||||
var time = String(today.getTime());
|
||||
var yyyy = today.getFullYear();
|
||||
var monthNames = [
|
||||
"Jan",
|
||||
"Feb",
|
||||
"Mar",
|
||||
"Apr",
|
||||
"May",
|
||||
"Jun",
|
||||
"Jul",
|
||||
"Aug",
|
||||
"Sep",
|
||||
"Oct",
|
||||
"Nov",
|
||||
"Dec",
|
||||
];
|
||||
today = dd + " " + monthNames[mm] + " " + yyyy;
|
||||
var cdate = dd + mm + time;
|
||||
|
||||
$html =
|
||||
'<tr class="search-items">' +
|
||||
"<td>" +
|
||||
'<div class="n-chk align-self-center text-center">' +
|
||||
'<div class="form-check">' +
|
||||
'<input type="checkbox" class="form-check-input contact-chkbox primary" id="' +
|
||||
cdate +
|
||||
'">' +
|
||||
'<label class="form-check-label" for="' +
|
||||
cdate +
|
||||
'"></label>' +
|
||||
"</div>" +
|
||||
"</div>" +
|
||||
"</td>" +
|
||||
"<td>" +
|
||||
'<div class="d-flex align-items-center">' +
|
||||
'<img src="../assets/images/profile/user-1.jpg" alt="avatar" class="rounded-circle" width="35">' +
|
||||
'<div class="ms-3">' +
|
||||
'<div class="user-meta-info">' +
|
||||
'<h6 class="user-name mb-0" data-name=' +
|
||||
$_nameValue +
|
||||
">" +
|
||||
$_nameValue +
|
||||
"</h6>" +
|
||||
'<span class="user-work fs-3" data-occupation=' +
|
||||
$_occupationValue +
|
||||
">" +
|
||||
$_occupationValue +
|
||||
"</span>" +
|
||||
"</div>" +
|
||||
"</div>" +
|
||||
"</div>" +
|
||||
"</td>" +
|
||||
"<td>" +
|
||||
'<span class="usr-email-addr" data-email=' +
|
||||
$_emailValue +
|
||||
">" +
|
||||
$_emailValue +
|
||||
"</span>" +
|
||||
"</td>" +
|
||||
"<td>" +
|
||||
'<span class="usr-location" data-location=' +
|
||||
$_locationValue +
|
||||
">" +
|
||||
$_locationValue +
|
||||
"</span>" +
|
||||
"</td>" +
|
||||
"<td>" +
|
||||
'<span class="usr-ph-no" data-phone=' +
|
||||
$_phoneValue +
|
||||
">" +
|
||||
$_phoneValue +
|
||||
"</span>" +
|
||||
"</td>" +
|
||||
"<td>" +
|
||||
'<div class="action-btn">' +
|
||||
'<a href="javascript:void(0)" class="text-info edit"><i class="ti ti-eye fs-5"></i></a>' +
|
||||
'<a href="javascript:void(0)" class="text-dark delete ms-2"><i class="ti ti-trash fs-5"></i></a>' +
|
||||
"</div>" +
|
||||
"</td>" +
|
||||
"</tr>";
|
||||
|
||||
$(".search-table > tbody >tr:first").before($html);
|
||||
$("#addContactModal").modal("hide");
|
||||
|
||||
var $_setNameValueEmpty = $_name.val("");
|
||||
var $_setEmailValueEmpty = $_email.val("");
|
||||
var $_setOccupationValueEmpty = $_occupation.val("");
|
||||
var $_setPhoneValueEmpty = $_phone.val("");
|
||||
var $_setLocationValueEmpty = $_location.val("");
|
||||
|
||||
deleteContact();
|
||||
editContact();
|
||||
checkall("contact-check-all", "contact-chkbox");
|
||||
});
|
||||
}
|
||||
|
||||
$("#addContactModal").on("hidden.bs.modal", function (e) {
|
||||
var $_name = document.getElementById("c-name");
|
||||
var $_email = document.getElementById("c-email");
|
||||
var $_occupation = document.getElementById("c-occupation");
|
||||
var $_phone = document.getElementById("c-phone");
|
||||
var $_location = document.getElementById("c-location");
|
||||
var $_getValidationField =
|
||||
document.getElementsByClassName("validation-text");
|
||||
|
||||
var $_setNameValueEmpty = ($_name.value = "");
|
||||
var $_setEmailValueEmpty = ($_email.value = "");
|
||||
var $_setOccupationValueEmpty = ($_occupation.value = "");
|
||||
var $_setPhoneValueEmpty = ($_phone.value = "");
|
||||
var $_setLocationValueEmpty = ($_location.value = "");
|
||||
|
||||
for (var i = 0; i < $_getValidationField.length; i++) {
|
||||
e.preventDefault();
|
||||
$_getValidationField[i].style.display = "none";
|
||||
}
|
||||
});
|
||||
|
||||
function editContact() {
|
||||
$(".edit").on("click", function (event) {
|
||||
$("#addContactModal #btn-add").hide();
|
||||
$("#addContactModal #btn-edit").show();
|
||||
|
||||
// Get Parents
|
||||
var getParentItem = $(this).parents(".search-items");
|
||||
var getModal = $("#addContactModal");
|
||||
|
||||
// Get List Item Fields
|
||||
var $_name = getParentItem.find(".user-name");
|
||||
var $_email = getParentItem.find(".usr-email-addr");
|
||||
var $_occupation = getParentItem.find(".user-work");
|
||||
var $_phone = getParentItem.find(".usr-ph-no");
|
||||
var $_location = getParentItem.find(".usr-location");
|
||||
|
||||
// Get Attributes
|
||||
var $_nameAttrValue = $_name.attr("data-name");
|
||||
var $_emailAttrValue = $_email.attr("data-email");
|
||||
var $_occupationAttrValue = $_occupation.attr("data-occupation");
|
||||
var $_phoneAttrValue = $_phone.attr("data-phone");
|
||||
var $_locationAttrValue = $_location.attr("data-location");
|
||||
|
||||
// Get Modal Attributes
|
||||
var $_getModalNameInput = getModal.find("#c-name");
|
||||
var $_getModalEmailInput = getModal.find("#c-email");
|
||||
var $_getModalOccupationInput = getModal.find("#c-occupation");
|
||||
var $_getModalPhoneInput = getModal.find("#c-phone");
|
||||
var $_getModalLocationInput = getModal.find("#c-location");
|
||||
|
||||
// Set Modal Field's Value
|
||||
var $_setModalNameValue = $_getModalNameInput.val($_nameAttrValue);
|
||||
var $_setModalEmailValue = $_getModalEmailInput.val($_emailAttrValue);
|
||||
var $_setModalOccupationValue = $_getModalOccupationInput.val(
|
||||
$_occupationAttrValue
|
||||
);
|
||||
var $_setModalPhoneValue = $_getModalPhoneInput.val($_phoneAttrValue);
|
||||
var $_setModalLocationValue =
|
||||
$_getModalLocationInput.val($_locationAttrValue);
|
||||
|
||||
$("#addContactModal").modal("show");
|
||||
|
||||
$("#btn-edit").click(function () {
|
||||
var getParent = $(this).parents(".modal-content");
|
||||
|
||||
var $_getInputName = getParent.find("#c-name");
|
||||
var $_getInputNmail = getParent.find("#c-email");
|
||||
var $_getInputNccupation = getParent.find("#c-occupation");
|
||||
var $_getInputNhone = getParent.find("#c-phone");
|
||||
var $_getInputNocation = getParent.find("#c-location");
|
||||
|
||||
var $_nameValue = $_getInputName.val();
|
||||
var $_emailValue = $_getInputNmail.val();
|
||||
var $_occupationValue = $_getInputNccupation.val();
|
||||
var $_phoneValue = $_getInputNhone.val();
|
||||
var $_locationValue = $_getInputNocation.val();
|
||||
|
||||
var setUpdatedNameValue = $_name.text($_nameValue);
|
||||
var setUpdatedEmailValue = $_email.text($_emailValue);
|
||||
var setUpdatedOccupationValue = $_occupation.text($_occupationValue);
|
||||
var setUpdatedPhoneValue = $_phone.text($_phoneValue);
|
||||
var setUpdatedLocationValue = $_location.text($_locationValue);
|
||||
|
||||
var setUpdatedAttrNameValue = $_name.attr("data-name", $_nameValue);
|
||||
var setUpdatedAttrEmailValue = $_email.attr("data-email", $_emailValue);
|
||||
var setUpdatedAttrOccupationValue = $_occupation.attr(
|
||||
"data-occupation",
|
||||
$_occupationValue
|
||||
);
|
||||
var setUpdatedAttrPhoneValue = $_phone.attr("data-phone", $_phoneValue);
|
||||
var setUpdatedAttrLocationValue = $_location.attr(
|
||||
"data-location",
|
||||
$_locationValue
|
||||
);
|
||||
$("#addContactModal").modal("hide");
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
$(".delete-multiple").on("click", function () {
|
||||
var inboxCheckboxParents = $(".contact-chkbox:checked").parents(
|
||||
".search-items"
|
||||
);
|
||||
inboxCheckboxParents.remove();
|
||||
});
|
||||
|
||||
deleteContact();
|
||||
addContact();
|
||||
editContact();
|
||||
});
|
||||
|
||||
// Validation Process
|
||||
|
||||
var $_getValidationField = document.getElementsByClassName("validation-text");
|
||||
var reg = /^.+@[^\.].*\.[a-z]{2,}$/;
|
||||
var phoneReg = /^\d{10}$/;
|
||||
|
||||
getNameInput = document.getElementById("c-name");
|
||||
|
||||
getNameInput.addEventListener("input", function () {
|
||||
getNameInputValue = this.value;
|
||||
|
||||
if (getNameInputValue == "") {
|
||||
$_getValidationField[0].innerHTML = "Name Required";
|
||||
$_getValidationField[0].style.display = "block";
|
||||
} else {
|
||||
$_getValidationField[0].style.display = "none";
|
||||
}
|
||||
});
|
||||
|
||||
getEmailInput = document.getElementById("c-email");
|
||||
|
||||
getEmailInput.addEventListener("input", function () {
|
||||
getEmailInputValue = this.value;
|
||||
|
||||
if (getEmailInputValue == "") {
|
||||
$_getValidationField[1].innerHTML = "Email Required";
|
||||
$_getValidationField[1].style.display = "block";
|
||||
} else if (reg.test(getEmailInputValue) == false) {
|
||||
$_getValidationField[1].innerHTML = "Invalid Email";
|
||||
$_getValidationField[1].style.display = "block";
|
||||
} else {
|
||||
$_getValidationField[1].style.display = "none";
|
||||
}
|
||||
});
|
||||
|
||||
getPhoneInput = document.getElementById("c-phone");
|
||||
|
||||
getPhoneInput.addEventListener("input", function () {
|
||||
getPhoneInputValue = this.value;
|
||||
|
||||
if (getPhoneInputValue == "") {
|
||||
$_getValidationField[2].innerHTML = "Phone Number Required";
|
||||
$_getValidationField[2].style.display = "block";
|
||||
} else if (phoneReg.test(getPhoneInputValue) == false) {
|
||||
$_getValidationField[2].innerHTML = "Invalid (Enter 10 Digits)";
|
||||
$_getValidationField[2].style.display = "block";
|
||||
} else {
|
||||
$_getValidationField[2].style.display = "none";
|
||||
}
|
||||
});
|
||||
13
res/assets/js/apps/ecommerce.js
Normal file
13
res/assets/js/apps/ecommerce.js
Normal file
@@ -0,0 +1,13 @@
|
||||
$(function () {
|
||||
// Checkout
|
||||
$(function () {
|
||||
$(".billing-address").click(function () {
|
||||
$(".billing-address-content").hide();
|
||||
});
|
||||
$(".billing-address").click(function () {
|
||||
$(".payment-method-list").show();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
38
res/assets/js/apps/edit-product.js
Normal file
38
res/assets/js/apps/edit-product.js
Normal file
@@ -0,0 +1,38 @@
|
||||
var chart_bounce_rate = {
|
||||
series: [
|
||||
{
|
||||
name: "Sales",
|
||||
data: [20, 15, 30, 25, 10, 18, 20, 25, 10],
|
||||
},
|
||||
],
|
||||
chart: {
|
||||
fontFamily: "inherit",
|
||||
height: 80,
|
||||
type: "bar",
|
||||
offsetX: -10,
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
sparkline: {
|
||||
enabled: true,
|
||||
},
|
||||
},
|
||||
colors: ["var(--bs-primary)"],
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
columnWidth: "55%",
|
||||
endingShape: "flat",
|
||||
borderRadius: 4,
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
theme: "dark",
|
||||
followCursor: true,
|
||||
},
|
||||
};
|
||||
var chart_line_basic = new ApexCharts(
|
||||
document.querySelector("#sales"),
|
||||
chart_bounce_rate
|
||||
);
|
||||
chart_line_basic.render();
|
||||
63
res/assets/js/apps/invoice.js
Normal file
63
res/assets/js/apps/invoice.js
Normal file
@@ -0,0 +1,63 @@
|
||||
$(function () {
|
||||
$(".search-invoice").on("keyup", function () {
|
||||
var value = $(this).val().toLowerCase();
|
||||
$(".invoice-users li").filter(function () {
|
||||
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
$("#custom-invoice > #printableArea:first").show();
|
||||
|
||||
// Print
|
||||
$(".print-page").click(function () {
|
||||
var mode = "iframe"; //popup
|
||||
var close = mode == "popup";
|
||||
var options = {
|
||||
mode: mode,
|
||||
popClose: close,
|
||||
};
|
||||
$("div#printableArea:first").printArea(options);
|
||||
});
|
||||
|
||||
var $btns = $(".listing-user").click(function () {
|
||||
var getDataInvoiceAttr = $(this).attr("data-invoice-id");
|
||||
var getParentDiv = $(this).parents(".invoice-application");
|
||||
var getParentInvListContainer = $(this).parents(".app-invoice");
|
||||
|
||||
var $el = $("." + this.id).show();
|
||||
$("#custom-invoice > div").not($el).hide();
|
||||
var setInvoiceNumber = getParentDiv
|
||||
.find(".invoice-inner-part .invoice-number")
|
||||
.text("#" + getDataInvoiceAttr);
|
||||
|
||||
var hideTheNonSelectedContent = $(this)
|
||||
.parents(".invoice-application")
|
||||
.find(".chat-not-selected")
|
||||
.hide()
|
||||
.siblings(".invoiceing-box")
|
||||
.show();
|
||||
var showInvContentSection = getParentDiv
|
||||
.find(".invoice-inner-part #custom-invoice")
|
||||
.css("display", "block");
|
||||
$btns.removeClass("bg-light-subtle");
|
||||
$(this).addClass("bg-light-subtle");
|
||||
|
||||
if ($(".invoiceing-box").css("display") == "block") {
|
||||
$(".right-part.invoice-box").css("height", "100%");
|
||||
}
|
||||
|
||||
// Print
|
||||
$(".print-page").click(function () {
|
||||
var mode = "iframe"; //popup
|
||||
var close = mode == "popup";
|
||||
var options = {
|
||||
mode: mode,
|
||||
popClose: close,
|
||||
};
|
||||
$("div#printableArea").printArea(options);
|
||||
});
|
||||
|
||||
var myDiv = document.getElementsByClassName("invoice-inner-part")[0];
|
||||
myDiv.scrollTop = 0;
|
||||
});
|
||||
238
res/assets/js/apps/jquery.PrintArea.js
Normal file
238
res/assets/js/apps/jquery.PrintArea.js
Normal file
@@ -0,0 +1,238 @@
|
||||
(function ($) {
|
||||
var counter = 0;
|
||||
var modes = { iframe: "iframe", popup: "popup" };
|
||||
var standards = { strict: "strict", loose: "loose", html5: "html5" };
|
||||
var defaults = {
|
||||
mode: modes.iframe,
|
||||
standard: standards.html5,
|
||||
popHt: 500,
|
||||
popWd: 400,
|
||||
popX: 200,
|
||||
popY: 200,
|
||||
popTitle: "",
|
||||
popClose: false,
|
||||
extraCss: "",
|
||||
extraHead: "",
|
||||
retainAttr: ["id", "class", "style"],
|
||||
};
|
||||
|
||||
var settings = {}; //global settings
|
||||
|
||||
$.fn.printArea = function (options) {
|
||||
$.extend(settings, defaults, options);
|
||||
|
||||
counter++;
|
||||
var idPrefix = "printArea_";
|
||||
$("[id^=" + idPrefix + "]").remove();
|
||||
|
||||
settings.id = idPrefix + counter;
|
||||
|
||||
var $printSource = $(this);
|
||||
|
||||
var PrintAreaWindow = PrintArea.getPrintWindow();
|
||||
|
||||
PrintArea.write(PrintAreaWindow.doc, $printSource);
|
||||
|
||||
setTimeout(function () {
|
||||
PrintArea.print(PrintAreaWindow);
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
var PrintArea = {
|
||||
print: function (PAWindow) {
|
||||
var paWindow = PAWindow.win;
|
||||
|
||||
$(PAWindow.doc).ready(function () {
|
||||
paWindow.focus();
|
||||
paWindow.print();
|
||||
|
||||
if (settings.mode == modes.popup && settings.popClose)
|
||||
setTimeout(function () {
|
||||
paWindow.close();
|
||||
}, 2000);
|
||||
});
|
||||
},
|
||||
write: function (PADocument, $ele) {
|
||||
PADocument.open();
|
||||
PADocument.write(
|
||||
PrintArea.docType() +
|
||||
"<html>" +
|
||||
PrintArea.getHead() +
|
||||
PrintArea.getBody($ele) +
|
||||
"</html>"
|
||||
);
|
||||
PADocument.close();
|
||||
},
|
||||
docType: function () {
|
||||
if (settings.mode == modes.iframe) return "";
|
||||
|
||||
if (settings.standard == standards.html5) return "<!DOCTYPE html>";
|
||||
|
||||
var transitional =
|
||||
settings.standard == standards.loose ? " Transitional" : "";
|
||||
var dtd = settings.standard == standards.loose ? "loose" : "strict";
|
||||
|
||||
return (
|
||||
'<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01' +
|
||||
transitional +
|
||||
'//EN" "http://www.w3.org/TR/html4/' +
|
||||
dtd +
|
||||
'.dtd">'
|
||||
);
|
||||
},
|
||||
getHead: function () {
|
||||
var extraHead = "";
|
||||
var links = "";
|
||||
|
||||
if (settings.extraHead)
|
||||
settings.extraHead.replace(/([^,]+)/g, function (m) {
|
||||
extraHead += m;
|
||||
});
|
||||
|
||||
$(document)
|
||||
.find("link")
|
||||
.filter(function () {
|
||||
// Requirement: <link> element MUST have rel="stylesheet" to be considered in print document
|
||||
var relAttr = $(this).attr("rel");
|
||||
return (
|
||||
($.type(relAttr) === "undefined") == false &&
|
||||
relAttr.toLowerCase() == "stylesheet"
|
||||
);
|
||||
})
|
||||
.filter(function () {
|
||||
// Include if media is undefined, empty, print or all
|
||||
var mediaAttr = $(this).attr("media");
|
||||
return (
|
||||
$.type(mediaAttr) === "undefined" ||
|
||||
mediaAttr == "" ||
|
||||
mediaAttr.toLowerCase() == "print" ||
|
||||
mediaAttr.toLowerCase() == "all"
|
||||
);
|
||||
})
|
||||
.each(function () {
|
||||
links +=
|
||||
'<link type="text/css" rel="stylesheet" href="' +
|
||||
$(this).attr("href") +
|
||||
'" >';
|
||||
});
|
||||
if (settings.extraCss)
|
||||
settings.extraCss.replace(/([^,\s]+)/g, function (m) {
|
||||
links += '<link type="text/css" rel="stylesheet" href="' + m + '">';
|
||||
});
|
||||
|
||||
return (
|
||||
"<head><title>" +
|
||||
settings.popTitle +
|
||||
"</title>" +
|
||||
extraHead +
|
||||
links +
|
||||
"</head>"
|
||||
);
|
||||
},
|
||||
getBody: function (elements) {
|
||||
var htm = "";
|
||||
var attrs = settings.retainAttr;
|
||||
elements.each(function () {
|
||||
var ele = PrintArea.getFormData($(this));
|
||||
|
||||
var attributes = "";
|
||||
for (var x = 0; x < attrs.length; x++) {
|
||||
var eleAttr = $(ele).attr(attrs[x]);
|
||||
if (eleAttr)
|
||||
attributes +=
|
||||
(attributes.length > 0 ? " " : "") +
|
||||
attrs[x] +
|
||||
"='" +
|
||||
eleAttr +
|
||||
"'";
|
||||
}
|
||||
|
||||
htm += "<div " + attributes + ">" + $(ele).html() + "</div>";
|
||||
});
|
||||
|
||||
return "<body>" + htm + "</body>";
|
||||
},
|
||||
getFormData: function (ele) {
|
||||
var copy = ele.clone();
|
||||
var copiedInputs = $("input,select,textarea", copy);
|
||||
$("input,select,textarea", ele).each(function (i) {
|
||||
var typeInput = $(this).attr("type");
|
||||
if ($.type(typeInput) === "undefined")
|
||||
typeInput = $(this).is("select")
|
||||
? "select"
|
||||
: $(this).is("textarea")
|
||||
? "textarea"
|
||||
: "";
|
||||
var copiedInput = copiedInputs.eq(i);
|
||||
|
||||
if (typeInput == "radio" || typeInput == "checkbox")
|
||||
copiedInput.attr("checked", $(this).is(":checked"));
|
||||
else if (typeInput == "text") copiedInput.attr("value", $(this).val());
|
||||
else if (typeInput == "select")
|
||||
$(this)
|
||||
.find("option")
|
||||
.each(function (i) {
|
||||
if ($(this).is(":selected"))
|
||||
$("option", copiedInput).eq(i).attr("selected", true);
|
||||
});
|
||||
else if (typeInput == "textarea") copiedInput.text($(this).val());
|
||||
});
|
||||
return copy;
|
||||
},
|
||||
getPrintWindow: function () {
|
||||
switch (settings.mode) {
|
||||
case modes.iframe:
|
||||
var f = new PrintArea.Iframe();
|
||||
return { win: f.contentWindow || f, doc: f.doc };
|
||||
case modes.popup:
|
||||
var p = new PrintArea.Popup();
|
||||
return { win: p, doc: p.doc };
|
||||
}
|
||||
},
|
||||
Iframe: function () {
|
||||
var frameId = settings.id;
|
||||
var iframeStyle =
|
||||
"border:0;position:absolute;width:0px;height:0px;right:0px;top:0px;";
|
||||
var iframe;
|
||||
|
||||
try {
|
||||
iframe = document.createElement("iframe");
|
||||
document.body.appendChild(iframe);
|
||||
$(iframe).attr({
|
||||
style: iframeStyle,
|
||||
id: frameId,
|
||||
src: "#" + new Date().getTime(),
|
||||
});
|
||||
iframe.doc = null;
|
||||
iframe.doc = iframe.contentDocument
|
||||
? iframe.contentDocument
|
||||
: iframe.contentWindow
|
||||
? iframe.contentWindow.document
|
||||
: iframe.document;
|
||||
} catch (e) {
|
||||
throw e + ". iframes may not be supported in this browser.";
|
||||
}
|
||||
|
||||
if (iframe.doc == null) throw "Cannot find document.";
|
||||
|
||||
return iframe;
|
||||
},
|
||||
Popup: function () {
|
||||
var windowAttr =
|
||||
"location=yes,statusbar=no,directories=no,menubar=no,titlebar=no,toolbar=no,dependent=no";
|
||||
windowAttr += ",width=" + settings.popWd + ",height=" + settings.popHt;
|
||||
windowAttr +=
|
||||
",resizable=yes,screenX=" +
|
||||
settings.popX +
|
||||
",screenY=" +
|
||||
settings.popY +
|
||||
",personalbar=no,scrollbars=yes";
|
||||
|
||||
var newWin = window.open("", "_blank", windowAttr);
|
||||
|
||||
newWin.doc = newWin.document;
|
||||
|
||||
return newWin;
|
||||
},
|
||||
};
|
||||
})(jQuery);
|
||||
386
res/assets/js/apps/kanban.js
Normal file
386
res/assets/js/apps/kanban.js
Normal file
@@ -0,0 +1,386 @@
|
||||
$(function () {
|
||||
// ----------------------------------------------------------------------
|
||||
// draggble item
|
||||
// ----------------------------------------------------------------------
|
||||
function kanbanSortable() {
|
||||
$('[data-sortable="true"]').sortable({
|
||||
connectWith: ".connect-sorting-content",
|
||||
items: ".card",
|
||||
cursor: "move",
|
||||
placeholder: "ui-state-highlight",
|
||||
refreshPosition: true,
|
||||
stop: function (event, ui) {
|
||||
var parent_ui = ui.item.parent().attr("data-item");
|
||||
},
|
||||
update: function (event, ui) {
|
||||
console.log(ui);
|
||||
console.log(ui.item);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
// clear all task on click
|
||||
// ----------------------------------------------------------------------
|
||||
function clearItem() {
|
||||
$(".list-clear-all")
|
||||
.off("click")
|
||||
.on("click", function (event) {
|
||||
event.preventDefault();
|
||||
$(this)
|
||||
.parents('[data-action="sorting"]')
|
||||
.find(".connect-sorting-content .card")
|
||||
.remove();
|
||||
});
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
// add task and open modal
|
||||
// ----------------------------------------------------------------------
|
||||
function addKanbanItem() {
|
||||
$(".addTask").on("click", function (event) {
|
||||
event.preventDefault();
|
||||
getParentElement = $(this)
|
||||
.parents('[data-action="sorting"]')
|
||||
.attr("data-item");
|
||||
$(".edit-task-title").hide();
|
||||
$(".add-task-title").show();
|
||||
$('[data-btn-action="addTask"]').show();
|
||||
$('[data-btn-action="editTask"]').hide();
|
||||
$("#addItemModal").modal("show");
|
||||
kanban_add(getParentElement);
|
||||
});
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
// add default item
|
||||
// ----------------------------------------------------------------------
|
||||
function kanban_add(getParent) {
|
||||
$('[data-btn-action="addTask"]')
|
||||
.off("click")
|
||||
.on("click", function (event) {
|
||||
getAddBtnClass = $(this).attr("class").split(" ")[1];
|
||||
|
||||
var today = new Date();
|
||||
var dd = String(today.getDate()).padStart(2, "0");
|
||||
var mm = String(today.getMonth());
|
||||
|
||||
var monthNames = [
|
||||
"Jan",
|
||||
"Feb",
|
||||
"Mar",
|
||||
"Apr",
|
||||
"May",
|
||||
"Jun",
|
||||
"Jul",
|
||||
"Aug",
|
||||
"Sep",
|
||||
"Oct",
|
||||
"Nov",
|
||||
"Dec",
|
||||
];
|
||||
|
||||
today = dd + " " + monthNames[mm];
|
||||
|
||||
var $_getParent = getParent;
|
||||
|
||||
var itemTitle = document.getElementById("kanban-title").value;
|
||||
var itemText = document.getElementById("kanban-text").value;
|
||||
|
||||
item_html =
|
||||
'<div data-draggable="true" class="card task-text-progress" style="">' +
|
||||
'<div class="card-body">' +
|
||||
'<div class="task-header">' +
|
||||
'<div class="">' +
|
||||
'<h4 class="" data-item-title="' +
|
||||
itemTitle +
|
||||
'">' +
|
||||
itemTitle +
|
||||
"</h4>" +
|
||||
"</div>" +
|
||||
'<div class="">' +
|
||||
'<div class="dropdown">' +
|
||||
'<a class="dropdown-toggle" href="javascript:void(0)" role="button" id="dropdownMenuLink-4" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="true">' +
|
||||
'<i class="ti ti-dots-vertical text-dark"></i>' +
|
||||
"</a>" +
|
||||
'<div class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuLink-4">' +
|
||||
'<a class="dropdown-item kanban-item-edit cursor-pointer d-flex align-items-center gap-1" href="javascript:void(0);"><i class="ti ti-pencil fs-5"></i>Edit</a>' +
|
||||
'<a class="dropdown-item kanban-item-delete cursor-pointer d-flex align-items-center gap-1" href="javascript:void(0);"><i class="ti ti-trash fs-5"></i>Delete</a>' +
|
||||
"</div>" +
|
||||
"</div>" +
|
||||
"</div>" +
|
||||
"</div>" +
|
||||
'<div class="task-body">' +
|
||||
'<div class="task-content">' +
|
||||
'<p class="mb-0" data-item-text="' +
|
||||
itemText +
|
||||
'">' +
|
||||
itemText +
|
||||
"</p>" +
|
||||
"</div>" +
|
||||
'<div class="task-bottom">' +
|
||||
'<div class="tb-section-1">' +
|
||||
'<span class="hstack gap-2 fs-2" data-item-date="' +
|
||||
today +
|
||||
'"><i class="ti ti-calendar fs-5"></i> ' +
|
||||
today +
|
||||
"</span>" +
|
||||
"</div>" +
|
||||
'<div class="tb-section-2">' +
|
||||
'<span class="badge text-bg-success fs-1">Design</span>' +
|
||||
"</div>" +
|
||||
"</div>" +
|
||||
"</div>" +
|
||||
"</div>" +
|
||||
"</div>";
|
||||
|
||||
$("[data-item='" + $_getParent + "'] .connect-sorting-content").append(
|
||||
item_html
|
||||
);
|
||||
|
||||
$("#addItemModal").modal("hide");
|
||||
|
||||
kanbanEdit();
|
||||
kanbanDelete();
|
||||
});
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
// add item
|
||||
// ----------------------------------------------------------------------
|
||||
$("#add-list")
|
||||
.off("click")
|
||||
.on("click", function (event) {
|
||||
event.preventDefault();
|
||||
|
||||
$(".add-list").show();
|
||||
$(".edit-list").hide();
|
||||
$(".edit-list-title").hide();
|
||||
$(".add-list-title").show();
|
||||
$("#addListModal").modal("show");
|
||||
});
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
// add list
|
||||
// ----------------------------------------------------------------------
|
||||
$(".add-list")
|
||||
.off("click")
|
||||
.on("click", function (event) {
|
||||
var today = new Date();
|
||||
var dd = String(today.getDate()).padStart(2, "0");
|
||||
var mm = String(today.getMonth() + 1).padStart(2, "0");
|
||||
|
||||
today = mm + "." + dd;
|
||||
|
||||
var itemTitle = document.getElementById("item-name").value;
|
||||
|
||||
var itemNameLowercase = itemTitle.toLowerCase();
|
||||
var itemNameRemoveWhiteSpace = itemNameLowercase.split(" ").join("_");
|
||||
var itemDataAttr = itemNameRemoveWhiteSpace;
|
||||
|
||||
item_html =
|
||||
'<div data-item="item-' +
|
||||
itemDataAttr +
|
||||
'" class="task-list-container mb-4 " data-action="sorting">' +
|
||||
'<div class="connect-sorting">' +
|
||||
'<div class="task-container-header">' +
|
||||
'<h6 class="item-head mb-0 fs-4 fw-semibold" data-item-title="' +
|
||||
itemTitle +
|
||||
'">' +
|
||||
itemTitle +
|
||||
"</h6>" +
|
||||
'<div class="hstack gap-2">' +
|
||||
'<div class="dropdown">' +
|
||||
'<a class="dropdown-toggle" href="javascript:void(0)" role="button" id="dropdownMenuLink-4" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="true">' +
|
||||
'<i class="ti ti-dots-vertical text-dark"></i>' +
|
||||
"</a>" +
|
||||
'<div class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuLink-4">' +
|
||||
'<a class="dropdown-item list-edit" href="javascript:void(0);">Edit</a>' +
|
||||
'<a class="dropdown-item list-delete" href="javascript:void(0);">Delete</a>' +
|
||||
'<a class="dropdown-item list-clear-all" href="javascript:void(0);">Clear All</a>' +
|
||||
"</div>" +
|
||||
"</div>" +
|
||||
"</div>" +
|
||||
"</div>" +
|
||||
'<div class="connect-sorting-content" data-sortable="true">' +
|
||||
"</div>" +
|
||||
"</div>" +
|
||||
"</div>";
|
||||
|
||||
$(".task-list-section").append(item_html);
|
||||
$("#addListModal").modal("hide");
|
||||
$("#item-name").val("");
|
||||
kanbanSortable();
|
||||
editItem();
|
||||
deleteItem();
|
||||
clearItem();
|
||||
addKanbanItem();
|
||||
kanbanEdit();
|
||||
kanbanDelete();
|
||||
|
||||
// --------------------
|
||||
// Tooltip
|
||||
// --------------------
|
||||
var tooltipTriggerList = [].slice.call(
|
||||
document.querySelectorAll('[data-bs-toggle="tooltip"]')
|
||||
);
|
||||
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
|
||||
return new bootstrap.Tooltip(tooltipTriggerEl);
|
||||
});
|
||||
});
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
// edit item
|
||||
// ----------------------------------------------------------------------
|
||||
function editItem() {
|
||||
$(".list-edit")
|
||||
.off("click")
|
||||
.on("click", function (event) {
|
||||
event.preventDefault();
|
||||
|
||||
var parentItem = $(this);
|
||||
|
||||
$(".add-list").hide();
|
||||
$(".edit-list").show();
|
||||
|
||||
$(".add-list-title").hide();
|
||||
$(".edit-list-title").show();
|
||||
|
||||
var itemTitle = parentItem
|
||||
.parents('[data-action="sorting"]')
|
||||
.find(".item-head")
|
||||
.attr("data-item-title");
|
||||
$("#item-name").val(itemTitle);
|
||||
|
||||
$(".edit-list")
|
||||
.off("click")
|
||||
.on("click", function (event) {
|
||||
var $_innerThis = $(this);
|
||||
var $_getListTitle = document.getElementById("item-name").value;
|
||||
|
||||
var $_editedListTitle = parentItem
|
||||
.parents('[data-action="sorting"]')
|
||||
.find(".item-head")
|
||||
.html($_getListTitle);
|
||||
var $_editedListTitleDataAttr = parentItem
|
||||
.parents('[data-action="sorting"]')
|
||||
.find(".item-head")
|
||||
.attr("data-item-title", $_getListTitle);
|
||||
|
||||
$("#addListModal").modal("hide");
|
||||
$("#item-name").val("");
|
||||
});
|
||||
$("#addListModal").modal("show");
|
||||
$("#addListModal").on("hidden.bs.modal", function (e) {
|
||||
$("#item-name").val("");
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
// all list delete
|
||||
// ----------------------------------------------------------------------
|
||||
function deleteItem() {
|
||||
$(".list-delete")
|
||||
.off("click")
|
||||
.on("click", function (event) {
|
||||
event.preventDefault();
|
||||
$(this).parents("[data-action]").remove();
|
||||
});
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
// Delete item on click
|
||||
// ----------------------------------------------------------------------
|
||||
function kanbanDelete() {
|
||||
$(".card .kanban-item-delete")
|
||||
.off("click")
|
||||
.on("click", function (event) {
|
||||
event.preventDefault();
|
||||
|
||||
get_card_parent = $(this).parents(".card");
|
||||
|
||||
$("#deleteConformation").modal("show");
|
||||
|
||||
$('[data-remove="task"]').on("click", function (event) {
|
||||
event.preventDefault();
|
||||
/* Act on the event */
|
||||
get_card_parent.remove();
|
||||
$("#deleteConformation").modal("hide");
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
// Edit item on click
|
||||
// ----------------------------------------------------------------------
|
||||
function kanbanEdit() {
|
||||
$(".card .kanban-item-edit")
|
||||
.off("click")
|
||||
.on("click", function (event) {
|
||||
event.preventDefault();
|
||||
|
||||
var parentItem = $(this);
|
||||
|
||||
$(".add-task-title").hide();
|
||||
$(".edit-task-title").show();
|
||||
|
||||
$('[data-btn-action="addTask"]').hide();
|
||||
$('[data-btn-action="editTask"]').show();
|
||||
|
||||
var itemKanbanTitle = parentItem
|
||||
.parents(".card")
|
||||
.find("h4")
|
||||
.attr("data-item-title");
|
||||
var get_kanban_title = $(".task-text-progress #kanban-title").val(
|
||||
itemKanbanTitle
|
||||
);
|
||||
|
||||
var itemText = parentItem
|
||||
.parents(".card")
|
||||
.find('p:not(".progress-count")')
|
||||
.attr("data-item-text");
|
||||
var get_kanban_text = $(".task-text-progress #kanban-text").val(
|
||||
itemText
|
||||
);
|
||||
|
||||
$('[data-btn-action="editTask"]')
|
||||
.off("click")
|
||||
.on("click", function (event) {
|
||||
var kanbanValueTitle =
|
||||
document.getElementById("kanban-title").value;
|
||||
var kanbanValueText = document.getElementById("kanban-text").value;
|
||||
|
||||
var itemDataAttr = parentItem
|
||||
.parents(".card")
|
||||
.find("h4")
|
||||
.attr("data-item-title", kanbanValueTitle);
|
||||
var itemKanbanTitle = parentItem
|
||||
.parents(".card")
|
||||
.find("h4")
|
||||
.html(kanbanValueTitle);
|
||||
var itemTextDataAttr = parentItem
|
||||
.parents(".card")
|
||||
.find('p:not(".progress-count")')
|
||||
.attr("data-tasktext", kanbanValueText);
|
||||
var itemText = parentItem
|
||||
.parents(".card")
|
||||
.find('p:not(".progress-count")')
|
||||
.html(kanbanValueText);
|
||||
|
||||
$("#addItemModal").modal("hide");
|
||||
var setDate = $(".taskDate").html("");
|
||||
$(".taskDate").hide();
|
||||
});
|
||||
$("#addItemModal").modal("show");
|
||||
});
|
||||
}
|
||||
|
||||
editItem();
|
||||
deleteItem();
|
||||
clearItem();
|
||||
addKanbanItem();
|
||||
kanbanEdit();
|
||||
kanbanDelete();
|
||||
kanbanSortable();
|
||||
});
|
||||
170
res/assets/js/apps/notes.js
Normal file
170
res/assets/js/apps/notes.js
Normal file
@@ -0,0 +1,170 @@
|
||||
$(function () {
|
||||
function removeNote() {
|
||||
$(".remove-note")
|
||||
.off("click")
|
||||
.on("click", function (event) {
|
||||
event.stopPropagation();
|
||||
$(this).parents(".single-note-item").remove();
|
||||
});
|
||||
}
|
||||
|
||||
function favouriteNote() {
|
||||
$(".favourite-note")
|
||||
.off("click")
|
||||
.on("click", function (event) {
|
||||
event.stopPropagation();
|
||||
$(this).parents(".single-note-item").toggleClass("note-favourite");
|
||||
});
|
||||
}
|
||||
|
||||
function addLabelGroups() {
|
||||
$(".category-selector .badge-group-item")
|
||||
.off("click")
|
||||
.on("click", function (event) {
|
||||
event.preventDefault();
|
||||
/* Act on the event */
|
||||
var getclass = this.className;
|
||||
var getSplitclass = getclass.split(" ")[0];
|
||||
if ($(this).hasClass("badge-business")) {
|
||||
$(this).parents(".single-note-item").removeClass("note-social");
|
||||
$(this).parents(".single-note-item").removeClass("note-important");
|
||||
$(this).parents(".single-note-item").toggleClass(getSplitclass);
|
||||
} else if ($(this).hasClass("badge-social")) {
|
||||
$(this).parents(".single-note-item").removeClass("note-business");
|
||||
$(this).parents(".single-note-item").removeClass("note-important");
|
||||
$(this).parents(".single-note-item").toggleClass(getSplitclass);
|
||||
} else if ($(this).hasClass("badge-important")) {
|
||||
$(this).parents(".single-note-item").removeClass("note-social");
|
||||
$(this).parents(".single-note-item").removeClass("note-business");
|
||||
$(this).parents(".single-note-item").toggleClass(getSplitclass);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
var $btns = $(".note-link").click(function () {
|
||||
if (this.id == "all-category") {
|
||||
var $el = $("." + this.id).fadeIn();
|
||||
$("#note-full-container > div").not($el).hide();
|
||||
}
|
||||
if (this.id == "important") {
|
||||
var $el = $("." + this.id).fadeIn();
|
||||
$("#note-full-container > div").not($el).hide();
|
||||
} else {
|
||||
var $el = $("." + this.id).fadeIn();
|
||||
$("#note-full-container > div").not($el).hide();
|
||||
}
|
||||
$btns.removeClass("active");
|
||||
$(this).addClass("active");
|
||||
});
|
||||
|
||||
$("#add-notes").on("click", function (event) {
|
||||
$("#addnotesmodal").modal("show");
|
||||
$("#btn-n-save").hide();
|
||||
$("#btn-n-add").show();
|
||||
});
|
||||
|
||||
// Button add
|
||||
$("#btn-n-add").on("click", function (event) {
|
||||
event.preventDefault();
|
||||
/* Act on the event */
|
||||
var today = new Date();
|
||||
var dd = String(today.getDate()).padStart(2, "0");
|
||||
var mm = String(today.getMonth()); //January is 0!
|
||||
var yyyy = today.getFullYear();
|
||||
var monthNames = [
|
||||
"Jan",
|
||||
"Feb",
|
||||
"Mar",
|
||||
"Apr",
|
||||
"May",
|
||||
"Jun",
|
||||
"Jul",
|
||||
"Aug",
|
||||
"Sep",
|
||||
"Oct",
|
||||
"Nov",
|
||||
"Dec",
|
||||
];
|
||||
today = dd + " " + monthNames[mm] + " " + yyyy;
|
||||
|
||||
var $_noteTitle = document.getElementById("note-has-title").value;
|
||||
var $_noteDescription = document.getElementById(
|
||||
"note-has-description"
|
||||
).value;
|
||||
|
||||
$html =
|
||||
'<div class="col-md-4 single-note-item all-category"><div class="card card-body">' +
|
||||
'<span class="side-stick"></span>' +
|
||||
'<h6 class="note-title text-truncate w-75 mb-0" data-noteHeading="' +
|
||||
$_noteTitle +
|
||||
'">' +
|
||||
$_noteTitle +
|
||||
"</h6>" +
|
||||
'<p class="note-date fs-2">' +
|
||||
today +
|
||||
"</p>" +
|
||||
'<div class="note-content">' +
|
||||
'<p class="note-inner-content" data-noteContent="' +
|
||||
$_noteDescription +
|
||||
'">' +
|
||||
$_noteDescription +
|
||||
"</p>" +
|
||||
"</div>" +
|
||||
'<div class="d-flex align-items-center">' +
|
||||
'<a href="javascript:void(0)" class="link me-1"><i class="ti ti-star fs-4 favourite-note"></i></a>' +
|
||||
'<a href="javascript:void(0)" class="link text-danger ms-2"><i class="ti ti-trash fs-4 remove-note"></i></a>' +
|
||||
'<div class="ms-auto">' +
|
||||
'<div class="category-selector btn-group">' +
|
||||
'<a class="nav-link category-dropdown label-group p-0" data-bs-toggle="dropdown" href="javascript:void(0)" role="button" aria-haspopup="true" aria-expanded="true">' +
|
||||
'<div class="category">' +
|
||||
'<div class="category-business"></div>' +
|
||||
'<div class="category-social"></div>' +
|
||||
'<div class="category-important"></div>' +
|
||||
'<span class="more-options text-dark"><i class="ti ti-dots-vertical fs-5"></i></span>' +
|
||||
"</div>" +
|
||||
"</a>" +
|
||||
'<div class="dropdown-menu dropdown-menu-right category-menu">' +
|
||||
'<a class="note-business badge-group-item badge-business dropdown-item position-relative category-business" href="javascript:void(0);">Business</a>' +
|
||||
'<a class="note-social badge-group-item badge-social dropdown-item position-relative category-social" href="javascript:void(0);"> Social</a>' +
|
||||
'<a class="note-important badge-group-item badge-important dropdown-item position-relative category-important" href="javascript:void(0);"> Important</a>' +
|
||||
"</div>" +
|
||||
"</div>" +
|
||||
"</div>" +
|
||||
"</div>" +
|
||||
"</div></div> ";
|
||||
|
||||
$("#note-full-container").prepend($html);
|
||||
$("#addnotesmodal").modal("hide");
|
||||
|
||||
removeNote();
|
||||
favouriteNote();
|
||||
addLabelGroups();
|
||||
});
|
||||
|
||||
$("#addnotesmodal").on("hidden.bs.modal", function (event) {
|
||||
event.preventDefault();
|
||||
document.getElementById("note-has-title").value = "";
|
||||
document.getElementById("note-has-description").value = "";
|
||||
});
|
||||
|
||||
removeNote();
|
||||
favouriteNote();
|
||||
addLabelGroups();
|
||||
|
||||
$("#btn-n-add").attr("disabled", "disabled");
|
||||
});
|
||||
|
||||
$("#note-has-title").keyup(function () {
|
||||
var empty = false;
|
||||
$("#note-has-title").each(function () {
|
||||
if ($(this).val() == "") {
|
||||
empty = true;
|
||||
}
|
||||
});
|
||||
|
||||
if (empty) {
|
||||
$("#btn-n-add").attr("disabled", "disabled");
|
||||
} else {
|
||||
$("#btn-n-add").removeAttr("disabled");
|
||||
}
|
||||
});
|
||||
84
res/assets/js/apps/productDetail.js
Normal file
84
res/assets/js/apps/productDetail.js
Normal file
@@ -0,0 +1,84 @@
|
||||
$(function () {
|
||||
// product detail
|
||||
|
||||
var sync1 = $("#sync1");
|
||||
var sync2 = $("#sync2");
|
||||
var slidesPerPage = 4;
|
||||
var syncedSecondary = true;
|
||||
|
||||
sync1
|
||||
.owlCarousel({
|
||||
items: 1,
|
||||
slideSpeed: 2000,
|
||||
nav: false,
|
||||
autoplay: false,
|
||||
dots: true,
|
||||
loop: true,
|
||||
rtl: true,
|
||||
responsiveRefreshRate: 200,
|
||||
navText: [
|
||||
'<svg width="12" height="12" height="100%" viewBox="0 0 11 20"><path style="fill:none;stroke-width: 3px;stroke: #fff;" d="M9.554,1.001l-8.607,8.607l8.607,8.606"/></svg>',
|
||||
'<svg width="12" height="12" viewBox="0 0 11 20" version="1.1"><path style="fill:none;stroke-width: 3px;stroke: #fff;" d="M1.054,18.214l8.606,-8.606l-8.606,-8.607"/></svg>',
|
||||
],
|
||||
})
|
||||
.on("changed.owl.carousel", syncPosition);
|
||||
|
||||
sync2
|
||||
.on("initialized.owl.carousel", function () {
|
||||
sync2.find(".owl-item").eq(0).addClass("current");
|
||||
})
|
||||
.owlCarousel({
|
||||
items: slidesPerPage,
|
||||
items: 6,
|
||||
margin: 16,
|
||||
dots: true,
|
||||
nav: false,
|
||||
rtl: true,
|
||||
smartSpeed: 200,
|
||||
slideSpeed: 500,
|
||||
slideBy: slidesPerPage,
|
||||
responsiveRefreshRate: 100,
|
||||
})
|
||||
.on("changed.owl.carousel", syncPosition2);
|
||||
|
||||
function syncPosition(el) {
|
||||
var count = el.item.count - 1;
|
||||
var current = Math.round(el.item.index - el.item.count / 2 - 0.5);
|
||||
|
||||
if (current < 0) {
|
||||
current = count;
|
||||
}
|
||||
if (current > count) {
|
||||
current = 0;
|
||||
}
|
||||
|
||||
sync2
|
||||
.find(".owl-item")
|
||||
.removeClass("current")
|
||||
.eq(current)
|
||||
.addClass("current");
|
||||
var onscreen = sync2.find(".owl-item.active").length - 1;
|
||||
var start = sync2.find(".owl-item.active").first().index();
|
||||
var end = sync2.find(".owl-item.active").last().index();
|
||||
|
||||
if (current > end) {
|
||||
sync2.data("owl.carousel").to(current, 100, true);
|
||||
}
|
||||
if (current < start) {
|
||||
sync2.data("owl.carousel").to(current - onscreen, 100, true);
|
||||
}
|
||||
}
|
||||
|
||||
function syncPosition2(el) {
|
||||
if (syncedSecondary) {
|
||||
var number = el.item.index;
|
||||
sync1.data("owl.carousel").to(number, 100, true);
|
||||
}
|
||||
}
|
||||
|
||||
sync2.on("click", ".owl-item", function (e) {
|
||||
e.preventDefault();
|
||||
var number = $(this).index();
|
||||
sync1.data("owl.carousel").to(number, 300, true);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user