2144 lines
72 KiB
Handlebars
2144 lines
72 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">
|
|
{{!--
|
|
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">
|
|
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.6.4/css/buttons.dataTables.min.css"> --}}
|
|
<!-- endinject -->
|
|
<!-- 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">
|
|
{{!--
|
|
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.6.1/css/buttons.bootstrap4.min.css">
|
|
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.3/css/responsive.dataTables.min.css">
|
|
<link rel="stylesheet"
|
|
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" /> --}}
|
|
<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;
|
|
/*float: right;
|
|
margin-left: 10px;*/
|
|
}
|
|
|
|
/* 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;
|
|
|
|
|
|
}
|
|
|
|
.close {
|
|
cursor: pointer;
|
|
border-radius: 30px;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.box {
|
|
height: auto;
|
|
}
|
|
|
|
.create-walk-btn{
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
input[type=date]{
|
|
position: relative;
|
|
font-size: 0;
|
|
height: 36px;
|
|
width: calc(100% - 4px);
|
|
outline: none;
|
|
box-sizing: border-box;
|
|
}
|
|
input[type=date]::-webkit-calendar-picker-indicator {
|
|
bottom: 0;
|
|
color: transparent;
|
|
cursor: pointer;
|
|
height: auto;
|
|
left: 0;
|
|
opacity: 0;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
width: 100%
|
|
}
|
|
input[type=date]:before{
|
|
content: 'Select Date';
|
|
width: 100%;
|
|
background: url('images/calendar.svg') no-repeat 99% 5px;
|
|
height: 36px;
|
|
font-size: 16px;
|
|
border: 0;
|
|
position: absolute;
|
|
left: 0px;
|
|
top: 0px;
|
|
color: #FFF;
|
|
line-height: 36px;
|
|
background-size: 22px;
|
|
}
|
|
input[type=time]{
|
|
position: relative;
|
|
font-size: 0;
|
|
height: 28px;
|
|
}
|
|
input[type=time]::-webkit-calendar-picker-indicator {
|
|
bottom: 0;
|
|
color: transparent;
|
|
cursor: pointer;
|
|
height: auto;
|
|
left: 0;
|
|
opacity: 0;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
width: 100%
|
|
}
|
|
input[type=time]:before{
|
|
content: 'Select Time Slot';
|
|
width: 100%;
|
|
background: url('images/time-picker.png') no-repeat 96% 4px;
|
|
height: 28px;
|
|
font-size: 13px;
|
|
border: 0;
|
|
position: absolute;
|
|
left: 0px;
|
|
top: 0px;
|
|
color: #FFF;
|
|
line-height: 28px;
|
|
background-size: 18px;
|
|
}
|
|
|
|
.form-scroll-center{
|
|
overflow: auto;
|
|
}
|
|
.card .card-body.create-new-walk-popup{
|
|
padding:1.5rem;
|
|
}
|
|
.create-new-walk-popup .forms-sample{
|
|
display: flex;
|
|
flex-direction: column;
|
|
//justify-content: space-between;
|
|
height: 100%;
|
|
}
|
|
.form-scroll-center{
|
|
width: 100%;
|
|
display: block !important;
|
|
}
|
|
#datePicker{
|
|
margin-bottom: 20px;
|
|
}
|
|
.selectedDatesContainer{
|
|
gap: 3.5%;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
.selectedDatesContainer .dateGroup, .chip {
|
|
height: auto;
|
|
background: #653DAB 0% 0% no-repeat padding-box;
|
|
border: 1px solid #D0B7FF;
|
|
border-radius: 10px;
|
|
color: whitesmoke;
|
|
text-align: center;
|
|
opacity: 1;
|
|
margin-bottom: 20px;
|
|
padding: 10px 20px;
|
|
width: 31%;
|
|
position: relative;
|
|
}
|
|
.selectedDatesContainer .dateGroup .chip{
|
|
width: 43%;
|
|
float: left;
|
|
margin: 0 3% 8px;
|
|
display: flex;
|
|
padding: 5px 10px;
|
|
font-size: 13px;
|
|
align-items: center;
|
|
line-height: 16px;
|
|
}
|
|
.selectedDatesContainer .dateGroup button{
|
|
background: url('images/delete-datecard.svg') no-repeat;
|
|
width: 20px;
|
|
height: 20px;
|
|
background-size: cover;
|
|
font-size: 0;
|
|
border: 0;
|
|
position: absolute;
|
|
right: 3px;
|
|
top: 3px;
|
|
}
|
|
.selectedDatesContainer .chipsContainer .chip{
|
|
position: relative;
|
|
}
|
|
.selectedDatesContainer .chipsContainer .chip button{
|
|
background: url('images/delete-chips.svg') no-repeat;
|
|
width: 17px;
|
|
height: 17px;
|
|
background-size: cover;
|
|
font-size: 0;
|
|
border: 0;
|
|
position: absolute;
|
|
right: 3px;
|
|
top: 3px;
|
|
|
|
}
|
|
.form-group .dateGroup label {
|
|
font-size:1rem;
|
|
width: 100%;
|
|
}
|
|
.timePicker {
|
|
width: 100%;
|
|
height: auto;
|
|
background: #653DAB 0% 0% no-repeat padding-box;
|
|
border: 1px solid #D0B7FF;
|
|
border-radius: 10px;
|
|
color: whitesmoke;
|
|
text-align: center;
|
|
opacity: 1;
|
|
margin-bottom: 8px;
|
|
}
|
|
.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;
|
|
}
|
|
}
|
|
</style>
|
|
<style>
|
|
#pencet1 {
|
|
cursor: pointer;
|
|
}
|
|
|
|
#pencet1 span {
|
|
background-color: #5E48B9;
|
|
width: 0.8em;
|
|
height: .1em;
|
|
margin: 0.15em 0;
|
|
display: block;
|
|
transition: all .4s ease;
|
|
transform-origin: 0 0;
|
|
}
|
|
|
|
#pencet2 {
|
|
cursor: pointer;
|
|
}
|
|
|
|
#pencet2 span {
|
|
background-color: #5E48B9;
|
|
width: 0.6em;
|
|
height: .08em;
|
|
margin: 0.12em 0;
|
|
display: block;
|
|
transition: all .4s ease;
|
|
transform-origin: 0 0;
|
|
}
|
|
|
|
.Diam span:nth-child(1) {
|
|
transform: rotate(45deg) translate(0px, -3px);
|
|
}
|
|
|
|
.Diam span:nth-child(2) {
|
|
Transform: scaleX(0);
|
|
}
|
|
|
|
.Diam span:nth-child(3) {
|
|
transform: rotate(-45deg) translate(1px, 0);
|
|
}
|
|
</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 src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
|
|
<script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
|
|
<script src="https://cdn.datatables.net/buttons/1.6.1/js/dataTables.buttons.min.js"></script>
|
|
<script src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.bootstrap4.min.js"></script>
|
|
<script src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.print.min.js"></script>
|
|
<script src="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js"></script>
|
|
<script
|
|
src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
|
|
<script src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.html5.min.js"></script>
|
|
<script src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.print.min.js"></script>
|
|
<script src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.colVis.min.js"></script>
|
|
<script src="//cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.js"></script>
|
|
<script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
$(document).ready(function () {
|
|
$.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,
|
|
//"serverSide": true,
|
|
//"select": true,
|
|
'select': {
|
|
//style: 'os',
|
|
style: 'multi',
|
|
selector: 'td:nth-child(1)'
|
|
//selector: 'td:nth-child(1),:nth-child(2)'
|
|
},
|
|
"ajax": {
|
|
"url": "api/getallrpgpublishedwalkinfodata1",
|
|
"type": "GET"
|
|
},
|
|
language: {
|
|
searchPlaceholder: "Type here.."
|
|
},
|
|
"deferRender": true,
|
|
"dom": 'B<"table-header"f>rtip',
|
|
'buttons': [
|
|
{
|
|
extend: 'excel',
|
|
exportOptions: {
|
|
columns: "thead th:not(.noExport)"
|
|
}
|
|
},
|
|
{
|
|
extend: 'pdfHtml5',
|
|
orientation: 'landscape',
|
|
pageSize: 'LEGAL',
|
|
exportOptions: {
|
|
columns: "thead th:not(.noExport)"
|
|
}
|
|
},
|
|
{
|
|
extend: 'print',
|
|
text: 'Print all',
|
|
exportOptions: {
|
|
modifier: {
|
|
selected: null
|
|
},
|
|
columns: "thead th:not(.noExport)"
|
|
}
|
|
},
|
|
{
|
|
extend: 'print',
|
|
text: 'Print selected',
|
|
exportOptions: {
|
|
columns: "thead th:not(.noExport)"
|
|
}
|
|
},
|
|
{
|
|
extend: 'refresh',
|
|
exportOptions: {
|
|
columns: "thead th:not(.noExport)"
|
|
}
|
|
},
|
|
{
|
|
extend: 'pageLength'
|
|
}
|
|
],
|
|
"columns": [
|
|
//{ 'data': "Map_Name" , "defaultContent": '' }, //0
|
|
{
|
|
"data": null,
|
|
"fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
|
|
$(nTd).html('<div title="' + sData.Map_Description + '">' + sData.Map_ID + '</div>');
|
|
}
|
|
}, //0
|
|
|
|
{
|
|
"data": "Map_Thumbnail_URL",
|
|
"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": "Map_Name", "defaultContent": '' },//2
|
|
{ "data": "Total_POI", "defaultContent": '' }, //3
|
|
|
|
{ "data": "Map_Ratting", "defaultContent": '' }, //4
|
|
|
|
{
|
|
"data": null, //5
|
|
"fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
|
|
var btntype, btntext, btntype1, btntext1;
|
|
if (sData.Map_Type == "Normal") {
|
|
if (sData.Map_Status == 'Published') {
|
|
btntype = 'btn-inverse-danger';
|
|
btntext = 'Unpublish';
|
|
}
|
|
else {
|
|
btntype = 'btn-inverse-publish';
|
|
btntext = 'Publish';
|
|
}
|
|
} else {
|
|
|
|
btntype = 'btn-inverse-publish disabled';
|
|
btntext = 'Publish';
|
|
|
|
}
|
|
|
|
if (sData.Map_Type == 'Normal') {
|
|
btntype1 = 'btn-inverse-warning';
|
|
btntext1 = 'Live For All';
|
|
}
|
|
else {
|
|
btntype1 = 'btn-inverse-warning';
|
|
btntext1 = 'Test';
|
|
}
|
|
if (sData.Map_Type == 'Normal') {
|
|
$(nTd).html('<button type="button" class="test-button live-button btn ' + btntype1 + ' btn-fw " style="margin-top: 1rem;margin-right: 1rem;padding:0.5rem;width: 6rem;font-size:13px">' + btntext1 + '</button><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 Walk</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><button type="button" class="publish-button btn ' + btntype + ' btn-fw " style="margin-top: 1rem;margin-right: 0rem;padding:0.5rem;width: 6rem;font-size:13px;">' + btntext + '</button>');
|
|
} else {
|
|
$(nTd).html('<button type="button" class="test-button btn ' + btntype1 + ' btn-fw " style="margin-top: 1rem;margin-right: 1rem;padding:0.5rem;width: 6rem;font-size:13px">' + btntext1 + '</button><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 Walk</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><button type="button" class="publish-button btn ' + btntype + ' btn-fw " style="margin-top: 1rem;margin-right: 0rem;padding:0.5rem;width: 6rem;font-size:13px;">' + btntext + '</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 AMBLE</button>');
|
|
|
|
$('#example tfoot th.search').each(function () {
|
|
var title = $(this).text();
|
|
|
|
$(this).html('<input type="text" placeholder="' + title + '" />');
|
|
});
|
|
|
|
$('#example').DataTable().columns().every(function () {
|
|
var that = this;
|
|
$('input', this.footer()).on('keyup change clear', function () {
|
|
if (that.search() !== this.value) {
|
|
that
|
|
.search(this.value)
|
|
.draw();
|
|
}
|
|
});
|
|
});
|
|
|
|
$('#example').on('click', 'tbody .editwalk-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) => {
|
|
$('#confirmTestEditadd').text(message)
|
|
|
|
$('#confirmYesedit').off('click');
|
|
$('#confirmNoedit').off('click');
|
|
|
|
$('#confirmYesedit').on('click', () => { $('.confirmedit').hide(); complete(true); startmap() });
|
|
$('#confirmNoedit').on('click', () => { $('.confirmedit').hide(); complete(false); });
|
|
|
|
$('.confirmedit').show();
|
|
});
|
|
}
|
|
async function f() {
|
|
const confirm = await ui.confirm('Edit Walk');
|
|
if (confirm) {
|
|
if (data !== "") {
|
|
var Map_ID = data.Map_ID;
|
|
window.location.href = 'walkcreation?Map_ID=' + Map_ID;
|
|
}
|
|
else {
|
|
console.log("No data found");
|
|
}
|
|
}
|
|
else {
|
|
}
|
|
};
|
|
f();
|
|
});
|
|
|
|
$('#example').on('click', 'tbody .test-button', function () {
|
|
//var msg = showSwal('warning-message-and-cancel');
|
|
var data = t.row($(this).closest('tr')).data();
|
|
const ui = {
|
|
confirm: async (message) => createConfirm(message)
|
|
}
|
|
const createConfirm = (message) => {
|
|
return new Promise((complete, failed) => {
|
|
$('#confirmTestMessageadd').text(message)
|
|
|
|
$('#confirmYestest').off('click');
|
|
$('#confirmNotest').off('click');
|
|
|
|
$('#confirmYestest').on('click', () => { $('.confirmtest').hide(); complete(true); });
|
|
$('#confirmNotest').on('click', () => { $('.confirmtest').hide(); complete(false); });
|
|
|
|
$('.confirmtest').show();
|
|
});
|
|
}
|
|
|
|
|
|
async function f() {
|
|
const confirm = await ui.confirm('Walk Type');
|
|
if (confirm) {
|
|
if (data !== "") {
|
|
var Map_ID = data.Map_ID;
|
|
var activetype = data.Map_Type;
|
|
var newMap_Type;
|
|
if (activetype == 'Normal') {
|
|
newMap_Type = 'Test';
|
|
$.ajax({
|
|
method: "POST",
|
|
url: "/api/setrpgpublishedwalktype",
|
|
data: {
|
|
Map_ID: Map_ID,
|
|
Map_Type: newMap_Type,
|
|
Map_Status: "Unpublished"
|
|
},
|
|
success: (data) => {
|
|
t.ajax.reload();
|
|
showSwal('success-message', data.message);
|
|
//console.log(data);
|
|
},
|
|
error: (data) => {
|
|
showSwal('failure-message', data.message);
|
|
//console.log(data);
|
|
}
|
|
});
|
|
}
|
|
else {
|
|
newMap_Type = 'Normal';
|
|
$.ajax({
|
|
method: "POST",
|
|
url: "/api/setrpgpublishedwalktype",
|
|
data: {
|
|
Map_ID: Map_ID,
|
|
Map_Type: newMap_Type,
|
|
Map_Status: 'UnPublished'
|
|
},
|
|
success: (data) => {
|
|
t.ajax.reload();
|
|
showSwal('success-message', data.message);
|
|
//console.log(data);
|
|
},
|
|
error: (data) => {
|
|
showSwal('failure-message', data.message);
|
|
//console.log(data);
|
|
}
|
|
});
|
|
}
|
|
|
|
}
|
|
else {
|
|
console.log("No data found");
|
|
}
|
|
}
|
|
else {
|
|
}
|
|
};
|
|
f();
|
|
});
|
|
|
|
$('#example').on('click', 'tbody .delete-button', function () {
|
|
//var msg = showSwal('warning-message-and-cancel');
|
|
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 !== "") {
|
|
var Map_ID = data.Map_ID;
|
|
$.ajax({
|
|
method: "POST",
|
|
url: "/api/removerpgpublishedwalk",
|
|
data: {
|
|
Map_ID: Map_ID
|
|
},
|
|
success: (data) => {
|
|
t.ajax.reload();
|
|
showSwal('success-message', data.message);
|
|
//console.log(data);
|
|
},
|
|
error: (data) => {
|
|
showSwal('failure-message', data.message);
|
|
//console.log(data);
|
|
}
|
|
});
|
|
}
|
|
else {
|
|
console.log("No data found");
|
|
}
|
|
}
|
|
else {
|
|
}
|
|
};
|
|
f();
|
|
});
|
|
|
|
$('#example').on('click', 'tbody .publish-button', function () {
|
|
//var msg = showSwal('warning-message-and-cancel');
|
|
var data = t.row($(this).closest('tr')).data();
|
|
const ui = {
|
|
confirm: async (message) => createConfirm(message)
|
|
}
|
|
const createConfirm = (message) => {
|
|
return new Promise((complete, failed) => {
|
|
$('#confirmPublishMessageadd').text(message)
|
|
|
|
$('#confirmYespublish').off('click');
|
|
$('#confirmNopublish').off('click');
|
|
|
|
$('#confirmYespublish').on('click', () => { $('.confirmpublish').hide(); complete(true); });
|
|
$('#confirmNopublish').on('click', () => { $('.confirmpublish').hide(); complete(false); });
|
|
|
|
$('.confirmpublish').show();
|
|
});
|
|
}
|
|
|
|
async function f() {
|
|
const confirm = await ui.confirm('Publish/Unpublish Walk');
|
|
if (confirm) {
|
|
if (data !== "") {
|
|
var Map_ID = data.Map_ID;
|
|
var activestatus = data.Map_Status;
|
|
var newMap_Status;
|
|
if (activestatus == 'Published') {
|
|
newMap_Status = 'Unpublished';
|
|
}
|
|
else {
|
|
newMap_Status = 'Published';
|
|
}
|
|
$.ajax({
|
|
method: "POST",
|
|
url: "/api/setrpgpublishedwalkstatus",
|
|
data: {
|
|
Map_ID: Map_ID,
|
|
Map_Status: newMap_Status
|
|
},
|
|
success: (data) => {
|
|
t.ajax.reload();
|
|
showSwal('success-message', data.message);
|
|
//console.log(data);
|
|
},
|
|
error: (data) => {
|
|
showSwal('failure-message', data.message);
|
|
//console.log(data);
|
|
}
|
|
});
|
|
}
|
|
else {
|
|
console.log("No data found");
|
|
}
|
|
}
|
|
else {
|
|
}
|
|
};
|
|
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 () {
|
|
$('#mapid').val('');
|
|
$('#exampleInputMapname1').val('');
|
|
$('#exampleInputMapdescription1').val('');
|
|
$('#exampleInputMapcategory1').val('');
|
|
$('#exampleInputMapPoi1').val('');
|
|
$('#exampleInputMapTrivia1').val('');
|
|
$('#exampleInputMapLat1').val('');
|
|
$('#exampleInputMapLong1').val('');
|
|
$('#exampleInputSortNo').val('');
|
|
$('#flexRadioDefault2').val('');
|
|
$('#flexRadioDefault1').val('');
|
|
$('#amountperperson').val('');
|
|
document.getElementById('listcategory').innerHTML = "No Selected Categories";
|
|
$('#blah').attr('src', 'images/plus.svg');
|
|
mapid()
|
|
|
|
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('Map Details');
|
|
if (confirm) {
|
|
var mapid = document.getElementById("mapid").innerHTML;
|
|
var mapname = document.getElementById("exampleInputMapname1").value;
|
|
var mapdescription = document.getElementById("exampleInputMapdescription1").value;
|
|
var mapthumbnail = document.getElementById('mapthumbnail').files[0];
|
|
var mapcategory = [];
|
|
for (var option of document.getElementById('exampleInputMapcategory1').options) {
|
|
if (option.selected) {
|
|
mapcategory.push(option.value);
|
|
}
|
|
}
|
|
var totalpoi = document.getElementById("exampleInputMapPoi1").value;
|
|
var totalTrivia = document.getElementById("exampleInputMapTrivia1").value;
|
|
var startlatitude = document.getElementById("exampleInputMapLat1").value;
|
|
var startlongitude = document.getElementById("exampleInputMapLong1").value;
|
|
var sortno = document.getElementById('exampleInputSortNo').value;
|
|
var walktypeself = document.getElementById('flexRadioDefault2');
|
|
var walktypeguid = document.getElementById('flexRadioDefault1');
|
|
let amountsingelperson
|
|
let maximumperson
|
|
let durationwalk
|
|
let walktype
|
|
if (walktypeself.checked) {
|
|
walktype = 'Self-Paced Walk'
|
|
}
|
|
if (walktypeguid.checked) {
|
|
walktype = 'Guided Walk'
|
|
amountsingelperson = document.getElementById('amountperperson').value;
|
|
maximumperson = document.getElementById('maximumpersonallowed').value;
|
|
durationwalk = document.getElementById('durationofwalk').value;
|
|
}
|
|
console.log(mapid, mapname, mapdescription, mapthumbnail, mapcategory, totalpoi, startlatitude, startlongitude)
|
|
|
|
|
|
if (mapname === "" || mapdescription === "" || mapthumbnail === "" || totalTrivia === "" || mapcategory === "" || totalpoi === "" || startlatitude === "" || startlongitude === "" || sortno === "" || walktype === "") {
|
|
showSwal('emptycred-title-and-text', "");
|
|
} else {
|
|
var formData = new FormData();
|
|
formData.append('mapid', mapid)
|
|
formData.append('mapname', mapname)
|
|
formData.append('mapdescription', mapdescription)
|
|
formData.append('mapthumbnail', mapthumbnail)
|
|
formData.append('mapcategory', mapcategory)
|
|
formData.append('totalpoi', totalpoi)
|
|
formData.append('Total_Trivia', totalTrivia)
|
|
formData.append('startlongitude', startlongitude)
|
|
formData.append('startlatitude', startlatitude)
|
|
formData.append('sortno', sortno)
|
|
formData.append('walktype', walktype)
|
|
if(walktypeguid.checked){
|
|
if (amountsingelperson === "" || maximumperson === "" || durationwalk === "")
|
|
{
|
|
showSwal('emptycred-title-and-text', "");
|
|
}
|
|
else {
|
|
formData.append('amountsingelperson', amountsingelperson)
|
|
formData.append('maximumperson', maximumperson)
|
|
formData.append('durationwalk', durationwalk)
|
|
}
|
|
}
|
|
|
|
|
|
var url = "/api/rpgaddupdatewalkdetails?" + new URLSearchParams({ mapid: mapid })
|
|
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();
|
|
});
|
|
|
|
|
|
$('.next-button').on('click', function () {
|
|
const ui = {
|
|
confirm: async (message) => createConfirm(message)
|
|
}
|
|
const createConfirm = (message) => {
|
|
return new Promise((complete, failed) => {
|
|
|
|
$('.confirm-guided').show();
|
|
});
|
|
}
|
|
|
|
async function f() {
|
|
const confirm = await ui.confirm('Map Details');
|
|
isEdit = false;
|
|
|
|
|
|
};
|
|
f();
|
|
});
|
|
|
|
});
|
|
</script>
|
|
|
|
<script>
|
|
|
|
$(document).ready(function () {
|
|
const clickx1 = document.getElementById('pencet1');
|
|
const clickx2 = document.getElementById('pencet2');
|
|
clickx1.addEventListener('click', function () {
|
|
clickx1.classList.toggle('Diam');
|
|
});
|
|
clickx2.addEventListener('click', function () {
|
|
clickx2.classList.toggle('Diam');
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<link rel="stylesheet" href="css/mobiscroll.javascript.min.css">
|
|
<script src="js/mobiscroll.javascript.min.js"></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" 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 Walk</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 walk?</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 walk?</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">
|
|
<div class="card-body" style="margin:20px">
|
|
|
|
|
|
|
|
|
|
<form class="forms-sample">
|
|
<div class="form-group">
|
|
<div class="row">
|
|
<div class="col-md-5">
|
|
<div id="confirmMessage" class="h3sty" style="color: #FFFFFF;">Organisation</div>
|
|
</div>
|
|
<div class="col-md-5">
|
|
<label style="color: #9691D9;">MAP ID</label>
|
|
<p style="font: normal normal bold 15px/18px Raleway;letter-spacing: 1.84px;color: #FFFFFF;opacity: 1;"
|
|
id="mapid">dfdsdfsfdsds</p>
|
|
</div>
|
|
<script>
|
|
function mapid() {
|
|
const mapid = document.getElementById('mapid')
|
|
mapid.innerHTML = Math.floor(Math.random() * (2272792400 - 1536472980) + 1536472980)
|
|
}
|
|
</script>
|
|
<div class="col-md-2">
|
|
<img src="images/close.svg" height="50px" width="50px" id="confirmNo" class="close" />
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
<div class="form-main">
|
|
<div>
|
|
<div class="row" style="margin-top:-20px ;">
|
|
|
|
<div class="col-md-9">
|
|
<div class="form-group">
|
|
<label for="exampleInputMapname1"
|
|
style="color:#FFFFFF;font-size:14px;text-transform: uppercase;">Map Name</label>
|
|
<br>
|
|
<input type="text" class="input" id="exampleInputMapname1" placeholder="Enter Map Name"
|
|
style="width: 100%">
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3" style="text-align: center;">
|
|
<div class="form-group">
|
|
<br>
|
|
<br>
|
|
<label for="exampleInputMapthumbnail1"
|
|
style="color:#FFFFFF;font-size:14px;text-transform: uppercase;position:relative;top:-25px">Add
|
|
Map Icon</label>
|
|
</div>
|
|
</div>
|
|
<br>
|
|
<div class="col-md-9">
|
|
<div class="form-group">
|
|
<label for="exampleInputMapdescription1"
|
|
style="color:#FFFFFF;font-size:14px;text-transform: uppercase;">Map Description</label>
|
|
<br>
|
|
<input type="text" class="input" id="exampleInputMapdescription1"
|
|
placeholder="Enter Map Description" style="width: 100%;">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-3" style="text-align: center;margin-top:-80px">
|
|
|
|
|
|
<div class="form-group">
|
|
<input type='file' id="mapthumbnail" name="mapthumbnail" style="visibility: hidden;" />
|
|
<p type="button" style="margin-left: 13px;" 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>
|
|
|
|
<script>
|
|
function readURL(input) {
|
|
if (input.files || input.files[0]) {
|
|
|
|
var reader = new FileReader();
|
|
|
|
reader.onload = function (e) {
|
|
/*var image = new Image();
|
|
|
|
|
|
image.src = e.target.result;
|
|
|
|
|
|
image.onload = function () {
|
|
var height = this.height;
|
|
var width = this.width;
|
|
console.log(height, width);
|
|
if (height < 510 || width < 510) {
|
|
alert("Height and Width must not exceed 510px.");
|
|
return false;
|
|
}
|
|
alert("Uploaded image has valid Height and Width.");
|
|
return true;
|
|
}; */
|
|
$('#blah').attr('src', e.target.result);
|
|
|
|
}
|
|
|
|
reader.readAsDataURL(input.files[0]);
|
|
}
|
|
}
|
|
|
|
$("#mapthumbnail").change(function () {
|
|
readURL(this);
|
|
|
|
});
|
|
</script>
|
|
|
|
<div class="col-md-5" style="margin-top: -10px;height:200px">
|
|
|
|
|
|
<div class="form-group">
|
|
<label for="exampleInputMapcategory1"
|
|
style="color:#FFFFFF;font-size:14px;text-transform: uppercase;">Map Category</label>
|
|
<br>
|
|
<select class="input" id="exampleInputMapcategory1" name="exampleInputMapcategory1"
|
|
style="width:100%;height:200px;overflow:hidden;text-align:justify;padding:20px;cursor:pointer"
|
|
onclick="category()" multiple>
|
|
<option value="History">History</option>
|
|
<option value="Arts and Culture">Arts and Culture</option>
|
|
<option value="Architecture">Architecture</option>
|
|
<option value="Pop Culture">Pop Culture</option>
|
|
<option value="UNESCO World Heritage Sites">UNESCO World Heritage Sites</option>
|
|
</select>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 selected">
|
|
|
|
<div class="form-group">
|
|
<label for="listcategory"
|
|
style="color:#FFFFFF;font-size:14px;text-transform: uppercase;">Selected Category</label>
|
|
<br>
|
|
|
|
<div class="input" style="height:200px;width:100%;text-align:left;padding-top:20px">
|
|
<ul id="listcategory" style="list-style-type: none;"> No Selected Categories</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
function getSelectValues(select) {
|
|
var result = [];
|
|
var options = select || select.options;
|
|
var opt;
|
|
|
|
for (var i = 0, iLen = options.length; i < iLen; i++) {
|
|
opt = options[i];
|
|
|
|
if (opt.selected) {
|
|
result.push(opt.value || opt.text);
|
|
}
|
|
}
|
|
return result;
|
|
}
|
|
function category() {
|
|
|
|
var el = document.getElementsByTagName('select')[0];
|
|
var listcategory = getSelectValues(el)
|
|
document.getElementById('listcategory').innerHTML = listcategory.map(value => `<li>${value}</li>`).join('');
|
|
|
|
|
|
}
|
|
</script>
|
|
|
|
<div class="col-md-3" style="text-align: center;margin-top:-10px">
|
|
<div class="form-group" style="margin-bottom: 16px;">
|
|
<label for="exampleInputMapPoi1"
|
|
style="color:#FFFFFF;font-size:14px;text-transform: uppercase;text-align:center">Total
|
|
Poi</label>
|
|
<input type="text" class="input" id="exampleInputMapPoi1" placeholder="Enter Value"
|
|
style="width: 120px;">
|
|
</div>
|
|
|
|
<div class="form-group" style="margin-bottom: 16px;">
|
|
<label for="exampleInputMapTrivia1"
|
|
style="color:#FFFFFF;font-size:14px;text-transform: uppercase;text-align:center">Total
|
|
Trivia</label>
|
|
<input type="text" class="input" id="exampleInputMapTrivia1" placeholder="Enter Value"
|
|
style="width: 120px;">
|
|
</div>
|
|
<div class="form-group" style="margin-bottom: 16px;">
|
|
<label for="exampleInputSortNo"
|
|
style="color:#FFFFFF;font-size:14px;text-transform: uppercase;text-align:center">Sort No
|
|
</label>
|
|
<input type="text" class="input" id="exampleInputSortNo" placeholder="Enter Value"
|
|
style="width: 120px;">
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<br>
|
|
<div class="col-md-4" style="text-align: center;">
|
|
<div class="form-group">
|
|
<label for="exampleInputMapLat1"
|
|
style="color:#FFFFFF;font-size:14px;text-transform: uppercase;text-align:center">Latitude</label>
|
|
<input type="number" step="any" class="input" id="exampleInputMapLat1"
|
|
placeholder="LATITUDE">
|
|
</div>
|
|
</div>
|
|
<div class="col-md-1"></div>
|
|
<div class="col-md-4" style="text-align: center;">
|
|
<div class="form-group">
|
|
<label for="exampleInputMapLong1"
|
|
style="color:#FFFFFF;font-size:14px;text-transform: uppercase;text-align:center">Longitude</label>
|
|
<input type="number" step="any" class="input" id="exampleInputMapLong1"
|
|
placeholder="LONGITUDE">
|
|
</div>
|
|
|
|
</div>
|
|
<div class="col-md-3" style="text-align:center;margin-top:0px">
|
|
<button class="button" id="confirmYes" type="button"
|
|
style="height: 95px;width:125px;font-size:14px"><img class="image"
|
|
src="images/amblecreate.svg" /><br>CREATE NEW WALK </button>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="width: 520px">
|
|
<div class="select-field">
|
|
<div class="form-group">
|
|
<label for="walkType" style="color:#FFFFFF;font-size:14px;text-transform: uppercase;">
|
|
Walk type</label>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2"
|
|
checked>
|
|
<label class="form-check-label" for="flexRadioDefault2"
|
|
style="color:#FFFFFF;font-size:14px;text-transform: uppercase;">
|
|
Self-Paced Walk
|
|
</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
|
|
<label class="form-check-label" for="flexRadioDefault1"
|
|
style="color:#FFFFFF;font-size:14px;text-transform: uppercase;">
|
|
Guided Walk
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="collapse-main">
|
|
<div class="form-group">
|
|
<label for="amountperperson"
|
|
style="color:#FFFFFF;font-size:14px;text-transform: uppercase;">
|
|
Amount per person </label>
|
|
<br>
|
|
<input type="text" class="input" id="amountperperson" placeholder="Amount per person"
|
|
style="width: 100%">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="maximumpersonallowed"
|
|
style="color:#FFFFFF;font-size:14px;text-transform: uppercase;">
|
|
Maximum person allowed </label>
|
|
<br>
|
|
<input type="text" class="input" id="maximumpersonallowed"
|
|
placeholder="Maximum person allowed" style="width: 100%">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="durationofwalk"
|
|
style="color:#FFFFFF;font-size:14px;text-transform: uppercase;">
|
|
Duration of Walk</label>
|
|
<br>
|
|
<input type="text" class="input" id="durationofwalk"
|
|
placeholder="Duration of Walk" style="width: 100%">
|
|
</div>
|
|
|
|
<div class="col-md-3" style="text-align:center;margin-top:0px">
|
|
<button class="button next-button" id="" type="button"
|
|
style="height: 95px;width:125px;font-size:14px"><img class="image"
|
|
src="images/amblecreate.svg" /><br>NEXT </button>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</form>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="confirm-guided">
|
|
<div style="background: none; width: 100%">
|
|
<div class="card map">
|
|
<div class="card-body create-new-walk-popup" style="margin:20px">
|
|
<form class="forms-sample ">
|
|
<div class="form-group">
|
|
<div class="row">
|
|
<div class="col-md-5">
|
|
<div id="confirmMessage1" class="h3sty" style="color: #FFFFFF;">Guided Walk</div>
|
|
</div>
|
|
<div class="col-md-5">
|
|
<label style="color: #9691D9;">MAP ID</label>
|
|
<p style="font: normal normal bold 15px/18px Raleway;letter-spacing: 1.84px;color: #FFFFFF;opacity: 1;" id="mapid">1694956680</p>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<img src="images/close.svg" height="50px" width="50px" id="confirmNo1" class="close" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-main form-scroll-center">
|
|
<div class="form-group">
|
|
{{!-- <label for="exampleInputMapname1"
|
|
style="color:#FFFFFF;font-size:14px;text-transform: uppercase;">Select Date</label> --}}
|
|
<br>
|
|
<input type="date" class="input" id="datePicker" placeholder="">
|
|
<div class="selectedDatesContainer" id="selectedDatesContainer"></div>
|
|
<script>
|
|
var today = new Date();
|
|
var dd = today.getDate();
|
|
var mm = today.getMonth() + 1; // January is 0
|
|
var yyyy = today.getFullYear();
|
|
|
|
if (dd < 10) {
|
|
dd = '0' + dd;
|
|
}
|
|
if (mm < 10) {
|
|
mm = '0' + mm;
|
|
}
|
|
today = yyyy + '-' + mm + '-' + dd;
|
|
|
|
// Set min attribute to today's date
|
|
document.getElementById('datePicker').setAttribute('min', today);
|
|
|
|
|
|
var datePicker = document.getElementById('datePicker');
|
|
var selectedDatesContainer = document.getElementById('selectedDatesContainer');
|
|
//var selectedDates = []; // Array to store selected dates
|
|
var selectedDates = new Set(); // Using a Set to store selected dates for faster lookup
|
|
|
|
// Function to format the selected date in "dd-mm-yyyy" format
|
|
function formatDate(dateString) {
|
|
var dateParts = dateString.split('-');
|
|
var day = dateParts[2];
|
|
var month = dateParts[1];
|
|
var year = dateParts[0];
|
|
return day + '-' + month + '-' + year;
|
|
}
|
|
|
|
// Function to format time in 12-hour format with AM or PM
|
|
function formatTime12Hours(timeString) {
|
|
var timeParts = timeString.split(':');
|
|
var hours = parseInt(timeParts[0]);
|
|
var minutes = timeParts[1];
|
|
var period = hours >= 12 ? 'PM' : 'AM';
|
|
hours = hours % 12 || 12; // Convert hours to 12-hour format
|
|
return hours + ':' + minutes + ' ' + period;
|
|
}
|
|
|
|
// Function to create and append a new label for the selected date
|
|
function addSelectedDateGroup(selectedDate) {
|
|
var dateGroup = document.createElement('div');
|
|
dateGroup .className = 'dateGroup';
|
|
|
|
var label = document.createElement('label');
|
|
label.textContent = formatDate(selectedDate);
|
|
dateGroup.appendChild(label);
|
|
|
|
|
|
var deleteButton = document.createElement('button');
|
|
deleteButton.textContent = '❌'; // You can use any delete icon here
|
|
deleteButton.onclick = function() {
|
|
selectedDates.delete(selectedDate);
|
|
dateGroup.remove();
|
|
};
|
|
|
|
var timePicker = document.createElement('input');
|
|
timePicker.type = 'time';
|
|
timePicker.className = 'timePicker';
|
|
timePicker.placeholder='Select Time';
|
|
|
|
//var timePicker = document.querySelector('.timePicker');
|
|
var initialPlaceholder = timePicker.getAttribute('placeholder');
|
|
|
|
|
|
timePicker.addEventListener('change', function() {
|
|
var chip = document.createElement('div');
|
|
chip.className = 'chip';
|
|
chip.textContent = formatTime12Hours(timePicker.value); // Format time in 12-hour format
|
|
|
|
// Reset the placeholder to the initial placeholder text
|
|
timePicker.setAttribute('placeholder', initialPlaceholder);
|
|
|
|
var chipsContainer = document.createElement('div');
|
|
chipsContainer.className = 'chipsContainer';
|
|
dateGroup.appendChild(chipsContainer);
|
|
|
|
var chipDeleteButton = document.createElement('button');
|
|
chipDeleteButton.textContent = '❌';
|
|
chipDeleteButton.onclick = function() {
|
|
chip.remove();
|
|
};
|
|
|
|
chip.appendChild(chipDeleteButton);
|
|
chipsContainer.appendChild(chip);
|
|
});
|
|
|
|
//dateGroup.appendChild(label);
|
|
dateGroup.appendChild(deleteButton);
|
|
dateGroup.appendChild(timePicker);
|
|
|
|
selectedDatesContainer.appendChild(dateGroup);
|
|
}
|
|
|
|
// Event listener to detect changes in date picker value
|
|
datePicker.addEventListener('change', function() {
|
|
var selectedDate = datePicker.value;
|
|
if (selectedDate) { // Check if the date is not already selected
|
|
if (!selectedDates.has(selectedDate)) { // Check if the date is not already selected
|
|
selectedDates.add(selectedDate); // Add the selected date to the Set
|
|
addSelectedDateGroup(selectedDate);
|
|
} else {
|
|
alert('This date has already been selected.');
|
|
}
|
|
}
|
|
|
|
datePicker.value = '';
|
|
});
|
|
</script>
|
|
</div>
|
|
</div>
|
|
<div class="create-walk-btn">
|
|
<button class="button" id="confirmYes1" type="button"
|
|
style="height: 95px;width:125px;font-size:14px"><img class="image"
|
|
src="images/amblecreate.svg" /><br>Create New Walk </button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card card1">
|
|
<div class="card-body">
|
|
<h4 class=" h3sty">All Ambles</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">Map ID</th>
|
|
<th style="font-size:13px">Thumbnail</th>
|
|
<th style="font-size:13px">Amble Site</th>
|
|
<th style="font-size:13px">Stops</th>
|
|
<th style="font-size:13px">Rating</th>
|
|
<th style="border-radius: 0px 20px 0px 0px;font-size:13px"></th>
|
|
</tr>
|
|
</thead>
|
|
<tfoot style="display:none;">
|
|
<tr>
|
|
<th class="search">Map ID</th>
|
|
|
|
<th class="search">Thumbnail</th>
|
|
<th class="search">Amble Site</th>
|
|
<th class="search">Stops</th>
|
|
<th class="search">Rating</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://code.jquery.com/jquery-3.6.0.min.js"
|
|
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
|
|
<script>
|
|
$(document).ready(function () {
|
|
$(document).on('change', '#flexRadioDefault1', function () {
|
|
$('.collapse-main').show();
|
|
//$('#confirmYes').hide();
|
|
});
|
|
$(document).on('change', '#flexRadioDefault2', function () {
|
|
$('.collapse-main').hide();
|
|
//$('#confirmYes').show();
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
<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="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"
|
|
integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
|
|
crossorigin="anonymous"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"
|
|
integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
|
|
crossorigin="anonymous"></script>
|
|
<script src="vendors/js/vendor.bundle.base.js"></script>
|
|
<script src="vendors/js/vendor.bundle.addons.js"></script>
|
|
<!-- endinject -->
|
|
<!-- Plugin js for this page-->
|
|
<!-- End plugin js for this page-->
|
|
<!-- inject:js -->
|
|
<script src="js/off-canvas.js"></script>
|
|
<script src="js/hoverable-collapse.js"></script>
|
|
<script src="js/template.js"></script>
|
|
<script src="js/settings.js"></script>
|
|
<script src="js/todolist.js"></script>
|
|
<!-- endinject -->
|
|
<!-- Custom js for this page-->
|
|
<script src="js/alerts.js"></script>
|
|
<script src="js/timestamp.js"></script>
|
|
<script src="js/toastDemo.js"></script>
|
|
<script src="js/notifcations.js"></script>
|
|
<script src="js/desktop-notification.js"></script>
|
|
{{!--
|
|
<script src="js/data-table.js"></script> --}}
|
|
<!-- End custom js for this page-->
|
|
|
|
|
|
</body>
|
|
|
|
</html> |