1299 lines
37 KiB
Handlebars
1299 lines
37 KiB
Handlebars
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<!-- Required meta tags -->
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
<title>Amble Dashboard</title>
|
|
<link rel="icon" href="images/walk_aA.svg" type="image/svg">
|
|
<!-- plugins:css -->
|
|
<link rel="stylesheet" href="vendors/iconfonts/mdi/font/css/materialdesignicons.min.css">
|
|
<link rel="stylesheet" href="vendors/css/vendor.bundle.base.css">
|
|
<link rel="stylesheet" href="vendors/css/vendor.bundle.addons.css">
|
|
|
|
<!-- plugin css for this page -->
|
|
<link rel="stylesheet" href="vendors/iconfonts/flag-icon-css/css/flag-icon.min.css" />
|
|
<!-- End plugin css for this page -->
|
|
<!-- inject:css -->
|
|
<link rel="stylesheet" href="css/vertical-layout-light/style.css">
|
|
<link rel="stylesheet" href="css/confmodal.css">
|
|
<!-- endinject -->
|
|
<link rel="shortcut icon" href="images/favicon.png" />
|
|
<link rel="stylesheet" href="css/style.css">
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
|
|
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
|
|
<style>body {
|
|
background: #f1e8fe 0% 0% no-repeat padding-box;
|
|
width: 100%;
|
|
height: auto;
|
|
opacity: 1;
|
|
}
|
|
|
|
.main-panel {
|
|
padding: 50px;
|
|
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
margin: auto;
|
|
}
|
|
|
|
.section {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.container-scroller {
|
|
background: #f1e8fe 0% 0% no-repeat padding-box;
|
|
opacity: 1;
|
|
}
|
|
|
|
.ul {
|
|
list-style-type: none;
|
|
}
|
|
|
|
.active1 {
|
|
width: 75px;
|
|
height: 75px;
|
|
position: relative;
|
|
left: -14px;
|
|
background: #f2eff6 0% 0% no-repeat padding-box;
|
|
opacity: 1;
|
|
}
|
|
|
|
.active2 {
|
|
width: 75px;
|
|
height: 75px;
|
|
position: relative;
|
|
left: -14px;
|
|
background: none;
|
|
opacity: 1;
|
|
}
|
|
|
|
.li:hover {
|
|
width: 75px;
|
|
height: 75px;
|
|
position: relative;
|
|
background: white 0% 0% no-repeat padding-box;
|
|
left: -14px;
|
|
opacity: 1;
|
|
}
|
|
|
|
nav {
|
|
background-color: white;
|
|
width: 100%;
|
|
padding: 10px;
|
|
height: 70px;
|
|
}
|
|
|
|
.profile {
|
|
width: 190px;
|
|
height: 50px;
|
|
background: #f1e8fe 0% 0% no-repeat padding-box;
|
|
border-radius: 51px;
|
|
opacity: 1;
|
|
}
|
|
|
|
.h4 {
|
|
position: relative;
|
|
top: 15px;
|
|
left: -15px;
|
|
width: 151px;
|
|
height: 19px;
|
|
text-align: right;
|
|
font-family: "Heebo", sans-serif !important;
|
|
font-size: 13px;
|
|
letter-spacing: 0.05px;
|
|
color: #434343;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.pic {
|
|
position: relative;
|
|
top: -25px;
|
|
left: 148px;
|
|
width: 44px;
|
|
height: 44px;
|
|
|
|
border: 3px solid #5e48b9;
|
|
opacity: 1;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.arrow {
|
|
position: relative;
|
|
top: 2px;
|
|
left: 20px;
|
|
|
|
float: left;
|
|
}
|
|
|
|
.card1 {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 20px;
|
|
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
|
background-color: white;
|
|
}
|
|
|
|
.h3sty {
|
|
text-align: left;
|
|
font-family: "Heebo", sans-serif !important;
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.09px;
|
|
color: #5e48b9;
|
|
opacity: 1;
|
|
}
|
|
|
|
.table {
|
|
position: relative;
|
|
height: 150px;
|
|
top: 8px;
|
|
left: 10px;
|
|
width: 100%;
|
|
border-radius: 20px;
|
|
box-shadow: 4px 4px 8px 8px rgba(0, 0, 0, 0.2),
|
|
4px 6px 20px 0px rgba(0, 0, 0, 0.19);
|
|
background-color: white;
|
|
text-align: center;
|
|
}
|
|
|
|
.thead {
|
|
font-family: "Heebo", sans-serif !important;
|
|
font-size: 25px;
|
|
border-collapse: collapse;
|
|
letter-spacing: 1.55px;
|
|
color: #5e48b9;
|
|
width: 100%;
|
|
|
|
background: #f1e8fe 0% 0% no-repeat padding-box;
|
|
border-radius: 28px;
|
|
opacity: 1;
|
|
}
|
|
|
|
.table thead th,
|
|
.jsgrid .jsgrid-table thead th {
|
|
/* border-top: 0; */
|
|
/* border-bottom-width: 1px; */
|
|
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.swal-icon--success__line {
|
|
background: transparent linear-gradient(180deg, #ff6959 0%, #fbaa7b 100%) 0%
|
|
0% no-repeat padding-box;
|
|
|
|
opacity: 1;
|
|
}
|
|
|
|
.swal-icon--success__ring {
|
|
border: 1px solid #fbaa7b;
|
|
}
|
|
|
|
.btn-publish:hover {
|
|
background: transparent linear-gradient(180deg, #ff6959 0%, #fbaa7b 100%) 0%
|
|
0% no-repeat padding-box;
|
|
color: white;
|
|
opacity: 1;
|
|
}
|
|
|
|
.btn-publish {
|
|
border: 1px solid #fbaa7b;
|
|
color: #fbaa7b;
|
|
opacity: 1;
|
|
}
|
|
|
|
.swal-title {
|
|
color: #fbaa7b;
|
|
opacity: 1;
|
|
}
|
|
|
|
.sorting {
|
|
height: 40px;
|
|
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.but {
|
|
position: relative;
|
|
|
|
left: -40px;
|
|
float: right;
|
|
border: none;
|
|
font-size: 16px;
|
|
color: white;
|
|
width: 288px;
|
|
height: 48px;
|
|
background: transparent linear-gradient(180deg, #ff6959 0%, #fbaa7b 100%) 0%
|
|
0% no-repeat padding-box;
|
|
box-shadow: 0px 5px 12px #fbaa7b;
|
|
border-radius: 15px;
|
|
opacity: 1;
|
|
}
|
|
|
|
.active {
|
|
text-align: center;
|
|
height: 43px;
|
|
}
|
|
|
|
.test-button {
|
|
border: none;
|
|
color: white;
|
|
width: 100px;
|
|
height: 35px;
|
|
background: transparent linear-gradient(180deg, #ffcd59 0%, #fbaa7b 100%) 0%
|
|
0% no-repeat padding-box;
|
|
box-shadow: 0px 3px 12px #fbaa7b;
|
|
border-radius: 21px;
|
|
opacity: 1;
|
|
}
|
|
|
|
.live-button {
|
|
border: none;
|
|
color: white;
|
|
width: 100px;
|
|
height: 35px;
|
|
background: transparent linear-gradient(180deg, #099314 0%, #09560b 100%) 0%
|
|
0% no-repeat padding-box;
|
|
box-shadow: 0px 3px 12px #083602;
|
|
border-radius: 21px;
|
|
opacity: 1;
|
|
}
|
|
|
|
.btn-inverse-publish:hover {
|
|
background: transparent linear-gradient(180deg, #ff6959 0%, #fbaa7b 100%) 0%
|
|
0% no-repeat padding-box;
|
|
color: white;
|
|
opacity: 1;
|
|
}
|
|
|
|
.btn-inverse-danger:hover {
|
|
color: white;
|
|
}
|
|
|
|
.btn-inverse-danger {
|
|
color: #5e48b9;
|
|
}
|
|
|
|
.btn-inverse-publish {
|
|
color: #5e48b9;
|
|
}
|
|
|
|
.btn-inverse-warning:not(.btn-inverse-light),
|
|
.btn-inverse-info:not(.btn-inverse-light),
|
|
.btn-inverse-danger:not(.btn-inverse-light),
|
|
.btn-inverse-danger:not(.btn-inverse-light) {
|
|
color: white;
|
|
}
|
|
|
|
.publish-button {
|
|
border: none;
|
|
color: white;
|
|
width: 100px;
|
|
height: 35px;
|
|
background: transparent linear-gradient(180deg, #ff6959 0%, #fbaa7b 100%) 0%
|
|
0% no-repeat padding-box;
|
|
box-shadow: 0px 3px 12px #fbaa7b;
|
|
border-radius: 21px;
|
|
opacity: 1;
|
|
}
|
|
|
|
.editwalk-button {
|
|
border: none;
|
|
color: white;
|
|
width: 100px;
|
|
height: 35px;
|
|
background: transparent linear-gradient(180deg, #92beff 0%, #6313dc 100%) 0%
|
|
0% no-repeat padding-box;
|
|
box-shadow: 0px 3px 12px #848cf4c4;
|
|
border-radius: 21px;
|
|
opacity: 1;
|
|
}
|
|
|
|
.delete-button {
|
|
border: none;
|
|
color: white;
|
|
width: 100px;
|
|
height: 35px;
|
|
background: transparent linear-gradient(180deg, #ff5959 0%, #d41f1f 100%) 0%
|
|
0% no-repeat padding-box;
|
|
box-shadow: 0px 3px 12px #ff9494;
|
|
border-radius: 21px;
|
|
opacity: 1;
|
|
}
|
|
|
|
.dataTables_wrapper .dataTables_processing {
|
|
width: 100vw;
|
|
/*height: 100vh;*/
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 1;
|
|
/*background: rgba(0, 0, 0, 0.7);*/
|
|
}
|
|
|
|
.loader {
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.license-filter {
|
|
/*float: right;
|
|
width: 17rem;*/
|
|
margin-right: 1px;
|
|
margin-bottom: 1px;
|
|
}
|
|
|
|
.status-capsule {
|
|
display: inline-block;
|
|
padding: 0px 10px;
|
|
font-size: 12px;
|
|
border-radius: 10px;
|
|
text-transform: uppercase;
|
|
font-weight: bold;
|
|
}
|
|
|
|
#example_filter {
|
|
float: left;
|
|
margin-bottom: 1px;
|
|
}
|
|
|
|
#example_filter input[type="search"] {
|
|
width: 30rem;
|
|
margin-right: 0.7rem;
|
|
border-radius: 1.5rem;
|
|
height: 40px;
|
|
}
|
|
|
|
/* Map Creation css */
|
|
.map {
|
|
background: transparent
|
|
linear-gradient(355deg, #e45b9a 0%, #c561b9 39%, #5145b9 78%, #2122ae 100%)
|
|
0% 0% no-repeat padding-box;
|
|
box-shadow: 0px 3px 30px #4d0d7d96;
|
|
border-radius: 51px;
|
|
opacity: 1;
|
|
width: 900px;
|
|
height: 620px;
|
|
margin: auto;
|
|
}
|
|
|
|
.banner-map {
|
|
max-height: 80vh;
|
|
max-width: 900px;
|
|
width: 90%;
|
|
}
|
|
.banner-map .card-body {
|
|
padding: 1rem;
|
|
}
|
|
.banner-map .forms-sample {
|
|
overflow-y: auto;
|
|
height: calc(100% - 50px);
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.close {
|
|
cursor: pointer;
|
|
border-radius: 30px;
|
|
}
|
|
.close-btn {
|
|
position: absolute;
|
|
right: 20px;
|
|
top: 20px;
|
|
}
|
|
.banner-map .preview {
|
|
height: 200px;
|
|
width: 200px;
|
|
}
|
|
|
|
.close:hover {
|
|
transition-timing-function: ease-in;
|
|
transition: 0.25s;
|
|
border: 1px solid #d0b7ff;
|
|
border-radius: 30px;
|
|
}
|
|
|
|
#listcategory {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.button {
|
|
background: transparent linear-gradient(180deg, #ff6959 0%, #fbaa7b 100%) 0%
|
|
0% no-repeat padding-box;
|
|
|
|
border-radius: 15px;
|
|
text-align: center;
|
|
opacity: 1;
|
|
width: 100%;
|
|
height: 60px;
|
|
color: white;
|
|
border: none;
|
|
}
|
|
|
|
.button:hover {
|
|
transition-timing-function: ease-in;
|
|
|
|
transition: 0.4s;
|
|
box-shadow: 0px 5px 12px #fbaa7b;
|
|
}
|
|
|
|
.image {
|
|
height: 40px;
|
|
width: 40px;
|
|
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.input {
|
|
width: 100%;
|
|
height: 40px;
|
|
background: #653dab 0% 0% no-repeat padding-box;
|
|
|
|
border: 1px solid #d0b7ff;
|
|
border-radius: 10px;
|
|
color: whitesmoke;
|
|
text-align: center;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.input:hover {
|
|
transition-timing-function: ease-in;
|
|
|
|
transition: 0.25s;
|
|
border: 2px solid #d0b7ff;
|
|
box-shadow: 0px 5px 12px #00000017;
|
|
}
|
|
|
|
.input::placeholder {
|
|
text-align: center;
|
|
color: lightgray;
|
|
}
|
|
|
|
.preview {
|
|
height: 120px;
|
|
width: 120px;
|
|
cursor: pointer;
|
|
border-radius: 0px;
|
|
margin-left: 28px;
|
|
}
|
|
|
|
.selected {
|
|
height: 200px;
|
|
margin-top: -10px;
|
|
}
|
|
|
|
.form-main {
|
|
display: flex;
|
|
gap: 30px;
|
|
}
|
|
|
|
.form-check {
|
|
width: 150px;
|
|
margin-top: 0;
|
|
}
|
|
|
|
.form-check .form-check-label {
|
|
line-height: 28px;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.collapse-main {
|
|
display: none;
|
|
}
|
|
|
|
@media (max-width: 991px) {
|
|
#example_filter input[type="search"] {
|
|
width: 14rem;
|
|
/*float: right;
|
|
margin-left: 10px;*/
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 768px) {
|
|
.selected {
|
|
margin-top: -35px;
|
|
}
|
|
|
|
.preview {
|
|
margin-left: 0px;
|
|
}
|
|
|
|
.but {
|
|
width: 200px;
|
|
position: relative;
|
|
left: -5px;
|
|
}
|
|
}
|
|
.dataTable th:nth-child(3),.dataTable td:nth-child(3){
|
|
width: 350px;
|
|
max-width: 350px;
|
|
min-width: 350px;
|
|
word-wrap: break-word;
|
|
}
|
|
</style>
|
|
<script src='https://code.jquery.com/jquery-3.3.1.js'></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.13.0/umd/popper.min.js"></script>
|
|
|
|
<script>
|
|
$(document).ready(function () {
|
|
|
|
let isEdit = false;
|
|
|
|
$.fn.dataTable.ext.buttons.refresh = {
|
|
text: 'Refresh'
|
|
, action: function (e, dt, node, config) {
|
|
dt.clear().draw();
|
|
dt.ajax.reload();
|
|
}
|
|
};
|
|
|
|
var t = $('#example').DataTable({
|
|
"processing": true,
|
|
'select': {
|
|
style: 'multi',
|
|
selector: 'td:nth-child(1)'
|
|
},
|
|
"ajax": {
|
|
"url": "api/list-banners",
|
|
"type": "GET"
|
|
},
|
|
"deferRender": true,
|
|
"dom": 'B<"table-header"f>rtip',
|
|
|
|
"columns": [
|
|
//{ 'data': "Map_Name" , "defaultContent": '' }, //0
|
|
{
|
|
"data": null,
|
|
"fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
|
|
let serialNumber = iRow + 1;
|
|
|
|
$(nTd).html('<div title="' + sData.Map_Description + '">' + serialNumber + '</div>');
|
|
}
|
|
}, //0
|
|
|
|
{
|
|
"data": "image",
|
|
"defaultContent": '',
|
|
"render": function (data, type, row, meta) {
|
|
if (type == 'display') {
|
|
data = '<img style="border-radius:10px;height:50px;width:50px" src="' + data + '" target="_blank"/>';
|
|
}
|
|
return data;
|
|
}
|
|
}, //1
|
|
{ "data": "location_name", "defaultContent": '' },//2
|
|
|
|
|
|
{
|
|
"data": null, //5
|
|
"fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
|
|
var btntype, btntext, btntype1, btntext1;
|
|
|
|
if (sData.Map_Type == 'Normal') {
|
|
$(nTd).html('<button type="button" class="editwalk-button btn btn-inverse-info btn-fw " style="margin-top: 1rem;margin-right: 1rem;padding:0.5rem;width: 6rem;font-size:13px;">Edit Banner</button><button type="button" class="delete-button btn btn-inverse-danger btn-fw " style="margin-top: 1rem;margin-right: 1rem;padding:0.5rem;width: 6rem;font-size:13px;">Delete</button>');
|
|
} else {
|
|
$(nTd).html('<button type="button" class="editwalk-button btn btn-inverse-info btn-fw " style="margin-top: 1rem;margin-right: 1rem;padding:0.5rem;width: 6rem;font-size:13px;">Edit Banner</button><button type="button" class="delete-button btn btn-inverse-danger btn-fw " style="margin-top: 1rem;margin-right: 1rem;padding:0.5rem;width: 6rem;font-size:13px;">Delete</button>');
|
|
}
|
|
|
|
}
|
|
}
|
|
]
|
|
});
|
|
|
|
$("div.table-header").append('<button type="button" class="add-button but" style="float:right;margin-right: 6px;width: 13rem;height:40px;font-size:13px" >+ CREATE NEW BANNER</button>');
|
|
|
|
|
|
|
|
$('#example').on('click', 'tbody .editwalk-button', function () {
|
|
|
|
var data = t.row($(this).closest('tr')).data();
|
|
var _id = data._id;
|
|
|
|
$('#exampleInputMapname1').val(data.location_name);
|
|
$('#blah').attr('src',data.image);
|
|
|
|
const ui = {
|
|
confirm: async (message) => createConfirm(message)
|
|
}
|
|
const createConfirm = (message) => {
|
|
return new Promise((complete, failed) => {
|
|
|
|
$('#confirmMessage').text(message)
|
|
|
|
$('#confirmYes').off('click');
|
|
$('#confirmNo').off('click');
|
|
|
|
$('#confirmYes').on('click', () => { $('.confirm').hide(); complete(true); });
|
|
$('#confirmNo').on('click', () => { $('.confirm').hide(); complete(false); });
|
|
|
|
$('#confirmYes').html('<img class="image" src="images/amblecreate.svg" /><br>UPDATE BANNER');
|
|
|
|
$('.confirm').show();
|
|
|
|
});
|
|
}
|
|
|
|
async function f() {
|
|
const confirm = await ui.confirm('Banner Details');
|
|
isEdit = true;
|
|
if (confirm) {
|
|
var mapname = document.getElementById("exampleInputMapname1").value;
|
|
var mapthumbnail = document.getElementById('mapthumbnail').files[0];
|
|
|
|
if (mapname === "" || mapthumbnail === "") {
|
|
showSwal('emptycred-title-and-text', "");
|
|
} else {
|
|
var formData = new FormData();
|
|
formData.append('location_name', mapname)
|
|
formData.append('image', mapthumbnail)
|
|
|
|
var url = "/api/update-banner/" + _id;
|
|
var resp;
|
|
console.log(url)
|
|
fetch(url, {
|
|
method: 'PATCH',
|
|
body: formData
|
|
}).then((resp) => {
|
|
return resp.json();
|
|
}).then((resp) => {
|
|
t.ajax.reload();
|
|
showSwal('success-message', "");
|
|
|
|
}).catch((error) => {
|
|
console.error(error);
|
|
})
|
|
|
|
}
|
|
} else {
|
|
|
|
}
|
|
|
|
};
|
|
f();
|
|
});
|
|
|
|
|
|
$('#example').on('click', 'tbody .delete-button', function () {
|
|
var data = t.row($(this).closest('tr')).data();
|
|
const ui = {
|
|
confirm: async (message) => createConfirm(message)
|
|
}
|
|
const createConfirm = (message) => {
|
|
return new Promise((complete, failed) => {
|
|
$('#confirmDeleteMessageadd').text(message)
|
|
|
|
$('#confirmYesdelete').off('click');
|
|
$('#confirmNodelete').off('click');
|
|
|
|
$('#confirmYesdelete').on('click', () => { $('.confirmdelete').hide(); complete(true); });
|
|
$('#confirmNodelete').on('click', () => { $('.confirmdelete').hide(); complete(false); });
|
|
|
|
$('.confirmdelete').show();
|
|
});
|
|
}
|
|
|
|
async function f() {
|
|
const confirm = await ui.confirm('Delete');
|
|
if (confirm) {
|
|
if (data && data._id) { // Check if data and _id are defined
|
|
var _id = data._id;
|
|
$.ajax({
|
|
method: "DELETE",
|
|
url: "/api/delete-banner/" + _id, // Use route parameter for _id
|
|
data: {
|
|
_id: _id
|
|
},
|
|
success: (data) => {
|
|
t.ajax.reload();
|
|
showSwal('success-message', data.message);
|
|
},
|
|
error: (data) => {
|
|
showSwal('failure-message', data.message);
|
|
}
|
|
});
|
|
} else {
|
|
console.log("No data or _id found");
|
|
}
|
|
} else {
|
|
// Do nothing if user cancels
|
|
}
|
|
};
|
|
f();
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
$('#logoutButton').on('click', function () {
|
|
const ui = {
|
|
confirm: async (message) => createConfirm(message)
|
|
}
|
|
const createConfirm = (message) => {
|
|
return new Promise((complete, failed) => {
|
|
$('#confirmLogoutMessageadd').text(message)
|
|
|
|
$('#confirmYeslogout').off('click');
|
|
$('#confirmNologout').off('click');
|
|
|
|
$('#confirmYeslogout').on('click', () => { $('.confirmlogout').hide(); complete(true); });
|
|
$('#confirmNologout').on('click', () => { $('.confirmlogout').hide(); complete(false); });
|
|
|
|
$('.confirmlogout').show();
|
|
});
|
|
}
|
|
|
|
async function f() {
|
|
const confirm = await ui.confirm('Logout');
|
|
if (confirm) {
|
|
window.location.href = '/logout';
|
|
}
|
|
else {
|
|
}
|
|
};
|
|
f();
|
|
});
|
|
|
|
|
|
$('.add-button').on('click', function () {
|
|
$('#exampleInputMapname1').val('');
|
|
$('#blah').attr('src', 'images/plus.svg');
|
|
|
|
const ui = {
|
|
confirm: async (message) => createConfirm(message)
|
|
}
|
|
const createConfirm = (message) => {
|
|
return new Promise((complete, failed) => {
|
|
$('#confirmMessage').text(message)
|
|
|
|
$('#confirmYes').off('click');
|
|
$('#confirmNo').off('click');
|
|
|
|
$('#confirmYes').on('click', () => { $('.confirm').hide(); complete(true); });
|
|
$('#confirmNo').on('click', () => { $('.confirm').hide(); complete(false); });
|
|
$('#confirmYes').html('<img class="image" src="images/amblecreate.svg" /><br>CREATE BANNER');
|
|
|
|
|
|
$('.confirm').show();
|
|
});
|
|
}
|
|
|
|
async function f() {
|
|
const confirm = await ui.confirm('Banner Details');
|
|
isEdit = false;
|
|
if (confirm) {
|
|
var mapname = document.getElementById("exampleInputMapname1").value;
|
|
var mapthumbnail = document.getElementById('mapthumbnail').files[0];
|
|
|
|
if (mapname === "" || mapthumbnail === "") {
|
|
showSwal('emptycred-title-and-text', "");
|
|
} else {
|
|
var formData = new FormData();
|
|
formData.append('location_name', mapname)
|
|
formData.append('image', mapthumbnail)
|
|
|
|
|
|
|
|
// var url = "/api/update-banner?" + new URLSearchParams({ mapid: mapid })
|
|
var url = "/api/create-banner"
|
|
|
|
console.log(url)
|
|
await fetch(url, {
|
|
method: 'POST',
|
|
body: formData
|
|
}).then((resp) => {
|
|
return resp.json();
|
|
}).then((resp) => {
|
|
console.log(resp)
|
|
t.ajax.reload();
|
|
showSwal('success-message', "");
|
|
|
|
|
|
|
|
}).catch((error) => {
|
|
console.error(error);
|
|
})
|
|
|
|
|
|
|
|
}
|
|
} else {
|
|
|
|
}
|
|
|
|
};
|
|
f();
|
|
});
|
|
|
|
});
|
|
|
|
$('.editbanner-button').on('click', function () {
|
|
$('#exampleInputMapname1').val('');
|
|
$('#blah').attr('src', 'images/plus.svg');
|
|
|
|
const ui = {
|
|
confirm: async (message) => createConfirm(message)
|
|
}
|
|
const createConfirm = (message) => {
|
|
return new Promise((complete, failed) => {
|
|
$('#confirmMessage').text(message)
|
|
|
|
$('#confirmYes').off('click');
|
|
$('#confirmNo').off('click');
|
|
|
|
$('#confirmYes').on('click', () => { $('.confirm').hide(); complete(true); });
|
|
$('#confirmNo').on('click', () => { $('.confirm').hide(); complete(false); });
|
|
|
|
$('.confirm').show();
|
|
});
|
|
}
|
|
|
|
async function f() {
|
|
const confirm = await ui.confirm('Banner Details');
|
|
if (confirm) {
|
|
var mapname = document.getElementById("exampleInputMapname1").value;
|
|
var mapthumbnail = document.getElementById('mapthumbnail').files[0];
|
|
|
|
if (mapname === "" || mapthumbnail === "") {
|
|
showSwal('emptycred-title-and-text', "");
|
|
} else {
|
|
var formData = new FormData();
|
|
formData.append('location_name', mapname)
|
|
formData.append('image', mapthumbnail)
|
|
|
|
|
|
|
|
// var url = "/api/update-banner?" + new URLSearchParams({ mapid: mapid })
|
|
var url = "/api/update-banner"
|
|
|
|
console.log(url)
|
|
await fetch(url, {
|
|
method: 'PATCH',
|
|
body: formData
|
|
}).then((resp) => {
|
|
return resp.json();
|
|
}).then((resp) => {
|
|
console.log(resp)
|
|
t.ajax.reload();
|
|
showSwal('success-message', "");
|
|
|
|
|
|
|
|
}).catch((error) => {
|
|
console.error(error);
|
|
})
|
|
|
|
|
|
|
|
}
|
|
} else {
|
|
|
|
}
|
|
|
|
};
|
|
f();
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
|
|
<div class="container-scroller">
|
|
<nav class="navbar navbar-expand-lg ">
|
|
<div class="container-fluid">
|
|
<a class="navbar-brand" href="/walklist"><img src="images/LogoFulldark.png" height="50px" width="50px"
|
|
style="margin-left: 10px;" /></a>
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText"
|
|
aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse" id="navbarText">
|
|
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
|
<li class="nav-item">
|
|
|
|
</li>
|
|
</ul>
|
|
<span class="navbar-text">
|
|
|
|
|
|
|
|
<ul class="navbar-nav ul">
|
|
|
|
<li class="nav-item dropdown profile">
|
|
<span class="nav-link arrow " id="userdetailsDropdown" data-toggle="dropdown" style="cursor:pointer">
|
|
<img src="images/Polygon 1.svg" width="16px" height="10px" />
|
|
</span>
|
|
|
|
<h4 class="h4">{{loggedusername}}
|
|
|
|
</h4>
|
|
<div class="pic" id="userdetailsDropdown" data-toggle="dropdown" style="cursor:pointer">
|
|
<img src="#" id="profile" height="40px" width="40px"
|
|
style="border-radius:50%;position:relative;top:-12px;left:-1px" />
|
|
</div>
|
|
<script>
|
|
var login = localStorage.getItem("login");
|
|
$('#profile').attr('src', `${login}`);
|
|
</script>
|
|
|
|
|
|
|
|
<div class="dropdown-menu dropdown-menu-right navbar-dropdown preview-list"
|
|
aria-labelledby="userdetailsDropdown">
|
|
<h6 style="background:#f6f6f6" class="p-3 mb-0">Account Details</h6>
|
|
<div class="dropdown-divider"></div>
|
|
<a class="dropdown-item preview-item">
|
|
<div class="preview-item-content">
|
|
<h6 class="preview-subject mb-1">Name: <span
|
|
style="color: #5E48B9;font-weight:normal;">{{loggedusername}} </span></h6>
|
|
</div>
|
|
</a>
|
|
|
|
<div class="dropdown-divider"></div>
|
|
<a class="dropdown-item preview-item" href="/banner">
|
|
<div class="preview-item-content">
|
|
<i class="mdi mdi-google-photos menu-icon"></i>
|
|
<span class="preview-subject mb-1" style="font-weight:bold;">Banner</span>
|
|
</div>
|
|
</a>
|
|
|
|
<div class="dropdown-divider"></div>
|
|
<a class="dropdown-item preview-item" href="/userlist">
|
|
<div class="preview-item-content">
|
|
<i class="mdi mdi-google-photos menu-icon"></i>
|
|
<span class="preview-subject mb-1" style="font-weight:bold;">User List</span>
|
|
</div>
|
|
</a>
|
|
|
|
<div class="dropdown-divider"></div>
|
|
<a class="dropdown-item preview-item" href="/feedback">
|
|
<div class="preview-item-content">
|
|
<i class="mdi mdi-google-photos menu-icon"></i>
|
|
<span class="preview-subject mb-1" style="font-weight:bold;">Feedback</span>
|
|
</div>
|
|
</a>
|
|
|
|
<div class="dropdown-divider"></div>
|
|
<a class="dropdown-item preview-item" id="logoutButton">
|
|
<div class="preview-item-content">
|
|
<i class="mdi mdi-logout menu-icon"></i>
|
|
<span class="preview-subject mb-1" style="font-weight:bold;">Logout</span>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
|
|
|
|
<div class="main-panel">
|
|
<div class="section">
|
|
|
|
<div class="confirmpublish">
|
|
<div>
|
|
<div id="confirmPublishMessageadd"
|
|
style="font-size: 1.1rem; font-weight: bolder;text-align:left;padding-left: 1.5rem;padding-bottom:1.5rem;padding-top:1.5rem;color:#5E48B9">
|
|
Publish</div>
|
|
<div class="col-md-12 grid-margin stretch-card" style="
|
|
padding-left: 1.5rem;
|
|
padding-right: 1.5rem;
|
|
margin-bottom: 1.5rem;">
|
|
<div class="card">
|
|
<div class="card-body" style="padding-bottom: 1.5rem;">
|
|
<h4 class="card-title" style="margin-bottom: 0.75rem">Are you sure want to publish/unpublish?</h4>
|
|
{{!-- <p class="card-description">
|
|
Basic form layout
|
|
</p> --}}
|
|
<form class="forms-sample">
|
|
<input id="confirmYespublish" class="btn btn-inverse-publish btn-fw" type="button"
|
|
style="margin-bottom: 0.5rem;margin-right: 0.5rem;" value="Ok" />
|
|
<input id="confirmNopublish" class="btn btn-inverse-danger btn-fw" type="button"
|
|
style="margin-bottom: 0.5rem;color:#5E48B9" value="Cancel" />
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="confirmtest">
|
|
<div>
|
|
<div id="confirmTestMessageadd"
|
|
style="font-size: 1.1rem; font-weight: bolder;text-align:left;padding-left: 1.5rem;padding-bottom:1.5rem;padding-top:1.5rem;color:#5E48B9">
|
|
Walk Type</div>
|
|
<div class="col-md-12 grid-margin stretch-card" style="
|
|
padding-left: 1.5rem;
|
|
padding-right: 1.5rem;
|
|
margin-bottom: 1.5rem;">
|
|
<div class="card">
|
|
<div class="card-body" style="padding-bottom: 1.5rem;">
|
|
<h4 class="card-title" style="margin-bottom: 0.75rem">Are you sure want to change walk type?</h4>
|
|
{{!-- <p class="card-description">
|
|
Basic form layout
|
|
</p> --}}
|
|
<form class="forms-sample">
|
|
<input id="confirmYestest" class="btn btn-inverse-publish btn-fw" type="button"
|
|
style="margin-bottom: 0.5rem;margin-right: 0.5rem;" value="Ok" />
|
|
<input id="confirmNotest" class="btn btn-inverse-danger btn-fw" type="button"
|
|
style="margin-bottom: 0.5rem;color:#5E48B9" value="Cancel" />
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="confirmedit">
|
|
<div>
|
|
<div id="confirmTestEditadd"
|
|
style="font-size: 1.1rem; font-weight: bolder;text-align:left;padding-left: 1.5rem;padding-bottom:1.5rem;padding-top:1.5rem;color:#5E48B9">
|
|
Edit Banner</div>
|
|
<div class="col-md-12 grid-margin stretch-card" style="
|
|
padding-left: 1.5rem;
|
|
padding-right: 1.5rem;
|
|
margin-bottom: 1.5rem;">
|
|
<div class="card">
|
|
<div class="card-body" style="padding-bottom: 1.5rem;">
|
|
<h4 class="card-title" style="margin-bottom: 0.75rem">Are you sure want to edit banner?</h4>
|
|
{{!-- <p class="card-description">
|
|
Basic form layout
|
|
</p> --}}
|
|
<form class="forms-sample">
|
|
<input id="confirmYesedit" class="btn btn-inverse-publish btn-fw" type="button"
|
|
style="margin-bottom: 0.5rem;margin-right: 0.5rem;" value="Ok" />
|
|
<input id="confirmNoedit" class="btn btn-inverse-danger btn-fw" type="button"
|
|
style="margin-bottom: 0.5rem;color:#5E48B9" value="Cancel" />
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="confirmdelete">
|
|
<div>
|
|
<div id="confirmDeleteMessageadd"
|
|
style="font-size: 1.1rem; font-weight: bolder;text-align:left;padding-left: 1.5rem;padding-bottom:1.5rem;padding-top:1.5rem;color:#5E48B9">
|
|
Delete</div>
|
|
<div class="col-md-12 grid-margin stretch-card" style="
|
|
padding-left: 1.5rem;
|
|
padding-right: 1.5rem;
|
|
margin-bottom: 1.5rem;">
|
|
<div class="card">
|
|
<div class="card-body" style="padding-bottom: 1.5rem;">
|
|
<h4 class="card-title" style="margin-bottom: 0.75rem">Are you sure want to delete the banner?</h4>
|
|
{{!-- <p class="card-description">
|
|
Basic form layout
|
|
</p> --}}
|
|
<form class="forms-sample">
|
|
<input id="confirmYesdelete" class="btn btn-inverse-publish btn-fw" type="button"
|
|
style="margin-bottom: 0.5rem;margin-right: 0.5rem;" value="Ok" />
|
|
<input id="confirmNodelete" class="btn btn-inverse-danger btn-fw" type="button"
|
|
style="margin-bottom: 0.5rem; color:#5E48B9" value="Cancel" />
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="confirmlogout">
|
|
<div>
|
|
<div id="confirmLogoutMessageadd"
|
|
style="font-size: 1.1rem; font-weight: bolder;text-align:left;padding-left: 1.5rem;padding-bottom:1.5rem;padding-top:1.5rem;color:#5E48B9">
|
|
Logout</div>
|
|
<div class="col-md-12 grid-margin stretch-card" style="
|
|
padding-left: 1.5rem;
|
|
padding-right: 1.5rem;
|
|
margin-bottom: 1.5rem;">
|
|
<div class="card">
|
|
<div class="card-body" style="padding-bottom: 1.5rem;">
|
|
<h4 class="card-title" style="margin-bottom: 0.75rem">Are you sure want to logout or not?</h4>
|
|
{{!-- <p class="card-description">
|
|
Basic form layout
|
|
</p> --}}
|
|
<form class="forms-sample">
|
|
<input id="confirmYeslogout" class="btn btn-inverse-publish btn-fw" type="button"
|
|
style="margin-bottom: 0.5rem;margin-right: 0.5rem;" value="Ok" />
|
|
<input id="confirmNologout" class="btn btn-inverse-danger btn-fw" type="button"
|
|
style="margin-bottom: 0.5rem; color:#5E48B9" value="Cancel" />
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="confirm">
|
|
<div style="background: none; width: 100%">
|
|
|
|
|
|
|
|
<div class="card map banner-map">
|
|
<div class="card-body" style="margin:20px">
|
|
|
|
|
|
|
|
|
|
<div class="form-group">
|
|
<div class="row">
|
|
<div class="col-md-10">
|
|
<div id="confirmMessage" class="h3sty" style="color: #FFFFFF;">Organisation</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
<div class="close-btn">
|
|
<img src="images/close.svg" height="50px" width="50px" id="confirmNo" class="close" />
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<form class="forms-sample">
|
|
<div class="form-main">
|
|
<div>
|
|
<div class="row">
|
|
|
|
<div class="col-md-12">
|
|
<div class="form-group">
|
|
<label for="exampleInputMapname1"
|
|
style="color:#FFFFFF;font-size:14px;text-transform: uppercase;">Location Name</label>
|
|
<input type="text" class="input" id="exampleInputMapname1" placeholder="Enter Location Name"
|
|
style="width: 100%">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<div class="form-group">
|
|
<label for="exampleInputMapthumbnail1"
|
|
style="color:#FFFFFF;font-size:14px;text-transform: uppercase;position:relative;">Add
|
|
Banner Image</label>
|
|
<input type='file' id="mapthumbnail" name="mapthumbnail" style="visibility: hidden;height:0" />
|
|
<p type="button" style="margin-left: 0;" class="input preview"
|
|
onclick="document.getElementById('mapthumbnail').click()"><img id="blah"
|
|
src="images/plus.svg" alt="your image" width="100%" height="100%"
|
|
style="pointer:cursor" /></p>
|
|
|
|
</div>
|
|
</div>
|
|
<br>
|
|
|
|
|
|
|
|
<script>
|
|
function readURL(input) {
|
|
if (input.files || input.files[0]) {
|
|
|
|
var reader = new FileReader();
|
|
|
|
reader.onload = function (e) {
|
|
|
|
$('#blah').attr('src', e.target.result);
|
|
|
|
}
|
|
|
|
reader.readAsDataURL(input.files[0]);
|
|
}
|
|
}
|
|
|
|
$("#mapthumbnail").change(function () {
|
|
readURL(this);
|
|
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
<div class="row">
|
|
|
|
<div class="col-md-12">
|
|
<button class="button" id="confirmYes" type="button"
|
|
style="height: 95px;width:125px;font-size:14px"><img class="image"
|
|
src="images/amblecreate.svg" /><br> CREATE BANNER </button>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</form>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card card1">
|
|
<div class="card-body">
|
|
<h4 class=" h3sty">All Banners</h4>
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="table-responsive">
|
|
<table id="example" class="table">
|
|
<thead>
|
|
<tr class="thead">
|
|
<th style="border-radius: 20px 0px 0px 0px;font-size:13px">S.No</th>
|
|
<th style="font-size:13px">Images</th>
|
|
<th style="font-size:13px">Banner Name</th>
|
|
|
|
<th style="border-radius: 0px 20px 0px 0px;font-size:13px"></th>
|
|
</tr>
|
|
</thead>
|
|
<tfoot style="display:none;">
|
|
<tr>
|
|
<th class="search">S.No</th>
|
|
|
|
<th class="search">Images</th>
|
|
<th class="search">Banner Name</th>
|
|
|
|
<th class="search">Actions</th>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- content-wrapper ends -->
|
|
<!-- partial:partials/_footer.html -->
|
|
<footer class="footer">
|
|
<div class="d-sm-flex justify-content-center justify-content-sm-between">
|
|
<span class="text-muted text-center text-sm-left d-block d-sm-inline-block">Copyright © <a href="#"
|
|
target="_blank">RPG</a> 2020-21. All rights reserved.</span>
|
|
<span class="float-none float-sm-right d-block mt-1 mt-sm-0 text-center" id="timestamp"></span>
|
|
</div>
|
|
</footer>
|
|
<!-- partial -->
|
|
</div>
|
|
<!-- main-panel ends -->
|
|
</div>
|
|
<!-- page-body-wrapper ends -->
|
|
</div>
|
|
<!-- container-scroller -->
|
|
|
|
<!-- plugins:js -->
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
|
|
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
|
|
crossorigin="anonymous"></script>
|
|
<script src="vendors/js/vendor.bundle.base.js"></script>
|
|
<script src="vendors/js/vendor.bundle.addons.js"></script>
|
|
</body>
|
|
</html> |