first commit
This commit is contained in:
31
src/app/content/pages/dropzone/dropzone.component.css
Normal file
31
src/app/content/pages/dropzone/dropzone.component.css
Normal file
@@ -0,0 +1,31 @@
|
||||
* {
|
||||
font-family: Lato;
|
||||
}
|
||||
|
||||
ngx-dropzone,
|
||||
.custom-dropzone {
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
:host ::ng-deep .dropzone {
|
||||
max-width: fit-content !important;
|
||||
}
|
||||
:host ::ng-deep .dropzone1 {
|
||||
position: unset !important;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
:host ::ng-deep .dz-default {
|
||||
font-size: 2rem;
|
||||
color: #666ee8 !important;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
:host ::ng-deep ._dropzone{
|
||||
border: 2px dashed #666ee8;
|
||||
}
|
||||
:host ::ng-deep .custom-dropzone {
|
||||
height: 250px;
|
||||
background: #333;
|
||||
color: #fff;
|
||||
border: 5px dashed #666ee8 !important;
|
||||
}
|
||||
127
src/app/content/pages/dropzone/dropzone.component.html
Normal file
127
src/app/content/pages/dropzone/dropzone.component.html
Normal file
@@ -0,0 +1,127 @@
|
||||
<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">
|
||||
<!-- Dropzone section start -->
|
||||
<section id="dropzone-examples" *blockUI="'dropzoneGallery'; message: 'Loading'">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<m-card [options]="options" (reloadFunction)="reloadDorpzone($event)">
|
||||
<ng-container mCardHeaderTitle>
|
||||
Single File Upload
|
||||
</ng-container>
|
||||
<ng-container mCardBody>
|
||||
<p class="card-text">This example uploads a single file using ngx-dropzone.
|
||||
User can either click on the dropzone area and select single files or just drop all selected files
|
||||
in the dropzone area. This example is the most basic setup for dropzone.</p>
|
||||
<div class = "card-content collapse show">
|
||||
<div class ="card-header">
|
||||
<h4 class="card-title">The default dropzone.</h4>
|
||||
</div>
|
||||
<ngx-dropzone class="_dropzone" (change)="SelectSingleFile($event)">
|
||||
<ngx-dropzone-label>
|
||||
<div class="dz-default dz-message">
|
||||
<span class = "dz-default">Drop files here to upload</span>
|
||||
</div>
|
||||
</ngx-dropzone-label>
|
||||
<ngx-dropzone-preview class="dropzone" *ngFor="let f of file" [removable]="true" (removed)="SinglefileonRemove(f)">
|
||||
<ngx-dropzone-label>{{ f.name }} ({{ f.type }})</ngx-dropzone-label>
|
||||
</ngx-dropzone-preview>
|
||||
</ngx-dropzone>
|
||||
<div class ="card-header">
|
||||
<h4 class="card-title">The disabled but expanding dropzone.</h4>
|
||||
</div>
|
||||
|
||||
<ngx-dropzone class="_dropzone" (change)="SelectSingleFile($event)" [disabled]="true" [expandable]="true">
|
||||
<ngx-dropzone-label>
|
||||
<div class="dz-default dz-message">
|
||||
<span class = "dz-default">Drop files here to upload</span>
|
||||
</div>
|
||||
</ngx-dropzone-label>
|
||||
<ngx-dropzone-preview class="dropzone" *ngFor="let f of file">
|
||||
<ngx-dropzone-label>{{ f.name }} ({{ f.type }})</ngx-dropzone-label>
|
||||
</ngx-dropzone-preview>
|
||||
</ngx-dropzone>
|
||||
<div class ="card-header">
|
||||
<h4 class="card-title">A custom dropzone.</h4>
|
||||
</div>
|
||||
|
||||
<div class="custom-dropzone" ngx-dropzone [accept]="'image/*'" (change)="SelectSingleFile($event)">
|
||||
<ngx-dropzone-label>
|
||||
<div class="dz-default dz-message">
|
||||
<span class = "dz-default">My custome dropzone</span>
|
||||
</div>
|
||||
</ngx-dropzone-label>
|
||||
<ngx-dropzone-image-preview ngProjectAs="ngx-dropzone-preview" *ngFor="let f of file" [file]="f" [removable]="true" (removed)="SinglefileonRemove(f)">
|
||||
<ngx-dropzone-label class="dropzone1">{{ f.name }} ({{ f.type }})</ngx-dropzone-label>
|
||||
</ngx-dropzone-image-preview>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<m-card [options]="options" (reloadFunction)="reloadDorpzone($event)">
|
||||
<ng-container mCardHeaderTitle>
|
||||
Multiple File Upload
|
||||
</ng-container>
|
||||
<ng-container mCardBody>
|
||||
<p class="card-text">This example uploads a multiple files using ngx-dropzone.
|
||||
By default, dropzone is a multiple file uploader. User can either click
|
||||
on the dropzone area and select multiple files or just drop all selected files
|
||||
in the dropzone area. This example is the most basic setup for dropzone.</p>
|
||||
<ngx-dropzone class="_dropzone" (change)="SelectMultipleFile($event)">
|
||||
<ngx-dropzone-label>
|
||||
<div class="dz-default dz-message">
|
||||
<span class = "dz-default">Drop files here to upload</span>
|
||||
</div>
|
||||
</ngx-dropzone-label>
|
||||
<ngx-dropzone-preview class="dropzone" *ngFor="let f of files" [removable]="true" (removed)="MultiplefilesonRemove(f)">
|
||||
<ngx-dropzone-label>{{ f.name }} ({{ f.type }})</ngx-dropzone-label>
|
||||
</ngx-dropzone-preview>
|
||||
</ngx-dropzone>
|
||||
|
||||
<div class ="card-header">
|
||||
<h4 class="card-title">The disabled but expanding dropzone.</h4>
|
||||
</div>
|
||||
|
||||
<ngx-dropzone class="_dropzone" (change)="SelectMultipleFile($event)" [disabled]="true" [expandable]="true">
|
||||
<ngx-dropzone-label>
|
||||
<div class="dz-default dz-message">
|
||||
<span class = "dz-default">Drop files here to upload</span>
|
||||
</div>
|
||||
</ngx-dropzone-label>
|
||||
<ngx-dropzone-preview class="dropzone" *ngFor="let f of files">
|
||||
<ngx-dropzone-label>{{ f.name }} ({{ f.type }})</ngx-dropzone-label>
|
||||
</ngx-dropzone-preview>
|
||||
</ngx-dropzone>
|
||||
|
||||
<div class ="card-header">
|
||||
<h4 class="card-title">A custom dropzone.</h4>
|
||||
</div>
|
||||
|
||||
<div class="custom-dropzone" ngx-dropzone [accept]="'image/*'" (change)="SelectMultipleFile($event)">
|
||||
<ngx-dropzone-label>
|
||||
<div class="dz-default dz-message">
|
||||
<span class = "dz-default">My custome dropzone</span>
|
||||
</div>
|
||||
</ngx-dropzone-label>
|
||||
<ngx-dropzone-image-preview ngProjectAs="ngx-dropzone-preview" *ngFor="let f of files" [file]="f" [removable]="true" (removed)="MultiplefilesonRemove(f)">
|
||||
<ngx-dropzone-label class="dropzone1">{{ f.name }} ({{ f.type }})</ngx-dropzone-label>
|
||||
</ngx-dropzone-image-preview>
|
||||
</div>
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- // Dropzone section end -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- END: Content-->
|
||||
25
src/app/content/pages/dropzone/dropzone.component.spec.ts
Normal file
25
src/app/content/pages/dropzone/dropzone.component.spec.ts
Normal file
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { DropzoneComponent } from './dropzone.component';
|
||||
|
||||
describe('DropzoneComponent', () => {
|
||||
let component: DropzoneComponent;
|
||||
let fixture: ComponentFixture<DropzoneComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ DropzoneComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(DropzoneComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
60
src/app/content/pages/dropzone/dropzone.component.ts
Normal file
60
src/app/content/pages/dropzone/dropzone.component.ts
Normal file
@@ -0,0 +1,60 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { NgBlockUI, BlockUI } from 'ng-block-ui';
|
||||
@Component({
|
||||
selector: 'app-dropzone',
|
||||
templateUrl: './dropzone.component.html',
|
||||
styleUrls: ['./dropzone.component.css']
|
||||
})
|
||||
export class DropzoneComponent implements OnInit {
|
||||
public breadcrumb: any;
|
||||
@BlockUI('dropzoneGallery') blockUIDropzone: NgBlockUI;
|
||||
constructor() { }
|
||||
ngOnInit(): void {
|
||||
this.breadcrumb = {
|
||||
'mainlabel': 'Dropzone',
|
||||
'links': [
|
||||
{
|
||||
'name': 'Home',
|
||||
'isLink': true,
|
||||
'link': '/dashboard/sales'
|
||||
},
|
||||
{
|
||||
'name': 'Page',
|
||||
'isLink': true,
|
||||
'link': ''
|
||||
},
|
||||
{
|
||||
'name': 'Dropzone',
|
||||
'isLink': false
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
options = {
|
||||
close: true,
|
||||
expand: true,
|
||||
minimize: true,
|
||||
reload: true
|
||||
};
|
||||
files: File[] = [];
|
||||
SelectMultipleFile(event) {
|
||||
this.files.push(...event.addedFiles);
|
||||
}
|
||||
file: any;
|
||||
SelectSingleFile(event) {
|
||||
this.file = event.addedFiles;
|
||||
}
|
||||
MultiplefilesonRemove(event) {
|
||||
this.files.splice(this.files.indexOf(event), 1);
|
||||
}
|
||||
SinglefileonRemove(event) {
|
||||
this.file.splice(this.files.indexOf(event), 1);
|
||||
}
|
||||
reloadDorpzone() {
|
||||
this.blockUIDropzone.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUIDropzone.stop();
|
||||
}, 2500);
|
||||
}
|
||||
}
|
||||
25
src/app/content/pages/dropzone/dropzone.module.ts
Normal file
25
src/app/content/pages/dropzone/dropzone.module.ts
Normal file
@@ -0,0 +1,25 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { DropzoneComponent } from './dropzone.component';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { NgxDropzoneModule } from 'ngx-dropzone';
|
||||
import { BreadcrumbModule } from 'src/app/_layout/breadcrumb/breadcrumb.module';
|
||||
import { BlockUIModule } from 'ng-block-ui';
|
||||
import { CardModule } from '../../partials/general/card/card.module';
|
||||
@NgModule({
|
||||
declarations: [DropzoneComponent],
|
||||
imports: [
|
||||
CommonModule,
|
||||
NgxDropzoneModule,
|
||||
BreadcrumbModule,
|
||||
BlockUIModule,
|
||||
CardModule,
|
||||
RouterModule.forChild([
|
||||
{
|
||||
path: 'dropzone',
|
||||
component: DropzoneComponent
|
||||
}
|
||||
])
|
||||
]
|
||||
})
|
||||
export class DropzoneModule { }
|
||||
@@ -0,0 +1,17 @@
|
||||
:host ::ng-deep .block-ui-wrapper {
|
||||
background: rgba(255, 249, 249, 0.5) !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .card .card {
|
||||
margin-bottom: auto;
|
||||
}
|
||||
:host ::ng-deep .my-gallery img{
|
||||
margin-right: 1px;
|
||||
margin-left: 1px;
|
||||
border-top-left-radius: calc(.35rem - 1px);
|
||||
border-top-right-radius: calc(.35rem - 1px);
|
||||
width: 100%;
|
||||
}
|
||||
:host ::ng-deep .ngx-gallery {
|
||||
grid-template-columns: auto !important;
|
||||
}
|
||||
@@ -0,0 +1,269 @@
|
||||
<div class="app-content content">
|
||||
<div class="content-wrapper">
|
||||
<div class="content-header row ">
|
||||
<app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
|
||||
</div>
|
||||
<div class="content-body">
|
||||
<section id="description" class="card">
|
||||
<m-card [options]="imageOptions" (reloadFunction)="reloadImageGallery()">
|
||||
<ng-container mCardHeaderTitle>
|
||||
Description
|
||||
</ng-container>
|
||||
|
||||
<ng-container mCardContent>
|
||||
<div class="card-body">
|
||||
<div class="card-text">
|
||||
<p>Video & Image gallery grid with title, description & photo-swipe integration. Display gallery in 4-2-1 columns.</p>
|
||||
<p>Please read the photo-swipe gallery <a href="http://photoswipe.com/documentation/getting-started.html" target="_blank">documentation</a> for usage information.</p>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</section>
|
||||
|
||||
<!-- Image grid -->
|
||||
<section id="image-grid" class="card" *blockUI="'imageGallery'; message: 'Loading'">
|
||||
<m-card [options]="imageOptions" (reloadFunction)="reloadImageGallery( )">
|
||||
<ng-container mCardHeaderTitle>
|
||||
Image gallery
|
||||
</ng-container>
|
||||
<ng-container mCardContent>
|
||||
<div class="card-body">
|
||||
<div class="card-text">
|
||||
<p>Image gallery grid with title, description & photo-swipe integration. Display images gallery in 4-2-1
|
||||
columns and photo-swipe provides gallery features.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body my-gallery">
|
||||
<div class="row">
|
||||
<div class="card card-img-top border-grey border-lighten-2 col-md-3">
|
||||
<a2p-gallery>
|
||||
<ngxps-gallery [images]="image1"></ngxps-gallery>
|
||||
</a2p-gallery>
|
||||
<div class="card-body px-0">
|
||||
<h4 class="card-title">Card title 1</h4>
|
||||
<p class="card-text">This is a longer card with supporting text below.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card-img-top border-grey border-lighten-2 col-md-3">
|
||||
<a2p-gallery>
|
||||
<ngxps-gallery [images]="image2"></ngxps-gallery>
|
||||
</a2p-gallery>
|
||||
<div class="card-body px-0">
|
||||
<h4 class="card-title">Card title 2</h4>
|
||||
<p class="card-text">This is a longer card with supporting text below.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card-img-top border-grey border-lighten-2 col-md-3">
|
||||
<a2p-gallery>
|
||||
<ngxps-gallery [images]="image3"></ngxps-gallery>
|
||||
</a2p-gallery>
|
||||
<div class="card-body px-0">
|
||||
<h4 class="card-title">Card title 3</h4>
|
||||
<p class="card-text">This is a longer card with supporting text below.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card-img-top border-grey border-lighten-2 col-md-3">
|
||||
<a2p-gallery>
|
||||
<ngxps-gallery [images]="image4"></ngxps-gallery>
|
||||
</a2p-gallery>
|
||||
<div class="card-body px-0">
|
||||
<h4 class="card-title">Card title 4</h4>
|
||||
<p class="card-text">This is a longer card with supporting text below.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="card card-img-top border-grey border-lighten-2 col-md-3">
|
||||
<a2p-gallery>
|
||||
<ngxps-gallery [images]="image5"></ngxps-gallery>
|
||||
</a2p-gallery>
|
||||
<div class="card-body px-0">
|
||||
<h4 class="card-title">Card title 5</h4>
|
||||
<p class="card-text">This is a longer card with supporting text below.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card-img-top border-grey border-lighten-2 col-md-3">
|
||||
<a2p-gallery>
|
||||
<ngxps-gallery [images]="image6"></ngxps-gallery>
|
||||
</a2p-gallery>
|
||||
<div class="card-body px-0">
|
||||
<h4 class="card-title">Card title 6</h4>
|
||||
<p class="card-text">This is a longer card with supporting text below.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card-img-top border-grey border-lighten-2 col-md-3">
|
||||
<a2p-gallery>
|
||||
<ngxps-gallery [images]="image7"></ngxps-gallery>
|
||||
</a2p-gallery>
|
||||
<div class="card-body px-0">
|
||||
<h4 class="card-title">Card title 7</h4>
|
||||
<p class="card-text">This is a longer card with supporting text below.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card-img-top border-grey border-lighten-2 col-md-3">
|
||||
<a2p-gallery>
|
||||
<ngxps-gallery [images]="image8"></ngxps-gallery>
|
||||
</a2p-gallery>
|
||||
<div class="card-body px-0">
|
||||
<h4 class="card-title">Card title 8</h4>
|
||||
<p class="card-text">This is a longer card with supporting text below.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="card card-img-top border-grey border-lighten-2 col-md-3">
|
||||
<a2p-gallery>
|
||||
<ngxps-gallery [images]="image9"></ngxps-gallery>
|
||||
</a2p-gallery>
|
||||
<div class="card-body px-0">
|
||||
<h4 class="card-title">Card title 9</h4>
|
||||
<p class="card-text">This is a longer card with supporting text below.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card-img-top border-grey border-lighten-2 col-md-3">
|
||||
<a2p-gallery>
|
||||
<ngxps-gallery [images]="image10"></ngxps-gallery>
|
||||
</a2p-gallery>
|
||||
<div class="card-body px-0">
|
||||
<h4 class="card-title">Card title 10</h4>
|
||||
<p class="card-text">This is a longer card with supporting text below.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card-img-top border-grey border-lighten-2 col-md-3">
|
||||
<a2p-gallery>
|
||||
<ngxps-gallery [images]="image11"></ngxps-gallery>
|
||||
</a2p-gallery>
|
||||
<div class="card-body px-0">
|
||||
<h4 class="card-title">Card title 11</h4>
|
||||
<p class="card-text">This is a longer card with supporting text below.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card-img-top border-grey border-lighten-2 col-md-3">
|
||||
<a2p-gallery>
|
||||
<ngxps-gallery [images]="image12"></ngxps-gallery>
|
||||
</a2p-gallery>
|
||||
<div class="card-body px-0">
|
||||
<h4 class="card-title">Card title 12</h4>
|
||||
<p class="card-text">This is a longer card with supporting text below.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ngxps-lightbox></ngxps-lightbox>
|
||||
</div>
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</section>
|
||||
<!--/ Image grid -->
|
||||
|
||||
<!-- Video grid -->
|
||||
<section id="video-grid" class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Video gallery</h4>
|
||||
</div>
|
||||
<div class="card-content collapse show">
|
||||
<div class="card-body">
|
||||
<div class="card-text">
|
||||
<p>This section contain responsive embedded video gallery with grid 3-2-1 columns with title &
|
||||
description. This demo contain vimeo and youtube embedded videos.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
|
||||
<div class="card-deck-wrapper">
|
||||
<h5 class="card-header ">Vimeo</h5>
|
||||
<div class="card-deck">
|
||||
<div class="card border-grey border-lighten-2">
|
||||
<div class="card-img-top embed-responsive embed-responsive-item embed-responsive-16by9">
|
||||
<iframe class="gallery-thumbnail" src="https://player.vimeo.com/video/118589137?title=0&byline=0"
|
||||
width="640" height="360"></iframe>
|
||||
</div>
|
||||
<div class="card-body px-0">
|
||||
<h4 class="card-title">Card title</h4>
|
||||
<p class="card-text">This is a longer 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"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card border-grey border-lighten-2">
|
||||
<div class="card-img-top embed-responsive embed-responsive-item embed-responsive-16by9">
|
||||
<iframe class="gallery-thumbnail"
|
||||
src="https://player.vimeo.com/video/173541384?color=ff9933&title=0&byline=0" width="640"
|
||||
height="360"></iframe>
|
||||
</div>
|
||||
<div class="card-body px-0">
|
||||
<h4 class="card-title">Card title</h4>
|
||||
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.
|
||||
</p>
|
||||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card border-grey border-lighten-2">
|
||||
<div class="card-img-top embed-responsive embed-responsive-item embed-responsive-16by9">
|
||||
<iframe class="gallery-thumbnail"
|
||||
src="https://player.vimeo.com/video/161753790?color=ff9933&title=0&byline=0" width="640"
|
||||
height="360"></iframe>
|
||||
</div>
|
||||
<div class="card-body px-0">
|
||||
<h4 class="card-title">Card title</h4>
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to
|
||||
additional content. This card has even longer content than the first to show that equal height
|
||||
action.</p>
|
||||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-deck-wrapper">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">You Tube</h4>
|
||||
</div>
|
||||
<div class="card-deck collapse show">
|
||||
<div class="card border-grey border-lighten-2">
|
||||
<div class="card-img-top embed-responsive embed-responsive-item embed-responsive-16by9">
|
||||
<iframe class="gallery-thumbnail"
|
||||
src="https://www.youtube.com/embed/SsE5U7ta9Lw?rel=0&controls=0&showinfo=0"></iframe>
|
||||
</div>
|
||||
<div class="card-body px-0">
|
||||
<h4 class="card-title">Card title</h4>
|
||||
<p class="card-text">This is a longer 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"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card border-grey border-lighten-2">
|
||||
<div class="card-img-top embed-responsive embed-responsive-item embed-responsive-16by9">
|
||||
<iframe class="gallery-thumbnail"
|
||||
src="https://www.youtube.com/embed/zqDxfHvZ3DU?rel=0&controls=0&showinfo=0"></iframe>
|
||||
</div>
|
||||
<div class="card-body px-0">
|
||||
<h4 class="card-title">Card title</h4>
|
||||
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.
|
||||
</p>
|
||||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card border-grey border-lighten-2">
|
||||
<div class="card-img-top embed-responsive embed-responsive-item embed-responsive-16by9">
|
||||
<iframe class="gallery-thumbnail"
|
||||
src="https://www.youtube.com/embed/hunYLg8I1Os?rel=0&controls=0&showinfo=0"></iframe>
|
||||
</div>
|
||||
<div class="card-body px-0">
|
||||
<h4 class="card-title">Card title</h4>
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to
|
||||
additional content. This card has even longer content than the first to show that equal height
|
||||
action.</p>
|
||||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Video grid -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
|
||||
|
||||
import { GalleryGridDescComponent } from './gallery-grid-desc.component';
|
||||
|
||||
describe('GalleryGridDescComponent', () => {
|
||||
let component: GalleryGridDescComponent;
|
||||
let fixture: ComponentFixture<GalleryGridDescComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ GalleryGridDescComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(GalleryGridDescComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,139 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { NgBlockUI, BlockUI } from 'ng-block-ui';
|
||||
|
||||
declare const require: any;
|
||||
@Component({
|
||||
selector: 'app-gallery-grid-desc',
|
||||
templateUrl: './gallery-grid-desc.component.html',
|
||||
styleUrls: ['./gallery-grid-desc.component.css']
|
||||
})
|
||||
export class GalleryGridDescComponent 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'
|
||||
}
|
||||
];
|
||||
|
||||
options = {
|
||||
close: true,
|
||||
expand: false,
|
||||
minimize: false,
|
||||
reload: true
|
||||
};
|
||||
imageOptions = {
|
||||
close: true,
|
||||
expand: true,
|
||||
minimize: true,
|
||||
reload: true
|
||||
};
|
||||
public breadcrumb: any;
|
||||
|
||||
@BlockUI('imageGallery') blockUIImageGallery: NgBlockUI;
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
|
||||
this.breadcrumb = {
|
||||
'mainlabel': 'Gallery Media Grid With Description',
|
||||
'links': [
|
||||
{
|
||||
'name': 'Home',
|
||||
'isLink': true,
|
||||
'link': '/dashboard/sales'
|
||||
},
|
||||
{
|
||||
'name': 'Gallery',
|
||||
'isLink': true,
|
||||
'link': ''
|
||||
},
|
||||
{
|
||||
'name': 'Gallery Media Grid With Description',
|
||||
'isLink': false
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
reloadImageGallery() {
|
||||
this.blockUIImageGallery.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUIImageGallery.stop();
|
||||
}, 2500);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
:host ::ng-deep .block-ui-wrapper {
|
||||
background: rgba(255, 249, 249, 0.5) !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .card .card {
|
||||
margin-bottom: auto;
|
||||
}
|
||||
: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
|
||||
;
|
||||
}
|
||||
@@ -0,0 +1,256 @@
|
||||
<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">
|
||||
|
||||
<!-- Image grid -->
|
||||
<section id="image-gallery" class="card" *blockUI="'imageGallery'; message: 'Loading'">
|
||||
<m-card [options]="imageoptions" (reloadFunction)="reloadImageGallery($event)">
|
||||
<ng-container mCardHeaderTitle>
|
||||
Image gallery
|
||||
</ng-container>
|
||||
<ng-container mCardBody>
|
||||
<div class="card-text">
|
||||
<p>Image gallery grid with photo-swipe integration. Display images gallery in 4-2-1 columns and
|
||||
photo-swipe provides gallery features.</p>
|
||||
</div>
|
||||
<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>
|
||||
<ngxps-lightbox></ngxps-lightbox>
|
||||
</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>
|
||||
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</section>
|
||||
<!--/ Image grid -->
|
||||
|
||||
<!-- Video grid -->
|
||||
<section id="video-gallery" class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Video gallery</h4>
|
||||
</div>
|
||||
<div class="card-content collapse show">
|
||||
<div class="card-body">
|
||||
<div class="card-text">
|
||||
<p>This section contain responsive embedded video gallery with grid 4-2-1 columns This demo contain vimeo
|
||||
and youtube embedded videos.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h5 class="card-header">Vimeo</h5>
|
||||
<div class="row">
|
||||
<div class="col-lg-3 col-md-6 col-12">
|
||||
<div class="embed-responsive embed-responsive-item embed-responsive-16by9">
|
||||
<iframe class="img-thumbnail" src="https://player.vimeo.com/video/300765332?title=0&byline=0"
|
||||
width="640" height="360"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-3 col-md-6 col-12">
|
||||
<div class="embed-responsive embed-responsive-item embed-responsive-16by9">
|
||||
<iframe class="img-thumbnail"
|
||||
src="https://player.vimeo.com/video/173140629?color=ff9933&title=0&byline=0" width="640"
|
||||
height="360"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-3 col-md-6 col-12">
|
||||
<div class="embed-responsive embed-responsive-item embed-responsive-16by9">
|
||||
<iframe class="img-thumbnail"
|
||||
src="https://player.vimeo.com/video/174099316?color=ff9933&title=0&byline=0" width="640"
|
||||
height="360"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-3 col-md-6 col-12">
|
||||
<div class="embed-responsive embed-responsive-item embed-responsive-16by9">
|
||||
<iframe class="img-thumbnail"
|
||||
src="https://player.vimeo.com/video/173139879?color=ff9933&title=0&byline=0" width="640"
|
||||
height="360"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
|
||||
<div class="col-lg-3 col-md-6 col-12">
|
||||
<div class="embed-responsive embed-responsive-item embed-responsive-16by9">
|
||||
<iframe class="img-thumbnail" src="https://player.vimeo.com/video/118589137?title=0&byline=0"
|
||||
width="640" height="360"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-3 col-md-6 col-12">
|
||||
<div class="embed-responsive embed-responsive-item embed-responsive-16by9">
|
||||
<iframe class="img-thumbnail"
|
||||
src="https://player.vimeo.com/video/173541384?color=ff9933&title=0&byline=0" width="640"
|
||||
height="360"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-3 col-md-6 col-12">
|
||||
<div class="embed-responsive embed-responsive-item embed-responsive-16by9">
|
||||
<iframe class="img-thumbnail"
|
||||
src="https://player.vimeo.com/video/161753790?color=ff9933&title=0&byline=0" width="640"
|
||||
height="360"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-3 col-md-6 col-12">
|
||||
<div class="embed-responsive embed-responsive-item embed-responsive-16by9">
|
||||
<iframe class="img-thumbnail"
|
||||
src="https://player.vimeo.com/video/174960004?color=ff9933&title=0&byline=0" width="640"
|
||||
height="360"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<h5 class="card-header">You Tube</h5>
|
||||
<div class="row">
|
||||
<div class="col-lg-3 col-md-6 col-12">
|
||||
<div class="embed-responsive embed-responsive-item embed-responsive-16by9">
|
||||
<iframe class="img-thumbnail"
|
||||
src="https://www.youtube.com/embed/SsE5U7ta9Lw?rel=0&controls=0&showinfo=0"
|
||||
SameSite="Secure"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-3 col-md-6 col-12">
|
||||
<div class="embed-responsive embed-responsive-item embed-responsive-16by9">
|
||||
<iframe class="img-thumbnail"
|
||||
src="https://www.youtube.com/embed/zqDxfHvZ3DU?rel=0&controls=0&showinfo=0"
|
||||
SameSite="Secure"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-3 col-md-6 col-12">
|
||||
<div class="embed-responsive embed-responsive-item embed-responsive-16by9">
|
||||
<iframe class="img-thumbnail"
|
||||
src="https://www.youtube.com/embed/hunYLg8I1Os?rel=0&controls=0&showinfo=0"
|
||||
SameSite="Secure"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-3 col-md-6 col-12">
|
||||
<div class="embed-responsive embed-responsive-item embed-responsive-16by9">
|
||||
<iframe class="img-thumbnail"
|
||||
src="https://www.youtube.com/embed/yXootGU_8Ns?rel=0&controls=0&showinfo=0"
|
||||
SameSite="Secure"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-3 col-md-6 col-12">
|
||||
<div class="embed-responsive embed-responsive-item embed-responsive-16by9">
|
||||
<iframe class="img-thumbnail"
|
||||
src="https://www.youtube.com/embed/_-zawfC3s9M?rel=0&controls=0&showinfo=0"
|
||||
SameSite="Secure"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-3 col-md-6 col-12">
|
||||
<div class="embed-responsive embed-responsive-item embed-responsive-16by9">
|
||||
<iframe class="img-thumbnail"
|
||||
src="https://www.youtube.com/embed/RcrLLooXgSY?rel=0&controls=0&showinfo=0"
|
||||
SameSite="Secure"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-3 col-md-6 col-12">
|
||||
<div class="embed-responsive embed-responsive-item embed-responsive-16by9">
|
||||
<iframe class="img-thumbnail"
|
||||
src="https://www.youtube.com/embed/_V4if9Weopk?rel=0&controls=0&showinfo=0"
|
||||
SameSite="Secure"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-3 col-md-6 col-12">
|
||||
<div class="embed-responsive embed-responsive-item embed-responsive-16by9">
|
||||
<iframe class="img-thumbnail"
|
||||
src="https://www.youtube.com/embed/icMTTP7-q9A?rel=0&controls=0&showinfo=0"
|
||||
SameSite="Secure"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Video grid -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
|
||||
|
||||
import { GalleryGridComponent } from './gallery-grid.component';
|
||||
|
||||
describe('GalleryGridComponent', () => {
|
||||
let component: GalleryGridComponent;
|
||||
let fixture: ComponentFixture<GalleryGridComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ GalleryGridComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(GalleryGridComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,226 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { NgBlockUI, BlockUI } from 'ng-block-ui';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-gallery-grid',
|
||||
templateUrl: './gallery-grid.component.html',
|
||||
styleUrls: ['./gallery-grid.component.css']
|
||||
})
|
||||
export class GalleryGridComponent 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'
|
||||
}
|
||||
];
|
||||
|
||||
options = {
|
||||
close: true,
|
||||
expand: false,
|
||||
minimize: false,
|
||||
reload: true
|
||||
};
|
||||
|
||||
imageoptions = {
|
||||
close: true,
|
||||
expand: true,
|
||||
minimize: true,
|
||||
reload: true
|
||||
};
|
||||
|
||||
@BlockUI('imageGallery') blockUIImageGallery: NgBlockUI;
|
||||
|
||||
public breadcrumb: any;
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
// this.image1 = new Image();
|
||||
// this.image1.largeUrl = '../../../../../assets/images/gallery/1.jpg';
|
||||
// this.image1.height = 4296;
|
||||
// this.image1.width = 4434;
|
||||
// this.image1.id = 0;
|
||||
// this.image1.size = `${this.image1.width}x${this.image1.height}`;
|
||||
// this.image1.thumbUrl = '../../../../../assets/images/gallery/1.jpg';
|
||||
// this.image2 = new Image();
|
||||
// this.image2.largeUrl = '../../../../../assets/images/gallery/2.jpg';
|
||||
// this.image2.height = 4296;
|
||||
// this.image2.width = 4434;
|
||||
// this.image2.id = 1;
|
||||
// this.image2.size = `${this.image2.width}x${this.image2.height}`;
|
||||
// this.image2.thumbUrl = '../../../../../assets/images/gallery/2.jpg';
|
||||
// this.image3 = new Image();
|
||||
// this.image3.largeUrl = '../../../../../assets/images/gallery/3.jpg';
|
||||
// this.image3.height = 4296;
|
||||
// this.image3.width = 4434;
|
||||
// this.image3.id = 2;
|
||||
// this.image3.size = `${this.image3.width}x${this.image3.height}`;
|
||||
// this.image3.thumbUrl = '../../../../../assets/images/gallery/3.jpg';
|
||||
// this.image3.description = 'hello world';
|
||||
// this.image3.author = 'David Wollschlegel';
|
||||
// this.image4 = new Image();
|
||||
// this.image4.largeUrl = '../../../../../assets/images/gallery/4.jpg';
|
||||
// this.image4.height = 4296;
|
||||
// this.image4.width = 4434;
|
||||
// this.image4.id = 3;
|
||||
// this.image4.size = `${this.image4.width}x${this.image4.height}`;
|
||||
// this.image4.thumbUrl = '../../../../../assets/images/gallery/4.jpg';
|
||||
// this.image5 = new Image();
|
||||
// this.image5.largeUrl = '../../../../../assets/images/gallery/5.jpg';
|
||||
// this.image5.height = 4296;
|
||||
// this.image5.width = 4434;
|
||||
// this.image5.id = 4;
|
||||
// this.image5.size = `${this.image5.width}x${this.image5.height}`;
|
||||
// this.image5.thumbUrl = '../../../../../assets/images/gallery/5.jpg';
|
||||
// this.image6 = new Image();
|
||||
// this.image6.largeUrl = '../../../../../assets/images/gallery/6.jpg';
|
||||
// this.image6.height = 4296;
|
||||
// this.image6.width = 4434;
|
||||
// this.image6.id = 5;
|
||||
// this.image6.size = `${this.image6.width}x${this.image6.height}`;
|
||||
// this.image6.thumbUrl = '../../../../../assets/images/gallery/6.jpg';
|
||||
// this.image7 = new Image();
|
||||
// this.image7.largeUrl = '../../../../../assets/images/gallery/7.jpg';
|
||||
// this.image7.height = 4296;
|
||||
// this.image7.width = 4434;
|
||||
// this.image7.id = 6;
|
||||
// this.image7.size = `${this.image7.width}x${this.image7.height}`;
|
||||
// this.image7.thumbUrl = '../../../../../assets/images/gallery/7.jpg';
|
||||
// this.image8 = new Image();
|
||||
// this.image8.largeUrl = '../../../../../assets/images/gallery/8.jpg';
|
||||
// this.image8.height = 4296;
|
||||
// this.image8.width = 4434;
|
||||
// this.image8.id = 7;
|
||||
// this.image8.size = `${this.image4.width}x${this.image4.height}`;
|
||||
// this.image8.thumbUrl = '../../../../../assets/images/gallery/8.jpg';
|
||||
// this.image9 = new Image();
|
||||
// this.image9.largeUrl = '../../../../../assets/images/gallery/9.jpg';
|
||||
// this.image9.height = 4296;
|
||||
// this.image9.width = 4434;
|
||||
// this.image9.id = 8;
|
||||
// this.image9.size = `${this.image4.width}x${this.image4.height}`;
|
||||
// this.image9.thumbUrl = '../../../../../assets/images/gallery/9.jpg';
|
||||
// this.image10 = new Image();
|
||||
// this.image10.largeUrl = '../../../../../assets/images/gallery/10.jpg';
|
||||
// this.image10.height = 4296;
|
||||
// this.image10.width = 4434;
|
||||
// this.image10.id = 9;
|
||||
// this.image10.size = `${this.image10.width}x${this.image10.height}`;
|
||||
// this.image10.thumbUrl = '../../../../../assets/images/gallery/10.jpg';
|
||||
// this.image11 = new Image();
|
||||
// this.image11.largeUrl = '../../../../../assets/images/gallery/11.jpg';
|
||||
// this.image11.height = 4296;
|
||||
// this.image11.width = 4434;
|
||||
// this.image11.id = 10;
|
||||
// this.image11.size = `${this.image11.width}x${this.image11.height}`;
|
||||
// this.image11.thumbUrl = '../../../../../assets/images/gallery/11.jpg';
|
||||
// this.image12 = new Image();
|
||||
// this.image12.largeUrl = '../../../../../assets/images/gallery/12.jpg';
|
||||
// this.image12.height = 4296;
|
||||
// this.image12.width = 4434;
|
||||
// this.image12.id = 11;
|
||||
// this.image12.size = `${this.image12.width}x${this.image12.height}`;
|
||||
// this.image12.thumbUrl = '../../../../../assets/images/gallery/12.jpg';
|
||||
this.breadcrumb = {
|
||||
'mainlabel': 'Gallery Media Grid',
|
||||
'links': [
|
||||
{
|
||||
'name': 'Home',
|
||||
'isLink': true,
|
||||
'link': '/dashboard/sales'
|
||||
},
|
||||
{
|
||||
'name': 'Gallery',
|
||||
'isLink': true,
|
||||
'link': ''
|
||||
},
|
||||
{
|
||||
'name': 'Gallery Media Grid',
|
||||
'isLink': false
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
reloadImageGallery() {
|
||||
this.blockUIImageGallery.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUIImageGallery.stop();
|
||||
}, 2500);
|
||||
}
|
||||
|
||||
}
|
||||
50
src/app/content/pages/gallery/gallery.module.ts
Normal file
50
src/app/content/pages/gallery/gallery.module.ts
Normal file
@@ -0,0 +1,50 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { GalleryGridComponent } from './gallery-grid/gallery-grid.component';
|
||||
import { GalleryGridDescComponent } from './gallery-grid-desc/gallery-grid-desc.component';
|
||||
import { MasonryGalleryComponent } from './masonry-gallery/masonry-gallery.component';
|
||||
import { HoverEffectComponent } from './hover-effect/hover-effect.component';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { BreadcrumbModule } from 'src/app/_layout/breadcrumb/breadcrumb.module';
|
||||
import { NgxMasonryModule } from 'ngx-masonry';
|
||||
import { CardModule } from '../../partials/general/card/card.module';
|
||||
import { BlockUIModule } from 'ng-block-ui';
|
||||
import { BlockTemplateComponent } from 'src/app/_layout/blockui/block-template.component';
|
||||
import { NgxPhotoswipeModule, LightboxAdapter } from '@fnxone/ngx-photoswipe';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
CardModule,
|
||||
BreadcrumbModule,
|
||||
NgxPhotoswipeModule,
|
||||
NgxMasonryModule,
|
||||
BlockUIModule.forRoot({
|
||||
template: BlockTemplateComponent
|
||||
}),
|
||||
RouterModule.forChild([
|
||||
{
|
||||
path: 'gallery-grid',
|
||||
component: GalleryGridComponent
|
||||
},
|
||||
{
|
||||
path: 'gallery-grid-desc',
|
||||
component: GalleryGridDescComponent
|
||||
},
|
||||
{
|
||||
path: 'masonry-gallery',
|
||||
component: MasonryGalleryComponent
|
||||
},
|
||||
{
|
||||
path: 'hover-effect',
|
||||
component: HoverEffectComponent
|
||||
},
|
||||
]),
|
||||
],
|
||||
// providers: [
|
||||
// {provide : LightboxAdapter, useClass : LightboxAdapter}
|
||||
// ],
|
||||
declarations: [GalleryGridComponent, GalleryGridDescComponent, MasonryGalleryComponent,
|
||||
HoverEffectComponent]
|
||||
})
|
||||
export class GalleryModule { }
|
||||
@@ -0,0 +1,7 @@
|
||||
:host ::ng-deep .block-ui-wrapper {
|
||||
background: rgba(255, 249, 249, 0.5) !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .card .card {
|
||||
margin-bottom: auto;
|
||||
}
|
||||
@@ -0,0 +1,394 @@
|
||||
<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">
|
||||
<!-- Hover Effects -->
|
||||
<section id="hover-effects" class="card" *blockUI="'hoverEffects'; message: 'Loading'">
|
||||
<m-card [options]="imageoptions" (reloadFunction)="reloadHoverEffects($event)">
|
||||
<ng-container mCardHeaderTitle>
|
||||
Hover Effects
|
||||
</ng-container>
|
||||
<ng-container mCardContent>
|
||||
|
||||
<div class="card-body pb-0">
|
||||
<div class="card-text">
|
||||
<p>Image gallery grid with 30 subtle hover effect. Try to hover below demo images to show each hover
|
||||
effect.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body my-gallery" itemscope itemtype="http://schema.org/ImageGallery">
|
||||
<div class="grid-hover row">
|
||||
<h5 class="col-12">Lily</h5>
|
||||
<div class="col-lg-6 col-12">
|
||||
<figure class="effect-lily">
|
||||
<img src="../../../assets/images/gallery/12.jpg" alt="img12" />
|
||||
<figcaption>
|
||||
<div>
|
||||
<h2>Nice <span>Lily</span></h2>
|
||||
<p>Lily likes to play with crayons and pencils</p>
|
||||
</div>
|
||||
<a [routerLink]="">View more</a>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="col-lg-6 col-12">
|
||||
<figure class="effect-lily">
|
||||
<img src="../../../assets/images/gallery/1.jpg" alt="img1" />
|
||||
<figcaption>
|
||||
<div>
|
||||
<h2>Nice <span>Lily</span></h2>
|
||||
<p>Lily likes to play with crayons and pencils</p>
|
||||
</div>
|
||||
<a [routerLink]="">View more</a>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid-hover row">
|
||||
<h5 class="col-12 mt-3">Sadie</h5>
|
||||
<div class="col-lg-6 col-12">
|
||||
<figure class="effect-sadie">
|
||||
<img src="../../../assets/images/gallery/2.jpg" alt="img02" />
|
||||
<figcaption>
|
||||
<h2>Holy <span>Sadie</span></h2>
|
||||
<p>Sadie never took her eyes off me.
|
||||
<br>She had a dark soul.</p>
|
||||
<a [routerLink]="">View more</a>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="col-lg-6 col-12">
|
||||
<figure class="effect-sadie">
|
||||
<img src="../../../assets/images/gallery/14.jpg" alt="img14" />
|
||||
<figcaption>
|
||||
<h2>Holy <span>Sadie</span></h2>
|
||||
<p>Sadie never took her eyes off me.
|
||||
<br>She had a dark soul.</p>
|
||||
<a [routerLink]="">View more</a>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid-hover row">
|
||||
<h5 class="col-12 mt-3">Honey</h5>
|
||||
<div class="col-lg-6 col-12">
|
||||
<figure class="effect-honey">
|
||||
<img src="../../../assets/images/gallery/4.jpg" alt="img04" />
|
||||
<figcaption>
|
||||
<h2>Dreamy <span>Honey</span> <i>Now</i></h2>
|
||||
<a [routerLink]="">View more</a>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="col-lg-6 col-12">
|
||||
<figure class="effect-honey">
|
||||
<img src="../../../assets/images/gallery/5.jpg" alt="img05" />
|
||||
<figcaption>
|
||||
<h2>Dreamy <span>Honey</span> <i>Now</i></h2>
|
||||
<a [routerLink]="">View more</a>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid-hover row">
|
||||
<h5 class="col-12 mt-3">Layla</h5>
|
||||
<div class="col-lg-6 col-12">
|
||||
<figure class="effect-layla">
|
||||
<img src="../../../assets/images/gallery/6.jpg" alt="img06" />
|
||||
<figcaption>
|
||||
<h2>Crazy <span>Layla</span></h2>
|
||||
<p>When Layla appears, she brings an eternal summer along.</p>
|
||||
<a [routerLink]="">View more</a>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="col-lg-6 col-12">
|
||||
<figure class="effect-layla">
|
||||
<img src="../../../assets/images/gallery/3.jpg" alt="img03" />
|
||||
<figcaption>
|
||||
<h2>Crazy <span>Layla</span></h2>
|
||||
<p>When Layla appears, she brings an eternal summer along.</p>
|
||||
<a [routerLink]="">View more</a>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid-hover row">
|
||||
<h5 class="col-12 mt-3">Zoe</h5>
|
||||
<div class="col-lg-6 col-12">
|
||||
<figure class="effect-zoe">
|
||||
<img src="../../../assets/images/gallery/25.jpg" alt="img25" />
|
||||
<figcaption>
|
||||
<h2>Creative <span>Zoe</span></h2>
|
||||
<p class="icon-links">
|
||||
<a [routerLink]="" class="mr-1"><i class="feather ft-heart"></i></a>
|
||||
<a [routerLink]="" class="mr-1"><i class="feather ft-eye"></i></a>
|
||||
<a [routerLink]="" class="mr-1"><i class="feather ft-edit"></i></a>
|
||||
</p>
|
||||
<p class="description">Zoe never had the patience of her sisters. She deliberately punched the
|
||||
bear
|
||||
in his face.</p>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="col-lg-6 col-12">
|
||||
<figure class="effect-zoe">
|
||||
<img src="../../../assets/images/gallery/26.jpg" alt="img26" />
|
||||
<figcaption>
|
||||
<h2>Creative <span>Zoe</span></h2>
|
||||
<p class="icon-links">
|
||||
<a [routerLink]="" class="mr-1"><i class="feather ft-heart"></i></a>
|
||||
<a [routerLink]="" class="mr-1"><i class="feather ft-eye"></i></a>
|
||||
<a [routerLink]="" class="mr-1"><i class="feather ft-edit"></i></a>
|
||||
</p>
|
||||
<p class="description">Zoe never had the patience of her sisters. She deliberately punched the
|
||||
bear
|
||||
in his face.</p>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid-hover row">
|
||||
<h5 class="col-12 mt-3">Oscar</h5>
|
||||
<div class="col-lg-6 col-12">
|
||||
<figure class="effect-oscar">
|
||||
<img src="../../../assets/images/gallery/9.jpg" alt="img09" />
|
||||
<figcaption>
|
||||
<h2>Warm <span>Oscar</span></h2>
|
||||
<p>Oscar is a decent man. He used to clean porches with pleasure.</p>
|
||||
<a [routerLink]="">View more</a>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="col-lg-6 col-12">
|
||||
<figure class="effect-oscar">
|
||||
<img src="../../../assets/images/gallery/10.jpg" alt="img10" />
|
||||
<figcaption>
|
||||
<h2>Warm <span>Oscar</span></h2>
|
||||
<p>Oscar is a decent man. He used to clean porches with pleasure.</p>
|
||||
<a [routerLink]="">View more</a>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid-hover row">
|
||||
<h5 class="col-12 mt-3">Marley</h5>
|
||||
<div class="col-lg-6 col-12">
|
||||
<figure class="effect-marley">
|
||||
<img src="../../../assets/images/gallery/11.jpg" alt="img11" />
|
||||
<figcaption>
|
||||
<h2>Sweet <span>Marley</span></h2>
|
||||
<p>Marley tried to convince her but she was not interested.</p>
|
||||
<a [routerLink]="">View more</a>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="col-lg-6 col-12">
|
||||
<figure class="effect-marley">
|
||||
<img src="../../../assets/images/gallery/12.jpg" alt="img12" />
|
||||
<figcaption>
|
||||
<h2>Sweet <span>Marley</span></h2>
|
||||
<p>Marley tried to convince her but she was not interested.</p>
|
||||
<a [routerLink]="">View more</a>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid-hover row">
|
||||
<h5 class="col-12 mt-3">Ruby</h5>
|
||||
<div class="col-lg-6 col-12">
|
||||
<figure class="effect-ruby">
|
||||
<img src="../../../assets/images/gallery/13.jpg" alt="img13" />
|
||||
<figcaption>
|
||||
<h2>Glowing <span>Ruby</span></h2>
|
||||
<p>Ruby did not need any help. Everybody knew that.</p>
|
||||
<a [routerLink]="">View more</a>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="col-lg-6 col-12">
|
||||
<figure class="effect-ruby">
|
||||
<img src="../../../assets/images/gallery/14.jpg" alt="img14" />
|
||||
<figcaption>
|
||||
<h2>Glowing <span>Ruby</span></h2>
|
||||
<p>Ruby did not need any help. Everybody knew that.</p>
|
||||
<a [routerLink]="">View more</a>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid-hover row">
|
||||
<h5 class="col-12 mt-3">Roxy</h5>
|
||||
<div class="col-lg-6 col-12">
|
||||
<figure class="effect-roxy">
|
||||
<img src="../../../assets/images/gallery/15.jpg" alt="img15" />
|
||||
<figcaption>
|
||||
<h2>Charming <span>Roxy</span></h2>
|
||||
<p>Roxy was my best friend. She'd cross any border for me.</p>
|
||||
<a [routerLink]="">View more</a>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="col-lg-6 col-12">
|
||||
<figure class="effect-roxy">
|
||||
<img src="../../../assets/images/gallery/1.jpg" alt="img01" />
|
||||
<figcaption>
|
||||
<h2>Charming <span>Roxy</span></h2>
|
||||
<p>Roxy was my best friend. She'd cross any border for me.</p>
|
||||
<a [routerLink]="">View more</a>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid-hover row">
|
||||
<h5 class="col-12 mt-3">Bubba</h5>
|
||||
<div class="col-lg-6 col-12">
|
||||
<figure class="effect-bubba">
|
||||
<img src="../../../assets/images/gallery/2.jpg" alt="img02" />
|
||||
<figcaption>
|
||||
<h2>Fresh <span>Bubba</span></h2>
|
||||
<p>Bubba likes to appear out of thin air.</p>
|
||||
<a [routerLink]="">View more</a>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="col-lg-6 col-12">
|
||||
<figure class="effect-bubba">
|
||||
<img src="../../../assets/images/gallery/16.jpg" alt="img16" />
|
||||
<figcaption>
|
||||
<h2>Fresh <span>Bubba</span></h2>
|
||||
<p>Bubba likes to appear out of thin air.</p>
|
||||
<a [routerLink]="">View more</a>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid-hover row">
|
||||
<h5 class="col-12 mt-3">Romeo</h5>
|
||||
<div class="col-lg-6 col-12">
|
||||
<figure class="effect-romeo">
|
||||
<img src="../../../assets/images/gallery/17.jpg" alt="img17" />
|
||||
<figcaption>
|
||||
<h2>Wild <span>Romeo</span></h2>
|
||||
<p>Romeo never knows what he wants. He seemed to be very cross about something.</p>
|
||||
<a [routerLink]="">View more</a>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="col-lg-6 col-12">
|
||||
<figure class="effect-romeo">
|
||||
<img src="../../../assets/images/gallery/18.jpg" alt="img18" />
|
||||
<figcaption>
|
||||
<h2>Wild <span>Romeo</span></h2>
|
||||
<p>Romeo never knows what he wants. He seemed to be very cross about something.</p>
|
||||
<a [routerLink]="">View more</a>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid-hover row">
|
||||
<h5 class="col-12 mt-3">Dexter</h5>
|
||||
<div class="col-lg-6 col-12">
|
||||
<figure class="effect-dexter">
|
||||
<img src="../../../assets/images/gallery/19.jpg" alt="img19" />
|
||||
<figcaption>
|
||||
<h2>Strange <span>Dexter</span></h2>
|
||||
<p>Dexter had his own strange way. You could watch him training ants.</p>
|
||||
<a [routerLink]="">View more</a>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="col-lg-6 col-12">
|
||||
<figure class="effect-dexter">
|
||||
<img src="../../../assets/images/gallery/12.jpg" alt="img12" />
|
||||
<figcaption>
|
||||
<h2>Strange <span>Dexter</span></h2>
|
||||
<p>Dexter had his own strange way. You could watch him training ants.</p>
|
||||
<a [routerLink]="">View more</a>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid-hover row">
|
||||
<h5 class="col-12 mt-3">Sarah</h5>
|
||||
<div class="col-lg-6 col-12">
|
||||
<figure class="effect-sarah">
|
||||
<img src="../../../assets/images/gallery/13.jpg" alt="img13" />
|
||||
<figcaption>
|
||||
<h2>Free <span>Sarah</span></h2>
|
||||
<p>Sarah likes to watch clouds. She's quite depressed.</p>
|
||||
<a [routerLink]="">View more</a>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="col-lg-6 col-12">
|
||||
<figure class="effect-sarah">
|
||||
<img src="../../../assets/images/gallery/20.jpg" alt="img20" />
|
||||
<figcaption>
|
||||
<h2>Free <span>Sarah</span></h2>
|
||||
<p>Sarah likes to watch clouds. She's quite depressed.</p>
|
||||
<a [routerLink]="">View more</a>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid-hover row">
|
||||
<h5 class="col-12 mt-3">Chico</h5>
|
||||
<div class="col-lg-6 col-12">
|
||||
<figure class="effect-chico">
|
||||
<img src="../../../assets/images/gallery/15.jpg" alt="img15" />
|
||||
<figcaption>
|
||||
<h2>Silly <span>Chico</span></h2>
|
||||
<p>Chico's main fear was missing the morning bus.</p>
|
||||
<a [routerLink]="">View more</a>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="col-lg-6 col-12">
|
||||
<figure class="effect-chico">
|
||||
<img src="../../../assets/images/gallery/4.jpg" alt="img04" />
|
||||
<figcaption>
|
||||
<h2>Silly <span>Chico</span></h2>
|
||||
<p>Chico's main fear was missing the morning bus.</p>
|
||||
<a [routerLink]="">View more</a>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid-hover row">
|
||||
<h5 class="col-12 mt-3">Milo</h5>
|
||||
<div class="col-lg-6 col-12">
|
||||
<figure class="effect-milo">
|
||||
<img src="../../../assets/images/gallery/11.jpg" alt="img11" />
|
||||
<figcaption>
|
||||
<h2>Faithful <span>Milo</span></h2>
|
||||
<p>Milo went to the woods. He took a fun ride and never came back.</p>
|
||||
<a [routerLink]="">View more</a>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="col-lg-6 col-12">
|
||||
<figure class="effect-milo">
|
||||
<img src="../../../assets/images/gallery/3.jpg" alt="img03" />
|
||||
<figcaption>
|
||||
<h2>Faithful <span>Milo</span></h2>
|
||||
<p>Milo went to the woods. He took a fun ride and never came back.</p>
|
||||
<a [routerLink]="">View more</a>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</ng-container>
|
||||
</m-card>
|
||||
<!--/ Image grid -->
|
||||
</section>
|
||||
<!--/ Hover Effects -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- END: Content-->
|
||||
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
|
||||
|
||||
import { HoverEffectComponent } from './hover-effect.component';
|
||||
|
||||
describe('HoverEffectComponent', () => {
|
||||
let component: HoverEffectComponent;
|
||||
let fixture: ComponentFixture<HoverEffectComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ HoverEffectComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(HoverEffectComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,58 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { NgBlockUI, BlockUI } from 'ng-block-ui';
|
||||
|
||||
@Component({
|
||||
selector: 'app-hover-effect',
|
||||
templateUrl: './hover-effect.component.html',
|
||||
styleUrls: ['./hover-effect.component.css']
|
||||
})
|
||||
export class HoverEffectComponent implements OnInit {
|
||||
options = {
|
||||
close: true,
|
||||
expand: false,
|
||||
minimize: false,
|
||||
reload: true
|
||||
};
|
||||
imageoptions = {
|
||||
close: true,
|
||||
expand: true,
|
||||
minimize: true,
|
||||
reload: true
|
||||
};
|
||||
public breadcrumb: any;
|
||||
|
||||
@BlockUI('hoverEffects') blockUIHoverEffects: NgBlockUI;
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
this.breadcrumb = {
|
||||
'mainlabel': 'Gallery Hover Effects',
|
||||
'links': [
|
||||
{
|
||||
'name': 'Home',
|
||||
'isLink': true,
|
||||
'link': '/dashboard/sales'
|
||||
},
|
||||
{
|
||||
'name': 'Gallery',
|
||||
'isLink': true,
|
||||
'link': ''
|
||||
},
|
||||
{
|
||||
'name': 'Gallery Hover Effects',
|
||||
'isLink': false
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
reloadHoverEffects() {
|
||||
this.blockUIHoverEffects.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUIHoverEffects.stop();
|
||||
}, 2500);
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
:host ::ng-deep .block-ui-wrapper {
|
||||
background: rgba(255, 249, 249, 0.5) !important;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1224px) {
|
||||
.img-thumbnail {
|
||||
width: 33.33% !important;
|
||||
}
|
||||
}
|
||||
|
||||
:host ::ng-deep .card .card {
|
||||
margin-bottom: auto;
|
||||
}
|
||||
|
||||
:host ::ng-deep img {
|
||||
max-width: 100% !important;
|
||||
padding: .25rem;
|
||||
background-color: #F4F5FA;
|
||||
border: 1px solid #626E82;
|
||||
border-radius: .25rem;
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
<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">
|
||||
<!-- Image grid -->
|
||||
<section id="image-grid" class="card" *blockUI="'masonryImageGallery'; message: 'Loading'">
|
||||
<m-card [options]="imageoptions" (reloadFunction)="reloadMasonryImageGallery($event)">
|
||||
<ng-container mCardHeaderTitle>
|
||||
Masonry image gallery
|
||||
</ng-container>
|
||||
<ng-container mCardContent>
|
||||
<div class="card-body">
|
||||
<div class="card-text">
|
||||
<p>Masonry Image gallery grid with photo-swipe integration. Auto arrange images based on device screen
|
||||
size.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="masonry-grid my-gallery mx-1" itemscope itemtype="http://schema.org/ImageGallery">
|
||||
<ngx-masonry [options]="masonryOptions" [width]="330" [useImagesLoaded]="true">
|
||||
<div ngxMasonryItem class="masonry-item" *ngFor="let picture of image" class="masonry-item">
|
||||
<img src="{{picture}}" width="330">
|
||||
</div>
|
||||
</ngx-masonry>
|
||||
</div>
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</section>
|
||||
|
||||
<!--/ Image grid -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
|
||||
|
||||
import { MasonryGalleryComponent } from './masonry-gallery.component';
|
||||
|
||||
describe('MasonryGalleryComponent', () => {
|
||||
let component: MasonryGalleryComponent;
|
||||
let fixture: ComponentFixture<MasonryGalleryComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ MasonryGalleryComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(MasonryGalleryComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,82 @@
|
||||
import { Component, OnInit, ViewChild } from '@angular/core';
|
||||
import { NgxMasonryOptions, NgxMasonryComponent } from 'ngx-masonry';
|
||||
import { NgBlockUI, BlockUI } from 'ng-block-ui';
|
||||
@Component({
|
||||
selector: 'app-masonry-gallery',
|
||||
templateUrl: './masonry-gallery.component.html',
|
||||
styleUrls: ['./masonry-gallery.component.css']
|
||||
})
|
||||
export class MasonryGalleryComponent implements OnInit {
|
||||
|
||||
options = {
|
||||
close: true,
|
||||
expand: false,
|
||||
minimize: false,
|
||||
reload: true
|
||||
};
|
||||
imageoptions = {
|
||||
close: true,
|
||||
expand: true,
|
||||
minimize: true,
|
||||
reload: true
|
||||
};
|
||||
|
||||
@BlockUI('masonryImageGallery') blockUIMasonryImageGallery: NgBlockUI;
|
||||
@ViewChild(NgxMasonryComponent, {static: false})
|
||||
public masonry: NgxMasonryComponent;
|
||||
public breadcrumb: any;
|
||||
public masonryOptions: NgxMasonryOptions = {
|
||||
gutter: 10,
|
||||
resize: true,
|
||||
initLayout: true,
|
||||
fitWidth: true
|
||||
};
|
||||
image = [
|
||||
'../../../../../assets/images/portfolio/width-600/portfolio-10.jpg',
|
||||
'../../../../../assets/images/portfolio/width-600/portfolio-8.jpg',
|
||||
'../../../../../assets/images/portfolio/width-600/portfolio-21.jpg',
|
||||
'../../../../../assets/images/portfolio/width-600/portfolio-14.jpg',
|
||||
'../../../../../assets/images/portfolio/width-600/portfolio-1.jpg',
|
||||
'../../../../../assets/images/portfolio/width-600/portfolio-3.jpg',
|
||||
'../../../../../assets/images/portfolio/width-600/portfolio-4.jpg',
|
||||
'../../../../../assets/images/portfolio/width-600/portfolio-2.jpg',
|
||||
'../../../../../assets/images/portfolio/width-600/portfolio-6.jpg',
|
||||
'../../../../../assets/images/portfolio/width-600/portfolio-22.jpg',
|
||||
'../../../../../assets/images/portfolio/width-600/portfolio-9.jpg',
|
||||
'../../../../../assets/images/portfolio/width-600/portfolio-7.jpg',
|
||||
'../../../../../assets/images/portfolio/width-600/portfolio-26.jpg',
|
||||
'../../../../../assets/images/portfolio/width-600/portfolio-11.jpg',
|
||||
];
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
this.breadcrumb = {
|
||||
'mainlabel': 'Gallery Masonry Grid',
|
||||
'links': [
|
||||
{
|
||||
'name': 'Home',
|
||||
'isLink': true,
|
||||
'link': '/dashboard/sales'
|
||||
},
|
||||
{
|
||||
'name': 'Gallery',
|
||||
'isLink': true,
|
||||
'link': ''
|
||||
},
|
||||
{
|
||||
'name': 'Gallery Masonry Grid',
|
||||
'isLink': false
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
reloadMasonryImageGallery() {
|
||||
this.blockUIMasonryImageGallery.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUIMasonryImageGallery.stop();
|
||||
}, 2500);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
:host ::ng-deep .group {
|
||||
background-color: #EDEDED !important;
|
||||
|
||||
|
||||
}
|
||||
|
||||
:host ::ng-deep .table tbody+tbody {
|
||||
border-top: 0px solid #626e82;
|
||||
}
|
||||
|
||||
:host ::ng-deep .btn-primary {
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
:host ::ng-deep .btn-warning {
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
.show>.dropdown-menu {
|
||||
transform: translate3d(-140px, 0px, 0px) !important;
|
||||
}
|
||||
|
||||
.table_dropdown {
|
||||
top: 40px !important;
|
||||
left: 40px !important;
|
||||
}
|
||||
@@ -0,0 +1,275 @@
|
||||
<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">
|
||||
<section class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-head">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Invoices</h4>
|
||||
<div class="heading-elements">
|
||||
<button class="btn btn-primary btn-sm"><i class="feather ft-plus white"></i> Create Invoice</button>
|
||||
<span ngbDropdown class="dropdown">
|
||||
<button id="btnSearchDrop1" type="button" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="true" class="btn btn-warning btn-sm dropdown-toggle dropdown-menu-right" ngbDropdownToggle><i
|
||||
class="feather ft-download-cloud white"></i></button>
|
||||
<span ngbDropdownMenu aria-labelledby="btnSearchDrop1" class="dropdown-menu mt-1 dropdown-menu-right">
|
||||
<a [routerLink]="" class="dropdown-item"><i class="la la-calendar"></i> Due Date</a>
|
||||
<a [routerLink]="" class="dropdown-item"><i class="la la-random"></i> Priority </a>
|
||||
<a [routerLink]="" class="dropdown-item"><i class="la la-bar-chart"></i> Balance Due</a>
|
||||
<a [routerLink]="" class="dropdown-item"><i class="la la-user"></i> Assign to</a>
|
||||
</span>
|
||||
</span>
|
||||
<button class="btn btn-success btn-sm"><i class="feather ft-settings white"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<!-- Invoices List table -->
|
||||
<div class="table-responsive">
|
||||
<table id="invoices-list"
|
||||
class="table table-white-space table-bordered row-grouping display no-wrap icheck table-middle">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Date</th>
|
||||
<th>Invoice #</th>
|
||||
<th>Order No</th>
|
||||
<th>Customer Name</th>
|
||||
<th>Due</th>
|
||||
<th>Amount</th>
|
||||
<th>Balance Due</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="group">
|
||||
<td><span class="badge badge-success badge-lg">Paid</span></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr *ngFor="let invoice of INVOICE; index as i">
|
||||
<td>{{ invoice.date }} </td>
|
||||
<td>{{ invoice.invoice }}</td>
|
||||
<td>{{ invoice.orderno }}</td>
|
||||
<td>{{ invoice.customername }}</td>
|
||||
<td>{{ invoice.due }}</td>
|
||||
<td>{{ invoice.amount }}</td>
|
||||
<td>{{ invoice.balancedue }}</td>
|
||||
<td>
|
||||
<!-- <button id="btnSearchDrop2" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" > -->
|
||||
<span class="dropdown" ngbDropdown>
|
||||
<a [routerLink]="" id="btnSearchDrop27" ngbDropdownToggle
|
||||
class="btn btn-primary dropdown-toggle dropdown-menu-right"><i
|
||||
class="feather ft-settings"></i></a>
|
||||
<span ngbDropdownMenu aria-labelledby="dropdownBasic1" class="table_dropdown">
|
||||
<a [routerLink]="" class="dropdown-item"><i class="la la-eye"></i>
|
||||
Open Task</a>
|
||||
<a [routerLink]="" class="dropdown-item"><i class="la la-pencil"></i>Edit Task</a>
|
||||
<a [routerLink]="" class="dropdown-item"><i class="la la-check"></i>
|
||||
Complete Task</a>
|
||||
<a [routerLink]="" class="dropdown-item"><i class="feather ft-upload"></i>
|
||||
Assign To</a>
|
||||
<a [routerLink]="" class="dropdown-item"><i class="la la-trash"></i>
|
||||
Delete Task</a>
|
||||
</span>
|
||||
</span>
|
||||
<!-- </button> -->
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody>
|
||||
<tr class="group">
|
||||
<td><span class="badge badge-warning badge-lg">Overdue By 1-15 Days
|
||||
</span></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr *ngFor="let invoice of INVOICE1; index as i">
|
||||
<td>{{ invoice.date }} </td>
|
||||
<td>{{ invoice.invoice }}</td>
|
||||
<td>{{ invoice.orderno }}</td>
|
||||
<td>{{ invoice.customername }}</td>
|
||||
<td>{{ invoice.due }}</td>
|
||||
<td>{{ invoice.amount }}</td>
|
||||
<td>{{ invoice.balancedue }}</td>
|
||||
<td>
|
||||
<!-- <button id="btnSearchDrop2" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" > -->
|
||||
<span class="dropdown" ngbDropdown>
|
||||
<a [routerLink]="" id="btnSearchDrop27" ngbDropdownToggle
|
||||
class="btn btn-primary dropdown-toggle dropdown-menu-right"><i
|
||||
class="feather ft-settings"></i></a>
|
||||
<span ngbDropdownMenu aria-labelledby="dropdownBasic1" class="table_dropdown">
|
||||
<a [routerLink]="" class="dropdown-item"><i class="la la-eye"></i>
|
||||
Open Task</a>
|
||||
<a [routerLink]="" class="dropdown-item"><i class="la la-pencil"></i>Edit Task</a>
|
||||
<a [routerLink]="" class="dropdown-item"><i class="la la-check"></i>
|
||||
Complete Task</a>
|
||||
<a [routerLink]="" class="dropdown-item"><i class="feather ft-upload"></i>
|
||||
Assign To</a>
|
||||
<a [routerLink]="" class="dropdown-item"><i class="la la-trash"></i>
|
||||
Delete Task</a>
|
||||
</span>
|
||||
</span>
|
||||
<!-- </button> -->
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody>
|
||||
<tr class="group">
|
||||
<td><span class="badge badge-warning badge-lg">Overdue By 16-30 Days
|
||||
</span></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr *ngFor="let invoice of INVOICE2; index as i">
|
||||
|
||||
<td>{{ invoice.date }} </td>
|
||||
<td>{{ invoice.invoice }}</td>
|
||||
<td>{{ invoice.orderno }}</td>
|
||||
<td>{{ invoice.customername }}</td>
|
||||
<td>{{ invoice.due }}</td>
|
||||
<td>{{ invoice.amount }}</td>
|
||||
<td>{{ invoice.balancedue }}</td>
|
||||
<td>
|
||||
<span class="dropdown" ngbDropdown>
|
||||
<a [routerLink]="" id="btnSearchDrop27" ngbDropdownToggle
|
||||
class="btn btn-primary dropdown-toggle dropdown-menu-right"><i
|
||||
class="feather ft-settings"></i></a>
|
||||
<span ngbDropdownMenu aria-labelledby="dropdownBasic1" class="table_dropdown">
|
||||
<a [routerLink]="" class="dropdown-item"><i class="la la-eye"></i>
|
||||
Open Task</a>
|
||||
<a [routerLink]="" class="dropdown-item"><i class="la la-pencil"></i>Edit Task</a>
|
||||
<a [routerLink]="" class="dropdown-item"><i class="la la-check"></i>
|
||||
Complete Task</a>
|
||||
<a [routerLink]="" class="dropdown-item"><i class="feather ft-upload"></i>
|
||||
Assign To</a>
|
||||
<a [routerLink]="" class="dropdown-item"><i class="la la-trash"></i>
|
||||
Delete Task</a>
|
||||
</span>
|
||||
</span>
|
||||
<!-- </button> -->
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody>
|
||||
<tr class="group">
|
||||
<td><span class="badge badge-danger badge-lg">Overdue By 31-45 Days</span></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr *ngFor="let invoice of INVOICE3; index as i">
|
||||
|
||||
<td>{{ invoice.date }} </td>
|
||||
<td>{{ invoice.invoice }}</td>
|
||||
<td>{{ invoice.orderno }}</td>
|
||||
<td>{{ invoice.customername }}</td>
|
||||
<td>{{ invoice.due }}</td>
|
||||
<td>{{ invoice.amount }}</td>
|
||||
<td>{{ invoice.balancedue }}</td>
|
||||
<td>
|
||||
<span class="dropdown" ngbDropdown>
|
||||
<a [routerLink]="" id="btnSearchDrop27" ngbDropdownToggle
|
||||
class="btn btn-primary dropdown-toggle dropdown-menu-right"><i
|
||||
class="feather ft-settings"></i></a>
|
||||
<span ngbDropdownMenu aria-labelledby="dropdownBasic1" class="table_dropdown">
|
||||
<a [routerLink]="" class="dropdown-item"><i class="la la-eye"></i>
|
||||
Open Task</a>
|
||||
<a [routerLink]="" class="dropdown-item"><i class="la la-pencil"></i>Edit Task</a>
|
||||
<a [routerLink]="" class="dropdown-item"><i class="la la-check"></i>
|
||||
Complete Task</a>
|
||||
<a [routerLink]="" class="dropdown-item"><i class="feather ft-upload"></i>
|
||||
Assign To</a>
|
||||
<a [routerLink]="" class="dropdown-item"><i class="la la-trash"></i>
|
||||
Delete Task</a>
|
||||
</span>
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody>
|
||||
<tr class="group">
|
||||
<td><span class="badge badge-danger badge-lg">Overdue By 45+ Days</span></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr *ngFor="let invoice of INVOICE4; index as i">
|
||||
|
||||
<td>{{ invoice.date }} </td>
|
||||
<td>{{ invoice.invoice }}</td>
|
||||
<td>{{ invoice.orderno }}</td>
|
||||
<td>{{ invoice.customername }}</td>
|
||||
<td>{{ invoice.due }}</td>
|
||||
<td>{{ invoice.amount }}</td>
|
||||
<td>{{ invoice.balancedue }}</td>
|
||||
<td>
|
||||
<span class="dropdown" ngbDropdown>
|
||||
<a [routerLink]="" id="btnSearchDrop27" ngbDropdownToggle
|
||||
class="btn btn-primary dropdown-toggle dropdown-menu-right"><i
|
||||
class="feather ft-settings"></i></a>
|
||||
<span ngbDropdownMenu aria-labelledby="dropdownBasic1" class="table_dropdown">
|
||||
<a [routerLink]="" class="dropdown-item"><i class="la la-eye"></i>
|
||||
Open Task</a>
|
||||
<a [routerLink]="" class="dropdown-item"><i class="la la-pencil"></i>Edit Task</a>
|
||||
<a [routerLink]="" class="dropdown-item"><i class="la la-check"></i>
|
||||
Complete Task</a>
|
||||
<a [routerLink]="" class="dropdown-item"><i class="feather ft-upload"></i>
|
||||
Assign To</a>
|
||||
<a [routerLink]="" class="dropdown-item"><i class="la la-trash"></i>
|
||||
Delete Task</a>
|
||||
</span>
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Date</th>
|
||||
<th>Invoice #</th>
|
||||
<th>Order No</th>
|
||||
<th>Customer Name</th>
|
||||
<th>Due</th>
|
||||
<th>Amount</th>
|
||||
<th>Balance Due</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
<!--/ Invoices table -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
|
||||
|
||||
import { InvoiceListComponent } from './invoice-list.component';
|
||||
|
||||
describe('InvoiceListComponent', () => {
|
||||
let component: InvoiceListComponent;
|
||||
let fixture: ComponentFixture<InvoiceListComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ InvoiceListComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(InvoiceListComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,111 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { TableApiService } from 'src/app/_services/table-api.service';
|
||||
|
||||
// declare var require: any;
|
||||
// const data: any = require('../../../../../assets/data/invoice/invoicelist/invoicetable.json');
|
||||
|
||||
interface Invoice {
|
||||
date: string;
|
||||
invoice: string;
|
||||
orderno: string;
|
||||
customername: string;
|
||||
due: string;
|
||||
amount: string;
|
||||
balancedue: string;
|
||||
actions: string;
|
||||
}
|
||||
interface Invoice1 {
|
||||
date: string;
|
||||
invoice: string;
|
||||
orderno: string;
|
||||
customername: string;
|
||||
due: string;
|
||||
amount: string;
|
||||
balancedue: string;
|
||||
actions: string;
|
||||
}
|
||||
interface Invoice2 {
|
||||
date: string;
|
||||
invoice: string;
|
||||
orderno: string;
|
||||
customername: string;
|
||||
due: string;
|
||||
amount: string;
|
||||
balancedue: string;
|
||||
actions: string;
|
||||
}
|
||||
interface Invoice3 {
|
||||
date: string;
|
||||
invoice: string;
|
||||
orderno: string;
|
||||
customername: string;
|
||||
due: string;
|
||||
amount: string;
|
||||
balancedue: string;
|
||||
actions: string;
|
||||
}
|
||||
interface Invoice4 {
|
||||
date: string;
|
||||
invoice: string;
|
||||
orderno: string;
|
||||
customername: string;
|
||||
due: string;
|
||||
amount: string;
|
||||
balancedue: string;
|
||||
actions: string;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-invoice-list',
|
||||
templateUrl: './invoice-list.component.html',
|
||||
styleUrls: ['./invoice-list.component.css']
|
||||
})
|
||||
export class InvoiceListComponent implements OnInit {
|
||||
public breadcrumb: any;
|
||||
data: any;
|
||||
INVOICE: any;
|
||||
INVOICE1: any;
|
||||
INVOICE2: any;
|
||||
INVOICE3: any;
|
||||
INVOICE4: any;
|
||||
allRowsSelected: boolean;
|
||||
// invoices = this.INVOICE;
|
||||
// invoices1 = this.INVOICE1;
|
||||
// invoices2 = this.INVOICE2;
|
||||
// invoices3 = this.INVOICE3;
|
||||
// invoices4 = this.INVOICE4;
|
||||
getTabledata() {
|
||||
this.INVOICE = this.data['invoice'];
|
||||
this.INVOICE1 = this.data['invoice1'];
|
||||
this.INVOICE2 = this.data['invoice2'];
|
||||
this.INVOICE3 = this.data['invoice3'];
|
||||
this.INVOICE4 = this.data['invoice4'];
|
||||
}
|
||||
constructor( private tableApiservice: TableApiService) { }
|
||||
|
||||
ngOnInit() {
|
||||
this.breadcrumb = {
|
||||
'mainlabel': 'Invoice List',
|
||||
'links': [
|
||||
{
|
||||
'name': 'Home',
|
||||
'isLink': true,
|
||||
'link': '/dashboard/sales'
|
||||
},
|
||||
{
|
||||
'name': 'Invoice',
|
||||
'isLink': true,
|
||||
'link': ''
|
||||
},
|
||||
{
|
||||
'name': 'Invoice List',
|
||||
'isLink': false
|
||||
}
|
||||
]
|
||||
};
|
||||
this.tableApiservice.getInvoiceTableData().subscribe(Response => {
|
||||
this.data = Response;
|
||||
this.getTabledata();
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
|
||||
:host ::ng-deep .block-ui-wrapper {
|
||||
background: rgba(255, 249, 249, 0.5) !important;
|
||||
}
|
||||
@@ -0,0 +1,113 @@
|
||||
<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">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Sales and Expenses</h4>
|
||||
<div class="heading-elements">
|
||||
<div ngbDropdown class="dropdown">
|
||||
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" id="dropdownMenuButton"
|
||||
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" ngbDropdownToggle>
|
||||
This Fiscal Year
|
||||
</button>
|
||||
<div ngbDropdownMenu class="dropdown-menu" aria-labelledby="dropdownMenuButton">
|
||||
<a class="dropdown-item" [routerLink]="">Previous Fiscal Year</a>
|
||||
<a class="dropdown-item" [routerLink]="">Last 12 Months</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body overflow-hidden row">
|
||||
<div class="col-md-9 col-sm-12 border-right-grey border-right-lighten-2">
|
||||
<div echarts [options]="chartOption" class="height-300 echart-container"></div>
|
||||
</div>
|
||||
<div class="col-md-3 col-sm-12">
|
||||
<div class="list-group">
|
||||
<a [routerLink]="" class="list-group-item list-group-item-action">
|
||||
<h5 class="list-group-item-heading">$ 12080.00</h5>
|
||||
<p class="list-group-item-text primary">Total Sales</p>
|
||||
</a>
|
||||
<a [routerLink]="" class="list-group-item list-group-item-action">
|
||||
<h5 class="list-group-item-heading">$ 8500.00</h5>
|
||||
<p class="list-group-item-text success">Total Receipts</p>
|
||||
</a>
|
||||
<a [routerLink]="" class="list-group-item list-group-item-action">
|
||||
<h5 class="list-group-item-heading">$ 560.00</h5>
|
||||
<p class="list-group-item-text warning">Total Expenses</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/ Sales and Expenses -->
|
||||
<div class="row" matchHeight="card">
|
||||
<!-- Your Top Expenses -->
|
||||
<div class="col-lg-6 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Your Top Expenses</h4>
|
||||
<div class="heading-elements">
|
||||
<div ngbDropdown class="dropdown">
|
||||
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" id="dropdownMenuButton2"
|
||||
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" ngbDropdownToggle>
|
||||
This Fiscal Year
|
||||
</button>
|
||||
<div ngbDropdownMenu class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
|
||||
<a class="dropdown-item" [routerLink]="">Previous Fiscal Year</a>
|
||||
<a class="dropdown-item" [routerLink]="">Last 12 Months</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body ">
|
||||
<div echarts [options]="ExpenseschartOption" class="height-250 echart-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Your Top Expenses -->
|
||||
<!-- Sales, Receipts and Dues -->
|
||||
<div class="col-lg-6 col-md-12" *blockUI="'salesRecieptsDues'; message: 'Loading'">
|
||||
<m-card [options]="options" (reloadFunction)="reloadSalesRecieptsDues($event)">
|
||||
<ng-container mCardHeaderTitle>
|
||||
Sales, Receipts and Dues
|
||||
</ng-container>
|
||||
|
||||
<ng-container mCardBody>
|
||||
<div class="px-0 py-0">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>Sales</th>
|
||||
<th>Receipts</th>
|
||||
<th>Due</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let element of Sales; index as i">
|
||||
<td><b>{{ element.name }}</b></td>
|
||||
<td>{{ element.sales }} </td>
|
||||
<td>{{ element.receipts }}</td>
|
||||
<td>{{ element.due }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</div>
|
||||
<!-- Sales, Receipts and Dues -->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
|
||||
|
||||
import { InvoiceSummaryComponent } from './invoice-summary.component';
|
||||
|
||||
describe('InvoiceSummaryComponent', () => {
|
||||
let component: InvoiceSummaryComponent;
|
||||
let fixture: ComponentFixture<InvoiceSummaryComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ InvoiceSummaryComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(InvoiceSummaryComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,181 @@
|
||||
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 Sales {
|
||||
name: string;
|
||||
sales: string;
|
||||
receipts: string;
|
||||
due: string;
|
||||
|
||||
}
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-invoice-summary',
|
||||
templateUrl: './invoice-summary.component.html',
|
||||
styleUrls: ['./invoice-summary.component.css']
|
||||
})
|
||||
export class InvoiceSummaryComponent implements OnInit {
|
||||
data: any;
|
||||
chartOption: any;
|
||||
Sales: any;
|
||||
ExpenseschartOption: any;
|
||||
public breadcrumb: any;
|
||||
constructor(private chartApiservice: ChartApiService) { }
|
||||
@BlockUI('totalReceivables') blockUITotalReceivables: NgBlockUI;
|
||||
@BlockUI('salesRecieptsDues') blockUISalesRecieptsDues: NgBlockUI;
|
||||
getInvoicechart() {
|
||||
this.Sales = this.data['sales'];
|
||||
this.chartOption = {
|
||||
grid: {
|
||||
x: 40,
|
||||
x2: 40,
|
||||
y: 35,
|
||||
y2: 25
|
||||
},
|
||||
|
||||
// Add tooltip
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
enterable: false,
|
||||
},
|
||||
|
||||
// Add legend
|
||||
legend: {
|
||||
data: ['Total Sales', 'Total Receipts', 'Total Expenses']
|
||||
},
|
||||
|
||||
// Add custom colors
|
||||
color: ['#3BAFDA', '#37BC9B', '#F6BB42'],
|
||||
|
||||
// Horizontal axis
|
||||
xAxis: [{
|
||||
type: 'category',
|
||||
data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
|
||||
}],
|
||||
|
||||
// Vertical axis
|
||||
yAxis: [{
|
||||
type: 'value'
|
||||
}],
|
||||
|
||||
// Add series
|
||||
series: [
|
||||
{
|
||||
name: 'Total Sales',
|
||||
type: 'bar',
|
||||
data: this.data.TotalSales.TotalSales[0],
|
||||
},
|
||||
{
|
||||
name: 'Total Receipts',
|
||||
type: 'bar',
|
||||
data: this.data.TotalReceipts.TotalReceipts[0],
|
||||
},
|
||||
{
|
||||
name: 'Total Expenses',
|
||||
type: 'bar',
|
||||
data: this.data.TotalExpenses.TotalExpenses[0],
|
||||
}
|
||||
]
|
||||
};
|
||||
this.ExpenseschartOption = {
|
||||
legend: {
|
||||
orient: 'horizontal',
|
||||
x: 'center',
|
||||
data: ['Internet', 'Infrastructure', 'Party', 'Assets', 'Electricity']
|
||||
},
|
||||
|
||||
// Add custom colors
|
||||
color: ['#FECEA8', '#FF847C', '#E84A5F', '#2A363B', '#99B898'],
|
||||
|
||||
// Display toolbox
|
||||
toolbox: {
|
||||
show: true,
|
||||
orient: 'vertical',
|
||||
},
|
||||
|
||||
// Enable drag recalculate
|
||||
// calculable: true,
|
||||
|
||||
// Add series
|
||||
series: [
|
||||
{
|
||||
name: 'Browsers',
|
||||
type: 'pie',
|
||||
radius: ['50%', '70%'],
|
||||
center: ['50%', '57.5%'],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
show: true
|
||||
},
|
||||
labelLine: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
formatter: '{b}' + '\n\n' + '{c} ({d}%)',
|
||||
position: 'center',
|
||||
textStyle: {
|
||||
fontSize: '17',
|
||||
fontWeight: '500'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{ value: 335, name: 'Internet' },
|
||||
{ value: 1548, name: 'Infrastructure' },
|
||||
{ value: 135, name: 'Party' },
|
||||
{ value: 234, name: 'Assets' },
|
||||
{ value: 650, name: 'Electricity' }
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
ngOnInit() {
|
||||
this.breadcrumb = {
|
||||
'mainlabel': 'Invoice Summary',
|
||||
'links': [
|
||||
{
|
||||
'name': 'Home',
|
||||
'isLink': true,
|
||||
'link': '/dashboard/sales'
|
||||
},
|
||||
{
|
||||
'name': 'Invoice',
|
||||
'isLink': true,
|
||||
'link': ''
|
||||
},
|
||||
{
|
||||
'name': 'Invoice Summary',
|
||||
'isLink': false
|
||||
}
|
||||
]
|
||||
};
|
||||
this.chartApiservice.getInvoiceData().subscribe(Response => {
|
||||
this.data = Response;
|
||||
this.getInvoicechart();
|
||||
});
|
||||
}
|
||||
|
||||
reloadTotalReceivables() {
|
||||
this.blockUITotalReceivables.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUITotalReceivables.stop();
|
||||
}, 2500);
|
||||
}
|
||||
|
||||
reloadSalesRecieptsDues() {
|
||||
this.blockUISalesRecieptsDues.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUISalesRecieptsDues.stop();
|
||||
}, 2500);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,198 @@
|
||||
<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">
|
||||
<section class="card">
|
||||
<div id="invoice-template" class="card-body">
|
||||
<!-- Invoice Company Details -->
|
||||
<div id="invoice-company-details" class="row">
|
||||
<div class="col-md-6 col-sm-12 text-center text-sm-left">
|
||||
<div class="media row">
|
||||
<div class="col-12 col-sm-3 col-xl-2">
|
||||
<img src="../../../assets/images/logo/logo-80x80.png" alt="company logo" class="" />
|
||||
</div>
|
||||
<div class="col-12 col-sm-9 col-xl-10">
|
||||
<div class="media-body">
|
||||
<ul class="ml-2 px-0 list-unstyled">
|
||||
<li class="text-bold-800">Modern Creative Studio</li>
|
||||
<li>4025 Oak Avenue,</li>
|
||||
<li>Melbourne,</li>
|
||||
<li>Florida 32940,</li>
|
||||
<li>USA</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-sm-12 text-center text-md-right">
|
||||
<h2>INVOICE</h2>
|
||||
<p class="pb-3"># INV-001001</p>
|
||||
<ul class="px-0 list-unstyled">
|
||||
<li>Balance Due</li>
|
||||
<li class="lead text-bold-800">$ 12,000.00</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!--/ Invoice Company Details -->
|
||||
|
||||
<!-- Invoice Customer Details -->
|
||||
<div id="invoice-customer-details" class="row pt-2">
|
||||
<div class="col-sm-12 text-center text-md-left">
|
||||
<p class="text-muted">Bill To</p>
|
||||
</div>
|
||||
<div class="col-md-6 col-sm-12 text-center text-md-left">
|
||||
<ul class="px-0 list-unstyled">
|
||||
<li class="text-bold-800">Mr. Bret Lezama</li>
|
||||
<li>4879 Westfall Avenue,</li>
|
||||
<li>Albuquerque,</li>
|
||||
<li>New Mexico-87102.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md-6 col-sm-12 text-center text-md-right">
|
||||
<p><span class="text-muted">Invoice Date :</span> 06/05/2017</p>
|
||||
<p><span class="text-muted">Terms :</span> Due on Receipt</p>
|
||||
<p><span class="text-muted">Due Date :</span> 10/05/2017</p>
|
||||
</div>
|
||||
</div>
|
||||
<!--/ Invoice Customer Details -->
|
||||
|
||||
<!-- Invoice Items Details -->
|
||||
<div id="invoice-items-details" class="pt-2">
|
||||
<div class="row">
|
||||
<div class="table-responsive col-sm-12">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Item & Description</th>
|
||||
<th class="text-right">Rate</th>
|
||||
<th class="text-right">Hours</th>
|
||||
<th class="text-right">Amount</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">1</th>
|
||||
<td>
|
||||
<p>Create PSD for mobile APP</p>
|
||||
<p class="text-muted">Simply dummy text of the printing and typesetting industry.</p>
|
||||
</td>
|
||||
<td class="text-right">$ 20.00/hr</td>
|
||||
<td class="text-right">120</td>
|
||||
<td class="text-right">$ 2400.00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">2</th>
|
||||
<td>
|
||||
<p>iOS Application Development</p>
|
||||
<p class="text-muted">Pellentesque maximus feugiat lorem at cursus.</p>
|
||||
</td>
|
||||
<td class="text-right">$ 25.00/hr</td>
|
||||
<td class="text-right">260</td>
|
||||
<td class="text-right">$ 6500.00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td>
|
||||
<p>WordPress Template Development</p>
|
||||
<p class="text-muted">Vestibulum euismod est eu elit convallis.</p>
|
||||
</td>
|
||||
<td class="text-right">$ 20.00/hr</td>
|
||||
<td class="text-right">300</td>
|
||||
<td class="text-right">$ 6000.00</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-7 col-sm-12 text-center text-md-left">
|
||||
<p class="lead">Payment Methods:</p>
|
||||
<div class="row">
|
||||
<div class="col-md-8">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-borderless table-sm">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Bank name:</td>
|
||||
<td class="text-right">ABC Bank, USA</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Acc name:</td>
|
||||
<td class="text-right">Amanda Orton</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>IBAN:</td>
|
||||
<td class="text-right">FGS165461646546AA</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>SWIFT code:</td>
|
||||
<td class="text-right">BTNPP34</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-5 col-sm-12">
|
||||
<p class="lead">Total due</p>
|
||||
<div class="table-responsive">
|
||||
<table class="table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Sub Total</td>
|
||||
<td class="text-right">$ 14,900.00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>TAX (12%)</td>
|
||||
<td class="text-right">$ 1,788.00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-bold-800">Total</td>
|
||||
<td class="text-bold-800 text-right"> $ 16,688.00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Payment Made</td>
|
||||
<td class="pink text-right">(-) $ 4,688.00</td>
|
||||
</tr>
|
||||
<tr class="bg-grey bg-lighten-4">
|
||||
<td class="text-bold-800">Balance Due</td>
|
||||
<td class="text-bold-800 text-right">$ 12,000.00</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<p>Authorized person</p>
|
||||
<img src="../../../assets/images/pages/signature-scan.png" alt="signature" class="height-100" />
|
||||
<h6>Amanda Orton</h6>
|
||||
<p class="text-muted">Managing Director</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Invoice Footer -->
|
||||
<div id="invoice-footer">
|
||||
<div class="row">
|
||||
<div class="col-md-7 col-sm-12">
|
||||
<h6>Terms & Condition</h6>
|
||||
<p>You know, being a test pilot isn't always the healthiest business in the world. We predict too much
|
||||
for the next year and yet far too little for the next 10.</p>
|
||||
</div>
|
||||
<div class="col-md-5 col-sm-12 text-center">
|
||||
<button type="button" class="btn btn-info btn-lg my-1"><i class="la la-paper-plane-o"></i> Send
|
||||
Invoice</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/ Invoice Footer -->
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
|
||||
|
||||
import { InvoiceTemplateComponent } from './invoice-template.component';
|
||||
|
||||
describe('InvoiceTemplateComponent', () => {
|
||||
let component: InvoiceTemplateComponent;
|
||||
let fixture: ComponentFixture<InvoiceTemplateComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ InvoiceTemplateComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(InvoiceTemplateComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,34 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-invoice-template',
|
||||
templateUrl: './invoice-template.component.html',
|
||||
styleUrls: ['./invoice-template.component.css']
|
||||
})
|
||||
export class InvoiceTemplateComponent implements OnInit {
|
||||
public breadcrumb: any;
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
this.breadcrumb = {
|
||||
'mainlabel': 'Invoice Template',
|
||||
'links': [
|
||||
{
|
||||
'name': 'Home',
|
||||
'isLink': true,
|
||||
'link': '/dashboard/sales'
|
||||
},
|
||||
{
|
||||
'name': 'Invoice',
|
||||
'isLink': true,
|
||||
'link': ''
|
||||
},
|
||||
{
|
||||
'name': 'Invoice Template',
|
||||
'isLink': false
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
48
src/app/content/pages/invoice/invoice.module.ts
Normal file
48
src/app/content/pages/invoice/invoice.module.ts
Normal file
@@ -0,0 +1,48 @@
|
||||
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { InvoiceListComponent } from './invoice-list/invoice-list.component';
|
||||
import { InvoiceSummaryComponent } from './invoice-summary/invoice-summary.component';
|
||||
import { InvoiceTemplateComponent } from './invoice-template/invoice-template.component';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
|
||||
import { NgxEchartsModule } from 'ngx-echarts';
|
||||
import { BreadcrumbModule } from 'src/app/_layout/breadcrumb/breadcrumb.module';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { CardModule } from '../../partials/general/card/card.module';
|
||||
import { MatchHeightModule } from '../../partials/general/match-height/match-height.module';
|
||||
import { BlockUIModule } from 'ng-block-ui';
|
||||
import { BlockTemplateComponent } from 'src/app/_layout/blockui/block-template.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [InvoiceListComponent, InvoiceSummaryComponent, InvoiceTemplateComponent],
|
||||
imports: [
|
||||
CommonModule,
|
||||
CardModule,
|
||||
BreadcrumbModule,
|
||||
NgxEchartsModule.forRoot({
|
||||
echarts: () => import('echarts')
|
||||
}),
|
||||
NgbModule,
|
||||
MatchHeightModule,
|
||||
FormsModule,
|
||||
BlockUIModule.forRoot({
|
||||
template: BlockTemplateComponent
|
||||
}),
|
||||
RouterModule.forChild([
|
||||
{
|
||||
path: 'invoice-list',
|
||||
component: InvoiceListComponent
|
||||
},
|
||||
{
|
||||
path: 'invoice-summary',
|
||||
component: InvoiceSummaryComponent
|
||||
},
|
||||
{
|
||||
path: 'invoice-template',
|
||||
component: InvoiceTemplateComponent
|
||||
},
|
||||
]),
|
||||
],
|
||||
schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
|
||||
})
|
||||
export class InvoiceModule { }
|
||||
23
src/app/content/pages/news-feed/news-feed.module.ts
Normal file
23
src/app/content/pages/news-feed/news-feed.module.ts
Normal file
@@ -0,0 +1,23 @@
|
||||
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { NewsFeedComponent } from './news-feed/news-feed.component';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { BreadcrumbModule } from 'src/app/_layout/breadcrumb/breadcrumb.module';
|
||||
import { MatchHeightModule } from '../../partials/general/match-height/match-height.module';
|
||||
|
||||
@NgModule({
|
||||
declarations: [NewsFeedComponent],
|
||||
imports: [
|
||||
CommonModule,
|
||||
BreadcrumbModule,
|
||||
MatchHeightModule,
|
||||
RouterModule.forChild([
|
||||
{
|
||||
path: 'news-feed',
|
||||
component: NewsFeedComponent
|
||||
},
|
||||
]),
|
||||
],
|
||||
schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
|
||||
})
|
||||
export class NewsFeedModule { }
|
||||
@@ -0,0 +1,361 @@
|
||||
<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">
|
||||
<!-- News Feed section starting point -->
|
||||
<section id="news-feed">
|
||||
<div class="row">
|
||||
<div class="col-lg-4 col-md-6">
|
||||
|
||||
<!-- Social Card -->
|
||||
|
||||
<div class="card news-feed-card-bg text-white">
|
||||
<img src="../../../../../assets/images/gallery/17.jpg" alt="" class=" card-img-top img-fluid">
|
||||
<div class="card-img-overlay">
|
||||
<div class="badge badge-danger badge-sm float-left">Social</div>
|
||||
<a [routerLink]="">
|
||||
<h2 class="card-title mt-2 text-white">Social Media, Selfies, and Addiction.
|
||||
</h2>
|
||||
</a>
|
||||
<p class="font-small-3 text-left">Selfie-taking is more than just the taking of a
|
||||
photograph and can include the editing of the colour and contrast, changing backgrounds,
|
||||
and
|
||||
adding other effects. </p>
|
||||
<span class="text-white float-right font-small-1">Oct 10, 9:13am</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-6 col-md-6">
|
||||
|
||||
<!-- Nature Card -->
|
||||
|
||||
<div class="card">
|
||||
<a [routerLink]=""><img src="../../../../../assets/images/gallery/20.jpg" alt=""
|
||||
class="card-img-top img-fluid"></a>
|
||||
<div class="news-feed-overlay
|
||||
"><span
|
||||
class="badge badge-success badge-sm float-right news-feed-badge news-feed-badge-nature position-absolute">Nature</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<a [routerLink]="" class="text-dark">
|
||||
<h6 class="card-title font-small-3"> Why Nature beats Nurture when it comes to success
|
||||
</h6>
|
||||
</a>
|
||||
<span class="float-left font-small-1 text-muted">Oct 1, 3:00pm</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 col-md-6">
|
||||
|
||||
<!-- Real Estate Card -->
|
||||
|
||||
<div class="card">
|
||||
<a [routerLink]=""><img src="../../../../../assets/images/gallery/29.jpg" alt=""
|
||||
class="card-img-top img-fluid"></a>
|
||||
<div class="news-feed-overlay">
|
||||
<span
|
||||
class="badge badge-primary badge-sm news-feed-badge news-feed-badge-real-estate position-absolute">Real
|
||||
Estate
|
||||
</span></div>
|
||||
<div class="card-body">
|
||||
<a [routerLink]="" class="text-dark">
|
||||
<p class="card-title font-small-3">Real Estate In 2030 Will Be Radically Different</p>
|
||||
</a>
|
||||
<span class="float-left font-small-1 text-muted">Oct 4, 10:05am</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-12 col-md-12">
|
||||
|
||||
<!-- Road Trip Card -->
|
||||
|
||||
<div class="card">
|
||||
<a [routerLink]=""><img src="../../../../../assets/images/gallery/2.jpg" alt=""
|
||||
class=" card-img-top img-fluid"></a>
|
||||
<div class="news-feed-overlay
|
||||
"><span
|
||||
class="badge badge-sm badge-primary float-left news-feed-badge news-feed-badge-trip position-absolute">Trip</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<a [routerLink]="">
|
||||
<h6 class="card-title font-medium-1">
|
||||
Magical mystery tour: a road trip through Mexico
|
||||
</h6>
|
||||
</a>
|
||||
<p class="float-left font-small-1 text-muted">Oct 20, 1:00pm</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<div class="row">
|
||||
<div class="col-xl-6 col-lg-6 col-md-6">
|
||||
|
||||
<!-- User Data Card -->
|
||||
|
||||
<div class="card">
|
||||
<a [routerLink]=""><img src="../../../../../assets/images/gallery/34.png" alt=""
|
||||
class="card-img-top img-fluid"></a>
|
||||
<div class="card-body">
|
||||
<a [routerLink]="" class="text-dark">
|
||||
<p class="card-title font-small-3">new portal shows what user data it keeps</p>
|
||||
</a>
|
||||
<div class="text-muted">
|
||||
<p class="float-left text-muted font-small-1">Oct 12, 10:50pm</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-6 col-lg-6 col-md-6">
|
||||
|
||||
<!-- AI Card -->
|
||||
|
||||
<div class="card">
|
||||
<a [routerLink]=""><img src="../../../../../assets/images/gallery/36.png" alt=""
|
||||
class="card-img-top img-fluid"></a>
|
||||
<div class="news-feed-overlay"></div>
|
||||
<div class="card-body">
|
||||
<a [routerLink]="" class="text-dark">
|
||||
<span class="card-title font-small-3">AI On The Job:New Technologies
|
||||
</span>
|
||||
</a>
|
||||
<span class="text-muted">
|
||||
<span class="float-left text-muted font-small-1"> Oct 14, 7:15am </span><button
|
||||
class=" btn news-feed-btn btn-sm float-right btn-round btn-float btn-warning"><i
|
||||
class="feather ft-arrow-right"></i></button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-1">
|
||||
<div class="col-lg-12 col-md-12">
|
||||
|
||||
<!-- Android Card -->
|
||||
|
||||
<div class="card bg-gradient-x-danger mb-1">
|
||||
<div class="card-body">
|
||||
<a [routerLink]="">
|
||||
<h6 class="card-title font-medium-1 text-white">
|
||||
Over 75 percent of Pixel users are on Android Pie
|
||||
</h6>
|
||||
</a>
|
||||
<p class="font-small-2 text-white">
|
||||
It speaks to the huge benefits that Google can bring to devices when it fully
|
||||
controls the hardware and software experience like Apple does
|
||||
<p class="float-left font-small-1 text-white">Oct 15, 12:50pm</p>
|
||||
<span class="badge badge-secondary badge-sm float-right">Android</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xl-6 col-lg-6 col-md-6">
|
||||
|
||||
<!-- Radio Card -->
|
||||
|
||||
<div class="card">
|
||||
<a [routerLink]=""><img src="../../../../../assets/images/gallery/19.jpg" alt=""
|
||||
class="card-img-top img-fluid"></a>
|
||||
<div class="news-feed-overlay
|
||||
"><span
|
||||
class="badge badge-info badge-sm float-right news-feed-badge news-feed-badge-radio position-absolute">Radio</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h6 class="card-title font-small-2">
|
||||
<a href="" class="text-dark">
|
||||
Radio, what's new... someone still loves you
|
||||
</a>
|
||||
</h6>
|
||||
<p class="float-left text-muted font-small-1">Oct 21, 8:50pm</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-6 col-lg-6 col-md-6">
|
||||
<div class="card">
|
||||
<a [routerLink]=""><img src="../../../../../assets/images/gallery/16.jpg" alt=""
|
||||
class="card-img-top img-fluid"></a>
|
||||
<div class="news-feed-overlay"><span
|
||||
class="badge badge-danger badge-sm float-left news-feed-badge news-feed-badge-travel position-absolute">Travel</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<a [routerLink]="">
|
||||
<h6 class="card-title font-small-2">
|
||||
Trains And Anything But Automobiles
|
||||
</h6>
|
||||
</a>
|
||||
<p class="float-left text-muted font-small-1">Oct 25, 7:50pm</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-12 col-md-12">
|
||||
|
||||
<!-- Game Card -->
|
||||
|
||||
<div class="card bg-gradient-x-primary">
|
||||
<div class="card-body">
|
||||
<a [routerLink]="">
|
||||
<h6 class="card-title font-medium-1 text-white">
|
||||
The 13 Scariest Horror Games You Should Play For Halloween
|
||||
</h6>
|
||||
</a>
|
||||
<p class="font-small-3 text-white">
|
||||
Genre classics like Silent Hill 2, Resident Evil Remake, and Dead Space are
|
||||
represented here.There's a lot of horror-related media out right now that isn't
|
||||
just games.
|
||||
</p>
|
||||
<a [routerLink]=""><span class="font-small-2 text-white"><i class="feather ft-heart pr-1"></i><i
|
||||
class="feather ft-share"></i></span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-12">
|
||||
<div class="row">
|
||||
<div class="col-lg-12 col-md-12">
|
||||
|
||||
<!-- List Of Popular News -->
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h6>Popular<span class="float-right"><i class="feather ft-chevron-up"></i></span></h6>
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item news-feed-item-1 pl-2">
|
||||
<a [routerLink]="" class="text-dark"> <span class="font-small-3 news-feed-item-text">Top
|
||||
10 New Rules Of
|
||||
Marketing With
|
||||
Technology To Win</span></a>
|
||||
<span class="font-small-1 text-muted float-right p-md-2 p-sm-2 news-feed-item-text-time">Oct
|
||||
15, 11:00am</span>
|
||||
</li>
|
||||
<li class="list-group-item news-feed-item-img">
|
||||
<a [routerLink]=""><img src="../../../../../assets/images/gallery/18.jpg" alt=""
|
||||
class="img-fluid"></a>
|
||||
</li>
|
||||
<li class="list-group-item news-feed-item-2">
|
||||
<a [routerLink]="" class="text-dark"> <span class="font-small-3 news-feed-item-text">Health
|
||||
benefits of social
|
||||
media: Here's all
|
||||
you need to
|
||||
know</span></a>
|
||||
<span class="font-small-1 text-muted float-right p-md-2 p-sm-2 news-feed-item-text-time">Oct
|
||||
9, 5:00am</span>
|
||||
</li>
|
||||
<li class="list-group-item news-feed-item-3">
|
||||
<a [routerLink]="" class="text-dark"> <span class="font-small-3 news-feed-item-text">5
|
||||
workout apps and
|
||||
exercises to keep you
|
||||
fit this whole
|
||||
year</span></a>
|
||||
<span class="font-small-1 text-muted float-right p-md-2 p-sm-2 news-feed-item-text-time">Oct
|
||||
7, 4:00pm</span>
|
||||
</li>
|
||||
<li class="list-group-item news-feed-item-4">
|
||||
<a [routerLink]="" class="text-dark"> <span class="font-small-3 news-feed-item-text">What
|
||||
next for photography
|
||||
in the new age of
|
||||
smartphones?</span></a>
|
||||
<span class="font-small-1 text-muted float-right p-md-2 p-sm-2 news-feed-item-text-time">Oct
|
||||
4, 11:00am</span>
|
||||
</li>
|
||||
<li class="list-group-item news-feed-item-5">
|
||||
<a [routerLink]="" class="text-dark"> <span class="font-small-3 news-feed-item-text">Photography
|
||||
awards
|
||||
capture life at its wildest</span></a>
|
||||
<span class="font-small-1 text-muted float-right p-md-2 p-sm-2 news-feed-item-text-time">Oct
|
||||
16, 3:00am</span>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<div class="card-footer p-1">
|
||||
<button class="btn btn-outline-success btn-sm mx-auto">Load More</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tech Card -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="card tech-card-bg">
|
||||
<h5 class="card-header font-medium-1">
|
||||
Hong Kong's Tech Dreams Are Becoming a Nightmare
|
||||
<span class="badge badge-success badge-sm float-right">Tech</span>
|
||||
</h5>
|
||||
<div class="card-body">
|
||||
<h6 class="font-small-3 tech-card-text">
|
||||
At the time, Xiaomi Corp., China’s hottest startup, was shopping around for a listing
|
||||
venue. Founder Lei Jun was determined to retain control of the company through this
|
||||
ownership structure.Hong Kong had already missed out on Alibaba Group Holding Ltd.The
|
||||
situation was clear: Allow dual-class listings
|
||||
</h6>
|
||||
<button class="btn btn-primary btn-sm float-left">More</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Food Cards -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-6 col-lg-6 col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-body news-feed-food-card-bg">
|
||||
<a [routerLink]="">
|
||||
<h6 class="card-title font-medium-1 text-white">The Best High-Fiber Foods, According
|
||||
to
|
||||
Experts
|
||||
<span class="badge badge-primary badge-sm float-right">Food</span>
|
||||
</h6>
|
||||
</a>
|
||||
<button class="btn btn-info btn-sm">More</button><span
|
||||
class="font-small-1 float-right p-md-2 p-sm-2 float-right text-white">Oct15,
|
||||
2:00am</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-3 col-lg-3 col-md-3">
|
||||
<div class="card">
|
||||
<div class="card-body news-feed-food-card2-bg">
|
||||
<a [routerLink]="">
|
||||
<h6 class="card-title font-small-3 text-white">You're Sprinkling Plastic On Food
|
||||
</h6>
|
||||
</a>
|
||||
<button class="btn btn-warning btn-sm">More </button><span
|
||||
class="font-small-1 float-right p-md-2 p-sm-2 float-right text-white">Oct
|
||||
14, 5:00am</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-3 col-lg-3 col-md-3">
|
||||
<div class="card">
|
||||
<div class="card-body news-feed-food-card3-bg">
|
||||
<a [routerLink]="">
|
||||
<h6 class="card-title font-small-3 text-white">Foods With Lowest Fat Content</h6>
|
||||
</a>
|
||||
<button class="btn btn-primary btn-sm">More </button><span
|
||||
class="font-small-1 float-right p-md-2 p-sm-2 float-right text-white">Oct
|
||||
14, 5:00am</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- // News Feed section ending point -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
|
||||
|
||||
import { NewsFeedComponent } from './news-feed.component';
|
||||
|
||||
describe('NewsFeedComponent', () => {
|
||||
let component: NewsFeedComponent;
|
||||
let fixture: ComponentFixture<NewsFeedComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ NewsFeedComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(NewsFeedComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,37 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-news-feed',
|
||||
templateUrl: './news-feed.component.html',
|
||||
styleUrls: ['./news-feed.component.css']
|
||||
})
|
||||
export class NewsFeedComponent implements OnInit {
|
||||
|
||||
public breadcrumb: any;
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
this.breadcrumb = {
|
||||
'mainlabel': 'News Feed',
|
||||
'links': [
|
||||
{
|
||||
'name': 'Home',
|
||||
'isLink': true,
|
||||
'link': '/dashboard/sales'
|
||||
},
|
||||
{
|
||||
'name': 'Pages',
|
||||
'isLink': true,
|
||||
'link': '#'
|
||||
},
|
||||
{
|
||||
'name': 'News Feed',
|
||||
'isLink': false
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
:host ::ng-deep .my-gallery img{
|
||||
height: 168px ;
|
||||
margin-right: 1px;
|
||||
margin-left: 1px;
|
||||
max-width: 100%
|
||||
}
|
||||
:host ::ng-deep .ngx-gallery {
|
||||
grid-template-columns: auto !important
|
||||
;
|
||||
}
|
||||
@@ -0,0 +1,225 @@
|
||||
<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">
|
||||
<!-- Search form-->
|
||||
<section id="search-images" class="card overflow-hidden">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Images search results</h4>
|
||||
<div class="heading-elements">
|
||||
<ul class="list-inline mb-0">
|
||||
<li><a data-action="collapse"><i class="feather ft-minus"></i></a></li>
|
||||
<li><a data-action="reload"><i class="feather ft-rotate-cw"></i></a></li>
|
||||
<li><a data-action="expand"><i class="feather ft-maximize"></i></a></li>
|
||||
<li><a data-action="close"><i class="feather ft-x"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-content collapse show">
|
||||
<div class="card-body pb-0">
|
||||
<fieldset class="form-group position-relative mb-0">
|
||||
<input type="text" class="form-control form-control-xl input-xl" id="iconLeft1"
|
||||
placeholder="Explore Modern ...">
|
||||
<div class="form-control-position">
|
||||
<i class="feather ft-mic font-medium-4"></i>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
<!--Search Navbar-->
|
||||
<div id="search-nav" class="card-body">
|
||||
<ul class="nav nav-inline">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" [routerLink]="['/search/searchWebsite']"><i class="la la-link"></i> Website</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" [routerLink]="['/search/searchImages']"><i class="la la-file-image-o"></i>
|
||||
Images</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" [routerLink]="['/search/searchVideos']"><i class="la la-file-video-o"></i>
|
||||
Videos</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" [routerLink]=""><i class="la la-map-o"></i> Maps</a>
|
||||
</li>
|
||||
<li ngbDropdown class="dropdown nav-item float-right">
|
||||
<a ngbDropdownToggle [routerLink]="" class="btn dropdown-toggle" data-toggle="dropdown">
|
||||
<i class="la la-cog"></i> <span class="caret"></span>
|
||||
</a>
|
||||
<ul ngbDropdownMenu class="dropdown-menu">
|
||||
<li class="dropdown-item"><a [routerLink]="" class="dropdown-link">Languages</a></li>
|
||||
<li class="dropdown-item"><a [routerLink]="" class="dropdown-link">Search Settings</a></li>
|
||||
<li class="dropdown-item"><a [routerLink]="" class="dropdown-link">History</a></li>
|
||||
<li class="dropdown-item"><a [routerLink]="" class="dropdown-link">Search Help</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!--/ Search Navbar-->
|
||||
<!--Search Result-->
|
||||
<div id="search-results">
|
||||
<div class="card-body my-gallery">
|
||||
<div class="row">
|
||||
<div class="card card-img-top border-grey border-lighten-2 col-md-3">
|
||||
<a2p-gallery>
|
||||
<ngxps-gallery [images]="image1"></ngxps-gallery>
|
||||
</a2p-gallery>
|
||||
<div class="card-body px-0">
|
||||
<h4 class="card-title">Maecenas solitudin <span class="font-small-2 text-muted float-right">720 x
|
||||
600</span></h4>
|
||||
<p class="card-text">Nulla ac vulputate mauris. Nam tincidunt odio purus..</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card-img-top border-grey border-lighten-2 col-md-3">
|
||||
<a2p-gallery>
|
||||
<ngxps-gallery [images]="image2"></ngxps-gallery>
|
||||
</a2p-gallery>
|
||||
<div class="card-body px-0">
|
||||
<h4 class="card-title">Aliquam vel nib <span class="font-small-2 text-muted float-right">480 x
|
||||
360</span></h4>
|
||||
<p class="card-text">Phasellus vitae aliquam felis, et bibendum orci..</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card-img-top border-grey border-lighten-2 col-md-3">
|
||||
<a2p-gallery>
|
||||
<ngxps-gallery [images]="image3"></ngxps-gallery>
|
||||
</a2p-gallery>
|
||||
<div class="card-body px-0">
|
||||
<h4 class="card-title">Molestie accumsan <span class="font-small-2 text-muted float-right">480 x
|
||||
360</span></h4>
|
||||
<p class="card-text">Maecenas commodo odio sed nibh viverra vestibulum.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card-img-top border-grey border-lighten-2 col-md-3">
|
||||
<a2p-gallery>
|
||||
<ngxps-gallery [images]="image4"></ngxps-gallery>
|
||||
</a2p-gallery>
|
||||
<div class="card-body px-0">
|
||||
<h4 class="card-title">Nam eu efficitur <span class="font-small-2 text-muted float-right">500 x
|
||||
360</span></h4>
|
||||
<p class="card-text">Donec porttitor massa vitae leo rutrum viverra.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="card card-img-top border-grey border-lighten-2 col-md-3">
|
||||
<a2p-gallery>
|
||||
<ngxps-gallery [images]="image5"></ngxps-gallery>
|
||||
</a2p-gallery>
|
||||
<div class="card-body px-0">
|
||||
<h4 class="card-title">Porttitor donec <span class="font-small-2 text-muted float-right">560 x
|
||||
360</span></h4>
|
||||
<p class="card-text">Sed suscipit velit vitae justo pharetra.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card-img-top border-grey border-lighten-2 col-md-3">
|
||||
<a2p-gallery>
|
||||
<ngxps-gallery [images]="image6"></ngxps-gallery>
|
||||
</a2p-gallery>
|
||||
<div class="card-body px-0">
|
||||
<h4 class="card-title">Velit et interdum <span class="font-small-2 text-muted float-right">500 x
|
||||
360</span></h4>
|
||||
<p class="card-text">Duis auctor velit et interdum maximus..</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card-img-top border-grey border-lighten-2 col-md-3">
|
||||
<a2p-gallery>
|
||||
<ngxps-gallery [images]="image7"></ngxps-gallery>
|
||||
</a2p-gallery>
|
||||
<div class="card-body px-0">
|
||||
<h4 class="card-title">Natoque efficitur <span class="font-small-2 text-muted float-right">800 x
|
||||
600</span></h4>
|
||||
<p class="card-text">Cum sociis natoque penatibus et magnis dis.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card-img-top border-grey border-lighten-2 col-md-3">
|
||||
<a2p-gallery>
|
||||
<ngxps-gallery [images]="image8"></ngxps-gallery>
|
||||
</a2p-gallery>
|
||||
<div class="card-body px-0">
|
||||
<h4 class="card-title">Pharetra enim id <span class="font-small-2 text-muted float-right">500 x
|
||||
360</span></h4>
|
||||
<p class="card-text">Mauris imperdiet enim id urna pharetra.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="card card-img-top border-grey border-lighten-2 col-md-3">
|
||||
<a2p-gallery>
|
||||
<ngxps-gallery [images]="image9"></ngxps-gallery>
|
||||
</a2p-gallery>
|
||||
<div class="card-body px-0">
|
||||
<h4 class="card-title">Integer fermentum <span class="font-small-2 text-muted float-right">380 x
|
||||
360</span></h4>
|
||||
<p class="card-text">Vel lacinia cursus, est dui tincidunt sem.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card-img-top border-grey border-lighten-2 col-md-3">
|
||||
<a2p-gallery>
|
||||
<ngxps-gallery [images]="image10"></ngxps-gallery>
|
||||
</a2p-gallery>
|
||||
<div class="card-body px-0">
|
||||
<h4 class="card-title">Donec congue nec <span class="font-small-2 text-muted float-right">500 x
|
||||
360</span></h4>
|
||||
<p class="card-text">Morbi laoreet ultrices mi ut imperdiet.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card-img-top border-grey border-lighten-2 col-md-3">
|
||||
<a2p-gallery>
|
||||
<ngxps-gallery [images]="image11"></ngxps-gallery>
|
||||
</a2p-gallery>
|
||||
<div class="card-body px-0">
|
||||
<h4 class="card-title">Vivamus eget <span class="font-small-2 text-muted float-right">500 x
|
||||
360</span></h4>
|
||||
<p class="card-text">This is a longer card with supporting text below.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card-img-top border-grey border-lighten-2 col-md-3">
|
||||
<a2p-gallery>
|
||||
<ngxps-gallery [images]="image12"></ngxps-gallery>
|
||||
</a2p-gallery>
|
||||
<div class="card-body px-0">
|
||||
<h4 class="card-title">Aenean pharetra <span class="font-small-2 text-muted float-right">500 x
|
||||
360</span></h4>
|
||||
<p class="card-text">Ligula ornare velit porttitor viverra et a felis.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ngxps-lightbox></ngxps-lightbox>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<nav aria-label="Page navigation">
|
||||
<ul class="pagination pagination-separate pagination-round pagination-flat">
|
||||
<li class="page-item">
|
||||
<a class="page-link" [routerLink]="" aria-label="Previous">
|
||||
<span aria-hidden="true">« Prev</span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" [routerLink]="">1</a></li>
|
||||
<li class="page-item"><a class="page-link" [routerLink]="">2</a></li>
|
||||
<li class="page-item active"><a class="page-link" [routerLink]="">3</a></li>
|
||||
<li class="page-item"><a class="page-link" [routerLink]="">4</a></li>
|
||||
<li class="page-item"><a class="page-link" [routerLink]="">5</a></li>
|
||||
<li class="page-item">
|
||||
<a class="page-link" [routerLink]="" aria-label="Next">
|
||||
<span aria-hidden="true">Next »</span>
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!--/ Search Result-->
|
||||
</section>
|
||||
<!--/ Search form-->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
|
||||
|
||||
import { SearchImagesComponent } from './search-images.component';
|
||||
|
||||
describe('SearchImagesComponent', () => {
|
||||
let component: SearchImagesComponent;
|
||||
let fixture: ComponentFixture<SearchImagesComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ SearchImagesComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(SearchImagesComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,113 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-search-images',
|
||||
templateUrl: './search-images.component.html',
|
||||
styleUrls: ['./search-images.component.css']
|
||||
})
|
||||
export class SearchImagesComponent 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'
|
||||
}
|
||||
];
|
||||
|
||||
public breadcrumb: any;
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
this.breadcrumb = {
|
||||
'mainlabel': 'Search Images',
|
||||
'links': [
|
||||
{
|
||||
'name': 'Home',
|
||||
'isLink': true,
|
||||
'link': '/dashboard/sales'
|
||||
},
|
||||
{
|
||||
'name': 'Search',
|
||||
'isLink': true,
|
||||
'link': '#'
|
||||
},
|
||||
{
|
||||
'name': 'Search Images',
|
||||
'isLink': false
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,366 @@
|
||||
<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">
|
||||
<!-- Search form-->
|
||||
<div id="search-videos" class="card overflow-hidden">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Videos search results</h4>
|
||||
<div class="heading-elements">
|
||||
<ul class="list-inline mb-0">
|
||||
<li><a data-action="collapse"><i class="feather ft-minus"></i></a></li>
|
||||
<li><a data-action="reload"><i class="feather ft-rotate-cw"></i></a></li>
|
||||
<li><a data-action="expand"><i class="feather ft-maximize"></i></a></li>
|
||||
<li><a data-action="close"><i class="feather ft-x"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-content collapse show">
|
||||
<!--Search Form-->
|
||||
<div class="card-body pb-0">
|
||||
<fieldset class="form-group position-relative mb-0">
|
||||
<input type="text" class="form-control form-control-xl input-xl" id="iconLeft1"
|
||||
placeholder="Explore Modern ...">
|
||||
<div class="form-control-position">
|
||||
<i class="feather ft-mic font-medium-4"></i>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
<!--/Search Form-->
|
||||
|
||||
<!--Search Navbar-->
|
||||
<div id="search-nav" class="card-body">
|
||||
<ul class="nav nav-inline">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" [routerLink]="['/search/searchWebsite']"><i class="la la-link"></i> Website</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" [routerLink]="['/search/searchImages']"><i class="la la-file-image-o"></i> Images</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" [routerLink]="['/search/searchVideos']"><i class="la la-file-video-o"></i> Videos</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" [routerLink]=""><i class="la la-map-o"></i> Maps</a>
|
||||
</li>
|
||||
<li ngbDropdown class="dropdown nav-item float-right">
|
||||
<a ngbDropdownToggle [routerLink]="" class="btn dropdown-toggle" data-toggle="dropdown">
|
||||
<i class="la la-cog"></i> <span class="caret"></span>
|
||||
</a>
|
||||
<ul ngbDropdownMenu class="dropdown-menu">
|
||||
<li class="dropdown-item"><a [routerLink]="" class="dropdown-link">Languages</a></li>
|
||||
<li class="dropdown-item"><a [routerLink]="" class="dropdown-link">Search Settings</a></li>
|
||||
<li class="dropdown-item"><a [routerLink]="" class="dropdown-link">History</a></li>
|
||||
<li class="dropdown-item"><a [routerLink]="" class="dropdown-link">Search Help</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!--/ Search Navbar-->
|
||||
|
||||
<!--Search Result-->
|
||||
<div id="search-results" class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-xl-8">
|
||||
<p class="text-muted font-small-3">About 56,000 results (0.36 seconds) </p>
|
||||
<ul class="media-list">
|
||||
<!--search with video-->
|
||||
<li class="row">
|
||||
<p class="lead mb-0 col-12"><a [routerLink]=""><span class="text-bold-600">The Table</span> - for what do
|
||||
you feel you would bring to</a></p>
|
||||
<div class="col-lg-3 col-12">
|
||||
<iframe class="border-0" width="150" height="80"
|
||||
src="https://www.youtube.com/embed/SsE5U7ta9Lw?rel=0&controls=0&showinfo=0"></iframe>
|
||||
</div>
|
||||
<div class="col-lg-9 col-12">
|
||||
<p class="mb-0"><a [routerLink]="" class="teal darken-1">http://youtube.com/<span
|
||||
class="text-bold-600">modern</span>/ <i class="la la-angle-down" aria-hidden="true"></i></a>
|
||||
</p>
|
||||
<ul class="list-inline list-inline-pipe text-muted">
|
||||
<li>By PlayStation</li>
|
||||
<li>5M Views</li>
|
||||
<li>2 hours ago</li>
|
||||
</ul>
|
||||
<p><span class="text-bold-600">Proceduralize</span> Not the long pole in my tent. Get buy-in pixel
|
||||
pushing, and quick win . What's the status on the deliverables for eow? goalposts golden goose,
|
||||
and take five.</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="row">
|
||||
<p class="lead mb-0 col-12"><a [routerLink]=""><span class="text-bold-600">Microdosing</span> - deep v
|
||||
actually schlitz chia</a></p>
|
||||
<div class="col-lg-3 col-12">
|
||||
<iframe class="border-0" src="https://player.vimeo.com/video/118589137?title=0&byline=0"
|
||||
width="150" height="80"></iframe>
|
||||
</div>
|
||||
<div class="col-lg-9 col-12">
|
||||
<p class="mb-0"><a [routerLink]="" class="teal darken-1">http://themeforest.net/<span
|
||||
class="text-bold-600">modern</span>/microdosing <i class="la la-angle-down"
|
||||
aria-hidden="true"></i></a></p>
|
||||
<ul class="list-inline list-inline-pipe text-muted">
|
||||
<li>By Colonel</li>
|
||||
<li>1M Views</li>
|
||||
<li>Aug 3, 2017</li>
|
||||
</ul>
|
||||
<p>Lobortis erat rutrum dignissim. Colonel <span class="text-bold-600">Responsive Bootstrap Admin
|
||||
Template</span> Ut tellus dui, rhoncus quis vulputate non, sodales ac ex. Fusce interdum
|
||||
efficitur purus quis viverra. Vivamus eros
|
||||
urna, scelerisque ac enim...</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="row">
|
||||
<p class="lead mb-0 col-12"><a [routerLink]="">Aesthetic neutra <span class="text-bold-600">freegan</span>,
|
||||
mlkshk literally</a></p>
|
||||
<div class="col-lg-3 col-12">
|
||||
<iframe class="border-0"
|
||||
src="https://player.vimeo.com/video/173541384?color=ff9933&title=0&byline=0" width="150"
|
||||
height="80"></iframe>
|
||||
</div>
|
||||
<div class="col-lg-9 col-12">
|
||||
<p class="mb-0"><a [routerLink]="" class="teal darken-1">http://envato.com/literally/<span
|
||||
class="text-bold-600">modern</span>/ <i class="la la-angle-down" aria-hidden="true"></i></a>
|
||||
</p>
|
||||
<ul class="list-inline list-inline-pipe text-muted">
|
||||
<li>By Freegan</li>
|
||||
<li>20K Views</li>
|
||||
<li>June 18, 2017</li>
|
||||
</ul>
|
||||
<p><span class="text-muted">June 30, 2017 - </span><span class="text-bold-600">Humblebrag</span>
|
||||
mixtape tumblr small batch, marfa blog mumblecore retro sustainable bitters normcore brunch
|
||||
whatever helvetica. <span class="text-bold-600">Humblebrag mumblecore </span>beard
|
||||
irony, XOXO craft beer kogi letterpress freegan vegan disrupt...</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="row">
|
||||
<p class="lead mb-0 col-12"><a [routerLink]=""><span class="text-bold-600">iCell</span> - disrupt butcher
|
||||
pitchfork.</a></p>
|
||||
<div class="col-lg-3 col-12">
|
||||
<iframe class="border-0" width="150" height="80"
|
||||
src="https://player.vimeo.com/video/161753790?color=ff9933&title=0&byline=0"></iframe>
|
||||
</div>
|
||||
<div class="col-lg-9 col-12">
|
||||
<p class="mb-0"><a [routerLink]="" class="teal darken-1">http://google.com/<span
|
||||
class="text-bold-600">icell</span>/ <i class="la la-angle-down" aria-hidden="true"></i></a>
|
||||
</p>
|
||||
<ul class="list-inline list-inline-pipe text-muted">
|
||||
<li>By Kogi</li>
|
||||
<li>8K Views</li>
|
||||
<li>March 31, 2017</li>
|
||||
</ul>
|
||||
<p><span class="text-muted">March 23, 2017 - </span>Church-key selfies bitters man bun
|
||||
post-ironic. <span class="text-bold-600">8-bit 3 wolf moon</span> drinking vinegar, direct trade
|
||||
plaid cred hashtag offal. Fap XOXO chambray, intelligentsia
|
||||
kogi keytar flexitarian cardigan kale chips food truck.</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="row">
|
||||
<p class="lead mb-0 col-12"><a [routerLink]=""><span class="text-bold-600">Run it</span> - up the flagpole,
|
||||
ping the boss</a></p>
|
||||
<div class="col-lg-3 col-12">
|
||||
<iframe class="border-0"
|
||||
src="https://www.youtube.com/embed/hunYLg8I1Os?rel=0&controls=0&showinfo=0" width="150"
|
||||
height="80"></iframe>
|
||||
</div>
|
||||
<div class="col-lg-9 col-12">
|
||||
<p class="mb-0"><a [routerLink]="" class="teal darken-1">http://mail.example.com/<span
|
||||
class="text-bold-600">run</span>/ <i class="la la-angle-down" aria-hidden="true"></i></a>
|
||||
</p>
|
||||
<ul class="list-inline list-inline-pipe text-muted">
|
||||
<li>By Jerk</li>
|
||||
<li>850 Views</li>
|
||||
<li>Feb 28, 2017</li>
|
||||
</ul>
|
||||
<p>Pixel pushing horsehead offer that jerk from finance really threw me under the bus, but best
|
||||
practices new economy and take five, punch the tree, and come back in here with a clear head...
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="row">
|
||||
<p class="lead mb-0 col-12"><a [routerLink]=""><span class="text-bold-600">Keytar</span> - jean shorts
|
||||
disrupt poutine</a></p>
|
||||
<div class="col-lg-3 col-12">
|
||||
<iframe class="border-0" width="150" height="80"
|
||||
src="https://www.youtube.com/embed/zqDxfHvZ3DU?rel=0&controls=0&showinfo=0"></iframe>
|
||||
</div>
|
||||
<div class="col-lg-9 col-12">
|
||||
<p class="mb-0"><a [routerLink]="" class="teal darken-1">http://demo.keytar.com/<span
|
||||
class="text-bold-600">jean</span>/ <i class="la la-angle-down" aria-hidden="true"></i></a>
|
||||
</p>
|
||||
<ul class="list-inline list-inline-pipe text-muted">
|
||||
<li>By Chillwave</li>
|
||||
<li>380 Views</li>
|
||||
<li>Feb 14, 2017</li>
|
||||
</ul>
|
||||
<p><span class="text-muted">Jan 14, 2017 - </span><span class="text-bold-600">Brooklyn</span>
|
||||
ethical sartorial gastropub shabby chic photo booth. Bushwick roof party kogi pitchfork food
|
||||
truck heirloom, street art occupy blog try-hard
|
||||
single-origin coffee chillwave.</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="row">
|
||||
<p class="lead mb-0 col-12"><a [routerLink]=""><span class="text-bold-600">Helicopter</span> - view
|
||||
drop-dead date</a></p>
|
||||
<div class="col-lg-3 col-12">
|
||||
<iframe class="border-0" width="150" height="80"
|
||||
src="https://www.youtube.com/embed/AVWPWYYIcpk?rel=0&controls=0&showinfo=0"></iframe>
|
||||
</div>
|
||||
<div class="col-lg-9 col-12">
|
||||
<p class="mb-0"><a [routerLink]="" class="teal darken-1">http://demo.helicopter.com/<span
|
||||
class="text-bold-600">date</span>/ <i class="la la-angle-down" aria-hidden="true"></i></a>
|
||||
</p>
|
||||
<ul class="list-inline list-inline-pipe text-muted">
|
||||
<li>By Python</li>
|
||||
<li>150 Views</li>
|
||||
<li>Jan 23, 2017</li>
|
||||
</ul>
|
||||
<p><span class="text-muted">Sept 18, 2017 - </span> Sacred cow execute pig in a python. We need to
|
||||
socialize the comms with the wider stakeholder community collaboration through advanced
|
||||
technlogy three-martini lunch.</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="row">
|
||||
<p class="lead mb-0 col-12"><a [routerLink]="">Letterpress <span class="text-bold-600">freegan</span>,
|
||||
mlkshk literally</a></p>
|
||||
<div class="col-lg-3 col-12">
|
||||
<iframe class="border-0" width="150" height="80"
|
||||
src="https://www.youtube.com/embed/SzCgp-FEU50?rel=0&controls=0&showinfo=0"></iframe>
|
||||
</div>
|
||||
<div class="col-lg-9 col-12">
|
||||
<p class="mb-0"><a [routerLink]="" class="teal darken-1">http://envato.com/literally/<span
|
||||
class="text-bold-600">modern</span>/ <i class="la la-angle-down" aria-hidden="true"></i></a>
|
||||
</p>
|
||||
<ul class="list-inline list-inline-pipe text-muted">
|
||||
<li>By XOXO</li>
|
||||
<li>12 Views</li>
|
||||
<li>Jan 2, 2017</li>
|
||||
</ul>
|
||||
<p><span class="text-muted">June 30, 2017 - </span><span class="text-bold-600">Letterpress</span>
|
||||
mixtape tumblr small batch, marfa blog mumblecore retro sustainable bitters normcore brunch
|
||||
whatever helvetica. <span class="text-bold-600">Humblebrag mumblecore </span>beard
|
||||
irony, XOXO craft beer kogi letterpress freegan vegan disrupt...</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
<div class="text-center">
|
||||
<nav aria-label="Page navigation">
|
||||
<ul class="pagination pagination-separate pagination-round pagination-flat">
|
||||
<li class="page-item">
|
||||
<a class="page-link"[routerLink]="" aria-label="Previous">
|
||||
<span aria-hidden="true">« Prev</span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link"[routerLink]="">1</a></li>
|
||||
<li class="page-item"><a class="page-link"[routerLink]="">2</a></li>
|
||||
<li class="page-item active"><a class="page-link"[routerLink]="">3</a></li>
|
||||
<li class="page-item"><a class="page-link"[routerLink]="">4</a></li>
|
||||
<li class="page-item"><a class="page-link"[routerLink]="">5</a></li>
|
||||
<li class="page-item">
|
||||
<a class="page-link"[routerLink]="" aria-label="Next">
|
||||
<span aria-hidden="true">Next »</span>
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4">
|
||||
<div class="card border-grey border-lighten-2">
|
||||
<div class="card-body px-0">
|
||||
<h4 class="card-title">Fusce interdum</h4>
|
||||
<h6 class="card-subtitle text-muted">Vivamus eros urna scelerisque</h6>
|
||||
</div>
|
||||
<div class="embed-responsive embed-responsive-4by3">
|
||||
<iframe class="border-0"
|
||||
src="https://www.youtube.com/embed/cUd8GtQvvsw?rel=0&controls=0&showinfo=0"></iframe>
|
||||
</div>
|
||||
<div class="card-body px-0">
|
||||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the
|
||||
card's content.<a [routerLink]="">Wikipedia</a></p>
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item"><strong>By :</strong> Jhon doe</li>
|
||||
<li class="list-group-item"><strong>Views :</strong> 11M Views</li>
|
||||
<li class="list-group-item"><strong>Released :</strong> 16 Jan, 2017</li>
|
||||
</ul>
|
||||
<div class="py-1 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 mr-1 mb-1 btn-outline-github"><span
|
||||
class="la la-github font-medium-4"></span></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body px-0">
|
||||
<p class="text-bold-600">Related videos</p>
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<div class="embed-responsive embed-responsive-4by3">
|
||||
<iframe class="border-0"
|
||||
src="https://www.youtube.com/embed/tr7AcjcE0BQ?rel=0&controls=0&showinfo=0"></iframe>
|
||||
</div>
|
||||
<a [routerLink]="" class="font-small-2">Xbox One S</a>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="embed-responsive embed-responsive-4by3">
|
||||
<iframe class="border-0"
|
||||
src="https://www.youtube.com/embed/f7_4QoZwH54?rel=0&controls=0&showinfo=0"></iframe>
|
||||
</div>
|
||||
<a [routerLink]="" class="font-small-2">google I/O</a>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="embed-responsive embed-responsive-4by3">
|
||||
<iframe class="border-0"
|
||||
src="https://www.youtube.com/embed/szkFREXvYW4?rel=0&controls=0&showinfo=0"></iframe>
|
||||
</div>
|
||||
<a [routerLink]="" class="font-small-2">Windows 10 </a>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="embed-responsive embed-responsive-4by3">
|
||||
<iframe class="border-0"
|
||||
src="https://www.youtube.com/embed/gH-XNZRN4J8?rel=0&controls=0&showinfo=0"></iframe>
|
||||
</div>
|
||||
<a [routerLink]="" class="font-small-2">Galaxy S7</a>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="embed-responsive embed-responsive-4by3">
|
||||
<iframe class="border-0"
|
||||
src="https://www.youtube.com/embed/RcrLLooXgSY?rel=0&controls=0&showinfo=0"></iframe>
|
||||
</div>
|
||||
<a [routerLink]="" class="font-small-2">VanMoof </a>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="embed-responsive embed-responsive-4by3">
|
||||
<iframe class="border-0"
|
||||
src="https://www.youtube.com/embed/Gy8-uhr-EzE?rel=0&controls=0&showinfo=0"></iframe>
|
||||
</div>
|
||||
<a [routerLink]="" class="font-small-2">OnePlus 3 </a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/ Search Result -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
|
||||
|
||||
import { SearchVideosComponent } from './search-videos.component';
|
||||
|
||||
describe('SearchVideosComponent', () => {
|
||||
let component: SearchVideosComponent;
|
||||
let fixture: ComponentFixture<SearchVideosComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ SearchVideosComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(SearchVideosComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,36 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-search-videos',
|
||||
templateUrl: './search-videos.component.html',
|
||||
styleUrls: ['./search-videos.component.css']
|
||||
})
|
||||
export class SearchVideosComponent implements OnInit {
|
||||
|
||||
public breadcrumb: any;
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
this.breadcrumb = {
|
||||
'mainlabel': 'Search Videos',
|
||||
'links': [
|
||||
{
|
||||
'name': 'Home',
|
||||
'isLink': true,
|
||||
'link': '/dashboard/sales'
|
||||
},
|
||||
{
|
||||
'name': 'Search',
|
||||
'isLink': true,
|
||||
'link': '#'
|
||||
},
|
||||
{
|
||||
'name': 'Search Videos',
|
||||
'isLink': false
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,390 @@
|
||||
<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">
|
||||
<!-- Search form-->
|
||||
<section id="search-website" class="card overflow-hidden">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Website search results</h4>
|
||||
<div class="heading-elements">
|
||||
<ul class="list-inline mb-0">
|
||||
<li><a data-action="collapse"><i class="feather ft-minus"></i></a></li>
|
||||
<li><a data-action="reload"><i class="feather ft-rotate-cw"></i></a></li>
|
||||
<li><a data-action="expand"><i class="feather ft-maximize"></i></a></li>
|
||||
<li><a data-action="close"><i class="feather ft-x"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-content collapse show">
|
||||
<div class="card-body pb-0">
|
||||
<fieldset class="form-group position-relative mb-0">
|
||||
<input type="text" class="form-control form-control-xl input-xl" id="iconLeft1"
|
||||
placeholder="Explore Modern ...">
|
||||
<div class="form-control-position">
|
||||
<i class="feather ft-mic font-medium-4"></i>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
<!--Search Navbar-->
|
||||
<div id="search-nav" class="card-body">
|
||||
<ul class="nav nav-inline">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" [routerLink]="['/search/searchWebsite']"><i class="la la-link"></i> Website</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" [routerLink]="['/search/searchImages']"><i class="la la-file-image-o"></i> Images</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" [routerLink]="['/search/searchVideos']"><i class="la la-file-video-o"></i> Videos</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" [routerLink]=""><i class="la la-map-o"></i> Maps</a>
|
||||
</li>
|
||||
<li ngbDropdown class="dropdown nav-item float-right">
|
||||
<a ngbDropdownToggle [routerLink]="" class="btn dropdown-toggle" data-toggle="dropdown">
|
||||
<i class="la la-cog"></i> <span class="caret"></span>
|
||||
</a>
|
||||
<ul ngbDropdownMenu class="dropdown-menu">
|
||||
<li class="dropdown-item"><a [routerLink]="" class="dropdown-link">Languages</a></li>
|
||||
<li class="dropdown-item"><a [routerLink]="" class="dropdown-link">Search Settings</a></li>
|
||||
<li class="dropdown-item"><a [routerLink]="" class="dropdown-link">History</a></li>
|
||||
<li class="dropdown-item"><a [routerLink]="" class="dropdown-link">Search Help</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!--/ Search Navbar-->
|
||||
<!--Search Result-->
|
||||
<div id="search-results" class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-8">
|
||||
<p class="text-muted font-small-3">About 68,00,000 results (0.58 seconds) </p>
|
||||
<ul class="media-list p-0">
|
||||
<!--search with list-->
|
||||
<li class="media">
|
||||
<div class="media-body">
|
||||
<p class="lead mb-0"><a [routerLink]=""><span class="text-bold-600">Modern Admin</span> - Clean Bootstrap
|
||||
4 Dashboard HTML Template</a></p>
|
||||
<p class="mb-0"><a [routerLink]="" class="teal darken-1">https://pixinvent.com/<span
|
||||
class="text-bold-600">modern</span>/ <i class="la la-angle-down" aria-hidden="true"></i></a>
|
||||
</p>
|
||||
<ul class="list-inline list-inline-pipe text-muted">
|
||||
<li>
|
||||
<i class="la la-star yellow darken-2"></i>
|
||||
<i class="la la-star yellow darken-2"></i>
|
||||
<i class="la la-star yellow darken-2"></i>
|
||||
<i class="la la-star yellow darken-2"></i>
|
||||
<i class="la la-star yellow darken-2"></i> 5 stars
|
||||
</li>
|
||||
<li>590 votes</li>
|
||||
<li>US$ 28.00</li>
|
||||
<li>In stock</li>
|
||||
</ul>
|
||||
<p><span class="text-muted">Feb 3, 2018 - </span><span class="text-bold-600">Modern</span> nec
|
||||
nisl lobortis erat rutrum dignissim. Colonel <span class="text-bold-600">Responsive Bootstrap
|
||||
Admin Template</span> Ut tellus dui, rhoncus quis vulputate non, sodales ac ex. Fusce interdum
|
||||
efficitur purus quis viverra. Vivamus eros urna, scelerisque ac enim a, pharetra imperdiet
|
||||
dolor...</p>
|
||||
<div class="website-detailed-list mx-1 my-1">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="content-group">
|
||||
<div class="media-body">
|
||||
<p class="mb-0"><a [routerLink]="">Dashboard</a></p>
|
||||
<p>Donec vitae ante ipsum. In aliquet, urna id varius mattis...</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-group">
|
||||
<div class="media-body">
|
||||
<p class="mb-0"><a [routerLink]="">Form Components</a></p>
|
||||
<p>Velit mi sodales turpis, nec consectetur leo elit.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-group">
|
||||
<div class="media-body">
|
||||
<p class="mb-0"><a [routerLink]="">Charts</a></p>
|
||||
<p>Vestibulum nec orci placerat, euismod turpis egestas, pretium risus.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="content-group">
|
||||
<div class="media-body">
|
||||
<p class="mb-0"><a [routerLink]="">UI Components</a></p>
|
||||
<p>Nam in velit iaculis, vestibulum ex a, porta sapien...</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-group">
|
||||
<div class="media-body">
|
||||
<p class="mb-0"><a [routerLink]="">Support</a></p>
|
||||
<p>Donec ullamcorper est vel dui commodo dictum.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-group">
|
||||
<div class="media-body">
|
||||
<p class="mb-0"><a [routerLink]="">Documentation</a></p>
|
||||
<p>Ut rhoncus massa diam, in commodo enim posuere quis mosito...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<!--search with image-->
|
||||
<li class="media">
|
||||
<div class="media-left">
|
||||
<a [routerLink]="">
|
||||
<img class="media-object width-150"
|
||||
src="../../../../../assets/images/portfolio/width-600/portfolio-14.jpg"
|
||||
alt="Generic placeholder image">
|
||||
</a>
|
||||
</div>
|
||||
<div class="media-body media-search">
|
||||
<p class="lead mb-0"><a [routerLink]=""><span class="text-bold-600">Attire bench</span> - Quick win shoot
|
||||
me an email</a></p>
|
||||
<p class="mb-0"><a [routerLink]="" class="teal darken-1">https://pixinvent.com/<span
|
||||
class="text-bold-600">modern</span>/ <i class="la la-angle-down" aria-hidden="true"></i></a>
|
||||
</p>
|
||||
<ul class="list-inline list-inline-pipe text-muted">
|
||||
<li>
|
||||
<i class="la la-star yellow darken-2"></i>
|
||||
<i class="la la-star yellow darken-2"></i>
|
||||
<i class="la la-star yellow darken-2"></i>
|
||||
<i class="la la-star yellow darken-2"></i>
|
||||
<i class="la la-star-half yellow darken-2"></i> 4.5 stars
|
||||
</li>
|
||||
<li>50 votes</li>
|
||||
<li>US$ 40.00</li>
|
||||
<li>In stock</li>
|
||||
</ul>
|
||||
<p><span class="text-muted">Feb 3, 2018 - </span> We need to dialog around <span
|
||||
class="text-bold-600">Modern Admin</span> your choice of work attire bench mark, or
|
||||
win-win-win. Quick win shoot me an email. Proceduralize i don't want to drain the whole swamp, i
|
||||
just want to shoot some alligators yet old boys club.</p>
|
||||
</div>
|
||||
</li>
|
||||
<!--search with video-->
|
||||
<li class="media">
|
||||
<div class="media-left media-search">
|
||||
<iframe width="150" height="110"
|
||||
src="https://www.youtube.com/embed/SsE5U7ta9Lw?rel=0&controls=0&showinfo=0"></iframe>
|
||||
</div>
|
||||
<div class="media-body">
|
||||
<p class="lead mb-0"><a [routerLink]=""><span class="text-bold-600">The Table</span> - for what do you
|
||||
feel you would bring to</a></p>
|
||||
<p class="mb-0"><a [routerLink]="" class="teal darken-1">http://youtube.com/<span
|
||||
class="text-bold-600">modern</span>/ <i class="la la-angle-down" aria-hidden="true"></i></a>
|
||||
</p>
|
||||
<ul class="list-inline list-inline-pipe text-muted">
|
||||
<li>Feb 3, 2018</li>
|
||||
<li>1M Views</li>
|
||||
<li>Uploaded by PlayStation</li>
|
||||
</ul>
|
||||
<p><span class="text-bold-600">Proceduralize</span> Not the long pole in my tent. Get buy-in pixel
|
||||
pushing, and quick win . What's the status on the deliverables for eow? goalposts golden goose,
|
||||
and take five.</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="media">
|
||||
<div class="media-body">
|
||||
<p class="lead mb-0"><a [routerLink]=""><span class="text-bold-600">Microdosing</span> - deep v actually
|
||||
schlitz chia</a></p>
|
||||
<p class="mb-0"><a [routerLink]="" class="teal darken-1">http://themeforest.net/<span
|
||||
class="text-bold-600">modern</span>/microdosing <i class="la la-angle-down"
|
||||
aria-hidden="true"></i></a></p>
|
||||
<p>Lobortis erat rutrum dignissim. Colonel <span class="text-bold-600">Responsive Bootstrap Admin
|
||||
Template</span> Ut tellus dui, rhoncus quis vulputate non, sodales ac ex. Fusce interdum
|
||||
efficitur purus quis viverra. Vivamus eros urna, scelerisque ac enim...</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="media">
|
||||
<div class="media-body">
|
||||
<p class="lead mb-0"><a [routerLink]="">Aesthetic neutra <span class="text-bold-600">freegan</span>,
|
||||
mlkshk literally</a></p>
|
||||
<p class="mb-0"><a [routerLink]="" class="teal darken-1">http://envato.com/literally/<span
|
||||
class="text-bold-600">modern</span>/ <i class="la la-angle-down" aria-hidden="true"></i></a>
|
||||
</p>
|
||||
<p><span class="text-muted">June 30, 2017 - </span><span class="text-bold-600">Humblebrag</span>
|
||||
mixtape tumblr small batch, marfa blog mumblecore retro sustainable bitters normcore brunch
|
||||
whatever helvetica. <span class="text-bold-600">Humblebrag mumblecore </span>beard irony, XOXO
|
||||
craft beer kogi letterpress freegan vegan disrupt...</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="media">
|
||||
<div class="media-body">
|
||||
<p class="lead mb-0"><a [routerLink]=""><span class="text-bold-600">iCell</span> - disrupt butcher
|
||||
pitchfork.</a></p>
|
||||
<p class="mb-0"><a [routerLink]="" class="teal darken-1">http://google.com/<span
|
||||
class="text-bold-600">icell</span>/ <i class="la la-angle-down" aria-hidden="true"></i></a>
|
||||
</p>
|
||||
<ul class="list-inline list-inline-pipe text-muted">
|
||||
<li>
|
||||
<i class="la la-star yellow darken-2"></i>
|
||||
<i class="la la-star yellow darken-2"></i>
|
||||
<i class="la la-star-half yellow darken-2"></i>
|
||||
<i class="la la-star-outline yellow darken-2"></i>
|
||||
<i class="la la-star-outline yellow darken-2"></i> 2.5 stars
|
||||
</li>
|
||||
<li>590 votes</li>
|
||||
<li>US$ 399.00</li>
|
||||
<li>In stock</li>
|
||||
</ul>
|
||||
<p><span class="text-muted">March 23, 2017 - </span>Church-key selfies bitters man bun
|
||||
post-ironic. <span class="text-bold-600">8-bit 3 wolf moon</span> drinking vinegar, direct trade
|
||||
plaid cred hashtag offal. Fap XOXO chambray, intelligentsia kogi keytar flexitarian cardigan
|
||||
kale chips food truck.</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="media">
|
||||
<div class="media-body">
|
||||
<p class="lead mb-0"><a [routerLink]=""><span class="text-bold-600">Run it</span> - up the flagpole, ping
|
||||
the boss</a></p>
|
||||
<p class="mb-0"><a [routerLink]="" class="teal darken-1">http://mail.example.com/<span
|
||||
class="text-bold-600">run</span>/ <i class="la la-angle-down" aria-hidden="true"></i></a>
|
||||
</p>
|
||||
<p>Pixel pushing horsehead offer that jerk from finance really threw me under the bus, but best
|
||||
practices new economy and take five, punch the tree, and come back in here with a clear head...
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="media">
|
||||
<div class="media-body">
|
||||
<p class="lead mb-0"><a [routerLink]=""><span class="text-bold-600">Keytar</span> - jean shorts disrupt
|
||||
poutine</a></p>
|
||||
<p class="mb-0"><a [routerLink]="" class="teal darken-1">http://demo.keytar.com/<span
|
||||
class="text-bold-600">jean</span>/ <i class="la la-angle-down" aria-hidden="true"></i></a>
|
||||
</p>
|
||||
<ul class="list-inline list-inline-pipe text-muted">
|
||||
<li>
|
||||
<i class="la la-star yellow darken-2"></i>
|
||||
<i class="la la-star yellow darken-2"></i>
|
||||
<i class="la la-star yellow darken-2"></i>
|
||||
<i class="la la-star-outline yellow darken-2"></i>
|
||||
<i class="la la-star-outline yellow darken-2"></i> 3 stars
|
||||
</li>
|
||||
<li>50 votes</li>
|
||||
<li>US$ 4.00</li>
|
||||
<li>Out Of stock</li>
|
||||
</ul>
|
||||
<p><span class="text-muted">Jan 14, 2017 - </span><span class="text-bold-600">Brooklyn</span>
|
||||
ethical sartorial gastropub shabby chic photo booth. Bushwick roof party kogi pitchfork food
|
||||
truck heirloom, street art occupy blog try-hard single-origin coffee chillwave.</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="media">
|
||||
<div class="media-body">
|
||||
<p class="lead mb-0"><a [routerLink]=""><span class="text-bold-600">Helicopter</span> - view drop-dead
|
||||
date</a></p>
|
||||
<p class="mb-0"><a [routerLink]="" class="teal darken-1">http://demo.helicopter.com/<span
|
||||
class="text-bold-600">date</span>/ <i class="la la-angle-down" aria-hidden="true"></i></a>
|
||||
</p>
|
||||
<p><span class="text-muted">Sept 18, 2017 - </span> Sacred cow execute pig in a python. We need to
|
||||
socialize the comms with the wider stakeholder community collaboration through advanced
|
||||
technlogy three-martini lunch, nor bench mark, hit the ground running. Value prop collaboration
|
||||
through advanced technlogy. Face time out of the loop. Forcing function.</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="text-center">
|
||||
<nav aria-label="Page navigation">
|
||||
<ul class="pagination pagination-separate pagination-round pagination-flat">
|
||||
<li class="page-item">
|
||||
<a class="page-link"[routerLink]="" aria-label="Previous">
|
||||
<span aria-hidden="true">« Prev</span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link"[routerLink]="">1</a></li>
|
||||
<li class="page-item"><a class="page-link"[routerLink]="">2</a></li>
|
||||
<li class="page-item active"><a class="page-link"[routerLink]="">3</a></li>
|
||||
<li class="page-item"><a class="page-link"[routerLink]="">4</a></li>
|
||||
<li class="page-item"><a class="page-link"[routerLink]="">5</a></li>
|
||||
<li class="page-item">
|
||||
<a class="page-link"[routerLink]="" aria-label="Next">
|
||||
<span aria-hidden="true">Next »</span>
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-4">
|
||||
<div class="card border-grey border-lighten-2">
|
||||
<div class="card-body px-0">
|
||||
<h4 class="card-title">Modern Admin</h4>
|
||||
<h6 class="card-subtitle text-muted">Angular 11+ Bootstrap 5 Admin Dashboard Template</h6>
|
||||
</div>
|
||||
<img class="img-fluid" src="../../../../../assets/images/portfolio/width-600/portfolio-3.jpg"
|
||||
alt="logo">
|
||||
<div class="card-body px-0">
|
||||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the
|
||||
card's content.<a [routerLink]="">Wikipedia</a></p>
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item"><strong>Website :</strong> <a [routerLink]=""
|
||||
class="card-link">https://pixinvent.com/</a></li>
|
||||
<li class="list-group-item"><strong>Customer service :</strong> 022 8888 9999</li>
|
||||
<li class="list-group-item"><strong>Founder :</strong> PIXINVENT</li>
|
||||
<li class="list-group-item"><strong>Founded :</strong> 2018</li>
|
||||
<li class="list-group-item"><strong>Support:</strong> <a [routerLink]="">support@pixinvent.com</a></li>
|
||||
</ul>
|
||||
<div class="py-1 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 mr-1 mb-1 btn-outline-github"><span
|
||||
class="la la-github font-medium-4"></span></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body px-0">
|
||||
<p class="text-bold-600">People also search for</p>
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<img class="img-fluid rounded" src="../../../../../assets/images/gallery/11.jpg"
|
||||
alt="Image description">
|
||||
<a [routerLink]="" class="font-small-2">Ashoka</a>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<img class="img-fluid rounded" src="../../../../../assets/images/gallery/12.jpg"
|
||||
alt="Image description">
|
||||
<a [routerLink]="" class="font-small-2">Materialize</a>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<img class="img-fluid rounded" src="../../../../../assets/images/gallery/13.jpg"
|
||||
alt="Image description">
|
||||
<a [routerLink]="" class="font-small-2">HTML </a>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<img class="img-fluid rounded" src="../../../../../assets/images/gallery/14.jpg"
|
||||
alt="Image description">
|
||||
<a [routerLink]="" class="font-small-2">Ashoka</a>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<img class="img-fluid rounded" src="../../../../../assets/images/gallery/25.jpg"
|
||||
alt="Image description">
|
||||
<a [routerLink]="" class="font-small-2">Materialize</a>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<img class="img-fluid rounded" src="../../../../../assets/images/gallery/23.jpg"
|
||||
alt="Image description">
|
||||
<a [routerLink]="" class="font-small-2">HTML </a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!--/ Search form -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
|
||||
|
||||
import { SearchWebsiteComponent } from './search-website.component';
|
||||
|
||||
describe('SearchWebsiteComponent', () => {
|
||||
let component: SearchWebsiteComponent;
|
||||
let fixture: ComponentFixture<SearchWebsiteComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ SearchWebsiteComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(SearchWebsiteComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,36 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-search-website',
|
||||
templateUrl: './search-website.component.html',
|
||||
styleUrls: ['./search-website.component.css']
|
||||
})
|
||||
export class SearchWebsiteComponent implements OnInit {
|
||||
|
||||
public breadcrumb: any;
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
this.breadcrumb = {
|
||||
'mainlabel': 'Search Website',
|
||||
'links': [
|
||||
{
|
||||
'name': 'Home',
|
||||
'isLink': true,
|
||||
'link': '/dashboard/sales'
|
||||
},
|
||||
{
|
||||
'name': 'Search',
|
||||
'isLink': true,
|
||||
'link': '#'
|
||||
},
|
||||
{
|
||||
'name': 'Search Website',
|
||||
'isLink': false
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
14
src/app/content/pages/search/search.module.spec.ts
Normal file
14
src/app/content/pages/search/search.module.spec.ts
Normal file
@@ -0,0 +1,14 @@
|
||||
import { SearchModule } from './search.module';
|
||||
|
||||
|
||||
describe('PagesModule', () => {
|
||||
let searchModule: SearchModule;
|
||||
|
||||
beforeEach(() => {
|
||||
searchModule = new SearchModule();
|
||||
});
|
||||
|
||||
it('should create an instance', () => {
|
||||
expect(searchModule).toBeTruthy();
|
||||
});
|
||||
});
|
||||
36
src/app/content/pages/search/search.module.ts
Normal file
36
src/app/content/pages/search/search.module.ts
Normal file
@@ -0,0 +1,36 @@
|
||||
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { SearchWebsiteComponent } from './search-website/search-website.component';
|
||||
import { SearchImagesComponent } from './search-images/search-images.component';
|
||||
import { SearchVideosComponent } from './search-videos/search-videos.component';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
|
||||
import { BreadcrumbModule } from 'src/app/_layout/breadcrumb/breadcrumb.module';
|
||||
import { NgxPhotoswipeModule, LightboxAdapter } from '@fnxone/ngx-photoswipe';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
NgxPhotoswipeModule,
|
||||
NgbModule,
|
||||
BreadcrumbModule,
|
||||
RouterModule.forChild([
|
||||
{
|
||||
path: 'searchWebsite',
|
||||
component: SearchWebsiteComponent
|
||||
},
|
||||
{
|
||||
path: 'searchImages',
|
||||
component: SearchImagesComponent
|
||||
},
|
||||
{
|
||||
path: 'searchVideos',
|
||||
component: SearchVideosComponent
|
||||
}
|
||||
]),
|
||||
],
|
||||
schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
|
||||
declarations: [SearchWebsiteComponent, SearchImagesComponent, SearchVideosComponent],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class SearchModule { }
|
||||
25
src/app/content/pages/social-feed/social-feed.module.ts
Normal file
25
src/app/content/pages/social-feed/social-feed.module.ts
Normal file
@@ -0,0 +1,25 @@
|
||||
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { SocialFeedComponent } from './social-feed/social-feed.component';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { BreadcrumbModule } from 'src/app/_layout/breadcrumb/breadcrumb.module';
|
||||
import { MatchHeightModule } from '../../partials/general/match-height/match-height.module';
|
||||
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
|
||||
|
||||
@NgModule({
|
||||
declarations: [SocialFeedComponent],
|
||||
imports: [
|
||||
CommonModule,
|
||||
BreadcrumbModule,
|
||||
NgbModule,
|
||||
MatchHeightModule,
|
||||
RouterModule.forChild([
|
||||
{
|
||||
path: 'social-feed',
|
||||
component: SocialFeedComponent
|
||||
},
|
||||
]),
|
||||
],
|
||||
schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
|
||||
})
|
||||
export class SocialFeedModule { }
|
||||
@@ -0,0 +1,4 @@
|
||||
:host ::ng-deep .nav.nav-tabs .nav-item .nav-link {
|
||||
padding: 1.5rem 0.7rem !important;
|
||||
display: inline-flex;
|
||||
}
|
||||
@@ -0,0 +1,589 @@
|
||||
<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">
|
||||
<!-- User Feed -->
|
||||
<section id="user-feed">
|
||||
|
||||
<!-- Left Side Content -->
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<img src="../../../../../assets/images/gallery/timeline.jpg" class="img-fluid rounded" alt="timeline image">
|
||||
<div class="user-data text-center bg-white rounded pb-2 mb-md-2">
|
||||
<img src="../../../../../assets/images/portrait/large/avatar-l-1.png"
|
||||
class="img-fluid rounded-circle width-150 profile-image shadow-lg border border-3" alt="timeline image">
|
||||
<h4 class="mt-1 mb-0">Elaine Dreyfuss</h4>
|
||||
<p class="m-0">San Francisco, CA</p>
|
||||
</div>
|
||||
<nav class="navbar navbar-expand-lg nav-margin">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
|
||||
<li class="nav-item px-2 active">
|
||||
<a [routerLink]="" class="nav-link">Home</a>
|
||||
</li>
|
||||
<li class="nav-item px-2">
|
||||
<a [routerLink]="" class="nav-link">Friends</a>
|
||||
</li>
|
||||
<li class="nav-item px-2">
|
||||
<a [routerLink]="" class="nav-link">About</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<div class="navbar-text">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item px-2">
|
||||
<a [routerLink]="" class="nav-link">Photos</a>
|
||||
</li>
|
||||
<li class="nav-item px-2">
|
||||
<a [routerLink]="" class="nav-link">Videos</a>
|
||||
</li>
|
||||
<li class="nav-item px-2">
|
||||
<a [routerLink]="" class="nav-link">More</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- </div> -->
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Profile Intro -->
|
||||
<div class="row">
|
||||
<div class="col-lg-3 col-md-6 col-sm-12">
|
||||
<div class="card shadow-none">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Profile Intro</h5>
|
||||
<hr>
|
||||
<div class="about-me mt-2">
|
||||
<h5 class="card-title mb-1">About Me</h5>
|
||||
<p class="font-small-3">Hi, I’m Elaine Dreyfuss, I’m 26 & I work as a Digital Designer.</p>
|
||||
</div>
|
||||
<div class="favourite-show mt-2">
|
||||
<h5 class="card-title mb-1">Favourite TV Shows</h5>
|
||||
<p class="font-small-3">Breaking Good, RedDevil, People of Interest, The Running Dead, Found,
|
||||
American Guy.</p>
|
||||
</div>
|
||||
<div class="favourite-band mt-2">
|
||||
<h5 class="card-title mb-1">Favourite Music Bands</h5>
|
||||
<p class="font-small-3">Arctic Monkeys, Bloc Party, People of Interest, The Running Dead,
|
||||
Found, American Guy.</p>
|
||||
</div>
|
||||
<div class="favourite-food mt-2">
|
||||
<h5 class="card-title mb-1">Favourite Food</h5>
|
||||
<p class="font-small-3">Pizza, burger, Guacamole, Tomato Salsa, Enchiladas, Guilt-Free Chilli</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- friends-list -->
|
||||
<div class="card shadow-none mt-2">
|
||||
<div class="card-body">
|
||||
<div class="friends-list">
|
||||
<h5 class="card-title mb-1">Friends List</h5>
|
||||
<hr>
|
||||
<span>
|
||||
<img src="../../../../../assets/images/portrait/medium/avatar-m-1.png" alt=""
|
||||
class="img-fluid rounded-circle width-30 mrb-5px">
|
||||
<img src="../../../../../assets/images/portrait/medium/avatar-m-2.png" alt=""
|
||||
class="img-fluid rounded-circle width-30 mrb-5px">
|
||||
<img src="../../../../../assets/images/portrait/medium/avatar-m-3.png" alt=""
|
||||
class="img-fluid rounded-circle width-30 mrb-5px">
|
||||
<img src="../../../../../assets/images/portrait/medium/avatar-m-4.png" alt=""
|
||||
class="img-fluid rounded-circle width-30 mrb-5px">
|
||||
<img src="../../../../../assets/images/portrait/medium/avatar-m-5.png" alt=""
|
||||
class="img-fluid rounded-circle width-30 mrb-5px">
|
||||
<img src="../../../../../assets/images/portrait/medium/avatar-m-6.png" alt=""
|
||||
class="img-fluid rounded-circle width-30 mrb-5px">
|
||||
<img src="../../../../../assets/images/portrait/medium/avatar-m-7.png" alt=""
|
||||
class="img-fluid rounded-circle width-30 mrb-5px">
|
||||
<img src="../../../../../assets/images/portrait/medium/avatar-m-8.png" alt=""
|
||||
class="img-fluid rounded-circle width-30 mrb-5px">
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- My Spotify Playlist -->
|
||||
<div class="card shadow-none mt-2">
|
||||
<div class="card-body">
|
||||
<div class="spotify-playlist">
|
||||
<h5 class="card-title mb-1">My Spotify Playlist</h5>
|
||||
|
||||
<div class="row mt-2">
|
||||
<div class="col-3">
|
||||
<img src="../../../../../assets/images/gallery/1.jpg" alt="" class="img-fluid width-30">
|
||||
</div>
|
||||
<div class="col-6 font-small-3 pl-0">
|
||||
<h5 class="m-0">All Around</h5>
|
||||
<p class="m-0">justin bieber</p>
|
||||
</div>
|
||||
<div class="col-3 p-0">
|
||||
<p>4:56</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-2">
|
||||
<div class="col-3">
|
||||
<img src="../../../../../assets/images/gallery/2.jpg" alt="" class="img-fluid width-30">
|
||||
</div>
|
||||
<div class="col-6 font-small-3 pl-0">
|
||||
<p class="m-0">All I Want</p>
|
||||
<p class="m-0">justin bieber</p>
|
||||
</div>
|
||||
<div class="col-3 p-0">
|
||||
<p>4:56</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-2">
|
||||
<div class="col-3">
|
||||
<img src="../../../../../assets/images/gallery/3.jpg" alt="" class="img-fluid width-30">
|
||||
</div>
|
||||
<div class="col-6 font-small-3 pl-0">
|
||||
<p class="m-0">All Matters</p>
|
||||
<p class="m-0">justin bieber</p>
|
||||
</div>
|
||||
<div class="col-3 p-0">
|
||||
<p>4:56</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-2">
|
||||
<div class="col-3">
|
||||
<img src="../../../../../assets/images/gallery/4.jpg" alt="" class="img-fluid width-30">
|
||||
</div>
|
||||
<div class="col-6 font-small-3 pl-0">
|
||||
<p class="m-0">As Long</p>
|
||||
<p class="m-0">justin bieber</p>
|
||||
</div>
|
||||
<div class="col-3 p-0">
|
||||
<p>4:56</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-2">
|
||||
<div class="col-3">
|
||||
<img src="../../../../../assets/images/gallery/5.jpg" alt="" class="img-fluid width-30">
|
||||
</div>
|
||||
<div class="col-6 font-small-3 pl-0">
|
||||
<p class="m-0">Beauty Beat</p>
|
||||
<p class="m-0">justin bieber</p>
|
||||
</div>
|
||||
<div class="col-3 p-0">
|
||||
<p>4:56</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Twitter Feed -->
|
||||
<div class="card shadow-none mt-2">
|
||||
<div class="card-body">
|
||||
<div class="twitter-feed">
|
||||
<h5 class="card-title mb-1">Twitter Feed</h5>
|
||||
<hr>
|
||||
<div class="row mt-3">
|
||||
<div class="col-3">
|
||||
<img src="../../../../../assets/images/icons/twitter-avatar1.png" alt="" class="img-fluid">
|
||||
</div>
|
||||
<div class="col-9 font-small-3 pl-0">
|
||||
<p class="m-0">I just submitted this instagram Redesign concept</p>
|
||||
<p class="m-0">@james_spiegelOK</p>
|
||||
</div>
|
||||
<div class="col-12 font-small-3 mt-1">
|
||||
<p class="primary m-0">#Dowboy #profile</p>
|
||||
<p>2 hours ago</p>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="m-0">
|
||||
<div class="row mt-3">
|
||||
<div class="col-3">
|
||||
<img src="../../../../../assets/images/icons/twitter-avatar1.png" alt="" class="img-fluid">
|
||||
</div>
|
||||
<div class="col-9 font-small-3 pl-0">
|
||||
<p class="m-0">I just submitted this instagram Redesign concept</p>
|
||||
<p class="m-0">@james_spiegelOK</p>
|
||||
</div>
|
||||
<div class="col-12 font-small-3 mt-1">
|
||||
<p class="primary m-0">#Dowboy #profile</p>
|
||||
<p>2 hours ago</p>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="m-0">
|
||||
<div class="row mt-3">
|
||||
<div class="col-3">
|
||||
<img src="../../../../../assets/images/icons/twitter-avatar1.png" alt="" class="img-fluid">
|
||||
</div>
|
||||
<div class="col-9 font-small-3 pl-0">
|
||||
<p class="m-0">I just submitted this instagram Redesign concept</p>
|
||||
<p class="m-0">@james_spiegelOK</p>
|
||||
</div>
|
||||
<div class="col-12 font-small-3 mt-1">
|
||||
<p class="primary m-0">#Dowboy #profile</p>
|
||||
<p>2 hours ago</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Feed Section -->
|
||||
<div class="col-lg-6 col-md-6 col-sm-12">
|
||||
<!-- Write Post -->
|
||||
<div class="card shadow-none">
|
||||
<div class="catd-body">
|
||||
<div class="feed-tabs">
|
||||
<ul ngbNav #nav="ngbNav" class="justify-content-start nav nav-tabs">
|
||||
<li [ngbNavItem]="1">
|
||||
<a ngbNavLink><i class="feather ft-activity"></i>Status</a>
|
||||
</li>
|
||||
<li [ngbNavItem]="2">
|
||||
<a ngbNavLink><i class="feather ft-camera"></i>Multimedia</a>
|
||||
</li>
|
||||
<li [ngbNavItem]="3">
|
||||
<a ngbNavLink><i class="feather ft-edit-2"></i>Blog Post</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div [ngbNavOutlet]="nav"></div>
|
||||
<div class="tab-content" id="myTabContent">
|
||||
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab"></div>
|
||||
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab"></div>
|
||||
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="write-post">
|
||||
<div class="form-group">
|
||||
<textarea class="form-control border-0" id="exampleFormControlTextarea1" rows="5"></textarea>
|
||||
</div>
|
||||
<hr class="m-0">
|
||||
<div class="row px-1">
|
||||
<div class="col-6 pt-2">
|
||||
<i class="feather ft-image ml-1 mr-2 mr-sm-0 h3"></i> <i
|
||||
class="feather ft-monitor mr-2 mr-sm-0 h3"></i>
|
||||
<i class="feather ft-map-pin h3"></i>
|
||||
</div>
|
||||
<div class="col-6 pt-1">
|
||||
<button type="button" class="btn btn-primary btn-min-width btn-glow mr-1 mb-1 pull-right">Post
|
||||
Status</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- User Post 1 -->
|
||||
<div class="card shadow-none">
|
||||
<div class="catd-body">
|
||||
<div class="row p-2">
|
||||
<div class="col-sm-6">
|
||||
<div class="row">
|
||||
<div class="col-lg-4 col-3">
|
||||
<img src="../../../../../assets/images/portrait/medium/avatar-m-8.png" alt=""
|
||||
class="img-fluid rounded-circle width-50">
|
||||
</div>
|
||||
<div class="col-lg-8 col-7 p-0">
|
||||
<h5 class="m-0">Elaine Dreyfuss</h5>
|
||||
<p>2 hours ago</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<i class="feather ft-more-vertical pull-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="write-post">
|
||||
<div class="col-sm-12 px-2">
|
||||
<p>When searching for videos of a different singer, Scooter Braun, a former marketing
|
||||
executive of So So Def Recordings, clicked on one of Bieber's 2007 videos by</p>
|
||||
</div>
|
||||
<hr class="m-0">
|
||||
<div class="row p-1">
|
||||
<div class="col-6">
|
||||
<div class="row">
|
||||
<div class="col-4 pr-0">
|
||||
<span><i class="feather ft-heart h4 align-middle danger"></i> 120</span>
|
||||
</div>
|
||||
<div class="col-8 pl-0">
|
||||
<ul class="list-unstyled users-list m-0">
|
||||
<li data-toggle="tooltip" data-popup="tooltip-custom" data-original-title="John Doe"
|
||||
class="avatar avatar-sm pull-up">
|
||||
<img class="media-object rounded-circle"
|
||||
src="../../../../../assets/images/portrait/small/avatar-s-19.png" alt="Avatar">
|
||||
</li>
|
||||
<li data-toggle="tooltip" data-popup="tooltip-custom"
|
||||
data-original-title="Katherine Nichols" class="avatar avatar-sm pull-up">
|
||||
<img class="media-object rounded-circle"
|
||||
src="../../../../../assets/images/portrait/small/avatar-s-18.png" alt="Avatar">
|
||||
</li>
|
||||
<li data-toggle="tooltip" data-popup="tooltip-custom" data-original-title="Joseph Weaver"
|
||||
class="avatar avatar-sm pull-up">
|
||||
<img class="media-object rounded-circle"
|
||||
src="../../../../../assets/images/portrait/small/avatar-s-17.png" alt="Avatar">
|
||||
</li>
|
||||
<li class="avatar avatar-sm">
|
||||
<span class="badge badge-info">+4 more</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="pull-right">
|
||||
<span class="pr-1"><i class="feather ft-message-square h4 align-middle"></i> 44</span>
|
||||
<span class="pr-1"><i class="feather ft-corner-up-right h4 align-middle"></i> 23</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- User Post 2 -->
|
||||
<div class="card shadow-none">
|
||||
<div class="catd-body">
|
||||
<div class="row p-2">
|
||||
<div class="col-6">
|
||||
<div class="row">
|
||||
<div class="col-lg-4 col-3">
|
||||
<img src="../../../../../assets/images/portrait/medium/avatar-m-9.png" alt=""
|
||||
class="img-fluid rounded-circle width-50">
|
||||
</div>
|
||||
<div class="col-lg-8 col-7 p-0">
|
||||
<h5 class="m-0">Elaine Dreyfuss</h5>
|
||||
<p>4 hours ago</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<i class="feather ft-more-vertical pull-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="write-post">
|
||||
<div class="col-sm-12 px-2">
|
||||
<p>When searching for videos of a different singer, Scooter Braun, a former marketing
|
||||
executive of So So Def Recordings, clicked on one of Bieber's 2007 videos by</p>
|
||||
</div>
|
||||
<hr class="m-0">
|
||||
<div class="row p-1">
|
||||
<div class="col-6">
|
||||
<div class="row">
|
||||
<div class="col-sm-4 col-3 pr-0">
|
||||
<span><i class="feather ft-heart h4 align-middle danger"></i> 120</span>
|
||||
</div>
|
||||
<div class="col-sm-8 col-7 pl-0">
|
||||
<ul class="list-unstyled users-list m-0">
|
||||
<li data-toggle="tooltip" data-popup="tooltip-custom" data-original-title="John Doe"
|
||||
class="avatar avatar-sm pull-up">
|
||||
<img class="media-object rounded-circle"
|
||||
src="../../../../../assets/images/portrait/small/avatar-s-19.png" alt="Avatar">
|
||||
</li>
|
||||
<li data-toggle="tooltip" data-popup="tooltip-custom"
|
||||
data-original-title="Katherine Nichols" class="avatar avatar-sm pull-up">
|
||||
<img class="media-object rounded-circle"
|
||||
src="../../../../../assets/images/portrait/small/avatar-s-18.png" alt="Avatar">
|
||||
</li>
|
||||
<li data-toggle="tooltip" data-popup="tooltip-custom" data-original-title="Joseph Weaver"
|
||||
class="avatar avatar-sm pull-up">
|
||||
<img class="media-object rounded-circle"
|
||||
src="../../../../../assets/images/portrait/small/avatar-s-17.png" alt="Avatar">
|
||||
</li>
|
||||
<li class="avatar avatar-sm">
|
||||
<span class="badge badge-info">+4 more</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="pull-right">
|
||||
<span class="pr-1"><i class="feather ft-message-square h4 align-middle"></i> 44</span>
|
||||
<span class="pr-1"><i class="feather ft-corner-up-right h4 align-middle"></i> 23</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- User Post 3 -->
|
||||
<div class="card shadow-none">
|
||||
<div class="catd-body">
|
||||
<div class="row p-2">
|
||||
<div class="col-6">
|
||||
<div class="row">
|
||||
<div class="col-lg-4 col-3">
|
||||
<img src="../../../../../assets/images/portrait/medium/avatar-m-8.png" alt=""
|
||||
class="img-fluid rounded-circle width-50">
|
||||
</div>
|
||||
<div class="col-lg-8 col-7 p-0">
|
||||
<h5 class="m-0">Elaine Dreyfuss</h5>
|
||||
<p>2 hours ago</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<i class="feather ft-more-vertical pull-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="write-post">
|
||||
<div class="col-sm-12 px-2 pb-2">
|
||||
<img src="../../../../../assets/images/gallery/party-flyer.jpg" alt="" class="img-fluid">
|
||||
</div>
|
||||
<hr class="m-0">
|
||||
<div class="row p-1">
|
||||
<div class="col-6">
|
||||
<div class="row">
|
||||
<div class="col-lg-4 col-3 pr-0">
|
||||
<span><i class="feather ft-heart h4 align-middle danger"></i> 120</span>
|
||||
</div>
|
||||
<div class="col-lg-8 col-7 pl-0">
|
||||
<ul class="list-unstyled users-list m-0">
|
||||
<li data-toggle="tooltip" data-popup="tooltip-custom" data-original-title="John Doe"
|
||||
class="avatar avatar-sm pull-up">
|
||||
<img class="media-object rounded-circle"
|
||||
src="../../../../../assets/images/portrait/small/avatar-s-19.png" alt="Avatar">
|
||||
</li>
|
||||
<li data-toggle="tooltip" data-popup="tooltip-custom"
|
||||
data-original-title="Katherine Nichols" class="avatar avatar-sm pull-up">
|
||||
<img class="media-object rounded-circle"
|
||||
src="../../../../../assets/images/portrait/small/avatar-s-18.png" alt="Avatar">
|
||||
</li>
|
||||
<li data-toggle="tooltip" data-popup="tooltip-custom" data-original-title="Joseph Weaver"
|
||||
class="avatar avatar-sm pull-up">
|
||||
<img class="media-object rounded-circle"
|
||||
src="../../../../../assets/images/portrait/small/avatar-s-17.png" alt="Avatar">
|
||||
</li>
|
||||
<li class="avatar avatar-sm">
|
||||
<span class="badge badge-info">+4 more</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="pull-right">
|
||||
<span class="pr-1"><i class="feather ft-message-square h4 align-middle"></i> 44</span>
|
||||
<span class="pr-1"><i class="feather ft-corner-up-right h4 align-middle"></i> 23</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Birthday Card -->
|
||||
<div class="col-lg-3 col-md-12 col-sm-12">
|
||||
<div class="card text-white bg-primary mb-3">
|
||||
<div class="card-header">
|
||||
<h3><i class="feather ft-award white"></i> <i class="feather ft-more-horizontal white pull-right"></i>
|
||||
</h3>
|
||||
</div>
|
||||
<div class="card-body pt-0">
|
||||
<img src="../../../../../assets/images/portrait/medium/avatar-m-4.png" alt=""
|
||||
class="img-fluid rounded-circle width-50">
|
||||
<p>Today is</p>
|
||||
<h3 class="white">Marina Valentine’s Birthday!</h3>
|
||||
<p class="card-text">Some quick example text to build on the card.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Last Photos -->
|
||||
<div class="card shadow-none mt-2">
|
||||
<div class="card-body">
|
||||
<div class="last-photos">
|
||||
<h5 class="card-title mb-1">Last Photos</h5>
|
||||
<hr>
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<img src="../../../../../assets/images/backgrounds/bg-1.jpg" alt=""
|
||||
class="img-fluid mb-2 rounded">
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<img src="../../../../../assets/images/backgrounds/bg-2.jpg" alt=""
|
||||
class="img-fluid mb-2 rounded">
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<img src="../../../../../assets/images/backgrounds/bg-3.jpg" alt=""
|
||||
class="img-fluid mb-2 rounded">
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<img src="../../../../../assets/images/backgrounds/bg-4.jpg" alt=""
|
||||
class="img-fluid mb-2 rounded">
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<img src="../../../../../assets/images/backgrounds/bg-5.jpg" alt=""
|
||||
class="img-fluid mb-2 rounded">
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<img src="../../../../../assets/images/backgrounds/bg-6.jpg" alt=""
|
||||
class="img-fluid mb-2 rounded">
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<img src="../../../../../assets/images/backgrounds/bg-7.jpg" alt=""
|
||||
class="img-fluid mb-2 rounded">
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<img src="../../../../../assets/images/backgrounds/bg-8.jpg" alt=""
|
||||
class="img-fluid mb-2 rounded">
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<img src="../../../../../assets/images/backgrounds/bg-9.jpg" alt=""
|
||||
class="img-fluid mb-2 rounded">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Last Blog -->
|
||||
<div class="card shadow-none mt-2">
|
||||
<div class="card-body">
|
||||
<div class="last-blog">
|
||||
<h5 class="card-title mb-1">Last Blog</h5>
|
||||
<hr>
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<h4>The emergence and growth of blogs</h4>
|
||||
<p class="mt-1">Many blogs provide commentary on a particular subject or topic digital
|
||||
images.</p>
|
||||
<p class="mt-3">5 hours ago</p>
|
||||
<hr>
|
||||
</div>
|
||||
<div class="col-sm-12">
|
||||
<h4>On 16 February 2011</h4>
|
||||
<p class="mt-1">Many blogs provide commentary on a particular subject or topic digital
|
||||
images.</p>
|
||||
<p class="mt-3">10 hours ago</p>
|
||||
<hr>
|
||||
</div>
|
||||
<div class="col-sm-12">
|
||||
<h4>With posts written by large numbers</h4>
|
||||
<p class="mt-1">Many blogs provide commentary on a particular subject or topic digital
|
||||
images.</p>
|
||||
<p class="mt-3">23 hours ago</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Last Video -->
|
||||
<div class="card shadow-none mt-2">
|
||||
<div class="card-body">
|
||||
<div class="last-video">
|
||||
<h5 class="card-title mb-1">Last Video</h5>
|
||||
<hr>
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="embed-responsive embed-responsive-16by9">
|
||||
<iframe src="https://www.youtube.com/embed/fRh_vgS2dFE" SameSite="Secure"
|
||||
allow="autoplay; encrypted-media" allowfullscreen></iframe>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="embed-responsive embed-responsive-16by9">
|
||||
<iframe width="1280" height="720" src="https://www.youtube.com/embed/cBVGlBWQzuc"
|
||||
SameSite="Secure" allow="autoplay; encrypted-media" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!--/ User Feed -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
|
||||
|
||||
import { SocialFeedComponent } from './social-feed.component';
|
||||
|
||||
describe('SocialFeedComponent', () => {
|
||||
let component: SocialFeedComponent;
|
||||
let fixture: ComponentFixture<SocialFeedComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ SocialFeedComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(SocialFeedComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,40 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-social-feed',
|
||||
templateUrl: './social-feed.component.html',
|
||||
styleUrls: ['./social-feed.component.css']
|
||||
})
|
||||
export class SocialFeedComponent implements OnInit {
|
||||
|
||||
public breadcrumb: any;
|
||||
currentOrientation = 'horizontal';
|
||||
start: any;
|
||||
end: any;
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
this.breadcrumb = {
|
||||
'mainlabel': 'Social Feed',
|
||||
'links': [
|
||||
{
|
||||
'name': 'Home',
|
||||
'isLink': true,
|
||||
'link': '/dashboard/sales'
|
||||
},
|
||||
{
|
||||
'name': 'Pages',
|
||||
'isLink': true,
|
||||
'link': '#'
|
||||
},
|
||||
{
|
||||
'name': 'Social Feed',
|
||||
'isLink': false
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
23
src/app/content/pages/timelines/custom-lightbox-adapter.ts
Normal file
23
src/app/content/pages/timelines/custom-lightbox-adapter.ts
Normal file
@@ -0,0 +1,23 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { LightboxAdapter } from 'angular2_photoswipe';
|
||||
|
||||
@Injectable()
|
||||
export class CustomLightboxAdapter extends LightboxAdapter {
|
||||
allowPanToNext = true;
|
||||
spacing = 0.12;
|
||||
bgOpacity = 0.8;
|
||||
mouseUsed = false;
|
||||
loop = true;
|
||||
pinchToClose = true;
|
||||
closeOnScroll = true;
|
||||
closeOnVerticalDrag = true;
|
||||
hideAnimationDuration = 333;
|
||||
showAnimationDuration = 333;
|
||||
showHideOpacity = false;
|
||||
escKey = true;
|
||||
arrowKeys = true;
|
||||
shareEl = true;
|
||||
getPageURLForShare = function(shareButtonData) {
|
||||
return window.location.href;
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
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
|
||||
;
|
||||
}
|
||||
@@ -0,0 +1,534 @@
|
||||
<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">
|
||||
<div id="user-profile">
|
||||
<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"
|
||||
SameSite="Secure"></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 echarts [options]="chartOption"></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>
|
||||
</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]="">Non-ribbon Chord 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>
|
||||
</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>
|
||||
<ul class="timeline">
|
||||
<li class="timeline-line"></li>
|
||||
<!-- /.timeline-line -->
|
||||
|
||||
</ul>
|
||||
<!-- 2014 -->
|
||||
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
|
||||
|
||||
import { TimelinesCenterComponent } from './timelines-center.component';
|
||||
|
||||
describe('TimelinesCenterComponent', () => {
|
||||
let component: TimelinesCenterComponent;
|
||||
let fixture: ComponentFixture<TimelinesCenterComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ TimelinesCenterComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(TimelinesCenterComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,326 @@
|
||||
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-timelines-center',
|
||||
templateUrl: './timelines-center.component.html',
|
||||
styleUrls: ['./timelines-center.component.css']
|
||||
})
|
||||
export class TimelinesCenterComponent 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;
|
||||
chartOption: any;
|
||||
public breadcrumb: any;
|
||||
public zoom: number;
|
||||
|
||||
options = {
|
||||
close: false,
|
||||
expand: true,
|
||||
minimize: false,
|
||||
reload: true
|
||||
};
|
||||
|
||||
@BlockUI('projectWorkOne') blockUIProjectWorkOne: NgBlockUI;
|
||||
@BlockUI('sofiaOrav') blockUISofiaOrav: NgBlockUI;
|
||||
@BlockUI('sofiaOravTwo') blockUISofiaOravTwo: NgBlockUI;
|
||||
|
||||
lat = 40.650002;
|
||||
lng = -73.949997;
|
||||
|
||||
markers: Marker[] = [
|
||||
{
|
||||
lat: this.lat,
|
||||
lng: this.lng,
|
||||
label: ''
|
||||
}
|
||||
];
|
||||
getChordchart() {
|
||||
this.chartOption = {
|
||||
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: this.data['report'].data,
|
||||
},
|
||||
|
||||
// Add custom colors
|
||||
color: ['#666EE8', '#FF9149', '#FF9966', '#FA8E57', '#FF637b', '#5175E0', '#A147F0', '#28D094', '#BABFC7'],
|
||||
|
||||
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]
|
||||
}
|
||||
]
|
||||
};
|
||||
this.option = {
|
||||
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;
|
||||
}
|
||||
}]
|
||||
};
|
||||
}
|
||||
constructor(private chartApiservice: ChartApiService) { }
|
||||
|
||||
ngOnInit() {
|
||||
this.zoom = 15;
|
||||
this.breadcrumb = {
|
||||
'mainlabel': 'Timeline Center',
|
||||
'links': [
|
||||
{
|
||||
'name': 'Home',
|
||||
'isLink': true,
|
||||
'link': '/dashboard/sales'
|
||||
},
|
||||
{
|
||||
'name': 'Timelines',
|
||||
'isLink': true,
|
||||
'link': ''
|
||||
},
|
||||
{
|
||||
'name': 'Timelines Center',
|
||||
'isLink': false
|
||||
}
|
||||
]
|
||||
};
|
||||
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);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
<section class="cd-horizontal-timeline" [ngClass]="{'loaded': loaded}">
|
||||
<div class="timeline">
|
||||
<div class="events-wrapper">
|
||||
<div class="events" #eventsWrapper [style.width.px]="eventsWrapperWidth">
|
||||
<ol>
|
||||
<li *ngFor="let item of timelineElements; let index = index">
|
||||
<a #timelineEvents [routerLink]=""
|
||||
[ngClass]="{'selected': item.selected, 'older-event': index < selectedIndex}"
|
||||
(click)="onEventClick($event, item)">{{item.date | date:dateFormatTop}}</a>
|
||||
<span></span>
|
||||
</li>
|
||||
</ol>
|
||||
<span class="filling-line" aria-hidden="true" #fillingLine></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul class="cd-timeline-navigation">
|
||||
<li>
|
||||
<a [routerLink]="" (click)="onScrollClick($event, false)" class="prev"
|
||||
[ngClass]="{'inactive':prevLinkInactive}">Prev</a>
|
||||
</li>
|
||||
<li>
|
||||
<a [routerLink]="" (click)="onScrollClick($event, true)" class="next"
|
||||
[ngClass]="{'inactive':nextLinkInactive}">Next</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="events-content" *ngIf="showContent">
|
||||
<ol>
|
||||
<li *ngFor="let item of timelineElements; let index = index"
|
||||
[@contentState]="item.selected ? 'active' : (index < selectedIndex ? 'left' : 'right')">
|
||||
<h2 class="text-bold-500">{{item.title}}</h2>
|
||||
<h3 class="text-muted mb-1">
|
||||
<em>{{item.date | date:longDate}}</em>
|
||||
</h3>
|
||||
<p class="lead">{{item.content}}</p>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,347 @@
|
||||
import { Component, OnInit, AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, ElementRef,
|
||||
QueryList, ViewChildren, ViewChild, Input } from '@angular/core';
|
||||
import { trigger, state, style, transition, animate, keyframes } from '@angular/animations';
|
||||
import { TimelineElement } from './timeline-horizontal';
|
||||
|
||||
@Component({
|
||||
selector: 'app-horizontal-timeline-page',
|
||||
templateUrl: './horizontal-timeline-page.component.html',
|
||||
styleUrls: ['./horizontal-timeline-page.component.css'],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
animations: [
|
||||
trigger('contentState', [
|
||||
state('active', style({
|
||||
position: 'relative', 'z-index': 2, opacity: 1, 'left': '100%'
|
||||
})),
|
||||
transition('right => active', [
|
||||
style({
|
||||
transform: 'translateX(100%)'
|
||||
}),
|
||||
animate('400ms ease-in-out', keyframes([
|
||||
style({ opacity: 0, transform: 'translateX(100%)', offset: 0 }),
|
||||
style({ opacity: 1, transform: 'translateX(0%)', offset: 1.0 })
|
||||
]))
|
||||
]),
|
||||
transition('active => right', [
|
||||
style({
|
||||
transform: 'translateX(-100%)'
|
||||
}),
|
||||
animate('400ms ease-in-out', keyframes([
|
||||
style({ opacity: 1, transform: 'translateX(0%)', offset: 0 }),
|
||||
style({ opacity: 0, transform: 'translateX(100%)', offset: 1.0 })
|
||||
]))
|
||||
]),
|
||||
transition('active => left', [
|
||||
style({
|
||||
transform: 'translateX(-100%)'
|
||||
}),
|
||||
animate('400ms ease-in-out', keyframes([
|
||||
style({ opacity: 1, transform: 'translateX(0%)', offset: 0 }),
|
||||
style({ opacity: 0, transform: 'translateX(-100%)', offset: 1.0 })
|
||||
]))
|
||||
]),
|
||||
transition('left => active', [
|
||||
style({
|
||||
transform: 'translateX(100%)'
|
||||
}),
|
||||
animate('400ms ease-in-out', keyframes([
|
||||
style({ opacity: 0, transform: 'translateX(-100%)', offset: 0 }),
|
||||
style({ opacity: 1, transform: 'translateX(0%)', offset: 1.0 })
|
||||
]))
|
||||
]),
|
||||
])
|
||||
]
|
||||
})
|
||||
|
||||
export class HorizontalTimelinePageComponent implements AfterViewInit {
|
||||
|
||||
public breadcrumb: any;
|
||||
prevLinkInactive = true;
|
||||
nextLinkInactive = false;
|
||||
loaded = false;
|
||||
selectedIndex = 0;
|
||||
|
||||
@ViewChild('eventsWrapper', { read: ElementRef }) eventsWrapper: ElementRef;
|
||||
@ViewChild('fillingLine', { read: ElementRef }) fillingLine: ElementRef;
|
||||
@ViewChildren('timelineEvents') timelineEvents: QueryList<ElementRef>;
|
||||
eventsWrapperWidth = 0;
|
||||
private _viewInitialized = false;
|
||||
|
||||
constructor(private _cdr: ChangeDetectorRef) { }
|
||||
|
||||
private _timelineWrapperWidth = 720;
|
||||
|
||||
@Input()
|
||||
set timelineWrapperWidth(value: number) {
|
||||
this._timelineWrapperWidth = value;
|
||||
this._cdr.detectChanges();
|
||||
}
|
||||
|
||||
private _eventsMinDistance = 80;
|
||||
|
||||
@Input()
|
||||
set eventsMinDistance(value: number) {
|
||||
this._eventsMinDistance = value;
|
||||
this.initView();
|
||||
}
|
||||
|
||||
private _timelineElements: TimelineElement[];
|
||||
|
||||
get timelineElements(): TimelineElement[] {
|
||||
return this._timelineElements;
|
||||
}
|
||||
|
||||
@Input()
|
||||
set timelineElements(value: TimelineElement[]) {
|
||||
this._timelineElements = value;
|
||||
this.initView();
|
||||
}
|
||||
|
||||
private _dateFormat = 'dd.MM.yyyy';
|
||||
private _dateFormatTop = 'dd MMM';
|
||||
|
||||
get dateFormat(): string {
|
||||
return this._dateFormat;
|
||||
}
|
||||
|
||||
get dateFormatTop(): string {
|
||||
return this._dateFormatTop;
|
||||
}
|
||||
|
||||
@Input()
|
||||
set dateFormat(value: string) {
|
||||
this._dateFormat = value;
|
||||
this.initView();
|
||||
}
|
||||
|
||||
@Input()
|
||||
set dateFormatTop(value: string) {
|
||||
this._dateFormatTop = value;
|
||||
this.initView();
|
||||
}
|
||||
|
||||
private _disabled = false;
|
||||
|
||||
@Input()
|
||||
set disabled(value: boolean) {
|
||||
this._disabled = value;
|
||||
}
|
||||
|
||||
private _showContent = false;
|
||||
|
||||
get showContent(): boolean {
|
||||
return this._showContent;
|
||||
}
|
||||
|
||||
@Input()
|
||||
set showContent(value: boolean) {
|
||||
this._showContent = value;
|
||||
this._cdr.detectChanges();
|
||||
}
|
||||
|
||||
private static pxToNumber(val: string): number {
|
||||
return Number(val.replace('px', ''));
|
||||
}
|
||||
|
||||
private static getElementWidth(element: Element): number {
|
||||
const computedStyle = window.getComputedStyle(element);
|
||||
if (!computedStyle.width) {
|
||||
return 0;
|
||||
}
|
||||
return HorizontalTimelinePageComponent.pxToNumber(computedStyle.width);
|
||||
}
|
||||
|
||||
private static parentElement(element: any, tagName: string) {
|
||||
if (!element || !element.parentNode) {
|
||||
return null;
|
||||
}
|
||||
|
||||
let parent = element.parentNode;
|
||||
while (true) {
|
||||
if (parent.tagName.toLowerCase() === tagName) {
|
||||
return parent;
|
||||
}
|
||||
parent = parent.parentNode;
|
||||
if (!parent) {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private static getTranslateValue(timeline: Element) {
|
||||
const timelineStyle = window.getComputedStyle(timeline);
|
||||
const timelineTranslate = timelineStyle.getPropertyValue('-webkit-transform') ||
|
||||
timelineStyle.getPropertyValue('-moz-transform') ||
|
||||
timelineStyle.getPropertyValue('-ms-transform') ||
|
||||
timelineStyle.getPropertyValue('-o-transform') ||
|
||||
timelineStyle.getPropertyValue('transform');
|
||||
|
||||
let translateValue = 0;
|
||||
if (timelineTranslate.indexOf('(') >= 0) {
|
||||
const timelineTranslateStr = timelineTranslate
|
||||
.split('(')[1]
|
||||
.split(')')[0]
|
||||
.split(',')[4];
|
||||
translateValue = Number(timelineTranslateStr);
|
||||
}
|
||||
|
||||
return translateValue;
|
||||
}
|
||||
|
||||
private static setTransformValue(element: any, property: any, value: any) {
|
||||
element.style['-webkit-transform'] = property + '(' + value + ')';
|
||||
element.style['-moz-transform'] = property + '(' + value + ')';
|
||||
element.style['-ms-transform'] = property + '(' + value + ')';
|
||||
element.style['-o-transform'] = property + '(' + value + ')';
|
||||
element.style['transform'] = property + '(' + value + ')';
|
||||
}
|
||||
|
||||
private static dayDiff(first: Date, second: Date): number {
|
||||
return Math.round(second.getTime() - first.getTime());
|
||||
}
|
||||
|
||||
private static minLapse(elements: TimelineElement[]): number {
|
||||
if (elements && elements.length && elements.length === 1) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
let result = 0;
|
||||
for (let i = 1; i < elements.length; i++) {
|
||||
const distance = HorizontalTimelinePageComponent.dayDiff(elements[i - 1].date, elements[i].date);
|
||||
result = result ? Math.min(result, distance) : distance;
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
ngAfterViewInit(): void {
|
||||
this._cdr.detach();
|
||||
this._viewInitialized = true;
|
||||
this.initView();
|
||||
}
|
||||
|
||||
onScrollClick(event: Event, forward: boolean) {
|
||||
event.preventDefault();
|
||||
this.updateSlide(this.eventsWrapperWidth, forward);
|
||||
this._cdr.detectChanges();
|
||||
}
|
||||
|
||||
onEventClick(event: Event, selectedItem: TimelineElement) {
|
||||
event.preventDefault();
|
||||
if (this._disabled) {
|
||||
return;
|
||||
}
|
||||
const element = event.target;
|
||||
// detect click on the a single event - show new event content
|
||||
let visibleItem = this._timelineElements[0];
|
||||
this._timelineElements.forEach(function (item: TimelineElement) {
|
||||
if (item.selected && item !== selectedItem) {
|
||||
visibleItem = item;
|
||||
item.selected = false;
|
||||
}
|
||||
});
|
||||
this.selectedIndex = this._timelineElements.indexOf(selectedItem);
|
||||
selectedItem.selected = true;
|
||||
this.updateFilling(element);
|
||||
this._cdr.detectChanges();
|
||||
}
|
||||
|
||||
initTimeline(timeLines: TimelineElement[]) {
|
||||
const eventsMinLapse = HorizontalTimelinePageComponent.minLapse(timeLines);
|
||||
// assign a left position to the single events along the timeline
|
||||
this.setDatePosition(timeLines, this._eventsMinDistance, eventsMinLapse);
|
||||
// assign a width to the timeline
|
||||
this.setTimelineWidth(timeLines, this._eventsMinDistance, eventsMinLapse);
|
||||
// the timeline has been initialize - show it
|
||||
this.loaded = true;
|
||||
}
|
||||
|
||||
updateSlide(timelineTotWidth: number, forward: boolean) {
|
||||
const translateValue = HorizontalTimelinePageComponent.getTranslateValue(this.eventsWrapper.nativeElement);
|
||||
|
||||
if (forward) {
|
||||
this.translateTimeline(translateValue - this._timelineWrapperWidth +
|
||||
this._eventsMinDistance, this._timelineWrapperWidth - timelineTotWidth);
|
||||
} else {
|
||||
this.translateTimeline(translateValue + this._timelineWrapperWidth - this._eventsMinDistance, null);
|
||||
}
|
||||
}
|
||||
|
||||
updateTimelinePosition(element: Element) {
|
||||
const eventStyle = window.getComputedStyle(element);
|
||||
const eventLeft = HorizontalTimelinePageComponent.pxToNumber(eventStyle.getPropertyValue('left'));
|
||||
const translateValue = HorizontalTimelinePageComponent.getTranslateValue(this.eventsWrapper.nativeElement);
|
||||
|
||||
if (eventLeft > this._timelineWrapperWidth - translateValue) {
|
||||
this.translateTimeline(-eventLeft + this._timelineWrapperWidth / 2, this._timelineWrapperWidth - this.eventsWrapperWidth);
|
||||
}
|
||||
}
|
||||
|
||||
translateTimeline(value: number, totWidth: number | null) {
|
||||
// only negative translate value
|
||||
value = (value > 0) ? 0 : value;
|
||||
// do not translate more than timeline width
|
||||
value = ( !(totWidth === null) && value < totWidth ) ? totWidth : value;
|
||||
HorizontalTimelinePageComponent.setTransformValue(this.eventsWrapper.nativeElement, 'translateX', value + 'px');
|
||||
// update navigation arrows visibility
|
||||
this.prevLinkInactive = value === 0;
|
||||
this.nextLinkInactive = value === totWidth;
|
||||
}
|
||||
|
||||
setTimelineWidth(elements: TimelineElement[], width: number, eventsMinLapse: number) {
|
||||
let timeSpan = 100;
|
||||
if (elements.length > 1) {
|
||||
timeSpan = HorizontalTimelinePageComponent.dayDiff(elements[0].date, elements[elements.length - 1].date);
|
||||
}
|
||||
let timeSpanNorm = timeSpan / eventsMinLapse;
|
||||
timeSpanNorm = Math.round(timeSpanNorm) + 4;
|
||||
this.eventsWrapperWidth = timeSpanNorm * width;
|
||||
const aHref = this.eventsWrapper.nativeElement.querySelectorAll('a.selected')[0];
|
||||
this.updateFilling(aHref);
|
||||
this.updateTimelinePosition(aHref);
|
||||
return this.eventsWrapperWidth;
|
||||
|
||||
}
|
||||
|
||||
private updateFilling(element: any) {
|
||||
// change .filling-line length according to the selected event
|
||||
const eventStyle = window.getComputedStyle(element);
|
||||
const eventLeft = eventStyle.getPropertyValue('left');
|
||||
const eventWidth = eventStyle.getPropertyValue('width');
|
||||
const eventLeftNum = HorizontalTimelinePageComponent.pxToNumber(eventLeft) + HorizontalTimelinePageComponent.pxToNumber(eventWidth) / 2;
|
||||
const scaleValue = eventLeftNum / this.eventsWrapperWidth;
|
||||
HorizontalTimelinePageComponent.setTransformValue(this.fillingLine.nativeElement, 'scaleX', scaleValue);
|
||||
}
|
||||
|
||||
private initView(): void {
|
||||
if (!this._viewInitialized) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this._timelineElements && this._timelineElements.length) {
|
||||
for (let i = 0; i < this._timelineElements.length; i++) {
|
||||
if (this._timelineElements[i].selected) {
|
||||
this.selectedIndex = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
this.initTimeline(this._timelineElements);
|
||||
}
|
||||
this._cdr.detectChanges();
|
||||
}
|
||||
|
||||
private setDatePosition(elements: TimelineElement[], min: number, eventsMinLapse: number) {
|
||||
const timelineEventsArray = this.timelineEvents.toArray();
|
||||
let i = 0;
|
||||
for (const component of elements) {
|
||||
const distance = HorizontalTimelinePageComponent.dayDiff(elements[0].date, component.date);
|
||||
const distanceNorm = Math.round(distance / eventsMinLapse);
|
||||
timelineEventsArray[i].nativeElement.style.left = distanceNorm * min + 'px';
|
||||
// span
|
||||
const span: HTMLSpanElement = <HTMLSpanElement>timelineEventsArray[i].nativeElement.parentElement.children[1];
|
||||
const spanWidth = HorizontalTimelinePageComponent.getElementWidth(span);
|
||||
span.style.left = distanceNorm * min + spanWidth / 2 + 'px';
|
||||
i++;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
export interface TimelineElement {
|
||||
date: Date;
|
||||
title: string;
|
||||
selected?: boolean;
|
||||
content: string;
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
<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">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Basic Horizontal Timeline</h4>
|
||||
</div>
|
||||
<div class="card-content collapse show">
|
||||
<div class="card-body">
|
||||
<div class="card-text">
|
||||
<p>This horizontal time line contain just date based post timeline.</p>
|
||||
<app-horizontal-timeline-page [timelineElements]="timeline" [showContent]="true"></app-horizontal-timeline-page>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
|
||||
|
||||
import { TimelinesHorizontalComponent } from './timelines-horizontal.component';
|
||||
|
||||
describe('TimelinesHorizontalComponent', () => {
|
||||
let component: TimelinesHorizontalComponent;
|
||||
let fixture: ComponentFixture<TimelinesHorizontalComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ TimelinesHorizontalComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(TimelinesHorizontalComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,56 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { TimelineElement } from './horizontal-timeline-page/timeline-horizontal';
|
||||
|
||||
@Component({
|
||||
selector: 'app-timelines-horizontal',
|
||||
templateUrl: './timelines-horizontal.component.html',
|
||||
styleUrls: ['./timelines-horizontal.component.css']
|
||||
})
|
||||
export class TimelinesHorizontalComponent implements OnInit {
|
||||
|
||||
content = `Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae
|
||||
ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae,
|
||||
ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam
|
||||
quisquam, quae, temporibus dolores porro doloribus.`;
|
||||
|
||||
timeline: TimelineElement[] = [
|
||||
{ date: new Date(2014, 1, 16), selected: true, title: 'Horizontal Timeline', content: this.content },
|
||||
{ date: new Date(2014, 2, 28), title: 'Event title here', content: this.content },
|
||||
{ date: new Date(2014, 3, 20), title: 'Event title here', content: this.content },
|
||||
{ date: new Date(2014, 5, 20), title: 'Event title here', content: this.content },
|
||||
{ date: new Date(2014, 7, 9), title: 'Event title here', content: this.content },
|
||||
{ date: new Date(2014, 8, 30), title: 'Event title here', content: this.content },
|
||||
{ date: new Date(2014, 9, 15), title: 'Event title here', content: this.content },
|
||||
{ date: new Date(2014, 11, 1), title: 'Event title here', content: this.content },
|
||||
{ date: new Date(2014, 12, 10), title: 'Event title here', content: this.content },
|
||||
{ date: new Date(2015, 1, 19), title: 'Event title here', content: this.content },
|
||||
{ date: new Date(2015, 3, 3), title: 'Event title here', content: this.content },
|
||||
];
|
||||
|
||||
public breadcrumb: any;
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
this.breadcrumb = {
|
||||
'mainlabel': 'Horizontal Timeline',
|
||||
'links': [
|
||||
{
|
||||
'name': 'Home',
|
||||
'isLink': true,
|
||||
'link': '/dashboard/sales'
|
||||
},
|
||||
{
|
||||
'name': 'Timelines',
|
||||
'isLink': true,
|
||||
'link': ''
|
||||
},
|
||||
{
|
||||
'name': 'Timelines Horizontal',
|
||||
'isLink': false
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
@@ -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
|
||||
;
|
||||
}
|
||||
@@ -0,0 +1,554 @@
|
||||
<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">
|
||||
<section id="timeline" class="timeline-left timeline-wrapper">
|
||||
<h3 class="page-title text-center text-lg-left">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"></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">5 hours ago</span>
|
||||
</p>
|
||||
</a>
|
||||
</ng-container>
|
||||
<ng-container mCardBody>
|
||||
<div class="row">
|
||||
<div class="col-lg-6 col-12">
|
||||
<img class="img-fluid" src="../../../../../assets/images/portfolio/width-1200/portfolio-2.jpg"
|
||||
alt="Timeline Image 1">
|
||||
<p class="card-text m-0">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 mb-1">
|
||||
<li class="pr-1"><a [routerLink]="" class="text-muted"><span class="la la-heart-o"></span>
|
||||
Like</a></li>
|
||||
<li class="pr-1"><a [routerLink]="" class="text-muted"><span class="la la-comments-o"></span>
|
||||
Comment</a></li>
|
||||
<li><a [routerLink]="" class="text-muted"><span class="la la-share-alt"></span> Share</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-2.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="text-muted"><span class="la la-heart-o"></span>
|
||||
Like</a></li>
|
||||
<li class="pr-1"><a [routerLink]="" class="text-muted"><span
|
||||
class="la la-comments-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 class="m-0">Gravida nulla. Nulla vel metus scelerisque ante sollicitudin.</p>
|
||||
<ul class="list-inline mb-1">
|
||||
<li class="pr-1"><a [routerLink]="" class="text-muted"><span
|
||||
class="la la-heart-o"></span> Like</a></li>
|
||||
<li class="pr-1"><a [routerLink]="" class="text-muted"><span
|
||||
class="la la-comments-o"></span> Replay</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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="feather ft-message-square"></i>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 col-12">
|
||||
<img class="img-fluid" src="../../../../../assets/images/portfolio/width-1200/portfolio-3.jpg"
|
||||
alt="Timeline Image 1">
|
||||
<p class="card-text m-0">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 mb-1">
|
||||
<li class="pr-1"><a [routerLink]="" class="text-muted"><span class="la la-heart-o"></span>
|
||||
Like</a></li>
|
||||
<li class="pr-1"><a [routerLink]="" class="text-muted"><span class="la la-comments-o"></span>
|
||||
Comment</a></li>
|
||||
<li><a [routerLink]="" class="text-muted"><span class="la la-share-alt"></span> Share</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-3.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="text-muted"><span class="la la-heart-o"></span>
|
||||
Like</a></li>
|
||||
<li class="pr-1"><a [routerLink]="" class="text-muted"><span
|
||||
class="la la-comments-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 class="m-0">Gravida nulla. Nulla vel metus scelerisque ante sollicitudin.</p>
|
||||
<ul class="list-inline mb-1">
|
||||
<li class="pr-1"><a [routerLink]="" class="text-muted"><span
|
||||
class="la la-heart-o"></span> Like</a></li>
|
||||
<li class="pr-1"><a [routerLink]="" class="text-muted"><span
|
||||
class="la la-comments-o"></span> Replay</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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="feather ft-message-square"></i>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</div>
|
||||
</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-plus-square-o"></i></span>
|
||||
</div>
|
||||
<div class="timeline-card card border-grey border-lighten-2" *blockUI="'projectWorkTwo'; message: 'Loading'">
|
||||
<m-card [options]="options" (reloadFunction)="reloadProjectWorkTwo($event)">
|
||||
<ng-container mCardHeaderTitle>
|
||||
<a [routerLink]="" class="">
|
||||
Project work
|
||||
<p class="card-subtitle text-muted mb-0 pt-1">
|
||||
<span class="font-small-3">5 hours ago</span>
|
||||
</p>
|
||||
</a>
|
||||
</ng-container>
|
||||
<ng-container mCardBody>
|
||||
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-6 col-12">
|
||||
<img class="img-fluid" src="../../../../../assets/images/portfolio/width-1200/portfolio-1.jpg"
|
||||
alt="Timeline Image 1">
|
||||
<p class="card-text m-0">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 mb-1">
|
||||
<li class="pr-1"><a [routerLink]="" class="text-muted"><span class="la la-heart-o"></span>
|
||||
Like</a></li>
|
||||
<li class="pr-1"><a [routerLink]="" class="text-muted"><span class="la la-comments-o"></span>
|
||||
Comment</a></li>
|
||||
<li><a [routerLink]="" class="text-muted"><span class="la la-share-alt"></span> Share</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-lg-6 col-12">
|
||||
<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="text-muted"><span class="la la-heart-o"></span>
|
||||
Like</a></li>
|
||||
<li class="pr-1"><a [routerLink]="" class="text-muted"><span
|
||||
class="la la-comments-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 class="m-0">Gravida nulla. Nulla vel metus scelerisque ante sollicitudin.</p>
|
||||
<ul class="list-inline mb-1">
|
||||
<li class="pr-1"><a [routerLink]="" class="text-muted"><span
|
||||
class="la la-heart-o"></span> Like</a></li>
|
||||
<li class="pr-1"><a [routerLink]="" class="text-muted"><span
|
||||
class="la la-comments-o"></span> Replay</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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="feather ft-message-square"></i>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title"><a [routerLink]="">Sofia Orav</a></h4>
|
||||
<p class="card-subtitle text-muted pt-1">
|
||||
<span class="font-small-3">8 hours ago</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body row">
|
||||
<div class="col-lg-6 col-12">
|
||||
<div class="embed-responsive embed-responsive-4by3">
|
||||
<iframe src="https://player.vimeo.com/video/118589137?title=0&byline=0"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 col-12">
|
||||
<div class="card-content">
|
||||
<p class="card-text m-0">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! Dolor lacus pulvinar adipiscing
|
||||
adipiscing montes! Elementum risus adipiscing non, cras scelerisque risus penatibus? Massa vut,
|
||||
habitasse, tincidunt!</p>
|
||||
<ul class="list-inline mb-1">
|
||||
<li class="pr-1"><a [routerLink]="" class="text-muted"><span class="la la-heart-o"></span>
|
||||
Like</a></li>
|
||||
<li class="pr-1"><a [routerLink]="" class="text-muted"><span class="la la-comments-o"></span>
|
||||
Comment</a></li>
|
||||
<li><a [routerLink]="" class="text-muted"><span class="la la-share-alt"></span> Share</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="card-footer px-0 py-0">
|
||||
<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="feather ft-message-square"></i>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="timeline-item">
|
||||
<div class="timeline-badge">
|
||||
<span class="bg-success bg-lighten-1" data-toggle="tooltip" data-placement="right"
|
||||
title="Portfolio project work"><i class="la la-bar-chart-o"></i></span>
|
||||
</div>
|
||||
<div class="timeline-card card border-grey border-lighten-2">
|
||||
<div class="card-header">
|
||||
<div class="text-center pt-1">
|
||||
<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 echarts [options]="chartOption"></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="feather ft-calendar"></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="row" matchHeight="card">
|
||||
<div class="col-lg-8 col-12">
|
||||
<div class="timeline-card card bg-dark 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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">List Group</h4>
|
||||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of
|
||||
the card's content.</p>
|
||||
</div>
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item">
|
||||
<span class="badge badge-pill bg-primary float-right">4</span> Cras justo odio
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<span class="badge badge-pill bg-info float-right">2</span> Dapibus ac facilisis in
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<span class="badge badge-pill bg-warning float-right">1</span> Morbi leo risus
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<span class="badge badge-pill bg-success float-right">3</span> Porta ac consectetur ac
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<span class="badge badge-pill bg-danger float-right">8</span> Vestibulum at eros
|
||||
</li>
|
||||
</ul>
|
||||
<div class="card-body">
|
||||
<a [routerLink]="" class="card-link">Card link</a>
|
||||
<a [routerLink]="" class="card-link">Another link</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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"></i></span>
|
||||
</div>
|
||||
<div class="timeline-card card border-grey border-lighten-2">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title"><a [routerLink]="">Sofia Orav</a></h4>
|
||||
<p class="card-subtitle text-muted pt-1">
|
||||
<span class="font-small-3">18 June, 2016 at 4.50 P.M</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="row card-body">
|
||||
<div class="col-lg-6 col-12">
|
||||
<p class="card-text m-0">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 icheck-task">
|
||||
<li class="list-group-item">
|
||||
<input type="checkbox" id="input-1"> Cras justo odio</li>
|
||||
<li class="list-group-item">
|
||||
<input type="checkbox" id="input-2" checked> Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">
|
||||
<input type="checkbox" id="input-3"> Morbi leo risus</li>
|
||||
<li class="list-group-item">
|
||||
<input type="checkbox" id="input-4" disabled checked> Porta ac consectetur ac</li>
|
||||
<li class="list-group-item">
|
||||
<input type="checkbox" id="input-5"> Vestibulum at eros</li>
|
||||
<li class="list-group-item">
|
||||
<input type="checkbox" id="input-6" disabled checked> Porta ac consectetur ac</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-lg-6 col-12">
|
||||
<p class="card-text m-0">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="feather ft-message-square"></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="feather ft-calendar"></i> 2015</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="timeline">
|
||||
<li class="timeline-line"></li>
|
||||
<!-- /.timeline-line -->
|
||||
<li class="timeline-item">
|
||||
<div class="timeline-badge">
|
||||
<span class="bg-success bg-lighten-1" data-toggle="tooltip" data-placement="right"
|
||||
title="Portfolio project work"><i class="la la-image"></i></span>
|
||||
</div>
|
||||
<div class="timeline-card card border-grey border-lighten-2">
|
||||
<div class="card-header">
|
||||
<div class="text-center pt-1">
|
||||
<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>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- 2014 -->
|
||||
<ul class="timeline">
|
||||
<li class="timeline-line"></li>
|
||||
<li class="timeline-group">
|
||||
<a [routerLink]="" class="btn btn-primary"><i class="feather ft-calendar"></i>Founded in 2012</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="timeline">
|
||||
<li class="timeline-line"></li>
|
||||
<!-- /.timeline-line -->
|
||||
</ul>
|
||||
<!-- 2014 -->
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- END: Content-->
|
||||
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
|
||||
|
||||
import { TimelinesLeftComponent } from './timelines-left.component';
|
||||
|
||||
describe('TimelinesLeftComponent', () => {
|
||||
let component: TimelinesLeftComponent;
|
||||
let fixture: ComponentFixture<TimelinesLeftComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ TimelinesLeftComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(TimelinesLeftComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,324 @@
|
||||
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
|
||||
*/
|
||||
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-timelines-left',
|
||||
templateUrl: './timelines-left.component.html',
|
||||
styleUrls: ['./timelines-left.component.css']
|
||||
})
|
||||
export class TimelinesLeftComponent 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;
|
||||
chartOption: any;
|
||||
options = {
|
||||
close: false,
|
||||
expand: true,
|
||||
minimize: false,
|
||||
reload: true
|
||||
};
|
||||
@BlockUI('projectWorkOne') blockUIProjectWorkOne: NgBlockUI;
|
||||
@BlockUI('projectWorkTwo') blockUIProjectWorkTwo: NgBlockUI;
|
||||
public breadcrumb: any;
|
||||
public zoom = 15;
|
||||
|
||||
lat = 40.650002;
|
||||
lng = -73.949997;
|
||||
|
||||
markers: Marker[] = [
|
||||
{
|
||||
lat: this.lat,
|
||||
lng: this.lng,
|
||||
label: ''
|
||||
}
|
||||
];
|
||||
|
||||
constructor(private chartApiservice: ChartApiService) { }
|
||||
/**
|
||||
*
|
||||
*/
|
||||
getChordchart() {
|
||||
this.chartOption = {
|
||||
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: this.data['report'].data,
|
||||
},
|
||||
|
||||
// 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]
|
||||
}
|
||||
]
|
||||
};
|
||||
this.option = {
|
||||
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.breadcrumb = {
|
||||
'mainlabel': 'Timeline Left',
|
||||
'links': [
|
||||
{
|
||||
'name': 'Home',
|
||||
'isLink': true,
|
||||
'link': '/dashboard/sales'
|
||||
},
|
||||
{
|
||||
'name': 'Timelines',
|
||||
'isLink': true,
|
||||
'link': ''
|
||||
},
|
||||
{
|
||||
'name': 'Timelines Left',
|
||||
'isLink': false
|
||||
}
|
||||
]
|
||||
};
|
||||
this.chartApiservice.getTimelineData().subscribe(Response => {
|
||||
this.data = Response;
|
||||
this.getChordchart();
|
||||
});
|
||||
}
|
||||
|
||||
reloadProjectWorkOne() {
|
||||
this.blockUIProjectWorkOne.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUIProjectWorkOne.stop();
|
||||
}, 2500);
|
||||
}
|
||||
|
||||
reloadProjectWorkTwo() {
|
||||
this.blockUIProjectWorkTwo.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUIProjectWorkTwo.stop();
|
||||
}, 2500);
|
||||
}
|
||||
|
||||
}
|
||||
@@ -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
|
||||
;
|
||||
}
|
||||
@@ -0,0 +1,619 @@
|
||||
<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 class="content-header-right col-md-6 col-12">
|
||||
<div class="btn-group float-md-right">
|
||||
<div class="dropdown-menu arrow"><a class="dropdown-item" [routerLink]=""><i
|
||||
class="fa fa-calendar-check mr-1"></i> Calender</a><a class="dropdown-item"
|
||||
[routerLink]=""><i class="fa fa-cart-plus mr-1"></i> Cart</a><a class="dropdown-item"
|
||||
[routerLink]=""><i class="fa fa-life-ring mr-1"></i> Support</a>
|
||||
<div class="dropdown-divider"></div><a class="dropdown-item" [routerLink]=""><i
|
||||
class="fa fa-cog mr-1"></i> Settings</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-body">
|
||||
<section id="timeline" class="timeline-right timeline-wrapper">
|
||||
<h3 class="page-title text-center text-lg-right">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"></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 mCardBody>
|
||||
<div class="row">
|
||||
<div class="col-lg-6 col-12">
|
||||
<img class="img-fluid"
|
||||
src="../../../assets/images/portfolio/width-1200/portfolio-2.jpg"
|
||||
alt="Timeline Image 1">
|
||||
<p class="card-text m-0">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 mb-1">
|
||||
<li class="pr-1"><a [routerLink]="" class="text-muted"><span
|
||||
class="la la-heart-o"></span> Like</a></li>
|
||||
<li class="pr-1"><a [routerLink]="" class="text-muted"><span
|
||||
class="la la-comments-o"></span> Comment</a></li>
|
||||
<li><a [routerLink]="" class="text-muted"><span
|
||||
class="la la-share-alt"></span> Share</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-2.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="text-muted"><span
|
||||
class="la la-heart-o"></span> Like</a></li>
|
||||
<li class="pr-1"><a [routerLink]="" class="text-muted"><span
|
||||
class="la la-comments-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 class="m-0">Gravida nulla. Nulla vel metus scelerisque
|
||||
ante sollicitudin.</p>
|
||||
<ul class="list-inline mb-1">
|
||||
<li class="pr-1"><a [routerLink]=""
|
||||
class="text-muted"><span
|
||||
class="la la-heart-o"></span> Like</a></li>
|
||||
<li class="pr-1"><a [routerLink]=""
|
||||
class="text-muted"><span
|
||||
class="la la-comments-o"></span> Replay</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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="feather ft-message-square"></i>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 col-12">
|
||||
<img class="img-fluid"
|
||||
src="../../../assets/images/portfolio/width-1200/portfolio-3.jpg"
|
||||
alt="Timeline Image 1">
|
||||
<p class="card-text m-0">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 mb-1">
|
||||
<li class="pr-1"><a [routerLink]="" class="text-muted"><span
|
||||
class="la la-heart-o"></span> Like</a></li>
|
||||
<li class="pr-1"><a [routerLink]="" class="text-muted"><span
|
||||
class="la la-comments-o"></span> Comment</a></li>
|
||||
<li><a [routerLink]="" class="text-muted"><span
|
||||
class="la la-share-alt"></span> Share</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-3.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="text-muted"><span
|
||||
class="la la-heart-o"></span> Like</a></li>
|
||||
<li class="pr-1"><a [routerLink]="" class="text-muted"><span
|
||||
class="la la-comments-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 class="m-0">Gravida nulla. Nulla vel metus scelerisque
|
||||
ante sollicitudin.</p>
|
||||
<ul class="list-inline mb-1">
|
||||
<li class="pr-1"><a [routerLink]=""
|
||||
class="text-muted"><span
|
||||
class="la la-heart-o"></span> Like</a></li>
|
||||
<li class="pr-1"><a [routerLink]=""
|
||||
class="text-muted"><span
|
||||
class="la la-comments-o"></span> Replay</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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="feather ft-message-square"></i>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</div>
|
||||
</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-plus-square-o"></i></span>
|
||||
</div>
|
||||
<div class="timeline-card card border-grey border-lighten-2"
|
||||
*blockUI="'projectWorkTwo'; message: 'Loading'">
|
||||
<m-card [options]="options" (reloadFunction)="reloadProjectWorkTwo($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 mCardBody>
|
||||
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-6 col-12">
|
||||
<img class="img-fluid"
|
||||
src="../../../assets/images/portfolio/width-1200/portfolio-1.jpg"
|
||||
alt="Timeline Image 1">
|
||||
<p class="card-text m-0">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 mb-1">
|
||||
<li class="pr-1"><a [routerLink]="" class="text-muted"><span
|
||||
class="la la-heart-o"></span> Like</a></li>
|
||||
<li class="pr-1"><a [routerLink]="" class="text-muted"><span
|
||||
class="la la-comments-o"></span> Comment</a></li>
|
||||
<li><a [routerLink]="" class="text-muted"><span
|
||||
class="la la-share-alt"></span> Share</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-lg-6 col-12">
|
||||
<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="text-muted"><span
|
||||
class="la la-heart-o"></span> Like</a></li>
|
||||
<li class="pr-1"><a [routerLink]="" class="text-muted"><span
|
||||
class="la la-comments-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 class="m-0">Gravida nulla. Nulla vel metus scelerisque
|
||||
ante sollicitudin.</p>
|
||||
<ul class="list-inline mb-1">
|
||||
<li class="pr-1"><a [routerLink]=""
|
||||
class="text-muted"><span
|
||||
class="la la-heart-o"></span> Like</a></li>
|
||||
<li class="pr-1"><a [routerLink]=""
|
||||
class="text-muted"><span
|
||||
class="la la-comments-o"></span> Replay</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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="feather ft-message-square"></i>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title"><a [routerLink]="">Sofia Orav</a></h4>
|
||||
<p class="card-subtitle text-muted pt-1">
|
||||
<span class="font-small-3">8 hours ago</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body row">
|
||||
<div class="col-lg-6 col-12">
|
||||
<div class="embed-responsive embed-responsive-4by3">
|
||||
<iframe
|
||||
src="https://player.vimeo.com/video/118589137?title=0&byline=0"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 col-12">
|
||||
<div class="card-content">
|
||||
<p class="card-text m-0">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! Dolor
|
||||
lacus pulvinar adipiscing adipiscing montes! Elementum risus adipiscing
|
||||
non, cras scelerisque risus penatibus? Massa vut, habitasse, tincidunt!
|
||||
</p>
|
||||
<ul class="list-inline mb-1">
|
||||
<li class="pr-1"><a [routerLink]="" class="text-muted"><span
|
||||
class="la la-heart-o"></span> Like</a></li>
|
||||
<li class="pr-1"><a [routerLink]="" class="text-muted"><span
|
||||
class="la la-comments-o"></span> Comment</a></li>
|
||||
<li><a [routerLink]="" class="text-muted"><span
|
||||
class="la la-share-alt"></span> Share</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="card-footer px-0 py-0">
|
||||
<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="feather ft-message-square"></i>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="timeline-item">
|
||||
<div class="timeline-badge">
|
||||
<span class="bg-success bg-lighten-1" data-toggle="tooltip" data-placement="right"
|
||||
title="Portfolio project work"><i class="la la-bar-chart-o"></i></span>
|
||||
</div>
|
||||
<div class="timeline-card card border-grey border-lighten-2">
|
||||
<div class="card-header">
|
||||
<div class="text-center pt-1">
|
||||
<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 echarts [options]="chartOption"></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="feather ft-calendar"></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="row" matchHeight="card">
|
||||
<div class="col-lg-8 col-12">
|
||||
<div class="timeline-card card bg-dark 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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">List Group</h4>
|
||||
<p class="card-text">Some quick example text to build on the card title and
|
||||
make up the bulk of the card's content.</p>
|
||||
</div>
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item">
|
||||
<span class="badge badge-pill bg-primary float-right">4</span> Cras
|
||||
justo odio
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<span class="badge badge-pill bg-info float-right">2</span> Dapibus ac
|
||||
facilisis in
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<span class="badge badge-pill bg-warning float-right">1</span> Morbi leo
|
||||
risus
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<span class="badge badge-pill bg-success float-right">3</span> Porta ac
|
||||
consectetur ac
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<span class="badge badge-pill bg-danger float-right">8</span> Vestibulum
|
||||
at eros
|
||||
</li>
|
||||
</ul>
|
||||
<div class="card-body">
|
||||
<a [routerLink]="" class="card-link">Card link</a>
|
||||
<a [routerLink]="" class="card-link">Another link</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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"></i></span>
|
||||
</div>
|
||||
<div class="timeline-card card border-grey border-lighten-2">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title"><a [routerLink]="">Sofia Orav</a></h4>
|
||||
<p class="card-subtitle text-muted pt-1">
|
||||
<span class="font-small-3">18 June, 2016 at 4.50 P.M</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="row card-body">
|
||||
<div class="col-lg-6 col-12">
|
||||
<p class="card-text m-0">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 icheck-task">
|
||||
<li class="list-group-item">
|
||||
<input type="checkbox" id="input-1"> Cras justo odio
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<input type="checkbox" id="input-2" checked> Dapibus ac facilisis in
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<input type="checkbox" id="input-3"> Morbi leo risus
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<input type="checkbox" id="input-4" disabled checked> Porta ac
|
||||
consectetur ac
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<input type="checkbox" id="input-5"> Vestibulum at eros
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<input type="checkbox" id="input-6" disabled checked> Porta ac
|
||||
consectetur ac
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-lg-6 col-12">
|
||||
<p class="card-text m-0">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="feather ft-message-square"></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="feather ft-calendar"></i> 2015</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="timeline">
|
||||
<li class="timeline-line"></li>
|
||||
<!-- /.timeline-line -->
|
||||
<li class="timeline-item">
|
||||
<div class="timeline-badge">
|
||||
<span class="bg-success bg-lighten-1" data-toggle="tooltip" data-placement="right"
|
||||
title="Portfolio project work"><i class="la la-image"></i></span>
|
||||
</div>
|
||||
<div class="timeline-card card border-grey border-lighten-2">
|
||||
<div class="card-header">
|
||||
<div class="text-center pt-1">
|
||||
<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>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- 2014 -->
|
||||
<ul class="timeline">
|
||||
<li class="timeline-line"></li>
|
||||
<li class="timeline-group">
|
||||
<a [routerLink]="" class="btn btn-primary"><i class="feather ft-calendar"></i> Founded in
|
||||
2012</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- 2014 -->
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- END: Content-->
|
||||
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
|
||||
|
||||
import { TimelinesRightComponent } from './timelines-right.component';
|
||||
|
||||
describe('TimelinesRightComponent', () => {
|
||||
let component: TimelinesRightComponent;
|
||||
let fixture: ComponentFixture<TimelinesRightComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ TimelinesRightComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(TimelinesRightComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,324 @@
|
||||
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-timelines-right',
|
||||
templateUrl: './timelines-right.component.html',
|
||||
styleUrls: ['./timelines-right.component.css']
|
||||
})
|
||||
|
||||
export class TimelinesRightComponent 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;
|
||||
chartOption: any;
|
||||
options = {
|
||||
close: false,
|
||||
expand: true,
|
||||
minimize: false,
|
||||
reload: true
|
||||
};
|
||||
|
||||
@BlockUI('projectWorkOne') blockUIProjectWorkOne: NgBlockUI;
|
||||
@BlockUI('projectWorkTwo') blockUIProjectWorkTwo: NgBlockUI;
|
||||
|
||||
public breadcrumb: any;
|
||||
public zoom: number;
|
||||
|
||||
lat = 40.650002;
|
||||
lng = -73.949997;
|
||||
|
||||
markers: Marker[] = [
|
||||
{
|
||||
lat: this.lat,
|
||||
lng: this.lng,
|
||||
label: ''
|
||||
}
|
||||
];
|
||||
|
||||
constructor(private chartApiservice: ChartApiService) { }
|
||||
getChordchart() {
|
||||
this.chartOption = {
|
||||
grid: {
|
||||
x: 40,
|
||||
x2: 40,
|
||||
y: 45,
|
||||
y2: 25
|
||||
},
|
||||
// Add tooltip
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
|
||||
// Add legend
|
||||
legend: {
|
||||
data: this.data['report'].data,
|
||||
},
|
||||
|
||||
// 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]
|
||||
}
|
||||
]
|
||||
};
|
||||
this.option = {
|
||||
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.breadcrumb = {
|
||||
'mainlabel': 'Timeline Right',
|
||||
'links': [
|
||||
{
|
||||
'name': 'Home',
|
||||
'isLink': true,
|
||||
'link': '/dashboard/sales'
|
||||
},
|
||||
{
|
||||
'name': 'Timelines',
|
||||
'isLink': true,
|
||||
'link': ''
|
||||
},
|
||||
{
|
||||
'name': 'Timelines Right',
|
||||
'isLink': false
|
||||
}
|
||||
]
|
||||
};
|
||||
this.data = this.chartApiservice.getTimelineData().subscribe(Response => {
|
||||
this.data = Response;
|
||||
this.getChordchart();
|
||||
});
|
||||
}
|
||||
|
||||
reloadProjectWorkOne() {
|
||||
this.blockUIProjectWorkOne.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUIProjectWorkOne.stop();
|
||||
}, 2500);
|
||||
}
|
||||
|
||||
reloadProjectWorkTwo() {
|
||||
this.blockUIProjectWorkTwo.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUIProjectWorkTwo.stop();
|
||||
}, 2500);
|
||||
}
|
||||
|
||||
}
|
||||
56
src/app/content/pages/timelines/timelines.module.ts
Normal file
56
src/app/content/pages/timelines/timelines.module.ts
Normal file
@@ -0,0 +1,56 @@
|
||||
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { TimelinesLeftComponent } from './timelines-left/timelines-left.component';
|
||||
import { TimelinesRightComponent } from './timelines-right/timelines-right.component';
|
||||
import { TimelinesHorizontalComponent } from './timelines-horizontal/timelines-horizontal.component';
|
||||
import { TimelinesCenterComponent } from './timelines-center/timelines-center.component';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { NgChartsModule } from 'ng2-charts';
|
||||
import { CardModule } from '../../partials/general/card/card.module';
|
||||
import { BreadcrumbModule } from 'src/app/_layout/breadcrumb/breadcrumb.module';
|
||||
import { NgxEchartsModule } from 'ngx-echarts';
|
||||
import { NgxPhotoswipeModule, LightboxAdapter } from '@fnxone/ngx-photoswipe';
|
||||
import { HorizontalTimelinePageComponent } from './timelines-horizontal/horizontal-timeline-page/horizontal-timeline-page.component';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { BlockUIModule } from 'ng-block-ui';
|
||||
import { BlockTemplateComponent } from 'src/app/_layout/blockui/block-template.component';
|
||||
import { environment } from 'src/environments/environment';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
NgxEchartsModule.forRoot({
|
||||
echarts: () => import('echarts')
|
||||
}),
|
||||
CardModule,
|
||||
NgChartsModule,
|
||||
FormsModule,
|
||||
BreadcrumbModule,
|
||||
NgxPhotoswipeModule,
|
||||
BlockUIModule.forRoot({
|
||||
template: BlockTemplateComponent
|
||||
}),
|
||||
RouterModule.forChild([
|
||||
{
|
||||
path: 'timelines-center',
|
||||
component: TimelinesCenterComponent
|
||||
},
|
||||
{
|
||||
path: 'timelines-left',
|
||||
component: TimelinesLeftComponent
|
||||
},
|
||||
{
|
||||
path: 'timelines-right',
|
||||
component: TimelinesRightComponent
|
||||
},
|
||||
{
|
||||
path: 'timelines-horizontal',
|
||||
component: TimelinesHorizontalComponent
|
||||
}
|
||||
]),
|
||||
],
|
||||
schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
|
||||
declarations: [TimelinesLeftComponent, TimelinesRightComponent, TimelinesHorizontalComponent, TimelinesCenterComponent,
|
||||
HorizontalTimelinePageComponent]
|
||||
})
|
||||
export class TimelinesModule { }
|
||||
@@ -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
607
src/app/content/pages/user/user-cards/user-cards.component.html
Normal 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>
|
||||
@@ -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();
|
||||
});
|
||||
});
|
||||
@@ -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
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
@@ -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
|
||||
;
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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();
|
||||
});
|
||||
});
|
||||
@@ -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
44
src/app/content/pages/user/user.module.ts
Normal 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 { }
|
||||
Reference in New Issue
Block a user