Files
amble_api/views/feedback.hbs
2025-07-15 15:54:43 +05:30

660 lines
19 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;
}
.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;
}
.dataTables_wrapper .dataTables_processing {
width: 100vw;
position: fixed;
top: 0;
left: 0;
z-index: 1;
}
.loader {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.license-filter {
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;
}
.close {
cursor: pointer;
border-radius: 30px;
}
.close-btn {
position: absolute;
right: 20px;
top: 20px;
}
.close:hover {
transition-timing-function: ease-in;
transition: 0.25s;
border: 1px solid #d0b7ff;
border-radius: 30px;
}
.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;
}
}
@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(2),.dataTable td:nth-child(2){
width: 200px;
max-width: 200px;
min-width: 200px;
word-wrap: break-word;
}
.dataTable th:nth-child(5), .dataTable td:nth-child(5){
width: 300px;
max-width: 300px;
min-width: 300px;
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/user-feedbacks",
"type": "GET",
"dataSrc": function (json) {
// Manipulate the data to conform to the DataTable's expected structure
return json.data.map(function (item, index) {
return {
serialNumber: index + 1,
Username: item.User_Id ? item.User_Id.Username : '', // Check if User_Id exists
MobileNo: item.User_Id ? item.User_Id.MobileNo : '', // Check if User_Id exists
Rating: item.Rating,
Description: item.Description
};
});
}
},
"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": null,
// "render": function (data, type, row) {
// return row.Firstname + " " + row.Lastname;
// }
//}, // Combined Firstname and Lastname
{ "data": "Username", "defaultContent": '' },//2
{ "data": "MobileNo", "defaultContent": '' },//2
{ "data": "Rating", "defaultContent": '' },//2
{ "data": "Description", "defaultContent": '' },//2
//{ "data": "Firstname", "defaultContent": '' },//2
//{ "data": "Lastname", "defaultContent": '' },//2
//{
// "data": "ProfilePic",
// "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": null,
// "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>');
// }
// }
// }
]
});
});
</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="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="card card1">
<div class="card-body">
<h4 class=" h3sty">User Feedbacks</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">Username</th>
<th style="font-size:13px">Mobile Number</th>
<th style="font-size:13px">Rating</th>
<th style="border-radius: 0px 20px 0px 0px;font-size:13px;width:350px!important">Description</th>
</tr>
</thead>
<tfoot style="display:none;">
<tr>
<th class="search">S.No</th>
<th class="search">Username</th>
<th style="search">Mobile Number</th>
<th style="search">Rating</th>
<th class="search" style="width:350px!important">Description</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>