using Azia theme
This commit is contained in:
Jason Kulatunga
parent
81c4382e3c
commit
6a8df64691
|
|
@ -30,8 +30,6 @@
|
|||
],
|
||||
"styles": [
|
||||
"src/styles.scss",
|
||||
"src/assets/scss/black-dashboard.scss",
|
||||
"src/assets/css/nucleo-icons.css"
|
||||
],
|
||||
"scripts": [
|
||||
"node_modules/@panva/oauth4webapi/build/index.js"
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -13,20 +13,25 @@
|
|||
"private": true,
|
||||
"dependencies": {
|
||||
"@angular/animations": "^14.1.3",
|
||||
"@angular/cdk": "^14.1.3",
|
||||
"@angular/common": "^14.1.3",
|
||||
"@angular/compiler": "^14.1.3",
|
||||
"@angular/core": "^14.1.3",
|
||||
"@angular/forms": "^14.1.3",
|
||||
"@angular/localize": "^14.1.3",
|
||||
"@angular/platform-browser": "^14.1.3",
|
||||
"@angular/platform-browser-dynamic": "^14.1.3",
|
||||
"@angular/router": "^14.1.3",
|
||||
"@panva/oauth4webapi": "^1.1.3",
|
||||
"@ng-bootstrap/ng-bootstrap": "10.0.0",
|
||||
"fhirclient": "^2.5.1",
|
||||
"bootstrap": "^4.4.1",
|
||||
|
||||
"chart.js": "2.9.4",
|
||||
"rxjs": "~6.5.4",
|
||||
"tslib": "^2.0.0",
|
||||
"zone.js": "~0.11.8"
|
||||
"zone.js": "~0.11.8",
|
||||
"ng2-charts": "^2.3.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "^14.1.3",
|
||||
|
|
|
|||
|
|
@ -2,38 +2,26 @@ import { NgModule } from "@angular/core";
|
|||
import { CommonModule } from "@angular/common";
|
||||
import { BrowserModule } from "@angular/platform-browser";
|
||||
import { Routes, RouterModule } from "@angular/router";
|
||||
|
||||
import { AdminLayoutComponent } from "./layouts/admin-layout/admin-layout.component";
|
||||
import { DashboardComponent } from './pages/dashboard/dashboard.component';
|
||||
import { MedicalSourcesComponent } from './pages/medical-sources/medical-sources.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: "",
|
||||
redirectTo: "dashboard",
|
||||
pathMatch: "full"
|
||||
},
|
||||
{
|
||||
path: "",
|
||||
component: AdminLayoutComponent,
|
||||
children: [
|
||||
{
|
||||
path: "",
|
||||
loadChildren: () => import ("./layouts/admin-layout/admin-layout.module").then(m => m.AdminLayoutModule)
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: "**",
|
||||
redirectTo: "dashboard"
|
||||
}
|
||||
{ path: '', redirectTo: '/dashboard', pathMatch: 'full' },
|
||||
{ path: 'dashboard', component: DashboardComponent },
|
||||
{ path: 'sources', component: MedicalSourcesComponent },
|
||||
// { path: 'general-pages', loadChildren: () => import('./general-pages/general-pages.module').then(m => m.GeneralPagesModule) },
|
||||
// { path: 'ui-elements', loadChildren: () => import('./ui-elements/ui-elements.module').then(m => m.UiElementsModule) },
|
||||
// { path: 'form', loadChildren: () => import('./form/form.module').then(m => m.FormModule) },
|
||||
// { path: 'charts', loadChildren: () => import('./charts/charts.module').then(m => m.ChartsDemoModule) },
|
||||
// { path: 'tables', loadChildren: () => import('./tables/tables.module').then(m => m.TablesModule) },
|
||||
{ path: '**', redirectTo: 'dashboard' },
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
RouterModule.forRoot(routes),
|
||||
CommonModule,
|
||||
BrowserModule,
|
||||
RouterModule.forRoot(routes, {
|
||||
useHash: true
|
||||
})
|
||||
],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1 +1,7 @@
|
|||
<div>
|
||||
<app-header *ngIf="showHeader"></app-header>
|
||||
<div class="az-content-wrapper">
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
<app-footer *ngIf="showFooter"></app-footer>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,24 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
templateUrl: './app.component.html',
|
||||
styleUrls: ['./app.component.scss']
|
||||
})
|
||||
export class AppComponent {
|
||||
export class AppComponent implements OnInit {
|
||||
title = 'fastenhealth';
|
||||
|
||||
public layoutOption: string;
|
||||
showHeader:boolean = true;
|
||||
showFooter:boolean = true;
|
||||
|
||||
ngOnInit() {
|
||||
|
||||
// navbar backdrop for mobile only
|
||||
const navbarBackdrop = document.createElement('div');
|
||||
navbarBackdrop.classList.add('az-navbar-backdrop');
|
||||
document.querySelector('body').appendChild(navbarBackdrop);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -4,22 +4,29 @@ import { NgModule } from '@angular/core';
|
|||
import { AppRoutingModule } from './app-routing.module';
|
||||
import { AppComponent } from './app.component';
|
||||
import { HttpClientModule } from '@angular/common/http';
|
||||
import { AdminLayoutComponent } from "./layouts/admin-layout/admin-layout.component";
|
||||
import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
|
||||
import { ComponentsModule } from "./components/components.module";
|
||||
|
||||
import { HeaderComponent } from './components/header/header.component';
|
||||
import { FooterComponent } from './components/footer/footer.component';
|
||||
import { DashboardComponent } from './pages/dashboard/dashboard.component';
|
||||
import { MedicalSourcesComponent } from './pages/medical-sources/medical-sources.component';
|
||||
import { ChartsModule } from 'ng2-charts';
|
||||
import {SharedModule} from './components/shared.module';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
AppComponent,
|
||||
AdminLayoutComponent,
|
||||
HeaderComponent,
|
||||
FooterComponent,
|
||||
DashboardComponent,
|
||||
MedicalSourcesComponent,
|
||||
],
|
||||
imports: [
|
||||
BrowserModule,
|
||||
SharedModule,
|
||||
AppRoutingModule,
|
||||
HttpClientModule,
|
||||
NgbModule,
|
||||
ComponentsModule
|
||||
ChartsModule
|
||||
],
|
||||
providers: [],
|
||||
bootstrap: [AppComponent]
|
||||
|
|
|
|||
|
|
@ -0,0 +1,26 @@
|
|||
<div class="az-content-left az-content-left-components">
|
||||
<div class="component-item">
|
||||
<label>UI Elements</label>
|
||||
<nav class="nav flex-column">
|
||||
<a routerLink="/ui-elements/buttons" routerLinkActive="active" class="nav-link">Buttons</a>
|
||||
<a routerLink="/ui-elements/dropdown" routerLinkActive="active" class="nav-link">Dropdown</a>
|
||||
<a routerLink="/ui-elements/icons" routerLinkActive="active" class="nav-link">Icons</a>
|
||||
</nav>
|
||||
|
||||
<label>Forms</label>
|
||||
<nav class="nav flex-column">
|
||||
<a routerLink="/form/form-elements" routerLinkActive="active" class="nav-link">Form Elements</a>
|
||||
</nav>
|
||||
|
||||
<label>Charts</label>
|
||||
<nav class="nav flex-column">
|
||||
<a routerLink="/charts/chartjs" routerLinkActive="active" class="nav-link">ChartJS</a>
|
||||
</nav>
|
||||
|
||||
<label>Tables</label>
|
||||
<nav class="nav flex-column">
|
||||
<a routerLink="/tables/basic-tables" routerLinkActive="active" class="nav-link">Basic Tables</a>
|
||||
</nav>
|
||||
</div><!-- component-item -->
|
||||
|
||||
</div><!-- az-content-left -->
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { ComponentsSidebarComponent } from './components-sidebar.component';
|
||||
|
||||
describe('ComponentsSidebarComponent', () => {
|
||||
let component: ComponentsSidebarComponent;
|
||||
let fixture: ComponentFixture<ComponentsSidebarComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ ComponentsSidebarComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(ComponentsSidebarComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-components-sidebar',
|
||||
templateUrl: './components-sidebar.component.html',
|
||||
styleUrls: ['./components-sidebar.component.scss']
|
||||
})
|
||||
export class ComponentsSidebarComponent implements OnInit {
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
import { NgModule } from "@angular/core";
|
||||
import { CommonModule } from "@angular/common";
|
||||
import { RouterModule } from "@angular/router";
|
||||
import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
|
||||
|
||||
import { FooterComponent } from "./footer/footer.component";
|
||||
import { NavbarComponent } from "./navbar/navbar.component";
|
||||
import { SidebarComponent } from "./sidebar/sidebar.component";
|
||||
|
||||
@NgModule({
|
||||
imports: [CommonModule, RouterModule, NgbModule],
|
||||
declarations: [FooterComponent, NavbarComponent, SidebarComponent],
|
||||
exports: [FooterComponent, NavbarComponent, SidebarComponent]
|
||||
})
|
||||
export class ComponentsModule {}
|
||||
|
|
@ -1,25 +1,8 @@
|
|||
<footer class=" footer">
|
||||
<div class=" container-fluid">
|
||||
<ul class=" nav">
|
||||
<li class=" nav-item">
|
||||
<a class=" nav-link" href="https://www.creative-tim.com?ref=bda-footer">
|
||||
Creative Tim
|
||||
</a>
|
||||
</li>
|
||||
<li class=" nav-item">
|
||||
<a class=" nav-link" href="https://www.creative-tim.com/about-us?ref=bda-footer">
|
||||
About Us
|
||||
</a>
|
||||
</li>
|
||||
<li class=" nav-item">
|
||||
<a class=" nav-link" href="http://blog.creative-tim.com?ref=bda-footer"> Blog </a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class=" copyright">
|
||||
© {{ test | date: "yyyy" }} made with
|
||||
<i class=" tim-icons icon-heart-2"> </i> by
|
||||
<a href="https://www.creative-tim.com?ref=bda-footer" target="_blank"> Creative Tim </a>
|
||||
for a better web.
|
||||
<div class="az-footer ht-40">
|
||||
<div class="container ht-100p pd-t-0-f">
|
||||
<div class="d-sm-flex justify-content-center justify-content-sm-between py-2 w-100">
|
||||
<span class="text-muted text-center text-sm-left d-block d-sm-inline-block">Copyright © bootstrapdash.com 2020</span>
|
||||
<span class="float-none float-sm-right d-block mt-1 mt-sm-0 text-center">Free <a href="https://www.bootstrapdash.com/angular-admin-templates/" target="_blank"> angular admin template </a> from <a href="https://www.bootstrapdash.com/" target="_blank">bootstrapdash.com </a></span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div><!-- container -->
|
||||
</div><!-- az-footer -->
|
||||
|
|
@ -1,15 +1,16 @@
|
|||
import { async, ComponentFixture, TestBed } from "@angular/core/testing";
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { FooterComponent } from "./footer.component";
|
||||
import { FooterComponent } from './footer.component';
|
||||
|
||||
describe("FooterComponent", () => {
|
||||
describe('FooterComponent', () => {
|
||||
let component: FooterComponent;
|
||||
let fixture: ComponentFixture<FooterComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ FooterComponent ]
|
||||
}).compileComponents();
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
|
|
@ -18,7 +19,7 @@ describe("FooterComponent", () => {
|
|||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it("should create", () => {
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,14 +1,15 @@
|
|||
import { Component, OnInit } from "@angular/core";
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: "app-footer",
|
||||
templateUrl: "./footer.component.html",
|
||||
styleUrls: ["./footer.component.css"]
|
||||
selector: 'app-footer',
|
||||
templateUrl: './footer.component.html',
|
||||
styleUrls: ['./footer.component.scss']
|
||||
})
|
||||
export class FooterComponent implements OnInit {
|
||||
test: Date = new Date();
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {}
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,90 @@
|
|||
<div class="az-header">
|
||||
<div class="container">
|
||||
<div class="az-header-left">
|
||||
<a routerLink="/" class="az-logo"><span></span> azia</a>
|
||||
<a href="#" id="azMenuShow" (click)="toggleHeaderMenu($event)" class="az-header-menu-icon d-lg-none"><span></span></a>
|
||||
</div><!-- az-header-left -->
|
||||
<div class="az-header-menu">
|
||||
<div class="az-header-menu-header">
|
||||
<a routerLink="/" class="az-logo"><span></span> azia</a>
|
||||
<a href="#" (click)="toggleHeaderMenu($event)" class="close">×</a>
|
||||
</div><!-- az-header-menu-header -->
|
||||
<ul class="nav">
|
||||
<li class="nav-item" ngbDropdown [ngClass]="{ 'active': dashboard.isActive }">
|
||||
<a routerLink="/dashboard" routerLinkActive="active" #dashboard="routerLinkActive" class="nav-link"><i class="typcn typcn-chart-area-outline"></i> Dashboard</a>
|
||||
</li>
|
||||
<li class="nav-item" ngbDropdown [ngClass]="{ 'active': sources.isActive }">
|
||||
<a routerLink="/sources" routerLinkActive="active" #sources="routerLinkActive" class="nav-link"><i class="typcn typcn-document"></i> Sources</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div><!-- az-header-menu -->
|
||||
<div class="az-header-right">
|
||||
<a routerLink="/" class="az-header-search-link"><i class="fas fa-search"></i></a>
|
||||
<div class="az-header-message">
|
||||
<a routerLink="/"><i class="typcn typcn-messages"></i></a>
|
||||
</div><!-- az-header-message -->
|
||||
<div class="dropdown az-header-notification" ngbDropdown>
|
||||
<a class="new" id="notificationsDropdown" ngbDropdownToggle><i class="typcn typcn-bell"></i></a>
|
||||
<div class="dropdown-menu" ngbDropdownMenu aria-labelledby="notificationsDropdown">
|
||||
<div class="az-dropdown-header mg-b-20 d-sm-none">
|
||||
<a class="az-header-arrow" (click)="closeMenu($event)"><i class="icon ion-md-arrow-back"></i></a>
|
||||
</div>
|
||||
<h6 class="az-notification-title">Notifications</h6>
|
||||
<p class="az-notification-text">You have 2 unread notification</p>
|
||||
<div class="az-notification-list">
|
||||
<div class="media new">
|
||||
<div class="az-img-user"><img src="assets/images/img2.jpg" alt=""></div>
|
||||
<div class="media-body">
|
||||
<p>Congratulate <strong>Socrates Itumay</strong> for work anniversaries</p>
|
||||
<span>Mar 15 12:32pm</span>
|
||||
</div><!-- media-body -->
|
||||
</div><!-- media -->
|
||||
<div class="media new">
|
||||
<div class="az-img-user online"><img src="assets/images/img3.jpg" alt=""></div>
|
||||
<div class="media-body">
|
||||
<p><strong>Joyce Chua</strong> just created a new blog post</p>
|
||||
<span>Mar 13 04:16am</span>
|
||||
</div><!-- media-body -->
|
||||
</div><!-- media -->
|
||||
<div class="media">
|
||||
<div class="az-img-user"><img src="assets/images/img4.jpg" alt=""></div>
|
||||
<div class="media-body">
|
||||
<p><strong>Althea Cabardo</strong> just created a new blog post</p>
|
||||
<span>Mar 13 02:56am</span>
|
||||
</div><!-- media-body -->
|
||||
</div><!-- media -->
|
||||
<div class="media">
|
||||
<div class="az-img-user"><img src="assets/images/img5.jpg" alt=""></div>
|
||||
<div class="media-body">
|
||||
<p><strong>Adrian Monino</strong> added new comment on your photo</p>
|
||||
<span>Mar 12 10:40pm</span>
|
||||
</div><!-- media-body -->
|
||||
</div><!-- media -->
|
||||
</div><!-- az-notification-list -->
|
||||
<div class="dropdown-footer"><a href="">View All Notifications</a></div>
|
||||
</div><!-- dropdown-menu -->
|
||||
</div><!-- az-header-notification -->
|
||||
<div class="dropdown az-profile-menu" ngbDropdown>
|
||||
<a class="az-img-user" id="profileDropdown" ngbDropdownToggle><img src="assets/images/img1.jpg" alt="user"></a>
|
||||
<div class="dropdown-menu" ngbDropdownMenu aria-labelledby="profileDropdown">
|
||||
<div class="az-dropdown-header d-sm-none">
|
||||
<a class="az-header-arrow" (click)="closeMenu($event)"><i class="icon ion-md-arrow-back"></i></a>
|
||||
</div>
|
||||
<div class="az-header-profile">
|
||||
<div class="az-img-user">
|
||||
<img src="assets/images/img1.jpg" alt="">
|
||||
</div><!-- az-img-user -->
|
||||
<h6>Aziana Pechon</h6>
|
||||
<span>Premium Member</span>
|
||||
</div><!-- az-header-profile -->
|
||||
|
||||
<a routerLink="/general-pages/profile" class="dropdown-item"><i class="typcn typcn-user-outline"></i> My Profile</a>
|
||||
<a routerLink="/general-pages/profile" class="dropdown-item"><i class="typcn typcn-edit"></i> Edit Profile</a>
|
||||
<a routerLink="/general-pages/profile" class="dropdown-item"><i class="typcn typcn-time"></i> Activity Logs</a>
|
||||
<a routerLink="/general-pages/profile" class="dropdown-item"><i class="typcn typcn-cog-outline"></i> Account Settings</a>
|
||||
<a routerLink="/general-pages/signin" class="dropdown-item"><i class="typcn typcn-power-outline"></i> Sign Out</a>
|
||||
</div><!-- dropdown-menu -->
|
||||
</div>
|
||||
</div><!-- az-header-right -->
|
||||
</div><!-- container -->
|
||||
</div><!-- az-header -->
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { HeaderComponent } from './header.component';
|
||||
|
||||
describe('HeaderComponent', () => {
|
||||
let component: HeaderComponent;
|
||||
let fixture: ComponentFixture<HeaderComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ HeaderComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(HeaderComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-header',
|
||||
templateUrl: './header.component.html',
|
||||
styleUrls: ['./header.component.scss']
|
||||
})
|
||||
export class HeaderComponent implements OnInit {
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
closeMenu(e) {
|
||||
e.target.closest('.dropdown').classList.remove('show');
|
||||
e.target.closest('.dropdown .dropdown-menu').classList.remove('show');
|
||||
}
|
||||
|
||||
toggleHeaderMenu(event) {
|
||||
event.preventDefault();
|
||||
document.querySelector('body').classList.toggle('az-header-menu-show');
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,137 +0,0 @@
|
|||
<nav class=" navbar navbar-expand-lg navbar-absolute navbar-transparent">
|
||||
<div class=" container-fluid">
|
||||
<div class=" navbar-wrapper">
|
||||
<div class=" navbar-toggle d-inline">
|
||||
<button class=" navbar-toggler" type="button" (click)="sidebarToggle()">
|
||||
<span class=" navbar-toggler-bar bar1"> </span>
|
||||
<span class=" navbar-toggler-bar bar2"> </span>
|
||||
<span class=" navbar-toggler-bar bar3"> </span>
|
||||
</button>
|
||||
</div>
|
||||
<a class=" navbar-brand" href="javascript:void(0)"> {{ getTitle() }} </a>
|
||||
</div>
|
||||
<button
|
||||
aria-label="Toggle navigation"
|
||||
class=" navbar-toggler"
|
||||
(click)="collapse()"
|
||||
[attr.aria-expanded]="!isCollapsed"
|
||||
aria-controls="collapseExample"
|
||||
id="navigation"
|
||||
type="button"
|
||||
>
|
||||
<span class=" navbar-toggler-bar navbar-kebab"> </span>
|
||||
<span class=" navbar-toggler-bar navbar-kebab"> </span>
|
||||
<span class=" navbar-toggler-bar navbar-kebab"> </span>
|
||||
</button>
|
||||
<div class=" navbar-collapse" [ngbCollapse]="isCollapsed" id="navigation">
|
||||
<ul class=" navbar-nav ml-auto">
|
||||
<li class=" search-bar input-group">
|
||||
<button
|
||||
class=" btn btn-link"
|
||||
data-target="#searchModal"
|
||||
data-toggle="modal"
|
||||
(click)="open(content)"
|
||||
id="search-button"
|
||||
>
|
||||
<i class=" tim-icons icon-zoom-split"> </i>
|
||||
<span class=" d-lg-none d-md-block"> Search </span>
|
||||
</button>
|
||||
</li>
|
||||
<li class=" nav-item" ngbDropdown>
|
||||
<a
|
||||
class=" nav-link"
|
||||
data-toggle="dropdown"
|
||||
href="javascript:void(0)"
|
||||
ngbDropdownToggle
|
||||
>
|
||||
<div class=" notification d-none d-lg-block d-xl-block"></div>
|
||||
<i class=" tim-icons icon-sound-wave"> </i>
|
||||
<p class=" d-lg-none">Notifications</p>
|
||||
</a>
|
||||
<ul class=" dropdown-menu-right dropdown-navbar" ngbDropdownMenu>
|
||||
<li class=" nav-link">
|
||||
<a class=" nav-item" href="javascript:void(0)" ngbDropdownItem>
|
||||
Mike John responded to your email
|
||||
</a>
|
||||
</li>
|
||||
<li class=" nav-link">
|
||||
<a class=" nav-item" href="javascript:void(0)" ngbDropdownItem>
|
||||
You have 5 more tasks
|
||||
</a>
|
||||
</li>
|
||||
<li class=" nav-link">
|
||||
<a class=" nav-item" href="javascript:void(0)" ngbDropdownItem>
|
||||
Your friend Michael is in town
|
||||
</a>
|
||||
</li>
|
||||
<li class=" nav-link">
|
||||
<a class=" nav-item" href="javascript:void(0)" ngbDropdownItem>
|
||||
Another notification
|
||||
</a>
|
||||
</li>
|
||||
<li class=" nav-link">
|
||||
<a class=" nav-item" href="javascript:void(0)" ngbDropdownItem>
|
||||
Another one
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class=" nav-item" ngbDropdown>
|
||||
<a
|
||||
class=" nav-link"
|
||||
data-toggle="dropdown"
|
||||
href="javascript:void(0)"
|
||||
ngbDropdownToggle
|
||||
>
|
||||
<div class=" photo">
|
||||
<img alt="Profile Photo" src="assets/img/anime3.png" />
|
||||
</div>
|
||||
<b class=" caret d-none d-lg-block d-xl-block"> </b>
|
||||
<p class=" d-lg-none">Log out</p>
|
||||
</a>
|
||||
<ul class=" dropdown-navbar" ngbDropdownMenu>
|
||||
<li class=" nav-link">
|
||||
<a class=" nav-item" href="javascript:void(0)" ngbDropdownItem>
|
||||
Profile
|
||||
</a>
|
||||
</li>
|
||||
<li class=" nav-link">
|
||||
<a class=" nav-item" href="javascript:void(0)" ngbDropdownItem>
|
||||
Settings
|
||||
</a>
|
||||
</li>
|
||||
<li class=" dropdown-divider"></li>
|
||||
<li class=" nav-link">
|
||||
<a class=" nav-item" href="javascript:void(0)" ngbDropdownItem>
|
||||
Log out
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class=" separator d-lg-none"></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<ng-template #content let-modal>
|
||||
<div class=" modal-header">
|
||||
<input
|
||||
class=" form-control"
|
||||
id="inlineFormInputGroup"
|
||||
placeholder="SEARCH"
|
||||
type="text"
|
||||
/>
|
||||
|
||||
<button
|
||||
aria-label="Close"
|
||||
class=" close"
|
||||
data-dismiss="modal"
|
||||
type="button"
|
||||
(click)="modal.dismiss('Cross click')"
|
||||
>
|
||||
<i class=" tim-icons icon-simple-remove"> </i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</ng-template>
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
import { async, ComponentFixture, TestBed } from "@angular/core/testing";
|
||||
|
||||
import { NavbarComponent } from "./navbar.component";
|
||||
|
||||
describe("NavbarComponent", () => {
|
||||
let component: NavbarComponent;
|
||||
let fixture: ComponentFixture<NavbarComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [NavbarComponent]
|
||||
}).compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(NavbarComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it("should create", () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -1,196 +0,0 @@
|
|||
import { Component, OnInit, ElementRef, OnDestroy } from "@angular/core";
|
||||
import { ROUTES } from "../sidebar/sidebar.component";
|
||||
import { Location } from "@angular/common";
|
||||
import { Router } from "@angular/router";
|
||||
import { NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';
|
||||
|
||||
@Component({
|
||||
selector: "app-navbar",
|
||||
templateUrl: "./navbar.component.html",
|
||||
styleUrls: ["./navbar.component.css"]
|
||||
})
|
||||
export class NavbarComponent implements OnInit, OnDestroy {
|
||||
private listTitles: any[];
|
||||
location: Location;
|
||||
mobile_menu_visible: any = 0;
|
||||
private toggleButton: any;
|
||||
private sidebarVisible: boolean;
|
||||
|
||||
public isCollapsed = true;
|
||||
|
||||
closeResult: string;
|
||||
|
||||
constructor(
|
||||
location: Location,
|
||||
private element: ElementRef,
|
||||
private router: Router,
|
||||
private modalService: NgbModal
|
||||
) {
|
||||
this.location = location;
|
||||
this.sidebarVisible = false;
|
||||
}
|
||||
// function that adds color white/transparent to the navbar on resize (this is for the collapse)
|
||||
updateColor = () => {
|
||||
var navbar = document.getElementsByClassName('navbar')[0];
|
||||
if (window.innerWidth < 993 && !this.isCollapsed) {
|
||||
navbar.classList.add('bg-white');
|
||||
navbar.classList.remove('navbar-transparent');
|
||||
} else {
|
||||
navbar.classList.remove('bg-white');
|
||||
navbar.classList.add('navbar-transparent');
|
||||
}
|
||||
};
|
||||
ngOnInit() {
|
||||
window.addEventListener("resize", this.updateColor);
|
||||
this.listTitles = ROUTES.filter(listTitle => listTitle);
|
||||
const navbar: HTMLElement = this.element.nativeElement;
|
||||
this.toggleButton = navbar.getElementsByClassName("navbar-toggler")[0];
|
||||
this.router.events.subscribe(event => {
|
||||
this.sidebarClose();
|
||||
var $layer: any = document.getElementsByClassName("close-layer")[0];
|
||||
if ($layer) {
|
||||
$layer.remove();
|
||||
this.mobile_menu_visible = 0;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
collapse() {
|
||||
this.isCollapsed = !this.isCollapsed;
|
||||
const navbar = document.getElementsByTagName("nav")[0];
|
||||
if (!this.isCollapsed) {
|
||||
navbar.classList.remove("navbar-transparent");
|
||||
navbar.classList.add("bg-white");
|
||||
} else {
|
||||
navbar.classList.add("navbar-transparent");
|
||||
navbar.classList.remove("bg-white");
|
||||
}
|
||||
}
|
||||
|
||||
sidebarOpen() {
|
||||
const toggleButton = this.toggleButton;
|
||||
const mainPanel = <HTMLElement>(
|
||||
document.getElementsByClassName("main-panel")[0]
|
||||
);
|
||||
const html = document.getElementsByTagName("html")[0];
|
||||
if (window.innerWidth < 991) {
|
||||
mainPanel.style.position = "fixed";
|
||||
}
|
||||
|
||||
setTimeout(function() {
|
||||
toggleButton.classList.add("toggled");
|
||||
}, 500);
|
||||
|
||||
html.classList.add("nav-open");
|
||||
|
||||
this.sidebarVisible = true;
|
||||
}
|
||||
sidebarClose() {
|
||||
const html = document.getElementsByTagName("html")[0];
|
||||
this.toggleButton.classList.remove("toggled");
|
||||
const mainPanel = <HTMLElement>(
|
||||
document.getElementsByClassName("main-panel")[0]
|
||||
);
|
||||
|
||||
if (window.innerWidth < 991) {
|
||||
setTimeout(function() {
|
||||
mainPanel.style.position = "";
|
||||
}, 500);
|
||||
}
|
||||
this.sidebarVisible = false;
|
||||
html.classList.remove("nav-open");
|
||||
}
|
||||
sidebarToggle() {
|
||||
// const toggleButton = this.toggleButton;
|
||||
// const html = document.getElementsByTagName('html')[0];
|
||||
var $toggle = document.getElementsByClassName("navbar-toggler")[0];
|
||||
|
||||
if (this.sidebarVisible === false) {
|
||||
this.sidebarOpen();
|
||||
} else {
|
||||
this.sidebarClose();
|
||||
}
|
||||
const html = document.getElementsByTagName("html")[0];
|
||||
|
||||
if (this.mobile_menu_visible == 1) {
|
||||
// $('html').removeClass('nav-open');
|
||||
html.classList.remove("nav-open");
|
||||
if ($layer) {
|
||||
$layer.remove();
|
||||
}
|
||||
setTimeout(function() {
|
||||
$toggle.classList.remove("toggled");
|
||||
}, 400);
|
||||
|
||||
this.mobile_menu_visible = 0;
|
||||
} else {
|
||||
setTimeout(function() {
|
||||
$toggle.classList.add("toggled");
|
||||
}, 430);
|
||||
|
||||
var $layer = document.createElement("div");
|
||||
$layer.setAttribute("class", "close-layer");
|
||||
|
||||
if (html.querySelectorAll(".main-panel")) {
|
||||
document.getElementsByClassName("main-panel")[0].appendChild($layer);
|
||||
} else if (html.classList.contains("off-canvas-sidebar")) {
|
||||
document
|
||||
.getElementsByClassName("wrapper-full-page")[0]
|
||||
.appendChild($layer);
|
||||
}
|
||||
|
||||
setTimeout(function() {
|
||||
$layer.classList.add("visible");
|
||||
}, 100);
|
||||
|
||||
$layer.onclick = function() {
|
||||
//asign a function
|
||||
html.classList.remove("nav-open");
|
||||
this.mobile_menu_visible = 0;
|
||||
$layer.classList.remove("visible");
|
||||
setTimeout(function() {
|
||||
$layer.remove();
|
||||
$toggle.classList.remove("toggled");
|
||||
}, 400);
|
||||
}.bind(this);
|
||||
|
||||
html.classList.add("nav-open");
|
||||
this.mobile_menu_visible = 1;
|
||||
}
|
||||
}
|
||||
|
||||
getTitle() {
|
||||
var titlee = this.location.prepareExternalUrl(this.location.path());
|
||||
if (titlee.charAt(0) === "#") {
|
||||
titlee = titlee.slice(1);
|
||||
}
|
||||
|
||||
for (var item = 0; item < this.listTitles.length; item++) {
|
||||
if (this.listTitles[item].path === titlee) {
|
||||
return this.listTitles[item].title;
|
||||
}
|
||||
}
|
||||
return "Dashboard";
|
||||
}
|
||||
|
||||
open(content) {
|
||||
this.modalService.open(content, {windowClass: 'modal-search'}).result.then((result) => {
|
||||
this.closeResult = `Closed with: ${result}`;
|
||||
}, (reason) => {
|
||||
this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
|
||||
});
|
||||
}
|
||||
|
||||
private getDismissReason(reason: any): string {
|
||||
if (reason === ModalDismissReasons.ESC) {
|
||||
return 'by pressing ESC';
|
||||
} else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
|
||||
return 'by clicking on a backdrop';
|
||||
} else {
|
||||
return `with: ${reason}`;
|
||||
}
|
||||
}
|
||||
ngOnDestroy(){
|
||||
window.removeEventListener("resize", this.updateColor);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { ComponentsSidebarComponent } from './components-sidebar/components-sidebar.component';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { UtilitiesSidebarComponent } from './utilities-sidebar/utilities-sidebar.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
RouterModule
|
||||
],
|
||||
declarations: [
|
||||
ComponentsSidebarComponent,
|
||||
UtilitiesSidebarComponent
|
||||
],
|
||||
exports: [
|
||||
ComponentsSidebarComponent,
|
||||
UtilitiesSidebarComponent
|
||||
]
|
||||
})
|
||||
|
||||
export class SharedModule { }
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
<div class="logo">
|
||||
<a href="https://www.creative-tim.com?ref=bda-sidebar-logo" class="simple-text logo-mini">
|
||||
<div class="logo-img">
|
||||
<img src="./assets/img/angular2-logo-white.png" />
|
||||
</div>
|
||||
</a>
|
||||
<a href="https://www.creative-tim.com?ref=bda-sidebar-logo" class="simple-text logo-normal">
|
||||
Creative Tim
|
||||
</a>
|
||||
</div>
|
||||
<div class="sidebar-wrapper">
|
||||
<ul class="nav">
|
||||
<li
|
||||
routerLinkActive="active"
|
||||
*ngFor="let menuItem of menuItems"
|
||||
class="{{ menuItem.class }} nav-item"
|
||||
>
|
||||
<a [routerLink]="[menuItem.path]">
|
||||
<i class="tim-icons {{ menuItem.icon }}"></i>
|
||||
<p>{{ menuItem.title }}</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
import { async, ComponentFixture, TestBed } from "@angular/core/testing";
|
||||
|
||||
import { SidebarComponent } from "./sidebar.component";
|
||||
|
||||
describe("SidebarComponent", () => {
|
||||
let component: SidebarComponent;
|
||||
let fixture: ComponentFixture<SidebarComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [SidebarComponent]
|
||||
}).compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(SidebarComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it("should create", () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -1,115 +0,0 @@
|
|||
import { Component, OnInit } from "@angular/core";
|
||||
|
||||
declare interface RouteInfo {
|
||||
path: string;
|
||||
title: string;
|
||||
icon: string;
|
||||
class: string;
|
||||
}
|
||||
export const ROUTES: RouteInfo[] = [
|
||||
{
|
||||
path: "/dashboard",
|
||||
title: "Dashboard",
|
||||
icon: "icon-chart-pie-36",
|
||||
class: ""
|
||||
},
|
||||
{
|
||||
path: "/providers",
|
||||
title: "Medical Providers",
|
||||
icon: "icon-cloud-download-93",
|
||||
class: ""
|
||||
},
|
||||
{
|
||||
path: "/patient",
|
||||
title: "Patient Profile",
|
||||
icon: "icon-single-02",
|
||||
class: ""
|
||||
},
|
||||
{
|
||||
path: "/allergies",
|
||||
title: "Allergies",
|
||||
icon: "icon-puzzle-10",
|
||||
class: ""
|
||||
},
|
||||
{
|
||||
path: "/encounters",
|
||||
title: "Encounters",
|
||||
icon: "icon-align-center",
|
||||
class: ""
|
||||
},
|
||||
{
|
||||
path: "/immunizations",
|
||||
title: "Immunizations",
|
||||
icon: "icon-align-center",
|
||||
class: ""
|
||||
},
|
||||
{
|
||||
path: "/instructions",
|
||||
title: "Instructions",
|
||||
icon: "icon-align-center",
|
||||
class: ""
|
||||
},
|
||||
{
|
||||
path: "/medications",
|
||||
title: "Medications",
|
||||
icon: "icon-align-center",
|
||||
class: ""
|
||||
},
|
||||
{
|
||||
path: "/organizations",
|
||||
title: "Organizations",
|
||||
icon: "icon-align-center",
|
||||
class: ""
|
||||
},
|
||||
{
|
||||
path: "/problems",
|
||||
title: "Problems",
|
||||
icon: "icon-align-center",
|
||||
class: ""
|
||||
},
|
||||
{
|
||||
path: "/procedures",
|
||||
title: "Procedures",
|
||||
icon: "icon-align-center",
|
||||
class: ""
|
||||
},
|
||||
{
|
||||
path: "/test_results",
|
||||
title: "Test Results",
|
||||
icon: "icon-align-center",
|
||||
class: ""
|
||||
},
|
||||
{
|
||||
path: "/vitals",
|
||||
title: "Vitals",
|
||||
icon: "icon-align-center",
|
||||
class: ""
|
||||
},
|
||||
{
|
||||
path: "/demographics",
|
||||
title: "Demographics",
|
||||
icon: "icon-align-center",
|
||||
class: ""
|
||||
}
|
||||
];
|
||||
|
||||
@Component({
|
||||
selector: "app-sidebar",
|
||||
templateUrl: "./sidebar.component.html",
|
||||
styleUrls: ["./sidebar.component.css"]
|
||||
})
|
||||
export class SidebarComponent implements OnInit {
|
||||
menuItems: any[];
|
||||
|
||||
constructor() {}
|
||||
|
||||
ngOnInit() {
|
||||
this.menuItems = ROUTES.filter(menuItem => menuItem);
|
||||
}
|
||||
isMobileMenu() {
|
||||
if (window.innerWidth > 991) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<div class="az-content-left az-content-left-components">
|
||||
<div class="component-item">
|
||||
<label>Tables</label>
|
||||
<nav class="nav flex-column">
|
||||
<a routerLink="/utilities/background" routerLinkActive="active" class="nav-link">Background</a>
|
||||
<a routerLink="/utilities/border" routerLinkActive="active" class="nav-link">Border</a>
|
||||
<a routerLink="/utilities/display" routerLinkActive="active" class="nav-link">Display</a>
|
||||
<a routerLink="/utilities/flex" routerLinkActive="active" class="nav-link">Flex</a>
|
||||
<a routerLink="/utilities/height" routerLinkActive="active" class="nav-link">Height</a>
|
||||
<a routerLink="/utilities/margin" routerLinkActive="active" class="nav-link">Margin</a>
|
||||
<a routerLink="/utilities/padding" routerLinkActive="active" class="nav-link">Padding</a>
|
||||
<a routerLink="/utilities/position" routerLinkActive="active" class="nav-link">Position</a>
|
||||
<a routerLink="/utilities/typography" routerLinkActive="active" class="nav-link">Typography</a>
|
||||
<a routerLink="/utilities/width" routerLinkActive="active" class="nav-link">Width</a>
|
||||
<a routerLink="/utilities/extras" routerLinkActive="active" class="nav-link">Extras</a>
|
||||
</nav>
|
||||
</div><!-- component-item -->
|
||||
|
||||
</div><!-- az-content-left -->
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { UtilitiesSidebarComponent } from './utilities-sidebar.component';
|
||||
|
||||
describe('UtilitiesSidebarComponent', () => {
|
||||
let component: UtilitiesSidebarComponent;
|
||||
let fixture: ComponentFixture<UtilitiesSidebarComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ UtilitiesSidebarComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(UtilitiesSidebarComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-utilities-sidebar',
|
||||
templateUrl: './utilities-sidebar.component.html',
|
||||
styleUrls: ['./utilities-sidebar.component.scss']
|
||||
})
|
||||
export class UtilitiesSidebarComponent implements OnInit {
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
<div class="wrapper">
|
||||
<div class="sidebar"><app-sidebar></app-sidebar></div>
|
||||
<div class="main-panel">
|
||||
<app-navbar></app-navbar>
|
||||
<router-outlet></router-outlet>
|
||||
<app-footer></app-footer>
|
||||
</div>
|
||||
</div>
|
||||
<div class=" fixed-plugin">
|
||||
<div class=" show-dropdown" ngbDropdown>
|
||||
<a data-toggle="dropdown" ngbDropdownToggle>
|
||||
<i class=" fa fa-cog fa-2x"> </i>
|
||||
</a>
|
||||
<ul ngbDropdownMenu>
|
||||
<li class=" header-title">Sidebar Background</li>
|
||||
<li class=" adjustments-line">
|
||||
<a class=" switch-trigger background-color" href="javascript:void(0)">
|
||||
<div class=" badge-colors text-center">
|
||||
<span
|
||||
class=" badge filter badge-danger"
|
||||
[ngClass]="{'active':sidebarColor==='red'}" (click)="changeSidebarColor('red')"
|
||||
>
|
||||
</span>
|
||||
<span
|
||||
class=" badge filter badge-primary"
|
||||
[ngClass]="{'active':sidebarColor==='primary'}" (click)="changeSidebarColor('primary')"
|
||||
>
|
||||
</span>
|
||||
<span class=" badge filter badge-info" [ngClass]="{'active':sidebarColor==='blue'}" (click)="changeSidebarColor('blue')"> </span>
|
||||
<span class=" badge filter badge-success" [ngClass]="{'active':sidebarColor==='green'}" (click)="changeSidebarColor('green')">
|
||||
</span>
|
||||
</div>
|
||||
<div class=" clearfix"></div>
|
||||
</a>
|
||||
</li>
|
||||
<li class=" adjustments-line text-center color-change">
|
||||
<span class=" color-label"> LIGHT MODE </span>
|
||||
<span class=" badge light-badge mr-2" (click)="changeDashboardColor('white-content')"> </span>
|
||||
<span class=" badge dark-badge ml-2" (click)="changeDashboardColor('black-content')"> </span>
|
||||
<span class=" color-label"> DARK MODE </span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
import { async, ComponentFixture, TestBed } from "@angular/core/testing";
|
||||
|
||||
import { AdminLayoutComponent } from "./admin-layout.component";
|
||||
|
||||
describe("AdminLayoutComponent", () => {
|
||||
let component: AdminLayoutComponent;
|
||||
let fixture: ComponentFixture<AdminLayoutComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [AdminLayoutComponent]
|
||||
}).compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(AdminLayoutComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it("should create", () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
import { Component, OnInit } from "@angular/core";
|
||||
|
||||
@Component({
|
||||
selector: "app-admin-layout",
|
||||
templateUrl: "./admin-layout.component.html",
|
||||
styleUrls: ["./admin-layout.component.scss"]
|
||||
})
|
||||
export class AdminLayoutComponent implements OnInit {
|
||||
public sidebarColor: string = "red";
|
||||
|
||||
constructor() {}
|
||||
changeSidebarColor(color){
|
||||
var sidebar = document.getElementsByClassName('sidebar')[0];
|
||||
var mainPanel = document.getElementsByClassName('main-panel')[0];
|
||||
|
||||
this.sidebarColor = color;
|
||||
|
||||
if(sidebar != undefined){
|
||||
sidebar.setAttribute('data',color);
|
||||
}
|
||||
if(mainPanel != undefined){
|
||||
mainPanel.setAttribute('data',color);
|
||||
}
|
||||
}
|
||||
changeDashboardColor(color){
|
||||
var body = document.getElementsByTagName('body')[0];
|
||||
if (body && color === 'white-content') {
|
||||
body.classList.add(color);
|
||||
}
|
||||
else if(body.classList.contains('white-content')) {
|
||||
body.classList.remove('white-content');
|
||||
}
|
||||
}
|
||||
ngOnInit() {}
|
||||
}
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
import { NgModule } from "@angular/core";
|
||||
import { HttpClientModule } from "@angular/common/http";
|
||||
import { RouterModule } from "@angular/router";
|
||||
import { CommonModule } from "@angular/common";
|
||||
import { FormsModule } from "@angular/forms";
|
||||
|
||||
import { AdminLayoutRoutes } from "./admin-layout.routing";
|
||||
import { DashboardComponent } from "../../pages/dashboard/dashboard.component";
|
||||
import { PatientComponent } from "../../pages/patient/patient.component";
|
||||
import { MedicalProvidersComponent } from "../../pages/medical-providers/medical-providers.component";
|
||||
|
||||
|
||||
import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
RouterModule.forChild(AdminLayoutRoutes),
|
||||
FormsModule,
|
||||
HttpClientModule,
|
||||
NgbModule,
|
||||
],
|
||||
declarations: [
|
||||
DashboardComponent,
|
||||
PatientComponent,
|
||||
MedicalProvidersComponent
|
||||
]
|
||||
})
|
||||
export class AdminLayoutModule {}
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
import { Routes } from "@angular/router";
|
||||
|
||||
import { DashboardComponent } from "../../pages/dashboard/dashboard.component";
|
||||
import { PatientComponent } from "../../pages/patient/patient.component";
|
||||
import {MedicalProvidersComponent} from '../../pages/medical-providers/medical-providers.component';
|
||||
|
||||
export const AdminLayoutRoutes: Routes = [
|
||||
{ path: "dashboard", component: DashboardComponent },
|
||||
{ path: "patient", component: PatientComponent },
|
||||
{ path: "providers", component: MedicalProvidersComponent },
|
||||
];
|
||||
|
|
@ -1,384 +1,392 @@
|
|||
|
||||
<div class=" content">
|
||||
<div class=" row">
|
||||
<div class=" col-12">
|
||||
<div class=" card card-chart">
|
||||
<div class=" card-header">
|
||||
<div class=" row">
|
||||
<div class=" col-sm-6 text-left">
|
||||
<h5 class=" card-category">Total Shipments</h5>
|
||||
<h2 class=" card-title">Performance</h2>
|
||||
<div class="az-content az-content-dashboard">
|
||||
<div class="container">
|
||||
<div class="az-content-body">
|
||||
<div class="az-dashboard-one-title">
|
||||
<div>
|
||||
<h2 class="az-dashboard-title">Hi, welcome back!</h2>
|
||||
<p class="az-dashboard-text">Your web analytics dashboard template.</p>
|
||||
</div>
|
||||
<div class="az-content-header-right">
|
||||
<div class="media">
|
||||
<div class="media-body">
|
||||
<label>Start Date</label>
|
||||
<h6>Oct 10, 2018</h6>
|
||||
</div><!-- media-body -->
|
||||
</div><!-- media -->
|
||||
<div class="media">
|
||||
<div class="media-body">
|
||||
<label>End Date</label>
|
||||
<h6>Oct 23, 2018</h6>
|
||||
</div><!-- media-body -->
|
||||
</div><!-- media -->
|
||||
<div class="media">
|
||||
<div class="media-body">
|
||||
<label>Event Category</label>
|
||||
<h6>All Categories</h6>
|
||||
</div><!-- media-body -->
|
||||
</div><!-- media -->
|
||||
<a href="" class="btn btn-purple">Export</a>
|
||||
</div>
|
||||
</div><!-- az-dashboard-one-title -->
|
||||
|
||||
<div class="az-dashboard-nav">
|
||||
<nav class="nav">
|
||||
<a class="nav-link active" routerLink="/">Overview</a>
|
||||
<a class="nav-link" routerLink="/">Audiences</a>
|
||||
<a class="nav-link" routerLink="/">Demographics</a>
|
||||
<a class="nav-link" routerLink="/">More</a>
|
||||
</nav>
|
||||
|
||||
<nav class="nav">
|
||||
<a class="nav-link" routerLink="/"><i class="far fa-save"></i> Save Report</a>
|
||||
<a class="nav-link" routerLink="/"><i class="far fa-file-pdf"></i> Export to PDF</a>
|
||||
<a class="nav-link" routerLink="/"><i class="far fa-envelope"></i>Send to Email</a>
|
||||
<a class="nav-link" routerLink="/"><i class="fas fa-ellipsis-h"></i></a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="row row-sm mg-b-20">
|
||||
<div class="col-lg-7 ht-lg-100p">
|
||||
<div class="card card-dashboard-one">
|
||||
<div class="card-header">
|
||||
<div>
|
||||
<h6 class="card-title">Website Audience Metrics</h6>
|
||||
<p class="card-text">Audience to which the users belonged while on the current date range.</p>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button class="btn active">Day</button>
|
||||
<button class="btn">Week</button>
|
||||
<button class="btn">Month</button>
|
||||
</div>
|
||||
</div><!-- card-header -->
|
||||
<div class="card-body">
|
||||
<div class="card-body-top">
|
||||
<div>
|
||||
<label class="mg-b-0">Users</label>
|
||||
<h2>13,956</h2>
|
||||
</div>
|
||||
<div>
|
||||
<label class="mg-b-0">Bounce Rate</label>
|
||||
<h2>33.50%</h2>
|
||||
</div>
|
||||
<div>
|
||||
<label class="mg-b-0">Page Views</label>
|
||||
<h2>83,123</h2>
|
||||
</div>
|
||||
<div>
|
||||
<label class="mg-b-0">Sessions</label>
|
||||
<h2>16,869</h2>
|
||||
</div>
|
||||
</div><!-- card-body-top -->
|
||||
<div class="page-view-chart-wrapper">
|
||||
<canvas baseChart [chartType]="'line'" [datasets]="pageViewChartData" [labels]="pageViewChartLabels" [options]="pageViewChartOptions" [colors]="pageViewChartColors"></canvas>
|
||||
</div>
|
||||
<!-- flot-chart-wrapper -->
|
||||
</div><!-- card-body -->
|
||||
</div><!-- card -->
|
||||
</div><!-- col -->
|
||||
<div class="col-lg-5 mg-t-20 mg-lg-t-0">
|
||||
<div class="row row-sm">
|
||||
<div class="col-sm-6">
|
||||
<div
|
||||
class=" btn-group btn-group-toggle float-right"
|
||||
data-toggle="buttons"
|
||||
>
|
||||
<label class=" btn btn-sm btn-danger btn-simple" (click)="data=datasets[0];updateOptions();clicked=true;clicked1=false;clicked2=false" [ngClass]="{'active':clicked===true}">
|
||||
<input checked="checked" name="options" type="radio" />
|
||||
|
||||
<span
|
||||
class=" d-none d-sm-block d-md-block d-lg-block d-xl-block"
|
||||
>
|
||||
Accounts
|
||||
</span>
|
||||
<span class=" d-block d-sm-none">
|
||||
<i class=" tim-icons icon-single-02"> </i>
|
||||
</span>
|
||||
</label>
|
||||
<label class=" btn btn-sm btn-danger btn-simple" (click)="data=datasets[1];updateOptions();clicked=false;clicked1=true;clicked2=false" [ngClass]="{'active':clicked1===true}">
|
||||
<input
|
||||
class=" d-none d-sm-none"
|
||||
name="options"
|
||||
type="radio"
|
||||
/>
|
||||
|
||||
<span
|
||||
class=" d-none d-sm-block d-md-block d-lg-block d-xl-block"
|
||||
>
|
||||
Purchases
|
||||
</span>
|
||||
<span class=" d-block d-sm-none">
|
||||
<i class=" tim-icons icon-gift-2"> </i>
|
||||
</span>
|
||||
</label>
|
||||
<label class=" btn btn-sm btn-danger btn-simple" (click)="data=datasets[2];updateOptions();clicked=false;clicked1=false;clicked2=true" [ngClass]="{'active':clicked2===true}">
|
||||
<input class=" d-none" name="options" type="radio" />
|
||||
|
||||
<span
|
||||
class=" d-none d-sm-block d-md-block d-lg-block d-xl-block"
|
||||
>
|
||||
Sessions
|
||||
</span>
|
||||
<span class=" d-block d-sm-none">
|
||||
<i class=" tim-icons icon-tap-02"> </i>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card-dashboard-two">
|
||||
<div class="card-header">
|
||||
<h6>33.50% <i class="icon ion-md-trending-up tx-success"></i> <small>18.02%</small></h6>
|
||||
<p>Bounce Rate</p>
|
||||
</div><!-- card-header -->
|
||||
<div class="card-body">
|
||||
<div class=" chart-area"><canvas id="chartBig1"> </canvas></div>
|
||||
<div class="bounce-rate-chart-wrapper">
|
||||
<canvas baseChart [chartType]="'line'" [datasets]="bounceRateChartData" [labels]="bounceRateChartLabels" [options]="bounceRateChartOptions" [colors]="bounceRateChartColors"></canvas>
|
||||
</div>
|
||||
</div><!-- card-body -->
|
||||
</div><!-- card -->
|
||||
</div><!-- col -->
|
||||
<div class="col-sm-6 mg-t-20 mg-sm-t-0">
|
||||
<div class="card card-dashboard-two">
|
||||
<div class="card-header">
|
||||
<h6>86k <i class="icon ion-md-trending-down tx-danger"></i> <small>0.86%</small></h6>
|
||||
<p>Total Users</p>
|
||||
</div><!-- card-header -->
|
||||
<div class="card-body">
|
||||
<div class="users-bar-chart-wrapper">
|
||||
<canvas baseChart [chartType]="'bar'" [datasets]="usersBarChartData" [labels]="usersBarChartLabels" [options]="usersBarChartOptions" [colors]="usersBarChartColors"></canvas>
|
||||
</div><!-- chart-wrapper -->
|
||||
</div><!-- card-body -->
|
||||
</div><!-- card -->
|
||||
</div><!-- col -->
|
||||
<div class="col-sm-12 mg-t-20">
|
||||
<div class="card card-dashboard-three">
|
||||
<div class="card-header">
|
||||
<p>All Sessions</p>
|
||||
<h6>16,869 <small class="tx-success"><i class="icon ion-md-arrow-up"></i> 2.87%</small></h6>
|
||||
<small>The total number of sessions within the date range. It is the period time a user is actively engaged with your website, page or app, etc.</small>
|
||||
</div><!-- card-header -->
|
||||
<div class="card-body">
|
||||
<div class="sessions-chart-wrapper">
|
||||
<canvas baseChart [chartType]="'bar'" [datasets]="sessionsChartData" [labels]="sessionsChartLabels" [options]="sessionsChartOptions" [colors]="sessionsChartColors"></canvas>
|
||||
</div><!-- chart-wrapper -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class=" row">
|
||||
</div><!-- row -->
|
||||
</div><!--col -->
|
||||
</div><!-- row -->
|
||||
|
||||
<div class="row row-sm mg-b-20">
|
||||
<div class="col-lg-4">
|
||||
<div class=" card card-chart">
|
||||
<div class="card card-dashboard-pageviews">
|
||||
<div class="card-header">
|
||||
<h5 class=" card-category">Total Shipments</h5>
|
||||
<h3 class=" card-title">
|
||||
<i class=" tim-icons icon-bell-55 text-danger-states"> </i> 763,215
|
||||
</h3>
|
||||
</div>
|
||||
<h6 class="card-title">Page Views by Page Title</h6>
|
||||
<p class="card-text">This report is based on 100% of sessions.</p>
|
||||
</div><!-- card-header -->
|
||||
<div class="card-body">
|
||||
<div class=" chart-area"><canvas id="chartLineRed"> </canvas></div>
|
||||
<div class="az-list-item">
|
||||
<div>
|
||||
<h6>Admin Home</h6>
|
||||
<span>/demo/admin/index.html</span>
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="tx-primary">7,755</h6>
|
||||
<span>31.74% (-100.00%)</span>
|
||||
</div>
|
||||
</div><!-- list-group-item -->
|
||||
<div class="az-list-item">
|
||||
<div>
|
||||
<h6>Form Elements</h6>
|
||||
<span>/demo/admin/forms.html</span>
|
||||
</div>
|
||||
<div class=" col-lg-4">
|
||||
<div class=" card card-chart">
|
||||
<div>
|
||||
<h6 class="tx-primary">5,215</h6>
|
||||
<span>28.53% (-100.00%)</span>
|
||||
</div>
|
||||
</div><!-- list-group-item -->
|
||||
<div class="az-list-item">
|
||||
<div>
|
||||
<h6>Utilities</h6>
|
||||
<span>/demo/admin/util.html</span>
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="tx-primary">4,848</h6>
|
||||
<span>25.35% (-100.00%)</span>
|
||||
</div>
|
||||
</div><!-- list-group-item -->
|
||||
<div class="az-list-item">
|
||||
<div>
|
||||
<h6>Form Validation</h6>
|
||||
<span>/demo/admin/validation.html</span>
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="tx-primary">3,275</h6>
|
||||
<span>23.17% (-100.00%)</span>
|
||||
</div>
|
||||
</div><!-- list-group-item -->
|
||||
<div class="az-list-item">
|
||||
<div>
|
||||
<h6>Modals</h6>
|
||||
<span>/demo/admin/modals.html</span>
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="tx-primary">3,003</h6>
|
||||
<span>22.21% (-100.00%)</span>
|
||||
</div>
|
||||
</div><!-- list-group-item -->
|
||||
</div><!-- card-body -->
|
||||
</div><!-- card -->
|
||||
|
||||
</div><!-- col -->
|
||||
<div class="col-lg-8 mg-t-20 mg-lg-t-0">
|
||||
<div class="card card-dashboard-four">
|
||||
<div class="card-header">
|
||||
<h5 class=" card-category">Daily Sales</h5>
|
||||
<h3 class=" card-title">
|
||||
<i class=" tim-icons icon-delivery-fast text-info"> </i> 3,500€
|
||||
</h3>
|
||||
<h6 class="card-title">Sessions by Channel</h6>
|
||||
</div><!-- card-header -->
|
||||
<div class="card-body row">
|
||||
<div class="col-md-6 d-flex align-items-center">
|
||||
<div class="chart">
|
||||
<canvas baseChart [chartType]="'doughnut'" [datasets]="sessionsByChannelChartData" [labels]="sessionsByChannelChartLabels" [options]="sessionsByChannelChartOptions" height="210"></canvas>
|
||||
</div>
|
||||
<div class=" card-body">
|
||||
<div class=" chart-area"><canvas id="CountryChart"> </canvas></div>
|
||||
</div><!-- col -->
|
||||
<div class="col-md-6 col-lg-5 mg-lg-l-auto mg-t-20 mg-md-t-0">
|
||||
<div class="az-traffic-detail-item">
|
||||
<div>
|
||||
<span>Organic Search</span>
|
||||
<span>1,320 <span>(25%)</span></span>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar bg-purple wd-25p" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div><!-- progress -->
|
||||
</div>
|
||||
<div class="az-traffic-detail-item">
|
||||
<div>
|
||||
<span>Email</span>
|
||||
<span>987 <span>(20%)</span></span>
|
||||
</div>
|
||||
<div class=" col-lg-4">
|
||||
<div class=" card card-chart">
|
||||
<div class="progress">
|
||||
<div class="progress-bar bg-primary wd-20p" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div><!-- progress -->
|
||||
</div>
|
||||
<div class="az-traffic-detail-item">
|
||||
<div>
|
||||
<span>Referral</span>
|
||||
<span>2,010 <span>(30%)</span></span>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar bg-info wd-30p" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div><!-- progress -->
|
||||
</div>
|
||||
<div class="az-traffic-detail-item">
|
||||
<div>
|
||||
<span>Social</span>
|
||||
<span>654 <span>(15%)</span></span>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar bg-teal wd-15p" role="progressbar" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div><!-- progress -->
|
||||
</div>
|
||||
<div class="az-traffic-detail-item">
|
||||
<div>
|
||||
<span>Other</span>
|
||||
<span>400 <span>(10%)</span></span>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar bg-gray-500 wd-10p" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div><!-- progress -->
|
||||
</div>
|
||||
</div><!-- col -->
|
||||
</div><!-- card-body -->
|
||||
</div><!-- card-dashboard-four -->
|
||||
</div><!-- col -->
|
||||
</div><!-- row -->
|
||||
|
||||
<div class="row row-sm mg-b-20 mg-lg-b-0">
|
||||
<div class="col-lg-5 col-xl-4">
|
||||
<div class="row row-sm">
|
||||
<div class="col-md-6 col-lg-12 mg-b-20 mg-md-b-0 mg-lg-b-20">
|
||||
<div class="card card-dashboard-five">
|
||||
<div class="card-header">
|
||||
<h5 class=" card-category">Completed Tasks</h5>
|
||||
<h3 class=" card-title">
|
||||
<i class=" tim-icons icon-send text-success"> </i> 12,100K
|
||||
</h3>
|
||||
<h6 class="card-title">Acquisition</h6>
|
||||
<span class="card-text">Tells you where your visitors originated from, such as search engines, social networks or website referrals.</span>
|
||||
</div><!-- card-header -->
|
||||
<div class="card-body row row-sm">
|
||||
<div class="col-6 d-sm-flex align-items-center">
|
||||
<div class="card-chart bg-primary">
|
||||
<canvas baseChart class="w-50" [chartType]="'bar'" [datasets]="acquisitionOneChartData" [labels]="acquisitionOneChartLabels" [options]="acquisitionOneChartOptions" [colors]="acquisitionOneChartColors"></canvas>
|
||||
</div>
|
||||
<div class=" card-body">
|
||||
<div class=" chart-area"><canvas id="chartLineGreen"> </canvas></div>
|
||||
<div>
|
||||
<label>Bounce Rate</label>
|
||||
<h4>33.50%</h4>
|
||||
</div>
|
||||
</div><!-- col -->
|
||||
<div class="col-6 d-sm-flex align-items-center">
|
||||
<div class="card-chart bg-purple">
|
||||
<canvas baseChart class="w-50" [chartType]="'bar'" [datasets]="acquisitionTwoChartData" [labels]="acquisitionTwoChartLabels" [options]="acquisitionTwoChartOptions" [colors]="acquisitionTwoChartColors"></canvas>
|
||||
</div>
|
||||
<div>
|
||||
<label>Sessions</label>
|
||||
<h4>9,065</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class=" row">
|
||||
<div class=" col-lg-6 col-md-12">
|
||||
<div class=" card card-tasks">
|
||||
</div><!-- col -->
|
||||
</div><!-- card-body -->
|
||||
</div><!-- card-dashboard-five -->
|
||||
</div><!-- col -->
|
||||
<div class="col-md-6 col-lg-12">
|
||||
<div class="card card-dashboard-five">
|
||||
<div class="card-header">
|
||||
<h6 class=" title d-inline">Tasks(5)</h6>
|
||||
<p class=" card-category d-inline">today</p>
|
||||
<div ngbDropdown>
|
||||
<button
|
||||
class=" btn btn-link btn-icon"
|
||||
data-toggle="dropdown"
|
||||
ngbDropdownToggle
|
||||
type="button"
|
||||
>
|
||||
<i class=" tim-icons icon-settings-gear-63"> </i>
|
||||
</button>
|
||||
<div
|
||||
aria-labelledby="dropdownMenuLink"
|
||||
class=" dropdown-menu-right"
|
||||
ngbDropdownMenu
|
||||
>
|
||||
<a href="javascript:void(0)" ngbDropdownItem> Action </a>
|
||||
<a href="javascript:void(0)" ngbDropdownItem> Another action </a>
|
||||
<a href="javascript:void(0)" ngbDropdownItem> Something else </a>
|
||||
<h6 class="card-title">Sessions</h6>
|
||||
<span class="card-text"> A session is the period time a user is actively engaged with your website, app, etc.</span>
|
||||
</div><!-- card-header -->
|
||||
<div class="card-body row row-sm">
|
||||
<div class="col-6">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="mg-b-10 mg-sm-b-0 mg-sm-r-10 wd-50">
|
||||
<canvas baseChart [chartType]="'doughnut'" [datasets]="sessionsChartOneData" [labels]="sessionsChartOneLabels" [options]="sessionsChartOneOptions" height="45"></canvas>
|
||||
</div>
|
||||
<div>
|
||||
<label>% New Sessions</label>
|
||||
<h4>26.80%</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- col -->
|
||||
<div class="col-6 d-flex align-items-center">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="mg-b-10 mg-sm-b-0 mg-sm-r-10 wd-50">
|
||||
<canvas baseChart [chartType]="'doughnut'" [datasets]="sessionsChartTwoData" [labels]="sessionsChartTwoLabels" [options]="sessionsChartTwoOptions" height="45"></canvas>
|
||||
</div>
|
||||
<div class=" card-body">
|
||||
<div class=" table-full-width table-responsive">
|
||||
<table class=" table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<div class=" form-check">
|
||||
<label class=" form-check-label">
|
||||
<input
|
||||
class=" form-check-input"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
|
||||
<span class=" form-check-sign">
|
||||
<span class=" check"> </span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<p class=" title">Update the Documentation</p>
|
||||
<p class=" text-muted">
|
||||
Dwuamish Head, Seattle, WA 8:47 AM
|
||||
</p>
|
||||
</td>
|
||||
<td class=" td-actions text-right">
|
||||
<button class=" btn btn-link" type="button" placement="left" ngbTooltip="Edit Task" container="body" >
|
||||
<i class=" tim-icons icon-pencil"> </i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class=" form-check">
|
||||
<label class=" form-check-label">
|
||||
<input
|
||||
checked=""
|
||||
class=" form-check-input"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
|
||||
<span class=" form-check-sign">
|
||||
<span class=" check"> </span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<p class=" title">GDPR Compliance</p>
|
||||
<p class=" text-muted">
|
||||
The GDPR is a regulation that requires businesses to
|
||||
protect the personal data and privacy of Europe citizens
|
||||
for transactions that occur within EU member states.
|
||||
</p>
|
||||
</td>
|
||||
<td class=" td-actions text-right">
|
||||
<button class=" btn btn-link" type="button" placement="left" ngbTooltip="Edit Task" container="body" >
|
||||
<i class=" tim-icons icon-pencil"> </i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class=" form-check">
|
||||
<label class=" form-check-label">
|
||||
<input
|
||||
class=" form-check-input"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
|
||||
<span class=" form-check-sign">
|
||||
<span class=" check"> </span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<p class=" title">Solve the issues</p>
|
||||
<p class=" text-muted">
|
||||
Fifty percent of all respondents said they would be more
|
||||
likely to shop at a company
|
||||
</p>
|
||||
</td>
|
||||
<td class=" td-actions text-right">
|
||||
<button class=" btn btn-link" type="button" placement="left" ngbTooltip="Edit Task" container="body" >
|
||||
<i class=" tim-icons icon-pencil"> </i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class=" form-check">
|
||||
<label class=" form-check-label">
|
||||
<input
|
||||
class=" form-check-input"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
|
||||
<span class=" form-check-sign">
|
||||
<span class=" check"> </span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<p class=" title">Release v2.0.0</p>
|
||||
<p class=" text-muted">
|
||||
Ra Ave SW, Seattle, WA 98116, SUA 11:19 AM
|
||||
</p>
|
||||
</td>
|
||||
<td class=" td-actions text-right">
|
||||
<button class=" btn btn-link" type="button" placement="left" ngbTooltip="Edit Task" container="body" >
|
||||
<i class=" tim-icons icon-pencil"> </i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class=" form-check">
|
||||
<label class=" form-check-label">
|
||||
<input
|
||||
class=" form-check-input"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
|
||||
<span class=" form-check-sign">
|
||||
<span class=" check"> </span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<p class=" title">Export the processed files</p>
|
||||
<p class=" text-muted">
|
||||
The report also shows that consumers will not easily
|
||||
forgive a company once a breach exposing their personal
|
||||
data occurs.
|
||||
</p>
|
||||
</td>
|
||||
<td class=" td-actions text-right">
|
||||
<button class=" btn btn-link" type="button" placement="left" ngbTooltip="Edit Task" container="body" >
|
||||
<i class=" tim-icons icon-pencil"> </i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class=" form-check">
|
||||
<label class=" form-check-label">
|
||||
<input
|
||||
class=" form-check-input"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
|
||||
<span class=" form-check-sign">
|
||||
<span class=" check"> </span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<p class=" title">Arival at export process</p>
|
||||
<p class=" text-muted">
|
||||
Capitol Hill, Seattle, WA 12:34 AM
|
||||
</p>
|
||||
</td>
|
||||
<td class=" td-actions text-right">
|
||||
<button class=" btn btn-link" type="button" placement="left" ngbTooltip="Edit Task" container="body" >
|
||||
<i class=" tim-icons icon-pencil"> </i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div>
|
||||
<label>Pages/Session</label>
|
||||
<h4>1,005</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class=" col-lg-6 col-md-12">
|
||||
<div class=" card">
|
||||
<div class=" card-header">
|
||||
<h4 class=" card-title">Simple Table</h4>
|
||||
</div>
|
||||
<div class=" card-body">
|
||||
</div><!-- col -->
|
||||
</div><!-- card-body -->
|
||||
</div><!-- card-dashboard-five -->
|
||||
</div><!-- col -->
|
||||
</div><!-- row -->
|
||||
</div><!-- col-lg-3 -->
|
||||
<div class="col-lg-7 col-xl-8 mg-t-20 mg-lg-t-0">
|
||||
<div class="card card-table-one">
|
||||
<h6 class="card-title">What pages do your users visit</h6>
|
||||
<p class="az-content-text mg-b-20">Part of this date range occurs before the new users metric had been calculated, so the old users metric is displayed.</p>
|
||||
<div class="table-responsive">
|
||||
<table class=" table tablesorter" id="">
|
||||
<thead class=" text-primary">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Country</th>
|
||||
<th>City</th>
|
||||
<th class=" text-center">Salary</th>
|
||||
<th class="wd-5p"> </th>
|
||||
<th class="wd-45p">Country</th>
|
||||
<th>Entrances</th>
|
||||
<th>Bounce Rate</th>
|
||||
<th>Exits</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Dakota Rice</td>
|
||||
<td>Niger</td>
|
||||
<td>Oud-Turnhout</td>
|
||||
<td class=" text-center">$36,738</td>
|
||||
<td><i class="flag-icon flag-icon-us flag-icon-squared"></i></td>
|
||||
<td><strong>United States</strong></td>
|
||||
<td><strong>134</strong> (1.51%)</td>
|
||||
<td>33.58%</td>
|
||||
<td>15.47%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Minerva Hooper</td>
|
||||
<td>Curaçao</td>
|
||||
<td>Sinaai-Waas</td>
|
||||
<td class=" text-center">$23,789</td>
|
||||
<td><i class="flag-icon flag-icon-gb flag-icon-squared"></i></td>
|
||||
<td><strong>United Kingdom</strong></td>
|
||||
<td><strong>290</strong> (3.30%)</td>
|
||||
<td>9.22%</td>
|
||||
<td>7.99%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sage Rodriguez</td>
|
||||
<td>Netherlands</td>
|
||||
<td>Baileux</td>
|
||||
<td class=" text-center">$56,142</td>
|
||||
<td><i class="flag-icon flag-icon-in flag-icon-squared"></i></td>
|
||||
<td><strong>India</strong></td>
|
||||
<td><strong>250</strong> (3.00%)</td>
|
||||
<td>20.75%</td>
|
||||
<td>2.40%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Philip Chaney</td>
|
||||
<td>Korea, South</td>
|
||||
<td>Overland Park</td>
|
||||
<td class=" text-center">$38,735</td>
|
||||
<td><i class="flag-icon flag-icon-ca flag-icon-squared"></i></td>
|
||||
<td><strong>Canada</strong></td>
|
||||
<td><strong>216</strong> (2.79%)</td>
|
||||
<td>32.07%</td>
|
||||
<td>15.09%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Doris Greene</td>
|
||||
<td>Malawi</td>
|
||||
<td>Feldkirchen in Kärnten</td>
|
||||
<td class=" text-center">$63,542</td>
|
||||
<td><i class="flag-icon flag-icon-fr flag-icon-squared"></i></td>
|
||||
<td><strong>France</strong></td>
|
||||
<td><strong>216</strong> (2.79%)</td>
|
||||
<td>32.07%</td>
|
||||
<td>15.09%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Mason Porter</td>
|
||||
<td>Chile</td>
|
||||
<td>Gloucester</td>
|
||||
<td class=" text-center">$78,615</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jon Porter</td>
|
||||
<td>Portugal</td>
|
||||
<td>Gloucester</td>
|
||||
<td class=" text-center">$98,615</td>
|
||||
<td><i class="flag-icon flag-icon-ph flag-icon-squared"></i></td>
|
||||
<td><strong>Philippines</strong></td>
|
||||
<td><strong>197</strong> (2.12%)</td>
|
||||
<td>32.07%</td>
|
||||
<td>15.09%</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div><!-- table-responsive -->
|
||||
</div><!-- card -->
|
||||
</div><!-- col-lg -->
|
||||
|
||||
</div><!-- row -->
|
||||
</div><!-- az-content-body -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- az-content -->
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
.page-view-chart-wrapper {
|
||||
canvas {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { DashboardComponent } from './dashboard.component';
|
||||
|
||||
|
|
@ -6,12 +6,14 @@ describe('DashboardComponent', () => {
|
|||
let component: DashboardComponent;
|
||||
let fixture: ComponentFixture<DashboardComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ DashboardComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(DashboardComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
|
|
|
|||
|
|
@ -1,470 +1,482 @@
|
|||
import { Component, OnInit } from "@angular/core";
|
||||
import Chart from 'chart.js';
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: "app-dashboard",
|
||||
templateUrl: "dashboard.component.html"
|
||||
selector: 'app-dashboard',
|
||||
templateUrl: './dashboard.component.html',
|
||||
styleUrls: ['./dashboard.component.scss']
|
||||
})
|
||||
export class DashboardComponent implements OnInit {
|
||||
public canvas : any;
|
||||
public ctx;
|
||||
public datasets: any;
|
||||
public data: any;
|
||||
public myChartData;
|
||||
public clicked: boolean = true;
|
||||
public clicked1: boolean = false;
|
||||
public clicked2: boolean = false;
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
var gradientChartOptionsConfigurationWithTooltipBlue: any = {
|
||||
maintainAspectRatio: false,
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
|
||||
tooltips: {
|
||||
backgroundColor: '#f5f5f5',
|
||||
titleFontColor: '#333',
|
||||
bodyFontColor: '#666',
|
||||
bodySpacing: 4,
|
||||
xPadding: 12,
|
||||
mode: "nearest",
|
||||
intersect: 0,
|
||||
position: "nearest"
|
||||
},
|
||||
responsive: true,
|
||||
scales: {
|
||||
yAxes: [{
|
||||
barPercentage: 1.6,
|
||||
gridLines: {
|
||||
drawBorder: false,
|
||||
color: 'rgba(29,140,248,0.0)',
|
||||
zeroLineColor: "transparent",
|
||||
},
|
||||
ticks: {
|
||||
suggestedMin: 60,
|
||||
suggestedMax: 125,
|
||||
padding: 20,
|
||||
fontColor: "#2380f7"
|
||||
}
|
||||
}],
|
||||
|
||||
xAxes: [{
|
||||
barPercentage: 1.6,
|
||||
gridLines: {
|
||||
drawBorder: false,
|
||||
color: 'rgba(29,140,248,0.1)',
|
||||
zeroLineColor: "transparent",
|
||||
},
|
||||
ticks: {
|
||||
padding: 20,
|
||||
fontColor: "#2380f7"
|
||||
}
|
||||
}]
|
||||
}
|
||||
};
|
||||
|
||||
var gradientChartOptionsConfigurationWithTooltipPurple: any = {
|
||||
maintainAspectRatio: false,
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
|
||||
tooltips: {
|
||||
backgroundColor: '#f5f5f5',
|
||||
titleFontColor: '#333',
|
||||
bodyFontColor: '#666',
|
||||
bodySpacing: 4,
|
||||
xPadding: 12,
|
||||
mode: "nearest",
|
||||
intersect: 0,
|
||||
position: "nearest"
|
||||
},
|
||||
responsive: true,
|
||||
scales: {
|
||||
yAxes: [{
|
||||
barPercentage: 1.6,
|
||||
gridLines: {
|
||||
drawBorder: false,
|
||||
color: 'rgba(29,140,248,0.0)',
|
||||
zeroLineColor: "transparent",
|
||||
},
|
||||
ticks: {
|
||||
suggestedMin: 60,
|
||||
suggestedMax: 125,
|
||||
padding: 20,
|
||||
fontColor: "#9a9a9a"
|
||||
}
|
||||
}],
|
||||
|
||||
xAxes: [{
|
||||
barPercentage: 1.6,
|
||||
gridLines: {
|
||||
drawBorder: false,
|
||||
color: 'rgba(225,78,202,0.1)',
|
||||
zeroLineColor: "transparent",
|
||||
},
|
||||
ticks: {
|
||||
padding: 20,
|
||||
fontColor: "#9a9a9a"
|
||||
}
|
||||
}]
|
||||
}
|
||||
};
|
||||
|
||||
var gradientChartOptionsConfigurationWithTooltipRed: any = {
|
||||
maintainAspectRatio: false,
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
|
||||
tooltips: {
|
||||
backgroundColor: '#f5f5f5',
|
||||
titleFontColor: '#333',
|
||||
bodyFontColor: '#666',
|
||||
bodySpacing: 4,
|
||||
xPadding: 12,
|
||||
mode: "nearest",
|
||||
intersect: 0,
|
||||
position: "nearest"
|
||||
},
|
||||
responsive: true,
|
||||
scales: {
|
||||
yAxes: [{
|
||||
barPercentage: 1.6,
|
||||
gridLines: {
|
||||
drawBorder: false,
|
||||
color: 'rgba(29,140,248,0.0)',
|
||||
zeroLineColor: "transparent",
|
||||
},
|
||||
ticks: {
|
||||
suggestedMin: 60,
|
||||
suggestedMax: 125,
|
||||
padding: 20,
|
||||
fontColor: "#9a9a9a"
|
||||
}
|
||||
}],
|
||||
|
||||
xAxes: [{
|
||||
barPercentage: 1.6,
|
||||
gridLines: {
|
||||
drawBorder: false,
|
||||
color: 'rgba(233,32,16,0.1)',
|
||||
zeroLineColor: "transparent",
|
||||
},
|
||||
ticks: {
|
||||
padding: 20,
|
||||
fontColor: "#9a9a9a"
|
||||
}
|
||||
}]
|
||||
}
|
||||
};
|
||||
|
||||
var gradientChartOptionsConfigurationWithTooltipOrange: any = {
|
||||
maintainAspectRatio: false,
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
|
||||
tooltips: {
|
||||
backgroundColor: '#f5f5f5',
|
||||
titleFontColor: '#333',
|
||||
bodyFontColor: '#666',
|
||||
bodySpacing: 4,
|
||||
xPadding: 12,
|
||||
mode: "nearest",
|
||||
intersect: 0,
|
||||
position: "nearest"
|
||||
},
|
||||
responsive: true,
|
||||
scales: {
|
||||
yAxes: [{
|
||||
barPercentage: 1.6,
|
||||
gridLines: {
|
||||
drawBorder: false,
|
||||
color: 'rgba(29,140,248,0.0)',
|
||||
zeroLineColor: "transparent",
|
||||
},
|
||||
ticks: {
|
||||
suggestedMin: 50,
|
||||
suggestedMax: 110,
|
||||
padding: 20,
|
||||
fontColor: "#ff8a76"
|
||||
}
|
||||
}],
|
||||
|
||||
xAxes: [{
|
||||
barPercentage: 1.6,
|
||||
gridLines: {
|
||||
drawBorder: false,
|
||||
color: 'rgba(220,53,69,0.1)',
|
||||
zeroLineColor: "transparent",
|
||||
},
|
||||
ticks: {
|
||||
padding: 20,
|
||||
fontColor: "#ff8a76"
|
||||
}
|
||||
}]
|
||||
}
|
||||
};
|
||||
|
||||
var gradientChartOptionsConfigurationWithTooltipGreen: any = {
|
||||
maintainAspectRatio: false,
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
|
||||
tooltips: {
|
||||
backgroundColor: '#f5f5f5',
|
||||
titleFontColor: '#333',
|
||||
bodyFontColor: '#666',
|
||||
bodySpacing: 4,
|
||||
xPadding: 12,
|
||||
mode: "nearest",
|
||||
intersect: 0,
|
||||
position: "nearest"
|
||||
},
|
||||
responsive: true,
|
||||
scales: {
|
||||
yAxes: [{
|
||||
barPercentage: 1.6,
|
||||
gridLines: {
|
||||
drawBorder: false,
|
||||
color: 'rgba(29,140,248,0.0)',
|
||||
zeroLineColor: "transparent",
|
||||
},
|
||||
ticks: {
|
||||
suggestedMin: 50,
|
||||
suggestedMax: 125,
|
||||
padding: 20,
|
||||
fontColor: "#9e9e9e"
|
||||
}
|
||||
}],
|
||||
|
||||
xAxes: [{
|
||||
barPercentage: 1.6,
|
||||
gridLines: {
|
||||
drawBorder: false,
|
||||
color: 'rgba(0,242,195,0.1)',
|
||||
zeroLineColor: "transparent",
|
||||
},
|
||||
ticks: {
|
||||
padding: 20,
|
||||
fontColor: "#9e9e9e"
|
||||
}
|
||||
}]
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
var gradientBarChartConfiguration: any = {
|
||||
maintainAspectRatio: false,
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
|
||||
tooltips: {
|
||||
backgroundColor: '#f5f5f5',
|
||||
titleFontColor: '#333',
|
||||
bodyFontColor: '#666',
|
||||
bodySpacing: 4,
|
||||
xPadding: 12,
|
||||
mode: "nearest",
|
||||
intersect: 0,
|
||||
position: "nearest"
|
||||
},
|
||||
responsive: true,
|
||||
scales: {
|
||||
yAxes: [{
|
||||
|
||||
gridLines: {
|
||||
drawBorder: false,
|
||||
color: 'rgba(29,140,248,0.1)',
|
||||
zeroLineColor: "transparent",
|
||||
},
|
||||
ticks: {
|
||||
suggestedMin: 60,
|
||||
suggestedMax: 120,
|
||||
padding: 20,
|
||||
fontColor: "#9e9e9e"
|
||||
}
|
||||
}],
|
||||
|
||||
xAxes: [{
|
||||
|
||||
gridLines: {
|
||||
drawBorder: false,
|
||||
color: 'rgba(29,140,248,0.1)',
|
||||
zeroLineColor: "transparent",
|
||||
},
|
||||
ticks: {
|
||||
padding: 20,
|
||||
fontColor: "#9e9e9e"
|
||||
}
|
||||
}]
|
||||
}
|
||||
};
|
||||
|
||||
this.canvas = document.getElementById("chartLineRed");
|
||||
this.ctx = this.canvas.getContext("2d");
|
||||
|
||||
var gradientStroke = this.ctx.createLinearGradient(0, 230, 0, 50);
|
||||
|
||||
gradientStroke.addColorStop(1, 'rgba(233,32,16,0.2)');
|
||||
gradientStroke.addColorStop(0.4, 'rgba(233,32,16,0.0)');
|
||||
gradientStroke.addColorStop(0, 'rgba(233,32,16,0)'); //red colors
|
||||
|
||||
var data = {
|
||||
labels: ['JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'],
|
||||
datasets: [{
|
||||
label: "Data",
|
||||
fill: true,
|
||||
backgroundColor: gradientStroke,
|
||||
borderColor: '#ec250d',
|
||||
pageViewChartData = [{
|
||||
label: 'This week',
|
||||
data: [36.57, 38.9, 42.3, 41.8, 37.4, 32.5, 28.1, 24.7, 23.4, 20.4, 16.5, 12.1, 9.2, 5.1, 9.6, 10.8, 13.2, 18.2, 13.9, 18.7, 13.7, 11.3, 13.7, 15.8, 12.9, 17.5, 21.9, 18.2, 14.3, 18.2, 14.8, 13.01, 14.5, 15.4, 16.6, 19.4, 14.5, 17.7, 13.8, 9.4, 11.9, 9.7, 6.1, 1.4, 2.3, 2.3, 4.5, 3.7, 5.7, 5.08, 1.9, 8.2,
|
||||
7.9, 5.02, 2.8, 6.8, 6.2, 9.8, 9.3, 11.9, 10, 9, 6, 4.5, 2.7, 4.3, 3.6, 4.2, 2, 1.4, 3.7, 1.5, 5.7, 4.9, 1, 4.7, 6.3, 4.2, 5.1, 5.2, 3.8, 8.2, 7.2, 6.5, 1.7, 11.4, 10.5, 3.8, 4.7, 8.5, 10.2, 11, 15.6, 19.7, 18.1, 13.5, 12, 7.5, 3.7, 9.7, 9.2, 13.4, 18.4, 22.4, 18.7, 15.2, 14.5, 14.4, 12, 13.7, 13.3, 15.4,
|
||||
15.8, 17.7, 14.3, 10.6, 12.7, 14.7, 18.6, 22.9, 18, 22.8, 23.8, 27.1, 24.7, 20, 22.7, 20.9, 16.6, 15.1, 13.1, 10.7, 11.4, 13.1, 10.1, 9.2, 9.2, 10.3, 15.2, 12.5, 14, 18.2, 16.3, 17.7, 18.9, 15.3, 18.1, 16.3, 14.8, 10 ],
|
||||
borderWidth: 2,
|
||||
borderDash: [],
|
||||
borderDashOffset: 0.0,
|
||||
pointBackgroundColor: '#ec250d',
|
||||
pointBorderColor: 'rgba(255,255,255,0)',
|
||||
pointHoverBackgroundColor: '#ec250d',
|
||||
pointBorderWidth: 20,
|
||||
pointHoverRadius: 4,
|
||||
pointHoverBorderWidth: 15,
|
||||
pointRadius: 4,
|
||||
data: [80, 100, 70, 80, 120, 80],
|
||||
}]
|
||||
};
|
||||
|
||||
var myChart = new Chart(this.ctx, {
|
||||
type: 'line',
|
||||
data: data,
|
||||
options: gradientChartOptionsConfigurationWithTooltipRed
|
||||
});
|
||||
|
||||
|
||||
this.canvas = document.getElementById("chartLineGreen");
|
||||
this.ctx = this.canvas.getContext("2d");
|
||||
|
||||
|
||||
var gradientStroke = this.ctx.createLinearGradient(0, 230, 0, 50);
|
||||
|
||||
gradientStroke.addColorStop(1, 'rgba(66,134,121,0.15)');
|
||||
gradientStroke.addColorStop(0.4, 'rgba(66,134,121,0.0)'); //green colors
|
||||
gradientStroke.addColorStop(0, 'rgba(66,134,121,0)'); //green colors
|
||||
|
||||
var data = {
|
||||
labels: ['JUL', 'AUG', 'SEP', 'OCT', 'NOV'],
|
||||
datasets: [{
|
||||
label: "My First dataset",
|
||||
fill: true,
|
||||
backgroundColor: gradientStroke,
|
||||
borderColor: '#00d6b4',
|
||||
fill: true
|
||||
},
|
||||
{
|
||||
label: 'Current week',
|
||||
data: [53, 50.3, 49.4, 47.7, 49, 50.6, 48.7, 48.8, 53.5, 52.9, 49, 50.2, 48.3, 44.8, 40.7, 41.2, 45.6, 44.6, 41.3, 38.2, 39.6, 41, 39.4, 35.6, 38.5, 38.5, 40.6, 38.7, 42.9, 46.3, 43.5, 40.6, 36.5, 31.7, 28.9, 29.6, 29.5, 33.1, 37, 35.8, 37.6, 39.6, 39, 34.1, 37.4, 39.2, 38.4, 37.7, 40.1, 35.8, 31.5, 31.8,
|
||||
30.5, 25.7, 28.2, 28.4, 30, 32.1, 32.9, 37.6, 35.2, 39.1, 41.3, 41.4, 43.7, 39.4, 39.2, 43.8, 42.4, 43.6, 38.7 , 43.5, 41.8, 44.8, 46.1, 47.6, 49, 46.4, 51.2, 50.1, 53.6, 56, 52.7, 56.6, 60.2, 58.3, 56.5, 55.7, 54.7, 54.2, 58.6, 57, 60.5, 57.6, 56.1, 55.1, 54.3, 52.3, 54.5, 54.1, 51.9, 51.1, 46.3, 48.3,
|
||||
45.8, 48.2, 43.3, 45.8, 43.4, 41.3, 40.9, 38.4, 40.1, 44.8, 44, 41.4, 37.8, 39.2, 35.2, 32.1, 35.6, 38, 37.9, 38.7, 37.4, 37.5, 33.1, 35, 33.1, 31.8, 29.1, 31.9, 34.3, 32.9, 33.1, 37.1, 32.6, 36.9, 35.9, 38.1, 42.5, 41.5, 45.5, 46.3, 45.7, 45.4, 42.5, 44.4, 39.7, 44.7],
|
||||
borderWidth: 2,
|
||||
borderDash: [],
|
||||
borderDashOffset: 0.0,
|
||||
pointBackgroundColor: '#00d6b4',
|
||||
pointBorderColor: 'rgba(255,255,255,0)',
|
||||
pointHoverBackgroundColor: '#00d6b4',
|
||||
pointBorderWidth: 20,
|
||||
pointHoverRadius: 4,
|
||||
pointHoverBorderWidth: 15,
|
||||
pointRadius: 4,
|
||||
data: [90, 27, 60, 12, 80],
|
||||
}]
|
||||
fill: true
|
||||
}];
|
||||
|
||||
pageViewChartLabels = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44', '45', '46', '47', '48', '49',
|
||||
'50', '51', '52', '53', '54', '55', '56', '57', '58', '59', '60', '61', '62', '63', '64', '65', '66', '67', '68', '69', '70', '71', '72', '73', '74', '75', '76', '77', '78', '79', '80', '81', '82', '83', '84', '85', '86', '87', '88', '89', '90', '91', '92', '93', '94', '95', '96', '97', '98', '99',
|
||||
'100', '101', '102', '103', '104', '105', '106', '107', '108', '109', '110', '111', '112', '113', '114', '115', '116', '117', '118', '119', '120', '121', '122', '123', '124', '125', '126', '127', '128', '129', '130', '131', '132', '133', '134', '135', '136', '137', '138', '139', '140', '141', '142', '143', '144', '145', '146', '147', '148', '149'];
|
||||
|
||||
pageViewChartOptions = {
|
||||
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
yAxes: [{
|
||||
display: true,
|
||||
gridLines: {
|
||||
drawBorder: false,
|
||||
display: true,
|
||||
drawTicks: false,
|
||||
color: '#eef0fa',
|
||||
zeroLineColor: 'rgba(90, 113, 208, 0)',
|
||||
},
|
||||
ticks: {
|
||||
display: false,
|
||||
beginAtZero: true,
|
||||
min: 0,
|
||||
max: 100,
|
||||
stepSize: 32,
|
||||
padding: 10,
|
||||
}
|
||||
}],
|
||||
xAxes: [{
|
||||
display: false,
|
||||
position: 'bottom',
|
||||
gridLines: {
|
||||
drawBorder: false,
|
||||
display: false,
|
||||
drawTicks: false,
|
||||
},
|
||||
ticks: {
|
||||
beginAtZero: true,
|
||||
stepSize: 10,
|
||||
fontColor: "#a7afb7",
|
||||
padding: 10,
|
||||
}
|
||||
}],
|
||||
},
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
point: {
|
||||
radius: 0
|
||||
},
|
||||
line: {
|
||||
tension: 0
|
||||
}
|
||||
},
|
||||
tooltips: {
|
||||
backgroundColor: 'rgba(2, 171, 254, 1)',
|
||||
},
|
||||
};
|
||||
|
||||
var myChart = new Chart(this.ctx, {
|
||||
type: 'line',
|
||||
data: data,
|
||||
options: gradientChartOptionsConfigurationWithTooltipGreen
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
var chart_labels = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'];
|
||||
this.datasets = [
|
||||
[100, 70, 90, 70, 85, 60, 75, 60, 90, 80, 110, 100],
|
||||
[80, 120, 105, 110, 95, 105, 90, 100, 80, 95, 70, 120],
|
||||
[60, 80, 65, 130, 80, 105, 90, 130, 70, 115, 60, 130]
|
||||
pageViewChartColors = [
|
||||
{
|
||||
backgroundColor: [
|
||||
'rgba(255, 255, 255, 1)',
|
||||
],
|
||||
borderColor: [
|
||||
'rgb(0, 123, 255)'
|
||||
]
|
||||
},
|
||||
{
|
||||
backgroundColor: [
|
||||
'rgba(86, 11, 208, .05)',
|
||||
],
|
||||
borderColor: [
|
||||
'rgb(86, 11, 208)'
|
||||
],
|
||||
}
|
||||
];
|
||||
this.data = this.datasets[0];
|
||||
|
||||
|
||||
|
||||
this.canvas = document.getElementById("chartBig1");
|
||||
this.ctx = this.canvas.getContext("2d");
|
||||
|
||||
var gradientStroke = this.ctx.createLinearGradient(0, 230, 0, 50);
|
||||
|
||||
gradientStroke.addColorStop(1, 'rgba(233,32,16,0.2)');
|
||||
gradientStroke.addColorStop(0.4, 'rgba(233,32,16,0.0)');
|
||||
gradientStroke.addColorStop(0, 'rgba(233,32,16,0)'); //red colors
|
||||
|
||||
var config = {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: chart_labels,
|
||||
datasets: [{
|
||||
label: "My First dataset",
|
||||
fill: true,
|
||||
backgroundColor: gradientStroke,
|
||||
borderColor: '#ec250d',
|
||||
bounceRateChartData = [{
|
||||
label: 'This week',
|
||||
data: [27.2, 29.9, 29.6, 25.7, 25.9, 29.3, 31.1, 27.9, 28.4, 25.4, 23.2, 18.2, 14, 12.7, 11, 13.7, 9.7, 12.6, 10.9, 12.7, 13.8, 12.9, 13.8, 10.2, 5.8, 7.6, 8.8, 5.6, 5.6, 6.3, 4.2, 3.6, 5.4, 6.5, 8.1, 10.9, 7.6, 9.7, 10.9, 9.5, 5.4, 4.9, .7, 2.3, 5.5, 10, 10.6, 8.3, 8.4, 8.5, 5.8 ],
|
||||
borderWidth: 2,
|
||||
borderDash: [],
|
||||
borderDashOffset: 0.0,
|
||||
pointBackgroundColor: '#ec250d',
|
||||
pointBorderColor: 'rgba(255,255,255,0)',
|
||||
pointHoverBackgroundColor: '#ec250d',
|
||||
pointBorderWidth: 20,
|
||||
pointHoverRadius: 4,
|
||||
pointHoverBorderWidth: 15,
|
||||
pointRadius: 4,
|
||||
data: this.data,
|
||||
}]
|
||||
},
|
||||
options: gradientChartOptionsConfigurationWithTooltipRed
|
||||
};
|
||||
this.myChartData = new Chart(this.ctx, config);
|
||||
fill: true
|
||||
}];
|
||||
|
||||
bounceRateChartLabels = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44', '45', '46', '47', '48', '49', '50', '51'];
|
||||
|
||||
this.canvas = document.getElementById("CountryChart");
|
||||
this.ctx = this.canvas.getContext("2d");
|
||||
var gradientStroke = this.ctx.createLinearGradient(0, 230, 0, 50);
|
||||
bounceRateChartOptions = {
|
||||
|
||||
gradientStroke.addColorStop(1, 'rgba(29,140,248,0.2)');
|
||||
gradientStroke.addColorStop(0.4, 'rgba(29,140,248,0.0)');
|
||||
gradientStroke.addColorStop(0, 'rgba(29,140,248,0)'); //blue colors
|
||||
|
||||
|
||||
var myChart = new Chart(this.ctx, {
|
||||
type: 'bar',
|
||||
responsive:true,
|
||||
maintainAspectRatio:false,
|
||||
scales: {
|
||||
yAxes: [{
|
||||
display: false,
|
||||
gridLines: {
|
||||
drawBorder: false,
|
||||
display: true,
|
||||
drawTicks: false,
|
||||
},
|
||||
ticks: {
|
||||
display: false,
|
||||
beginAtZero: true,
|
||||
min: 0,
|
||||
max: 40,
|
||||
stepSize: 10,
|
||||
}
|
||||
}],
|
||||
xAxes: [{
|
||||
display: false,
|
||||
position: 'bottom',
|
||||
gridLines: {
|
||||
drawBorder: false,
|
||||
display: false,
|
||||
drawTicks: false,
|
||||
},
|
||||
ticks: {
|
||||
beginAtZero: true,
|
||||
stepSize: 10,
|
||||
fontColor: "#a7afb7",
|
||||
padding: 10,
|
||||
}
|
||||
}],
|
||||
},
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
point: {
|
||||
radius: 0
|
||||
},
|
||||
line: {
|
||||
tension: 0
|
||||
}
|
||||
},
|
||||
tooltips: {
|
||||
backgroundColor: 'rgba(2, 171, 254, 1)',
|
||||
},
|
||||
};
|
||||
|
||||
bounceRateChartColors = [
|
||||
{
|
||||
backgroundColor: [
|
||||
'rgba(0, 204, 212, .2)',
|
||||
],
|
||||
borderColor: [
|
||||
'rgb(0, 204, 212)'
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
// Total users chart
|
||||
usersBarChartData = [{
|
||||
label: '# of Votes',
|
||||
data: [27.2, 29.9, 29.6, 25.7, 25.9, 29.3, 31.1, 27.9, 28.4, 25.4, 23.2, 18.2, 14, 12.7, 11, 13.7, 9.7, 12.6, 10.9, 12.7, 13.8],
|
||||
borderWidth: 1,
|
||||
fill: false
|
||||
}];
|
||||
|
||||
usersBarChartLabels = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18'];
|
||||
|
||||
usersBarChartOptions = {
|
||||
|
||||
responsive:true,
|
||||
maintainAspectRatio:false,
|
||||
scales: {
|
||||
yAxes: [{
|
||||
display: false,
|
||||
ticks: {
|
||||
display: false,
|
||||
},
|
||||
gridLines: {
|
||||
drawBorder: false,
|
||||
display: false
|
||||
}
|
||||
}],
|
||||
xAxes: [{
|
||||
display: false,
|
||||
barThickness: 5.5,
|
||||
ticks: {
|
||||
display: false,
|
||||
},
|
||||
gridLines: {
|
||||
drawBorder: false,
|
||||
display: false
|
||||
}
|
||||
}]
|
||||
|
||||
},
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
data: {
|
||||
labels: ['USA', 'GER', 'AUS', 'UK', 'RO', 'BR'],
|
||||
datasets: [{
|
||||
label: "Countries",
|
||||
fill: true,
|
||||
backgroundColor: gradientStroke,
|
||||
hoverBackgroundColor: gradientStroke,
|
||||
borderColor: '#1f8ef1',
|
||||
borderWidth: 2,
|
||||
borderDash: [],
|
||||
borderDashOffset: 0.0,
|
||||
data: [53, 20, 10, 80, 100, 45],
|
||||
}]
|
||||
elements: {
|
||||
point: {
|
||||
radius: 0
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
usersBarChartColors = [
|
||||
{
|
||||
backgroundColor: '#007bff',
|
||||
borderColor: '#007bff'
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
// Total users chart
|
||||
sessionsChartData = [{
|
||||
label: '# of Votes',
|
||||
data: [2, 4, 10, 20, 45, 40, 35, 18],
|
||||
borderWidth: 1,
|
||||
fill: false
|
||||
},
|
||||
options: gradientBarChartConfiguration
|
||||
});
|
||||
{
|
||||
label: '# of Rate',
|
||||
data: [3, 6, 15, 35, 50, 45, 35, 25],
|
||||
borderWidth: 1,
|
||||
fill: false
|
||||
}];
|
||||
|
||||
sessionsChartLabels = [0,1,2,3,4,5,6,7];
|
||||
|
||||
sessionsChartOptions = {
|
||||
|
||||
responsive:true,
|
||||
maintainAspectRatio:false,
|
||||
scales: {
|
||||
yAxes: [{
|
||||
display: false,
|
||||
ticks: {
|
||||
beginAtZero:true,
|
||||
fontSize: 11,
|
||||
max: 80
|
||||
},
|
||||
gridLines: {
|
||||
drawBorder: false,
|
||||
}
|
||||
}],
|
||||
xAxes: [{
|
||||
barPercentage: 0.6,
|
||||
gridLines: {
|
||||
color: 'rgba(0,0,0,0.08)',
|
||||
drawBorder: false
|
||||
},
|
||||
ticks: {
|
||||
beginAtZero:true,
|
||||
fontSize: 11,
|
||||
display: false
|
||||
}
|
||||
}]
|
||||
|
||||
},
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
elements: {
|
||||
point: {
|
||||
radius: 0
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
sessionsChartColors = [
|
||||
{
|
||||
backgroundColor: '#560bd0'
|
||||
},
|
||||
{
|
||||
backgroundColor: '#cad0e8'
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
// Sessions by channel doughnut chart
|
||||
sessionsByChannelChartData = [{
|
||||
data: [25,20,30,15,10],
|
||||
backgroundColor: ['#6f42c1', '#007bff','#17a2b8','#00cccc','#adb2bd'],
|
||||
}];
|
||||
|
||||
sessionsByChannelChartLabels: ['Search', 'Email', 'Referral', 'Social', 'Other'];
|
||||
sessionsByChannelChartOptions = {
|
||||
cutoutPercentage: 50,
|
||||
maintainAspectRatio: false,
|
||||
responsive: true,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
animation: {
|
||||
animateScale: true,
|
||||
animateRotate: true
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// Sessions by channel doughnut chart
|
||||
sessionsChartOneData = [{
|
||||
data: [40,60],
|
||||
backgroundColor: ['#007bff', '#cad0e8'],
|
||||
borderColor: ['#007bff', '#cad0e8'],
|
||||
}];
|
||||
|
||||
sessionsChartOneLabels: ['Search', 'Email'];
|
||||
sessionsChartOneOptions = {
|
||||
cutoutPercentage: 78,
|
||||
maintainAspectRatio: false,
|
||||
responsive: true,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
animation: {
|
||||
animateScale: true,
|
||||
animateRotate: true
|
||||
}
|
||||
};
|
||||
|
||||
// Sessions by channel doughnut chart
|
||||
sessionsChartTwoData = [{
|
||||
data: [25,75],
|
||||
backgroundColor: ['#00cccc', '#cad0e8'],
|
||||
borderColor: ['#00cccc', '#cad0e8']
|
||||
}];
|
||||
|
||||
sessionsChartTwoLabels: ['Search', 'Email'];
|
||||
sessionsChartTwoOptions = {
|
||||
cutoutPercentage: 78,
|
||||
maintainAspectRatio: false,
|
||||
responsive: true,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
animation: {
|
||||
animateScale: true,
|
||||
animateRotate: true
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// Acquisition chart one
|
||||
acquisitionOneChartData = [{
|
||||
label: '# of Votes',
|
||||
data: [4,2.5,5,3,5],
|
||||
borderWidth: 1,
|
||||
fill: false
|
||||
}];
|
||||
|
||||
acquisitionOneChartLabels = ['1', '2', '3', '4', '5'];
|
||||
|
||||
acquisitionOneChartOptions = {
|
||||
|
||||
responsive:true,
|
||||
maintainAspectRatio:false,
|
||||
scales: {
|
||||
yAxes: [{
|
||||
display: false,
|
||||
ticks: {
|
||||
display: false,
|
||||
},
|
||||
gridLines: {
|
||||
drawBorder: false,
|
||||
display: false
|
||||
}
|
||||
}],
|
||||
xAxes: [{
|
||||
display: false,
|
||||
barThickness: 5.5,
|
||||
ticks: {
|
||||
display: false,
|
||||
},
|
||||
gridLines: {
|
||||
drawBorder: false,
|
||||
display: false
|
||||
}
|
||||
}]
|
||||
|
||||
},
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
elements: {
|
||||
point: {
|
||||
radius: 0
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
acquisitionOneChartColors = [
|
||||
{
|
||||
backgroundColor: '#fff',
|
||||
borderColor: '#fff'
|
||||
}
|
||||
];
|
||||
|
||||
// Acquisition chart two
|
||||
acquisitionTwoChartData = [{
|
||||
label: '# of Votes',
|
||||
data: [5,2,3,5,1.5],
|
||||
borderWidth: 1,
|
||||
fill: false
|
||||
}];
|
||||
|
||||
acquisitionTwoChartLabels = ['1', '2', '3', '4', '5'];
|
||||
|
||||
acquisitionTwoChartOptions = {
|
||||
|
||||
responsive:true,
|
||||
maintainAspectRatio:false,
|
||||
scales: {
|
||||
yAxes: [{
|
||||
display: false,
|
||||
ticks: {
|
||||
display: false,
|
||||
},
|
||||
gridLines: {
|
||||
drawBorder: false,
|
||||
display: false
|
||||
}
|
||||
}],
|
||||
xAxes: [{
|
||||
display: false,
|
||||
barThickness: 5.5,
|
||||
ticks: {
|
||||
display: false,
|
||||
},
|
||||
gridLines: {
|
||||
drawBorder: false,
|
||||
display: false
|
||||
}
|
||||
}]
|
||||
|
||||
},
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
elements: {
|
||||
point: {
|
||||
radius: 0
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
acquisitionTwoChartColors = [
|
||||
{
|
||||
backgroundColor: '#fff',
|
||||
borderColor: '#fff'
|
||||
}
|
||||
];
|
||||
|
||||
}
|
||||
public updateOptions() {
|
||||
this.myChartData.data.datasets[0].data = this.data;
|
||||
this.myChartData.update();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,62 +0,0 @@
|
|||
<div class=" content">
|
||||
<div class=" row">
|
||||
<div class=" col-md-12">
|
||||
<div class=" card">
|
||||
<div class=" card-header">
|
||||
<h5 class=" title">Medical Providers</h5>
|
||||
<p class=" category">
|
||||
The following medical providers have API's which Fasten can use to retrieve your medical history.
|
||||
Please click the logos below to initiate the connection.
|
||||
</p>
|
||||
</div>
|
||||
<div class=" card-body all-icons">
|
||||
<div class=" row">
|
||||
|
||||
<div class=" font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
|
||||
<button (click)="connect($event, 'aetna')">
|
||||
<img class=" tim-icons icon-alert-circle-exc" src="assets/img/provider_logos/aetna.png">
|
||||
<p>Aetna</p>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
<div class=" font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
|
||||
<button (click)="connect($event, 'anthem')">
|
||||
<img class=" tim-icons icon-alert-circle-exc" src="assets/img/provider_logos/anthem.png">
|
||||
<p>Anthem</p>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class=" font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
|
||||
<button (click)="connect($event, 'cigna')">
|
||||
<img class=" tim-icons icon-alert-circle-exc" src="assets/img/provider_logos/cigna.jpg">
|
||||
<p>Cigna</p>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class=" font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
|
||||
<button (click)="connect($event, 'humana')" >
|
||||
<img class=" tim-icons icon-alert-circle-exc" src="assets/img/provider_logos/humana.webp">
|
||||
<p>Humana</p>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class=" font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
|
||||
<button (click)="connect($event, 'kaiser')">
|
||||
<img class=" tim-icons icon-alert-circle-exc" src="assets/img/provider_logos/kaiser.jpg">
|
||||
<p>Kaiser</p>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class=" font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
|
||||
<button (click)="connect($event, 'united_healthcare')">
|
||||
<img class=" tim-icons icon-alert-circle-exc" src="assets/img/provider_logos/unitedhealthcare.jpg">
|
||||
<p>United Healthcare</p>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { MedicalProvidersComponent } from './medical-providers.component';
|
||||
|
||||
describe('MedicalProvidersComponent', () => {
|
||||
let component: MedicalProvidersComponent;
|
||||
let fixture: ComponentFixture<MedicalProvidersComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ MedicalProvidersComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(MedicalProvidersComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,160 @@
|
|||
<div class="az-content">
|
||||
<div class="container">
|
||||
<app-components-sidebar></app-components-sidebar>
|
||||
<div class="az-content-body pd-lg-l-40 d-flex flex-column">
|
||||
<div class="az-content-breadcrumb">
|
||||
<span>Medical Sources</span>
|
||||
</div>
|
||||
<h2 class="az-content-title">Medical Sources</h2>
|
||||
|
||||
<div class="az-content-label mg-b-5">Hospitals & Medical Clinics</div>
|
||||
<p class="mg-b-20">The following medical insurance companies have API's which Fasten can use to retrieve your medical history.
|
||||
Please click the logos below to initiate the connection.</p>
|
||||
|
||||
<div class="row row-sm">
|
||||
<div class="col-lg">
|
||||
<input class="form-control" placeholder="Input box" type="text">
|
||||
</div><!-- col -->
|
||||
<div class="col-lg mg-t-10 mg-lg-t-0">
|
||||
<input class="form-control" placeholder="Input box (readonly)" readonly="" type="text">
|
||||
</div><!-- col -->
|
||||
<div class="col-lg mg-t-10 mg-lg-t-0">
|
||||
<input class="form-control" placeholder="Input box (disabled)" disabled="" type="text">
|
||||
</div><!-- col -->
|
||||
</div><!-- row -->
|
||||
|
||||
<hr class="mg-y-30">
|
||||
|
||||
<div class="az-content-label mg-b-5">Insurance Companies</div>
|
||||
<p class="mg-b-20">The following medical insurance companies have API's which Fasten can use to retrieve your medical history.
|
||||
Please click the logos below to initiate the connection.</p>
|
||||
|
||||
<div class="row row-sm">
|
||||
<div (click)="connect($event, 'aetna')" class="col-md-6 col-lg-4 d-flex align-items-stretch">
|
||||
<div class="card bd-0">
|
||||
<img src="assets/sources/aetna.png" alt="Image" class="img-fluid">
|
||||
<div class="card-body bd bd-t-0">
|
||||
<p class="card-text">Aetna</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div (click)="connect($event, 'anthem')" class="col-md-6 col-lg-4 d-flex align-items-stretch">
|
||||
<div class="card bd-0">
|
||||
<img src="assets/sources/anthem.png" alt="Image" class="img-fluid">
|
||||
<div class="card-body bd bd-t-0">
|
||||
<p class="card-text">Anthem</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div (click)="connect($event, 'cigna')" class="col-md-6 col-lg-4 d-flex align-items-stretch">
|
||||
<div class="card bd-0">
|
||||
<img src="assets/sources/cigna.png" alt="Image" class="img-fluid">
|
||||
<div class="card-body bd bd-t-0">
|
||||
<p class="card-text">Cigna</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div (click)="connect($event, 'humana')" class="col-md-6 col-lg-4 d-flex align-items-stretch">
|
||||
<div class="card bd-0">
|
||||
<img src="assets/sources/humana.png" alt="Image" class="img-fluid">
|
||||
<div class="card-body bd bd-t-0">
|
||||
<p class="card-text">Humana</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div (click)="connect($event, 'kaiser')" class="col-md-6 col-lg-4 d-flex align-items-stretch">
|
||||
<div class="card bd-0">
|
||||
<img src="assets/sources/kaiser.png" alt="Image" class="img-fluid">
|
||||
<div class="card-body bd bd-t-0">
|
||||
<p class="card-text">Kaiser</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div (click)="connect($event, 'unitedhealthcare')" class="col-md-6 col-lg-4 d-flex align-items-stretch">
|
||||
<div class="card bd-0">
|
||||
<img src="assets/sources/unitedhealthcare.png" alt="Image" class="img-fluid">
|
||||
<div class="card-body bd bd-t-0">
|
||||
<p class="card-text">United Healthcare</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div><!-- row -->
|
||||
|
||||
|
||||
|
||||
<div class="ht-40"></div>
|
||||
|
||||
</div><!-- az-content-body -->
|
||||
</div><!-- container -->
|
||||
</div><!-- az-content -->
|
||||
|
||||
|
||||
<!--<div class=" content">-->
|
||||
<!-- <div class=" row">-->
|
||||
<!-- <div class=" col-md-12">-->
|
||||
<!-- <div class=" card">-->
|
||||
<!-- <div class=" card-header">-->
|
||||
<!-- <h5 class=" title">Medical Sources</h5>-->
|
||||
<!-- <p class=" category">-->
|
||||
<!-- The following medical sources have API's which Fasten can use to retrieve your medical history.-->
|
||||
<!-- Please click the logos below to initiate the connection.-->
|
||||
<!-- </p>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class=" card-body all-icons">-->
|
||||
<!-- <div class=" row">-->
|
||||
|
||||
<!-- <div class=" font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">-->
|
||||
<!-- <button (click)="connect($event, 'aetna')">-->
|
||||
<!-- <img class=" tim-icons icon-alert-circle-exc" style="max-width:100px;" src="assets/sources/aetna.png">-->
|
||||
<!-- <p>Aetna</p>-->
|
||||
<!-- </button>-->
|
||||
<!-- </div>-->
|
||||
|
||||
|
||||
<!-- <div class=" font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">-->
|
||||
<!-- <button (click)="connect($event, 'anthem')">-->
|
||||
<!-- <img class=" tim-icons icon-alert-circle-exc" style="max-width:100px;" src="assets/sources/anthem.png">-->
|
||||
<!-- <p>Anthem</p>-->
|
||||
<!-- </button>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<!-- <div class=" font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">-->
|
||||
<!-- <button (click)="connect($event, 'cigna')">-->
|
||||
<!-- <img class=" tim-icons icon-alert-circle-exc" style="max-width:100px;" src="assets/sources/cigna.png">-->
|
||||
<!-- <p>Cigna</p>-->
|
||||
<!-- </button>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<!-- <div class=" font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">-->
|
||||
<!-- <button (click)="connect($event, 'humana')" >-->
|
||||
<!-- <img class=" tim-icons icon-alert-circle-exc" style="max-width:100px;" src="assets/sources/humana.png">-->
|
||||
<!-- <p>Humana</p>-->
|
||||
<!-- </button>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<!-- <div class=" font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">-->
|
||||
<!-- <button (click)="connect($event, 'kaiser')">-->
|
||||
<!-- <img class=" tim-icons icon-alert-circle-exc" style="max-width:100px;" src="assets/sources/kaiser.png">-->
|
||||
<!-- <p>Kaiser</p>-->
|
||||
<!-- </button>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<!-- <div class=" font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">-->
|
||||
<!-- <button (click)="connect($event, 'united_healthcare')">-->
|
||||
<!-- <img class=" tim-icons icon-alert-circle-exc" style="max-width:100px;" src="assets/sources/unitedhealthcare.png">-->
|
||||
<!-- <p>United Healthcare</p>-->
|
||||
<!-- </button>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!--</div>-->
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { MedicalSourcesComponent } from './medical-sources.component';
|
||||
|
||||
describe('MedicalSourcesComponent', () => {
|
||||
let component: MedicalSourcesComponent;
|
||||
let fixture: ComponentFixture<MedicalSourcesComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ MedicalSourcesComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(MedicalSourcesComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -15,11 +15,11 @@ export const retryCount = 24; //wait 2 minutes (5 * 24 = 120)
|
|||
export const retryWaitMilliSeconds = 5000; //wait 5 seconds
|
||||
|
||||
@Component({
|
||||
selector: 'app-medical-providers',
|
||||
templateUrl: './medical-providers.component.html',
|
||||
styleUrls: ['./medical-providers.component.scss']
|
||||
selector: 'app-medical-sources',
|
||||
templateUrl: './medical-sources.component.html',
|
||||
styleUrls: ['./medical-sources.component.scss']
|
||||
})
|
||||
export class MedicalProvidersComponent implements OnInit {
|
||||
export class MedicalSourcesComponent implements OnInit {
|
||||
|
||||
constructor(
|
||||
private passportApi: PassportService,
|
||||
|
|
@ -1,543 +0,0 @@
|
|||
/* --------------------------------
|
||||
|
||||
Nucleo Outline Web Font - nucleoapp.com/
|
||||
License - nucleoapp.com/license/
|
||||
Created using IcoMoon - icomoon.io
|
||||
|
||||
-------------------------------- */
|
||||
|
||||
@font-face {
|
||||
font-family: 'Nucleo';
|
||||
src: url('../fonts/nucleo.eot');
|
||||
src: url('../fonts/nucleo.eot') format('embedded-opentype'), url('../fonts/nucleo.woff2') format('woff2'), url('../fonts/nucleo.woff') format('woff'), url('../fonts/nucleo.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/*------------------------
|
||||
base class definition
|
||||
-------------------------*/
|
||||
|
||||
.tim-icons {
|
||||
display: inline-block;
|
||||
font: normal normal normal 1em/1 'Nucleo';
|
||||
vertical-align: middle;
|
||||
speak: none;
|
||||
text-transform: none;
|
||||
/* Better Font Rendering */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.font-icon-detail {
|
||||
text-align: center;
|
||||
padding: 45px 0 30px;
|
||||
border: 1px solid #e44cc4;
|
||||
border-radius: .1875rem;
|
||||
margin: 15px 0;
|
||||
min-height: 168px;
|
||||
}
|
||||
|
||||
.font-icon-detail i {
|
||||
color: #FFFFFF;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.font-icon-detail p {
|
||||
color: #e44cc4 !important;
|
||||
margin-top: 30px;
|
||||
padding: 0 10px;
|
||||
font-size: .7142em;
|
||||
}
|
||||
|
||||
/*------------------------
|
||||
change icon size
|
||||
-------------------------*/
|
||||
|
||||
.tim-icons-sm {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.tim-icons-lg {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
/* absolute units */
|
||||
|
||||
.tim-icons-16 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.tim-icons-32 {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
/*----------------------------------
|
||||
add a square/circle background
|
||||
-----------------------------------*/
|
||||
|
||||
.tim-icons-bg-square,
|
||||
.tim-icons-bg-circle {
|
||||
padding: 0.35em;
|
||||
}
|
||||
|
||||
.tim-icons-bg-circle {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/*------------------------
|
||||
list icons
|
||||
-------------------------*/
|
||||
|
||||
/*------------------------
|
||||
spinning icons
|
||||
-------------------------*/
|
||||
|
||||
.tim-icons-is-spinning {
|
||||
-webkit-animation: tim-icons-spin 2s infinite linear;
|
||||
-moz-animation: tim-icons-spin 2s infinite linear;
|
||||
animation: tim-icons-spin 2s infinite linear;
|
||||
}
|
||||
|
||||
@-webkit-keyframes tim-icons-spin {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes tim-icons-spin {
|
||||
0% {
|
||||
-moz-transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-moz-transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes tim-icons-spin {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
-moz-transform: rotate(0deg);
|
||||
-ms-transform: rotate(0deg);
|
||||
-o-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
-moz-transform: rotate(360deg);
|
||||
-ms-transform: rotate(360deg);
|
||||
-o-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/*------------------------
|
||||
rotated/flipped icons
|
||||
-------------------------*/
|
||||
|
||||
/*------------------------
|
||||
icons
|
||||
-------------------------*/
|
||||
|
||||
.icon-alert-circle-exc::before {
|
||||
content: "\ea02";
|
||||
}
|
||||
|
||||
.icon-align-center::before {
|
||||
content: "\ea03";
|
||||
}
|
||||
|
||||
.icon-align-left-2::before {
|
||||
content: "\ea04";
|
||||
}
|
||||
|
||||
.icon-app::before {
|
||||
content: "\ea05";
|
||||
}
|
||||
|
||||
.icon-atom::before {
|
||||
content: "\ea06";
|
||||
}
|
||||
|
||||
.icon-attach-87::before {
|
||||
content: "\ea07";
|
||||
}
|
||||
|
||||
.icon-badge::before {
|
||||
content: "\ea08";
|
||||
}
|
||||
|
||||
.icon-bag-16::before {
|
||||
content: "\ea09";
|
||||
}
|
||||
|
||||
.icon-bank::before {
|
||||
content: "\ea0a";
|
||||
}
|
||||
|
||||
.icon-basket-simple::before {
|
||||
content: "\ea0b";
|
||||
}
|
||||
|
||||
.icon-bell-55::before {
|
||||
content: "\ea0c";
|
||||
}
|
||||
|
||||
.icon-bold::before {
|
||||
content: "\ea0d";
|
||||
}
|
||||
|
||||
.icon-book-bookmark::before {
|
||||
content: "\ea0e";
|
||||
}
|
||||
|
||||
.icon-bulb-63::before {
|
||||
content: "\ea0f";
|
||||
}
|
||||
|
||||
.icon-bullet-list-67::before {
|
||||
content: "\ea10";
|
||||
}
|
||||
|
||||
.icon-bus-front-12::before {
|
||||
content: "\ea11";
|
||||
}
|
||||
|
||||
.icon-button-pause::before {
|
||||
content: "\ea12";
|
||||
}
|
||||
|
||||
.icon-button-power::before {
|
||||
content: "\ea13";
|
||||
}
|
||||
|
||||
.icon-calendar-60::before {
|
||||
content: "\ea14";
|
||||
}
|
||||
|
||||
.icon-camera-18::before {
|
||||
content: "\ea15";
|
||||
}
|
||||
|
||||
.icon-caps-small::before {
|
||||
content: "\ea16";
|
||||
}
|
||||
|
||||
.icon-cart::before {
|
||||
content: "\ea17";
|
||||
}
|
||||
|
||||
.icon-chart-bar-32::before {
|
||||
content: "\ea18";
|
||||
}
|
||||
|
||||
.icon-chart-pie-36::before {
|
||||
content: "\ea19";
|
||||
}
|
||||
|
||||
.icon-chat-33::before {
|
||||
content: "\ea1a";
|
||||
}
|
||||
|
||||
.icon-check-2::before {
|
||||
content: "\ea1b";
|
||||
}
|
||||
|
||||
.icon-cloud-download-93::before {
|
||||
content: "\ea1c";
|
||||
}
|
||||
|
||||
.icon-cloud-upload-94::before {
|
||||
content: "\ea1d";
|
||||
}
|
||||
|
||||
.icon-coins::before {
|
||||
content: "\ea1e";
|
||||
}
|
||||
|
||||
.icon-compass-05::before {
|
||||
content: "\ea1f";
|
||||
}
|
||||
|
||||
.icon-controller::before {
|
||||
content: "\ea20";
|
||||
}
|
||||
|
||||
.icon-credit-card::before {
|
||||
content: "\ea21";
|
||||
}
|
||||
|
||||
.icon-delivery-fast::before {
|
||||
content: "\ea22";
|
||||
}
|
||||
|
||||
.icon-double-left::before {
|
||||
content: "\ea23";
|
||||
}
|
||||
|
||||
.icon-double-right::before {
|
||||
content: "\ea24";
|
||||
}
|
||||
|
||||
.icon-email-85::before {
|
||||
content: "\ea25";
|
||||
}
|
||||
|
||||
.icon-gift-2::before {
|
||||
content: "\ea26";
|
||||
}
|
||||
|
||||
.icon-globe-2::before {
|
||||
content: "\ea27";
|
||||
}
|
||||
|
||||
.icon-headphones::before {
|
||||
content: "\ea28";
|
||||
}
|
||||
|
||||
.icon-heart-2::before {
|
||||
content: "\ea29";
|
||||
}
|
||||
|
||||
.icon-html5::before {
|
||||
content: "\ea2a";
|
||||
}
|
||||
|
||||
.icon-image-02::before {
|
||||
content: "\ea2b";
|
||||
}
|
||||
|
||||
.icon-istanbul::before {
|
||||
content: "\ea2c";
|
||||
}
|
||||
|
||||
.icon-key-25::before {
|
||||
content: "\ea2d";
|
||||
}
|
||||
|
||||
.icon-laptop::before {
|
||||
content: "\ea2e";
|
||||
}
|
||||
|
||||
.icon-light-3::before {
|
||||
content: "\ea2f";
|
||||
}
|
||||
|
||||
.icon-link-72::before {
|
||||
content: "\ea30";
|
||||
}
|
||||
|
||||
.icon-lock-circle::before {
|
||||
content: "\ea31";
|
||||
}
|
||||
|
||||
.icon-map-big::before {
|
||||
content: "\ea32";
|
||||
}
|
||||
|
||||
.icon-minimal-down::before {
|
||||
content: "\ea33";
|
||||
}
|
||||
|
||||
.icon-minimal-left::before {
|
||||
content: "\ea34";
|
||||
}
|
||||
|
||||
.icon-minimal-right::before {
|
||||
content: "\ea35";
|
||||
}
|
||||
|
||||
.icon-minimal-up::before {
|
||||
content: "\ea36";
|
||||
}
|
||||
|
||||
.icon-mobile::before {
|
||||
content: "\ea37";
|
||||
}
|
||||
|
||||
.icon-molecule-40::before {
|
||||
content: "\ea38";
|
||||
}
|
||||
|
||||
.icon-money-coins::before {
|
||||
content: "\ea39";
|
||||
}
|
||||
|
||||
.icon-notes::before {
|
||||
content: "\ea3a";
|
||||
}
|
||||
|
||||
.icon-palette::before {
|
||||
content: "\ea3b";
|
||||
}
|
||||
|
||||
.icon-paper::before {
|
||||
content: "\ea3c";
|
||||
}
|
||||
|
||||
.icon-pencil::before {
|
||||
content: "\ea3d";
|
||||
}
|
||||
|
||||
.icon-pin::before {
|
||||
content: "\ea3e";
|
||||
}
|
||||
|
||||
.icon-planet::before {
|
||||
content: "\ea3f";
|
||||
}
|
||||
|
||||
.icon-puzzle-10::before {
|
||||
content: "\ea40";
|
||||
}
|
||||
|
||||
.icon-satisfied::before {
|
||||
content: "\ea41";
|
||||
}
|
||||
|
||||
.icon-scissors::before {
|
||||
content: "\ea42";
|
||||
}
|
||||
|
||||
.icon-send::before {
|
||||
content: "\ea43";
|
||||
}
|
||||
|
||||
.icon-settings-gear-63::before {
|
||||
content: "\ea44";
|
||||
}
|
||||
|
||||
.icon-settings::before {
|
||||
content: "\ea45";
|
||||
}
|
||||
|
||||
.icon-simple-add::before {
|
||||
content: "\ea46";
|
||||
}
|
||||
|
||||
.icon-simple-delete::before {
|
||||
content: "\ea47";
|
||||
}
|
||||
|
||||
.icon-simple-remove::before {
|
||||
content: "\ea48";
|
||||
}
|
||||
|
||||
.icon-single-02::before {
|
||||
content: "\ea49";
|
||||
}
|
||||
|
||||
.icon-single-copy-04::before {
|
||||
content: "\ea4a";
|
||||
}
|
||||
|
||||
.icon-sound-wave::before {
|
||||
content: "\ea4b";
|
||||
}
|
||||
|
||||
.icon-spaceship::before {
|
||||
content: "\ea4c";
|
||||
}
|
||||
|
||||
.icon-square-pin::before {
|
||||
content: "\ea4d";
|
||||
}
|
||||
|
||||
.icon-support-17::before {
|
||||
content: "\ea4e";
|
||||
}
|
||||
|
||||
.icon-tablet-2::before {
|
||||
content: "\ea4f";
|
||||
}
|
||||
|
||||
.icon-tag::before {
|
||||
content: "\ea50";
|
||||
}
|
||||
|
||||
.icon-tap-02::before {
|
||||
content: "\ea51";
|
||||
}
|
||||
|
||||
.icon-tie-bow::before {
|
||||
content: "\ea52";
|
||||
}
|
||||
|
||||
.icon-time-alarm::before {
|
||||
content: "\ea53";
|
||||
}
|
||||
|
||||
.icon-trash-simple::before {
|
||||
content: "\ea54";
|
||||
}
|
||||
|
||||
.icon-triangle-right-17::before {
|
||||
content: "\ea55";
|
||||
}
|
||||
|
||||
.icon-trophy::before {
|
||||
content: "\ea56";
|
||||
}
|
||||
|
||||
.icon-tv-2::before {
|
||||
content: "\ea57";
|
||||
}
|
||||
|
||||
.icon-upload::before {
|
||||
content: "\ea58";
|
||||
}
|
||||
|
||||
.icon-user-run::before {
|
||||
content: "\ea59";
|
||||
}
|
||||
|
||||
.icon-vector::before {
|
||||
content: "\ea5a";
|
||||
}
|
||||
|
||||
.icon-video-66::before {
|
||||
content: "\ea5b";
|
||||
}
|
||||
|
||||
.icon-volume-98::before {
|
||||
content: "\ea5c";
|
||||
}
|
||||
|
||||
.icon-wallet-43::before {
|
||||
content: "\ea5d";
|
||||
}
|
||||
|
||||
.icon-watch-time::before {
|
||||
content: "\ea5e";
|
||||
}
|
||||
|
||||
.icon-wifi::before {
|
||||
content: "\ea5f";
|
||||
}
|
||||
|
||||
.icon-world::before {
|
||||
content: "\ea60";
|
||||
}
|
||||
|
||||
.icon-zoom-split::before {
|
||||
content: "\ea61";
|
||||
}
|
||||
|
||||
.icon-refresh-01::before {
|
||||
content: "\ea62";
|
||||
}
|
||||
|
||||
.icon-refresh-02::before {
|
||||
content: "\ea63";
|
||||
}
|
||||
|
||||
.icon-shape-star::before {
|
||||
content: "\ea64";
|
||||
}
|
||||
|
||||
.icon-components::before {
|
||||
content: "\ea65";
|
||||
}
|
||||
|
|
@ -1,77 +0,0 @@
|
|||
/*
|
||||
=========================================================
|
||||
* Black Dashboard Angular - v1.2.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/black-dashboard-angular
|
||||
* Copyright 2020 Creative Tim (https://www.creative-tim.com)
|
||||
* Licensed under MIT (https://github.com/creativetimofficial/argon-dashboard/blob/master/LICENSE.md)
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
|
||||
*/
|
||||
.tim-row {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.tim-white-buttons {
|
||||
background-color: #777777;
|
||||
}
|
||||
|
||||
.typography-line {
|
||||
padding-left: 25%;
|
||||
margin-bottom: 35px;
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.typography-line span {
|
||||
bottom: 10px;
|
||||
color: #c0c1c2;
|
||||
display: block;
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
line-height: 13px;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
width: 260px;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.tim-row {
|
||||
padding-top: 60px;
|
||||
}
|
||||
|
||||
.tim-row h3 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.offline-doc .page-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.offline-doc .footer {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
bottom: 0;
|
||||
color: #fff;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@media all and (min-width: 992px) {
|
||||
.sidebar .nav>li.active-pro {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.card.card-upgrade .card-category {
|
||||
max-width: 530px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 156 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 63 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 150 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 198 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 61 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 226 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 133 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 187 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 163 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 194 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 145 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 140 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 148 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 206 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 171 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 137 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 75 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 84 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 114 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 94 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 63 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 173 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 71 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 91 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 65 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 200 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 175 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 207 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 172 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 200 KiB |
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue