FoodLoop-Web/src/app/dashboard/add-data.component.html

<div class="animated fadeIn">
  <div class="row">
    <div class="col-lg-12">
      <div class="card">
        <div class="card-header">
          <strong>Profile & Payroll Data</strong>
          <small>Required Data marked in <strong>bold</strong>.</small>
        </div>
        <form class="form-horizontal" [formGroup]="payrollForm" (ngSubmit)="onSubmitPayroll()">
          <div class="card-block">
            <div class="form-group row">
              <label class="col-md-3 form-control-label" for="text-input"><strong>Period of entry month</strong></label>
              <div class="col-md-9">
                <input type="month" class="form-control" formControlName="entryperiod">
                <span class="help-block">This is a help text</span>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-md-3 form-control-label" for="text-input">Total amount of Employees</label>
              <div class="col-md-9">
                <input type="number" class="form-control" formControlName="employeeamount" placeholder="0">
                <span class="help-block">This is a help text</span>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-md-3 form-control-label" for="text-input">Total amount of local Employees</label>
              <div class="col-md-9">
                <input type="number" class="form-control" formControlName="localemployeeamount" placeholder="0">
                <span class="help-block">This is a help text</span>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-md-3 form-control-label" for="text-input"><strong>Gross Payroll</strong></label>
              <div class="col-md-9">
                <div class="input-group">
                  <span class="input-group-addon"><i class="fa fa-gbp"></i></span>
                  <input type="number" min="0.00" step="0.01" class="form-control" formControlName="grosspayroll" placeholder="0.00">
                </div>
                <span class="help-block">This is a help text</span>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-md-3 form-control-label" for="text-input">Total Income Tax</label>
              <div class="col-md-9">
                <div class="input-group">
                  <span class="input-group-addon"><i class="fa fa-gbp"></i></span>
                  <input type="number" min="0.00" step="0.01" class="form-control" formControlName="payrollincometax" placeholder="0.00">
                </div>
                <span class="help-block">This is a help text</span>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-md-3 form-control-label" for="text-input">Employees Total NI</label>
              <div class="col-md-9">
                <div class="input-group">
                  <span class="input-group-addon"><i class="fa fa-gbp"></i></span>
                  <input type="number" min="0.00" step="0.01" class="form-control" formControlName="payrollemployeeni" placeholder="0.00">
                </div>
                <span class="help-block">This is a help text</span>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-md-3 form-control-label" for="text-input">Employers Total NI</label>
              <div class="col-md-9">
                <div class="input-group">
                  <span class="input-group-addon"><i class="fa fa-gbp"></i></span>
                  <input type="number" min="0.00" step="0.01" class="form-control" formControlName="payrollemployerni" placeholder="0.00">
                </div>
                <span class="help-block">This is a help text</span>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-md-3 form-control-label" for="text-input">Total Pensions</label>
              <div class="col-md-9">
                <div class="input-group">
                  <span class="input-group-addon"><i class="fa fa-gbp"></i></span>
                  <input type="number" min="0.00" step="0.01" class="form-control" formControlName="payrolltotalpension" placeholder="0.00">
                </div>
                <span class="help-block">This is a help text</span>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-md-3 form-control-label" for="text-input">Total Other Benefits</label>
              <div class="col-md-9">
                <div class="input-group">
                  <span class="input-group-addon"><i class="fa fa-gbp"></i></span>
                  <input type="number" min="0.00" step="0.01" class="form-control" formControlName="payrollotherbenefit" placeholder="0.00">
                </div>
                <span class="help-block">A total of other payments such as refunded fuel etc.</span>
              </div>
            </div>
            <div class="form-group row">
              <div class="col-md-9">
                <div [ngSwitch]="payrollFormStatus">
                  <div *ngSwitchCase="'success'" class="alert alert-success" role="alert">
                    Submit Succeeded.
                  </div>
                  <div *ngSwitchCase="'send_failed'" class="alert alert-danger" role="alert">
                    Error received, please try again.
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="card-footer">
            <button type="submit" [disabled]="!payrollForm.valid" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Submit</button>
          </div>
         </form>
      </div>
      <div class="card">
        <div class="card-header">
          <strong>Total Suppliers Data</strong>
          <small>Required Data marked in <strong>bold</strong>.</small>
        </div>
        <form class="form-horizontal" [formGroup]="suppliersForm" (ngSubmit)="onSubmitSuppliers()">
          <div class="card-block">
            <div class="form-group row">
              <label class="col-md-3 form-control-label" for="text-input"><strong>Period of entry month</strong></label>
              <div class="col-md-9">
                <input type="month" class="form-control" formControlName="entryperiod">
                <span class="help-block">This is a help text</span>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-md-3 form-control-label" for="text-input"><strong>Gross Spend</strong></label>
              <div class="col-md-9">
                <div class="input-group">
                  <span class="input-group-addon"><i class="fa fa-gbp"></i></span>
                  <input type="number" min="0.00" step="0.01" class="form-control" formControlName="grossspend" placeholder="0.00">
                </div>
                <span class="help-block">This is a help text</span>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-md-3 form-control-label" for="text-input"><strong>Total amount of Suppliers</strong></label>
              <div class="col-md-9">
                <input type="number" class="form-control" formControlName="suppliersamount" placeholder="0">
                <span class="help-block">This is a help text</span>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-md-3 form-control-label" for="text-input"><strong>Total amount of local Suppliers</strong></label>
              <div class="col-md-9">
                <input type="number" class="form-control" formControlName="localsuppliersamount" placeholder="0">
                <span class="help-block">This is a help text</span>
              </div>
            </div>
            <div class="form-group row">
              <div class="col-md-9">
                <div [ngSwitch]="suppliersFormStatus">
                  <div *ngSwitchCase="'success'" class="alert alert-success" role="alert">
                    Submit Succeeded.
                  </div>
                  <div *ngSwitchCase="'send_failed'" class="alert alert-danger" role="alert">
                    Error received, please try again.
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="card-footer">
            <button type="submit" [disabled]="!suppliersForm.valid" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Submit</button>
          </div>
         </form>
      </div>
      <div class="card">
        <div class="card-header">
          <strong>Individual Supplier Data</strong>
          <small>Optional but recommended.</small>
        </div>
        <form class="form-horizontal" [formGroup]="singleSupplierForm" (ngSubmit)="onSubmitSingleSupplier()">
          <div class="card-block">
            <div class="form-group row">
              <label class="col-md-3 form-control-label" for="text-input"><strong>Period of entry month</strong></label>
              <div class="col-md-9">
                <input type="month" class="form-control" formControlName="entryperiod">
                <span class="help-block">Must be filled in to submit this data.</span>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-md-3 form-control-label" for="text-input">Supplier Business Name</label>
              <div class="col-md-9">
                <input type="text" class="form-control" formControlName="supplierbusinessname">
                <span class="help-block">This is a help text</span>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-md-3 form-control-label" for="text-input">Postcode</label>
              <div class="col-md-9">
                <input type="text" class="form-control" formControlName="postcode">
                <span class="help-block">This is a help text</span>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-md-3 form-control-label" for="text-input">Monthly Spend</label>
              <div class="col-md-9">
                <div class="input-group">
                  <span class="input-group-addon"><i class="fa fa-gbp"></i></span>
                  <input type="number" min="0.00" step="0.01" class="form-control" formControlName="monthlyspend" placeholder="0.00">
                </div>
                <span class="help-block">This is a help text</span>
              </div>
            </div>
            <div class="form-group row">
              <div class="col-md-9">
                <div [ngSwitch]="singleSupplierFormStatus">
                  <div *ngSwitchCase="'success'" class="alert alert-success" role="alert">
                    Submit Succeeded.
                  </div>
                  <div *ngSwitchCase="'send_failed'" class="alert alert-danger" role="alert">
                    Error received, please try again.
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="card-footer">
            <button type="submit" [disabled]="!singleSupplierForm.valid" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Submit</button>
          </div>
         </form>
      </div>
      <div class="card">
        <div class="card-header">
          <strong>Individual Employee Data</strong>
          <small>Optional but recommended.</small>
        </div>
        <form class="form-horizontal" [formGroup]="employeeForm" (ngSubmit)="onSubmitEmployee()">
          <div class="card-block">
            <div class="form-group row">
              <label class="col-md-3 form-control-label" for="text-input"><strong>Period of entry month</strong></label>
              <div class="col-md-9">
                <input type="month" class="form-control" formControlName="entryperiod">
                <span class="help-block">Must be filled in to submit this data.</span>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-md-3 form-control-label" for="text-input">Employee number</label>
              <div class="col-md-9">
                <input type="number" class="form-control" formControlName="employeeno" placeholder="0">
                <span class="help-block">Used to identify employee anonymously</span>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-md-3 form-control-label" for="text-input">Gross Wage</label>
              <div class="col-md-9">
                <div class="input-group">
                  <span class="input-group-addon"><i class="fa fa-gbp"></i></span>
                  <input type="number" min="0.00" step="0.01" class="form-control" formControlName="employeegrosswage" placeholder="0.00">
                </div>
                <span class="help-block">This is a help text</span>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-md-3 form-control-label" for="text-input">Total Income Tax</label>
              <div class="col-md-9">
                <div class="input-group">
                  <span class="input-group-addon"><i class="fa fa-gbp"></i></span>
                  <input type="number" min="0.00" step="0.01" class="form-control" formControlName="employeeincometax" placeholder="0.00">
                </div>
                <span class="help-block">This is a help text</span>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-md-3 form-control-label" for="text-input">Total Income Tax</label>
              <div class="col-md-9">
                <div class="input-group">
                  <span class="input-group-addon"><i class="fa fa-gbp"></i></span>
                  <input type="number" min="0.00" step="0.01" class="form-control" formControlName="employeeni" placeholder="0.00">
                </div>
                <span class="help-block">This is a help text</span>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-md-3 form-control-label" for="text-input">Employee's Pension</label>
              <div class="col-md-9">
                <div class="input-group">
                  <span class="input-group-addon"><i class="fa fa-gbp"></i></span>
                  <input type="number" min="0.00" step="0.01" class="form-control" formControlName="employeepension" placeholder="0.00">
                </div>
                <span class="help-block">This is a help text</span>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-md-3 form-control-label" for="text-input">Total Employee Other Benefits</label>
              <div class="col-md-9">
                <div class="input-group">
                  <span class="input-group-addon"><i class="fa fa-gbp"></i></span>
                  <input type="number" min="0.00" step="0.01" class="form-control" formControlName="employeeotherbenefit" placeholder="0.00">
                </div>
                <span class="help-block">A total of other payments such as refunded fuel etc.</span>
              </div>
            </div>
            <div class="form-group row">
              <div class="col-md-9">
                <div [ngSwitch]="employeeFormStatus">
                  <div *ngSwitchCase="'success'" class="alert alert-success" role="alert">
                    Submit Succeeded.
                  </div>
                  <div *ngSwitchCase="'send_failed'" class="alert alert-danger" role="alert">
                    Error received, please try again.
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="card-footer">
            <button type="submit" [disabled]="!employeeForm.valid" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Submit</button>
          </div>
         </form>
      </div>
    </div>
  </div><!--/.row-->
</div>