So I have a page on which user can look at a certain item, and on that page, he can see the time remaining on a countdown timer (which is done in js script), and make a bid for that item by clicking on the "make a bid" button. By doing so, time for making bids for that item is incremented. So when he does that, he is automatically redirected to the same page and everything is reloaded and the timer shows incremented time correctly. But, for example, other users can also make bids, then, the certain user also needs to see time incremented while on the page when other users make bids. I am trying to do this via Pusher and Echo. So far, Pusher and Echo are working fine. I just need somehow to reload variable deadline in the script via Echo and make clock initialaze again whenewher an auction is made. How can I make that variable assings itself a new value whenever anyone makes a bid? Here is what I have done
auction.blade.php
@extends('layouts.front')
@section('content')
<div>
<h2>
{{ $auction->name }}
</h2>
<hr>
<div class="row">
<div>
<table class="table table-aukcija table-clear">
<tbody>
<tr>
<td>Time remaining:</td>
<td class="counter_polje">
<strong id="clockdiv"></strong>
<br>
<small><em>( {{ date($auction->end_date) }} )</em></small>
</td>
</tr>
<tr>
<td>Num of offers:</td>
<td>{{ $auction->offers }} offers
</tr>
</tbody></table>
<table class="table table-aukcija table-nudjenje table-clear">
<tbody>
<tr>
<td colspan="2" class="table-nudjenje-biding">
<form id="formMojaPonuda" name="formMojaPonuda" action="{{ asset('/auctions/'.$auction->id.'/offer') }}" method="POST" enctype="multipart/form-data">
{{ csrf_field() }}
<div class="input-group">
<input type="hidden" name="minBid" id="minBid" value="{{ $auction->id }}">
<input type="hidden" name="minBid" id="minBid" value="{{ $auction->name }}">
<input type="hidden" name="minBid" id="minBid" value="{{ $auction->descript }}">
<input type="hidden" name="minBid" id="minBid" value="{{ $auction->price }}">
<input type="hidden" name="minBid" id="minBid" value="{{ $auction->end_date }}">
<input name="txtIznos" id="bidValue" type="text" autocomplete="off" placeholder="(min. RSD 1.50)" class="form-control">
<span class="input-group-btn">
<button type="submit" class="btn btn-success">Make a bid</button>
</span>
</div>
</form></td></tr></tbody></table></div></div></div></div>
<div id="app"></div>
<script src="{{ asset('js/app.js') }}"></script>
<script type="text/javascript">
Echo.channel('auctions')
.listen('AuctionMade', e => {
console.log('Auction has been made');
console.log(e);
});
</script>
<script type="text/javascript">
//var deadline = 'September 31 2018 23:59:59 GMT+0100';
var deadline = '<?php echo date($auction->end_date) ?>';
getTimeRemaining(endtime){
var t = Date.parse(endtime) - Date.parse(new Date());
var seconds = Math.floor( (t/1000) % 60 );
var minutes = Math.floor( (t/1000/60) % 60 );
var hours = Math.floor( (t/(1000*60*60)) % 24 );
var days = Math.floor( t/(1000*60*60*24) );
return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds
};
}
function initializeClock(id, endtime){
var clock = document.getElementById(id);
var timeinterval = setInterval(function(){
var t = getTimeRemaining(endtime);
/* clock.innerHTML = 'days: ' + t.days + '<br>' +
'hours: '+ t.hours + '<br>' +
'minutes: ' + t.minutes + '<br>' +
'seconds: ' + t.seconds;
*/
clock.innerHTML = t.days + ' dana ' +
t.hours + ' sati '+
t.minutes + ' minuta ' +
t.seconds + ' sekundi ';
if(t.total<=0){
clearInterval(timeinterval);
}
},1000);
}
initializeClock('clockdiv', deadline);
</script>
@endsection
AuctionMade.php
class AuctionMade implements ShouldBroadcast
{
use Dispatchable, InteractsWithSockets, SerializesModels;
/**
* Create a new event instance.
*
* @return void
*/
public function __construct()
{
//
}
/**
* Get the channels the event should broadcast on.
*
* @return Channel|array
*/
public function broadcastOn()
{
return new Channel('auctions');
}
}
Auction.php (model)
class Auction
{
public $id;
public $name;
public $descript;
public $meta_name;
public $meta_keyword;
public $price;
public $pic;
public $end_date;
public $offers;
public $offered_by;
public function getAll(){
$result =
DB::table('auctions')
->select('*')
->get();
return $result;
}
public function get(){
$result =
DB::table('auctions')
->select('*')
->where('id', '=', $this->id)
->first();
return $result;
}
//********************** COUNTS NUMBER OF AUCTIONS *****************************
public static function count(){
$result =
DB::table('auctions')
->count();
return $result;
}
public function increment($id){
$result =
DB::table('auctions')
->where('id', $id)
->update([
'offers' => DB::raw('offers + 1'),
'offered_by' => $this->offered_by,
'end_date' => $this->end_date
]);
return $result;
}
}
AuctionController.php
class AuctionController extends Controller
{
private $data = [];
public function show($id)
{
$auction = new Auction();
$auction->id = $id;
$this->data['auction'] = $auction->get();
return view('pages.auction', $this->data);
}
public function offer($id, Request $request){
$auction = new Auction();
$auction->id = $id;
$offered_by = $request->session()->get('user', 'id')[0];
$auction->offered_by = $offered_by->id;
$auction->end_date = Carbon::parse($auction->get()->end_date)->addSecond(7);
$auction->increment($id);
AuctionMade::dispatch();
return redirect()->route('auctionSingle', ['id' => $id]);
}
}
