fuzi_fauzia/hemat_solution
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Fuzi_fauzia
2024-04-19 12:53:45 +07:00
commit 71a3a661dc
1943 changed files with 246917 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/app/content/pages/user/user-cards/user-cards.component.css Normal file
View File

@@ -0,0 +1,3 @@
:host ::ng-deep .btn.btn-social-icon {
padding: unset !important;
}

607
src/app/content/pages/user/user-cards/user-cards.component.html Normal file
View File

@@ -0,0 +1,607 @@
<div class="app-content content">
<div class="content-wrapper">
<div class="content-header row mb-1">
<app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
</div>
<div class="content-body">
<!-- Simple User Cards -->
<section id="simple-user-cards" class="row">
<div class="col-12">
<h4 class="text-uppercase">Simple User Cards</h4>
<p>A very basic simple user cards.</p>
</div>
<div class="col-xl-3 col-md-6 col-12">
<div class="card">
<div class="text-center">
<div class="card-body">
<img src="../../../assets/images/portrait/medium/avatar-m-4.png" class="rounded-circle height-150"
alt="Card image">
</div>
<div class="card-body">
<h4 class="card-title">Michelle Howard</h4>
<h6 class="card-subtitle text-muted">Managing Director</h6>
</div>
<div class="text-center">
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-facebook"><span
class="la la-facebook"></span></a>
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-twitter"><span
class="la la-twitter"></span></a>
<a [routerLink]="" class="btn btn-social-icon mb-1 btn-outline-linkedin"><span
class="la la-linkedin font-medium-4"></span></a>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 col-12">
<div class="card">
<div class="text-center">
<div class="card-body">
<img src="../../../assets/images/portrait/medium/avatar-m-1.png" class="rounded-circle height-150"
alt="Card image">
</div>
<div class="card-body">
<h4 class="card-title">Joseph Ryan</h4>
<h6 class="card-subtitle text-muted">Marketing Head</h6>
</div>
<div class="text-center">
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-facebook"><span
class="la la-facebook"></span></a>
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-twitter"><span
class="la la-twitter"></span></a>
<a [routerLink]="" class="btn btn-social-icon mb-1 btn-outline-linkedin"><span
class="la la-linkedin font-medium-4"></span></a>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 col-12">
<div class="card">
<div class="text-center">
<div class="card-body">
<img src="../../../assets/images/portrait/medium/avatar-m-6.png" class="rounded-circle height-150"
alt="Card image">
</div>
<div class="card-body">
<h4 class="card-title">Frances Butler</h4>
<h6 class="card-subtitle text-muted">Technical Lead</h6>
</div>
<div class="text-center">
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-facebook"><span
class="la la-facebook"></span></a>
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-twitter"><span
class="la la-twitter"></span></a>
<a [routerLink]="" class="btn btn-social-icon mb-1 btn-outline-linkedin"><span
class="la la-linkedin font-medium-4"></span></a>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 col-12">
<div class="card">
<div class="text-center">
<div class="card-body">
<img src="../../../assets/images/portrait/medium/avatar-m-5.png" class="rounded-circle height-150"
alt="Card image">
</div>
<div class="card-body">
<h4 class="card-title">Andrew Davis</h4>
<h6 class="card-subtitle text-muted">UI/UX Designer</h6>
</div>
<div class="text-center">
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-facebook"><span
class="la la-facebook"></span></a>
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-twitter"><span
class="la la-twitter"></span></a>
<a [routerLink]="" class="btn btn-social-icon mb-1 btn-outline-linkedin"><span
class="la la-linkedin font-medium-4"></span></a>
</div>
</div>
</div>
</div>
</section>
<!-- Simple User Cards -->
<!-- Simple User Cards with Border-->
<section id="simple-user-cards-with-border" class="row mt-2">
<div class="col-12">
<h4 class="text-uppercase">Simple User Cards with Border</h4>
<p>Use color palette border class <code>border-color</code>, <code>border-lighten-*</code>.</p>
</div>
<div class="col-xl-3 col-md-6 col-12">
<div class="card border-teal border-lighten-2">
<div class="text-center">
<div class="card-body">
<img src="../../../assets/images/portrait/medium/avatar-m-4.png" class="rounded-circle height-150"
alt="Card image">
</div>
<div class="card-body">
<h4 class="card-title">Michelle Howard</h4>
<h6 class="card-subtitle text-muted">Managing Director</h6>
</div>
<div class="text-center">
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-facebook"><span
class="la la-facebook"></span></a>
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-twitter"><span
class="la la-twitter"></span></a>
<a [routerLink]="" class="btn btn-social-icon mb-1 btn-outline-linkedin"><span
class="la la-linkedin font-medium-4"></span></a>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 col-12">
<div class="card border-pink border-lighten-2">
<div class="text-center">
<div class="card-body">
<img src="../../../assets/images/portrait/medium/avatar-m-1.png" class="rounded-circle height-150"
alt="Card image">
</div>
<div class="card-body">
<h4 class="card-title">Joseph Ryan</h4>
<h6 class="card-subtitle text-muted">Marketing Head</h6>
</div>
<div class="text-center">
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-facebook"><span
class="la la-facebook"></span></a>
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-twitter"><span
class="la la-twitter"></span></a>
<a [routerLink]="" class="btn btn-social-icon mb-1 btn-outline-linkedin"><span
class="la la-linkedin font-medium-4"></span></a>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 col-12">
<div class="card border-blue border-lighten-2">
<div class="text-center">
<div class="card-body">
<img src="../../../assets/images/portrait/medium/avatar-m-6.png" class="rounded-circle height-150"
alt="Card image">
</div>
<div class="card-body">
<h4 class="card-title">Frances Butler</h4>
<h6 class="card-subtitle text-muted">Technical Lead</h6>
</div>
<div class="text-center">
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-facebook"><span
class="la la-facebook"></span></a>
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-twitter"><span
class="la la-twitter"></span></a>
<a [routerLink]="" class="btn btn-social-icon mb-1 btn-outline-linkedin"><span
class="la la-linkedin font-medium-4"></span></a>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 col-12">
<div class="card border-amber border-lighten-2">
<div class="text-center">
<div class="card-body">
<img src="../../../assets/images/portrait/medium/avatar-m-5.png" class="rounded-circle height-150"
alt="Card image">
</div>
<div class="card-body">
<h4 class="card-title">Andrew Davis</h4>
<h6 class="card-subtitle text-muted">UI/UX Designer</h6>
</div>
<div class="text-center">
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-facebook"><span
class="la la-facebook"></span></a>
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-twitter"><span
class="la la-twitter"></span></a>
<a [routerLink]="" class="btn btn-social-icon mb-1 btn-outline-linkedin"><span
class="la la-linkedin font-medium-4"></span></a>
</div>
</div>
</div>
</div>
</section>
<!-- Simple User Cards with Border-->
<!-- Simple User Cards with Shadow-->
<section id="user-cards-with-square-thumbnail" class="row mt-2">
<div class="col-12">
<h4 class="text-uppercase">Simple User Cards with Square Thumbnail</h4>
<p>Use shadow helper class <code>box-shadow-*</code> to add show in cards.</p>
</div>
<div class="col-xl-3 col-md-6 col-12">
<div class="card box-shadow-1">
<div class="text-center">
<div class="card-body">
<img src="../../../assets/images/portrait/medium/avatar-m-4.png" class="rounded-circle height-150"
alt="Card image">
</div>
<div class="card-body">
<h4 class="card-title">Michelle Howard</h4>
<h6 class="card-subtitle text-muted">Managing Director</h6>
</div>
<div class="text-center">
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-facebook"><span
class="la la-facebook"></span></a>
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-twitter"><span
class="la la-twitter"></span></a>
<a [routerLink]="" class="btn btn-social-icon mb-1 btn-outline-linkedin"><span
class="la la-linkedin font-medium-4"></span></a>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 col-12">
<div class="card box-shadow-2">
<div class="text-center">
<div class="card-body">
<img src="../../../assets/images/portrait/medium/avatar-m-1.png" class="rounded-circle height-150"
alt="Card image">
</div>
<div class="card-body">
<h4 class="card-title">Joseph Ryan</h4>
<h6 class="card-subtitle text-muted">Marketing Head</h6>
</div>
<div class="text-center">
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-facebook"><span
class="la la-facebook"></span></a>
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-twitter"><span
class="la la-twitter"></span></a>
<a [routerLink]="" class="btn btn-social-icon mb-1 btn-outline-linkedin"><span
class="la la-linkedin font-medium-4"></span></a>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 col-12">
<div class="card box-shadow-3">
<div class="text-center">
<div class="card-body">
<img src="../../../assets/images/portrait/medium/avatar-m-6.png" class="rounded-circle height-150"
alt="Card image">
</div>
<div class="card-body">
<h4 class="card-title">Frances Butler</h4>
<h6 class="card-subtitle text-muted">Technical Lead</h6>
</div>
<div class="text-center">
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-facebook"><span
class="la la-facebook"></span></a>
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-twitter"><span
class="la la-twitter"></span></a>
<a [routerLink]="" class="btn btn-social-icon mb-1 btn-outline-linkedin"><span
class="la la-linkedin font-medium-4"></span></a>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 col-12">
<div class="card box-shadow-4">
<div class="text-center">
<div class="card-body">
<img src="../../../assets/images/portrait/medium/avatar-m-5.png" class="rounded-circle height-150"
alt="Card image">
</div>
<div class="card-body">
<h4 class="card-title">Andrew Davis</h4>
<h6 class="card-subtitle text-muted">UI/UX Designer</h6>
</div>
<div class="text-center">
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-facebook"><span
class="la la-facebook"></span></a>
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-twitter"><span
class="la la-twitter"></span></a>
<a [routerLink]="" class="btn btn-social-icon mb-1 btn-outline-linkedin"><span
class="la la-linkedin font-medium-4"></span></a>
</div>
</div>
</div>
</div>
</section>
<!-- Simple User Card with Border-->
<!-- User Profile Cards -->
<section id="user-profile-cards" class="row mt-2">
<div class="col-12">
<h4 class="text-uppercase">User Profile Cards</h4>
<p>User profile cards with border & shadow variant.</p>
</div>
<div class="col-xl-4 col-md-6 col-12">
<div class="card">
<div class="text-center">
<div class="card-body">
<img src="../../../assets/images/portrait/medium/avatar-m-4.png" class="rounded-circle height-150"
alt="Card image">
</div>
<div class="card-body">
<h4 class="card-title">Frances Butler</h4>
<h6 class="card-subtitle text-muted">Technical Lead</h6>
</div>
<div class="card-body">
<button type="button" class="btn btn-danger mr-1"><i class="la la-plus"></i> Follow</button>
<button type="button" class="btn btn-primary mr-1"><i class="feather ft-user"></i> Profile</button>
</div>
</div>
<div class="list-group list-group-flush">
<a [routerLink]="" class="list-group-item"><i class="la la-briefcase"></i> Overview</a>
<a [routerLink]="" class="list-group-item"><i class="feather ft-mail"></i> Email</a>
<a [routerLink]="" class="list-group-item"><i class="feather ft-check-square"></i> Task</a>
<a [routerLink]="" class="list-group-item"> <i class="feather ft-message-square"></i> Calender</a>
</div>
</div>
</div>
<div class="col-xl-4 col-md-6 col-12">
<div class="card card border-teal border-lighten-2">
<div class="text-center">
<div class="card-body">
<img src="../../../assets/images/portrait/medium/avatar-m-5.png" class="rounded-circle height-150"
alt="Card image">
</div>
<div class="card-body">
<h4 class="card-title">Andrew Davis</h4>
<h6 class="card-subtitle text-muted">UI/UX Designer</h6>
</div>
<div class="card-body">
<button type="button" class="btn btn-danger mr-1"><i class="la la-plus"></i> Follow</button>
<button type="button" class="btn btn-primary mr-1"><i class="feather ft-user"></i> Profile</button>
</div>
</div>
<div class="list-group list-group-flush">
<a [routerLink]="" class="list-group-item"><i class="la la-briefcase"></i> Overview</a>
<a [routerLink]="" class="list-group-item"><i class="feather ft-mail"></i> Email</a>
<a [routerLink]="" class="list-group-item"><i class="feather ft-check-square"></i> Task</a>
<a [routerLink]="" class="list-group-item"> <i class="feather ft-message-square"></i> Calender</a>
</div>
</div>
</div>
<div class="col-xl-4 col-md-6 col-12">
<div class="card box-shadow-2">
<div class="text-center">
<div class="card-body">
<img src="../../../assets/images/portrait/medium/avatar-m-6.png" class="rounded-circle height-150"
alt="Card image">
</div>
<div class="card-body">
<h4 class="card-title">Michelle Howard</h4>
<h6 class="card-subtitle text-muted">Managing Director</h6>
</div>
<div class="card-body">
<button type="button" class="btn btn-danger mr-1"><i class="la la-plus"></i> Follow</button>
<button type="button" class="btn btn-primary mr-1"><i class="feather ft-user"></i> Profile</button>
</div>
</div>
<div class="list-group list-group-flush">
<a [routerLink]="" class="list-group-item"><i class="la la-briefcase"></i> Overview</a>
<a [routerLink]="" class="list-group-item"><i class="feather ft-mail"></i> Email</a>
<a [routerLink]="" class="list-group-item"><i class="feather ft-check-square"></i> Task</a>
<a [routerLink]="" class="list-group-item"> <i class="feather ft-message-square"></i> Calender</a>
</div>
</div>
</div>
</section>
<!--/ User Profile Cards -->
<!-- User Profile Cards with Stats -->
<section id="user-profile-cards-with-stats" class="row mt-2">
<div class="col-12">
<h4 class="text-uppercase">User Profile Cards with Stats</h4>
<p>User profile cards with Stats in border & shadow variant.</p>
</div>
<div class="col-xl-4 col-md-6 col-12">
<div class="card profile-card-with-stats">
<div class="text-center">
<div class="card-body">
<img src="../../../assets/images/portrait/medium/avatar-m-8.png" class="rounded-circle height-150"
alt="Card image">
</div>
<div class="card-body">
<h4 class="card-title">Linda Holland</h4>
<ul class="list-inline list-inline-pipe">
<li>@lindah</li>
<li>domain.com</li>
</ul>
<h6 class="card-subtitle text-muted">Managing Director</h6>
</div>
<div class="btn-group" role="group" aria-label="Profile example">
<button type="button" class="btn btn-float box-shadow-0 btn-outline-info"><span class="ladda-label"><i
class="la la-bell-o"></i><span>12+</span></span><span class="ladda-spinner"></span></button>
<button type="button" class="btn btn-float box-shadow-0 btn-outline-info"><span class="ladda-label"><i
class="la la-heart-o"></i><span>25</span></span><span class="ladda-spinner"></span></button>
<button type="button" class="btn btn-float box-shadow-0 btn-outline-info"><span class="ladda-label"><i
class="la la-briefcase"></i><span>5</span></span><span class="ladda-spinner"></span></button>
<button type="button" class="btn btn-float box-shadow-0 btn-outline-info"><span class="ladda-label"><i
class="feather ft-mail"></i><span>75+</span></span><span class="ladda-spinner"></span></button>
<button type="button" class="btn btn-float box-shadow-0 btn-outline-info"><span class="ladda-label"><i
class="la la-dashcube"></i><span>125</span></span><span class="ladda-spinner"></span></button>
</div>
<div class="card-body">
<p>Lorem ipsum dolor sit amet, autem imperdiet et nam. Nullam labores id quo, sed ei.</p>
<button type="button" class="btn btn-outline-danger btn-md mr-1"><i class="la la-plus"></i>
Follow</button>
<button type="button" class="btn btn-outline-primary btn-md mr-1"><i class="feather ft-user"></i>
Profile</button>
</div>
</div>
</div>
</div>
<div class="col-xl-4 col-md-6 col-12">
<div class="card profile-card-with-stats border-teal border-lighten-2">
<div class="text-center">
<div class="card-body">
<img src="../../../assets/images/portrait/medium/avatar-m-7.png" class="rounded-circle height-150"
alt="Card image">
</div>
<div class="card-body">
<h4 class="card-title">Philip Garrett</h4>
<ul class="list-inline list-inline-pipe">
<li>@philipg</li>
<li>domain.com</li>
</ul>
<h6 class="card-subtitle text-muted">Managing Director</h6>
</div>
<div class="btn-group" role="group" aria-label="Profile example">
<button type="button" class="btn btn-float box-shadow-0 btn-outline-info btn-round"><span
class="ladda-label"><i class="la la-bell-o"></i><span>12+</span></span><span
class="ladda-spinner"></span></button>
<button type="button" class="btn btn-float box-shadow-0 btn-outline-info btn-round"><span
class="ladda-label"><i class="la la-heart-o"></i><span>25</span></span><span
class="ladda-spinner"></span></button>
<button type="button" class="btn btn-float box-shadow-0 btn-outline-info btn-round"><span
class="ladda-label"><i class="la la-briefcase"></i><span>5</span></span><span
class="ladda-spinner"></span></button>
<button type="button" class="btn btn-float box-shadow-0 btn-outline-info btn-round"><span
class="ladda-label"><i class="feather ft-mail"></i><span>75+</span></span><span
class="ladda-spinner"></span></button>
<button type="button" class="btn btn-float box-shadow-0 btn-outline-info btn-round"><span
class="ladda-label"><i class="la la-dashcube"></i><span>125</span></span><span
class="ladda-spinner"></span></button>
</div>
<div class="card-body">
<p>Lorem ipsum dolor sit amet, autem imperdiet et nam. Nullam labores id quo, sed ei.</p>
<button type="button" class="btn btn-outline-danger btn-md btn-round mr-1"><i class="la la-plus"></i>
Follow</button>
<button type="button" class="btn btn-outline-primary btn-md btn-round mr-1"><i class="feather ft-user"></i>
Profile</button>
</div>
</div>
</div>
</div>
<div class="col-xl-4 col-md-6 col-12">
<div class="card profile-card-with-stats box-shadow-2">
<div class="text-center">
<div class="card-body">
<img src="../../../assets/images/portrait/medium/avatar-m-10.png" class="rounded-circle height-150"
alt="Card image">
</div>
<div class="card-body">
<h4 class="card-title">Christine Wood</h4>
<ul class="list-inline list-inline-pipe">
<li>@christine</li>
<li>domain.com</li>
</ul>
<h6 class="card-subtitle text-muted">Managing Director</h6>
</div>
<div class="btn-group" role="group" aria-label="Profile example">
<button type="button" class="btn btn-float box-shadow-0 btn-outline-info btn-square"><span
class="ladda-label"><i class="la la-bell-o"></i><span>12+</span></span><span
class="ladda-spinner"></span></button>
<button type="button" class="btn btn-float box-shadow-0 btn-outline-info btn-square"><span
class="ladda-label"><i class="la la-heart-o"></i><span>25</span></span><span
class="ladda-spinner"></span></button>
<button type="button" class="btn btn-float box-shadow-0 btn-outline-info btn-square"><span
class="ladda-label"><i class="la la-briefcase"></i><span>5</span></span><span
class="ladda-spinner"></span></button>
<button type="button" class="btn btn-float box-shadow-0 btn-outline-info btn-square"><span
class="ladda-label"><i class="feather ft-mail"></i><span>75+</span></span><span
class="ladda-spinner"></span></button>
<button type="button" class="btn btn-float box-shadow-0 btn-outline-info btn-square"><span
class="ladda-label"><i class="la la-dashcube"></i><span>125</span></span><span
class="ladda-spinner"></span></button>
</div>
<div class="card-body">
<p>Lorem ipsum dolor sit amet, autem imperdiet et nam. Nullam labores id quo, sed ei.</p>
<button type="button" class="btn btn-outline-danger btn-md btn-square mr-1"><i class="la la-plus"></i>
Follow</button>
<button type="button" class="btn btn-outline-primary btn-md btn-square mr-1"><i class="feather ft-user"></i>
Profile</button>
</div>
</div>
</div>
</div>
</section>
<!-- User Profile Cards with Stats -->
<!-- User Profile Cards with Cover Image -->
<section id="user-profile-cards-with-cover-image" class="row mt-2">
<div class="col-12">
<h4 class="text-uppercase">User Profile Cards with Cover Image</h4>
<p>User profile cards with Cover Image in border & shadow variant.</p>
</div>
<div class="col-xl-4 col-md-6 col-12">
<div class="card profile-card-with-cover">
<!--<img class="card-img-top img-fluid" src="../../../assets/images/carousel/18.jpg" alt="Card cover image">-->
<div class="card-img-top img-fluid bg-cover height-200"
style="background: url('../../../assets/images/carousel/18.jpg');"></div>
<div class="card-profile-image">
<img src="../../../assets/images/portrait/small/avatar-s-4.png"
class="rounded-circle img-border box-shadow-1" alt="Card image">
</div>
<div class="profile-card-with-cover-content text-center">
<div class="card-body">
<h4 class="card-title">Linda Holland</h4>
<ul class="list-inline list-inline-pipe">
<li>@lindah</li>
<li>domain.com</li>
</ul>
<h6 class="card-subtitle text-muted">Managing Director</h6>
</div>
<div class="text-center">
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-facebook"><span
class="la la-facebook"></span></a>
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-twitter"><span
class="la la-twitter"></span></a>
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-linkedin"><span
class="la la-linkedin font-medium-4"></span></a>
<a [routerLink]="" class="btn btn-social-icon mb-1 btn-outline-github"><span
class="la la-github font-medium-4"></span></a>
</div>
</div>
</div>
</div>
<div class="col-xl-4 col-md-6 col-12">
<div class="card profile-card-with-cover border-teal border-lighten-2">
<!--<img class="card-img-top img-fluid" src="../../../assets/images/carousel/16.jpg" alt="Card cover image">-->
<div class="card-img-top img-fluid bg-cover height-200"
style="background: url('../../../assets/images/carousel/16.jpg');"></div>
<div class="card-profile-image">
<img src="../../../assets/images/portrait/small/avatar-s-9.png" class="rounded-circle img-border"
alt="Card image">
</div>
<div class="profile-card-with-cover-content text-center">
<div class="card-body">
<h4 class="card-title">Philip Garrett</h4>
<ul class="list-inline list-inline-pipe">
<li>@philip</li>
<li>domain.com</li>
</ul>
<h6 class="card-subtitle text-muted">Managing Director</h6>
</div>
<div class="text-center">
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-facebook"><span
class="la la-facebook"></span></a>
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-twitter"><span
class="la la-twitter"></span></a>
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-linkedin"><span
class="la la-linkedin font-medium-4"></span></a>
<a [routerLink]="" class="btn btn-social-icon mb-1 btn-outline-github"><span
class="la la-github font-medium-4"></span></a>
</div>
</div>
</div>
</div>
<div class="col-xl-4 col-md-6 col-12">
<div class="card profile-card-with-cover box-shadow-2">
<div class="card-img-top img-fluid bg-cover height-200"
style="background: url('../../../assets/images/carousel/17.jpg');"></div>
<div class="card-profile-image">
<img src="../../../assets/images/portrait/small/avatar-s-8.png"
class="rounded-circle img-border box-shadow-4" alt="Card image">
</div>
<div class="profile-card-with-cover-content text-center">
<div class="card-body">
<h4 class="card-title">Christine Wood</h4>
<ul class="list-inline list-inline-pipe">
<li>@christine</li>
<li>domain.com</li>
</ul>
<h6 class="card-subtitle text-muted">Managing Director</h6>
</div>
<div class="text-center">
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-facebook"><span
class="la la-facebook"></span></a>
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-twitter"><span
class="la la-twitter"></span></a>
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-linkedin"><span
class="la la-linkedin font-medium-4"></span></a>
<a [routerLink]="" class="btn btn-social-icon mb-1 btn-outline-github"><span
class="la la-github font-medium-4"></span></a>
</div>
</div>
</div>
</div>
</section>
<!--/ User Profile Cards with Cover Image -->
</div>
</div>
</div>

25
src/app/content/pages/user/user-cards/user-cards.component.spec.ts Normal file
View File

@@ -0,0 +1,25 @@
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { UserCardsComponent } from './user-cards.component';
describe('UserCardsComponent', () => {
let component: UserCardsComponent;
let fixture: ComponentFixture<UserCardsComponent>;
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [ UserCardsComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(UserCardsComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

36
src/app/content/pages/user/user-cards/user-cards.component.ts Normal file
View File

@@ -0,0 +1,36 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-user-cards',
templateUrl: './user-cards.component.html',
styleUrls: ['./user-cards.component.css']
})
export class UserCardsComponent implements OnInit {
public breadcrumb: any;
constructor() { }
ngOnInit() {
this.breadcrumb = {
'mainlabel': 'User Cards',
'links': [
{
'name': 'Home',
'isLink': true,
'link': '/dashboard/sales'
},
{
'name': 'Users',
'isLink': true,
'link': ''
},
{
'name': 'User Cards',
'isLink': false
}
]
};
}
}

25
src/app/content/pages/user/user-profile/user-profile.component.css Normal file
View File

@@ -0,0 +1,25 @@
agm-map {
height: 450px;
}
:host ::ng-deep .block-ui-wrapper {
background: rgba(255, 249, 249, 0.5) !important;
}
:host ::ng-deep .my-gallery img{
max-width: 100% !important;
padding: .25rem;
background-color: #F4F5FA;
border: 1px solid #626E82;
border-radius: .25rem;
margin-bottom: 15px;
}
:host ::ng-deep .my-gallery .img-thumbnail {
padding: .25rem;
background-color: #F4F5FA;
border: 1px solid #626E82;
border-radius: .25rem;
}
:host ::ng-deep .ngx-gallery {
grid-template-columns: auto !important
;
}

591
src/app/content/pages/user/user-profile/user-profile.component.html Normal file
View File

@@ -0,0 +1,591 @@
<div class="app-content content">
<div class="content-wrapper">
<div class="content-header row mb-1">
</div>
<div class="content-body">
<div id="user-profile">
<div class="row">
<div class="col-12">
<div class="card profile-with-cover">
<div class="card-img-top img-fluid bg-cover height-300"
style="background: url('../../../assets/images/carousel/22.jpg') 50%;"></div>
<div class="media profil-cover-details w-100">
<div class="media-left pl-2 pt-2">
<a [routerLink]="" class="profile-image">
<img src="../../../../../assets/images/portrait/small/avatar-s-8.png"
class="rounded-circle img-border height-100" alt="Card image">
</a>
</div>
<div class="media-body pt-3 px-2">
<div class="row">
<div class="col">
<h3 class="card-title">Jose Diaz</h3>
</div>
<div class="col text-right">
<button type="button" class="btn btn-primary d-"><i class="la la-plus"></i> Follow</button>
<div class="btn-group d-none d-md-block float-right ml-2" role="group" aria-label="Basic example">
<button type="button" class="btn btn-success"><i class="la la-dashcube"></i> Message</button>
<button type="button" class="btn btn-success"><i class="la la-cog"></i></button>
</div>
</div>
</div>
</div>
</div>
<nav class="navbar navbar-light navbar-profile align-self-end">
<button class="navbar-toggler d-sm-none" type="button" data-toggle="collapse" aria-expanded="false"
aria-label="Toggle navigation"></button>
<nav class="navbar navbar-expand-lg">
<ul class="navbar-nav mr-auto">
<nav class="navbar navbar-expand-lg navbar-light">
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link"><i class="la la-line-chart"></i>Timeline <span
class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link"><i class="la la-user"></i>Profile</a>
</li>
<li class="nav-item">
<a class="nav-link"><i class="la la-briefcase"></i>Projects</a>
</li>
<li class="nav-item">
<a class="nav-link"><i class="la la-heart-o"></i>Favourites</a>
</li>
<li class="nav-item">
<a class="nav-link"><i class="la la-bell-o"></i>Notifications</a>
</li>
</ul>
</div>
</nav>
</ul>
</nav>
</nav>
</div>
</div>
</div>
<section id="timeline" class="timeline-center timeline-wrapper">
<h3 class="page-title text-center">Timeline</h3>
<ul class="timeline">
<li class="timeline-line"></li>
<li class="timeline-group">
<a [routerLink]="" class="btn btn-primary"><i class="la la-calendar-o"></i> Today</a>
</li>
</ul>
<ul class="timeline">
<li class="timeline-line"></li>
<li class="timeline-item">
<div class="timeline-badge">
<span class="bg-red bg-lighten-1" data-toggle="tooltip" data-placement="right"
title="Portfolio project work"><i class="la la-plane"></i></span>
</div>
<div class="timeline-card card border-grey border-lighten-2"
*blockUI="'projectWorkOne'; message: 'Loading'">
<m-card [options]="options" (reloadFunction)="reloadProjectWorkOne($event)">
<ng-container mCardHeaderTitle>
<a [routerLink]="" class="">
Portfolio project work
<p class="card-subtitle text-muted mb-0 pt-1">
<span class="font-small-3">8 hours ago</span>
</p>
</a>
</ng-container>
<ng-container mCardContent>
<img class="img-fluid" src="../../../../../assets/images/portfolio/width-1200/portfolio-1.jpg"
alt="Timeline Image 1">
</ng-container>
<ng-container mCardBody>
<p class="card-text">Nullam facilisis fermentum aliquam. Suspendisse ornare dolor vitae libero
hendrerit auctor lacinia a ligula. Curabitur elit tellus, porta ut orci sed, fermentum bibendum
nisi.</p>
<ul class="list-inline">
<li class="pr-1"><a [routerLink]="" class=""><span class="la la-thumbs-o-up"></span> Like</a>
</li>
<li class="pr-1"><a [routerLink]="" class=""><span class="la la-commenting-o"></span>
Comment</a></li>
<li><a [routerLink]="" class=""><span class="la la-share-alt"></span> Share</a></li>
</ul>
</ng-container>
<ng-container mCardFooter>
<ng-container mCardBody>
<div class="media">
<div class="media-left pr-1">
<a [routerLink]="">
<span class="avatar avatar-online"><img
src="../../../../../assets/images/portrait/small/avatar-s-1.png" alt="avatar"></span>
</a>
</div>
<div class="media-body">
<p class="text-bold-600 mb-0"><a [routerLink]="">Jason Ansley</a></p>
<p class="m-0">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante
sollicitudin commodo.</p>
<ul class="list-inline mb-1">
<li class="pr-1"><a [routerLink]="" class=""><span class="la la-thumbs-o-up"></span>
Like</a></li>
<li class="pr-1"><a [routerLink]="" class=""><span class="la la-commenting-o"></span>
Replay</a>
</li>
</ul>
<div class="media">
<div class="media-left pr-1">
<a [routerLink]="">
<span class="avatar avatar-online"><img
src="../../../../../assets/images/portrait/small/avatar-s-18.png"
alt="avatar"></span>
</a>
</div>
<div class="media-body">
<p class="text-bold-600 mb-0"><a [routerLink]="">Janice Johnston</a></p>
<p>Gravida nulla. Nulla vel metus scelerisque ante sollicitudin.</p>
<ul class="list-inline mb-1">
<li class="pr-1"><a [routerLink]="" class=""><span class="la la-thumbs-o-up"></span>
Like</a>
</li>
<li class="pr-1"><a [routerLink]="" class=""><span class="la la-commenting-o"></span>
Replay</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<fieldset class="form-group position-relative has-icon-left mb-0">
<input type="text" class="form-control" placeholder="Write comments...">
<div class="form-control-position">
<i class="la la-dashcube"></i>
</div>
</fieldset>
</ng-container>
</ng-container>
</m-card>
</div>
</li>
<li class="timeline-item mt-3">
<div class="timeline-badge">
<span class="avatar avatar-online" data-toggle="tooltip" data-placement="left"
title="Eu pid nunc urna integer"><img
src="../../../../../assets/images/portrait/small/avatar-s-14.png" alt="avatar"></span>
</div>
<div class="timeline-card card border-grey border-lighten-2" *blockUI="'sofiaOrav'; message: 'Loading'">
<m-card [options]="options" (reloadFunction)="reloadSofiaOrav($event)">
<ng-container mCardHeaderTitle>
<a [routerLink]="" class="">
Sofia Orav
<p class="card-subtitle text-muted mb-0 pt-1">
<span class="font-small-3">8 hours ago</span>
</p>
</a>
</ng-container>
<ng-container mCardContent>
<div class="embed-responsive embed-responsive-4by3">
<iframe src="https://player.vimeo.com/video/118589137?title=0&byline=0"></iframe>
</div>
</ng-container>
<ng-container mCardBody>
<p class="card-text">Nullam facilisis fermentum aliquam. Suspendisse ornare dolor vitae libero
hendrerit auctor lacinia a ligula. Curabitur elit tellus, porta ut orci sed, fermentum bibendum
nisi.</p>
<p class="card-text">Eu pid nunc urna integer, sed, cras tortor scelerisque penatibus facilisis a
pulvinar, rhoncus sagittis ut nunc elit! Sociis in et? Rhoncus, vel dignissim in scelerisque.
Dolor lacus pulvinar adipiscing adipiscing montes! Elementum risus adipiscing non, cras
scelerisque risus penatibus? Massa vut, habitasse, tincidunt!</p>
<ul class="list-inline">
<li class="pr-1"><a [routerLink]="" class=""><span class="la la-thumbs-o-up"></span> Like</a>
</li>
<li class="pr-1"><a [routerLink]="" class=""><span class="la la-commenting-o"></span>
Comment</a></li>
<li><a [routerLink]="" class=""><span class="la la-share-alt"></span> Share</a></li>
</ul>
</ng-container>
<ng-container mCardFooter>
<fieldset class="form-group position-relative has-icon-left mb-0">
<input type="text" class="form-control" placeholder="Write comments...">
<div class="form-control-position">
<i class="la la-dashcube"></i>
</div>
</fieldset>
</ng-container>
</m-card>
</div>
</li>
<li class="timeline-item block">
<div class="timeline-badge">
<a title="" data-context="inverse" data-container="body" class="border-silc" [routerLink]=""
data-original-title="block highlight"></a>
</div>
<div class="timeline-card card border-grey border-lighten-2">
<div class="card-header">
<div class="text-center">
<p><i class="la la-bar-chart font-medium-4"></i></p>
<h4>Campaign Report</h4>
<p class="timeline-date">18 hours ago</p>
<p>Rhoncus, vel dignissim in scelerisque. Dolor lacus pulvinar adipiscing adipiscing montes!
Elementum
risus adipiscing non, cras scelerisque risus penatibus? Massa vut, habitasse, tincidunt!</p>
</div>
</div>
<div class="card-content">
<div class="card-body">
<div class="chart-container">
<div id="stacked-column" class="height-400 overflow-hidden echart-container">
<div echarts [options]="chartOption"></div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
<!-- 2016 -->
<ul class="timeline">
<li class="timeline-line"></li>
<li class="timeline-group">
<a [routerLink]="" class="btn btn-primary"><i class="la la-calendar-o"></i> 2016</a>
</li>
</ul>
<ul class="timeline">
<li class="timeline-line"></li>
<!-- /.timeline-line -->
<li class="timeline-item">
<div class="timeline-badge">
<span class="avatar avatar-online" data-toggle="tooltip" data-placement="right"
title="Eu pid nunc urna integer"><img src="../../../../../assets/images/portrait/small/avatar-s-5.png"
alt="avatar"></span>
</div>
<div class="timeline-card card text-white">
<img class="card-img img-fluid" src="../../../../../assets/images/portfolio/width-1200/portfolio-2.jpg"
alt="Card image">
<div class="card-img-overlay bg-overlay">
<h4 class="card-title white">Good Morning</h4>
<p class="card-text"><small>26 Aug, 2016 at 2.00 A.M</small></p>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to
additional
content. This content is a little bit longer.</p>
<p class="card-text">Eu pid nunc urna integer, sed, cras tortor scelerisque penatibus facilisis a
pulvinar, rhoncus sagittis ut nunc elit! Sociis in et? Rhoncus, vel dignissim in scelerisque. Dolor
lacus pulvinar adipiscing adipiscing montes!</p>
</div>
</div>
</li>
<li class="timeline-item mt-3">
<div class="timeline-badge">
<span class="bg-teal bg-lighten-1" data-toggle="tooltip" data-placement="left"
title="Nullam facilisis fermentum"><i class="la la-check-square-o"></i></span>
</div>
<div class="timeline-card card border-grey border-lighten-2"
*blockUI="'sofiaOravTwo'; message: 'Loading'">
<m-card [options]="options" (reloadFunction)="reloadSofiaOravTwo($event)">
<ng-container mCardHeaderTitle>
<a [routerLink]="" class="">
Sofia Orav
<p class="card-subtitle text-muted mb-0 pt-1">
<span class="font-small-3">18 June, 2016 at 4.50 P.M</span>
</p>
</a>
</ng-container>
<ng-container mCardBody>
<p class="card-text">Nullam facilisis fermentum aliquam. Suspendisse ornare dolor vitae libero
hendrerit auctor lacinia a ligula. Curabitur elit tellus, porta ut orci sed, fermentum bibendum
nisi.</p>
<ul class="list-group">
<li class="list-group-item">
<span class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="input-1">
<label class="custom-control-label" for="input-1">Cras justo odio</label>
</span>
</li>
<li class="list-group-item">
<span class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="input-2" checked>
<label class="custom-control-label" for="input-2" checked="checked">Dapibus ac facilisis
in</label>
</span>
</li>
<li class="list-group-item">
<span class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="input-3">
<label class="custom-control-label" for="input-3">Morbi leo risus</label>
</span>
</li>
<li class="list-group-item">
<span class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="input-4" disabled checked>
<label class="custom-control-label" for="input-4">Porta ac consectetur
ac</label>
</span>
</li>
<li class="list-group-item">
<span class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="input-5">
<label class="custom-control-label" for="input-5">Vestibulum at eros</label>
</span>
</li>
</ul>
</ng-container>
<ng-container mCardFooter>
<fieldset class="form-group position-relative has-icon-left mb-0">
<input type="text" class="form-control" placeholder="Write comments...">
<div class="form-control-position">
<i class="la la-dashcube"></i>
</div>
</fieldset>
</ng-container>
</m-card>
</div>
</li>
<li class="timeline-item">
<div class="timeline-badge">
<span class="bg-purple bg-lighten-1" data-toggle="tooltip" data-placement="right"
title="Nullam facilisis fermentum"><i class="la la-area-chart"></i></span>
</div>
<div class="timeline-card card border-grey border-lighten-2">
<div class="card-header">
<h4 class="card-title"><a [routerLink]="">Punch Card Chart</a></h4>
<p class="card-subtitle text-muted mb-0 pt-1">
<span class="font-small-3">6 Feb, 2016 at 6.00 A.M</span>
</p>
</div>
<div class="card-content">
<div class="card-content">
<div class="card-body">
<p class="card-text">Nullam facilisis fermentum aliquam. Suspendisse ornare dolor vitae libero
hendrerit auctor lacinia a ligula. Curabitur elit tellus, porta ut orci sed, fermentum bibendum
nisi.</p>
<div class="chart-container">
<div echarts [options]="option" class="height-400 overflow-hidden echart-container"></div>
</div>
</div>
</div>
<div class="card-footer px-0 py-0">
<div class="card-body">
<fieldset class="form-group position-relative has-icon-left mb-0">
<input type="text" class="form-control" placeholder="Write comments...">
<div class="form-control-position">
<i class="la la-dashcube"></i>
</div>
</fieldset>
</div>
</div>
</div>
</div>
</li>
</ul>
<!-- 2015 -->
<ul class="timeline">
<li class="timeline-line"></li>
<li class="timeline-group">
<a [routerLink]="" class="btn btn-primary"><i class="la la-calendar-o"></i> 2015</a>
</li>
</ul>
<ul class="timeline">
<li class="timeline-line"></li>
<!-- /.timeline-line -->
<li class="timeline-item block">
<div class="timeline-badge">
<a title="" data-context="inverse" data-container="body" class="border-silc" [routerLink]=""
data-original-title="block highlight"></a>
</div>
<div class="timeline-card card border-grey border-lighten-2">
<div class="card-header">
<div class="text-center">
<p class="mt-1"><i class="la la-file-image-o font-medium-4"></i></p>
<h4>Media Gallery</h4>
<p class="timeline-date">July 1, 2015</p>
<p>Eu pid nunc urna integer, sed, cras tortor scelerisque penatibus facilisis a pulvinar, rhoncus
sagittis ut nunc elit! Sociis in et?</p>
</div>
</div>
<!-- Image grid -->
<div class="card-content">
<div class="card-body my-gallery">
<div class="row">
<div class="col-md-3 col-sm-6 col-12">
<a2p-gallery>
<ngxps-gallery [images]="image1"></ngxps-gallery>
</a2p-gallery>
</div>
<div class="col-md-3 col-sm-6 col-12">
<a2p-gallery>
<ngxps-gallery [images]="image2"></ngxps-gallery>
</a2p-gallery>
</div>
<div class="col-md-3 col-sm-6 col-12">
<a2p-gallery>
<ngxps-gallery [images]="image3"></ngxps-gallery>
</a2p-gallery>
</div>
<div class="col-md-3 col-sm-6 col-12">
<a2p-gallery>
<ngxps-gallery [images]="image4"></ngxps-gallery>
</a2p-gallery>
</div>
</div>
<div class="row">
<div class="col-md-3 col-sm-6 col-12">
<a2p-gallery>
<ngxps-gallery [images]="image5"></ngxps-gallery>
</a2p-gallery>
</div>
<div class="col-md-3 col-sm-6 col-12">
<a2p-gallery>
<ngxps-gallery [images]="image6"></ngxps-gallery>
</a2p-gallery>
</div>
<div class="col-md-3 col-sm-6 col-12">
<a2p-gallery>
<ngxps-gallery [images]="image7"></ngxps-gallery>
</a2p-gallery>
</div>
<div class="col-md-3 col-sm-6 col-12">
<a2p-gallery>
<ngxps-gallery [images]="image8"></ngxps-gallery>
</a2p-gallery>
</div>
</div>
<div class="row">
<div class="col-md-3 col-sm-6 col-12">
<a2p-gallery>
<ngxps-gallery [images]="image9"></ngxps-gallery>
</a2p-gallery>
</div>
<div class="col-md-3 col-sm-6 col-12">
<a2p-gallery>
<ngxps-gallery [images]="image10"></ngxps-gallery>
</a2p-gallery>
</div>
<div class="col-md-3 col-sm-6 col-12">
<a2p-gallery>
<ngxps-gallery [images]="image11"></ngxps-gallery>
</a2p-gallery>
</div>
<div class="col-md-3 col-sm-6 col-12">
<a2p-gallery>
<ngxps-gallery [images]="image12"></ngxps-gallery>
</a2p-gallery>
</div>
</div>
<ngxps-lightbox></ngxps-lightbox>
</div>
</div>
<!--/ PhotoSwipe -->
</div>
</li>
<li class="timeline-item">
<div class="timeline-badge">
<span class="bg-warning bg-darken-1" data-toggle="tooltip" data-placement="right"
title="Application API Support"><i class="la la-life-ring"></i></span>
</div>
<div class="timeline-card card border-grey border-lighten-2">
<div class="card-header">
<div class="media">
<div class="media-left mr-1">
<a [routerLink]="">
<span class="avatar avatar-md avatar-busy"><img
src="../../../../../assets/images/portrait/small/avatar-s-18.png" alt="avatar"></span>
<i></i>
</a>
</div>
<div class="media-body">
<h4 class="card-title"><a [routerLink]="">Application API Support</a></h4>
<p class="card-subtitle text-muted mb-0 pt-1">
<span class="font-small-3">15 Oct, 2015 at 8.00 A.M</span>
<span class="badge badge-pill badge-warning float-right">High</span>
</p>
</div>
</div>
</div>
<div class="card-content">
<img class="img-fluid" src="../../../../../assets/images/portfolio/width-1200/portfolio-3.jpg"
alt="Timeline Image 1">
<div class="card-content">
<div class="card-body">
<p class="card-text">Nullam facilisis fermentum aliquam. Suspendisse ornare dolor vitae libero
hendrerit auctor lacinia a ligula. Curabitur elit tellus, porta ut orci sed, fermentum bibendum
nisi.</p>
<ul class="list-inline">
<li class="pr-1"><a [routerLink]="" class=""><span class="la la-commenting-o"></span>
Comment</a></li>
</ul>
</div>
</div>
<div class="card-footer px-0 py-0">
<div class="card-body">
<div class="media">
<div class="media-left mr-1">
<a [routerLink]="">
<span class="avatar avatar-online"><img
src="../../../../../assets/images/portrait/small/avatar-s-4.png" alt="avatar"></span>
</a>
</div>
<div class="media-body">
<p class="text-bold-600 mb-0"><a [routerLink]="">Crystal Lawson</a></p>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin
commodo.</p>
<div class="media">
<div class="media-left mr-1">
<a [routerLink]="">
<span class="avatar avatar-online"><img
src="../../../../../assets/images/portrait/small/avatar-s-6.png"
alt="avatar"></span>
</a>
</div>
<div class="media-body">
<p class="text-bold-600 mb-0"><a [routerLink]="">Rafila Găitan</a></p>
<p>Gravida nulla. Nulla vel metus scelerisque ante sollicitudin.</p>
</div>
</div>
</div>
</div>
<fieldset class="form-group position-relative has-icon-left mb-0">
<input type="text" class="form-control" placeholder="Write comments...">
<div class="form-control-position">
<i class="la la-dashcube"></i>
</div>
</fieldset>
</div>
</div>
</div>
</div>
</li>
<li class="timeline-item mt-3">
<div class="timeline-badge">
<span class="bg-amber bg-darken-1" data-toggle="tooltip" data-placement="left"
title="Quote of the day"><i class="la la-smile-o"></i></span>
</div>
<div class="timeline-card card border-grey border-lighten-2">
<div class="card-header">
<h4 class="card-title"><a [routerLink]="">Quote of the day</a></h4>
<p class="card-subtitle text-muted mb-0 pt-1">
<span class="font-small-3">03 March, 2015 at 5 P.M</span>
</p>
</div>
<div class="card-content">
<img class="img-fluid" src="../../../../../assets/images/portfolio/width-600/portfolio-3.jpg"
alt="Timeline Image 1">
<div class="card-body">
<blockquote class="card-bodyquote">
<p class="card-text">Eu pid nunc urna integer, sed, cras tortor scelerisque penatibus facilisis a
pulvinar, rhoncus sagittis ut nunc elit! Sociis in et?</p>
<footer>Someone famous in
<cite title="Source Title"> - Source Title</cite>
</footer>
</blockquote>
</div>
</div>
</div>
</li>
</ul>
<!-- 2014 -->
<ul class="timeline">
<li class="timeline-line"></li>
<li class="timeline-group">
<a [routerLink]="" class="btn btn-primary"><i class="la la-calendar-o"></i>Founded in 2012</a>
</li>
</ul>
<!-- 2014 -->
</section>
</div>
</div>
</div>
</div>

25
src/app/content/pages/user/user-profile/user-profile.component.spec.ts Normal file
View File

@@ -0,0 +1,25 @@
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { UserProfileComponent } from './user-profile.component';
describe('UserProfileComponent', () => {
let component: UserProfileComponent;
let fixture: ComponentFixture<UserProfileComponent>;
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [ UserProfileComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(UserProfileComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

317
src/app/content/pages/user/user-profile/user-profile.component.ts Normal file
View File

@@ -0,0 +1,317 @@
import { Component, OnInit } from '@angular/core';
import * as echarts from 'echarts';
import { NgBlockUI, BlockUI } from 'ng-block-ui';
import { ChartApiService } from '../../../../_services/chart.api';
interface Marker {
lat: number;
lng: number;
label: string;
}
const hours = ['12a', '1a', '2a', '3a', '4a', '5a', '6a',
'7a', '8a', '9a', '10a', '11a',
'12p', '1p', '2p', '3p', '4p', '5p',
'6p', '7p', '8p', '9p', '10p', '11p'];
const days = ['Saturday', 'Friday', 'Thursday',
'Wednesday', 'Tuesday', 'Monday', 'Sunday'];
@Component({
selector: 'app-user-profile',
templateUrl: './user-profile.component.html',
styleUrls: ['./user-profile.component.css']
})
export class UserProfileComponent implements OnInit {
image1 = [
{
img: '../../../../../assets/images/gallery/1.jpg',
thumb: '../../../../../assets/images/gallery/1.jpg',
description: 'Image 1'
}]
image2 = [{
img: '../../../../../assets/images/gallery/2.jpg',
thumb: '../../../../../assets/images/gallery/2.jpg',
description: 'Image 2'
}]
image3 = [{
img: '../../../../../assets/images/gallery/3.jpg',
thumb: '../../../../../assets/images/gallery/3.jpg',
description: 'Image 3'
}]
image4 = [{
img: '../../../../../assets/images/gallery/4.jpg',
thumb: '../../../../../assets/images/gallery/4.jpg',
description: 'Image 4'
}]
image5 = [{
img: '../../../../../assets/images/gallery/5.jpg',
thumb: '../../../../../assets/images/gallery/5.jpg',
description: 'Image 5'
}
]
image6 = [
{
img: '../../../../../assets/images/gallery/6.jpg',
thumb: '../../../../../assets/images/gallery/6.jpg',
description: 'Image 6'
}
]
image7 = [
{
img: '../../../../../assets/images/gallery/7.jpg',
thumb: '../../../../../assets/images/gallery/7.jpg',
description: 'Image 7'
}
]
image8 = [
{
img: '../../../../../assets/images/gallery/8.jpg',
thumb: '../../../../../assets/images/gallery/8.jpg',
description: 'Image 8'
}
]
image9 = [
{
img: '../../../../../assets/images/gallery/9.jpg',
thumb: '../../../../../assets/images/gallery/9.jpg',
description: 'Image 9'
}
]
image10 = [
{
img: '../../../../../assets/images/gallery/10.jpg',
thumb: '../../../../../assets/images/gallery/10.jpg',
description: 'Image 10'
}
]
image11 =
[
{
img: '../../../../../assets/images/gallery/11.jpg',
thumb: '../../../../../assets/images/gallery/11.jpg',
description: 'Image 11'
}
];
image12 =
[
{
img: '../../../../../assets/images/gallery/12.jpg',
thumb: '../../../../../assets/images/gallery/12.jpg',
description: 'Image 12'
}
];
data: any;
option: any;
public zoom = 15;
end: any;
@BlockUI('projectWorkOne') blockUIProjectWorkOne: NgBlockUI;
@BlockUI('sofiaOrav') blockUISofiaOrav: NgBlockUI;
@BlockUI('sofiaOravTwo') blockUISofiaOravTwo: NgBlockUI;
lat = 40.650002;
lng = -73.949997;
options = {
close: false,
expand: true,
minimize: false,
reload: true
};
markers: Marker[] = [
{
lat: this.lat,
lng: this.lng,
label: ''
}
];
constructor(private chartApiservice: ChartApiService) { }
chartOption: echarts.EChartsOption = {
// grid: {
// x: 40,
// x2: 40,
// y: 45,
// y2: 25
// },
// Add tooltip
tooltip: {
trigger: 'axis',
axisPointer: { // Axis indicator axis trigger effective
type: 'shadow' // The default is a straight line, optionally: 'line' | 'shadow'
}
},
// Add legend
legend: {
data: ['Direct access', 'Email marketing', 'Advertising alliance', 'Video ads',
'Search engine', 'Google', 'Safari', 'Opera', 'Firefox']
},
// Add custom colors
color: ['#666EE8', '#FF9149', '#FF9966', '#FA8E57', '#FF637b', '#5175E0', '#A147F0', '#28D094', '#BABFC7'],
// // Enable drag recalculate
// calculable: true,
xAxis: [
{
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: 'Direct access',
type: 'bar',
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: 'Email marketing',
type: 'bar',
stack: 'advertising',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Advertising alliance',
type: 'bar',
stack: 'advertising',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: 'Video ads',
type: 'bar',
stack: 'advertising',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: 'Search Engine',
type: 'bar',
stack: 'Total',
data: [862, 1018, 964, 1026, 1679, 1600, 1570],
},
{
name: 'Google',
type: 'bar',
barWidth: 12,
stack: 'search engine',
data: [620, 732, 701, 734, 1090, 1130, 1120]
},
{
name: 'Safari',
type: 'bar',
stack: 'search engine',
data: [120, 132, 101, 134, 290, 230, 220]
},
{
name: 'Opera',
type: 'bar',
stack: 'search engine',
data: [60, 72, 71, 74, 190, 130, 110]
},
{
name: 'Firefox',
type: 'bar',
stack: 'search engine',
data: [62, 82, 91, 84, 109, 110, 120]
}
]
};
getChordchart() {
this.option = {
title: {
text: 'Punch Card of Github',
link: 'https://github.com/pissang/echarts-next/graphs/punch-card'
},
legend: {
data: ['Punch Card'],
left: 'right'
},
polar: {},
tooltip: {
formatter: function (params) {
return params.value[2] + ' commits in ' + hours[params.value[1]] + ' of ' + days[params.value[0]];
}
},
angleAxis: {
type: 'category',
data: hours,
boundaryGap: false,
splitLine: {
show: true,
lineStyle: {
color: '#999',
type: 'dashed'
}
},
axisLine: {
show: false
}
},
radiusAxis: {
type: 'category',
data: days,
axisLine: {
show: false
},
axisLabel: {
rotate: 45
}
},
series: [{
name: 'Punch Card',
type: 'scatter',
coordinateSystem: 'polar',
symbolSize: function (val) {
return val[2] * 2;
},
data: this.data['punchdata'].data,
animationDelay: function (idx) {
return idx * 5;
}
}]
};
}
ngOnInit() {
this.zoom = 15;
this.chartApiservice.getTimelineData().subscribe(Response => {
this.data = Response;
this.getChordchart();
});
}
reloadProjectWorkOne() {
this.blockUIProjectWorkOne.start('Loading..');
setTimeout(() => {
this.blockUIProjectWorkOne.stop();
}, 2500);
}
reloadSofiaOrav() {
this.blockUISofiaOrav.start('Loading..');
setTimeout(() => {
this.blockUISofiaOrav.stop();
}, 2500);
}
reloadSofiaOravTwo() {
this.blockUISofiaOravTwo.start('Loading..');
setTimeout(() => {
this.blockUISofiaOravTwo.stop();
}, 2500);
}
}

44
src/app/content/pages/user/user.module.ts Normal file
View File

@@ -0,0 +1,44 @@
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
import { UserCardsComponent } from './user-cards/user-cards.component';
import { UserProfileComponent } from './user-profile/user-profile.component';
import { RouterModule } from '@angular/router';
import { NgChartsModule } from 'ng2-charts';
import { NgxEchartsModule } from 'ngx-echarts';
import { BreadcrumbModule } from 'src/app/_layout/breadcrumb/breadcrumb.module';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { BlockTemplateComponent } from 'src/app/_layout/blockui/block-template.component';
import { BlockUIModule } from 'ng-block-ui';
import { CardModule } from '../../partials/general/card/card.module';
import { environment } from 'src/environments/environment';
import { NgxPhotoswipeModule, LightboxAdapter } from '@fnxone/ngx-photoswipe';
@NgModule({
declarations: [UserCardsComponent, UserProfileComponent],
imports: [
CommonModule,
CardModule,
NgxEchartsModule.forRoot({
echarts: () => import('echarts')
}),
NgChartsModule,
NgbModule,
BreadcrumbModule,
NgxPhotoswipeModule,
BlockUIModule.forRoot({
template: BlockTemplateComponent
}),
RouterModule.forChild([
{
path: 'user-profile',
component: UserProfileComponent
},
{
path: 'user-cards',
component: UserCardsComponent
},
]),
],
schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class UserModule { }