Home / Unlabelled / MailBox

MailBox

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>MailBox</title>
<link rel="shortcut icon" href="https://showtime.co.id/images/favicon.ico" type="image/x-icon">
<link href="/Content/vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<link type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-sweetalert/1.0.1/sweetalert.min.js">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>
<link rel="stylesheet" href="https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/dist/bootstrap-tagsinput.css">
<style>
#activedd {
background: #ffc6db;
}
</style>
<!-- Custom styles for this template-->
<link href="/Content/css/sb-admin-2.css" rel="stylesheet">
<link href="/Content/css/custom.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="/Content/css/daterangepicker.css">
</head>
<body id="page-top">
<div class="loading">Loading&#8230;</div>
<!-- Page Wrapper -->
<div id="wrapper">
<!-- Sidebar -->
<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
<!-- Sidebar - Brand -->
<a class="sidebar-brand d-flex align-items-center justify-content-center" href="index.html">
<img src="https://cdn.showtime.co.id/images_2/images/v2/showtime-logo-beta.png" alt="Showtime" class="img-logo">
</a>
<!-- Divider -->
<hr class="sidebar-divider my-0">
<div id="qwe"></div>
<!-- Nav Item - Dashboard -->
<li class="nav-item" id="Dashboard">
<a class="nav-link" href="/">
<i class="fas fa-fw fa-tachometer-alt"></i>
<span>Dashboard</span>
</a>
</li>
<li class="nav-item" id="PortalManagement">
<a class="nav-link" href="/Portal">
<i class="fas fa-user"></i>
<span>Portal Management</span>
</a>
</li>
<li class="nav-item" id="PageTextManagement">
<a class="nav-link" href="/Portal/PageText">
<i class="fas fa-user"></i>
<span>Page Text Management</span>
</a>
</li>
<li class="nav-item" id="ContentManagement">
<a class="nav-link" href="/Home/Content">
<i class="fas fa-list"></i>
<span>Content Management</span>
</a>
</li>
<li class="nav-item" id="Promotion">
<a class="nav-link" href="/Home/Promotion">
<i class="fas fa-list"></i>
<span>Promotion Management</span>
</a>
</li>
<li class="nav-item" id="ShowcaseManagement">
<a class="nav-link" href="/Home/Showcase">
<i class="fas fa-list"></i>
<span>Showcase Management</span>
</a>
</li>
<li class="nav-item" id="Approval">
<a class="nav-link" href="/Home/Approval">
<i class="fas fa-list"></i>
<span>Approval Management</span>
</a>
</li>
<li class="nav-item" id="UserManagement">
<a class="nav-link" href="/Home/Users">
<i class="fas fa-users"></i>
<span>User Management</span>
</a>
</li>
<li class="nav-item" id="mailBox">
<a class="nav-link" href="/Home/MailBox">
<i class="fas fa-envelope"></i>
<span>MailBox Management</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/Login/LogOut">
<i class="fas fa-sign-out-alt"></i>
<span>Logout</span>
</a>
</li>
</ul>
<!-- End of Sidebar -->
<!-- Content Wrapper -->
<div id="content-wrapper" class="d-flex flex-column">
<!-- Main Content -->
<div id="content">
<!-- Topbar -->
<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
<h2>content management system</h2>
<!-- Sidebar Toggle (Topbar) -->
<button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
<i class="fa fa-bars"></i>
</button>
<!-- Topbar Navbar -->
<ul class="navbar-nav ml-auto">
<!-- Nav Item - User Information -->
<!--<li class="nav-item dropdown no-arrow">
<a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="mr-2 d-none d-lg-inline text-gray-600 small">Douglas McGee</span>
<img class="img-profile rounded-circle"
src="img/undraw_profile.svg">
</a>-->
<!-- Dropdown - User Information -->
<!--<div class="dropdown-menu dropdown-menu-right shadow animated--grow-in"
aria-labelledby="userDropdown">
<a class="dropdown-item" href="#">
<i class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i>
Profile
</a>
<a class="dropdown-item" href="#">
<i class="fas fa-cogs fa-sm fa-fw mr-2 text-gray-400"></i>
Settings
</a>
<a class="dropdown-item" href="#">
<i class="fas fa-list fa-sm fa-fw mr-2 text-gray-400"></i>
Activity Log
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal">
<i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
Logout
</a>
</div>
</li>-->
</ul>
</nav>
<!-- End of Topbar -->
<!-- Begin Page Content -->
<div class="container-fluid">
<style>
.col {
padding-right: 0;
}
#tableUser {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#tableUser th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #ffc6db;
color: white;
}
#tableUser td, #tableUser th {
border: 1px solid #ddd;
padding: 8px;
}
#tableUser tbody tr td a{
font-weight: 700;
color: #ff95bd;
}
i.fas.fa-trash {
font-weight: 700;
color: #ff95bd;
}
.row {
margin-right: 0;
}
tbody tr td button {
color: #ff95bd;
border: none;
background: none;
}
button:focus {
outline: none;
}
</style>
<div class=" page-fBot2">
<div class="card shadow mb-2">
<div class="card-header py-3">
<h6 class="m-0 font-weight-bold ">MailBox Management </h6>
</div>
<div class="card-body">
<div class="row" style="margin-top: 10px;margin-left:-16px;">
<div id="2_left" style="width:20%;height:110%;background:;float:left;" class="mr-2 ml-3">
<input type="text" id="keySearch" placeholder="Search By" class="form-control" style="width:100%;height:107%;">
</div>
<div id="3_left" style="width:15%;height:110%;background:;float:left;">
<select class="form-control form-select-sm text-center" id="keySearchBtn" onchange="getUser(true)" style="background: #ffc6db; color:black;height:107%;font-size:14px;">
<option value="All">Select All</option>
<option value="UserId">User ID</option>
<option value="RealName">Real Name</option>
<option value="DisplayName">Nick Name</option>
</select>
</div>
</div>
</div>
</div>
<div class="card shadow mb-2">
<div class="card-body">
<div class="headTable" style="background-color:;width:100%;height:10%;">
<div class="form-group" style="float:right;margin-right:1%;">
<select class="form-control" id="txtPageSize" onchange="getUser(true)">
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="75">75</option>
<option value="100">100</option>
</select>
</div>
<label style="float:right;margin-right:2%;">Show Result </label>
</div>
<div class="table-responsive">
<table class="table" width="100%" cellspacing="0">
<thead>
<tr>
<td scope="col">User ID</td>
<td scope="col">Real Name</td>
<td scope="col">Nick Name</td>
<td scope="col" align="center">Action</td>
</tr>
</thead>
<tbody id="bodyUserAll">
</tbody>
</table>
</div>
<nav aria-label="...">
<ul class="pagination" id="pagination">
</ul>
</nav>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="card shadow mb-2">
<div class="card-header py-3">
<h6 class="m-0 font-weight-bold ">MailBox </h6>
</div>
<div class="card-body">
<div class="col-md-11 mt-4">
<div class="row">
<div class="col_" style="float:left;width:20%;">
Title
</div>
<div class="col_" style="float:left;width:80%;">
<input id="title" type="text" class="form-control" />
</div>
</div>
<div class="row mt-4">
<div class="col_" style="float: left; width: 20%;">
Create Description
</div>
<div class="col_" style="float: left; width: 80%;">
<textarea id="description" name="w3review" rows="4" cols="50" class="form-control"></textarea>
</div>
</div>
<div class="row mt-4">
<div class="col_" style="float: left; width: 20%;">
</div>
<div class="col_" style="float: left; width: 80%;">
<button class="btn btn-primary" id="_MailBox" onclick="cekMailBox()">Send</button>
<button class="btn btn-danger" onclick="btnCancel()">Cancel</button>
</div>
</div>
</div>
</div>
</div>
<div class="card shadow mb-4 mt-1">
<div class="card-header py-3">
<h6 class="m-0 font-weight-bold ">
Additional Option
</h6>
</div>
<div class="card-body">
<div class="col-md-11 mt-1 mb-5">
<div class="row mt-4">
<div class="col_" style="float: left; width: 20%;">
Link Button
</div>
<div class="col_" style="float: left; width: 80%;">
<input id="url" type="text" class="form-control" />
</div>
</div>
<div class="row mt-4">
<div class="col_" style="float: left; width: 20%;">
Label Button
</div>
<div class="col_" style="float: left; width: 80%;">
<input id="urlText" type="text" class="form-control" />
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card shadow mb-4">
<div class="card-header py-3">
<h6 class="m-0 font-weight-bold ">To User </h6>
</div>
<div class="card-body">
<div class="col-md-11 mt-4">
<div class="row">
<div class="col_" style="float:left;width:13%;">
Select
</div>
<div class="col_" style="float:left;width:87%;">
<select class="form-control" id="opsiUserId" onchange="opsiAction()">
<option value="customUserId">Custom</option>
<option value="allUserId">All</option>
</select>
</div>
</div>
<div class="row mt-4">
<div class="col_" style="float: left; width: 13%;">
User
</div>
<div class="col_" style="float: left; width: 87%;">
<table width="100%" id="tableUser">
<thead>
<tr>
<th>UserId</th>
<th>Real Name</th>
<th>Display Name</th>
<th>Action</th>
</tr>
</thead>
<tbody id="bodyMiniTable">
</tbody>
</table>
<nav aria-label="...">
<ul class="pagination mt-2" id="pagTableUser" >
</ul>
</nav>
</div>
</div>
<div class="row mt-4">
<div class="col_" style="float: left; width: 13%;">
</div>
<div class="col_" style="float: left; width: 87%;">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /.container-fluid -->
</div>
<!-- End of Main Content -->
<!-- Footer -->
<footer class="sticky-footer bg-white">
<div class="container my-auto">
<div class="copyright text-center my-auto">
<span>Copyright &copy; EightElements 2020</span>
</div>
</div>
</footer>
<!-- End of Footer -->
</div>
<!-- End of Content Wrapper -->
</div>
<!-- End of Page Wrapper -->
<!-- Scroll to Top Button-->
<a class="scroll-to-top rounded" href="#page-top">
<i class="fas fa-angle-up"></i>
</a>
<!-- Logout Modal-->
<div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
<a class="btn btn-primary" href="login.html">Logout</a>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript-->
<script src="/Content/vendor/jquery/jquery.min.js"></script>
<script src="/Content/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Core plugin JavaScript-->
<script src="/Content/vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Custom scripts for all pages-->
<script src="/Content/js/sb-admin-2.js"></script>
<script src="/Content/vendor/chart.js/Chart.min.js"></script>
<!-- Page level plugins -->
<script src="/Content/vendor/datatables/jquery.dataTables.min.js"></script>
<script src="/Content/vendor/datatables/dataTables.bootstrap4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script>
<script src="https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/dist/bootstrap-tagsinput.min.js"></script>
<script>
$(document).ready(function () {
stopLoading();
changeActive();
})
function startLoading() {
$(".loading").show();
}
function stopLoading() {
$(".loading").hide();
}
function validator(id) {
var variable = $("#" + id);
var check = variable.val();
if (check === null || check === '' || check === 0 || check === '0') {
variable.focus();
return false;
}
return true;
}
function changeActive() {
var path = 'HomeMailBox';
if (path == 'HomeIndex') {
$("#Dashboard").addClass("nav-item active");
}
else if (path == 'PortalIndex' || path =='portalCategory') {
$("#PortalManagement").addClass("nav-item active");
}
else if (path == 'PortalPageText') {
$("#PageTextManagement").addClass("nav-item active");
}
else if (path == 'HomeContent' || path == 'homedetail' || path == 'homedetail2') {
$("#ContentManagement").addClass("nav-item active");
}
else if (path == 'HomePromotion') {
$("#Promotion").addClass("nav-item active");
}
else if (path == 'HomeShowcase' || path == 'homeshowcasedetail2') {
$("#ShowcaseManagement").addClass("nav-item active");
}
else if (path == 'HomeUsers' || path == 'homeUsersDetail') {
$("#UserManagement").addClass("nav-item active");
}
else if (path == 'HomeMailBox') {
$("#mailBox").addClass("nav-item active");
}
else if (path == 'HomeApproval' ) {
$("#Approval").addClass("nav-item active");
}
}
</script>
<script src="/Scripts/api.js"></script>
<script>
$(document).ready(function () {
getUser();
});
var input = document.getElementById("keySearch");
input.addEventListener("keypress", function (event) {
if (event.key === "Enter") {
getUser(true);
}
});
var startIndex = 0;
function getUser(isResetpage = false,isResetSearch = false) {
if (isResetpage) startIndex = 0;
var keySearch = $("#keySearch").val();
var keySearchBtn = $("#keySearchBtn").val();
var pageSize = $("#txtPageSize").val();
var url = '/Rest/GetUserAll?startIndex=' + startIndex + '&pageSize=' + pageSize + '&keySearch=' + keySearch + '&keySearchBtn=' + keySearchBtn;
$.ajax({
url: url,
success: function (respon) {
bodyTableUser(respon.data);
bodyPagination(respon.countData, pageSize);
},
error: function () {
alert("Error GetUser")
}
});
}
function bodyTableUser(data) {
var html = "";
for (var i = 0; i < data.length; i++) {
var getData = data[i];
html += `<tr>`;
html += `<td>${getData.UserId}</td>`;
html += `<td>${getData.RealName = getData.RealName ?? ""}</td>`;
html += `<td>${getData.DisplayName = getData.DisplayName ?? ""}</td>`;
var defaultHtml = `<td><button type="button" id="${getData.UserId}" onclick="addArrMiniTable('${getData.UserId}','${getData.RealName}','${getData.DisplayName}')"><i class="fa fa-plus"></i> Add</button></td>`;
if (arrMiniTable.length != 0) {
for (var a = 0; a < arrMiniTable.length; a++) {
if (arrMiniTable[a].UserId == getData.UserId) {
defaultHtml = `<td><button type="button" id="${getData.UserId}" onclick="addArrMiniTable('${getData.UserId}','${getData.RealName}','${getData.DisplayName}')"><i class="fa fa-check"></i> Selected</button></td>`;
}
}
}
html += defaultHtml;
html += `</tr>`;
}
$("#bodyUserAll").html(html);
}
function bodyPagination(countData, pageSize) {
var beforePage = 2;
var afterPage = 3;
var totalPage = countData > pageSize ? countData / pageSize : 1;
var firstPage = startIndex - beforePage >= 0 ? startIndex - beforePage : 0;
var limitPage = startIndex + afterPage >= totalPage ? totalPage : startIndex + afterPage;
var html = "";
html += `
<li class="page-item ${startIndex <= 0 ? "disabled" : ""}">
<a class="page-link" onclick="movePagination(${startIndex - 1})" href="#">Previous</a>
</li>
`;
for (var i = firstPage; i < limitPage; i++) {
html += `<li class="page-item ${startIndex == i ? "active" : ""}">
<a class="page-link" onclick="movePagination(${i})" href="#" >${i+1}</a>
</li>`;
}
html += `
<li class="page-item ${startIndex >= totalPage - 1 ? "disabled":""}">
<a class="page-link" onclick="movePagination(${startIndex + 1})" href="#">next</a>
</li>
`;
$("#pagination").html(html);
if (countData == 0) {
$("#pagination").empty();
}
}
function movePagination(i) {
startIndex = i;
getUser();
}
var arrMiniTable = [];
function addArrMiniTable(userId, realName, displayName) {
var objMiniTable = { UserId: userId, RealName: realName, DisplayName: displayName };
var arrMiniTableCek = arrMiniTable.find(x => x.UserId == objMiniTable.UserId);
var opsiChange = $("#opsiUserId").val() == "customUserId";
if (!arrMiniTableCek && opsiChange) arrMiniTable.push(objMiniTable);
if (!arrMiniTableCek && opsiChange) {
$("#bodyUserAll").find("td").find(`#${userId}`)[0].innerHTML = "<i class='fa fa-check'></i> Selected";
}
if (arrMiniTableCek) alert("Select Other Data");
var pageRow = 8;
var startRowAdd = Math.ceil(arrMiniTable.length / pageRow);
bodyMiniTable(arrMiniTable, startRowAdd);
}
function bodyMiniTable(arrMiniTable, startRow = 1) {
var html = "";
var pageRow = 8;
var arrMiniTableForChange = arrMiniTable.slice((startRow - 1) * pageRow, startRow * pageRow);
for (var i = 0; i < arrMiniTableForChange.length; i++) {
getMiniTable = arrMiniTableForChange[i];
html += `<tr>`;
html += `<td>${getMiniTable.UserId}</td>`;
html += `<td>${getMiniTable.RealName}</td>`;
html += `<td>${getMiniTable.DisplayName}</td>`;
//This Variable Created For Page Change When Array == 0 In Other Page
var startRowChange = (arrMiniTable.length - 1) / pageRow == (startRow - 1) ? startRow - 1 : startRow;
html += `<td><button type="button" onclick="deleteArrMiniTable('${getMiniTable.UserId}',${startRowChange})"><i class="fas fa-trash"></i></button></td>`;
html += `</tr>`;
}
$("#bodyMiniTable").html(html);
pagArrMiniTable(arrMiniTable, pageRow, startRow);
}
function deleteArrMiniTable(UserId,startRow) {
arrMiniTable.splice(arrMiniTable.map(x => x.UserId).indexOf(UserId), 1);
bodyMiniTable(arrMiniTable, startRow);
getUser();
if (arrMiniTable.length == 0) {
$("#pagTableUser").empty();
}
}
function pagArrMiniTable(countArrMiniTable,pageRow,startRow) {
var html = "";
var beforePagination = 2;
var afterPagination = 3;
var totalColoum = countArrMiniTable.length > pageRow ? countArrMiniTable.length / pageRow : 1;
var firstColoum = startRow - beforePagination >= 0 ? startRow - beforePagination : 0;
var limitColoum = startRow + afterPagination >= totalColoum ? totalColoum : startRow + afterPagination;
html += `<li class="page-item ${startRow <= 1 ? "disabled" : ""}">
<a href="#" class="page-link" onclick="moveArr(${startRow - 1})">Previous</a>
</li>`;
for (var i = firstColoum; i < limitColoum; i++) {
html += `<li class="page-item ${startRow == i + 1 ? "active" : ""}">
<a href="#" class="page-link " onclick="moveArr(${i + 1})">${i + 1}</a>
</li>`;
}
html += `<li class="page-item ${startRow >= totalColoum ? "disabled" : ""}">
<a href="#" onclick="moveArr(${startRow + 1})" class="page-link">Next</a>
</li>`;
if (countArrMiniTable.length != 0) $("#pagTableUser").html(html);
}
function moveArr(i) {
bodyMiniTable(arrMiniTable,i);
}
function btnCancel() {
$("#title").val(''),
$("#url").val(''),
$("#urlText").val(''),
$("#type").val(''),
$("#description").val('');
arrMiniTable = [];
$("#bodyMiniTable").empty();
$("#pagTableUser").empty();
getUser();
}
function opsiAction() {
if ($("#opsiUserId").val() == "allUserId") {
arrMiniTable = [];
$("#bodyMiniTable").empty();
$("#pagTableUser").empty();
getUser();
}
}
function cekMailBox() {
var message = "";
if ($("#title").val() == "") {
message += "Empty Title \n";
}
if ($("#description").val() == "") {
message += "Empty description \n";
}
if ($("#opsiUserId").val() == "customUserId" && arrMiniTable.length == 0) {
message += "Please Select - To User \n";
}
if ($("#url").val() != "" && $("#urlText").val() == "") {
message += "Empty Lable Button \n";
}
if ($("#urlText").val() != "" && $("#url").val() == "") {
message += "Empty Link Button \n";
}
if (message == "") {
addMailBox();
} else {
swal("Failed", message, "error")
}
}
function addMailBox() {
$("#_MailBox").prop("disabled", true);
var url = '/Rest/AddMailBox';
var UserIdArr = [];
for (var i = 0; i < arrMiniTable.length; i++) {
UserIdArr.push(arrMiniTable[i].UserId)
}
console.log(UserIdArr);
var data = {
Title: $("#title").val(),
Url: $("#url").val(),
UrlText: $("#urlText").val(),
Type: $("#type").val(),
Body: $("#description").val(),
OpsiUserId: $("#opsiUserId").val(),
UserIdArr: UserIdArr
}
$.ajax({
contentType: 'application/json;charset=utf-8',
url: url,
type: 'post',
dataType: 'Json',
data : JSON.stringify(data),
success: function (respon) {
btnCancel();
$("#pagTableUser").empty()
$("#_MailBox").prop("disabled", false);
swal("success", "Message Sent Successfully", "success")
},
error: function () {
alert("Error Function AddMailBox Can't Proccess The Data");
$("#pagTableUser").empty()
$("#_MailBox").prop("disabled", false);
}
});
}
</script>
</body>
</html>






MailBox MailBox Reviewed by Leo on Juni 13, 2022 Rating: 5
Tags

Tidak ada komentar

Langganan: Posting Komentar (Atom)

About me

About Me

My name is Joanne Doe, a lifestyle photographer and blogger currently living in Osaka, Japan. I write my thoughts and travel stories inside this blog.