drbz99867 2018-11-12 16:44
浏览 109

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

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

}

  • 写回答

0条回答 默认 最新

    报告相同问题?

    悬赏问题

    • ¥20 在虚拟机的pycharm上
    • ¥15 jupyterthemes 设置完毕后没有效果
    • ¥15 matlab图像高斯低通滤波
    • ¥15 针对曲面部件的制孔路径规划,大家有什么思路吗
    • ¥15 钢筋实图交点识别,机器视觉代码
    • ¥15 如何在Linux系统中,但是在window系统上idea里面可以正常运行?(相关搜索:jar包)
    • ¥50 400g qsfp 光模块iphy方案
    • ¥15 两块ADC0804用proteus仿真时,出现异常
    • ¥15 关于风控系统,如何去选择
    • ¥15 这款软件是什么?需要能满足我的需求