sending notification in pusher private channel to selected users laravel8 - notifications

I'm sending notifications using the public pusher channel in laravel8 .. How can I turn it to a private channel in order to send notifications just to the selected user.. which the admin selected from the dropdown menu?
here is my controller
public function notification(MessageRequest $request){
$data =[
'title' => $request->title,
'body' => $request->body,
// 'users' => $request->users,
];
event(new NewNotification($data));
return redirect()->back()->with(['success'=>'success']);
}
My event :
class NewNotification implements ShouldBroadcast
{
use Dispatchable, InteractsWithSockets, SerializesModels;
/**
* Create a new event instance.
*
* #return void
*/
public $title;
public $body;
// public $users;
public function __construct($data=[])
{
$this->title = $data['title'];
$this->body = $data['body'];
// $this->users = $data['users'];
}
/**
* Get the channels the event should broadcast on.
*
* #return Channel|array
*/
public function broadcastOn()
{
return new Channel('notification');
}
}
this is layout:
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://js.pusher.com/7.0/pusher.min.js"></script>
<script>
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
// Enable pusher logging - don't include this in production
Pusher.logToConsole = true;
var pusher = new Pusher('e7a414640973c420f866', {
// cluster: 'mt1'
});
</script>
<script src="{{asset('js/pusherNotifications.js')}}"></script>
and javascript file is :
var notificationsWrapper = $('.dropdown-notifications');
var notificationsToggle = notificationsWrapper.find('a[data-toggle]');
var notificationsCountElem = notificationsToggle.find('span[data-count]');
var notificationsCount = parseInt(notificationsCountElem.data('count'));
var notifications = notificationsWrapper.find('li.scrollable-container');
// Subscribe to the channel we specified in our Laravel Event
var channel = pusher.subscribe('notification');
// Bind a function to a Event (the full Laravel class)
channel.bind('App\\Events\\NewNotification', function (data) {
var existingNotifications = notifications.html();
var newNotificationHtml = `<a href="`+data.title+`">
<div class="media-body"><h6 class="media-heading text-right">` + data.title + `</h6>
<p class="notification-text font-small-3 text-muted text-right">` + data.body + `</p><small style="direction: ltr;">
</small></div></div></a>`;
notifications.html(newNotificationHtml + existingNotifications);
notificationsCount += 1;
notificationsCountElem.attr('data-count', notificationsCount);
notificationsWrapper.find('.notif-count').text(notificationsCount);
notificationsWrapper.show();
});
any help please,

Related

Modal Pop-Up Not Closing Properly After Form Submission

This is a follow-up to the following post:
Modal Pop-Up Displaying Incorrectly When ModelState.IsValid = false Redirect
My Pop-Up validates correctly but after it process the form data it is not getting closed. Once the data gets loaded in the db, I run the following:
TempData["ID"] = status.IssueID;
return RedirectToAction("edit");
Since the Modal doesn't close, the view data gets populated in the modal and not the window.
If I try to use return View("edit"); the underlying page fails because there is no model data on the page.
Here is the current code that I implemented from the post referenced above:
<script>
$('body').on('click', '.modal-link', function () {
var actionUrl = $(this).attr('href');
$.get(actionUrl).done(function (data) {
$('body').find('.modal-content').html(data);
});
$(this).attr('data-target', '#modal-container');
$(this).attr('data-toggle', 'modal');
});
$('body').on('click', '.relative', function (e) {
e.preventDefault();
var form = $(this).parents('.modal').find('form');
var actionUrl = form.attr('action');
var dataToSend = form.serialize();
$.post(actionUrl, dataToSend).done(function (data) {
$('body').find('.modal-content').html(data);
});
})
$('body').on('click', '.close', function () {
$('body').find('#modal-container').modal('hide');
});
$('#CancelModal').on('click', function () {
return false;
});
$("form").submit(function () {
if ($('form').valid()) {
$("input").removeAttr("disabled");
}
});
</script>
Here is the code that I run to open the modal:
<div id="modal-container" class="modal fade" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
</div>
</div>
</div>
Add New Status
And here are the actions when I submit data from the modal:
[ValidateAntiForgeryToken]
[HttpPost]
public ActionResult CreateEdit(StatusViewModel model)
{
if (ModelState.IsValid)
{
StatusModel status = new StatusModel();
status.IssueID = model.IssueID;
status.StatusDate = DateTime.Today;
status.Status = model.Status;
status.ColorCode = model.ColorCode;
status.NextStep = model.NextStep;
if (model.addedit == "edit")
{
status.UpdatedByNTID = AppHttpContext.Current.Session.GetString("userntid").ToString();
string done = _adoSqlService.UpdateStatus(status);
}
else
{
status.EnteredByNTID = AppHttpContext.Current.Session.GetString("userntid").ToString();
string done = _adoSqlService.InsertStatus(status);
}
TempData["ID"] = status.IssueID;
return RedirectToAction("edit");
}
else
{
return PartialView("_CreateEdit", model);
}
}
Before I implemented the Javascript code as identified in the link, the modal form closed properly but I couldn't validate. After implementation, the modal form validates but the modal receives the redirect instead of closing. What am I doing wrong
the Modal doesn't close, the view data gets populated in the modal and not the window.
It's the expected result, Ajax render the result of redirection to the modal. You should do the redirection in the done function.
Modify the CreateEdit method:
[ValidateAntiForgeryToken]
[HttpPost]
public ActionResult CreateEdit(StatusViewModel model)
{
if (ModelState.IsValid)
{
StatusModel status = new StatusModel();
status.IssueID = model.IssueID;
status.StatusDate = DateTime.Today;
status.Status = model.Status;
status.ColorCode = model.ColorCode;
status.NextStep = model.NextStep;
if (model.addedit == "edit")
{
status.UpdatedByNTID = AppHttpContext.Current.Session.GetString("userntid").ToString();
string done = _adoSqlService.UpdateStatus(status);
}
else
{
status.EnteredByNTID = AppHttpContext.Current.Session.GetString("userntid").ToString();
string done = _adoSqlService.InsertStatus(status);
}
TempData["ID"] = status.IssueID;
}
return PartialView("_CreateEdit", model);
}
Add a hidden input in the partial view to mark if the returned model has passed the validation.
<input name="IsValid" type="hidden" value="#ViewData.ModelState.IsValid.ToString()" />
Then determine whether to redirect in the script:
$('body').on('click', '.relative', function (e) {
e.preventDefault();
var form = $(this).parents('.modal').find('form');
var actionUrl = form.attr('action');
var dataToSend = form.serialize();
$.post(actionUrl, dataToSend).done(function (data) {
$('body').find('.modal-content').html(data);
var isValid = $('body').find('[name="IsValid"]').val() == 'True';
if (isValid) {
$('body').find('#modal-container').modal('hide');
window.location.href = "/Issue/Edit";
}
});
})
Result:

Add Pre default text in phalcon flash messages

In phalcon default flash messaging service only provide with default error div.
<div class="alert alert-warning">Our message</div>
But i want to add something inside div box like this.
<div class="alert alert-warning"> <button class="close">x</button> Our Message </div>
However, phalcon we are only allow to set only class of each message as per my knowledge.
$di->set('flash', function () {
return new FlashSession([
'error' => 'alert alert-danger alert-dismissible',
'success' => 'alert alert-success alert-dismissible',
'notice' => 'alert alert-info alert-dismissible',
'warning' => 'alert alert-warning alert-dismissible'
]);
});
Is there any configuration or any other way to add that close button on every message. I want something like
message = '<button class="close-btn">x</button>'+message
However i don't want to add this close button on every flash message because in future may be i need to change the class of close button so that in that case i need to change in all from the project.
You can do this by extending the Phalcon\FlashSession class and overriding the outputMessage() method, or by creating your own flash component to output the HTML you desire. Example of a custom flash component is below, we use a similar class when we develop with Falcon, this component assumes the existence of a session component in the DI.
This is untested but the code in principle would give you the ability to add a close button to the output HTML, or you can set specific HTML content for each message type in the relevant methods (error, success, warning, info).
Example usage:
// settings messages in your controllers / components
// 2nd param defines a position
$this->flashMessage->error('Something is bad!', 'form_top');
$this->flashMessage->success('Something is right!');
$this->flashMessage->info('Something is interesting!');
$this->flashMessage->warning('Something is worrying!');
// rendering messages in your views
// 1st param will render messages for a specific position if a position was set
$this->flashMessage->render();
$this->flashMessage->render('form_top');
Example class:
class FlashMessage extends Phalcon\Mvc\User\Component
{
/**
* #var array
**/
public $classmap = array();
/**
* Sets defaults for the class map (optional)
*
* #param array $classmap
**/
public function __construct($classmap = array()) {
// -- set the defaults
$this->classmap = array(
'error' => 'flash_message-error',
'success' => 'flash_message-success',
'info' => 'flash_message-info',
'warning' => 'flash_message-warning'
);
// -- set new class map options (also optional)
if (!empty($classmap)) {
foreach ($classmap as $key => $value) {
$this->classmap[$key] = $value;
}
}
}
/**
* error(), success(), info(), warning()
* Sets the flash messages
*
* #param string message
* #param string position
* #return string
**/
public function error($message, $position = '')
{
$this->session->flashMessage = array(
'position' => $position,
'message' => '<div class="' . $this->classmap['error'] . '">
' . $message . '
</div>
');
}
public function success($message, $position = '')
{
$this->session->flashMessage = array(
'position' => $position,
'message' => '<div class="' . $this->classmap['success'] . '">
' . $message . '
</div>
');
}
public function info($message, $position = '')
{
$this->session->flashMessage = array(
'position' => $position,
'message' => '<div class="' . $this->classmap['info'] . '">
' . $message . '
</div>
');
}
public function warning($message, $position = '')
{
$this->session->flashMessage = array(
'position' => $position,
'message' => '<div class="' . $this->classmap['warning'] . '">
' . $message . '
</div>
');
}
/**
* Check if theres messages in the session to render
*
* #param string $position
* #return bool
**/
public function hasMessage($position = null)
{
if (isset($this->session->flashMessage) && !empty($position)) {
return $this->session->flashMessage['position'] == $position ? true : false ;
} else {
return $this->session->flashMessage ? true : false ;
}
}
/**
* Renders the flash message
*
* #param string $position
* #return string
**/
public function render($position = null)
{
// -- store the message locally
$message = $this->session->flashMessage;
// -- check if there is in fact a flashed message
if (empty($message))
return;
// -- then remove from the session
$this->session->remove('FlashMessage');
// -- if no position the just return the message
if (is_null($position)) {
return $message['message'];
// -- else return the requested position
} elseif ($position == $message['position']) {
return $message['message'];
}
}
}
I am using something like this, you can extend it like you want. But this is just the gist of how it works:
class Messenger extends Component
{
protected static $_messageCloseHtml = '×';
/**
* #param array|string $messages
*/
public static function flashError($messages)
{
$messages = !is_array($messages) ? [$messages] : $messages;
foreach ($messages as $message) {
\Phalcon\Di::getDefault()->get('flashSession')->error(self::_getBody($message));
}
}
/**
* #param string $message
* #return string
*/
protected static function _getBody($message)
{
return self::$_messageCloseHtml . $message;
}
}
For every message, you can add some HTML code to the message.
My flashError is for the error messages. You can add the same method code for the warning, info and success.
So basically you extend the (existing) FlashSession and when assigning the messages you call a global method which adds additional text or html to your message.

How to feed a Google Calendar?

I am using this sample to feed my calendar. I have created a Client ID but after I run this project I get 2 errors in console as is shown:
Code:
<html>
<head>
<script type="text/javascript">
// Your Client ID can be retrieved from your project in the Google
// Developer Console, https://console.developers.google.com
var CLIENT_ID = '633454716537-7npq10974v964a85l2bboc2j08sc649r.apps.googleusercontent.com';
// This quickstart only requires read-only scope, check
// https://developers.google.com/google-apps/calendar/auth if you want to
// request write scope.
var SCOPES = ['https://www.googleapis.com/auth/calendar.readonly'];
/**
* Check if current user has authorized this application.
*/
function checkAuth() {
gapi.auth.authorize(
{
'client_id': CLIENT_ID,
'scope': SCOPES,
'immediate': true
}, handleAuthResult);
}
/**
* Handle response from authorization server.
*
* #param {Object} authResult Authorization result.
*/
function handleAuthResult(authResult) {
var authorizeDiv = document.getElementById('authorize-div');
if (authResult && !authResult.error) {
// Hide auth UI, then load Calendar client library.
authorizeDiv.style.display = 'none';
loadCalendarApi();
} else {
// Show auth UI, allowing the user to initiate authorization by
// clicking authorize button.
authorizeDiv.style.display = 'inline';
}
}
/**
* Initiate auth flow in response to user clicking authorize button.
*
* #param {Event} event Button click event.
*/
function handleAuthClick(event) {
gapi.auth.authorize(
{client_id: CLIENT_ID, scope: SCOPES, immediate: false},
handleAuthResult);
return false;
}
/**
* Load Google Calendar client library. List upcoming events
* once client library is loaded.
*/
function loadCalendarApi() {
gapi.client.load('calendar', 'v3', listUpcomingEvents);
}
/**
* Print the summary and start datetime/date of the next ten events in
* the authorized user's calendar. If no events are found an
* appropriate message is printed.
*/
function listUpcomingEvents() {
var request = gapi.client.calendar.events.list({
'calendarId': 'primary',
'timeMin': (new Date()).toISOString(),
'showDeleted': false,
'singleEvents': true,
'maxResults': 10,
'orderBy': 'startTime'
});
request.execute(function(resp) {
var events = resp.items;
appendPre('Upcoming events:');
if (events.length > 0) {
for (i = 0; i < events.length; i++) {
var event = events[i];
var when = event.start.dateTime;
if (!when) {
when = event.start.date;
}
appendPre(event.summary + ' (' + when + ')')
}
} else {
appendPre('No upcoming events found.');
}
});
}
/**
* Append a pre element to the body containing the given message
* as its text node.
*
* #param {string} message Text to be placed in pre element.
*/
function appendPre(message) {
var pre = document.getElementById('output');
var textContent = document.createTextNode(message + '\n');
pre.appendChild(textContent);
}
</script>
<script src="https://apis.google.com/js/client.js?onload=checkAuth">
</script>
</head>
<body>
<div id="authorize-div" style="display: none">
<span>Authorize access to calendar</span>
<!--Button for the user to click to initiate auth sequence -->
<button id="authorize-button" onclick="handleAuthClick(event)">
Authorize
</button>
</div>
<pre id="output"></pre>
</body>
</html>
Console errors:
[Error] Failed to load resource: the server responded with a status of 400 (Bad Request) (auth, line 0)
[Error] Refused to display 'https://accounts.google.com/o/oauth2/auth?client_id=633454716537-7npq10974v964a85l2bboc2j08sc649r.apps.googleusercontent.com&scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fcalendar.readonly&immediate=true&include_granted_scopes=true&proxy=oauth2relay396521106&redirect_uri=postmessage&origin=file%3A%2F%2F&response_type=token&state=338793751%7C0.4135151437&authuser=0' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'. (about:blank, line 0)
All I want to know is to show the upcoming events from my calendar.
Have anyone any idea how to solve this?
You might try to make sure it is a public calendar.
You can also embed googles calendar in a webpage directly- in calendars/settings
You could also try something like this:
http://mikeclaffey.com/google-calendar-into-html/

AngularFire replacing $id with reference to Object when pushed into array

Not sure what I'm doing wrong here:
var eventDetails = new Event(key);
.factory("Event", ["$FirebaseObject", "$firebase",
function($FirebaseObject, $firebase, settings) {
var EventFactory = $FirebaseObject.$extendFactory({
});
return function(eventId) {
var ref = FIREBASE_REF.child('events/' + eventId);
var sync = $firebase(ref, {
objectFactory: EventFactory
});
return sync.$asObject(); // this will be an instance of UserFactory
}
}
])
eventDetails.$loaded(function(){
eventList.push(eventDetails);
});
Every item in eventList is an object with $id = the same object, rather than $id = some string.

Codeigniter get random record with limit

I've created a page that load 4 products everytime you scroll down the page with codeigniter and Ajax.
I followed this tutorial for create pagination with codeigniter and jQuery.Everything works fine, moreover I've changed the load type from database using Ajax.
I've got a problem with codeigniter.
When I try to get random record from the table I've got duplicate products.
This is the functions in codeigniter:
UPDATE CONTROLLER
function index()
{
$this->load->helper('url');
$data['description'] = "Description";
$data['keywords'] = "Keywords";
$data['products'] = $this->abitainterni->getAllProductsLimit();
$data['get_products'] = $this->abitainterni->get_products();
$this->load->view('welcome', $data);
}
function get_products($offset)
{
$already_used = $this->input->post('already_used');
$already = explode(',', $already_used);
$data['products'] = $this->abitainterni->getAllProductsLimit($offset, $already);
$arr['view'] = $this->load->view('get_products', $data, true);
$bossy = '';
foreach($data['products'] as $p) {
$bossy .= $p->productID.',';
}
$arr['view'] = $bam;
$arr['ids'] = $bossy;
echo json_encode($arr);
return;
}
UPDATE SCRIPT
<script type="text/javascript">
$(document).ready(function(){
<?
$like_a_boss = "";
foreach($products as $gp):
$like_a_boss .= $gp->productID.',';
endforeach;
?>
var products = '<?= $like_a_boss; ?>';
var loaded_products = 0;
$(".loadMoreProducts").click(function(){
loaded_products += 4;
var dati = "welcome/get_products/" + loaded_products;
$.ajax({
url:'welcome/get_products/' + loaded_products,
type: 'post',
data: {already_used: products},
cache: false,
success: function(data) {
var obj = $.parseJSON(data);
$("#mainContainerProductWelcome").append(obj.view);
already_used += obj.ids;
if(loaded_products >= products - 4) {
$(".loadMoreProducts").hide();
} else {
// load more still visible
}
},
error: function() {
// there's something wrong
}
});
// show spinner on ajax request starts
$(".loading-spinner").ajaxStart(function(){
$(".loading-spinner").show();
$(".text-load").hide();
});
// ajax request complets hide spinner
$(".loading-spinner").ajaxStop(function(){
$(".loading-spinner").delay(5000).hide();
$(".text-load").show();
});
return false;
});
// submit form contact
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() >= $(document).height()) {
// click on load more btn
$(".loadMoreProducts").click();
return false;
}
});
});
</script>
you'll need to keep track of the products you've already queried, throw their id's in an array, and then use something like a where not in. So something like this:
function getAllProductsLimit($offset=0, $already_used = array(0))
{
$this->db->order_by('productID', 'RANDOM');
$this->db->where_not_in('productID', $already_used);
$query = $this->db->get('product', 4, $offset);
if($query->num_rows() > 0){
return $query->result();
} else {
return 0;
}
}
NEW CONTROLLER
function index()
{
$this->load->helper('url');
$data['title'] = "Scopri i nostri prodotti";
$data['description'] = "Description";
$data['keywords'] = "Keywords";
$data['products'] = $this->abitainterni->getAllProductsLimit();
$data['get_products'] = $this->abitainterni->get_products();
$this->load->view('welcome', $data);
}
function get_products($offset)
{
$already_used = $this->input->post('already_used');
$already = explode(',', $already_used);
$data['products'] = $this->abitainterni->getAllProductsLimit($offset, $already);
$arr['view'] = $this->load->view('get_products', $data, true);
$bossy = '';
foreach($data['products'] as $p)
{
$bossy .= $->productID.',';
}
$arr['view'] = $bam;
$arr['ids'] = $bossy;
echo json_encode($arr);
return;
}
NEW SCRIPT
<script type="text/javascript">
$(document).ready(function(){
<?
$like_a_boss = '';
foreach($get_products as $gp):?>
$like_a_boss .= $gp->productID.',';
endforeach;?>
var products = '<?= $like_a_boss; ?>';
var loaded_products = 0;
$(".loadMoreProducts").click(function(){
loaded_products += 4;
var dati = "welcome/get_products/" + loaded_products;
$.ajax({
url:'welcome/get_products/' + loaded_products,
type: 'post',
data: {already_used: products},
cache: false,
success: function(data) {
var obj = $.parseJSON(data);
$("#mainContainerProductWelcome").append(obj.view);
already_used += obj.ids;
if(loaded_products >= products - 4) {
$(".loadMoreProducts").hide();
} else {
// load more still visible
}
},
error: function() {
// there's something wrong
}
});
// show spinner on ajax request starts
$(".loading-spinner").ajaxStart(function(){
$(".loading-spinner").show();
$(".text-load").hide();
});
// ajax request complets hide spinner
$(".loading-spinner").ajaxStop(function(){
$(".loading-spinner").delay(5000).hide();
$(".text-load").show();
});
return false;
});
// submit form contact
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() >= $(document).height()) {
// click on load more btn
$(".loadMoreProducts").click();
return false;
}
});
});
</script>
Then whereever your using that function, before you echo out your results to your ajax function, run a quick foreach to add the ids of the products you just got to the already used array. You can either store this is session, or pass it back and forth between your ajax stuff, or if your ajax stuff is written fine, you don't need to worry about it, just attach the product id's to each product you're displaying using a data attribute or something and generate the array that way.