scott-allen

Apr 2nd, 2019 10:44 AM

Looking for some advice please everyone...

in short I want to develop an overtime caluclator for emergency service workers for a project I am working on.

I would like them to be able to select their salary band from a drop down or list and then enter in a box the number of hours they completed at either time and third, time and half or double time and then be able to see what they have earned in overtime..

Any ideas or direction would be great!

Many thanks. S

bobbyiliev

Mar 26th, 2023 06:58 AM

Hi there,

This can be achieved in many ways depending on the tech stack that you are already using.

Here is an example for this with Laravel and a simple HTML + JS form:

  • The HTML form:
<form id="overtime-form">
  <div>
    <label for="salary-band">Salary Band:</label>
    <select name="salary-band" id="salary-band">
      <option value="band1">Band 1</option>
      <option value="band2">Band 2</option>
      <option value="band3">Band 3</option>
    </select>
  </div>
  <div>
    <label for="time-and-third">Time and Third:</label>
    <input type="number" name="time-and-third" id="time-and-third">
  </div>
  <div>
    <label for="time-and-half">Time and Half:</label>
    <input type="number" name="time-and-half" id="time-and-half">
  </div>
  <div>
    <label for="double-time">Double Time:</label>
    <input type="number" name="double-time" id="double-time">
  </div>
  <button type="submit">Calculate</button>
</form>
  • The JS logic:
// Get the form element
const form = document.getElementById('overtime-form');

// Handle form submission
form.addEventListener('submit', (e) => {
  e.preventDefault(); // prevent form from submitting

  // Get form data
  const formData = new FormData(form);
  const salaryBand = formData.get('salary-band');
  const timeAndThird = formData.get('time-and-third');
  const timeAndHalf = formData.get('time-and-half');
  const doubleTime = formData.get('double-time');

  // Calculate overtime pay based on salary band and hours worked
  let overtimePay = 0;
  if (salaryBand === 'band1') {
    overtimePay += timeAndThird * 1.33;
    overtimePay += timeAndHalf * 1.5;
    overtimePay += doubleTime * 2;
  } else if (salaryBand === 'band2') {
    overtimePay += timeAndThird * 1.4;
    overtimePay += timeAndHalf * 1.6;
    overtimePay += doubleTime * 2.2;
  } else if (salaryBand === 'band3') {
    overtimePay += timeAndThird * 1.5;
    overtimePay += timeAndHalf * 1.75;
    overtimePay += doubleTime * 2.5;
  }

  // Display the overtime pay to the user
  alert(`Your overtime pay is ${overtimePay.toFixed(2)}`);
});
  • And the Laravel Controller:
public function calculateOvertime(Request $request)
{
  // Get the form data
  $salaryBand = $request->input('salary-band');
  $timeAndThird = $request->input('time-and-third');
  $timeAndHalf = $request->input('time-and-half');
  $doubleTime = $request->input('double-time');

  // Calculate overtime pay based on salary band and hours worked
  $overtimePay = 0;
  if ($salaryBand === 'band1') {
    $overtimePay += $timeAndThird * 1.33;
    $overtimePay += $timeAndHalf * 1.5;
    $overtimePay += $doubleTime * 2;
  } else if ($salaryBand === 'band2') {
    $overtimePay += $timeAndThird * 1.4;
    $overtimePay += $timeAndHalf * 1.6;
    $overtimePay += $doubleTime * 2.2;
  } else if ($salaryBand === 'band3') {
    $overtimePay += $timeAndThird * 1.5;
    $overtimePay += $timeAndHalf * 1.75;
    $overtimePay += $doubleTime * 2.5;
  }

  // Return the overtime pay as a response
  return response()->json(['overtime_pay' => $overtimePay]);
}

Alternatively, this can be achieved with Livewire as well:

  • The Livewire controller:
use Livewire\Component;

class OvertimeCalculator extends Component
{
    public $salaryBand;
    public $timeAndThird;
    public $timeAndHalf;
    public $doubleTime;
    public $overtimePay;

    public function calculate()
    {
        // Calculate overtime pay based on salary band and hours worked
        $overtimePay = 0;
        if ($this->salaryBand === 'band1') {
            $overtimePay += $this->timeAndThird * 1.33;
            $overtimePay += $this->timeAndHalf * 1.5;
            $overtimePay += $this->doubleTime * 2;
        } else if ($this->salaryBand === 'band2') {
            $overtimePay += $this->timeAndThird * 1.4;
            $overtimePay += $this->timeAndHalf * 1.6;
            $overtimePay += $this->doubleTime * 2.2;
        } else if ($this->salaryBand === 'band3') {
            $overtimePay += $this->timeAndThird * 1.5;
            $overtimePay += $this->timeAndHalf * 1.75;
            $overtimePay += $this->doubleTime * 2.5;
        }

        $this->overtimePay = $overtimePay;
    }

    public function render()
    {
        return view('livewire.overtime-calculator');
    }
}
  • And here's an example of the corresponding Blade template for the component:
<div>
    <select wire:model="salaryBand">
        <option value="band1">Band 1</option>
        <option value="band2">Band 2</option>
        <option value="band3">Band 3</option>
    </select>

    <input type="number" wire:model="timeAndThird">
    <input type="number" wire:model="timeAndHalf">
    <input type="number" wire:model="doubleTime">

    <button wire:click="calculate">Calculate</button>

    <p>Overtime pay: {{ $overtimePay }}</p>
</div>