b6
Suvodip
parent
8da340c40b
commit
ef2bd86aa0
|
|
@ -186,9 +186,9 @@
|
|||
<p style="border: 1px solid #D9D9D9; border-radius: 5px; padding: 6px;"><?php echo $row['time']; ?></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-3 p-3 border-b-2 border-[#D9D9D9] space-x-6" style="text-align: left;">
|
||||
<div class="grid grid-cols-2 md:grid-cols-3 p-3 border-b-2 border-[#D9D9D9] space-x-6" style="text-align: left;">
|
||||
<div>
|
||||
<p><b>Follow Update</b></p>
|
||||
<p><b>Followup Date</b></p>
|
||||
<input class="w-full" type="date" name="date" id="date" value="<?php echo $row['date']; ?>" style="border: 1px solid #D9D9D9; border-radius: 5px; padding: 6px;" />
|
||||
</div>
|
||||
<div>
|
||||
|
|
@ -317,7 +317,7 @@
|
|||
</form>
|
||||
<div class="flex flex-col div-custom-margin" style="width: 100%;" >
|
||||
<div class="bg-[#F6F6F6] rounded-xl p-3">
|
||||
<div class="flex flex-row place-content-between" style="border-bottom: 2px solid #7E8299; border-style: dashed; padding-bottom: 3px;">
|
||||
<div class="flex-container-x2y place-content-between" style="border-bottom: 2px solid #7E8299; border-style: dashed; padding-bottom: 3px;">
|
||||
<p style="font-size: 25px; font-weight: bold;">Comments: <span><?php echo $totalRecords; ?></span></p>
|
||||
<button id="toggleButton" style="background: linear-gradient(90deg, rgba(111, 107, 255, 0.91) 0%, rgba(68, 55, 128, 0.91) 100%); color: #fff; border-radius: 6px; padding: 6px 20px 6px 20px;">Add Comment</button>
|
||||
</div>
|
||||
|
|
@ -546,29 +546,51 @@
|
|||
</div>
|
||||
|
||||
<script>
|
||||
const copyButtons = document.querySelectorAll('.copy-btn');
|
||||
copyButtons.forEach(button => {
|
||||
button.addEventListener('click', event => {
|
||||
event.preventDefault();
|
||||
const inputId = button.getAttribute('data-input-id');
|
||||
const inputElement = document.getElementById(inputId);
|
||||
if (inputElement && inputElement.value) {
|
||||
navigator.clipboard.writeText(inputElement.value)
|
||||
.then(() => {
|
||||
button.classList.add('copied');
|
||||
setTimeout(() => {
|
||||
button.classList.remove('copied');
|
||||
}, 1000);
|
||||
})
|
||||
.catch(err => {
|
||||
console.error('Unable to copy:', err);
|
||||
});
|
||||
}
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const copyButtons = document.querySelectorAll('.copy-btn');
|
||||
|
||||
copyButtons.forEach(button => {
|
||||
button.addEventListener('click', event => {
|
||||
event.preventDefault();
|
||||
const inputId = button.getAttribute('data-input-id');
|
||||
const inputElement = document.getElementById(inputId);
|
||||
if (inputElement && inputElement.value) {
|
||||
if (navigator.clipboard) {
|
||||
navigator.clipboard.writeText(inputElement.value)
|
||||
.then(() => {
|
||||
button.classList.add('copied');
|
||||
setTimeout(() => {
|
||||
button.classList.remove('copied');
|
||||
inputElement.blur(); // Remove focus from input element
|
||||
}, 1000);
|
||||
})
|
||||
.catch(err => {
|
||||
console.error('Unable to copy using clipboard API:', err);
|
||||
});
|
||||
} else {
|
||||
// Fallback method for older browsers
|
||||
inputElement.select();
|
||||
inputElement.setSelectionRange(0, inputElement.value.length); // For mobile devices
|
||||
try {
|
||||
document.execCommand('copy');
|
||||
button.classList.add('copied');
|
||||
setTimeout(() => {
|
||||
button.classList.remove('copied');
|
||||
inputElement.blur(); // Remove focus from input element
|
||||
}, 1000);
|
||||
} catch (err) {
|
||||
console.error('Fallback: Unable to copy', err);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// function fetchCountries() {
|
||||
// fetch('https://api.siliconpin.com/v3/list/country/')
|
||||
// .then(res => res.json())
|
||||
|
|
@ -693,6 +715,27 @@ copyButtons.forEach(button => {
|
|||
});
|
||||
</script>
|
||||
<style>
|
||||
#name::selection, #email::selection, #phone::selection {
|
||||
background-color: transparent;
|
||||
}
|
||||
#name:focus, #email:focus, #phone:focus {
|
||||
outline: none;
|
||||
}
|
||||
.flex-container-x2y {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 600px) {
|
||||
.flex-container-x2y {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 601px) {
|
||||
.flex-container-x2y {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
.add-appt-modal, .add-appt-edit-modal{
|
||||
background-color: #F8F8F8;
|
||||
display: none;
|
||||
|
|
|
|||
|
|
@ -141,12 +141,12 @@
|
|||
}
|
||||
}
|
||||
?>
|
||||
<p class="text-[28px] font-bold p-4">Lead Management</p>
|
||||
<div id="page-body" class="flex flex-row place-content-between px-4">
|
||||
<dialog>
|
||||
<button style="float: right; color: #FF0000; font-size: 25px; padding: 6px;">✘</button>
|
||||
<div class="flex flex-row">
|
||||
<div class="flex flex-col p-6 space-y-4">
|
||||
<!-- <p class="text-[28px] font-bold p-4">Lead Management</p> -->
|
||||
|
||||
<dialog id="d" class="rounded-lg">
|
||||
<form method="dialog" class=""><button class="text-4xl text-[#ff0000] bg-[#05b3a410] hover:bg-[#05b3a450] duration-700 rounded-full px-2 float-right">✘</button></form>
|
||||
<div class="flex flex-row ">
|
||||
<div class="flex flex-col p-4 space-y-4">
|
||||
<a href="/leads?start_date=<?php echo $today_date ?>&end_date=<?php echo $next_day ?>">Today</a>
|
||||
<a href="/leads?start_date=<?php echo $yesterday ?>&end_date=<?php echo $today_date ?>">Yesterday</a>
|
||||
<a href="/leads?start_date=<?php echo $this_week ?>&end_date=<?php echo $today_date ?>">This Week</a>
|
||||
|
|
@ -172,20 +172,22 @@
|
|||
</form>
|
||||
</div>
|
||||
</dialog>
|
||||
<button class="rounded-lg p-2 h-fit bg-[#fff] text-[#464E5F] shadow-lg" style="">Select Date</button>
|
||||
<div class="flex flex-row">
|
||||
<form method="GET" action="" class="bg-[#fff] flex flex-row place-items-center">
|
||||
<input class="p-2.5 rounded-l-lg focus:outline-none w-[320px]" type="text" name="search" placeholder="Name, lead ID, Mobile, Email..." style="border: 2px solid #8E8E8E;">
|
||||
<button class="rounded-r-lg text-[#fff] p-1.5" style="background: linear-gradient(90deg, rgba(111, 107, 255, 0.91) 0%, rgba(68, 55, 128, 0.91) 100%);" type="submit"><i class="fa fa-search"></i></button>
|
||||
</form>
|
||||
</div>
|
||||
<!-- <button class="" style="">Select Date</button> -->
|
||||
<div id="" class="flex flex-row place-content-between w-full py-4 gap-x-2">
|
||||
<button onclick="d.showModal()" class="rounded-lg pl-2 h-fit bg-[#fff] text-[#464E5F] shadow-lg flex flex-row justify-center place-items-center">Select Date<span class="fa fa-calendar-o -ml-[17px] pt-1.5"></span></button>
|
||||
<div class="flex flex-row">
|
||||
<form method="GET" action="" class="bg-[#fff] flex flex-row place-items-center">
|
||||
<input class="p-2.5 rounded-l-lg focus:outline-none w-[170px] md:w-[320px]" type="text" name="search" placeholder="Name, lead ID, Mobile, Email..." style="border: 2px solid #8E8E8E;">
|
||||
<button class="rounded-r-lg text-[#fff] p-1.5" style="background: linear-gradient(90deg, rgba(111, 107, 255, 0.91) 0%, rgba(68, 55, 128, 0.91) 100%);" type="submit"><i class="fa fa-search"></i></button>
|
||||
</form>
|
||||
</div>
|
||||
<?php
|
||||
if(isset($_SESSION['user_type']) && $_SESSION['user_type'] == 'admin'){
|
||||
echo '<p onclick="deleteCofermation();" class="rounded-lg h-fit py-2 px-6 text-[#fff] text-center" style="background: linear-gradient(90deg, rgba(111, 107, 255, 0.91) 0%, rgba(68, 55, 128, 0.91) 100%); cursor: pointer;">Delete</p>';
|
||||
}
|
||||
?>
|
||||
<button onclick="toggleDisplay();" class="rounded-lg p-2 h-fit text-[#fff]" style="background: linear-gradient(90deg, rgba(111, 107, 255, 0.91) 0%, rgba(68, 55, 128, 0.91) 100%); text-align: center;">Add Leads</button>
|
||||
</div>
|
||||
<button onclick="toggleDisplay();" class="rounded-lg px-2 h-fit text-[#fff] flex flex-row justify-center place-items-center" style="background: linear-gradient(90deg, rgba(111, 107, 255, 0.91) 0%, rgba(68, 55, 128, 0.91) 100%); text-align: center;"><span style="font-size: 30px; font-weight: bold">+</span><span>Add Leads</span></button>
|
||||
</div>
|
||||
|
||||
<form method="post">
|
||||
<table class="bg-[#fff] text-[#3F4254] rounded-lg font-bold" style="width: 100%;" >
|
||||
|
|
@ -193,7 +195,7 @@
|
|||
<tr>
|
||||
<?php
|
||||
if(isset($_SESSION['user_type']) && $_SESSION['user_type'] == 'admin')
|
||||
echo ' <th class="text-center border-b-2 p-3">
|
||||
echo ' <th class=" border-b-2 p-3">
|
||||
<div class="delete-confirm" id="delete-button" style="display: none;">
|
||||
<p>Are you sure you want to delete this lead?</p>
|
||||
<div class="flex flex-row space-x-4">
|
||||
|
|
@ -203,13 +205,12 @@
|
|||
</div>
|
||||
</th>';
|
||||
?>
|
||||
<th class="text-center border-b-2 p-3">Quick Action</th>
|
||||
<th class="text-center border-b-2 p-3">Name</th>
|
||||
<th class="text-center border-b-2 p-3">ID</th>
|
||||
<th class="text-center border-b-2 p-3">Status Update</th>
|
||||
<!-- <th class="text-center border-b-2 p-3">Contact Detail</th> -->
|
||||
<th class="text-center border-b-2 p-3">Form Name</th>
|
||||
<th class="text-center border-b-2 p-3">Date</th>
|
||||
<th class="border-b-2 p-3 text-left">Name</th>
|
||||
<th class="border-b-2 p-3 text-left">ID</th>
|
||||
<th class="border-b-2 p-3 text-left">Status Update</th>
|
||||
<!-- <th class=" border-b-2 p-3">Contact Detail</th> -->
|
||||
<th class="border-b-2 p-3 text-left">Form Name</th>
|
||||
<th class="border-b-2 p-3 text-left">Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody >
|
||||
|
|
@ -222,7 +223,7 @@
|
|||
$start_date = isset($_GET['start_date']) ? $_GET['start_date'] : '2014-05-05';
|
||||
$end_date = isset($_GET['end_date']) ? $_GET['end_date'] : date('Y-m-d');
|
||||
$start_time = microtime(true);
|
||||
$resultsPerPage = 100;
|
||||
$resultsPerPage = 200;
|
||||
$page =isset($_GET['page']) ? $_GET['page'] : 1;
|
||||
$offset = ($page - 1) * $resultsPerPage ;
|
||||
$accessArray = explode(",", $_SESSION['access']);
|
||||
|
|
@ -253,8 +254,12 @@
|
|||
$leads = $stmt->fetchAll(PDO::FETCH_ASSOC);
|
||||
$totalResults = count($leads);
|
||||
$totalPages = ceil($totalRows / $resultsPerPage);
|
||||
if($resultsPerPage <= $totalRows) echo "<p class='px-4'>".$resultsPerPage." Out of ".$totalRows." Leads </p>";
|
||||
else echo "<p class='px-4'>".$totalRows." Leads </p>";
|
||||
|
||||
$end_time = microtime(true);
|
||||
$execution_time = ($end_time - $start_time);
|
||||
$executionTime = substr($execution_time, 0, 6);
|
||||
// if($resultsPerPage <= $totalRows) echo "<p class='px-4'>".$resultsPerPage." Out of ".$totalRows." Leads in ".$executionTime." Seconds</p>";
|
||||
// else echo "<p class='px-4'>".$totalRows." Leads </p>";
|
||||
// Status Conditional Color
|
||||
foreach($leads as $lead){
|
||||
$only_date =isset($lead['time']) ? substr($lead['time'], 0, 10): 'Not Available';
|
||||
|
|
@ -268,46 +273,6 @@
|
|||
// if($row['status'] == 'Warm'){$conditional_status = '<div class="flex flex-row"><p>'.$row['status'].'</p><select class="focus: outline-none " style="'.$conditional_background_color.' border: none;"><option>Option 1</option><option>Option 2</option></select></div>';}elseif($row['status'] != 'Warm'){$conditional_status = $row['status'];}
|
||||
?>
|
||||
<tr>
|
||||
<td class="border-y-2 p-2">
|
||||
<div class="flex flex-row justify-center place-items-center">
|
||||
<div class="xzmdropdown-wrapper">
|
||||
<button class="xzmdropdown-btn"><i class="fa fa-envelope" style="font-size: 20px"></i></button>
|
||||
<div class="xzmdropdown-content">
|
||||
<a href="#">UNO</a>
|
||||
<a href="#">Primero</a>
|
||||
<div class="xzmdropdown-item">
|
||||
<a href="#">ILC</a>
|
||||
<a href="#">Complete package</a>
|
||||
<a href="#" class="bespoke-trigger">Bespoke</a>
|
||||
<div class="xzmdropdown-submenu">
|
||||
<a href="#">Academic</a>
|
||||
<a href="#">Buzzapp</a>
|
||||
<a href="#">Design Solution</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="xzmdropdown-wrapper">
|
||||
<button class="xzmdropdown-btn"><i class="fab fa-whatsapp" style="font-size: 20px"></i></button>
|
||||
<div class="xzmdropdown-content">
|
||||
<a href="#">UNO</a>
|
||||
<a href="#">Primero</a>
|
||||
<div class="xzmdropdown-item">
|
||||
<a href="#">ILC</a>
|
||||
<a href="#">Complete package</a>
|
||||
<a href="#" class="bespoke-trigger">Bespoke</a>
|
||||
<div class="xzmdropdown-submenu">
|
||||
<a href="#">Academic</a>
|
||||
<a href="#">Buzzapp</a>
|
||||
<a href="#">Design Solution</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<?php if(isset($_SESSION['user_type']) && $_SESSION['user_type'] == 'admin'){?>
|
||||
<td class="border-y-2 p-2">
|
||||
<input type="checkbox" name="selected_records[]" value="<?php echo $lead['id']; ?>" id="<?php echo $lead['id']; ?>" />
|
||||
|
|
@ -324,19 +289,12 @@
|
|||
<td class="border-y-2 p-2"><?php echo $only_date; ?></td>
|
||||
</tr>
|
||||
<?php
|
||||
|
||||
}
|
||||
} catch (PDOException $e) {
|
||||
echo "<p class='text-danger'>Error: " . $e->getMessage() . "</p>";
|
||||
}
|
||||
|
||||
$end_time = microtime(true);
|
||||
|
||||
// Calculate execution time
|
||||
$execution_time = ($end_time - $start_time);
|
||||
|
||||
// Output execution time
|
||||
echo "Page executed in: " . $execution_time . " seconds";
|
||||
?>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
@ -344,15 +302,16 @@
|
|||
<!-- Pagination Links -->
|
||||
|
||||
<?php
|
||||
|
||||
$getParams = $_GET; unset($getParams['page']); $getParams['page'] = $page-1; $backPage= http_build_query($getParams); unset($getParams['page']);
|
||||
$getParams['page'] = $page+1; $nextkPage= http_build_query($getParams);
|
||||
|
||||
// echo $totalPages;
|
||||
echo'<div class="flex flex-row justify-end">
|
||||
echo'<div class="flex flex-row justify-between">
|
||||
<button onclick="downloadCSV(data, filename)" class="fa fa-download text-[#fff] rounded-lg py-2 " style="background: linear-gradient(90deg, rgba(70, 68, 142, 0.91) 0%, rgba(120, 117, 244, 0.91) 100%);"></button>
|
||||
<div class="flex flex-row justify-end">
|
||||
<button class="px-4 py-2 text-[#443780] border border-[#443780] rounded-l-lg" > '; if($page>1) echo '<a href="?',$backPage,'"><','</a>'; echo ' </button>
|
||||
<button class="px-4 py-2 text-white border-y border-[#443780]" style="background: linear-gradient(90deg, rgba(111, 107, 255, 0.91) 0%, rgba(68, 55, 128, 0.91) 100%);"> '.$page.' </button>
|
||||
<button class="px-4 py-2 text-[#443780] border border-[#443780] rounded-r-lg" > '; if($page<$totalPages) echo '<a href="?',$nextkPage,'">>','</a>'; echo ' </button>
|
||||
</div>
|
||||
</div>';
|
||||
|
||||
?>
|
||||
|
|
@ -489,23 +448,8 @@ echo'<div class="flex flex-row justify-end">
|
|||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Fetch countries on page load
|
||||
fetchCountries();
|
||||
|
||||
const dialog = document.querySelector("dialog");
|
||||
const showButton = document.querySelector("dialog + button");
|
||||
const closeButton = document.querySelector("dialog button");
|
||||
|
||||
// "Show the dialog" button opens the dialog modally
|
||||
showButton.addEventListener("click", () => {
|
||||
dialog.showModal();
|
||||
});
|
||||
|
||||
// "Close" button closes the dialog
|
||||
closeButton.addEventListener("click", () => {
|
||||
dialog.close();
|
||||
});
|
||||
|
||||
function toggleDisplay() {
|
||||
var element = document.getElementById('add-lead-form');
|
||||
|
|
@ -538,6 +482,37 @@ echo'<div class="flex flex-row justify-end">
|
|||
}
|
||||
}
|
||||
}
|
||||
const data = <?php echo json_encode($leads); ?>;
|
||||
const filename = `leads_data.csv`;
|
||||
|
||||
function downloadCSV(data, filename) {
|
||||
const csv = convertToCSV(data);
|
||||
const blob = new Blob([csv], { type: 'text/csv' });
|
||||
const link = document.createElement('a');
|
||||
link.href = URL.createObjectURL(blob);
|
||||
link.download = filename;
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
}
|
||||
|
||||
function convertToCSV(data) {
|
||||
const csvRows = [];
|
||||
const headers = Object.keys(data[0]);
|
||||
csvRows.push(headers.join(','));
|
||||
data.forEach(row => {
|
||||
const values = headers.map(header => {
|
||||
const escaped = ('' + row[header]).replace(/"/g, '\\"');
|
||||
return `"${escaped}"`;
|
||||
});
|
||||
csvRows.push(values.join(','));
|
||||
});
|
||||
|
||||
return csvRows.join('\n');
|
||||
|
||||
// downloadCSV(data, filename);
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -1,77 +0,0 @@
|
|||
<?php
|
||||
require_once('.hta_config/crm_config.php');
|
||||
require_once('.htac_header.php');
|
||||
require_once('.htac_nav.php');
|
||||
// echo $_SESSION['access'];
|
||||
?>
|
||||
<div>
|
||||
<table style="overflow-x: auto;">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="text-align: center;">Name</th>
|
||||
<th style="text-align: center;">ID</th>
|
||||
<th style="text-align: center;">Status</th>
|
||||
<th style="text-align: center;">Email</th>
|
||||
<th style="text-align: center;">Phone</th>
|
||||
<th style="text-align: center;">business_type</th>
|
||||
<th style="text-align: center;">Time</th>
|
||||
<th style="text-align: center;">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<?php
|
||||
try {
|
||||
$conn = new PDO("mysql:host=$mariaServer;dbname=$mariaDb", $mariaUser, $mariaPass);
|
||||
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
|
||||
$accessArray = explode(",", $_SESSION['access']);
|
||||
$placeholders = rtrim(str_repeat('?,', count($accessArray)), ','); // Creating placeholders like ?,?,?,?
|
||||
|
||||
$stmt = $conn->prepare("SELECT COUNT(*) as total FROM cleads WHERE business_type IN ($placeholders)");
|
||||
foreach ($accessArray as $key => $value) {
|
||||
$stmt->bindValue($key + 1, $value);
|
||||
}
|
||||
$stmt->execute();
|
||||
$result = $stmt->fetch(PDO::FETCH_ASSOC);
|
||||
$totalRecords = $result['total'];
|
||||
|
||||
$recordsPerPage = 100; // Number of records per page
|
||||
$totalPages = ceil($totalRecords / $recordsPerPage);
|
||||
$page = isset($_GET['page']) ? $_GET['page'] : 1; // Current page number
|
||||
$offset = ($page - 1) * $recordsPerPage;
|
||||
$stmt = $conn->prepare("SELECT * FROM cleads WHERE business_type IN ($placeholders) LIMIT $recordsPerPage OFFSET $offset");
|
||||
foreach ($accessArray as $key => $value) {
|
||||
$stmt->bindValue($key + 1, $value);
|
||||
}
|
||||
$stmt->execute();
|
||||
$rows = $stmt->fetchAll(PDO::FETCH_ASSOC);
|
||||
$num_rows = $stmt->rowCount();
|
||||
if ($num_rows >= 1) {
|
||||
foreach($rows as $row){
|
||||
echo ' <tr>
|
||||
<td style="text-align: center;">'.$row['name'].'</td>
|
||||
<td style="text-align: center;"><a href="/edit-lead/?id='.$row['id'].'">'.$row['id'].'</a></td>
|
||||
<td style="text-align: center;">'.$row['status'].'</td>
|
||||
<td style="text-align: center;">'.$row['email'].'</td>
|
||||
<td style="text-align: center;">'.$row['phone'].'</td>
|
||||
<td style="text-align: center;">'.$row['business_type'].'</td>
|
||||
<td style="text-align: center;">'.$row['time'].'</td>
|
||||
<td style="text-align: center;">Delete</td>
|
||||
</tr>';
|
||||
}
|
||||
|
||||
// Pagination links
|
||||
// echo '<tr><td colspan="8" style="text-align: center;">';
|
||||
// for ($i = 1; $i <= $totalPages; $i++) {
|
||||
// echo '<a href="?page='.$i.'">'.$i.'</a> ';
|
||||
// }
|
||||
// echo '</td></tr>';
|
||||
} else{
|
||||
echo "<tr><td colspan='8' class='text-danger'>Not Found any Data</td></tr>";
|
||||
}
|
||||
} catch (PDOException $e) {
|
||||
echo "<tr><td colspan='8' class='text-danger'>Error: " . $e->getMessage() . "</td></tr>";
|
||||
};
|
||||
?>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
<div id="example-table"></div>
|
||||
|
||||
<link href="https://unpkg.com/tabulator-tables@6.2.0/dist/css/tabulator.min.css" rel="stylesheet">
|
||||
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@6.2.0/dist/js/tabulator.min.js"></script>
|
||||
<script>
|
||||
//define data
|
||||
var tabledata = [
|
||||
{id:1, name:"Oli Bob", location:"United Kingdom", gender:"male", rating:1, col:"red", dob:"14/04/1984"},
|
||||
{id:2, name:"Mary May", location:"Germany", gender:"female", rating:2, col:"blue", dob:"14/05/1982"},
|
||||
{id:3, name:"Christine Lobowski", location:"France", gender:"female", rating:0, col:"green", dob:"22/05/1982"},
|
||||
{id:4, name:"Brendon Philips", location:"USA", gender:"male", rating:1, col:"orange", dob:"01/08/1980"},
|
||||
{id:5, name:"Margret Marmajuke", location:"Canada", gender:"female", rating:5, col:"yellow", dob:"31/01/1999"},
|
||||
{id:6, name:"Frank Harbours", location:"Russia", gender:"male", rating:4, col:"red", dob:"12/05/1966"},
|
||||
{id:7, name:"Jamie Newhart", location:"India", gender:"male", rating:3, col:"green", dob:"14/05/1985"},
|
||||
{id:8, name:"Gemma Jane", location:"China", gender:"female", rating:0, col:"red", dob:"22/05/1982"},
|
||||
{id:9, name:"Emily Sykes", location:"South Korea", gender:"female", rating:1, col:"maroon", dob:"11/11/1970"},
|
||||
{id:10, name:"James Newman", location:"Japan", gender:"male", rating:5, col:"red", dob:"22/03/1998"},
|
||||
];
|
||||
|
||||
//define table
|
||||
var table = new Tabulator("#example-table", {
|
||||
data:tabledata,
|
||||
autoColumns:true,
|
||||
});
|
||||
</script>
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Get Select Option Text</title></head><body><select id="mySelect"><option value="1">Option 1</option><option value="2">Option 2</option><option value="3">Option 3</option></select>
|
||||
<button onclick="!function(){var e=document.getElementById('mySelect'),t=e.options[e.selectedIndex].textContent;alert('Selected Option Text: '+t)}()">Get Selected Option Text</button>
|
||||
</body></html>
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
<link rel="stylesheet" href="https://unpkg.com/gridjs/dist/theme/mermaid.min.css" />
|
||||
<script src="https://unpkg.com/gridjs/dist/gridjs.production.min.js"></script>
|
||||
<script src="https://unpkg.com/gridjs/plugins/selection/dist/selection.umd.js"></script>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script src="/assets/cdn.tailwindcss.com"></script>
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" />
|
||||
|
||||
<!-- <link rel="stylesheet" type="text/css" href="/assets/main.css" /> -->
|
||||
|
|
|
|||
|
|
@ -200,7 +200,7 @@
|
|||
</div>
|
||||
<div class="right pl-12 pt-6" style="width: 100%; display: flex; flex-direction: column; margin: 30px; background-color: #FFF; border-radius: 10px; box-shadow: 0px 0px 20px 0px #E6E5F4;">
|
||||
<style>
|
||||
@import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
|
||||
@import url('https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css');
|
||||
/* @import url(https://fonts.googleapis.com/css?family=Titillium+Web:300); */
|
||||
.fa-2x {
|
||||
font-size: 2em;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue