Hellow Good day. im having trouble in my system. This is developed using cakephp 4. What i would like my system to do is that it would change the number in the form after i scanned the qr code. I’m using the default cake layout in my system. here is the picture of what i would want to change.
in the picture above i would want the system to identify and change the number of the rider based on the qr code scanned Rider Code (rider_id in database).
here’s my code in altavistaque template add.php
<!-- QR Scanner Image box-->
<?= $this->Html->script('html5-qrcode.min.js') ?> <!-- This is the js from https://github.com/mebjas/html5-qrcode -->
<div style="text-align: center;">
<div id="reader" width="600px;"></div>
<div id="show" style="display: none;">
<h4>Scanned Results</h4>
<p style="color: blue;" id="result"></p>
</div>
</div>
<!--From from the add to select the number manually to add into queue-->
<?= $this->Form->create($altavistaque) ?>
<fieldset>
<legend><?= __('Add to the Queue') ?></legend>
<!-- Add an input field to capture the rider_id -->
<?= $this->Form->hidden('rider_id', ['id' => 'rider_id']) ?>
<?php echo $this->Form->control('rider_id', ['options' => $riders]); ?>
<?= $this->Form->button(__('Submit')) ?>
<?= $this->Form->end() ?>
<!-- This is where the script to use the camera and scan the QR code-->
<script>
const html5Qrcode = new Html5Qrcode('reader');
const qrCodeSuccessCallback = (decodedText, decodedResult) => {
if (decodedText) {
document.getElementById('show').style.display = 'block';
document.getElementById('result').textContent = decodedText;
// Set the scanned rider ID as the value of the hidden input field
document.getElementById('rider_id').value = decodedText;
html5Qrcode.stop();
}
};
const config = { fps: 10, qrbox: { width: 250, height: 250 } };
html5Qrcode.start({ facingMode: "environment" }, config, qrCodeSuccessCallback);
</script>
</div>
</div>
Here are my codes on the AltavistaqueController.php
public function add()
{
$altavistaque = $this->Altavistaque->newEmptyEntity();
//use for skipping the authorization making anyone view the contents
$this->Authorization->skipAuthorization();
if ($this->request->is(‘post’)) {
$altavistaque = $this->Altavistaque->patchEntity($altavistaque, $this->request->getData());
$riderId = $this->request->getData(‘rider_id’);
// Check if the rider_id is set and valid
if (!empty($riderId)) {
$this->loadModel('Riders');
$rider = $this->Riders->get($riderId);
// Process the rider data or save it as needed
// For now, let's just set the rider_id in the Altavistaque entity
$altavistaque->rider_id = $rider->id;
} else {
throw new BadRequestException('Invalid rider ID.');
}
if ($this->Altavistaque->save($altavistaque)) {
$this->Flash->success(__('Rider has been added to the Queue.'));
return $this->redirect(['action' => 'index']);
} else {
$this->Flash->error(__('Rider cannot be added to the Queue. Please, try again.'));
}
}
// Fetch the list of riders for the select input
$riders = $this->Altavistaque->Riders->find('list', ['limit' => 200])->toArray();
$this->set(compact('altavistaque', 'riders'));
}
My relationship to the tables of the que and riders also have been set.
public function initialize(array $config): void
{
parent::initialize($config);
$this->setTable('altavistaque');
$this->setDisplayField('id');
$this->setPrimaryKey('id');
$this->addBehavior('Timestamp');
$this->belongsTo('Riders', [
'foreignKey' => 'rider_id',
'joinType' => 'INNER',
]);
}