penambahan form input add data device
This commit is contained in:
parent
8f0c2fb913
commit
6c9b4f18b4
|
|
@ -1,196 +1,241 @@
|
||||||
<div class="app-content content">
|
<div class="app-content content">
|
||||||
<div class="content-overlay"></div>
|
<div class="content-overlay"></div>
|
||||||
<div class="content-wrapper">
|
<div class="content-wrapper">
|
||||||
<div class="content-header row">
|
<div class="content-header row"></div>
|
||||||
</div>
|
<div class="content-body">
|
||||||
<div class="content-body"><!-- Hospital Info cards -->
|
<!-- Hospital Info cards -->
|
||||||
<div class="row">
|
|
||||||
<div class="col-xl-3 col-lg-6 col-md-6 col-12">
|
|
||||||
<div class="card pull-up">
|
|
||||||
<div class="card-content">
|
|
||||||
<div class="card-body">
|
|
||||||
<div class="media d-flex">
|
|
||||||
<div class="align-self-center">
|
|
||||||
<i class="la la-user-md font-large-2 success"></i>
|
|
||||||
</div>
|
|
||||||
<div class="media-body text-right">
|
|
||||||
<h5 class="text-muted text-bold-500">Doctors Available</h5>
|
|
||||||
<h3 class="text-bold-600">122</h3>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-xl-3 col-lg-6 col-md-6 col-12">
|
|
||||||
<div class="card pull-up">
|
|
||||||
<div class="card-content">
|
|
||||||
<div class="card-body">
|
|
||||||
<div class="media d-flex">
|
|
||||||
<div class="align-self-center">
|
|
||||||
<i class="la la-stethoscope font-large-2 warning"></i>
|
|
||||||
</div>
|
|
||||||
<div class="media-body text-right">
|
|
||||||
<h5 class="text-muted text-bold-500">Visiting Doctors</h5>
|
|
||||||
<h3 class="text-bold-600">34</h3>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-xl-3 col-lg-6 col-md-6 col-12">
|
|
||||||
<div class="card pull-up">
|
|
||||||
<div class="card-content">
|
|
||||||
<div class="card-body">
|
|
||||||
<div class="media d-flex">
|
|
||||||
<div class="align-self-center">
|
|
||||||
<i class="la la-calendar-check-o font-large-2 info"></i>
|
|
||||||
</div>
|
|
||||||
<div class="media-body text-right">
|
|
||||||
<h5 class="text-muted text-bold-500">Today's Inquiry</h5>
|
|
||||||
<h3 class="text-bold-600">3.5K</h3>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-xl-3 col-lg-6 col-md-6 col-12">
|
|
||||||
<div class="card pull-up">
|
|
||||||
<div class="card-content">
|
|
||||||
<div class="card-body">
|
|
||||||
<div class="media d-flex">
|
|
||||||
<div class="align-self-center">
|
|
||||||
<i class="la la-bed font-large-2 danger"></i>
|
|
||||||
</div>
|
|
||||||
<div class="media-body text-right">
|
|
||||||
<h5 class="text-muted text-bold-500">Rooms Available</h5>
|
|
||||||
<h3 class="text-bold-600">179</h3>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Hospital Info cards Ends -->
|
|
||||||
|
|
||||||
<!-- Appointment Bar Line Chart -->
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-12">
|
|
||||||
<div class="card">
|
|
||||||
<section id="chartjs-bar-charts">
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-12" *blockUI="'barCharts'; message: 'Loading'">
|
<div class="col-xl-3 col-lg-6 col-md-6 col-12">
|
||||||
<m-card [options]="options" (reloadFunction)="reloadBarCharts($event)">
|
<div class="card pull-up">
|
||||||
<ng-container mCardHeaderTitle>
|
<div class="card-content">
|
||||||
Appointment
|
<div class="card-body">
|
||||||
</ng-container>
|
<div class="media d-flex">
|
||||||
<ng-container mCardBody>
|
<div class="align-self-center">
|
||||||
<div class="z">
|
<i class="la la-user-md font-large-2 success"></i>
|
||||||
<canvas class="barchart" height="328" baseChart [datasets]="barChartData" [labels]="barChartLabels"
|
</div>
|
||||||
[options]="barChartOptions" [legend]="barChartLegend"
|
<div class="media-body text-right">
|
||||||
[chartType]="barChartType"></canvas>
|
<h5 class="text-muted text-bold-500">Doctors Available</h5>
|
||||||
|
<h3 class="text-bold-600">122</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</ng-container>
|
</div>
|
||||||
</m-card>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-xl-3 col-lg-6 col-md-6 col-12">
|
||||||
|
<div class="card pull-up">
|
||||||
|
<div class="card-content">
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="media d-flex">
|
||||||
|
<div class="align-self-center">
|
||||||
|
<i class="la la-stethoscope font-large-2 warning"></i>
|
||||||
|
</div>
|
||||||
|
<div class="media-body text-right">
|
||||||
|
<h5 class="text-muted text-bold-500">Visiting Doctors</h5>
|
||||||
|
<h3 class="text-bold-600">34</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-xl-3 col-lg-6 col-md-6 col-12">
|
||||||
|
<div class="card pull-up">
|
||||||
|
<div class="card-content">
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="media d-flex">
|
||||||
|
<div class="align-self-center">
|
||||||
|
<i class="la la-calendar-check-o font-large-2 info"></i>
|
||||||
|
</div>
|
||||||
|
<div class="media-body text-right">
|
||||||
|
<h5 class="text-muted text-bold-500">Today's Inquiry</h5>
|
||||||
|
<h3 class="text-bold-600">3.5K</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-xl-3 col-lg-6 col-md-6 col-12">
|
||||||
|
<div class="card pull-up">
|
||||||
|
<div class="card-content">
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="media d-flex">
|
||||||
|
<div class="align-self-center">
|
||||||
|
<i class="la la-bed font-large-2 danger"></i>
|
||||||
|
</div>
|
||||||
|
<div class="media-body text-right">
|
||||||
|
<h5 class="text-muted text-bold-500">Rooms Available</h5>
|
||||||
|
<h3 class="text-bold-600">179</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
<!-- Hospital Info cards Ends -->
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Appointment Bar Line Chart Ends -->
|
|
||||||
|
|
||||||
<!-- Appointment Table -->
|
<!-- Appointment Bar Line Chart -->
|
||||||
<div class="row" matchHeight="card">
|
<div class="row">
|
||||||
<div class="col-12 col-md-4">
|
<div class="col-12">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-header">
|
<section id="chartjs-bar-charts">
|
||||||
<h4 class="card-title">Doctors Available</h4>
|
<div class="row">
|
||||||
</div>
|
<div class="col-12" *blockUI="'barCharts'; message: 'Loading'">
|
||||||
<div class="card-content">
|
<m-card
|
||||||
<div class="table-responsive">
|
[options]="options"
|
||||||
<table id="recent-orders" class="table table-hover table-xl mb-0">
|
(reloadFunction)="reloadBarCharts($event)"
|
||||||
<tbody>
|
>
|
||||||
<tr *ngFor = "let doctor of doctors ">
|
<ng-container mCardHeaderTitle> Appointment </ng-container>
|
||||||
<td class="text-truncate p-1 border-top-0">
|
<ng-container mCardBody>
|
||||||
<div class="avatar avatar-md">
|
<div class="z">
|
||||||
<img class="media-object rounded-circle" [src]= doctor.image
|
<canvas
|
||||||
alt="Avatar">
|
class="barchart"
|
||||||
|
height="328"
|
||||||
|
baseChart
|
||||||
|
[datasets]="barChartData"
|
||||||
|
[labels]="barChartLabels"
|
||||||
|
[options]="barChartOptions"
|
||||||
|
[legend]="barChartLegend"
|
||||||
|
[chartType]="barChartType"
|
||||||
|
></canvas>
|
||||||
|
</div>
|
||||||
|
</ng-container>
|
||||||
|
</m-card>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</section>
|
||||||
<td class="text-truncate pl-0 border-top-0">
|
</div>
|
||||||
<div class="name">{{doctor.name}}</div>
|
</div>
|
||||||
<div class="designation text-light font-small-2">Dentist</div>
|
|
||||||
</td>
|
|
||||||
<td class="text-right border-top-0">
|
|
||||||
<a href="hospital-book-appointment.html" class="btn btn-sm btn-outline-success">Book Appointment</a>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
</div>
|
||||||
|
<!-- Appointment Bar Line Chart Ends -->
|
||||||
|
|
||||||
|
<!-- Appointment Table -->
|
||||||
|
<div class="row" matchHeight="card">
|
||||||
|
<div class="col-12 col-md-4">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header">
|
||||||
|
<h4 class="card-title">Doctors Available</h4>
|
||||||
|
</div>
|
||||||
|
<div class="card-content">
|
||||||
|
<div class="table-responsive">
|
||||||
|
<table
|
||||||
|
id="recent-orders"
|
||||||
|
class="table table-hover table-xl mb-0"
|
||||||
|
>
|
||||||
|
<tbody>
|
||||||
|
<tr *ngFor="let doctor of doctors">
|
||||||
|
<td class="text-truncate p-1 border-top-0">
|
||||||
|
<div class="avatar avatar-md">
|
||||||
|
<img
|
||||||
|
class="media-object rounded-circle"
|
||||||
|
[src]="doctor.image"
|
||||||
|
alt="Avatar"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="text-truncate pl-0 border-top-0">
|
||||||
|
<div class="name">{{ doctor.name }}</div>
|
||||||
|
<div class="designation text-light font-small-2">
|
||||||
|
Dentist
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="text-right border-top-0">
|
||||||
|
<a
|
||||||
|
href="hospital-book-appointment.html"
|
||||||
|
class="btn btn-sm btn-outline-success"
|
||||||
|
>Book Appointment</a
|
||||||
|
>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="recent-appointments" class="col-12 col-md-8">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header">
|
||||||
|
<h4 class="card-title">Recent Appointments</h4>
|
||||||
|
<a class="heading-elements-toggle"
|
||||||
|
><i class="la la-ellipsis-v font-medium-3"></i
|
||||||
|
></a>
|
||||||
|
<div class="heading-elements">
|
||||||
|
<ul class="list-inline mb-0">
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
class="btn btn-sm btn-danger box-shadow-2 round btn-min-width pull-right"
|
||||||
|
href="hospital-book-appointment.html"
|
||||||
|
target="_blank"
|
||||||
|
>View all</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-content mt-1">
|
||||||
|
<div class="table-responsive">
|
||||||
|
<table
|
||||||
|
id="recent-orders-doctors"
|
||||||
|
class="table table-hover table-xl mb-0"
|
||||||
|
>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th class="border-top-0">Doctor</th>
|
||||||
|
<th class="border-top-0">Patients</th>
|
||||||
|
<th class="border-top-0">Specialities</th>
|
||||||
|
<th class="border-top-0">Timings</th>
|
||||||
|
<th class="border-top-0">Amount</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr class="pull-up" *ngFor="let doctor of doctorList">
|
||||||
|
<td class="text-truncate">{{ doctor.name }}</td>
|
||||||
|
<td class="text-truncate p-1">
|
||||||
|
<ul class="list-unstyled users-list m-0">
|
||||||
|
<li
|
||||||
|
data-toggle="tooltip"
|
||||||
|
data-popup="tooltip-custom"
|
||||||
|
data-original-title="Kimberly Simmons"
|
||||||
|
class="avatar avatar-sm pull-up"
|
||||||
|
*ngFor="let imageUrl of doctor.image"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
class="media-object rounded-circle"
|
||||||
|
[src]="imageUrl"
|
||||||
|
alt="Avatar"
|
||||||
|
/>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="avatar avatar-sm">
|
||||||
|
<span class="badge badge-info">{{
|
||||||
|
doctor.bagde
|
||||||
|
}}</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="btn btn-sm btn-outline-{{ doctor.type }} round"
|
||||||
|
>
|
||||||
|
{{ doctor.designation }}
|
||||||
|
</button>
|
||||||
|
</td>
|
||||||
|
<td class="text-truncate">{{ doctor.time }}</td>
|
||||||
|
<td class="text-truncate">{{ doctor.amount }}</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Appointment Table Ends -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="recent-appointments" class="col-12 col-md-8">
|
<!-- END: Content-->
|
||||||
<div class="card">
|
|
||||||
<div class="card-header">
|
|
||||||
<h4 class="card-title">Recent Appointments</h4>
|
|
||||||
<a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
|
|
||||||
<div class="heading-elements">
|
|
||||||
<ul class="list-inline mb-0">
|
|
||||||
<li><a class="btn btn-sm btn-danger box-shadow-2 round btn-min-width pull-right" href="hospital-book-appointment.html"
|
|
||||||
target="_blank">View all</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="card-content mt-1">
|
|
||||||
<div class="table-responsive">
|
|
||||||
<table id="recent-orders-doctors" class="table table-hover table-xl mb-0">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th class="border-top-0">Doctor</th>
|
|
||||||
<th class="border-top-0">Patients</th>
|
|
||||||
<th class="border-top-0">Specialities</th>
|
|
||||||
<th class="border-top-0">Timings</th>
|
|
||||||
<th class="border-top-0">Amount</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr class="pull-up" *ngFor="let doctor of doctorList">
|
|
||||||
<td class="text-truncate">{{doctor.name}}</td>
|
|
||||||
<td class="text-truncate p-1">
|
|
||||||
<ul class="list-unstyled users-list m-0">
|
|
||||||
<li data-toggle="tooltip" data-popup="tooltip-custom" data-original-title="Kimberly Simmons" class="avatar avatar-sm pull-up" *ngFor="let imageUrl of doctor.image">
|
|
||||||
<img class="media-object rounded-circle" [src]="imageUrl" alt="Avatar">
|
|
||||||
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="avatar avatar-sm">
|
|
||||||
<span class="badge badge-info">{{doctor.bagde}}</span>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<button type="button" class="btn btn-sm btn-outline-{{doctor.type}} round">{{doctor.designation}}</button>
|
|
||||||
</td>
|
|
||||||
<td class="text-truncate">{{doctor.time}}</td>
|
|
||||||
<td class="text-truncate">{{doctor.amount}}</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Appointment Table Ends -->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- END: Content-->
|
|
||||||
|
|
|
||||||
|
|
@ -1,261 +1,232 @@
|
||||||
<section id="basic-form-layouts">
|
<div class="app-content content">
|
||||||
<div class="row" matchHeight="card">
|
<div class="content-overlay"></div>
|
||||||
<div class="col-md-6" *blockUI="'projectInfo'; message: 'Loading'">
|
<div class="content-wrapper">
|
||||||
<m-card [options]="options" (reloadFunction)="reloadProjectInfo($event)">
|
<div class="content-header row"></div>
|
||||||
<ng-container mCardHeaderTitle>
|
<div class="content-body">
|
||||||
Project Info (Reactive Forms Validation)
|
<section id="basic-form-layouts">
|
||||||
</ng-container>
|
<div class="row" matchHeight="card">
|
||||||
<ng-container mCardBody>
|
<div class="col-md-6" *blockUI="'projectInfo'; message: 'Loading'">
|
||||||
<div class="card-text">
|
<m-card
|
||||||
<p>
|
[options]="options"
|
||||||
This is the most basic and default form having form sections. To
|
(reloadFunction)="reloadProjectInfo($event)"
|
||||||
add form section use
|
>
|
||||||
<code>.form-section</code>
|
<ng-container mCardHeaderTitle>
|
||||||
class with any heading tags. This form has the buttons on the
|
Project Info (Reactive Forms Validation)
|
||||||
bottom left corner which is the default position.
|
</ng-container>
|
||||||
</p>
|
<ng-container mCardBody>
|
||||||
</div>
|
<form
|
||||||
<form [formGroup]="projectInfo" (ngSubmit)="onProjectInfoSubmit()">
|
[formGroup]="projectInfo"
|
||||||
<div class="form-body">
|
(ngSubmit)="onProjectInfoSubmit()"
|
||||||
<h4 class="form-section">
|
|
||||||
<i class="feather ft-user"></i> Personal Info
|
|
||||||
</h4>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-6">
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="projectinput1">First Name *</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="projectinput1"
|
|
||||||
class="form-control"
|
|
||||||
formControlName="firstName"
|
|
||||||
placeholder="First Name"
|
|
||||||
[ngClass]="{
|
|
||||||
'is-invalid': submitted && f.firstName.errors
|
|
||||||
}"
|
|
||||||
/>
|
|
||||||
<small
|
|
||||||
class="form-text text-muted danger"
|
|
||||||
*ngIf="submitted && f.firstName.errors"
|
|
||||||
class="invalid-feedback"
|
|
||||||
>
|
|
||||||
<div *ngIf="f.firstName.errors.required">
|
|
||||||
First Name is required
|
|
||||||
</div>
|
|
||||||
</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-6">
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="projectinput2">Last Name *</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="projectinput2"
|
|
||||||
class="form-control"
|
|
||||||
formControlName="lastName"
|
|
||||||
placeholder="Last Name"
|
|
||||||
[ngClass]="{
|
|
||||||
'is-invalid': submitted && f.lastName.errors
|
|
||||||
}"
|
|
||||||
/>
|
|
||||||
<small
|
|
||||||
class="form-text text-muted danger"
|
|
||||||
*ngIf="submitted && f.lastName.errors"
|
|
||||||
class="invalid-feedback"
|
|
||||||
>
|
|
||||||
<div *ngIf="f.lastName.errors.required">
|
|
||||||
Last Name is required
|
|
||||||
</div>
|
|
||||||
</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-6">
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="projectinput3">E-mail *</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="projectinput3"
|
|
||||||
class="form-control"
|
|
||||||
formControlName="email"
|
|
||||||
placeholder="E-mail"
|
|
||||||
[ngClass]="{ 'is-invalid': submitted && f.email.errors }"
|
|
||||||
/>
|
|
||||||
<small
|
|
||||||
class="form-text text-muted danger"
|
|
||||||
*ngIf="submitted && f.email.errors"
|
|
||||||
class="invalid-feedback"
|
|
||||||
>
|
|
||||||
<div *ngIf="f.email.errors.required">
|
|
||||||
Email is required
|
|
||||||
</div>
|
|
||||||
<div *ngIf="f.email.errors.email">
|
|
||||||
Email must be a valid email address
|
|
||||||
</div>
|
|
||||||
</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-6">
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="projectinput4">Contact Number *</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="projectinput4"
|
|
||||||
class="form-control"
|
|
||||||
formControlName="phone"
|
|
||||||
placeholder="Phone"
|
|
||||||
[ngClass]="{ 'is-invalid': submitted && f.phone.errors }"
|
|
||||||
(keypress)="keyPress($event)"
|
|
||||||
/>
|
|
||||||
<small
|
|
||||||
class="form-text text-muted danger"
|
|
||||||
*ngIf="submitted && f.phone.errors"
|
|
||||||
class="invalid-feedback"
|
|
||||||
>
|
|
||||||
<div *ngIf="f.phone.errors.required">
|
|
||||||
phone is required
|
|
||||||
</div>
|
|
||||||
</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<h4 class="form-section">
|
|
||||||
<i class="la la-paperclip"></i> Requirements
|
|
||||||
</h4>
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="companyName">Company *</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="companyName"
|
|
||||||
class="form-control"
|
|
||||||
formControlName="company"
|
|
||||||
placeholder="Company Name"
|
|
||||||
[ngClass]="{ 'is-invalid': submitted && f.company.errors }"
|
|
||||||
/>
|
|
||||||
<small
|
|
||||||
class="form-text text-muted danger"
|
|
||||||
*ngIf="submitted && f.company.errors"
|
|
||||||
class="invalid-feedback"
|
|
||||||
>
|
>
|
||||||
<div *ngIf="f.company.errors.required">
|
<div class="form-body">
|
||||||
Company is required
|
<h4 class="form-section">
|
||||||
</div>
|
<i class="feather ft-user"></i> General Information
|
||||||
</small>
|
</h4>
|
||||||
</div>
|
<div class="row">
|
||||||
<div class="row">
|
<div class="col-md-6">
|
||||||
<div class="col-md-6">
|
<div class="form-group">
|
||||||
<div class="form-group">
|
<label for="projectinput1">First Name *</label>
|
||||||
<label for="projectinput5">Interested in *</label>
|
<input
|
||||||
<select
|
type="text"
|
||||||
id="projectinput5"
|
id="projectinput1"
|
||||||
class="form-control"
|
class="form-control"
|
||||||
formControlName="interestedIn"
|
formControlName="firstName"
|
||||||
[ngClass]="{
|
placeholder="First Name"
|
||||||
'is-invalid': submitted && f.interestedIn.errors
|
[ngClass]="{
|
||||||
}"
|
'is-invalid': submitted && f.firstName.errors
|
||||||
>
|
}"
|
||||||
<option
|
/>
|
||||||
*ngFor="let interest of interestedIn"
|
<small
|
||||||
[value]="interest"
|
class="form-text text-muted danger"
|
||||||
|
*ngIf="submitted && f.firstName.errors"
|
||||||
|
class="invalid-feedback"
|
||||||
|
>
|
||||||
|
<div *ngIf="f.firstName.errors.required">
|
||||||
|
First Name is required
|
||||||
|
</div>
|
||||||
|
</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="projectinput2">Last Name *</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="projectinput2"
|
||||||
|
class="form-control"
|
||||||
|
formControlName="lastName"
|
||||||
|
placeholder="Last Name"
|
||||||
|
[ngClass]="{
|
||||||
|
'is-invalid': submitted && f.lastName.errors
|
||||||
|
}"
|
||||||
|
/>
|
||||||
|
<small
|
||||||
|
class="form-text text-muted danger"
|
||||||
|
*ngIf="submitted && f.lastName.errors"
|
||||||
|
class="invalid-feedback"
|
||||||
|
>
|
||||||
|
<div *ngIf="f.lastName.errors.required">
|
||||||
|
Last Name is required
|
||||||
|
</div>
|
||||||
|
</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-6">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="projectinput3">E-mail *</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="projectinput3"
|
||||||
|
class="form-control"
|
||||||
|
formControlName="email"
|
||||||
|
placeholder="E-mail"
|
||||||
|
[ngClass]="{
|
||||||
|
'is-invalid': submitted && f.email.errors
|
||||||
|
}"
|
||||||
|
/>
|
||||||
|
<small
|
||||||
|
class="form-text text-muted danger"
|
||||||
|
*ngIf="submitted && f.email.errors"
|
||||||
|
class="invalid-feedback"
|
||||||
|
>
|
||||||
|
<div *ngIf="f.email.errors.required">
|
||||||
|
Email is required
|
||||||
|
</div>
|
||||||
|
<div *ngIf="f.email.errors.email">
|
||||||
|
Email must be a valid email address
|
||||||
|
</div>
|
||||||
|
</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="projectinput4">Contact Number *</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="projectinput4"
|
||||||
|
class="form-control"
|
||||||
|
formControlName="phone"
|
||||||
|
placeholder="Phone"
|
||||||
|
[ngClass]="{
|
||||||
|
'is-invalid': submitted && f.phone.errors
|
||||||
|
}"
|
||||||
|
(keypress)="keyPress($event)"
|
||||||
|
/>
|
||||||
|
<small
|
||||||
|
class="form-text text-muted danger"
|
||||||
|
*ngIf="submitted && f.phone.errors"
|
||||||
|
class="invalid-feedback"
|
||||||
|
>
|
||||||
|
<div *ngIf="f.phone.errors.required">
|
||||||
|
phone is required
|
||||||
|
</div>
|
||||||
|
</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h4 class="form-section">
|
||||||
|
<i class="la la-paperclip"></i> Energy Information
|
||||||
|
</h4>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="companyName">Company *</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="companyName"
|
||||||
|
class="form-control"
|
||||||
|
formControlName="company"
|
||||||
|
placeholder="Company Name"
|
||||||
|
[ngClass]="{
|
||||||
|
'is-invalid': submitted && f.company.errors
|
||||||
|
}"
|
||||||
|
/>
|
||||||
|
<small
|
||||||
|
class="form-text text-muted danger"
|
||||||
|
*ngIf="submitted && f.company.errors"
|
||||||
|
class="invalid-feedback"
|
||||||
>
|
>
|
||||||
{{ interest }}
|
<div *ngIf="f.company.errors.required">
|
||||||
</option>
|
Company is required
|
||||||
</select>
|
</div>
|
||||||
<small
|
</small>
|
||||||
class="form-text text-muted danger"
|
</div>
|
||||||
*ngIf="submitted && f.interestedIn.errors"
|
<div class="row">
|
||||||
class="invalid-feedback"
|
<div class="col-md-6">
|
||||||
>
|
<div class="form-group">
|
||||||
<div *ngIf="f.interestedIn.errors.required">
|
<label for="projectinput5">Interested in *</label>
|
||||||
Interest is required
|
<select
|
||||||
|
id="projectinput5"
|
||||||
|
class="form-control"
|
||||||
|
formControlName="interestedIn"
|
||||||
|
[ngClass]="{
|
||||||
|
'is-invalid': submitted && f.interestedIn.errors
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<option
|
||||||
|
*ngFor="let interest of interestedIn"
|
||||||
|
[value]="interest"
|
||||||
|
>
|
||||||
|
{{ interest }}
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
<small
|
||||||
|
class="form-text text-muted danger"
|
||||||
|
*ngIf="submitted && f.interestedIn.errors"
|
||||||
|
class="invalid-feedback"
|
||||||
|
>
|
||||||
|
<div *ngIf="f.interestedIn.errors.required">
|
||||||
|
Interest is required
|
||||||
|
</div>
|
||||||
|
</small>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</small>
|
<div class="col-md-6">
|
||||||
</div>
|
<div class="form-group">
|
||||||
</div>
|
<label for="projectinput6">Budget *</label>
|
||||||
<div class="col-md-6">
|
<select
|
||||||
<div class="form-group">
|
id="projectinput6"
|
||||||
<label for="projectinput6">Budget *</label>
|
class="form-control"
|
||||||
<select
|
formControlName="budget"
|
||||||
id="projectinput6"
|
[ngClass]="{
|
||||||
class="form-control"
|
'is-invalid': submitted && f.budget.errors
|
||||||
formControlName="budget"
|
}"
|
||||||
[ngClass]="{ 'is-invalid': submitted && f.budget.errors }"
|
>
|
||||||
>
|
<option
|
||||||
<option *ngFor="let range of budget" [value]="range">
|
*ngFor="let range of budget"
|
||||||
{{ range }}
|
[value]="range"
|
||||||
</option>
|
>
|
||||||
</select>
|
{{ range }}
|
||||||
<small
|
</option>
|
||||||
class="form-text text-muted danger"
|
</select>
|
||||||
*ngIf="submitted && f.budget.errors"
|
<small
|
||||||
class="invalid-feedback"
|
class="form-text text-muted danger"
|
||||||
>
|
*ngIf="submitted && f.budget.errors"
|
||||||
<div *ngIf="f.budget.errors.required">
|
class="invalid-feedback"
|
||||||
Budget is required
|
>
|
||||||
|
<div *ngIf="f.budget.errors.required">
|
||||||
|
Budget is required
|
||||||
|
</div>
|
||||||
|
</small>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</small>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="form-actions">
|
||||||
</div>
|
<button type="button" class="btn btn-warning mr-1" (click)="cancel()">
|
||||||
<div class="form-group">
|
<i class="feather ft-x"></i> Cancel
|
||||||
<label>Select File</label>
|
</button>
|
||||||
<label id="projectinput7" class="file center-block">
|
<button type="submit" class="btn btn-primary">
|
||||||
<input
|
<i class="la la-check"></i> Save
|
||||||
type="file"
|
</button>
|
||||||
id="file"
|
|
||||||
formControlName="selectFile"
|
|
||||||
[ngClass]="{
|
|
||||||
'is-invalid': submitted && f.selectFile.errors
|
|
||||||
}"
|
|
||||||
style="margin-left: 3px"
|
|
||||||
/>
|
|
||||||
<span class="file-custom"></span>
|
|
||||||
</label>
|
|
||||||
<small
|
|
||||||
class="form-text text-muted danger"
|
|
||||||
*ngIf="submitted && f.selectFile.errors"
|
|
||||||
class="invalid-feedback"
|
|
||||||
>
|
|
||||||
<div *ngIf="f.selectFile.errors.required">
|
|
||||||
File is required
|
|
||||||
</div>
|
</div>
|
||||||
</small>
|
</form>
|
||||||
</div>
|
</ng-container>
|
||||||
<div class="form-group">
|
</m-card>
|
||||||
<label for="projectinput8">About Project *</label>
|
</div>
|
||||||
<textarea
|
</div>
|
||||||
id="projectinput8"
|
</section>
|
||||||
rows="5"
|
|
||||||
class="form-control"
|
|
||||||
formControlName="aboutProject"
|
|
||||||
[ngClass]="{
|
|
||||||
'is-invalid': submitted && f.aboutProject.errors
|
|
||||||
}"
|
|
||||||
placeholder="About Project"
|
|
||||||
></textarea>
|
|
||||||
<small
|
|
||||||
class="form-text text-muted danger"
|
|
||||||
*ngIf="submitted && f.aboutProject.errors"
|
|
||||||
class="invalid-feedback"
|
|
||||||
>
|
|
||||||
<div *ngIf="f.aboutProject.errors.required">
|
|
||||||
Project Description is required
|
|
||||||
</div>
|
|
||||||
</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="form-actions">
|
|
||||||
<button type="button" class="btn btn-warning mr-1">
|
|
||||||
<i class="feather ft-x"></i> Cancel
|
|
||||||
</button>
|
|
||||||
<button type="submit" class="btn btn-primary">
|
|
||||||
<i class="la la-check"></i> Save
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</ng-container>
|
|
||||||
</m-card>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</div>
|
||||||
|
<!-- END: Content-->
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,7 @@
|
||||||
import { Component } from '@angular/core';
|
import { Component, ViewChild } from '@angular/core';
|
||||||
|
import { FormBuilder, FormGroup, NgForm, Validators } from '@angular/forms';
|
||||||
|
import { Router } from '@angular/router';
|
||||||
|
import { BlockUI, NgBlockUI } from 'ng-block-ui';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-add-edit-device',
|
selector: 'app-add-edit-device',
|
||||||
|
|
@ -7,8 +10,105 @@ import { Component } from '@angular/core';
|
||||||
})
|
})
|
||||||
export class AddEditDeviceComponent {
|
export class AddEditDeviceComponent {
|
||||||
|
|
||||||
|
@ViewChild('f', { read: true }) userProfileForm: NgForm;
|
||||||
|
|
||||||
constructor() { }
|
model: any = {};
|
||||||
|
|
||||||
|
@BlockUI('projectInfo') blockUIProjectInfo: NgBlockUI;
|
||||||
|
@BlockUI('userProfile') blockUIUserProfile: NgBlockUI;
|
||||||
|
|
||||||
|
options = {
|
||||||
|
minimize: true,
|
||||||
|
reload: true,
|
||||||
|
expand: true,
|
||||||
|
close: true
|
||||||
|
};
|
||||||
|
public breadcrumb: any;
|
||||||
|
|
||||||
|
projectInfo: FormGroup;
|
||||||
|
|
||||||
|
submitted = false;
|
||||||
|
|
||||||
|
interestedIn = ['design', 'development', 'illustration', 'branding', 'video'];
|
||||||
|
budget = ['less than 5000$', '5000$ - 10000$', '10000$ - 20000$', 'more than 20000$'];
|
||||||
|
priority = ['Low', 'Medium', 'High'];
|
||||||
|
status = ['Not Started', 'Started', 'Fixed'];
|
||||||
|
|
||||||
|
constructor(private formBuilder: FormBuilder, private router: Router) { }
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
this.breadcrumb = {
|
||||||
|
'mainlabel': 'Basic Forms',
|
||||||
|
'links': [
|
||||||
|
{
|
||||||
|
'name': 'Home',
|
||||||
|
'isLink': true,
|
||||||
|
'link': '/dashboard/sales'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'name': 'Form Layouts',
|
||||||
|
'isLink': true,
|
||||||
|
'link': '#'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'name': 'Basic Forms',
|
||||||
|
'isLink': false
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
this.projectInfo = this.formBuilder.group({
|
||||||
|
firstName: ['', Validators.required],
|
||||||
|
lastName: ['', Validators.required],
|
||||||
|
email: ['', [Validators.required, Validators.email]],
|
||||||
|
phone: ['', Validators.required],
|
||||||
|
company: ['', Validators.required],
|
||||||
|
interestedIn: ['', Validators.required],
|
||||||
|
budget: ['', Validators.required],
|
||||||
|
selectFile: [, Validators.required],
|
||||||
|
aboutProject: ['', Validators.required],
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
get f() {
|
||||||
|
return this.projectInfo.controls;
|
||||||
|
}
|
||||||
|
|
||||||
|
onProjectInfoSubmit() {
|
||||||
|
this.submitted = true;
|
||||||
|
|
||||||
|
if (this.projectInfo.invalid) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
reloadProjectInfo() {
|
||||||
|
this.blockUIProjectInfo.start('Loading..');
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
this.blockUIProjectInfo.stop();
|
||||||
|
}, 2500);
|
||||||
|
}
|
||||||
|
|
||||||
|
reloadUserProfile() {
|
||||||
|
this.blockUIUserProfile.start('Loading..');
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
this.blockUIUserProfile.stop();
|
||||||
|
}, 2500);
|
||||||
|
}
|
||||||
|
|
||||||
|
keyPress(event: any) {
|
||||||
|
const pattern = /[0-9\+\-\ ]/;
|
||||||
|
|
||||||
|
const inputChar = String.fromCharCode(event.charCode);
|
||||||
|
if (event.keyCode !== 8 && !pattern.test(inputChar)) {
|
||||||
|
event.preventDefault();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
cancel() {
|
||||||
|
this.router.navigate(['/device']); // Adjust the path as per your routing setup
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -13,13 +13,10 @@
|
||||||
(reloadFunction)="reloadAddRows($event)"
|
(reloadFunction)="reloadAddRows($event)"
|
||||||
>
|
>
|
||||||
<ng-container mCardBody>
|
<ng-container mCardBody>
|
||||||
<!-- <p class="card-text">New rows can be added to a DataTable very easily using the
|
|
||||||
(addFieldValue()) function.
|
|
||||||
</p> -->
|
|
||||||
<button
|
<button
|
||||||
id="addRow"
|
id="addRow"
|
||||||
class="btn btn-secondary my-1 mb-2"
|
class="btn btn-secondary my-1 mb-2"
|
||||||
(click)="addFieldValue()"
|
[routerLink]="['/device/add-row']"
|
||||||
>
|
>
|
||||||
<i class="feather ft-plus"></i> Add new row
|
<i class="feather ft-plus"></i> Add new row
|
||||||
</button>
|
</button>
|
||||||
|
|
|
||||||
|
|
@ -40,6 +40,10 @@ import { ModalAddEditComponent } from './modal-add-edit/modal-add-edit.component
|
||||||
{
|
{
|
||||||
path: '',
|
path: '',
|
||||||
component: DeviceComponent
|
component: DeviceComponent
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'add-row',
|
||||||
|
component: AddEditDeviceComponent
|
||||||
}
|
}
|
||||||
])
|
])
|
||||||
]
|
]
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,7 @@
|
||||||
<a class="heading-elements-toggle" (click)="toggleMobileMenu()"><i class="la la-ellipsis-v font-medium-3"></i></a>
|
<a class="heading-elements-toggle" (click)="toggleMobileMenu()"><i class="la la-ellipsis-v font-medium-3"></i></a>
|
||||||
<div class="heading-elements" #mCardHeaderTools>
|
<div class="heading-elements" #mCardHeaderTools>
|
||||||
<ng-content select="[mCardHeaderTools]"></ng-content>
|
<ng-content select="[mCardHeaderTools]"></ng-content>
|
||||||
<ul class="list-inline mb-0">
|
<!-- <ul class="list-inline mb-0">
|
||||||
<li *ngIf="options && options.minimize"><a data-action="collapse"><i class="feather ft-minus"
|
<li *ngIf="options && options.minimize"><a data-action="collapse"><i class="feather ft-minus"
|
||||||
(click)="toggleCollpase($event)"></i></a></li>
|
(click)="toggleCollpase($event)"></i></a></li>
|
||||||
<li *ngIf="options && options.reload"><a data-action="reload"><i class="feather ft-rotate-cw"
|
<li *ngIf="options && options.reload"><a data-action="reload"><i class="feather ft-rotate-cw"
|
||||||
|
|
@ -16,7 +16,7 @@
|
||||||
(click)="toggleExpand($event)"></i></a></li>
|
(click)="toggleExpand($event)"></i></a></li>
|
||||||
<li *ngIf="options && options.close"><a data-action="close"><i class="feather ft-x" (click)="close($event)"></i></a>
|
<li *ngIf="options && options.close"><a data-action="close"><i class="feather ft-x" (click)="close($event)"></i></a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-content collpase show" #mCardContent>
|
<div class="card-content collpase show" #mCardContent>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue