Hi, currently working on project that need real time update from database so i need to listen to the database update in all column please how can i do that ?
This is my code
Send-notification.html
<template>
<div class="page" data-name="send-notification">
<div class="navbar">
<div class="navbar-bg"></div>
<div class="navbar-inner sliding">
<div class="title">Call Collectors</div>
</div>
</div>
<div class="page-content">
<div class="block-title">Send a call to all collectors</div>
<div class="block block-strong">
<button class="button button-large button-fill button-preloader ${isLoading ? 'button-loading' : ''}"
@click=${SendNotification} id="sendNotification">
<span class="preloader"></span>
<span>Call a Collector</span>
</button>
<span id="timer"></span>
</div>
<!-- Some text about send notification -->
<div class="block-title">How it works ?</div>
<div class="block block-strong">
<p>1 - When you click on the button above, a notification will be sent to all collectors.</p>
<p>2 - They will be able to see the notification on their app and accept it.</p>
<p>3 - When they accept the notification, they will be able to see the collection point on the map and start the collection process.</p>
</div>
</div>
</div>
</template>
<script>
export default (props, { $update }) => {
let isLoading = false;
var CollectionPointID = getCookie('CollectionPointID', true);
const SendNotification = () => {
isLoading = true;
// Create Random code
var code = "RS-" + Math.floor(10000000 + Math.random() * 90000000);
// app.request({
// url : API_URL + '/records/collection_orders/',
// headers: {"X-API-Key": "123456"},
// data : {
// code: code,
// collection_point_id:CollectionPointID,
// to_collectors:"all_collectors",
// is_accepted:0,
// before_picture:null,
// after_picture:null,
// is_completed:0,
// collector_id:0
// },
// contentType: 'application/x-www-form-urlencoded',
// method: 'POST'
// });
$update();
setTimeout(() => {
isLoading = false;
document.getElementById("timer").style.display = "block";
document.getElementById("sendNotification").style.display = "none";
// Show alert
app.dialog.alert('Notification sent to all collectors', 'Notification');
// Show some information about the order after send
app.dialog.alert(`Order code: <b> ${code} </b>`, 'Order Information');
$update();
}, 3000);
// Create Countdown 10 seconds and disable button before next send
var count = 10;
var counter = setInterval(timer, 1000); //1000 will run it every 1 second
function timer() {
count = count - 1;
if (count <= 0) {
clearInterval(counter);
// hide style timer
document.getElementById("timer").style.display = "none";
// Hide button style
document.getElementById("sendNotification").style.display = "block";
return;
}
document.getElementById("timer").innerHTML = "Resend in " + count + " seconds"; // watch for spelling
}
}
// Waiting for new database update
return $render;
}
</script>
<style>
/* Timer Style like a clock */
#timer {
display: block;
text-align: center;
font-size: 10px;
font-weight: bold;
color: rgb(83, 117, 255);
margin-top: 20px;
}
</style>