Увеличение времени таймера при отправке формы - PullRequest
0 голосов
/ 12 ноября 2018

Итак, у меня есть страница, на которой пользователь может посмотреть определенный элемент, и на этой странице он может увидеть время, оставшееся до таймера обратного отсчета (что делается в сценарии js), и сделать ставку для этого элемента с помощью нажав на кнопку «сделать ставку». Таким образом, время для подачи заявок на этот элемент увеличивается. Поэтому, когда он это делает, он автоматически перенаправляется на ту же страницу, и все перезагружается, и таймер правильно показывает увеличенное время. Но, например, другие пользователи также могут делать ставки, тогда определенный пользователь также должен видеть увеличение времени на странице, когда другие пользователи делают ставки. Я пытаюсь сделать это через Pusher и Echo. Пока что Pusher и Echo работают нормально. Мне просто нужно как-то перезагрузить крайний срок переменной в скрипте через Echo и снова сделать инициализацию часов, когда будет проведен аукцион. Как я могу сделать так, чтобы эта переменная присваивала себе новое значение всякий раз, когда кто-либо делает ставку? Вот что я сделал

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 (модель)

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]);
}

}

...