Home » Php » javascript – Live updating with notification sound for queue management system (Laravel 6)

javascript – Live updating with notification sound for queue management system (Laravel 6)

Posted by: admin February 25, 2020 Leave a comment

Questions:

I am currently working on a Queue Management System that give’s the client a queue number and wait for his turn that is viewable at the display monitor.

What will I do so that when the Admin side calls a queue. The queue number will automatically shows on the display monitor without reloading the webpage and making a notification sound (if possible a text to speech notification that will read the queue number)?

As of now, the system can call a queue.but I need to reload the webpage on the display monitor to see the updates.

Please help me. Thanks!

Here is my controller for calling a queue:

public function callqueue(Request $request)
{
    $request->validate([
        'called'=>['max:255'],
        'counter'=>['max:255']
    ]);

    $dept=Auth::user()->department;
    Queue::where([
        ['department',$dept],
        ['called', 'no']
        ])
        ->whereDate('created_at', Carbon::today())
        ->orderBy('id', 'asc')
        ->first()
        ->update(['called'=>$request->called,'counter'=>$request->counter]);

    return redirect('admin')->withStatus(__('Queue has been called.'));

}

Here is the part where the queue will be displayed (in display.blade.php):

<div class="card shadow bg-gradient-red shadow">
    <h1 class="display 1 font-weight-bold text-white"><strong>NOW SERVING</strong></h1>
    </div>
  <div class="row">

      <div class="col-sm-6">
        <div class="card bg-gradient-lighter mt-3 shadow">
            <div class="card-header-lg">
            <h3 class="text-default text-uppercase">{{$cashier1->department ?? 'cashier'}}</h3>
            </div>
            <div class="card-body-sm">
                <h1 class="display-1 font-weight-bold"><strong>{{$cashier1->letter ?? ''}}-{{$cashier1->number ?? ''}}</strong></h1>
            </div>
            <div class="card-footer-sm">
              <p class="text-warning font-weight-bold">COUNTER 1</p>
            </div>
        </div>
      </div>
      <div class="col-sm-6">
        <div class="card bg-gradient-lighter shadow mt-3">
            <div class="card-header-lg">
                <h3 class="text-default text-uppercase">{{$cashier2->department ?? 'cashier'}}</h3>
            </div>
            <div class="card-body-sm">
                <h1 class="display-1 font-weight-bold"><strong>{{$cashier2->letter ?? ''}}-{{$cashier2->number ?? ''}}</strong></h1>
            </div>
            <div class="card-footer-sm">
                <p class="text-warning font-weight-bold">COUNTER 2</p>
            </div>
        </div>
      </div>
  </div>



    <div class="row">
        <div class="col-sm-6">
            <div class="card bg-gradient-lighter shadow mt-3">
                <div class="card-header-lg">
                    <h3 class="text-default text-uppercase">{{$accounting1->department ?? 'accounting'}}</h3>
                </div>
                <div class="card-body-sm">
                    <h1 class="display-1 font-weight-bold"><strong>{{$accounting1->letter ?? ''}}-{{$accounting1->number ?? ''}}</strong></h1>
                </div>
                <div class="card-footer-sm">
                    <p class="text-warning font-weight-bold">COUNTER 1</p>
                </div>
            </div>
        </div>


      <div class="col-sm-6">
        <div class="card bg-gradient-lighter mt-3 shadow">
            <div class="card-header-lg">
            <h3 class="text-default text-uppercase">{{$accounting2->department ?? 'accounting'}}</h3>
            </div>
            <div class="card-body-sm">
                <h1 class="display-1 font-weight-bold"><strong>{{$accounting2->letter ?? ''}}-{{$accounting2->number ?? ''}}</strong></h1>
            </div>
                <div class="card-footer-sm">
                  <p class="text-warning font-weight-bold">COUNTER 2</p>
                </div>
            </div>
          </div>
    </div>

      <div class="row">
        <div class="col-sm-6">
            <div class="card bg-gradient-lighter shadow mt-3">
                <div class="card-header-lg">
                    <h3 class="text-default text-uppercase">{{$registrar1->department ?? 'registrar'}}</h3>
                </div>
                <div class="card-body-sm">
                    <h1 class="display-1 font-weight-bold"><strong>{{$registrar1->letter ?? ''}}-{{$registrar1->number ?? ''}}</strong></h1>
                </div>
                <div class="card-footer-sm">
                    <p class="text-warning font-weight-bold">COUNTER 1</p>
                </div>
            </div>
        </div>

        <div class="col-sm-6">
            <div class="card bg-gradient-lighter mt-3">
                <div class="card-header-lg">
                    <h3 class="text-default text-uppercase">{{$registrar2->department ?? 'registrar'}}</h3>
                </div>
                <div class="card-body-sm">
                    <h1 class="display-1 font-weight-bold"><strong>{{$registrar2->letter ?? ''}}-{{$registrar2->number ?? ''}}</strong></h1>
                </div>
                <div class="card-footer-sm">
                    <p class="text-warning font-weight-bold">COUNTER 2</p>
                </div>
            </div>
        </div>

      </div>

  </div>
How to&Answers: