表单提交时增加计时器时间

时间:2018-11-12 16:44:32

标签: javascript php laravel echo pusher

因此,我有一个页面,用户可以在该页面上查看某个项目,在该页面上,他可以看到倒数计时器上的剩余时间(在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]);
}

}

0 个答案:

没有答案